@khanacademy/perseus-editor 11.2.0 → 11.4.0

package/dist/index.js

@@ -16,15 +16,15 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
+var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
+var Button = require('@khanacademy/wonder-blocks-button');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
-var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
-var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 var caretDoubleDownIcon = require('@phosphor-icons/core/bold/caret-double-down-bold.svg');
@@ -83,7 +83,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +278,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$L.button
+      style: styles$R.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$L = aphrodite.StyleSheet.create({
+const styles$R = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20789,13 +20789,13 @@ class WidgetSelect extends React__namespace.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__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$K = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20825,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$J.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$J.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$J.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20843,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$J = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23656,12 +23656,10 @@ class CombinedHintsEditor extends React__namespace.Component {
   };
   handleHintChange = (i, newProps, cb, silent) => {
     // TODO(joel) - lens
-    const hints = ___default["default"](this.props.hints).clone();
+    const hints = [...this.props.hints];
     hints[i] = ___default["default"].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);
@@ -23671,21 +23669,16 @@ class CombinedHintsEditor extends React__namespace.Component {
     if (!confirm("Are you sure you want to delete this hint?")) {
       return;
     }
-    const hints = ___default["default"](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
     });
   };
   handleHintMove = (i, dir) => {
-    const hints = ___default["default"](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
     }, () => {
@@ -23695,10 +23688,10 @@ class CombinedHintsEditor extends React__namespace.Component {
     });
   };
   addHint = () => {
-    const hints = ___default["default"](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
@@ -23821,65 +23814,65 @@ class ItemExtrasEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-answer-options"
     }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.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.
@@ -23887,54 +23880,61 @@ class ItemExtrasEditor extends React__namespace.Component {
         });
       }
     }), this.props.periodicTable && /*#__PURE__*/React__namespace.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__namespace.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__namespace.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__namespace.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
         });
       }
     })));
   }
 }
-const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement("div", {
-  style: {
-    marginLeft: props.indent ? "10px" : "0px"
-  }
-}, /*#__PURE__*/React__namespace.createElement("label", null, props.label, /*#__PURE__*/React__namespace.createElement("input", {
-  type: "checkbox",
+const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
+}, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+  label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: {
+      flexDirection: "row"
+    }
+  }, props.label, " ", /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, props.infoTip)),
   checked: props.checked,
-  onChange: props.onChange
-})), /*#__PURE__*/React__namespace.createElement(InfoTip$l, null, props.infoTip));
+  onChange: newCheckedState => props.onChange(newCheckedState)
+}));
+const styles$O = aphrodite.StyleSheet.create({
+  indented: {
+    marginInlineStart: wonderBlocksTokens.spacing.large_24
+  }
+});
 
 const ITEM_DATA_VERSION = perseus.itemDataVersion;
 class ItemEditor extends React__namespace.Component {
@@ -24593,12 +24593,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$I.baseButton, color === "green" && styles$I.green, color === "orange" && styles$I.orange),
+      className: aphrodite.css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$I = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24811,23 +24811,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$H.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.container)
+    className: aphrodite.css(styles$M.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$H.row, styles$H.rowHeading)
+    className: aphrodite.css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$H.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24840,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.container)
+    className: aphrodite.css(styles$M.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft, styles$H.containerHeader)
+    className: aphrodite.css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24858,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$H.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.containerHeader, styles$H.previewCollectionHeader)
+    className: aphrodite.css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$H.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.container)
+    className: aphrodite.css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$H.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$H.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -24999,11 +24999,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$H.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25011,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$H.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25029,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$H.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$H.hintEditor),
+    className: aphrodite.css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25050,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$H.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25069,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$H.tagsEditor)
+    className: aphrodite.css(styles$M.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25102,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$H.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$H.verticalFlip)
+      className: aphrodite.css(styles$M.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$H.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$H.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25126,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$H.arrayElement, !elementIsLeaf && styles$H.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25152,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$H.objectElement)
+    className: aphrodite.css(styles$M.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25322,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$H = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25486,7 +25486,6 @@ const StatefulEditorPage = createReactClass__default["default"]({
 });
 
 const {
-  PropCheckBox: PropCheckBox$c,
   TextListEditor: TextListEditor$4
 } = perseus.components;
 const Categorizer = perseus.Categorizer.widget;
@@ -25521,11 +25520,14 @@ class CategorizerEditor extends React__namespace.Component {
   render() {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$c, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement(TextListEditor$4, {
       options: this.props.categories,
       onChange: cat => {
@@ -25619,8 +25621,7 @@ class BlurInput extends React__namespace.Component {
 
 /* eslint-disable no-useless-escape */
 const {
-  InfoTip: InfoTip$k,
-  PropCheckBox: PropCheckBox$b
+  InfoTip: InfoTip$k
 } = perseus.components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25803,14 +25804,22 @@ class CSProgramEditor extends React__namespace.Component {
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Url or Program ID:", " ", /*#__PURE__*/React__namespace.createElement(BlurInput, {
       value: this.props.programID,
       onChange: this._handleProgramIDChange
-    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+    })), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show Editor",
-      showEditor: this.props.showEditor,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$b, {
+      checked: this.props.showEditor,
+      onChange: value => {
+        this.props.onChange({
+          showEditor: value
+        });
+      }
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show Buttons",
-      showButtons: this.props.showButtons,
-      onChange: this.props.onChange
+      checked: this.props.showButtons,
+      onChange: value => {
+        this.props.onChange({
+          showButtons: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("label", null, "Settings:", /*#__PURE__*/React__namespace.createElement(PairsEditor$1, {
       name: "settings",
       pairs: this.props.settings,
@@ -25821,7 +25830,7 @@ class CSProgramEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$9
+  TextInput: TextInput$8
 } = perseus.components;
 class DefinitionEditor extends React__namespace.Component {
   static propTypes = {
@@ -25855,7 +25864,7 @@ class DefinitionEditor extends React__namespace.Component {
       target: "_blank"
     }, "Definition style guide"), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$9, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Word to be defined:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
       value: this.props.togglePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26265,7 +26274,7 @@ class ExampleWidgetEditor extends React__namespace.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  TextInput: TextInput$8
+  TextInput: TextInput$7
 } = perseus.components;
 const defaultExplanationProps = {
   showPrompt: "Explain",
@@ -26302,14 +26311,14 @@ class ExplanationEditor extends React__namespace.Component {
       className: "perseus-widget-explanation-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to show explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.showPrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("showPrompt")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$8, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Prompt to hide explanation:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
       value: this.props.hidePrompt
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
@@ -26337,9 +26346,106 @@ class ExplanationEditor extends React__namespace.Component {
   }
 }
 
+const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React__namespace.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles$L.grow, style]
+    });
+  }
+}
+const styles$L = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.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__default["default"];
 
-// 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__default["default"]({
   displayName: "SortableArea",
@@ -26496,6 +26602,7 @@ const SortableItem = createReactClass__default["default"]({
     e.preventDefault();
   },
   render: function () {
+    // I think these might be getting styles from Webapp
     let dragState = "sortable-disabled";
     if (this.props.dragging) {
       dragState = "sortable-dragging";
@@ -26504,7 +26611,7 @@ const SortableItem = createReactClass__default["default"]({
     }
     return /*#__PURE__*/React__namespace.createElement("li", {
       draggable: this.props.draggable,
-      className: dragState,
+      className: [dragState, aphrodite.css(styles$K.sortableListItem)].join(" "),
       onDragStart: this.handleDragStart,
       onDrop: this.handleDrop,
       onDragEnter: this.handleDragEnter,
@@ -26512,11 +26619,14 @@ const SortableItem = createReactClass__default["default"]({
     }, this.props.component);
   }
 });
+const styles$K = aphrodite.StyleSheet.create({
+  sortableListItem: {
+    margin: "5px 0"
+  }
+});
 
 const {
-  InfoTip: InfoTip$i,
-  PropCheckBox: PropCheckBox$a,
-  TextInput: TextInput$7
+  InfoTip: InfoTip$i
 } = perseus.components;
 
 // types for iterables
@@ -26563,6 +26673,12 @@ class ExpressionEditor extends React__namespace.Component {
     buttonSets: ["basic"],
     functions: ["f", "g", "h"]
   };
+  constructor(props) {
+    super(props);
+    this.state = {
+      functionsInternal: this.props.functions.join(" ")
+    };
+  }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -26599,78 +26715,69 @@ class ExpressionEditor extends React__namespace.Component {
     }, obj)));
     const sortable = /*#__PURE__*/React__namespace.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__namespace.createElement("label", {
-        className: "button-set-label",
-        key: name
-      }, /*#__PURE__*/React__namespace.createElement("input", {
-        type: "checkbox",
+      const isBasic = name === "basic";
+      const checked = this.props.buttonSets.includes(name) || isBasic;
+      return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+        key: name,
+        label: name,
         checked: checked,
-        disabled: isFirst,
+        disabled: isBasic,
         onChange: () => this.handleButtonSet(name)
-      }), name);
+      });
     });
-    const {
-      TeX
-    } = perseus.Dependencies.getDependencies(); // OldExpression only
-
-    buttonSetChoices.unshift( /*#__PURE__*/React__namespace.createElement("label", {
-      className: "button-set-label",
-      key: "show-div"
-    }, /*#__PURE__*/React__namespace.createElement("input", {
-      type: "checkbox",
+    buttonSetChoices.unshift( /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      key: "show \xF7 button",
+      label: "show \xF7 button",
+      checked: this.props.buttonSets.includes("basic+div"),
       onChange: this.handleToggleDiv
-    }), /*#__PURE__*/React__namespace.createElement("span", {
-      className: "show-div-button"
-    }, "show ", /*#__PURE__*/React__namespace.createElement(TeX, null, "\\div"), " button")));
-    return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-expression-editor"
-    }, /*#__PURE__*/React__namespace.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Visible label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
-      value: this.props.visibleLabel,
+    }));
+    return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Global Options"), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Visible label",
+      value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$7, {
-      value: this.props.ariaLabel,
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Aria label",
+      value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("a", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
-    }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, "Function variables: ", /*#__PURE__*/React__namespace.createElement("input", {
-      type: "text",
-      defaultValue: this.props.functions.join(" "),
+    }, "this article.")))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.LabeledTextField, {
+      label: "Function variables",
+      value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    })), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Button sets:"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement("h3", {
-      className: "expression-editor-h3"
-    }, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Use \xD7 instead of \u22C5 for multiplication",
+      checked: this.props.times,
+      onChange: value => {
+        this.props.onChange({
+          times: value
+        });
+      }
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.HeadingSmall, null, "Answers"), /*#__PURE__*/React__namespace.createElement("p", {
       style: {
         margin: "4px 0"
       }
-    }, "student responses area matched against these from top to bottom"), sortable, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.newAnswer
     }, "Add new answer")));
   }
   serialize = () => {
@@ -26805,9 +26912,12 @@ class ExpressionEditor extends React__namespace.Component {
   };
 
   // called when the function variables change
-  handleFunctions = e => {
+  handleFunctions = value => {
+    this.setState({
+      functionsInternal: value
+    });
     const newProps = {};
-    newProps.functions = e.target.value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
+    newProps.functions = value.split(/[ ,]+/).filter(wonderStuffCore.isTruthy);
     this.props.onChange(newProps);
   };
 }
@@ -26822,11 +26932,6 @@ class AnswerOption extends React__namespace.Component {
   state = {
     deleteFocused: false
   };
-  handleDeleteBlur = () => {
-    this.setState({
-      deleteFocused: false
-    });
-  };
   change = (() => {
     var _this = this;
     return function () {
@@ -26837,55 +26942,64 @@ class AnswerOption extends React__namespace.Component {
     };
   })();
   render() {
-    let removeButton = null;
-    if (this.state.deleteFocused) {
-      removeButton = /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleImSure,
-        onBlur: this.handleDeleteBlur
-      }, "I'm sure!");
-    } else {
-      removeButton = /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "simple-button orange",
-        onClick: this.handleDelete
-      }, "Delete");
-    }
+    const removeButton = this.state.deleteFocused ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleImSure,
+      color: "destructive"
+    }, "I'm sure!"), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.small_12
+    }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleCancelDelete,
+      light: true
+    }, "Cancel")) : /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+      size: "small",
+      onClick: this.handleDelete,
+      color: "destructive",
+      light: true
+    }, "Delete");
+    const answerStatusCss = aphrodite.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__namespace.createElement("div", {
-      className: "expression-answer-option"
+      className: aphrodite.css(styles$J.answerOption)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-handle"
+      className: aphrodite.css(styles$J.answerHandle)
     }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-body"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-considered"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.answerBody)
+    }, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.toggleConsidered,
-      className: "answer-status " + this.props.considered
-    }, this.props.considered), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-expression"
-    }, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-option"
-    }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(perseus.Expression, this.props.expressionProps))), /*#__PURE__*/React__namespace.createElement("div", {
+      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Answer expression must have the same form.",
+      checked: this.props.form,
+      onChange: value => {
+        this.props.onChange({
+          form: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "answer-option"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$a, {
-      simplify: this.props.simplify,
-      onChange: this.props.onChange,
-      labelAlignment: "right",
-      label: "Answer expression must be fully expanded and simplified."
+      className: aphrodite.css(styles$J.paddedY, styles$J.paddedX)
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
+      label: "Answer expression must be fully expanded and simplified.",
+      checked: this.props.simplify,
+      onChange: value => {
+        this.props.onChange({
+          simplify: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$i, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-      className: "remove-container"
+      className: aphrodite.css(styles$J.buttonRow, styles$J.paddedY)
     }, removeButton)));
   }
   handleImSure = () => {
     this.props.onDelete();
   };
+  handleCancelDelete = () => {
+    this.setState({
+      deleteFocused: false
+    });
+  };
   handleDelete = () => {
     this.setState({
       deleteFocused: true
@@ -26898,6 +27012,49 @@ class AnswerOption extends React__namespace.Component {
     });
   };
 }
+const styles$J = aphrodite.StyleSheet.create({
+  paddedX: {
+    paddingLeft: wonderBlocksTokens.spacing.xSmall_8,
+    paddingRight: wonderBlocksTokens.spacing.xSmall_8
+  },
+  paddedY: {
+    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+    paddingBottom: wonderBlocksTokens.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: wonderBlocksTokens.spacing.small_12,
+    paddingBottom: wonderBlocksTokens.spacing.small_12
+  },
+  answerStatusWrong: {
+    backgroundColor: wonderBlocksTokens.color.fadedRed16
+  },
+  answerStatusCorrect: {
+    backgroundColor: wonderBlocksTokens.color.fadedGreen16
+  },
+  answerStatusUngraded: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue16
+  },
+  answerBody: {},
+  buttonRow: {
+    display: "flex"
+  }
+});
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
@@ -26957,10 +27114,10 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("label", {
-      className: aphrodite.css(styles$G.title)
+      className: aphrodite.css(styles$I.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$G.input)
+      className: aphrodite.css(styles$I.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -26985,7 +27142,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$G.hintsTitle)
+      className: aphrodite.css(styles$I.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27017,7 +27174,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$G = aphrodite.StyleSheet.create({
+const styles$I = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -27105,7 +27262,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
 } = perseus.components;
 const defaultBackgroundImage$3 = {
@@ -27540,10 +27696,14 @@ const GraphSettings = createReactClass__default["default"]({
       onChange: this.change("markings")
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.change
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
     }))), ___default["default"].contains(this.props.editableSettings, "image") && /*#__PURE__*/React__namespace.createElement("div", {
       className: "image-settings"
     }, /*#__PURE__*/React__namespace.createElement("div", null, "Background image:"), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", {
@@ -27571,16 +27731,24 @@ const GraphSettings = createReactClass__default["default"]({
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.change
+      checked: this.props.showRuler,
+      onChange: value => {
+        this.change({
+          showRuler: value
+        });
+      }
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$9, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React__namespace.createElement("select", {
       onChange: this.changeRulerLabel,
       value: this.props.rulerLabel
@@ -27788,9 +27956,6 @@ class GroupEditor extends React__namespace.Component {
 }
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-const {
-  PropCheckBox: PropCheckBox$8
-} = perseus.components;
 /**
  * This is used for editing a name/value pair.
  */
@@ -27929,14 +28094,22 @@ class IframeEditor extends React__namespace.Component {
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("height")
-    })), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+    })), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Allow full screen",
-      allowFullScreen: this.props.allowFullScreen,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(PropCheckBox$8, {
+      checked: this.props.allowFullScreen,
+      onChange: value => {
+        this.props.onChange({
+          allowFullScreen: value
+        });
+      }
+    }), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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
+        });
+      }
     }));
   }
   handleSettingsChange = settings => {
@@ -28388,13 +28561,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$F.outerWrapper
+    style: styles$H.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$F = aphrodite.StyleSheet.create({
+const styles$H = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29464,16 +29637,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$E.label)
+    className: aphrodite.css(styles$G.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$E.row, style]
+    style: [styles$G.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$E.spaceEnd
+    style: styles$G.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$E.spaceStart
+    style: styles$G.spaceStart
   }, label)));
 };
-const styles$E = aphrodite.StyleSheet.create({
+const styles$G = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -29491,98 +29664,6 @@ const styles$E = aphrodite.StyleSheet.create({
   }
 });
 
-const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React__namespace.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React__namespace.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [styles$D.grow, style]
-    });
-  }
-}
-const styles$D = aphrodite.StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React__namespace.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.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(_ref) {
   let {
     title,
@@ -29591,11 +29672,11 @@ function Heading(_ref) {
     onToggle
   } = _ref;
   return /*#__PURE__*/React__namespace.createElement(Clickable__default["default"], {
-    style: [styles$C.container, !isCollapsible && styles$C.notClickable],
+    style: [styles$F.container, !isCollapsible && styles$F.notClickable],
     disabled: !isCollapsible,
     onClick: () => isCollapsible && onToggle?.(!isOpen)
   }, () => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$C.heading
+    style: styles$F.heading
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
     style: {
       fontSize: 14,
@@ -29605,7 +29686,7 @@ function Heading(_ref) {
     isExpanded: isOpen
   })));
 }
-const styles$C = aphrodite.StyleSheet.create({
+const styles$F = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.small_12,
     // NOTE(jeremy): This is the inverse of the @editorPadding CSS
@@ -29773,6 +29854,25 @@ function getDefaultGraphStartCoords(graph, range, step) {
         ...graph,
         startCoords: undefined
       }, range, step);
+    case "point":
+      return perseus.getPointCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "polygon":
+      return perseus.getPolygonCoords({
+        ...graph,
+        startCoords: undefined
+      }, range, step);
+    case "angle":
+      return perseus.getAngleCoords({
+        graph: {
+          ...graph,
+          startCoords: undefined
+        },
+        range,
+        step
+      });
     default:
       return undefined;
   }
@@ -29804,6 +29904,35 @@ 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) => {
+  // 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?.mafs?.["start-coords-ui-phase-1"];
+  const startCoordsPhase2 = flags?.mafs?.["start-coords-ui-phase-2"];
+  const startCoordsPoint = flags?.mafs?.["start-coords-ui-point"];
+  const startCoordsPolygon = flags?.mafs?.["start-coords-ui-polygon"];
+  const startCoordsAngle = flags?.mafs?.["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.
@@ -29820,17 +29949,17 @@ const LockedFigureSelect = props => {
   const figureTypes = ["point", "line", "vector", "ellipse", "polygon"];
   const figureTypesCurrent = props.showM2bFeatures ? [...figureTypes, "function"] : figureTypes;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$B.container
+    style: styles$E.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$B.addElementSelect
+    style: styles$E.addElementSelect
   }, figureTypesCurrent.map(figureType => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
   }))));
 };
-const styles$B = aphrodite.StyleSheet.create({
+const styles$E = aphrodite.StyleSheet.create({
   container: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
@@ -29840,6 +29969,45 @@ const styles$B = aphrodite.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__namespace.useRef(null);
+  React__namespace.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?.addEventListener("wheel", ignoreScroll);
+    return () => {
+      ref?.removeEventListener("wheel", ignoreScroll);
+    };
+  }, [inputRef]);
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, _extends({
+    type: "number"
+  }, props, {
+    ref: inputRef
+  }));
+};
+
 const AngleInput = props => {
   const {
     angle,
@@ -29861,19 +30029,18 @@ const AngleInput = props => {
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$A.row
+    style: styles$D.row
   }, "angle (degrees)", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    type: "number",
+  }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
     value: angleInput,
     onChange: handleAngleChange,
-    style: styles$A.textField
+    style: styles$D.textField
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }));
 };
-const styles$A = aphrodite.StyleSheet.create({
+const styles$D = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29922,32 +30089,30 @@ const CoordinatePairInput = props => {
     onChange(newCoords);
   }
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$z.row, style]
+    style: [styles$C.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$C.row
   }, labels ? labels[0] : "x coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    type: "number",
+  }), /*#__PURE__*/React__namespace.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__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$z.row
+    style: styles$C.row
   }, labels ? labels[1] : "y coord", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    type: "number",
+  }), /*#__PURE__*/React__namespace.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 = aphrodite.StyleSheet.create({
+const styles$C = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -29980,14 +30145,14 @@ const PerseusEditorAccordion = props => {
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.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__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$y.accordionPanel, panelStyle]
+    style: [styles$B.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$y = aphrodite.StyleSheet.create({
+const styles$B = aphrodite.StyleSheet.create({
   container: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8
@@ -30018,13 +30183,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$x.colorSwatch, {
+    style: [styles$A.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$x = aphrodite.StyleSheet.create({
+const styles$A = aphrodite.StyleSheet.create({
   colorSwatch: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30043,10 +30208,10 @@ const ColorSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$w.row, style]
+    style: [styles$z.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$w.row
+    style: styles$z.row
   }, "color", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30065,11 +30230,14 @@ const ColorSelect = props => {
     })
   })))));
 };
-const styles$w = aphrodite.StyleSheet.create({
+const styles$z = aphrodite.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"
   }
 });
 
@@ -30081,17 +30249,17 @@ const EllipseSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$v.container, {
+    style: [styles$y.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$v.innerCircle, {
+    style: [styles$y.innerCircle, {
       backgroundColor: perseus.lockedFigureColors[color],
-      opacity: perseus.lockedFigureFillStyles[fillStyle]
+      opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$v = aphrodite.StyleSheet.create({
+const styles$y = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30110,6 +30278,40 @@ const styles$v = aphrodite.StyleSheet.create({
   }
 });
 
+const LineStrokeSelect = props => {
+  const {
+    selectedValue,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$x.lineStrokeSelect
+  }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxxSmall_4
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+    selectedValue: selectedValue,
+    onChange: onChange
+    // Placeholder is required, but never gets used.
+    ,
+    placeholder: ""
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "solid",
+    label: "solid"
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
+    value: "dashed",
+    label: "dashed"
+  })));
+};
+const styles$x = aphrodite.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
@@ -30122,40 +30324,40 @@ const LockedFigureSettingsActions = props => {
     onRemove
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$u.container
+    style: styles$w.container
   }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     startIcon: trashIcon__default["default"],
     "aria-label": `Delete locked ${figureType}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$u.deleteButton
+    style: styles$w.deleteButton
   }, "Delete"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the back`,
     onClick: () => onMove("back"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretUpIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} backward`,
     onClick: () => onMove("backward"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} forward`,
     onClick: () => onMove("forward"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
     icon: caretDoubleDownIcon__default["default"],
     size: "small",
     "aria-label": `Move locked ${figureType} to the front`,
     onClick: () => onMove("front"),
-    style: styles$u.iconButton
+    style: styles$w.iconButton
   }));
 };
-const styles$u = aphrodite.StyleSheet.create({
+const styles$w = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30202,7 +30404,7 @@ const LockedEllipseSettings = props => {
     /*#__PURE__*/
     // Summary: Ellipse, center, radius, color (opacity, dashed)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$t.row
+      style: styles$v.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(EllipseSwatch, {
@@ -30211,19 +30413,19 @@ const LockedEllipseSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$t.row
+    style: styles$v.row
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: center,
-    style: styles$t.spaceUnder,
+    style: styles$v.spaceUnder,
     onChange: newCoords => onChangeProps({
       center: newCoords
     })
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$t.spaceUnder
+    style: styles$v.spaceUnder
   }, /*#__PURE__*/React__namespace.createElement(InfoTip$d, null, "The coordinates for the center of the ellipse."))), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: radius,
     labels: ["x radius", "y radius"],
-    style: styles$t.spaceUnder,
+    style: styles$v.spaceUnder,
     onChange: newCoords => onChangeProps({
       radius: newCoords
     })
@@ -30235,7 +30437,7 @@ const LockedEllipseSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xSmall_8
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$t.row, styles$t.spaceUnder]
+    style: [styles$v.row, styles$v.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30243,7 +30445,7 @@ const LockedEllipseSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$t.row
+    style: [styles$v.row, styles$v.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30258,25 +30460,200 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: styles$t.row
-  }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }))))), /*#__PURE__*/React__namespace.createElement(LineStrokeSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
     })
+  }), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+    figureType: props.type,
+    onMove: onMove,
+    onRemove: onRemove
+  }));
+};
+const styles$v = aphrodite.StyleSheet.create({
+  row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  spaceUnder: {
+    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
+  }
+});
+
+const LineSwatch = props => {
+  const {
+    color,
+    lineStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$u.container
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    "aria-label": `${color}, ${lineStyle}`,
+    style: [styles$u.lineSwatch, {
+      border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
+    }]
+  }));
+};
+const styles$u = aphrodite.StyleSheet.create({
+  container: {
+    backgroundColor: wonderBlocksTokens.color.white,
+    justifyContent: "center",
+    padding: wonderBlocksTokens.spacing.xSmall_8,
+    borderRadius: wonderBlocksTokens.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] = React.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  React.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__namespace.createElement(PerseusEditorAccordion, {
+    expanded: props.expanded,
+    onToggle: props.onToggle,
+    header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$t.row
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+      style: styles$t.accordionHeader
+    }, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.xSmall_8
+    }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
+      color: lineColor,
+      lineStyle: strokeStyle
+    }))
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$t.row, styles$t.spaceUnder]
+  }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+    selectedValue: lineColor,
+    onChange: newValue => {
+      handlePropChange("color", newValue);
+    }
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.small_12
+  }), /*#__PURE__*/React__namespace.createElement(LineStrokeSelect, {
+    selectedValue: strokeStyle,
+    onChange: newValue => {
+      handlePropChange("strokeStyle", newValue);
+    }
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$t.row, styles$t.rowSpace]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "solid",
-    label: "solid"
+    value: "x",
+    label: "y ="
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "dashed",
-    label: "dashed"
+    value: "y",
+    label: "x ="
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    type: "text",
+    "aria-label": "equation",
+    value: equation,
+    onChange: newValue => {
+      handlePropChange("equation", newValue);
+    },
+    style: [styles$t.textField]
+  })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$t.row, styles$t.rowSpace]
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    style: styles$t.domainMin
+  }, "domain min", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    type: "number",
+    style: styles$t.domainMinField,
+    value: domainEntries[0],
+    onChange: newValue => {
+      handleDomainChange(0, newValue);
+    }
+  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.medium_16
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    "aria-label": "domain max",
+    style: styles$t.domainMax
+  }, "max", /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+    type: "number",
+    style: styles$t.domainMaxField,
+    value: domainEntries[1],
+    onChange: newValue => {
+      handleDomainChange(1, newValue);
+    }
   }))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
@@ -30284,13 +30661,57 @@ const LockedEllipseSettings = props => {
   }));
 };
 const styles$t = aphrodite.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: wonderBlocksTokens.spacing.xSmall_8
+  },
   row: {
     display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
-  spaceUnder: {
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  textField: {
+    flexGrow: "1"
   }
 });
 
@@ -30412,32 +30833,6 @@ const styles$r = aphrodite.StyleSheet.create({
   }
 });
 
-const LineSwatch = props => {
-  const {
-    color,
-    lineStyle
-  } = props;
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$q.container
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    "aria-label": `${color}, ${lineStyle}`,
-    style: [styles$q.lineSwatch, {
-      border: `5px ${lineStyle} ${perseus.lockedFigureColors[color]}`
-    }]
-  }));
-};
-const styles$q = aphrodite.StyleSheet.create({
-  container: {
-    backgroundColor: wonderBlocksTokens.color.white,
-    justifyContent: "center",
-    padding: wonderBlocksTokens.spacing.xSmall_8,
-    borderRadius: wonderBlocksTokens.spacing.xxxSmall_4
-  },
-  lineSwatch: {
-    width: 40
-  }
-});
-
 const lengthZeroStr = "The line cannot have length 0.";
 const LockedLineSettings = props => {
   const {
@@ -30485,7 +30880,7 @@ const LockedLineSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$p.row
+      style: styles$q.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30494,7 +30889,7 @@ const LockedLineSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: [styles$p.row, styles$p.spaceUnder]
+    style: [styles$q.row, styles$q.spaceUnder]
   }, "kind", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxxSmall_4
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30515,34 +30910,19 @@ const LockedLineSettings = props => {
     value: "segment",
     label: "segment"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$p.row
+    style: styles$q.row
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: styles$p.row
-  }, "style", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxxSmall_4
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }), /*#__PURE__*/React__namespace.createElement(LineStrokeSelect, {
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
       lineStyle: value
     })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: "",
-    style: styles$p.selectMarginOffset
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "solid",
-    label: "solid"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "dashed",
-    label: "dashed"
-  })))), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$p.errorText
+  })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    style: styles$q.errorText
   }, lengthZeroStr), /*#__PURE__*/React__namespace.createElement(DefiningPointSettings, _extends({
     label: "Point 1",
     showPoint: showPoint1,
@@ -30567,7 +30947,7 @@ const LockedLineSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$p = aphrodite.StyleSheet.create({
+const styles$q = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30576,10 +30956,6 @@ const styles$p = aphrodite.StyleSheet.create({
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
-  selectMarginOffset: {
-    // Align with the point settings accordions.
-    marginInlineEnd: -wonderBlocksTokens.spacing.xxxSmall_4
-  },
   errorText: {
     color: wonderBlocksTokens.color.red
   }
@@ -30612,7 +30988,7 @@ const LockedPointSettings = props => {
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$o.row
+      style: styles$p.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30621,7 +30997,7 @@ const LockedPointSettings = props => {
     }))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: coord,
-    style: styles$o.spaceUnder,
+    style: styles$p.spaceUnder,
     onChange: newCoord => {
       onChangeProps({
         coord: newCoord
@@ -30630,7 +31006,7 @@ const LockedPointSettings = props => {
   }), /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: pointColor,
     onChange: handleColorChange,
-    style: styles$o.spaceUnder
+    style: styles$p.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "open point",
     checked: !filled,
@@ -30645,7 +31021,7 @@ const LockedPointSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
@@ -30663,17 +31039,17 @@ const PolygonSwatch = props => {
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     "aria-label": `${color}, stroke ${strokeStyle}, fill ${fillStyle}`,
-    style: [styles$n.container, {
+    style: [styles$o.container, {
       border: `4px ${strokeStyle} ${perseus.lockedFigureColors[color]}`
     }]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$n.innerSquare, {
+    style: [styles$o.innerSquare, {
       backgroundColor: perseus.lockedFigureColors[color],
-      opacity: perseus.lockedFigureFillStyles[fillStyle]
+      opacity: fillStyle === "white" ? 0 : perseus.lockedFigureFillStyles[fillStyle]
     }]
   }));
 };
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   container: {
     // Add a white outline so that the color swatch is visible when
     // the dropdown option is highlighted with its blue background.
@@ -30715,7 +31091,7 @@ const LockedPolygonSettings = props => {
     /*#__PURE__*/
     // Summary: Polygon, number of sides, style swatch
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$m.row
+      style: styles$n.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Polygon, ${points.length} sides`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(PolygonSwatch, {
@@ -30724,7 +31100,7 @@ const LockedPolygonSettings = props => {
       strokeStyle: strokeStyle
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$m.row, styles$m.spaceUnder]
+    style: [styles$n.row, styles$n.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: color,
     onChange: handleColorChange
@@ -30732,7 +31108,7 @@ const LockedPolygonSettings = props => {
     size: wonderBlocksTokens.spacing.medium_16
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     tag: "label",
-    style: styles$m.row
+    style: [styles$n.row, styles$n.truncatedWidth]
   }, "fill", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.xxSmall_6
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
@@ -30747,42 +31123,28 @@ const LockedPolygonSettings = props => {
     key: option,
     value: option,
     label: option
-  }))))), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    style: [styles$m.row, styles$m.spaceUnder]
-  }, "stroke", /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xxSmall_6
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }))))), /*#__PURE__*/React__namespace.createElement(LineStrokeSelect, {
     selectedValue: strokeStyle,
     onChange: value => onChangeProps({
       strokeStyle: value
     })
-    // Placeholder is required, but never gets used.
-    ,
-    placeholder: ""
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "solid",
-    label: "solid"
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
-    value: "dashed",
-    label: "dashed"
-  }))), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+  }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
     label: "show vertices",
     checked: showVertices,
     onChange: newValue => onChangeProps({
       showVertices: newValue
     }),
-    style: styles$m.spaceUnder
+    style: styles$n.spaceUnder
   }), /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.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__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${pointLabel}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.medium_16
     }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -30810,7 +31172,7 @@ const LockedPolygonSettings = props => {
           points: newPoints
         });
       },
-      style: styles$m.icon
+      style: styles$n.icon
     }));
   }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
@@ -30826,7 +31188,7 @@ const LockedPolygonSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   row: {
     display: "flex",
     flexDirection: "row",
@@ -30843,6 +31205,10 @@ const styles$m = aphrodite.StyleSheet.create({
   },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
+  },
+  truncatedWidth: {
+    // Allow truncation, stop bleeding over the edge.
+    minWidth: 0
   }
 });
 
@@ -30884,7 +31250,7 @@ const LockedVectorSettings = props => {
     expanded: props.expanded,
     onToggle: props.onToggle,
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(LineSwatch, {
@@ -30892,19 +31258,19 @@ const LockedVectorSettings = props => {
       lineStyle: "solid"
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$l.row, styles$l.spaceUnder]
+    style: [styles$m.row, styles$m.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     selectedValue: lineColor,
     onChange: handleColorChange
   })), isInvalid && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    style: styles$l.errorText
+    style: styles$m.errorText
   }, lengthErrorMessage), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tail (${tail[0]}, ${tail[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tail,
@@ -30915,10 +31281,10 @@ const LockedVectorSettings = props => {
   })), /*#__PURE__*/React__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$l.row
+      style: styles$m.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Tip (${tip[0]}, ${tip[1]})`))
   }, /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
     coord: tip,
@@ -30932,7 +31298,7 @@ const LockedVectorSettings = props => {
     onRemove: onRemove
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   accordionPanel: {
     paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
@@ -30974,6 +31340,11 @@ const LockedFigureSettings = props => {
       return /*#__PURE__*/React__namespace.createElement(LockedEllipseSettings, props);
     case "polygon":
       return /*#__PURE__*/React__namespace.createElement(LockedPolygonSettings, props);
+    case "function":
+      if (props.showM2bFeatures) {
+        return /*#__PURE__*/React__namespace.createElement(LockedFunctionSettings, props);
+      }
+      break;
   }
   return null;
 };
@@ -31079,12 +31450,6 @@ const LockedFiguresSection = props => {
     onToggle: () => setIsExpanded(!isExpanded),
     isCollapsible: true
   }), isExpanded && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, 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__namespace.createElement(LockedFigureSettings, _extends({
       key: `${uniqueId}-locked-${figure}-${index}`,
       showM2bFeatures: props.showM2bFeatures,
@@ -31100,7 +31465,7 @@ const LockedFiguresSection = props => {
       onRemove: () => removeLockedFigure(index)
     }));
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$k.buttonContainer
+    style: styles$l.buttonContainer
   }, /*#__PURE__*/React__namespace.createElement(LockedFigureSelect, {
     showM2bFeatures: props.showM2bFeatures,
     id: `${uniqueId}-select`,
@@ -31110,10 +31475,10 @@ const LockedFiguresSection = props => {
   }), showExpandButton && /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
-    style: styles$k.button
+    style: styles$l.button
   }, buttonLabel))));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   buttonContainer: {
     flexDirection: "row",
     alignItems: "center"
@@ -31149,7 +31514,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$j.singleSelectShort
+    style: styles$k.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -31160,7 +31525,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31173,7 +31538,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__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -31206,7 +31571,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31241,7 +31606,6 @@ function InteractiveGraphCorrectAnswer(props) {
 const {
   ButtonGroup: ButtonGroup$2,
   InfoTip: InfoTip$c,
-  PropCheckBox: PropCheckBox$7,
   RangeInput: RangeInput$4
 } = perseus.components;
 const defaultBackgroundImage$1 = {
@@ -31629,16 +31993,20 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change("markings")
     }))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.change
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.change({
+          showTooltips: value
+        });
+      }
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$h.resetSpaceTop
+      style: styles$i.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$h.backgroundUrlInput),
+      className: aphrodite.css(styles$i.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -31654,14 +32022,18 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$c, null, /*#__PURE__*/React__namespace.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.protractorSection
+      style: styles$i.protractorSection
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$h.checkboxRow
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
+      style: styles$i.checkboxRow
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement(Banner__default["default"], {
       layout: "floating",
       text: "The protractor is not accessible. Please consider an alternate approach.",
@@ -31669,7 +32041,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     }))));
   }
 }
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -31708,14 +32080,14 @@ const SegmentCountSelector = _ref => {
       const num = +newValue;
       onChange(num);
     },
-    style: styles$g.singleSelectShort
+    style: styles$h.singleSelectShort
   }, ___default["default"].range(1, 7).map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
     label: `${n} segment${n > 1 ? "s" : ""}`
   })));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -31723,15 +32095,49 @@ const styles$g = aphrodite.StyleSheet.create({
   }
 });
 
+const StartCoordsAngle = props => {
+  const {
+    startCoords
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, "WIP", /*#__PURE__*/React__namespace.createElement("br", null), " Start coords:", startCoords.map((coord, index) => {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      key: index
+    }, `Point ${index + 1}: (${coord[0]}, ${coord[1]})`);
+  }));
+};
+
 const StartCoordsCircle = props => {
   const {
     startCoords,
     onChange
   } = props;
+  const [radiusState, setRadiusState] = React__namespace.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__namespace.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__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$f.tile
+    style: styles$g.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$f.row
+    style: styles$g.row
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Center:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31743,23 +32149,18 @@ const StartCoordsCircle = props => {
     })
   })), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$f.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Radius:"), /*#__PURE__*/React__namespace.createElement(Strut, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, {
+    tag: "label",
+    style: styles$g.row
+  }, "Radius:", /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
-    value: startCoords.radius.toString(),
-    type: "number",
-    onChange: value => {
-      onChange({
-        center: startCoords.center,
-        radius: parseFloat(value)
-      });
-    },
-    style: styles$f.textField
+  }), /*#__PURE__*/React__namespace.createElement(ScrolllessNumberTextField, {
+    value: radiusState,
+    onChange: handleRadiuschange,
+    style: styles$g.textField
   })));
 };
-const styles$f = aphrodite.StyleSheet.create({
+const styles$g = aphrodite.StyleSheet.create({
   tile: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -31767,6 +32168,7 @@ const styles$f = aphrodite.StyleSheet.create({
     borderRadius: wonderBlocksTokens.spacing.xSmall_8
   },
   row: {
+    display: "flex",
     flexDirection: "row",
     alignItems: "center"
   },
@@ -31781,7 +32183,7 @@ const StartCoordsLine = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$e.tile
+    style: styles$f.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31789,7 +32191,7 @@ const StartCoordsLine = props => {
     labels: ["x", "y"],
     onChange: value => onChange([value, startCoords[1]])
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$e.tile
+    style: styles$f.tile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31798,7 +32200,7 @@ const StartCoordsLine = props => {
     onChange: value => onChange([startCoords[0], value])
   })));
 };
-const styles$e = aphrodite.StyleSheet.create({
+const styles$f = aphrodite.StyleSheet.create({
   tile: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -31821,7 +32223,7 @@ const StartCoordsMultiline = props => {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${graphName} ${i + 1}`),
     expanded: true
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.nestedTile
+    style: styles$e.nestedTile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 1:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31833,7 +32235,7 @@ const StartCoordsMultiline = props => {
       onChange(newCoords);
     }
   })), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.nestedTile
+    style: styles$e.nestedTile
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, "Point 2:"), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
@@ -31846,7 +32248,7 @@ const StartCoordsMultiline = props => {
     }
   })))));
 };
-const styles$d = aphrodite.StyleSheet.create({
+const styles$e = aphrodite.StyleSheet.create({
   nestedTile: {
     paddingBottom: wonderBlocksTokens.spacing.small_12,
     flexDirection: "row",
@@ -31854,6 +32256,39 @@ const styles$d = aphrodite.StyleSheet.create({
   }
 });
 
+const StartCoordsPoint = props => {
+  const {
+    startCoords,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, startCoords.map((coord, index) => {
+    return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      key: index,
+      style: styles$d.tile
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `Point ${index + 1}:`), /*#__PURE__*/React__namespace.createElement(Strut, {
+      size: wonderBlocksTokens.spacing.small_12
+    }), /*#__PURE__*/React__namespace.createElement(CoordinatePairInput, {
+      coord: coord,
+      labels: ["x", "y"],
+      onChange: newCoord => {
+        const newStartCoords = [...startCoords];
+        newStartCoords[index] = newCoord;
+        onChange(newStartCoords);
+      }
+    }));
+  }));
+};
+const styles$d = aphrodite.StyleSheet.create({
+  tile: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8,
+    padding: wonderBlocksTokens.spacing.small_12,
+    borderRadius: wonderBlocksTokens.spacing.xSmall_8,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 const StartCoordsQuadratic = props => {
   const {
     startCoords,
@@ -32012,6 +32447,24 @@ const StartCoordsSettingsInner = props => {
         startCoords: quadraticCoords,
         onChange: onChange
       });
+    // Graphs with startCoords of type ReadonlyArray<Coord>
+    case "point":
+    case "polygon":
+      const pointCoords = type === "point" ? perseus.getPointCoords(props, range, step) : perseus.getPolygonCoords(props, range, step);
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsPoint, {
+        startCoords: pointCoords,
+        onChange: onChange
+      });
+    case "angle":
+      const angleCoords = perseus.getAngleCoords({
+        graph: props,
+        range,
+        step
+      });
+      return /*#__PURE__*/React__namespace.createElement(StartCoordsAngle, {
+        startCoords: angleCoords,
+        onChange: onChange
+      });
     default:
       return null;
   }
@@ -32066,10 +32519,6 @@ const POLYGON_SIDES = ___default["default"].map(___default["default"].range(3, 1
     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.
@@ -32163,9 +32612,6 @@ class InteractiveGraphEditor extends React__namespace.Component {
         className: "perseus-error"
       }, this.props.valid);
     }
-    const startCoordsPhase1 = this.props.apiOptions?.flags?.mafs?.["start-coords-ui-phase-1"];
-    const startCoordsPhase2 = this.props.apiOptions?.flags?.mafs?.["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__namespace.createElement(wonderBlocksCore.View, null, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Type of Graph:"
     }, /*#__PURE__*/React__namespace.createElement(GraphTypeSelector, {
@@ -32238,7 +32684,8 @@ class InteractiveGraphEditor extends React__namespace.Component {
           coords: null
         };
         this.props.onChange({
-          correct: graph
+          correct: graph,
+          graph: graph
         });
       },
       style: styles$a.singleSelectShort
@@ -32312,7 +32759,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       }
     })), this.props.graph?.type &&
     // TODO(LEMS-2228): Remove flags once this is fully released
-    displayStartCoordsUI && /*#__PURE__*/React__namespace.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
+    shouldShowStartCoordsUI(this.props.apiOptions.flags, this.props.graph) && /*#__PURE__*/React__namespace.createElement(StartCoordsSettings, _extends({}, this.props.graph, {
       range: this.props.range,
       step: this.props.step,
       onChange: this.changeStartCoords
@@ -33938,7 +34385,6 @@ const styles = aphrodite.StyleSheet.create({
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
 const {
   InfoTip: InfoTip$a,
-  PropCheckBox: PropCheckBox$6,
   TextListEditor: TextListEditor$3
 } = perseus.components;
 class MatcherEditor extends React__namespace.Component {
@@ -33990,14 +34436,22 @@ class MatcherEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onChange: this.onLabelChange.bind(this, 1)
-    })), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$6, {
+    })), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Order of the matched pairs matters:",
-      orderMatters: this.props.orderMatters,
-      onChange: this.props.onChange
-    }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox$6, {
+      checked: this.props.orderMatters,
+      onChange: value => {
+        this.props.onChange({
+          orderMatters: value
+        });
+      }
+    }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Padding:",
-      padding: this.props.padding,
-      onChange: this.props.onChange
+      checked: this.props.padding,
+      onChange: value => {
+        this.props.onChange({
+          padding: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$a, null, /*#__PURE__*/React__namespace.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
   onLabelChange = (index, e) => {
@@ -34150,7 +34604,6 @@ class MatrixEditor extends React__namespace.Component {
 const {
   InfoTip: InfoTip$9,
   NumberInput: NumberInput$7,
-  PropCheckBox: PropCheckBox$5,
   RangeInput: RangeInput$2
 } = perseus.components;
 const defaultImage = {
@@ -34224,16 +34677,24 @@ class MeasurerEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show ruler",
-      showRuler: this.props.showRuler,
-      onChange: this.props.onChange
+      checked: this.props.showRuler,
+      onChange: value => {
+        this.props.onChange({
+          showRuler: value
+        });
+      }
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$5, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("label", null, " ", "Ruler label:", " ", /*#__PURE__*/React__namespace.createElement("select", {
       onChange: e =>
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
@@ -34360,7 +34821,6 @@ const {
   ButtonGroup: ButtonGroup$1,
   InfoTip: InfoTip$8,
   NumberInput: NumberInput$5,
-  PropCheckBox: PropCheckBox$4,
   RangeInput: RangeInput$1
 } = perseus.components;
 const bound = (x, gt, lt) => Math.min(Math.max(x, gt), lt);
@@ -34600,22 +35060,34 @@ class NumberLineEditor extends React__namespace.Component {
       className: "perseus-widget-row"
     }, !this.props.static && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$4, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, !this.props.static && /*#__PURE__*/React__namespace.createElement(PropCheckBox$4, {
+    }, !this.props.static && /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Show tooltips",
-      showTooltips: this.props.showTooltips,
-      onChange: this.props.onChange
+      checked: this.props.showTooltips,
+      onChange: value => {
+        this.props.onChange({
+          showTooltips: value
+        });
+      }
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
     }, isTickCtrl && /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("label", null, "Start num divisions at", " ", /*#__PURE__*/React__namespace.createElement(NumberInput$5, {
@@ -34666,7 +35138,6 @@ const {
   InlineIcon: InlineIcon$1,
   MultiButtonGroup,
   NumberInput: NumberInput$4,
-  PropCheckBox: PropCheckBox$3,
   TextInput: TextInput$3
 } = perseus.components;
 const {
@@ -34760,12 +35231,14 @@ class NumericInputEditor extends React__namespace.Component {
       onChange: this.updateAnswer(i, "answerForms") || (() => {})
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("p", null, "To restrict the answer to ", /*#__PURE__*/React__namespace.createElement("em", null, "only"), " an improper fraction (i.e. 7/4), select the improper fraction and toggle \"strict\" to true. This ", /*#__PURE__*/React__namespace.createElement("b", null, "will not"), " ", "accept 1.75 as an answer.", " "), /*#__PURE__*/React__namespace.createElement("p", null, "Unless you are testing that specific skill, please do not restrict the answer format."))), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", {
       className: "perseus-widget-row"
@@ -34791,23 +35264,31 @@ class NumericInputEditor extends React__namespace.Component {
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement("label", null, "Label text:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
+    }, /*#__PURE__*/React__namespace.createElement("label", null, "Aria label", /*#__PURE__*/React__namespace.createElement(TextInput$3, {
       value: this.props.labelText,
       onChange: this.change("labelText")
     })), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.createElement("p", null, "Text to describe this input. This will be shown to users using screenreaders.")));
     const coefficientCheck = /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$3, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Coefficient",
-      coefficient: this.props.coefficient,
-      onChange: this.props.onChange
+      checked: this.props.coefficient,
+      onChange: value => {
+        this.props.onChange({
+          coefficient: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$7, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("a", {
       href: "#",
@@ -34938,11 +35419,11 @@ class NumericInputEditor extends React__namespace.Component {
     });
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-input-number-editor"
-    }, /*#__PURE__*/React__namespace.createElement("div", {
+    }, labelText, inputSize, rightAlign, coefficientCheck, /*#__PURE__*/React__namespace.createElement("div", {
       className: "ui-title"
     }, "User input"), /*#__PURE__*/React__namespace.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);
   }
   change = (() => {
     var _this = this;
@@ -35158,8 +35639,7 @@ class OrdererEditor extends React__namespace.Component {
 }
 
 const {
-  InfoTip: InfoTip$5,
-  PropCheckBox: PropCheckBox$2
+  InfoTip: InfoTip$5
 } = perseus.components;
 class PassageEditor extends React__namespace.Component {
   static propTypes = {
@@ -35224,11 +35704,14 @@ class PassageEditor extends React__namespace.Component {
       className: "perseus-widget-passage-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-row"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$2, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", null, "Passage title:", /*#__PURE__*/React__namespace.createElement(InfoTip$5, null, /*#__PURE__*/React__namespace.createElement("p", null, "An optional title that will appear directly above the passage in the same font style. (E.g. Passage 1)")), /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
       defaultValue: this.props.passageTitle,
@@ -35700,8 +36183,7 @@ class PythonProgramEditor extends React__namespace.Component {
 
 /* eslint-disable jsx-a11y/anchor-is-valid, react/forbid-prop-types, react/sort-comp */
 const {
-  InlineIcon,
-  PropCheckBox: PropCheckBox$1
+  InlineIcon
 } = perseus.components;
 const {
   iconPlus,
@@ -35805,25 +36287,34 @@ class RadioEditor extends React__namespace.Component {
       target: "_blank"
     }, "Multiple choice style guide"), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Multiple selections",
-      labelAlignment: "right",
-      multipleSelect: this.props.multipleSelect,
-      onChange: this.onMultipleSelectChange
+      checked: this.props.multipleSelect,
+      onChange: value => {
+        this.onMultipleSelectChange({
+          multipleSelect: value
+        });
+      }
     })), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-widget-right-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement("div", {
       className: "perseus-widget-left-col"
-    }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$1, {
+    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       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__namespace.createElement(perseus.BaseRadio, {
       multipleSelect: this.props.multipleSelect,
       countChoices: this.props.countChoices,
@@ -36052,7 +36543,6 @@ class SimpleMarkdownTesterEditor extends React__namespace.Component {
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
   InfoTip: InfoTip$2,
-  PropCheckBox,
   TextListEditor
 } = perseus.components;
 const HORIZONTAL = "horizontal";
@@ -36098,10 +36588,14 @@ class SorterEditor extends React__namespace.Component {
       value: HORIZONTAL
     }, "Horizontal"), /*#__PURE__*/React__namespace.createElement("option", {
       value: VERTICAL
-    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$2, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(PropCheckBox, {
+    }, "Vertical"))), /*#__PURE__*/React__namespace.createElement(InfoTip$2, null, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
       label: "Padding:",
-      padding: this.props.padding,
-      onChange: this.props.onChange
+      checked: this.props.padding,
+      onChange: value => {
+        this.props.onChange({
+          padding: value
+        });
+      }
     }), /*#__PURE__*/React__namespace.createElement(InfoTip$2, null, /*#__PURE__*/React__namespace.createElement("p", null, "Padding is good for text, but not needed for images."))));
   }
 }