@khanacademy/perseus-editor 6.1.0 → 6.2.1

package/dist/index.js

@@ -24,6 +24,7 @@ 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 Banner = require('@khanacademy/wonder-blocks-banner');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var Button = require('@khanacademy/wonder-blocks-button');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
@@ -59,13 +60,14 @@ var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespace(KAS);
+var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
 var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.1.0";
+const libVersion = "6.2.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -260,13 +262,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$t.button
+      style: styles$u.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$b, icon);
     });
   }
 }
-const styles$t = aphrodite.StyleSheet.create({
+const styles$u = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20785,19 +20787,19 @@ class TexErrorView extends React__namespace.Component {
     const {
       showErrors
     } = this.state;
-    const iconStyle = showErrors ? styles$s.iconExpanded : styles$s.iconCollapsed;
+    const iconStyle = showErrors ? styles$t.iconExpanded : styles$t.iconCollapsed;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.errorContainer
+      style: styles$t.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.title,
+      style: styles$t.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
       icon: caretRight__default["default"],
       style: iconStyle
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$s.errorExplanation
+      style: styles$t.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$s.error,
+      style: styles$t.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20806,7 +20808,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$s = aphrodite.StyleSheet.create({
+const styles$t = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -24563,12 +24565,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$r.baseButton, color === "green" && styles$r.green, color === "orange" && styles$r.orange),
+      className: aphrodite.css(styles$s.baseButton, color === "green" && styles$s.green, color === "orange" && styles$s.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$r = aphrodite.StyleSheet.create({
+const styles$s = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24781,23 +24783,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$q.containerHeader)
+    className: aphrodite.css(styles$r.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$q.containerTitle)
+    className: aphrodite.css(styles$r.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.container)
+    className: aphrodite.css(styles$r.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$q.row, styles$q.rowHeading)
+    className: aphrodite.css(styles$r.row, styles$r.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$q.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$r.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.containerTitle)
+    className: aphrodite.css(styles$r.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnRight)
+    className: aphrodite.css(styles$r.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24810,11 +24812,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.container)
+    className: aphrodite.css(styles$r.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft, styles$q.containerHeader)
+    className: aphrodite.css(styles$r.columnLeft, styles$r.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24828,28 +24830,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.containerHeader)
+    className: aphrodite.css(styles$r.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$q.containerTitle)
+    className: aphrodite.css(styles$r.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.containerHeader, styles$q.previewCollectionHeader)
+    className: aphrodite.css(styles$r.containerHeader, styles$r.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$q.containerTitle)
+    className: aphrodite.css(styles$r.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.container)
+    className: aphrodite.css(styles$r.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$q.row)
+    className: aphrodite.css(styles$r.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnRight)
+    className: aphrodite.css(styles$r.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$q.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$r.contentIndent)
   }, children));
 };
 
@@ -24969,11 +24971,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$q.row)
+    className: aphrodite.css(styles$r.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$q.sticky)
+    className: aphrodite.css(sticky && styles$r.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -24981,9 +24983,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnRight)
+    className: aphrodite.css(styles$r.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$q.sticky)
+    className: aphrodite.css(sticky && styles$r.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -24999,13 +25001,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.row)
+    className: aphrodite.css(styles$r.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$q.sticky)
+    className: aphrodite.css(sticky && styles$r.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$q.hintEditor),
+    className: aphrodite.css(styles$r.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25020,9 +25022,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnRight)
+    className: aphrodite.css(styles$r.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$q.sticky)
+    className: aphrodite.css(sticky && styles$r.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25039,9 +25041,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.columnLeft)
+    className: aphrodite.css(styles$r.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$q.tagsEditor)
+    className: aphrodite.css(styles$r.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25072,23 +25074,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$q.control)
+      className: aphrodite.css(styles$r.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$q.verticalFlip)
+      className: aphrodite.css(styles$r.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$q.control)
+      className: aphrodite.css(styles$r.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$q.control)
+      className: aphrodite.css(styles$r.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25096,7 +25098,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$q.arrayElement, !elementIsLeaf && styles$q.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$r.arrayElement, !elementIsLeaf && styles$r.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25122,7 +25124,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$q.objectElement)
+    className: aphrodite.css(styles$r.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25292,7 +25294,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$q = aphrodite.StyleSheet.create({
+const styles$r = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -25444,47 +25446,47 @@ const StatefulArticleEditor = createReactClass__default["default"]({
       screen
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$p.controlBar
+      style: styles$q.controlBar
     }, /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$p.controls
+      style: styles$q.controls
     }, "Mode:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "edit"
       }),
-      style: mode === "edit" ? styles$p.controlSelected : styles$p.control
+      style: mode === "edit" ? styles$q.controlSelected : styles$q.control
     }, "EDIT"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "preview"
       }),
-      style: mode === "preview" ? styles$p.controlSelected : styles$p.control
+      style: mode === "preview" ? styles$q.controlSelected : styles$q.control
     }, "PREVIEW"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         mode: "json"
       }),
-      style: mode === "json" ? styles$p.controlSelected : styles$p.control
+      style: mode === "json" ? styles$q.controlSelected : styles$q.control
     }, "JSON")), /*#__PURE__*/React__namespace.createElement("span", {
-      style: styles$p.controls
+      style: styles$q.controls
     }, "Screen:", " ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "phone"
       }),
-      style: screen === "phone" ? styles$p.controlSelected : styles$p.control
+      style: screen === "phone" ? styles$q.controlSelected : styles$q.control
     }, "PHONE"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "tablet"
       }),
-      style: screen === "tablet" ? styles$p.controlSelected : styles$p.control
+      style: screen === "tablet" ? styles$q.controlSelected : styles$q.control
     }, "TABLET"), " | ", /*#__PURE__*/React__namespace.createElement("span", {
       onClick: () => this.setState({
         screen: "desktop"
       }),
-      style: screen === "desktop" ? styles$p.controlSelected : styles$p.control
+      style: screen === "desktop" ? styles$q.controlSelected : styles$q.control
     }, "DESKTOP"))), /*#__PURE__*/React__namespace.createElement("div", {
-      style: styles$p.editor
+      style: styles$q.editor
     }, /*#__PURE__*/React__namespace.createElement(ArticleEditor, this.state)));
   }
 });
-const styles$p = {
+const styles$q = {
   controlBar: {
     marginBottom: 25,
     marginTop: 5
@@ -27023,10 +27025,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$o.title)
+      className: aphrodite.css(styles$p.title)
     }, "Title:", " ", /*#__PURE__*/React__namespace.createElement(TextInput$6, {
       value: this.props.title,
-      className: aphrodite.css(styles$o.input)
+      className: aphrodite.css(styles$p.input)
       // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
       ,
       onChange: this.change("title")
@@ -27051,7 +27053,7 @@ class GradedGroupEditor extends React__namespace.Component {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, 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$o.hintsTitle)
+      className: aphrodite.css(styles$p.hintsTitle)
     }, "Hint"), /*#__PURE__*/React__namespace.createElement(Editor, {
       ref: this.hintEditor,
       content: this.props.hint ? this.props.hint.content : "",
@@ -27083,7 +27085,7 @@ class GradedGroupEditor extends React__namespace.Component {
     };
   };
 }
-const styles$o = aphrodite.StyleSheet.create({
+const styles$p = aphrodite.StyleSheet.create({
   title: {
     fontSize: 18,
     fontWeight: "bold"
@@ -28453,13 +28455,13 @@ function MathquillInput(props) {
     }
   });
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$n.outerWrapper
+    style: styles$o.outerWrapper
   }, /*#__PURE__*/React__namespace.createElement("span", {
     ref: mathFieldWrapperRef,
     className: "perseus-math-input mq-editable-field mq-math-mode"
   }));
 }
-const styles$n = aphrodite.StyleSheet.create({
+const styles$o = aphrodite.StyleSheet.create({
   outerWrapper: {
     display: "inline-block",
     borderStyle: "solid",
@@ -29545,7 +29547,7 @@ const GraphPointsCountSelector = _ref => {
     // Never uses placeholder, always has value
     ,
     placeholder: "",
-    style: styles$m.singleSelectShort
+    style: styles$n.singleSelectShort
   }, [...[...Array(7).keys()].map(n => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     key: n,
     value: `${n}`,
@@ -29556,7 +29558,7 @@ const GraphPointsCountSelector = _ref => {
     label: "unlimited"
   })]);
 };
-const styles$m = aphrodite.StyleSheet.create({
+const styles$n = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29569,7 +29571,7 @@ const GraphTypeSelector = props => {
     selectedValue: props.graphType,
     onChange: props.onChange,
     placeholder: "Select a graph type",
-    style: styles$l.singleSelectShort
+    style: styles$m.singleSelectShort
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "linear",
     label: "Linear function"
@@ -29602,7 +29604,7 @@ const GraphTypeSelector = props => {
     label: "Angle"
   }));
 };
-const styles$l = aphrodite.StyleSheet.create({
+const styles$m = aphrodite.StyleSheet.create({
   singleSelectShort: {
     // Non-standard spacing, but it's the smallest we can go
     // without running into styling issues with the dropdown.
@@ -29619,16 +29621,16 @@ const LabeledRow = props => {
     style
   } = props;
   return /*#__PURE__*/React__namespace.createElement("label", {
-    className: aphrodite.css(styles$k.label)
+    className: aphrodite.css(styles$l.label)
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$k.row, style]
+    style: [styles$l.row, style]
   }, labelSide === "start" || /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$k.spaceEnd
+    style: styles$l.spaceEnd
   }, label), children, labelSide === "end" && /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-    style: styles$k.spaceStart
+    style: styles$l.spaceStart
   }, label)));
 };
-const styles$k = aphrodite.StyleSheet.create({
+const styles$l = aphrodite.StyleSheet.create({
   label: {
     width: "fit-content"
   },
@@ -30050,10 +30052,10 @@ class InteractiveGraphSettings extends React__namespace.Component {
       onChange: this.change
     }))), /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Background image URL:",
-      style: styles$j.resetSpaceTop
+      style: styles$k.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement("input", {
       type: "text",
-      className: aphrodite.css(styles$j.backgroundUrlInput),
+      className: aphrodite.css(styles$k.backgroundUrlInput),
       ref: this.bgUrlRef,
       value: this.state.backgroundImage.url || "",
       onChange: e => {
@@ -30069,24 +30071,28 @@ 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$j.rulerSection
-    }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.checkboxRow
+      style: styles$k.rulerSection
+    }, /*#__PURE__*/React__namespace.createElement(Banner__default["default"], {
+      layout: "floating",
+      text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
+      kind: "warning"
+    }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+      style: styles$k.checkboxRow
     }, /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show ruler",
       showRuler: this.props.showRuler,
       onChange: this.change,
-      style: styles$j.resetSpaceTop
+      style: styles$k.resetSpaceTop
     }), /*#__PURE__*/React__namespace.createElement(PropCheckBox$7, {
       label: "Show protractor",
       showProtractor: this.props.showProtractor,
       onChange: this.change,
-      style: styles$j.resetSpaceTop
+      style: styles$k.resetSpaceTop
     })), this.props.showRuler && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$j.spaceTop
+      style: styles$k.spaceTop
     }, /*#__PURE__*/React__namespace.createElement(LabeledRow, {
       label: "Ruler label:",
-      style: styles$j.resetSpaceTop
+      style: styles$k.resetSpaceTop
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
       id: "ruler-label-select",
       selectedValue: this.props.rulerLabel,
@@ -30096,7 +30102,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "None",
-      style: styles$j.singleSelectShort
+      style: styles$k.singleSelectShort
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       value: "",
       label: "None",
@@ -30137,7 +30143,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
         });
       },
       placeholder: "10",
-      style: styles$j.singleSelectShort
+      style: styles$k.singleSelectShort
     }, [1, 2, 4, 8, 10, 16].map(value => /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
       key: value,
       value: `${value}`,
@@ -30145,7 +30151,7 @@ class InteractiveGraphSettings extends React__namespace.Component {
     })))))));
   }
 }
-const styles$j = aphrodite.StyleSheet.create({
+const styles$k = aphrodite.StyleSheet.create({
   resetSpaceTop: {
     marginTop: 0
   },
@@ -30165,7 +30171,8 @@ const styles$j = aphrodite.StyleSheet.create({
   checkboxRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
   rulerSection: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
@@ -30189,10 +30196,10 @@ const LockedFigureSelect = props => {
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$i.container
+    style: styles$j.container
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionMenu, {
     menuText: "Add locked figure",
-    style: styles$i.addElementSelect
+    style: styles$j.addElementSelect
   }, [/*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.ActionItem, {
     key: `${id}-point`,
     label: "Point",
@@ -30203,9 +30210,9 @@ const LockedFigureSelect = props => {
     onClick: () => onChange("line")
   }, "Line")]));
 };
-const styles$i = aphrodite.StyleSheet.create({
+const styles$j = aphrodite.StyleSheet.create({
   container: {
-    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
   },
   addElementSelect: {
     backgroundColor: wonderBlocksTokens.color.fadedBlue8,
@@ -30303,13 +30310,13 @@ const ColorSwatch = props => {
     "aria-label":
     // Don't include an aria label for decorative circles.
     !decorative ? `Color: ${color}, ${filled ? "filled" : "open"}` : undefined,
-    style: [styles$h.colorSwatch, {
+    style: [styles$i.colorSwatch, {
       border: `4px solid ${perseus.lockedFigureColors[color]}`,
       backgroundColor: filled ? perseus.lockedFigureColors[color] : wonderBlocksTokens.color.white
     }]
   });
 };
-const styles$h = aphrodite.StyleSheet.create({
+const styles$i = 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.
@@ -30325,15 +30332,16 @@ const ColorSelect = props => {
   const {
     id,
     selectedValue,
+    style,
     onChange
   } = props;
   return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$g.row
+    style: [styles$h.row, style]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: id,
-    style: styles$g.label,
+    style: styles$h.label,
     tag: "label"
-  }, "Color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }, "color"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: id,
     selectedValue: selectedValue,
     onChange: onChange
@@ -30350,13 +30358,55 @@ const ColorSelect = props => {
     })
   }, colorName))));
 };
-const styles$g = aphrodite.StyleSheet.create({
+const styles$h = aphrodite.StyleSheet.create({
   row: {
     flexDirection: "row",
     alignItems: "center"
   },
   label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
+  }
+});
+
+const LockedFigureSettingsAccordion = props => {
+  const {
+    children,
+    header,
+    containerStyle,
+    panelStyle
+  } = props;
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
+  // More specificity so that we can override the default
+  // .heading > h2 > .header styles from the articles.less
+  // file (which is imported in perseus-renderer.less).
+  , {
+    className: "locked-figure-accordion"
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
+    style: [styles$g.container, containerStyle],
+    headerStyle: styles$g.accordionHeader,
+    header: header
+  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$g.accordionPanel, panelStyle]
+  }, children)));
+};
+const styles$g = aphrodite.StyleSheet.create({
+  container: {
+    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
+    marginTop: wonderBlocksTokens.spacing.xSmall_8
+  },
+  accordionHeader: {
+    padding: wonderBlocksTokens.spacing.small_12,
+    // Don't move the dropdown caret.
+    paddingInlineEnd: 0,
+    // Fixed height so the addition of the color swatch doesn't
+    // change the height of the header when toggling.
+    height: wonderBlocksTokens.spacing.xxLarge_48
+  },
+  accordionPanel: {
+    paddingTop: wonderBlocksTokens.spacing.xxSmall_6,
+    paddingBottom: wonderBlocksTokens.spacing.xxxSmall_4,
+    paddingLeft: wonderBlocksTokens.spacing.small_12,
+    paddingRight: wonderBlocksTokens.spacing.small_12
   }
 });
 
@@ -30384,7 +30434,8 @@ const styles$f = aphrodite.StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
-    alignItems: "center"
+    alignItems: "center",
+    marginTop: wonderBlocksTokens.spacing.xxxSmall_4
   },
   deleteButton: {
     // Line up the delete icon with the rest of the content.
@@ -30392,6 +30443,35 @@ const styles$f = aphrodite.StyleSheet.create({
   }
 });
 
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$e.row, style]
+  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: wonderBlocksTokens.spacing.xSmall_8
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
+};
+const styles$e = aphrodite.StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -30437,13 +30517,14 @@ function getValidNumberFromString(value) {
   // If the value is not a number, return 0.
   return isNaN(parsed) ? 0 : parsed;
 }
+const DEFAULT_COLOR = "grayH";
 function getDefaultFigureForType(type) {
   switch (type) {
     case "point":
       return {
         type: "point",
         coord: [0, 0],
-        color: "blue",
+        color: DEFAULT_COLOR,
         filled: true
       };
     case "line":
@@ -30454,9 +30535,8 @@ function getDefaultFigureForType(type) {
           ...getDefaultFigureForType("point"),
           coord: [2, 2]
         }],
-        color: "blue",
+        color: DEFAULT_COLOR,
         lineStyle: "solid",
-        showArrows: false,
         showStartPoint: false,
         showEndPoint: false
       };
@@ -30496,7 +30576,6 @@ const LockedPointSettings = props => {
   const xCoordId = ids.get("x-coord");
   const yCoordId = ids.get("y-coord");
   const colorSelectId = ids.get("point-color-select");
-  const showPointToggleId = ids.get("show-point-toggle");
   function handleBlur() {
     const validCoord = [getValidNumberFromString(coordState[0]), getValidNumberFromString(coordState[1])];
 
@@ -30517,20 +30596,14 @@ const LockedPointSettings = props => {
       color: newValue
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
-  // More specificity so that we can override the default
-  // .heading > h2 > .header styles from the articles.less
-  // file (which is imported in perseus-renderer.less).
-  , {
-    className: "locked-figure-accordion"
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
-    style: [styles$e.container, style],
-    headerStyle: styles$e.accordionHeader,
+  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
+    containerStyle: style,
+    panelStyle: !onRemove && styles$d.accordionPanelWithoutActions,
     header:
     /*#__PURE__*/
     // Summary: Point, coords, color (filled/open)
     React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$e.row
+      style: styles$d.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, `${label || "Point"} (${coord[0]}, ${coord[1]})`), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), toggled && /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
@@ -30538,84 +30611,58 @@ const LockedPointSettings = props => {
       filled: filled
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$e.accordionPanel
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$e.row
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$e.row, styles$e.spaceUnder]
+    style: [styles$d.row, styles$d.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: xCoordId,
-    style: styles$e.label,
+    style: styles$d.label,
     tag: "label"
-  }, "x Coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+  }, "x coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: xCoordId,
     type: "number",
     value: coordState[0],
     onChange: newValue => handleCoordChange(newValue, 0),
     onBlur: handleBlur,
-    style: styles$e.textField
-  })), /*#__PURE__*/React__namespace.createElement(Strut, {
+    style: styles$d.textField
+  }), /*#__PURE__*/React__namespace.createElement(Strut, {
     size: wonderBlocksTokens.spacing.medium_16
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$e.row, styles$e.spaceUnder]
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: yCoordId,
-    style: styles$e.label,
+    style: styles$d.label,
     tag: "label"
-  }, "y Coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
+  }, "y coord"), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.TextField, {
     id: yCoordId,
     type: "number",
     value: coordState[1],
     onChange: newValue => handleCoordChange(newValue, 1),
     onBlur: handleBlur,
-    style: styles$e.textField
-  }))), onToggle && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$e.row, styles$e.spaceUnder]
-  }, /*#__PURE__*/React__namespace.createElement(Switch__default["default"], {
-    id: showPointToggleId,
+    style: styles$d.textField
+  })), onToggle && /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+    label: "show point on graph",
     checked: !!toggled,
+    style: toggled && styles$d.spaceUnder,
     onChange: onToggle
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.small_12
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-    tag: "label",
-    htmlFor: showPointToggleId
-  }, "Show point on graph")), toggled && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
+  }), toggled && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     id: colorSelectId,
-    selectedValue: pointColor || "blue",
-    onChange: handleColorChange
-  }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.xSmall_8
-  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-    label: "Open point",
+    selectedValue: pointColor,
+    onChange: handleColorChange,
+    style: styles$d.spaceUnder
+  }), /*#__PURE__*/React__namespace.createElement(LabeledSwitch, {
+    label: "open point",
     checked: !filled,
     onChange: newValue => {
       onChangeProps({
         filled: !newValue
       });
-    },
-    style: styles$e.spaceUnder
+    }
   })), onRemove && /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     onRemove: onRemove,
     figureAriaLabel: `locked point at ${coordState[0]}, ${coordState[1]}`
-  }))));
+  }));
 };
-const styles$e = aphrodite.StyleSheet.create({
-  container: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
-    marginBottom: wonderBlocksTokens.spacing.small_12
-  },
-  accordionHeader: {
-    paddingTop: wonderBlocksTokens.spacing.small_12,
-    paddingBottom: wonderBlocksTokens.spacing.small_12,
-    paddingInlineStart: wonderBlocksTokens.spacing.medium_16,
-    // Fixed height so the addition of the color swatch doesn't
-    // change the height of the header when toggling.
-    height: wonderBlocksTokens.spacing.xxLarge_48
-  },
-  accordionPanel: {
-    padding: wonderBlocksTokens.spacing.medium_16,
-    paddingBottom: wonderBlocksTokens.spacing.xSmall_8
+const styles$d = aphrodite.StyleSheet.create({
+  accordionPanelWithoutActions: {
+    // Need more space since we don't have the actions' margins.
+    paddingBottom: wonderBlocksTokens.spacing.medium_16
   },
   row: {
     flexDirection: "row",
@@ -30625,7 +30672,7 @@ const styles$e = aphrodite.StyleSheet.create({
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
   label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+    marginInlineEnd: wonderBlocksTokens.spacing.xxSmall_6
   },
   textField: {
     width: wonderBlocksTokens.spacing.xxxLarge_64
@@ -30636,9 +30683,8 @@ const LockedLineSettings = props => {
   const {
     kind,
     points,
-    color: lineColor = "blue",
+    color: lineColor,
     lineStyle = "solid",
-    showArrows,
     showStartPoint,
     showEndPoint,
     onChangeProps,
@@ -30677,31 +30723,21 @@ const LockedLineSettings = props => {
       }]
     });
   }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View
-  // More specificity so that we can override the default
-  // .heading > h2 > .header styles from the articles.less
-  // file (which is imported in perseus-renderer.less).
-  , {
-    className: "locked-figure-accordion"
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksAccordion.AccordionSection, {
-    style: styles$d.container,
-    headerStyle: styles$d.accordionHeader,
+  return /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsAccordion, {
     header: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$d.row
+      style: styles$c.row
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelLarge, null, lineLabel), /*#__PURE__*/React__namespace.createElement(Strut, {
       size: wonderBlocksTokens.spacing.xSmall_8
     }), /*#__PURE__*/React__namespace.createElement(ColorSwatch, {
       color: lineColor
     }))
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.accordionPanel
-  }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
+    style: [styles$c.row, styles$c.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: kindSelectId,
-    style: styles$d.label,
+    style: styles$c.label,
     tag: "label"
-  }, "Kind"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }, "kind"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: kindSelectId,
     selectedValue: kind,
     onChange: value => onChangeProps({
@@ -30720,20 +30756,20 @@ const LockedLineSettings = props => {
     value: "ray",
     label: "ray"
   }))), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: [styles$d.row, styles$d.spaceUnder]
+    style: [styles$c.row, styles$c.spaceUnder]
   }, /*#__PURE__*/React__namespace.createElement(ColorSelect, {
     id: colorSelectId,
-    selectedValue: lineColor || "blue",
+    selectedValue: lineColor,
     onChange: handleColorChange
   }), /*#__PURE__*/React__namespace.createElement(Strut, {
-    size: wonderBlocksTokens.spacing.medium_16
+    size: wonderBlocksTokens.spacing.small_12
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$d.row
+    style: styles$c.row
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
     htmlFor: styleSelectId,
-    style: styles$d.label,
+    style: styles$c.label,
     tag: "label"
-  }, "Style"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
+  }, "style"), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.SingleSelect, {
     id: styleSelectId,
     selectedValue: lineStyle,
     onChange: value => onChangeProps({
@@ -30741,21 +30777,15 @@ const LockedLineSettings = props => {
     })
     // Placeholder is required, but never gets used.
     ,
-    placeholder: ""
+    placeholder: "",
+    style: styles$c.selectMarginOffset
   }, /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "solid",
     label: "solid"
   }), /*#__PURE__*/React__namespace.createElement(wonderBlocksDropdown.OptionItem, {
     value: "dashed",
     label: "dashed"
-  })))), /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
-    label: "Show arrows",
-    checked: showArrows,
-    onChange: newValue => onChangeProps({
-      showArrows: newValue
-    }),
-    style: styles$d.spaceUnder
-  }), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
+  })))), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
     label: "Start point",
     toggled: showStartPoint
   }, startPoint, {
@@ -30763,7 +30793,7 @@ const LockedLineSettings = props => {
       showStartPoint: newValue
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 0),
-    style: styles$d.lockedPointSettingsContainer
+    style: styles$c.lockedPointSettingsContainer
   })), /*#__PURE__*/React__namespace.createElement(LockedPointSettings, _extends({
     label: "End point",
     toggled: showEndPoint
@@ -30772,31 +30802,18 @@ const LockedLineSettings = props => {
       showEndPoint: newValue
     }),
     onChangeProps: newProps => handleChangePoint(newProps, 1),
-    style: styles$d.lockedPointSettingsContainer
+    style: styles$c.lockedPointSettingsContainer
   })), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     onRemove: onRemove,
     figureAriaLabel: `locked line defined by
                     ${startPoint.coord[0]}, ${startPoint.coord[1]} and
                     ${endPoint.coord[0]}, ${endPoint.coord[1]}.`
-  }))));
+  }));
 };
-const styles$d = aphrodite.StyleSheet.create({
-  container: {
-    backgroundColor: wonderBlocksTokens.color.fadedBlue8,
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8
-  },
-  accordionHeader: {
-    paddingTop: wonderBlocksTokens.spacing.small_12,
-    paddingBottom: wonderBlocksTokens.spacing.small_12,
-    paddingInlineStart: wonderBlocksTokens.spacing.medium_16
-  },
-  accordionPanel: {
-    padding: wonderBlocksTokens.spacing.medium_16,
-    paddingBottom: wonderBlocksTokens.spacing.xSmall_8
-  },
+const styles$c = aphrodite.StyleSheet.create({
   lockedPointSettingsContainer: {
     marginTop: wonderBlocksTokens.spacing.xSmall_8,
-    marginBottom: wonderBlocksTokens.spacing.xSmall_8,
+    marginBottom: 0,
     marginLeft: -wonderBlocksTokens.spacing.xxxSmall_4,
     marginRight: -wonderBlocksTokens.spacing.xxxSmall_4,
     backgroundColor: wonderBlocksTokens.color.white
@@ -30809,7 +30826,11 @@ const styles$d = aphrodite.StyleSheet.create({
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },
   label: {
-    marginInlineEnd: wonderBlocksTokens.spacing.xSmall_8
+    marginInlineEnd: wonderBlocksTokens.spacing.xxxSmall_4
+  },
+  selectMarginOffset: {
+    // Align with the point settings accordions.
+    marginInlineEnd: -wonderBlocksTokens.spacing.xxxSmall_4
   }
 });
 
@@ -30867,9 +30888,7 @@ const LockedFiguresSection = props => {
     };
     onChange(newFigures);
   }
-  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-    style: styles$c.container
-  }, figures?.map((figure, index) => /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
+  return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, figures?.map((figure, index) => /*#__PURE__*/React__namespace.createElement(LockedFigureSettings, _extends({
     key: `${uniqueId}-locked-${figure}-${index}`
   }, figure, {
     onChangeProps: newProps => changeProps(index, newProps),
@@ -30879,11 +30898,6 @@ const LockedFiguresSection = props => {
     onChange: addLockedFigure
   }));
 };
-const styles$c = aphrodite.StyleSheet.create({
-  container: {
-    paddingTop: wonderBlocksTokens.spacing.large_24
-  }
-});
 
 const SegmentCountSelector = _ref => {
   let {