@khanacademy/perseus-editor 11.2.0 → 11.4.0

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, WidgetJsonifyDeprecated, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, ColorPicker, DashPicker, ArrowPicker, ElementContainer, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, lockedFigureColors, lockedFigureFillStyles, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 import * as React from 'react';
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import _ from 'underscore';
 import createReactClass from 'create-react-class';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
@@ -13,15 +13,15 @@ import { View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
+import { Checkbox as Checkbox$1, LabeledTextField, TextField } from '@khanacademy/wonder-blocks-form';
 import ReactDOM from 'react-dom';
 import { point, vector, number } from '@khanacademy/kmath';
 import * as KAS from '@khanacademy/kas';
+import Button from '@khanacademy/wonder-blocks-button';
+import { HeadingSmall, HeadingXSmall, LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
-import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import { LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
-import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import caretDoubleDownIcon from '@phosphor-icons/core/bold/caret-double-down-bold.svg';
@@ -37,7 +37,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "11.2.0";
+const libVersion = "11.4.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -227,7 +227,7 @@ class SectionControlButton extends React.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$L.button
+      style: styles$R.button
     }, ({
       hovered,
       focused,
@@ -235,7 +235,7 @@ class SectionControlButton extends React.Component {
     }) => /*#__PURE__*/React.createElement(InlineIcon$a, icon));
   }
 }
-const styles$L = StyleSheet.create({
+const styles$R = StyleSheet.create({
   button: {
     backgroundColor: color.gold,
     margin: 2,
@@ -20740,13 +20740,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$K.expanded : styles$K.collapsed;
+  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$K = StyleSheet.create({
+const styles$Q = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20779,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$J.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$J.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$J.errorExplanation
+      style: styles$P.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$J.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20797,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$J = StyleSheet.create({
+const styles$P = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23638,12 +23638,10 @@ class CombinedHintsEditor extends React.Component {
     super(...args);
     this.handleHintChange = (i, newProps, cb, silent) => {
       // TODO(joel) - lens
-      const hints = _(this.props.hints).clone();
+      const hints = [...this.props.hints];
       hints[i] = _.extend({}, this.serializeHint(i, {
         keepDeletedWidgets: true
       }), newProps);
-
-      // @ts-expect-error - TS2740 - Type 'Hint' is missing the following properties from type 'readonly Hint[]': length, concat, join, slice, and 18 more.
       this.props.onChange({
         hints: hints
       }, cb, silent);
@@ -23653,21 +23651,16 @@ class CombinedHintsEditor extends React.Component {
       if (!confirm("Are you sure you want to delete this hint?")) {
         return;
       }
-      const hints = _(this.props.hints).clone();
-      // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+      const hints = [...this.props.hints];
       hints.splice(i, 1);
-      // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
       this.props.onChange({
         hints: hints
       });
     };
     this.handleHintMove = (i, dir) => {
-      const hints = _(this.props.hints).clone();
-      // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
+      const hints = [...this.props.hints];
       const hint = hints.splice(i, 1)[0];
-      // @ts-expect-error - TS2339 - Property 'splice' does not exist on type 'Hint'.
       hints.splice(i + dir, 0, hint);
-      // @ts-expect-error - TS2322 - Type 'Hint' is not assignable to type 'readonly Hint[]'.
       this.props.onChange({
         hints: hints
       }, () => {
@@ -23677,10 +23670,10 @@ class CombinedHintsEditor extends React.Component {
       });
     };
     this.addHint = () => {
-      const hints = _(this.props.hints).clone()
-      // @ts-expect-error - TS2339 - Property 'concat' does not exist on type 'Hint'.
-      .concat([{
-        content: ""
+      const hints = this.props.hints.concat([{
+        content: "",
+        images: {},
+        widgets: {}
       }]);
       this.props.onChange({
         hints: hints
@@ -23800,65 +23793,65 @@ class ItemExtrasEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-answer-options"
     }, /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show calculator:",
+      label: "Show calculator",
       infoTip: "Use the calculator when completing difficult calculations is NOT the intent of the question. DON\u2019T use the calculator when testing the student\u2019s ability to complete different types of computations.",
       checked: this.props.calculator,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          calculator: e.target.checked
+          calculator: newCheckedState
         });
       }
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show financial calculator:",
+      label: "Show financial calculator",
       infoTip: "This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",
       checked: this.shouldShowFinancialCalculatorOptions(),
-      onChange: e => {
+      onChange: newCheckedState => {
         // If the financial calculator is unchecked,
         // these need to be reset. All checked by
         // default.
         this.props.onChange({
-          financialCalculatorMonthlyPayment: e.target.checked,
-          financialCalculatorTotalAmount: e.target.checked,
-          financialCalculatorTimeToPayOff: e.target.checked
+          financialCalculatorMonthlyPayment: newCheckedState,
+          financialCalculatorTotalAmount: newCheckedState,
+          financialCalculatorTimeToPayOff: newCheckedState
         });
       }
     }), this.shouldShowFinancialCalculatorOptions() && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Include monthly payment:",
+      label: "Include monthly payment",
       infoTip: "This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",
       checked: this.props.financialCalculatorMonthlyPayment,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          financialCalculatorMonthlyPayment: e.target.checked
+          financialCalculatorMonthlyPayment: newCheckedState
         });
       },
       indent: true
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Include total amount:",
+      label: "Include total amount",
       infoTip: "This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",
       checked: this.props.financialCalculatorTotalAmount,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          financialCalculatorTotalAmount: e.target.checked
+          financialCalculatorTotalAmount: newCheckedState
         });
       },
       indent: true
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Include time-to-pay-off:",
+      label: "Include time-to-pay-off",
       infoTip: "This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",
       checked: this.props.financialCalculatorTimeToPayOff,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          financialCalculatorTimeToPayOff: e.target.checked
+          financialCalculatorTimeToPayOff: newCheckedState
         });
       },
       indent: true
     })), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show periodic table:",
+      label: "Show periodic table",
       infoTip: "This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",
       checked: this.props.periodicTable,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          periodicTable: e.target.checked,
+          periodicTable: newCheckedState,
           // If the periodic table is unchecked,
           // this needs to be reset. If table is
           // checked, it should already be false.
@@ -23866,40 +23859,40 @@ class ItemExtrasEditor extends React.Component {
         });
       }
     }), this.props.periodicTable && /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Include key/legend with periodic table:",
+      label: "Include key/legend with periodic table",
       infoTip: "Include a key for HS courses; omit for AP chemistry.",
       checked: this.props.periodicTableWithKey,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          periodicTableWithKey: e.target.checked
+          periodicTableWithKey: newCheckedState
         });
       },
       indent: true
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show z table (statistics):",
+      label: "Show z table (statistics)",
       infoTip: "This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.",
       checked: this.props.zTable,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          zTable: e.target.checked
+          zTable: newCheckedState
         });
       }
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show t table (statistics):",
+      label: "Show t table (statistics)",
       infoTip: "This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.",
       checked: this.props.tTable,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          tTable: e.target.checked
+          tTable: newCheckedState
         });
       }
     }), /*#__PURE__*/React.createElement(ItemExtraCheckbox, {
-      label: "Show chi-squared table (statistics):",
+      label: "Show chi-squared table (statistics)",
       infoTip: "This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions.",
       checked: this.props.chi2Table,
-      onChange: e => {
+      onChange: newCheckedState => {
         this.props.onChange({
-          chi2Table: e.target.checked
+          chi2Table: newCheckedState
         });
       }
     })));
@@ -23916,15 +23909,22 @@ ItemExtrasEditor.defaultProps = {
   tTable: false,
   zTable: false
 };
-const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement("div", {
-  style: {
-    marginLeft: props.indent ? "10px" : "0px"
-  }
-}, /*#__PURE__*/React.createElement("label", null, props.label, /*#__PURE__*/React.createElement("input", {
-  type: "checkbox",
+const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
+}, /*#__PURE__*/React.createElement(Checkbox$1, {
+  label: /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row"
+    }
+  }, props.label, " ", /*#__PURE__*/React.createElement(InfoTip$l, null, props.infoTip)),
   checked: props.checked,
-  onChange: props.onChange
-})), /*#__PURE__*/React.createElement(InfoTip$l, null, props.infoTip));
+  onChange: newCheckedState => props.onChange(newCheckedState)
+}));
+const styles$O = StyleSheet.create({
+  indented: {
+    marginInlineStart: spacing.large_24
+  }
+});
 
 const ITEM_DATA_VERSION = itemDataVersion;
 class ItemEditor extends React.Component {
@@ -24591,7 +24591,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$I.baseButton, color === "green" && styles$I.green, color === "orange" && styles$I.orange),
+      className: css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24606,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$I = StyleSheet.create({
+const styles$N = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24826,23 +24826,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$H.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.container)
+    className: css(styles$M.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$H.row, styles$H.rowHeading)
+    className: css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$H.containerHeader)
+    className: "pod-title " + css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnRight)
+    className: css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24855,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.container)
+    className: css(styles$M.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft, styles$H.containerHeader)
+    className: css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24872,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$H.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.containerHeader, styles$H.previewCollectionHeader)
+    className: css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$H.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.container)
+    className: css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$H.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnRight)
+    className: css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$H.contentIndent)
+    className: css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25016,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$H.sticky)
+    className: css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25028,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$H.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25046,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$H.sticky)
+    className: css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$H.hintEditor),
+    className: css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25067,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$H.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25086,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$H.tagsEditor)
+    className: css(styles$M.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,23 +25119,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$H.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$H.verticalFlip)
+      className: css(styles$M.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$H.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$H.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25143,7 +25143,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$H.arrayElement, !elementIsLeaf && styles$H.arrayElementAndNotLeaf)
+      className: css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25169,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$H.objectElement)
+    className: css(styles$M.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25336,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$H = StyleSheet.create({
+const styles$M = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25500,7 +25500,6 @@ const StatefulEditorPage = createReactClass({
 });
 
 const {
-  PropCheckBox: PropCheckBox$c,
   TextListEditor: TextListEditor$4
 } = components;
 const Categorizer = Categorizer$1.widget;
@@ -25517,11 +25516,14 @@ class CategorizerEditor extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$c, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Randomize item order",
-      labelAlignment: "right",
-      randomizeItems: this.props.randomizeItems,
-      onChange: this.props.onChange
+      checked: this.props.randomizeItems,
+      onChange: value => {
+        this.props.onChange({
+          randomizeItems: value
+        });
+      }
     })), "Categories:", /*#__PURE__*/React.createElement(TextListEditor$4, {
       options: this.props.categories,
       onChange: cat => {
@@ -25629,8 +25631,7 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$k,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$k
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25786,14 +25787,22 @@ class CSProgramEditor extends React.Component {
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+    })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show Editor",
-      showEditor: this.props.showEditor,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$b, {
+      checked: this.props.showEditor,
+      onChange: value => {
+        this.props.onChange({
+          showEditor: value
+        });
+      }
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show Buttons",
-      showButtons: this.props.showButtons,
-      onChange: this.props.onChange
+      checked: this.props.showButtons,
+      onChange: value => {
+        this.props.onChange({
+          showButtons: value
+        });
+      }
     }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("label", null, "Settings:", /*#__PURE__*/React.createElement(PairsEditor$1, {
       name: "settings",
       pairs: this.props.settings,
@@ -25817,7 +25826,7 @@ CSProgramEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = components;
 class DefinitionEditor extends React.Component {
   constructor(..._args) {
@@ -25837,7 +25846,7 @@ class DefinitionEditor extends React.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$9, {
+    }, /*#__PURE__*/React.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26246,7 +26255,7 @@ ExampleWidgetEditor.defaultProps = {
 };
 
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26270,14 +26279,14 @@ class ExplanationEditor extends React.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$8, {
+    }, /*#__PURE__*/React.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26314,9 +26323,106 @@ ExplanationEditor.propTypes = _extends({}, Changeable.propTypes, {
 ExplanationEditor.widgetName = "explanation";
 ExplanationEditor.defaultProps = defaultExplanationProps;
 
+const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [styles$L.grow, style]
+    });
+  }
+}
+const styles$L = StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
 const PT = PropTypes;
 
-// Takes an array of components to sort
+/**
+ * Takes an array of components to sort.
+ * As of 08/05/24, there are two sortable components
+ * (one in perseus and one in perseus-editor).
+ * As far as I can tell, this one is only used in ExpressionEditor.
+ */
 // eslint-disable-next-line react/no-unsafe
 const SortableArea = createReactClass({
   displayName: "SortableArea",
@@ -26473,6 +26579,7 @@ const SortableItem = createReactClass({
     e.preventDefault();
   },
   render: function () {
+    // I think these might be getting styles from Webapp
     let dragState = "sortable-disabled";
     if (this.props.dragging) {
       dragState = "sortable-dragging";
@@ -26481,7 +26588,7 @@ const SortableItem = createReactClass({
     }
     return /*#__PURE__*/React.createElement("li", {
       draggable: this.props.draggable,
-      className: dragState,
+      className: [dragState, css(styles$K.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26489,11 +26596,14 @@ const SortableItem = createReactClass({
     }, this.props.component);
   }
 });
+const styles$K = StyleSheet.create({
+  sortableListItem: {
+    margin: "5px 0"
+  }
+});
 
 const {
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a,
-  TextInput: TextInput$7
+  InfoTip: InfoTip$i
 } = components;
 
 // types for iterables
@@ -26532,8 +26642,8 @@ const _makeNewKey = answerForms => {
   return usedKeys.length;
 };
 class ExpressionEditor extends React.Component {
-  constructor(...args) {
-    super(...args);
+  constructor(_props) {
+    super(_props);
     this.serialize = () => {
       const formSerializables = ["value", "form", "simplify", "considered",
       // it's a little weird to serialize the react key, but saves some
@@ -26662,11 +26772,17 @@ class ExpressionEditor extends React.Component {
       this.refs.expression.insert(str);
     };
     // called when the function variables change
-    this.handleFunctions = e => {
+    this.handleFunctions = value => {
+      this.setState({
+        functionsInternal: value
+      });
       const newProps = {};
-      newProps.functions = e.target.value.split(/[ ,]+/).filter(isTruthy);
+      newProps.functions = value.split(/[ ,]+/).filter(isTruthy);
       this.props.onChange(newProps);
     };
+    this.state = {
+      functionsInternal: this.props.functions.join(" ")
+    };
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -26704,78 +26820,69 @@ class ExpressionEditor extends React.Component {
     }, obj)));
     const sortable = /*#__PURE__*/React.createElement(SortableArea, {
       components: answerOptions,
-      onReorder: this.handleReorder,
-      className: "answer-options-list"
+      onReorder: this.handleReorder
     });
 
     // checkboxes to choose which sets of input buttons are shown
     const buttonSetChoices = buttonSetsList.map(name => {
       // The first one gets special cased to always be checked, disabled,
       // and float left.
-      const isFirst = name === "basic";
-      const checked = this.props.buttonSets.includes(name) || isFirst;
-      return /*#__PURE__*/React.createElement("label", {
-        className: "button-set-label",
-        key: name
-      }, /*#__PURE__*/React.createElement("input", {
-        type: "checkbox",
+      const isBasic = name === "basic";
+      const checked = this.props.buttonSets.includes(name) || isBasic;
+      return /*#__PURE__*/React.createElement(Checkbox$1, {
+        key: name,
+        label: name,
         checked: checked,
-        disabled: isFirst,
+        disabled: isBasic,
         onChange: () => this.handleButtonSet(name)
-      }), name);
+      });
     });
-    const {
-      TeX
-    } = Dependencies.getDependencies(); // OldExpression only
-
-    buttonSetChoices.unshift( /*#__PURE__*/React.createElement("label", {
-      className: "button-set-label",
-      key: "show-div"
-    }, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
+    buttonSetChoices.unshift( /*#__PURE__*/React.createElement(Checkbox$1, {
+      key: "show \xF7 button",
+      label: "show \xF7 button",
+      checked: this.props.buttonSets.includes("basic+div"),
       onChange: this.handleToggleDiv
-    }), /*#__PURE__*/React.createElement("span", {
-      className: "show-div-button"
-    }, "show ", /*#__PURE__*/React.createElement(TeX, null, "\\div"), " button")));
-    return /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-expression-editor"
-    }, /*#__PURE__*/React.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
-      value: this.props.visibleLabel,
+    }));
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(HeadingSmall, null, "Global Options"), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Visible label",
+      value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React.createElement(TextInput$7, {
-      value: this.props.ariaLabel,
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Aria label",
+      value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React.createElement("a", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writting accessible labels, please see", " ", /*#__PURE__*/React.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
-    }, "this article.")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$a, {
-      times: this.props.times,
-      onChange: this.props.onChange,
-      labelAlignment: "right",
-      label: "Use \xD7 for rendering multiplication instead of a center dot."
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Function variables: ", /*#__PURE__*/React.createElement("input", {
-      type: "text",
-      defaultValue: this.props.functions.join(" "),
+    }, "this article.")))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(LabeledTextField, {
+      label: "Function variables",
+      value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Answers"), /*#__PURE__*/React.createElement("p", {
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means \"f of x\" and not \"f times x\"."))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Use \xD7 instead of \u22C5 for multiplication",
+      checked: this.props.times,
+      onChange: value => {
+        this.props.onChange({
+          times: value
+        });
+      }
+    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY)
+    }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
         margin: "4px 0"
       }
-    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
-      className: "simple-button orange",
-      style: {
-        fontSize: 13
-      },
-      onClick: this.newAnswer,
-      type: "button"
+    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.newAnswer
     }, "Add new answer")));
   }
 }
@@ -26799,17 +26906,17 @@ class AnswerOption extends React.Component {
     this.state = {
       deleteFocused: false
     };
-    this.handleDeleteBlur = () => {
-      this.setState({
-        deleteFocused: false
-      });
-    };
     this.change = (...args) => {
       return Changeable.change.apply(this, args);
     };
     this.handleImSure = () => {
       this.props.onDelete();
     };
+    this.handleCancelDelete = () => {
+      this.setState({
+        deleteFocused: false
+      });
+    };
     this.handleDelete = () => {
       this.setState({
         deleteFocused: true
@@ -26823,53 +26930,100 @@ class AnswerOption extends React.Component {
     };
   }
   render() {
-    let removeButton = null;
-    if (this.state.deleteFocused) {
-      removeButton = /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleImSure,
-        onBlur: this.handleDeleteBlur
-      }, "I'm sure!");
-    } else {
-      removeButton = /*#__PURE__*/React.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleDelete
-      }, "Delete");
-    }
+    const removeButton = this.state.deleteFocused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleImSure,
+      color: "destructive"
+    }, "I'm sure!"), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.small_12
+    }), /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleCancelDelete,
+      light: true
+    }, "Cancel")) : /*#__PURE__*/React.createElement(Button, {
+      size: "small",
+      onClick: this.handleDelete,
+      color: "destructive",
+      light: true
+    }, "Delete");
+    const answerStatusCss = css(styles$J.answerStatus, this.props.considered === "wrong" && styles$J.answerStatusWrong, this.props.considered === "correct" && styles$J.answerStatusCorrect, this.props.considered === "ungraded" && styles$J.answerStatusUngraded);
     return /*#__PURE__*/React.createElement("div", {
-      className: "expression-answer-option"
+      className: css(styles$J.answerOption)
     }, /*#__PURE__*/React.createElement("div", {
-      className: "answer-handle"
+      className: css(styles$J.answerHandle)
     }), /*#__PURE__*/React.createElement("div", {
-      className: "answer-body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "answer-considered"
-    }, /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.answerBody)
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
       onClick: this.toggleConsidered,
-      className: "answer-status " + this.props.considered
-    }, this.props.considered), /*#__PURE__*/React.createElement("div", {
-      className: "answer-expression"
-    }, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
-      className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
-      form: this.props.form,
-      onChange: this.props.onChange,
-      labelAlignment: "right",
-      label: "Answer expression must have the same form."
+      className: answerStatusCss
+    }, this.props.considered), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Expression, this.props.expressionProps))), /*#__PURE__*/React.createElement("div", {
+      className: css(styles$J.paddedY, styles$J.paddedX)
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Answer expression must have the same form.",
+      checked: this.props.form,
+      onChange: value => {
+        this.props.onChange({
+          form: value
+        });
+      }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
-      className: "answer-option"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$a, {
-      simplify: this.props.simplify,
-      onChange: this.props.onChange,
-      labelAlignment: "right",
-      label: "Answer expression must be fully expanded and simplified."
+      className: css(styles$J.paddedY, styles$J.paddedX)
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
+      label: "Answer expression must be fully expanded and simplified.",
+      checked: this.props.simplify,
+      onChange: value => {
+        this.props.onChange({
+          simplify: value
+        });
+      }
     }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response \"Your answer is not fully expanded and simplified.\""))), /*#__PURE__*/React.createElement("div", {
-      className: "remove-container"
+      className: css(styles$J.buttonRow, styles$J.paddedY)
     }, removeButton)));
   }
 }
+const styles$J = StyleSheet.create({
+  paddedX: {
+    paddingLeft: spacing.xSmall_8,
+    paddingRight: spacing.xSmall_8
+  },
+  paddedY: {
+    paddingTop: spacing.xxSmall_6,
+    paddingBottom: spacing.xxSmall_6
+  },
+  answerOption: {
+    border: "1px solid #ddd",
+    borderRadius: "3px",
+    display: "flex"
+  },
+  answerHandle: {
+    // textured draggy handle
+    background: "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==) no-repeat 50% 50%",
+    borderRight: "1px solid #ddd",
+    cursor: "move",
+    width: "20px",
+    minWidth: "20px"
+  },
+  answerStatus: {
+    border: "none",
+    userSelect: "none",
+    width: "100px",
+    paddingTop: spacing.small_12,
+    paddingBottom: spacing.small_12
+  },
+  answerStatusWrong: {
+    backgroundColor: color.fadedRed16
+  },
+  answerStatusCorrect: {
+    backgroundColor: color.fadedGreen16
+  },
+  answerStatusUngraded: {
+    backgroundColor: color.fadedBlue16
+  },
+  answerBody: {},
+  buttonRow: {
+    display: "flex"
+  }
+});
 
 const {
   InlineIcon: InlineIcon$3,
@@ -26922,10 +27076,10 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("label", {
-      className: css(styles$G.title)
+      className: css(styles$I.title)
     }, "Title:", " ", /*#__PURE__*/React.createElement(TextInput$6, {
       value: this.props.title,
-      className: css(styles$G.input)
+      className: css(styles$I.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26950,7 +27104,7 @@ class GradedGroupEditor extends React.Component {
     }, /*#__PURE__*/React.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$G.hintsTitle)
+      className: css(styles$I.hintsTitle)
     }, "Hint"), /*#__PURE__*/React.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -26987,7 +27141,7 @@ GradedGroupEditor.defaultProps = {
   images: {},
   hint: null
 };
-const styles$G = StyleSheet.create({
+const styles$I = StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27066,7 +27220,6 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 const {
   ButtonGroup: ButtonGroup$4,
   InfoTip: InfoTip$h,
-  PropCheckBox: PropCheckBox$9,
   RangeInput: RangeInput$6
 } = components;
 const defaultBackgroundImage$3 = {
@@ -27496,10 +27649,14 @@ const GraphSettings = createReactClass({
       onChange: this.change("markings")
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.change
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
     }))), _.contains(this.props.editableSettings, "image") && /*#__PURE__*/React.createElement("div", {
       className: "image-settings"
     }, /*#__PURE__*/React.createElement("div", null, "Background image:"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", {
@@ -27527,16 +27684,24 @@ const GraphSettings = createReactClass({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.change
+      checked: this.props.showRuler,
+      onChange: value => {
+        this.change({
+          showRuler: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show protractor",
-      showProtractor: this.props.showProtractor,
-      onChange: this.change
+      checked: this.props.showProtractor,
+      onChange: value => {
+        this.change({
+          showProtractor: value
+        });
+      }
     }))), this.props.showRuler && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React.createElement("select", {
       onChange: this.changeRulerLabel,
       value: this.props.rulerLabel
@@ -27736,9 +27901,6 @@ GroupEditor.defaultProps = {
   metadata: undefined
 };
 
-const {
-  PropCheckBox: PropCheckBox$8
-} = components;
 /**
  * This is used for editing a name/value pair.
  */
@@ -27860,14 +28022,22 @@ class IframeEditor extends React.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React.createElement(PropCheckBox$8, {
+    })), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Allow full screen",
-      allowFullScreen: this.props.allowFullScreen,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PropCheckBox$8, {
+      checked: this.props.allowFullScreen,
+      onChange: value => {
+        this.props.onChange({
+          allowFullScreen: value
+        });
+      }
+    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Allow iframe content to redirect the page",
-      allowTopNavigation: this.props.allowTopNavigation,
-      onChange: this.props.onChange
+      checked: this.props.allowTopNavigation,
+      onChange: value => {
+        this.props.onChange({
+          allowTopNavigation: value
+        });
+      }
     }));
   }
 }
@@ -28326,13 +28496,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$F.outerWrapper
+    style: styles$H.outerWrapper
   }, /*#__PURE__*/React.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$F = StyleSheet.create({
+const styles$H = StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29378,16 +29548,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React.createElement("label", {
-    className: css(styles$E.label)
+    className: css(styles$G.label)
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$E.row, style]
+    style: [styles$G.row, style]
   }, labelSide === "start" || /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$E.spaceEnd
+    style: styles$G.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React.createElement(LabelSmall, {
-    style: styles$E.spaceStart
+    style: styles$G.spaceStart
   }, label)));
 };
-const styles$E = StyleSheet.create({
+const styles$G = StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29405,98 +29575,6 @@ const styles$E = StyleSheet.create({
   }
 });
 
-const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [styles$D.grow, style]
-    });
-  }
-}
-const styles$D = StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-
 function Heading({
   title,
   isOpen,
@@ -29504,11 +29582,11 @@ function Heading({
   onToggle
 }) {
   return /*#__PURE__*/React.createElement(Clickable, {
-    style: [styles$C.container, !isCollapsible && styles$C.notClickable],
+    style: [styles$F.container, !isCollapsible && styles$F.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
   }, () => /*#__PURE__*/React.createElement(View, {
-    style: styles$C.heading
+    style: styles$F.heading
   }, /*#__PURE__*/React.createElement(LabelLarge, {
     style: {
       fontSize: 14,
@@ -29518,7 +29596,7 @@ function Heading({
     isExpanded: isOpen
   })));
 }
-const styles$C = StyleSheet.create({
+const styles$F = StyleSheet.create({
   container: {
     marginTop: spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29679,6 +29757,22 @@ function getDefaultGraphStartCoords(graph, range, step) {
       return getQuadraticCoords(_extends({}, graph, {
         startCoords: undefined
       }), range, step);
+    case "point":
+      return getPointCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "polygon":
+      return getPolygonCoords(_extends({}, graph, {
+        startCoords: undefined
+      }), range, step);
+    case "angle":
+      return getAngleCoords({
+        graph: _extends({}, graph, {
+          startCoords: undefined
+        }),
+        range,
+        step
+      });
     default:
       return undefined;
   }
@@ -29710,6 +29804,36 @@ const getQuadraticEquation = startCoords => {
   const c = (p2[0] * p3[0] * (p2[0] - p3[0]) * p1[1] + p3[0] * p1[0] * (p3[0] - p1[0]) * p2[1] + p1[0] * p2[0] * (p1[0] - p2[0]) * p3[1]) / denom;
   return "y = " + a.toFixed(3) + "x^2 + " + b.toFixed(3) + "x + " + c.toFixed(3);
 };
+const shouldShowStartCoordsUI = (flags, graph) => {
+  var _flags$mafs, _flags$mafs2, _flags$mafs3, _flags$mafs4, _flags$mafs5;
+  // TODO(LEMS-2228): Remove flags once this is fully released
+  const startCoordsUiPhase1Types = ["linear", "linear-system", "ray", "segment", "circle"];
+  const startCoordsUiPhase2Types = ["sinusoid", "quadratic"];
+  const startCoordsPhase1 = flags == null || (_flags$mafs = flags.mafs) == null ? void 0 : _flags$mafs["start-coords-ui-phase-1"];
+  const startCoordsPhase2 = flags == null || (_flags$mafs2 = flags.mafs) == null ? void 0 : _flags$mafs2["start-coords-ui-phase-2"];
+  const startCoordsPoint = flags == null || (_flags$mafs3 = flags.mafs) == null ? void 0 : _flags$mafs3["start-coords-ui-point"];
+  const startCoordsPolygon = flags == null || (_flags$mafs4 = flags.mafs) == null ? void 0 : _flags$mafs4["start-coords-ui-polygon"];
+  const startCoordsAngle = flags == null || (_flags$mafs5 = flags.mafs) == null ? void 0 : _flags$mafs5["start-coords-ui-angle"];
+  if (startCoordsPhase1 && startCoordsUiPhase1Types.includes(graph.type)) {
+    return true;
+  }
+  if (startCoordsPhase2 && startCoordsUiPhase2Types.includes(graph.type)) {
+    return true;
+  }
+  if (startCoordsAngle && graph.type === "angle") {
+    return true;
+  }
+  if (startCoordsPoint && graph.type === "point" && graph.numPoints !== "unlimited") {
+    return true;
+  }
+  if (startCoordsPolygon && graph.type === "polygon" && graph.numSides !== "unlimited" && (
+  // Pre-initialized graph with undefined snapTo value
+  // initializes to snapTo="grid"
+  graph.snapTo === "grid" || graph.snapTo === undefined)) {
+    return true;
+  }
+  return false;
+};
 
 /**
  * Dropdown for selecting a locked figure to add to an interactive graph.
@@ -29726,17 +29850,17 @@ const LockedFigureSelect = props => {
   const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
   const figureTypesCurrent = props.showM2bFeatures ? [...figureTypes, "function"] : figureTypes;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$B.container
+    style: styles$E.container
   }, /*#__PURE__*/React.createElement(ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$B.addElementSelect
+    style: styles$E.addElementSelect
   }, figureTypesCurrent.map(figureType => /*#__PURE__*/React.createElement(ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$B = StyleSheet.create({
+const styles$E = StyleSheet.create({
   container: {
     marginTop: spacing.xSmall_8
   },
@@ -29746,6 +29870,45 @@ const styles$B = StyleSheet.create({
   }
 });
 
+/**
+ * This is a custom text field of type="number" for use in Perseus Editors.
+ *
+ * This makes it so that the text field's input number updates on scroll
+ * without scrolling the page.
+ *
+ * NOTE 1: Native HTML number inputs do not update the number value on scroll,
+ * they only scroll the page. Inputs in React do NOT work this way (explanation
+ * here: https://stackoverflow.com/a/68266494). By default, scrolling on a
+ * focused number input in React causes BOTH the input value to change AND
+ * the page to scroll. The behavior in this component is an improvement on
+ * the React behavior, but it's the opposite of the native HTML behavior.
+ *
+ * NOTE 2: Firefox seems to have a custom override for this. Even with this
+ * stopPropogation, Firefox matches the native HTML behavior.
+ */
+const ScrolllessNumberTextField = props => {
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    const ref = inputRef.current;
+
+    // stopPropogation makes it so that the page scroll event is not
+    // triggered when the input is focused and the user scrolls.
+    // The input value will still change on scroll.
+    const ignoreScroll = e => {
+      e.stopPropagation();
+    };
+    ref == null || ref.addEventListener("wheel", ignoreScroll);
+    return () => {
+      ref == null || ref.removeEventListener("wheel", ignoreScroll);
+    };
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(TextField, _extends({
+    type: "number"
+  }, props, {
+    ref: inputRef
+  }));
+};
+
 const AngleInput = props => {
   const {
     angle,
@@ -29767,19 +29930,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$D.row
   }, "angle (degrees)", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
+  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$A.textField
+    style: styles$D.textField
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }));
 };
-const styles$A = StyleSheet.create({
+const styles$D = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29828,32 +29990,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$z.row, style]
+    style: [styles$C.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$C.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
+  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
-    style: [styles$z.textField, error ? styles$z.errorField : undefined]
+    style: [styles$C.textField, error ? styles$C.errorField : undefined]
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$C.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(TextField, {
-    type: "number",
+  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
-    style: [styles$z.textField, error ? styles$z.errorField : undefined]
+    style: [styles$C.textField, error ? styles$C.errorField : undefined]
   })));
 };
-const styles$z = StyleSheet.create({
+const styles$C = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29886,14 +30046,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React.createElement(AccordionSection, {
     expanded: expanded,
     onToggle: onToggle,
-    style: [styles$y.container, containerStyle],
-    headerStyle: styles$y.accordionHeader,
+    style: [styles$B.container, containerStyle],
+    headerStyle: styles$B.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$y.accordionPanel, panelStyle]
+    style: [styles$B.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$y = StyleSheet.create({
+const styles$B = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -29924,13 +30084,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color$1}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$x.colorSwatch, {
+    style: [styles$A.colorSwatch, {
       border: `4px solid ${lockedFigureColors[color$1]}`,
       backgroundColor: filled ? lockedFigureColors[color$1] : color.white
     }]
   });
 };
-const styles$x = StyleSheet.create({
+const styles$A = StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -29949,10 +30109,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: [styles$w.row, style]
+    style: [styles$z.row, style]
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$z.row
   }, "color", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -29971,11 +30131,14 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$w = StyleSheet.create({
+const styles$z = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    // Set minWidth to "auto" to prevent the component from bleeding
+    // into the margins. (minWidth is 0 by default.)
+    minWidth: "auto"
   }
 });
 
@@ -29987,17 +30150,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$v.container, {
+    style: [styles$y.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$v.innerCircle, {
+    style: [styles$y.innerCircle, {
       backgroundColor: lockedFigureColors[color],
-      opacity: lockedFigureFillStyles[fillStyle]
+      opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$v = StyleSheet.create({
+const styles$y = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30016,6 +30179,40 @@ const styles$v = StyleSheet.create({
   }
 });
 
+const LineStrokeSelect = props => {
+  const {
+    selectedValue,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$x.lineStrokeSelect
+  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxxSmall_4
+  }), /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: selectedValue,
+    onChange: onChange
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React.createElement(OptionItem, {
+    value: "solid",
+    label: "solid"
+  }), /*#__PURE__*/React.createElement(OptionItem, {
+    value: "dashed",
+    label: "dashed"
+  })));
+};
+const styles$x = StyleSheet.create({
+  lineStrokeSelect: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
+  }
+});
+
 /**
  * The part of a locked figure settings panel that contains actions
  * for this panel and its associated locked figure, including
@@ -30028,40 +30225,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$u.container
+    style: styles$w.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$u.deleteButton
+    style: styles$w.deleteButton
   }, "Delete"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretUpIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React.createElement(IconButton, {
     icon: caretDoubleDownIcon,
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }));
 };
-const styles$u = StyleSheet.create({
+const styles$w = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30108,7 +30305,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React.createElement(View, {
-      style: styles$t.row
+      style: styles$v.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(EllipseSwatch, {
@@ -30117,19 +30314,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$t.row
+    style: styles$v.row
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$t.spaceUnder,
+    style: styles$v.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$t.spaceUnder
+    style: styles$v.spaceUnder
   }, /*#__PURE__*/React.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$t.spaceUnder,
+    style: styles$v.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30141,7 +30338,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(View, {
-    style: [styles$t.row, styles$t.spaceUnder]
+    style: [styles$v.row, styles$v.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30149,7 +30346,7 @@ const LockedEllipseSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$t.row
+    style: [styles$v.row, styles$v.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30164,25 +30361,200 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$t.row
-  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
+  }))))), /*#__PURE__*/React.createElement(LineStrokeSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
     })
+  }), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$v = StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: spacing.xSmall_8
+  },
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
+  }
+});
+
+const LineSwatch = props => {
+  const {
+    color,
+    lineStyle
+  } = props;
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles$u.container
+  }, /*#__PURE__*/React.createElement(View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$u.lineSwatch, {
+      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
+    }]
+  }));
+};
+const styles$u = StyleSheet.create({
+  container: {
+    backgroundColor: color.white,
+    justifyContent: "center",
+    padding: spacing.xSmall_8,
+    borderRadius: spacing.xxxSmall_4
+  },
+  lineSwatch: {
+    width: 40
+  }
+});
+
+/**
+ * LockedFunctionSettings is a component that allows the user to edit the
+ * settings of specifically a locked function on the graph.
+ *
+ * Used in the interactive graph editor's locked figures section.
+ */
+const LockedFunctionSettings = props => {
+  const {
+    color: lineColor,
+    strokeStyle,
+    equation,
+    directionalAxis,
+    domain,
+    onChangeProps,
+    onMove,
+    onRemove
+  } = props;
+  const equationPrefix = directionalAxis === "x" ? "y=" : "x=";
+  const lineLabel = `Function (${equationPrefix}${equation})`;
+
+  // Tracking the string value of domain constraints to handle interim state of
+  //     entering a negative value, as well as representing Infinity as an empty string.
+  // This variable is used when specifying the values of the input fields.
+  const [domainEntries, setDomainEntries] = useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  useEffect(() => {
+    // "useEffect" used to maintain parity between domain constraints and their string representation.
+    setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  }, [domain]);
+
+  // Generic function for handling property changes (except for 'domain')
+  function handlePropChange(property, newValue) {
+    const updatedProps = {};
+    updatedProps[property] = newValue;
+    onChangeProps(updatedProps);
+  }
+
+  /*
+   Reason for having a separate 'propChange' function for 'domain':
+      Domain entries are optional. Their default value is +/- Infinity.
+      Since input fields that are empty evaluate to zero, there needs to be
+          dedicated code to convert empty to Infinity.
+   */
+  function handleDomainChange(limitIndex, newValueString) {
+    const newDomainEntries = [...domainEntries];
+    newDomainEntries[limitIndex] = newValueString;
+    setDomainEntries(newDomainEntries);
+    const newDomain = domain ? [...domain] : [-Infinity, Infinity];
+    let newValue = parseFloat(newValueString);
+    if (newValueString === "" && limitIndex === 0) {
+      newValue = -Infinity;
+    } else if (newValueString === "" && limitIndex === 1) {
+      newValue = Infinity;
+    }
+    newDomain[limitIndex] = newValue;
+    onChangeProps({
+      domain: newDomain
+    });
+  }
+  return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React.createElement(View, {
+      style: styles$t.row
+    }, /*#__PURE__*/React.createElement(LabelLarge, {
+      style: styles$t.accordionHeader
+    }, lineLabel), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.xSmall_8
+    }), /*#__PURE__*/React.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: strokeStyle
+    }))
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles$t.row, styles$t.spaceUnder]
+  }, /*#__PURE__*/React.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: newValue => {
+      handlePropChange("color", newValue);
+    }
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.small_12
+  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
+    selectedValue: strokeStyle,
+    onChange: newValue => {
+      handlePropChange("strokeStyle", newValue);
+    }
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles$t.row, styles$t.rowSpace]
+  }, /*#__PURE__*/React.createElement(SingleSelect, {
+    selectedValue: directionalAxis,
+    onChange: newValue => {
+      handlePropChange("directionalAxis", newValue);
+    },
+    "aria-label": "equation prefix",
+    style: styles$t.equationPrefix
     // Placeholder is required, but never gets used.
     ,
     placeholder: ""
   }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "solid",
-    label: "solid"
+    value: "x",
+    label: "y ="
   }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "dashed",
-    label: "dashed"
+    value: "y",
+    label: "x ="
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "text",
+    "aria-label": "equation",
+    value: equation,
+    onChange: newValue => {
+      handlePropChange("equation", newValue);
+    },
+    style: [styles$t.textField]
+  })), /*#__PURE__*/React.createElement(View, {
+    style: [styles$t.row, styles$t.rowSpace]
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    style: styles$t.domainMin
+  }, "domain min", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "number",
+    style: styles$t.domainMinField,
+    value: domainEntries[0],
+    onChange: newValue => {
+      handleDomainChange(0, newValue);
+    }
+  })), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.medium_16
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    "aria-label": "domain max",
+    style: styles$t.domainMax
+  }, "max", /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(TextField, {
+    type: "number",
+    style: styles$t.domainMaxField,
+    value: domainEntries[1],
+    onChange: newValue => {
+      handleDomainChange(1, newValue);
+    }
   }))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
@@ -30190,13 +30562,57 @@ const LockedEllipseSettings = props => {
   }));
 };
 const styles$t = StyleSheet.create({
+  accordionHeader: {
+    textOverflow: "ellipsis",
+    // A maximum width needs to be specified in order for the ellipsis to work.
+    // The 64px in the calculation accounts for the line swatch (56px) and the preceding strut (8px).
+    // Margin and padding won't work here because they would create space between the header text and the swatch.
+    maxWidth: "calc(100% - 64px)",
+    overflow: "hidden",
+    whiteSpace: "nowrap"
+  },
+  equationPrefix: {
+    minWidth: "auto"
+  },
+  domainMin: {
+    alignItems: "center",
+    display: "flex",
+    // The 'width' property is applied to the label, which wraps the text and the input field.
+    // The width of the input fields (min/max) should be the same (to have a consistent look),
+    //     so the following calculation distributes the space accordingly.
+    // For the "domain min" block, the text is 82.7px, and the strut is 6px (88.7px total).
+    // The "domain max" block is 30.23px, and the strut is 6px (36.23px total).
+    // The calculation takes the remain space after the text & struts (141px total) are removed,
+    //     and divides it between the two input fields equally.
+    // The calculation reads: "Take 1/2 of the non-text space, and add the required space for this label's text"
+    width: "calc(((100% - 141px) / 2) + 88.7px)",
+    // @ts-expect-error // TS2353: textWrap does not exist in type CSSProperties
+    textWrap: "nowrap"
+  },
+  domainMinField: {
+    width: "calc(100% - 88.7px)" // make room for the label
+  },
+
+  domainMax: {
+    alignItems: "center",
+    display: "flex",
+    // See explanation for "domainMin" for the calculation below.
+    width: "calc(((100% - 141px) / 2) + 36.2px)"
+  },
+  domainMaxField: {
+    width: "calc(100% - 36.2px)" // make room for the label
+  },
+
+  rowSpace: {
+    marginTop: spacing.xSmall_8
+  },
   row: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  spaceUnder: {
-    marginBottom: spacing.xSmall_8
+  textField: {
+    flexGrow: "1"
   }
 });
 
@@ -30318,32 +30734,6 @@ const styles$r = StyleSheet.create({
   }
 });
 
-const LineSwatch = props => {
-  const {
-    color,
-    lineStyle
-  } = props;
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles$q.container
-  }, /*#__PURE__*/React.createElement(View, {
-    "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$q.lineSwatch, {
-      border: `5px ${lineStyle} ${lockedFigureColors[color]}`
-    }]
-  }));
-};
-const styles$q = StyleSheet.create({
-  container: {
-    backgroundColor: color.white,
-    justifyContent: "center",
-    padding: spacing.xSmall_8,
-    borderRadius: spacing.xxxSmall_4
-  },
-  lineSwatch: {
-    width: 40
-  }
-});
-
 const lengthZeroStr = "The line cannot have length 0.";
 const LockedLineSettings = props => {
   const {
@@ -30386,7 +30776,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$p.row
+      style: styles$q.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30395,7 +30785,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, "kind", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxxSmall_4
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30416,34 +30806,19 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React.createElement(View, {
-    style: styles$p.row
+    style: styles$q.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: styles$p.row
-  }, "style", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxxSmall_4
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
+  }), /*#__PURE__*/React.createElement(LineStrokeSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
     })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: "",
-    style: styles$p.selectMarginOffset
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "solid",
-    label: "solid"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "dashed",
-    label: "dashed"
-  })))), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$p.errorText
+  })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
+    style: styles$q.errorText
   }, lengthZeroStr), /*#__PURE__*/React.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30468,7 +30843,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = StyleSheet.create({
+const styles$q = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30477,10 +30852,6 @@ const styles$p = StyleSheet.create({
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },
-  selectMarginOffset: {
-    // Align with the point settings accordions.
-    marginInlineEnd: -spacing.xxxSmall_4
-  },
   errorText: {
     color: color.red
   }
@@ -30513,7 +30884,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React.createElement(View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(ColorSwatch, {
@@ -30522,7 +30893,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30531,7 +30902,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30546,7 +30917,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = StyleSheet.create({
+const styles$p = StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30564,17 +30935,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React.createElement(View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$n.container, {
+    style: [styles$o.container, {
       border: `4px ${strokeStyle} ${lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$n.innerSquare, {
+    style: [styles$o.innerSquare, {
       backgroundColor: lockedFigureColors[color],
-      opacity: lockedFigureFillStyles[fillStyle]
+      opacity: fillStyle === "white" ? 0 : lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$n = StyleSheet.create({
+const styles$o = StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30616,7 +30987,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React.createElement(View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(PolygonSwatch, {
@@ -30625,7 +30996,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$m.row, styles$m.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30633,7 +31004,7 @@ const LockedPolygonSettings = props => {
     size: spacing.medium_16
   }), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: styles$m.row
+    style: [styles$n.row, styles$n.truncatedWidth]
   }, "fill", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(SingleSelect, {
@@ -30648,42 +31019,28 @@ const LockedPolygonSettings = props => {
     key: option,
     value: option,
     label: option
-  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    style: [styles$m.row, styles$m.spaceUnder]
-  }, "stroke", /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xxSmall_6
-  }), /*#__PURE__*/React.createElement(SingleSelect, {
+  }))))), /*#__PURE__*/React.createElement(LineStrokeSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
     })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React.createElement(OptionItem, {
-    value: "solid",
-    label: "solid"
-  }), /*#__PURE__*/React.createElement(OptionItem, {
-    value: "dashed",
-    label: "dashed"
-  }))), /*#__PURE__*/React.createElement(LabeledSwitch, {
+  }), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show vertices",
     checked: showVertices,
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$m.spaceUnder
+    style: styles$n.spaceUnder
   }), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, "Points"),
     expanded: true,
-    containerStyle: styles$m.pointAccordionContainer,
-    panelStyle: styles$m.pointAccordionPanel
+    containerStyle: styles$n.pointAccordionContainer,
+    panelStyle: styles$n.pointAccordionPanel
   }, points.map((point, index) => {
     const pointLabel = String.fromCharCode(65 + index);
     return /*#__PURE__*/React.createElement(View, {
-      key: `locked-polygon-point-${point[0]}-${point[1]}-index-${index}`,
-      style: [styles$m.row, styles$m.spaceUnder]
+      key: `locked-polygon-point-index-${index}`,
+      style: [styles$n.row, styles$n.spaceUnder]
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.medium_16
     }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -30711,7 +31068,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$m.icon
+      style: styles$n.icon
     }));
   }), /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
@@ -30727,7 +31084,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$m = StyleSheet.create({
+const styles$n = StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30744,6 +31101,10 @@ const styles$m = StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
+  },
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
   }
 });
 
@@ -30785,7 +31146,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, lineLabel), /*#__PURE__*/React.createElement(Strut, {
       size: spacing.xSmall_8
     }), /*#__PURE__*/React.createElement(LineSwatch, {
@@ -30793,19 +31154,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$l.row, styles$l.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React.createElement(LabelMedium, {
-    style: styles$l.errorText
+    style: styles$m.errorText
   }, lengthErrorMessage), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$l.container,
-    panelStyle: styles$l.accordionPanel,
+    containerStyle: styles$m.container,
+    panelStyle: styles$m.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30816,10 +31177,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: true // Initial state is expanded
     ,
-    containerStyle: styles$l.container,
-    panelStyle: styles$l.accordionPanel,
+    containerStyle: styles$m.container,
+    panelStyle: styles$m.accordionPanel,
     header: /*#__PURE__*/React.createElement(View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React.createElement(LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30833,7 +31194,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$l = StyleSheet.create({
+const styles$m = StyleSheet.create({
   accordionPanel: {
     paddingBottom: spacing.medium_16
   },
@@ -30875,6 +31236,11 @@ const LockedFigureSettings = props => {
       return /*#__PURE__*/React.createElement(LockedEllipseSettings, props);
     case "polygon":
       return /*#__PURE__*/React.createElement(LockedPolygonSettings, props);
+    case "function":
+      if (props.showM2bFeatures) {
+        return /*#__PURE__*/React.createElement(LockedFunctionSettings, props);
+      }
+      break;
   }
   return null;
 };
@@ -30978,12 +31344,6 @@ const LockedFiguresSection = props => {
     onToggle: () => setIsExpanded(!isExpanded),
     isCollapsible: true
   }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
-    if (figure.type === "function") {
-      // TODO(LEMS-1947): Add locked function settings.
-      // Remove this block once function locked figure settings are
-      // implemented.
-      return;
-    }
     return /*#__PURE__*/React.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
       showM2bFeatures: props.showM2bFeatures,
@@ -30999,7 +31359,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React.createElement(View, {
-    style: styles$k.buttonContainer
+    style: styles$l.buttonContainer
   }, /*#__PURE__*/React.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
     id: `${uniqueId}-select`,
@@ -31009,10 +31369,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React.createElement(Button, {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$k.button
+    style: styles$l.button
   }, buttonLabel))));
 };
-const styles$k = StyleSheet.create({
+const styles$l = StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31047,7 +31407,7 @@ const GraphPointsCountSelector = ({
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$j.singleSelectShort
+    style: styles$k.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React.createElement(OptionItem, {
     key: n,
     value: `${n}`,
@@ -31058,7 +31418,7 @@ const GraphPointsCountSelector = ({
     label: "unlimited"
   })]);
 };
-const styles$j = StyleSheet.create({
+const styles$k = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31071,7 +31431,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$i.singleSelectShort
+    style: styles$j.singleSelectShort
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31104,7 +31464,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$i = StyleSheet.create({
+const styles$j = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31138,7 +31498,6 @@ function InteractiveGraphCorrectAnswer(props) {
 const {
   ButtonGroup: ButtonGroup$2,
   InfoTip: InfoTip$c,
-  PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = components;
 const defaultBackgroundImage$1 = {
@@ -31502,16 +31861,20 @@ class InteractiveGraphSettings extends React.Component {
       onChange: this.change("markings")
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.change
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
     }))), /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
-      className: css(styles$h.backgroundUrlInput),
+      className: css(styles$i.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31525,14 +31888,18 @@ class InteractiveGraphSettings extends React.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
-      style: styles$h.protractorSection
+      style: styles$i.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$h.checkboxRow
-    }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
+      style: styles$i.checkboxRow
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show protractor",
-      showProtractor: this.props.showProtractor,
-      onChange: this.change,
-      style: styles$h.resetSpaceTop
+      checked: this.props.showProtractor,
+      onChange: value => {
+        this.change({
+          showProtractor: value
+        });
+      },
+      style: styles$i.resetSpaceTop
     })), this.props.showProtractor && /*#__PURE__*/React.createElement(Banner, {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -31553,7 +31920,7 @@ InteractiveGraphSettings.defaultProps = {
   showProtractor: false,
   showTooltips: false
 };
-const styles$h = StyleSheet.create({
+const styles$i = StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31590,13 +31957,13 @@ const SegmentCountSelector = ({
     const num = +newValue;
     onChange(num);
   },
-  style: styles$g.singleSelectShort
+  style: styles$h.singleSelectShort
 }, _.range(1, 7).map(n => /*#__PURE__*/React.createElement(OptionItem, {
   key: n,
   value: `${n}`,
   label: `${n} segment${n > 1 ? "s" : ""}`
 })));
-const styles$g = StyleSheet.create({
+const styles$h = StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31604,15 +31971,49 @@ const styles$g = StyleSheet.create({
   }
 });
 
+const StartCoordsAngle = props => {
+  const {
+    startCoords
+  } = props;
+  return /*#__PURE__*/React.createElement(View, null, "WIP", /*#__PURE__*/React.createElement("br", null), " Start coords:", startCoords.map((coord, index) => {
+    return /*#__PURE__*/React.createElement(View, {
+      key: index
+    }, `Point ${index + 1}: (${coord[0]}, ${coord[1]})`);
+  }));
+};
+
 const StartCoordsCircle = props => {
   const {
     startCoords,
     onChange
   } = props;
+  const [radiusState, setRadiusState] = React.useState(startCoords.radius.toString());
+
+  // Update the local state when the props change. (Specifically, when
+  // the radius is reset from the "Use default start coordinates" button.)
+  React.useEffect(() => {
+    setRadiusState(startCoords.radius.toString());
+  }, [startCoords.radius]);
+  function handleRadiuschange(newValue) {
+    // Update the local state to update the input field.
+    setRadiusState(newValue);
+
+    // Assume the user is in the middle of typing. Don't update
+    // the props until they've finished typing a valid number.
+    if (isNaN(+newValue) || newValue === "" || +newValue === 0) {
+      return;
+    }
+
+    // Update the props (update the graph).
+    onChange({
+      center: startCoords.center,
+      radius: parseFloat(newValue)
+    });
+  }
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$f.tile
+    style: styles$g.tile
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$f.row
+    style: styles$g.row
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Center:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31624,23 +32025,18 @@ const StartCoordsCircle = props => {
     })
   })), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(View, {
-    style: styles$f.row
-  }, /*#__PURE__*/React.createElement(LabelLarge, null, "Radius:"), /*#__PURE__*/React.createElement(Strut, {
+  }), /*#__PURE__*/React.createElement(LabelLarge, {
+    tag: "label",
+    style: styles$g.row
+  }, "Radius:", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
-  }), /*#__PURE__*/React.createElement(TextField, {
-    value: startCoords.radius.toString(),
-    type: "number",
-    onChange: value => {
-      onChange({
-        center: startCoords.center,
-        radius: parseFloat(value)
-      });
-    },
-    style: styles$f.textField
+  }), /*#__PURE__*/React.createElement(ScrolllessNumberTextField, {
+    value: radiusState,
+    onChange: handleRadiuschange,
+    style: styles$g.textField
   })));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   tile: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8,
@@ -31648,6 +32044,7 @@ const styles$f = StyleSheet.create({
     borderRadius: spacing.xSmall_8
   },
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
@@ -31662,7 +32059,7 @@ const StartCoordsLine = props => {
     onChange
   } = props;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
-    style: styles$e.tile
+    style: styles$f.tile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31670,7 +32067,7 @@ const StartCoordsLine = props => {
     labels: ["x", "y"],
     onChange: value => onChange([value, startCoords[1]])
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$e.tile
+    style: styles$f.tile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31679,7 +32076,7 @@ const StartCoordsLine = props => {
     onChange: value => onChange([startCoords[0], value])
   })));
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   tile: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8,
@@ -31702,7 +32099,7 @@ const StartCoordsMultiline = props => {
     header: /*#__PURE__*/React.createElement(LabelLarge, null, `${graphName} ${i + 1}`),
     expanded: true
   }, /*#__PURE__*/React.createElement(View, {
-    style: styles$d.nestedTile
+    style: styles$e.nestedTile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 1:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31714,7 +32111,7 @@ const StartCoordsMultiline = props => {
       onChange(newCoords);
     }
   })), /*#__PURE__*/React.createElement(View, {
-    style: styles$d.nestedTile
+    style: styles$e.nestedTile
   }, /*#__PURE__*/React.createElement(LabelLarge, null, "Point 2:"), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.small_12
   }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
@@ -31727,7 +32124,7 @@ const StartCoordsMultiline = props => {
     }
   })))));
 };
-const styles$d = StyleSheet.create({
+const styles$e = StyleSheet.create({
   nestedTile: {
     paddingBottom: spacing.small_12,
     flexDirection: "row",
@@ -31735,6 +32132,39 @@ const styles$d = StyleSheet.create({
   }
 });
 
+const StartCoordsPoint = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, startCoords.map((coord, index) => {
+    return /*#__PURE__*/React.createElement(View, {
+      key: index,
+      style: styles$d.tile
+    }, /*#__PURE__*/React.createElement(LabelLarge, null, `Point ${index + 1}:`), /*#__PURE__*/React.createElement(Strut, {
+      size: spacing.small_12
+    }), /*#__PURE__*/React.createElement(CoordinatePairInput, {
+      coord: coord,
+      labels: ["x", "y"],
+      onChange: newCoord => {
+        const newStartCoords = [...startCoords];
+        newStartCoords[index] = newCoord;
+        onChange(newStartCoords);
+      }
+    }));
+  }));
+};
+const styles$d = StyleSheet.create({
+  tile: {
+    backgroundColor: color.fadedBlue8,
+    marginTop: spacing.xSmall_8,
+    padding: spacing.small_12,
+    borderRadius: spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 const StartCoordsQuadratic = props => {
   const {
     startCoords,
@@ -31893,6 +32323,24 @@ const StartCoordsSettingsInner = props => {
         startCoords: quadraticCoords,
         onChange: onChange
       });
+    // Graphs with startCoords of type ReadonlyArray<Coord>
+    case "point":
+    case "polygon":
+      const pointCoords = type === "point" ? getPointCoords(props, range, step) : getPolygonCoords(props, range, step);
+      return /*#__PURE__*/React.createElement(StartCoordsPoint, {
+        startCoords: pointCoords,
+        onChange: onChange
+      });
+    case "angle":
+      const angleCoords = getAngleCoords({
+        graph: props,
+        range,
+        step
+      });
+      return /*#__PURE__*/React.createElement(StartCoordsAngle, {
+        startCoords: angleCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
@@ -31947,10 +32395,6 @@ const POLYGON_SIDES = _.map(_.range(3, 13), function (value) {
     label: `${value} sides`
   });
 });
-
-// TODO(LEMS-2228): Remove flags once this is fully released
-const startCoordsUiPhase1Types = ["linear", "linear-system", "ray", "segment", "circle"];
-const startCoordsUiPhase2Types = ["sinusoid", "quadratic"];
 /**
  * An editor for the InteractiveGraph widget, which allows the user to
  * specify the graph's properties and the correct answer.
@@ -32002,7 +32446,7 @@ class InteractiveGraphEditor extends React.Component {
     DeprecationMixin.UNSAFE_componentWillMount.call(this);
   }
   render() {
-    var _this$props$apiOption, _this$props$apiOption2, _this$props$graph$typ, _this$props$graph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph5, _this$props$apiOption3, _this$props$apiOption4;
+    var _this$props$graph$typ, _this$props$graph2, _this$props$correct, _this$props$correct2, _this$props$correct3, _this$props$correct4, _this$props$correct5, _this$props$correct6, _this$props$correct7, _this$props$correct8, _this$props$correct9, _this$props$correct10, _this$props$correct11, _this$props$graph5, _this$props$apiOption, _this$props$apiOption2;
     let graph;
     let equationString;
     const gridStep = this.props.gridStep || Util.getGridStep(this.props.range, this.props.step, interactiveSizes.defaultBoxSize);
@@ -32063,9 +32507,6 @@ class InteractiveGraphEditor extends React.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
-    const startCoordsPhase1 = (_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption["start-coords-ui-phase-1"];
-    const startCoordsPhase2 = (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["start-coords-ui-phase-2"];
-    const displayStartCoordsUI = this.props.graph && (startCoordsPhase1 && startCoordsUiPhase1Types.includes(this.props.graph.type) || startCoordsPhase2 && startCoordsUiPhase2Types.includes(this.props.graph.type));
     return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React.createElement(GraphTypeSelector, {
@@ -32136,7 +32577,8 @@ class InteractiveGraphEditor extends React.Component {
           coords: null
         });
         this.props.onChange({
-          correct: graph
+          correct: graph,
+          graph: graph
         });
       },
       style: styles$a.singleSelectShort
@@ -32208,7 +32650,7 @@ class InteractiveGraphEditor extends React.Component {
       }
     })), ((_this$props$graph5 = this.props.graph) == null ? void 0 : _this$props$graph5.type) &&
     // TODO(LEMS-2228): Remove flags once this is fully released
-    displayStartCoordsUI && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    shouldShowStartCoordsUI(this.props.apiOptions.flags, this.props.graph) && /*#__PURE__*/React.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -32264,8 +32706,8 @@ class InteractiveGraphEditor extends React.Component {
     })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
-    this.props.graph && ((_this$props$apiOption3 = this.props.apiOptions) == null || (_this$props$apiOption3 = _this$props$apiOption3.flags) == null || (_this$props$apiOption3 = _this$props$apiOption3.mafs) == null ? void 0 : _this$props$apiOption3[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
-      showM2bFeatures: (_this$props$apiOption4 = this.props.apiOptions) == null || (_this$props$apiOption4 = _this$props$apiOption4.flags) == null || (_this$props$apiOption4 = _this$props$apiOption4.mafs) == null ? void 0 : _this$props$apiOption4["interactive-graph-locked-features-m2b"],
+    this.props.graph && ((_this$props$apiOption = this.props.apiOptions) == null || (_this$props$apiOption = _this$props$apiOption.flags) == null || (_this$props$apiOption = _this$props$apiOption.mafs) == null ? void 0 : _this$props$apiOption[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {
+      showM2bFeatures: (_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2["interactive-graph-locked-features-m2b"],
       figures: this.props.lockedFigures,
       onChange: this.props.onChange
     }));
@@ -33784,7 +34226,6 @@ const styles = StyleSheet.create({
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 const {
   InfoTip: InfoTip$a,
-  PropCheckBox: PropCheckBox$6,
   TextListEditor: TextListEditor$3
 } = components;
 class MatcherEditor extends React.Component {
@@ -33840,14 +34281,22 @@ class MatcherEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onLabelChange.bind(this, 1)
-    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$6, {
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Order of the matched pairs matters:",
-      orderMatters: this.props.orderMatters,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "With this option enabled, only the order provided above will be treated as correct. This is useful when ordering is significant, such as in the context of a proof."), /*#__PURE__*/React.createElement("p", null, "If disabled, pairwise matching is sufficient. To make this clear, the left column becomes fixed in the provided order and only the cards in the right column can be moved."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox$6, {
+      checked: this.props.orderMatters,
+      onChange: value => {
+        this.props.onChange({
+          orderMatters: value
+        });
+      }
+    }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "With this option enabled, only the order provided above will be treated as correct. This is useful when ordering is significant, such as in the context of a proof."), /*#__PURE__*/React.createElement("p", null, "If disabled, pairwise matching is sufficient. To make this clear, the left column becomes fixed in the provided order and only the cards in the right column can be moved."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Padding:",
-      padding: this.props.padding,
-      onChange: this.props.onChange
+      checked: this.props.padding,
+      onChange: value => {
+        this.props.onChange({
+          padding: value
+        });
+      }
     }), /*#__PURE__*/React.createElement(InfoTip$a, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }
@@ -33993,7 +34442,6 @@ MatrixEditor.defaultProps = {
 const {
   InfoTip: InfoTip$9,
   NumberInput: NumberInput$7,
-  PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = components;
 const defaultImage = {
@@ -34074,16 +34522,24 @@ class MeasurerEditor extends React.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.props.onChange
+      checked: this.props.showRuler,
+      onChange: value => {
+        this.props.onChange({
+          showRuler: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show protractor",
-      showProtractor: this.props.showProtractor,
-      onChange: this.props.onChange
+      checked: this.props.showProtractor,
+      onChange: value => {
+        this.props.onChange({
+          showProtractor: value
+        });
+      }
     }))), this.props.showRuler && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React.createElement("select", {
       onChange: e =>
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
@@ -34195,7 +34651,6 @@ const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$8,
   NumberInput: NumberInput$5,
-  PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = components;
 const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
@@ -34406,22 +34861,34 @@ class NumberLineEditor extends React.Component {
       className: "perseus-widget-row"
     }, !this.props.static && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show tick controller",
-      isTickCtrl: this.props.isTickCtrl,
-      onChange: this.props.onChange
+      checked: this.props.isTickCtrl,
+      onChange: value => {
+        this.props.onChange({
+          isTickCtrl: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show label ticks",
-      labelTicks: this.props.labelTicks,
-      onChange: this.props.onChange
+      checked: this.props.labelTicks,
+      onChange: value => {
+        this.props.onChange({
+          labelTicks: value
+        });
+      }
     }))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, !this.props.static && /*#__PURE__*/React.createElement(PropCheckBox$4, {
+    }, !this.props.static && /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.props.onChange
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.props.onChange({
+          showTooltips: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
     }, isTickCtrl && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React.createElement(NumberInput$5, {
@@ -34504,7 +34971,6 @@ const {
   InlineIcon: InlineIcon$1,
   MultiButtonGroup,
   NumberInput: NumberInput$4,
-  PropCheckBox: PropCheckBox$3,
   TextInput: TextInput$3
 } = components;
 const {
@@ -34676,12 +35142,14 @@ class NumericInputEditor extends React.Component {
       onChange: this.updateAnswer(i, "answerForms") || (() => {})
     }), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Formats will be autoselected for you based on the given answer; to show no suggested formats and accept all types, simply have a decimal/integer be the answer. Values with \u03C0 will have format \"pi\", and values that are fractions will have some subset (mixed will be \"mixed\" and \"proper\"; improper/proper will both be \"improper\" and \"proper\"). If you would like to specify that it is only a proper fraction (or only a mixed/improper fraction), deselect the other format. Except for specific cases, you should not need to change the autoselected formats."), /*#__PURE__*/React.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Strictly match only these formats",
-      strict: answers[i]["strict"]
-      // eslint-disable-next-line react/jsx-no-bind
-      ,
-      onChange: this.updateAnswer.bind(this, i)
+      checked: answers[i]["strict"],
+      onChange: value => {
+        this.updateAnswer.bind(this, i)({
+          strict: value
+        });
+      }
     })));
     const maxError = i => /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -34707,23 +35175,31 @@ class NumericInputEditor extends React.Component {
     }), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them.")));
     const rightAlign = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Right alignment",
-      rightAlign: this.props.rightAlign,
-      onChange: this.props.onChange
+      checked: this.props.rightAlign,
+      onChange: value => {
+        this.props.onChange({
+          rightAlign: value
+        });
+      }
     }));
     const labelText = /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement("label", null, "Label text:", " ", /*#__PURE__*/React.createElement(TextInput$3, {
+    }, /*#__PURE__*/React.createElement("label", null, "Aria label", /*#__PURE__*/React.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
     const coefficientCheck = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Coefficient",
-      coefficient: this.props.coefficient,
-      onChange: this.props.onChange
+      checked: this.props.coefficient,
+      onChange: value => {
+        this.props.onChange({
+          coefficient: value
+        });
+      }
     }), /*#__PURE__*/React.createElement(InfoTip$7, null, /*#__PURE__*/React.createElement("p", null, "A coefficient style number allows the student to use - for -1 and an empty string to mean 1."))));
     const addAnswerButton = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
       href: "#",
@@ -34854,11 +35330,11 @@ class NumericInputEditor extends React.Component {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-input-number-editor"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, labelText, inputSize, rightAlign, coefficientCheck, /*#__PURE__*/React.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React.createElement("div", {
       className: "msg-title"
-    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton, inputSize, rightAlign, coefficientCheck, labelText);
+    }, "Message shown to user on attempt"), generateInputAnswerEditors(), addAnswerButton);
   }
 }
 NumericInputEditor.contextType = PerseusI18nContext;
@@ -34987,8 +35463,7 @@ OrdererEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$5,
-  PropCheckBox: PropCheckBox$2
+  InfoTip: InfoTip$5
 } = components;
 class PassageEditor extends React.Component {
   constructor(..._args) {
@@ -35036,11 +35511,14 @@ class PassageEditor extends React.Component {
       className: "perseus-widget-passage-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$2, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show line numbers",
-      labelAlignment: "right",
-      showLineNumbers: this.props.showLineNumbers,
-      onChange: this.props.onChange
+      checked: this.props.showLineNumbers,
+      onChange: value => {
+        this.props.onChange({
+          showLineNumbers: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", null, "Passage title:", /*#__PURE__*/React.createElement(InfoTip$5, null, /*#__PURE__*/React.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
       type: "text",
       defaultValue: this.props.passageTitle,
@@ -35511,8 +35989,7 @@ PythonProgramEditor.defaultProps = {
 };
 
 const {
-  InlineIcon,
-  PropCheckBox: PropCheckBox$1
+  InlineIcon
 } = components;
 const {
   iconPlus,
@@ -35701,25 +36178,34 @@ class RadioEditor extends React.Component {
       target: "_blank"
     }, "Multiple choice style guide"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Multiple selections",
-      labelAlignment: "right",
-      multipleSelect: this.props.multipleSelect,
-      onChange: this.onMultipleSelectChange
+      checked: this.props.multipleSelect,
+      onChange: value => {
+        this.onMultipleSelectChange({
+          multipleSelect: value
+        });
+      }
     })), /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Randomize order",
-      labelAlignment: "right",
-      randomize: this.props.randomize,
-      onChange: this.props.onChange
+      checked: this.props.randomize,
+      onChange: value => {
+        this.props.onChange({
+          randomize: value
+        });
+      }
     })), this.props.multipleSelect && /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Specify number correct",
-      labelAlignment: "right",
-      countChoices: this.props.countChoices,
-      onChange: this.onCountChoicesChange
+      checked: this.props.countChoices,
+      onChange: value => {
+        this.onCountChoicesChange({
+          countChoices: value
+        });
+      }
     }))), /*#__PURE__*/React.createElement(BaseRadio, {
       multipleSelect: this.props.multipleSelect,
       countChoices: this.props.countChoices,
@@ -35856,7 +36342,6 @@ SimpleMarkdownTesterEditor.defaultProps = {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$2,
-  PropCheckBox,
   TextListEditor
 } = components;
 const HORIZONTAL = "horizontal";
@@ -35894,10 +36379,14 @@ class SorterEditor extends React.Component {
       value: HORIZONTAL
     }, "Horizontal"), /*#__PURE__*/React.createElement("option", {
       value: VERTICAL
-    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PropCheckBox, {
+    }, "Vertical"))), /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Use the horizontal layout for short text and small images. The vertical layout is best for longer text and larger images."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Padding:",
-      padding: this.props.padding,
-      onChange: this.props.onChange
+      checked: this.props.padding,
+      onChange: value => {
+        this.props.onChange({
+          padding: value
+        });
+      }
     }), /*#__PURE__*/React.createElement(InfoTip$2, null, /*#__PURE__*/React.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }