@khanacademy/perseus-editor 8.1.0 → 9.0.0

package/dist/components/angle-input.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     angle: number;
     onChange: (angle: number) => void;
 };
-declare const AngleInput: (props: Props) => JSX.Element;
+declare const AngleInput: (props: Props) => React.JSX.Element;
 export default AngleInput;

package/dist/components/coordinate-pair-input.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { Coord } from "@khanacademy/perseus";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
@@ -8,5 +8,5 @@ type Props = {
     style?: StyleType;
     onChange: (newCoord: Coord) => void;
 };
-declare const CoordinatePairInput: (props: Props) => JSX.Element;
+declare const CoordinatePairInput: (props: Props) => React.JSX.Element;
 export default CoordinatePairInput;

package/dist/components/graph-locked-figures/color-select.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor } from "@khanacademy/perseus";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
@@ -6,5 +6,5 @@ type Props = {
     style?: StyleType;
     onChange: (newValue: string) => void;
 };
-declare const ColorSelect: (props: Props) => JSX.Element;
+declare const ColorSelect: (props: Props) => React.JSX.Element;
 export default ColorSelect;

package/dist/components/graph-locked-figures/color-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { type LockedFigureColor } from "@khanacademy/perseus";
+import * as React from "react";
 type Props = {
     color: LockedFigureColor;
     filled?: boolean;
     decorative?: boolean;
 };
-declare const ColorSwatch: (props: Props) => JSX.Element;
+declare const ColorSwatch: (props: Props) => React.JSX.Element;
 export default ColorSwatch;

package/dist/components/graph-locked-figures/defining-point-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedPointType } from "@khanacademy/perseus";
 export type Props = LockedPointType & {
     /**
@@ -31,5 +31,5 @@ export type Props = LockedPointType & {
      */
     onToggle?: (expanded: boolean) => void;
 };
-declare const DefiningPointSettings: (props: Props) => JSX.Element;
+declare const DefiningPointSettings: (props: Props) => React.JSX.Element;
 export default DefiningPointSettings;

package/dist/components/graph-locked-figures/ellipse-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor, LockedFigureFillType } from "@khanacademy/perseus";
 type Props = {
     color: LockedFigureColor;
     fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
-declare const EllipseSwatch: (props: Props) => JSX.Element;
+declare const EllipseSwatch: (props: Props) => React.JSX.Element;
 export default EllipseSwatch;

package/dist/components/graph-locked-figures/labeled-row.d.ts

@@ -6,5 +6,5 @@ declare const LabeledRow: (props: {
     labelSide?: "start" | "end";
     style?: StyleType;
     children: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default LabeledRow;

package/dist/components/graph-locked-figures/labeled-switch.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { StyleType } from "@khanacademy/wonder-blocks-core";
 type Props = {
     label: string;
@@ -6,5 +6,5 @@ type Props = {
     style?: StyleType;
     onChange: (newValue: boolean) => void;
 };
-declare const LabeledSwitch: (props: Props) => JSX.Element;
+declare const LabeledSwitch: (props: Props) => React.JSX.Element;
 export default LabeledSwitch;

package/dist/components/graph-locked-figures/line-swatch.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
 import { type LockedFigureColor } from "@khanacademy/perseus";
+import * as React from "react";
 type Props = {
     color: LockedFigureColor;
     lineStyle: "solid" | "dashed";
 };
-declare const LineSwatch: (props: Props) => JSX.Element;
+declare const LineSwatch: (props: Props) => React.JSX.Element;
 export default LineSwatch;

package/dist/components/graph-locked-figures/locked-ellipse-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedEllipseType } from "@khanacademy/perseus";
 export type Props = LockedFigureSettingsCommonProps & LockedEllipseType & {
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedEllipseType & {
      */
     onChangeProps: (newProps: Partial<LockedEllipseType>) => void;
 };
-declare const LockedEllipseSettings: (props: Props) => JSX.Element;
+declare const LockedEllipseSettings: (props: Props) => React.JSX.Element;
 export default LockedEllipseSettings;

package/dist/components/graph-locked-figures/locked-figure-select.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     showM2Features: boolean;
     showM2bFeatures: boolean;
     id: string;
     onChange: (value: string) => void;
 };
-declare const LockedFigureSelect: (props: Props) => JSX.Element;
+declare const LockedFigureSelect: (props: Props) => React.JSX.Element;
 export default LockedFigureSelect;

package/dist/components/graph-locked-figures/locked-figure-settings-actions.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureType } from "@khanacademy/perseus";
 export type LockedFigureSettingsMovementType = "back" | "backward" | "forward" | "front";
 type Props = {
@@ -7,5 +7,5 @@ type Props = {
     onMove: (movement: LockedFigureSettingsMovementType) => void;
     onRemove: () => void;
 };
-declare const LockedFigureSettingsActions: (props: Props) => JSX.Element;
+declare const LockedFigureSettingsActions: (props: Props) => React.JSX.Element;
 export default LockedFigureSettingsActions;

package/dist/components/graph-locked-figures/locked-figure-settings.d.ts

@@ -4,7 +4,7 @@
  *
  * Used in the interactive graph editor's locked figures section.
  */
-/// <reference types="react" />
+import * as React from "react";
 import type { Props as LockedEllipseProps } from "./locked-ellipse-settings";
 import type { LockedFigureSettingsMovementType } from "./locked-figure-settings-actions";
 import type { Props as LockedLineProps } from "./locked-line-settings";
@@ -32,5 +32,5 @@ export type LockedFigureSettingsCommonProps = {
     onToggle?: (expanded: boolean) => void;
 };
 type Props = LockedFigureSettingsCommonProps & (LockedPointProps | LockedLineProps | LockedEllipseProps | LockedVectorProps | LockedPolygonProps);
-declare const LockedFigureSettings: (props: Props) => JSX.Element | null;
+declare const LockedFigureSettings: (props: Props) => React.JSX.Element | null;
 export default LockedFigureSettings;

package/dist/components/graph-locked-figures/locked-figures-section.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { Props as InteractiveGraphEditorProps } from "../../widgets/interactive-graph-editor";
 import type { LockedFigure } from "@khanacademy/perseus";
 type Props = {
@@ -7,5 +7,5 @@ type Props = {
     figures?: Array<LockedFigure>;
     onChange: (props: Partial<InteractiveGraphEditorProps>) => void;
 };
-declare const LockedFiguresSection: (props: Props) => JSX.Element;
+declare const LockedFiguresSection: (props: Props) => React.JSX.Element;
 export default LockedFiguresSection;

package/dist/components/graph-locked-figures/locked-line-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedFigure, LockedLineType } from "@khanacademy/perseus";
 export type Props = LockedLineType & LockedFigureSettingsCommonProps & {
@@ -7,5 +7,5 @@ export type Props = LockedLineType & LockedFigureSettingsCommonProps & {
      */
     onChangeProps: (newProps: Partial<LockedFigure>) => void;
 };
-declare const LockedLineSettings: (props: Props) => JSX.Element;
+declare const LockedLineSettings: (props: Props) => React.JSX.Element;
 export default LockedLineSettings;

package/dist/components/graph-locked-figures/locked-point-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedPointType } from "@khanacademy/perseus";
 export type Props = LockedFigureSettingsCommonProps & LockedPointType & {
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedPointType & {
      */
     onChangeProps: (newProps: Partial<LockedPointType>) => void;
 };
-declare const LockedPointSettings: (props: Props) => JSX.Element;
+declare const LockedPointSettings: (props: Props) => React.JSX.Element;
 export default LockedPointSettings;

package/dist/components/graph-locked-figures/locked-polygon-settings.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import { type LockedPolygonType } from "@khanacademy/perseus";
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 export type Props = LockedFigureSettingsCommonProps & LockedPolygonType & {
     /**
@@ -7,5 +7,5 @@ export type Props = LockedFigureSettingsCommonProps & LockedPolygonType & {
      */
     onChangeProps: (newProps: Partial<LockedPolygonType>) => void;
 };
-declare const LockedPolygonSettings: (props: Props) => JSX.Element;
+declare const LockedPolygonSettings: (props: Props) => React.JSX.Element;
 export default LockedPolygonSettings;

package/dist/components/graph-locked-figures/locked-vector-settings.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureSettingsCommonProps } from "./locked-figure-settings";
 import type { LockedFigure, LockedVectorType } from "@khanacademy/perseus";
 export type Props = LockedVectorType & LockedFigureSettingsCommonProps & {
@@ -7,5 +7,5 @@ export type Props = LockedVectorType & LockedFigureSettingsCommonProps & {
      */
     onChangeProps: (newProps: Partial<LockedFigure>) => void;
 };
-declare const LockedVectorSettings: (props: Props) => JSX.Element;
+declare const LockedVectorSettings: (props: Props) => React.JSX.Element;
 export default LockedVectorSettings;

package/dist/components/graph-locked-figures/polygon-swatch.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { LockedFigureColor, LockedFigureFillType } from "@khanacademy/perseus";
 type Props = {
     color: LockedFigureColor;
     fillStyle: LockedFigureFillType;
     strokeStyle: "solid" | "dashed";
 };
-declare const PolygonSwatch: (props: Props) => JSX.Element;
+declare const PolygonSwatch: (props: Props) => React.JSX.Element;
 export default PolygonSwatch;

package/dist/components/graph-points-count-selector.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PointValue } from "../util/points";
 declare const GraphPointsCountSelector: ({ numPoints, onChange, }: {
     numPoints?: PointValue | undefined;
     onChange: (points: PointValue) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default GraphPointsCountSelector;

package/dist/components/graph-type-selector.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from "react";
 type GraphTypeSelectorProps = {
     graphType: string;
     onChange: (newGraphType: string) => void;
 };
-declare const GraphTypeSelector: (props: GraphTypeSelectorProps) => JSX.Element;
+declare const GraphTypeSelector: (props: GraphTypeSelectorProps) => React.JSX.Element;
 export default GraphTypeSelector;

package/dist/components/heading.d.ts

@@ -1,7 +1,8 @@
-/// <reference types="react" />
-declare function Heading({ title, isOpen, onToggle, }: {
+import * as React from "react";
+declare function Heading({ title, isOpen, isCollapsible, onToggle, }: {
     title: string;
     isOpen: boolean;
+    isCollapsible: boolean;
     onToggle?: (isOpen: boolean) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export default Heading;

package/dist/components/interactive-graph-correct-answer.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+type Props = {
+    equationString: string;
+    children: React.ReactNode;
+};
+export declare function InteractiveGraphCorrectAnswer(props: Props): React.JSX.Element;
+export {};

package/dist/components/interactive-graph-settings.d.ts

@@ -137,6 +137,6 @@ declare class InteractiveGraphSettings extends React.Component<Props, State> {
     changeSnapStep: (snapStep: any) => void;
     changeGridStep: (gridStep: any) => void;
     changeGraph: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export default InteractiveGraphSettings;

package/dist/components/perseus-editor-accordion.d.ts

@@ -8,5 +8,5 @@ type Props = {
     panelStyle?: StyleType;
     onToggle?: (expanded: boolean) => void;
 };
-declare const PerseusEditorAccordion: (props: Props) => JSX.Element;
+declare const PerseusEditorAccordion: (props: Props) => React.JSX.Element;
 export default PerseusEditorAccordion;

package/dist/components/segment-count-selector.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from "react";
 declare const SegmentCountSelector: ({ numSegments, onChange, }: {
     numSegments?: number | undefined;
     onChange: (numSegments: number) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default SegmentCountSelector;

package/dist/components/start-coord-settings.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { PerseusGraphType, Range, CollinearTuple } from "@khanacademy/perseus";
 type Props = PerseusGraphType & {
     range: [x: Range, y: Range];
     step: [x: number, y: number];
     onChange: (startCoords: CollinearTuple) => void;
 };
-declare const StartCoordSettings: (props: Props) => JSX.Element | null;
+declare const StartCoordSettings: (props: Props) => React.JSX.Element | null;
 export default StartCoordSettings;

package/dist/components/toggleable-caret.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 type Props = {
     isExpanded: boolean;
 };
@@ -6,5 +6,5 @@ type Props = {
  * Displays a caret in either expanded or collapsed state. For use in headings
  * that collapse a region.
  */
-declare function ToggleableCaret(props: Props): JSX.Element;
+declare function ToggleableCaret(props: Props): React.JSX.Element;
 export default ToggleableCaret;

package/dist/components/viewport-resizer.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from "react";
 import type { DeviceType } from "@khanacademy/perseus";
 type Props = {
     /** The current device type that is selected. */
@@ -9,5 +9,5 @@ type Props = {
      */
     onViewportSizeChanged: (deviceType: DeviceType) => unknown;
 };
-declare const ViewportResizer: (props: Props) => JSX.Element;
+declare const ViewportResizer: (props: Props) => React.JSX.Element;
 export default ViewportResizer;

package/dist/components/widget-editor.d.ts

@@ -21,7 +21,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (e: React.SyntheticEvent<HTMLSelectElement>) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "categorizer" | "iframe" | "table" | "video" | "image" | "radio" | "cs-program" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "unit-input" | "deprecated-standin";
+        type: "categorizer" | "image" | "radio" | "table" | "cs-program" | "iframe" | "video" | "definition" | "group" | "dropdown" | "example-graphie-widget" | "example-widget" | "explanation" | "expression" | "graded-group-set" | "graded-group" | "grapher" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "molecule-renderer" | "number-line" | "numeric-input" | "orderer" | "passage-ref" | "passage" | "plotter" | "python-program" | "passage-ref-target" | "simple-markdown-tester" | "sorter" | "unit-input" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/es/index.js

@@ -20,7 +20,7 @@ import { isTruthy, UnreachableCaseError } from '@khanacademy/wonder-stuff-core';
 import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { ActionMenu, ActionItem, SingleSelect, OptionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
-import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
+import { LabelSmall, LabelLarge, LabelMedium, LabelXSmall, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
 import Button from '@khanacademy/wonder-blocks-button';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -37,7 +37,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "8.1.0";
+const libVersion = "9.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29157,7 +29157,7 @@ class InteractionEditor extends React.Component {
       gridStep: this.props.graph.gridStep,
       markings: this.props.graph.markings,
       onChange: this._updateGraphProps
-    }), this.props.graph.valid !== true && /*#__PURE__*/React.createElement("div", null, this.props.graph.valid)), _.map(this.props.elements, function (element, n) {
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, this.props.graph.valid !== true && /*#__PURE__*/React.createElement("div", null, this.props.graph.valid))), _.map(this.props.elements, function (element, n) {
       if (element.type === "movable-point") {
         return /*#__PURE__*/React.createElement(ElementContainer, {
           title: /*#__PURE__*/React.createElement("span", null, "Movable point", " ", /*#__PURE__*/React.createElement(TeX, null, "(x_{" + element.options.varSubscript + "}, y_{" + element.options.varSubscript + "})"))
@@ -29593,6 +29593,38 @@ const strutStyle = size => {
   };
 };
 
+function Heading({
+  title,
+  isOpen,
+  isCollapsible,
+  onToggle
+}) {
+  return /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      backgroundColor: color.offBlack8,
+      padding: spacing.xSmall_8,
+      marginTop: spacing.small_12,
+      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
+      // variable found in perseus-editor.less. For now, it must
+      // match otherwise there's a gap from this header to the edge
+      // of the editor borders.
+      marginInline: -10,
+      cursor: isCollapsible ? "pointer" : "default",
+      userSelect: "none"
+    },
+    onClick: () => isCollapsible && (onToggle == null ? void 0 : onToggle(!isOpen))
+  }, /*#__PURE__*/React.createElement(LabelLarge, {
+    style: {
+      fontSize: 14,
+      fontWeight: 600
+    }
+  }, title), isCollapsible && /*#__PURE__*/React.createElement(ToggleableCaret, {
+    isExpanded: isOpen
+  }));
+}
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -29721,7 +29753,7 @@ const LockedFigureSelect = props => {
     key: `${id}-${figureType}`,
     label: figureType,
     onClick: () => onChange(figureType)
-  }, figureType))));
+  }))));
 };
 const styles$x = StyleSheet.create({
   container: {
@@ -29956,7 +29988,7 @@ const ColorSelect = props => {
       color: colorName,
       decorative: true
     })
-  }, colorName)))));
+  })))));
 };
 const styles$s = StyleSheet.create({
   row: {
@@ -30151,7 +30183,7 @@ const LockedEllipseSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     style: styles$p.row
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
@@ -30167,10 +30199,10 @@ const LockedEllipseSettings = props => {
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React.createElement(OptionItem, {
+  }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     showM2Features: props.showM2Features,
     figureType: props.type,
     onMove: onMove,
@@ -30638,7 +30670,7 @@ const LockedPolygonSettings = props => {
     key: option,
     value: option,
     label: option
-  }, option))))), /*#__PURE__*/React.createElement(LabelMedium, {
+  }))))), /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     style: [styles$i.row, styles$i.spaceUnder]
   }, "stroke", /*#__PURE__*/React.createElement(Strut, {
@@ -30654,10 +30686,10 @@ const LockedPolygonSettings = props => {
   }, /*#__PURE__*/React.createElement(OptionItem, {
     value: "solid",
     label: "solid"
-  }, "solid"), /*#__PURE__*/React.createElement(OptionItem, {
+  }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  }, "dashed"))), /*#__PURE__*/React.createElement(LabeledSwitch, {
+  }))), /*#__PURE__*/React.createElement(LabeledSwitch, {
     label: "show vertices",
     checked: showVertices,
     onChange: newValue => onChangeProps({
@@ -30885,6 +30917,7 @@ const LockedFiguresSection = props => {
   // expand/collapse all button. Set the whole array to false initially.
   const collapsedStateArray = Array(((_props$figures = props.figures) != null ? _props$figures : []).length).fill(false);
   const [expandedStates, setExpandedStates] = React.useState(collapsedStateArray);
+  const [isExpanded, setIsExpanded] = React.useState(true);
   const uniqueId = useUniqueIdWithMock().get("locked-figures-section");
   const {
     figures,
@@ -30971,7 +31004,12 @@ const LockedFiguresSection = props => {
   const allCollapsed = expandedStates.every(value => !value);
   const buttonLabel = allCollapsed ? "Expand all" : "Collapse all";
   const showExpandButton = !!(figures != null && figures.length);
-  return /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Locked Figures",
+    isOpen: isExpanded,
+    onToggle: () => setIsExpanded(!isExpanded),
+    isCollapsible: true
+  }), isExpanded && /*#__PURE__*/React.createElement(View, null, figures == null ? void 0 : figures.map((figure, index) => {
     if (figure.type === "function") {
       // TODO(LEMS-1947): Add locked function settings.
       // Remove this block once function locked figure settings are
@@ -31006,7 +31044,7 @@ const LockedFiguresSection = props => {
     kind: "secondary",
     onClick: () => toggleExpanded(allCollapsed),
     style: styles$g.button
-  }, buttonLabel)));
+  }, buttonLabel))));
 };
 const styles$g = StyleSheet.create({
   buttonContainer: {
@@ -31108,29 +31146,27 @@ const styles$e = StyleSheet.create({
   }
 });
 
-function Heading({
-  title,
-  isOpen,
-  onToggle
-}) {
-  return /*#__PURE__*/React.createElement(View, {
+function InteractiveGraphCorrectAnswer(props) {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
+    title: "Correct Answer",
+    isOpen: true,
+    isCollapsible: false
+  }), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(LabelXSmall, {
     style: {
-      flexDirection: "row",
-      justifyContent: "space-between",
-      backgroundColor: color.offBlack8,
-      padding: spacing.xSmall_8,
-      marginTop: spacing.small_12,
-      // NOTE(jeremy): This is the inverse of the @editorPadding CSS
-      // variable found in perseus-editor.less. For now, it must
-      // match otherwise there's a gap from this header to the edge
-      // of the editor borders.
-      marginInline: -10,
-      cursor: "pointer"
-    },
-    onClick: () => onToggle == null ? void 0 : onToggle(!isOpen)
-  }, /*#__PURE__*/React.createElement(LabelSmall, null, title), /*#__PURE__*/React.createElement(ToggleableCaret, {
-    isExpanded: isOpen
-  }));
+      paddingTop: spacing.xxSmall_6,
+      paddingBottom: spacing.xxSmall_6,
+      color: color.offBlack64
+    }
+  }, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."), /*#__PURE__*/React.createElement(BodyMonospace, {
+    style: {
+      fontSize: 12,
+      backgroundColor: "#eee",
+      paddingInline: spacing.xxSmall_6,
+      borderColor: "#ccc",
+      borderStyle: "solid",
+      borderWidth: 1
+    }
+  }, props.equationString)), props.children));
 }
 
 const {
@@ -31423,6 +31459,7 @@ class InteractiveGraphSettings extends React.Component {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Heading, {
       title: "Common Graph Settings",
       isOpen: this.state.isExpanded,
+      isCollapsible: true,
       onToggle: () => this.setState({
         isExpanded: !this.state.isExpanded
       })
@@ -31733,6 +31770,7 @@ const StartCoordSettings = props => {
   return /*#__PURE__*/React.createElement(View, {
     style: styles$b.container
   }, /*#__PURE__*/React.createElement(Heading, {
+    isCollapsible: true,
     title: "Start coordinates",
     isOpen: isOpen,
     onToggle: () => setIsOpen(!isOpen)
@@ -31915,7 +31953,9 @@ class InteractiveGraphEditor extends React.Component {
           }
         });
       }
-    })), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
+    })), /*#__PURE__*/React.createElement(InteractiveGraphCorrectAnswer, {
+      equationString: equationString
+    }, graph), ((_this$props$correct = this.props.correct) == null ? void 0 : _this$props$correct.type) === "point" && /*#__PURE__*/React.createElement(LabeledRow, {
       label: "Number of Points:"
     }, /*#__PURE__*/React.createElement(GraphPointsCountSelector, {
       numPoints: (_this$props$correct2 = this.props.correct) == null ? void 0 : _this$props$correct2.numPoints,
@@ -32095,18 +32135,7 @@ class InteractiveGraphEditor extends React.Component {
     }), /*#__PURE__*/React.createElement(OptionItem, {
       value: "congruent",
       label: "be congruent"
-    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))), /*#__PURE__*/React.createElement(LabeledRow, {
-      label: "Correct answer:"
-    }, /*#__PURE__*/React.createElement(BodyMonospace, {
-      style: {
-        fontSize: 12,
-        backgroundColor: "#eee",
-        paddingInline: spacing.xxSmall_6,
-        borderColor: "#ccc",
-        borderStyle: "solid",
-        borderWidth: 1
-      }
-    }, equationString), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."))), graph,
+    })), /*#__PURE__*/React.createElement(InfoTip$b, null, /*#__PURE__*/React.createElement("p", null, "Congruency requires only that the angle measures are the same. An exact match implies congruency, but also requires that the angles have the same orientation and that the vertices are in the same position."))),
     // Only show the "Add locked figure" dropdown if the graph
     // is using Mafs.
     this.props.graph && ((_this$props$apiOption2 = this.props.apiOptions) == null || (_this$props$apiOption2 = _this$props$apiOption2.flags) == null || (_this$props$apiOption2 = _this$props$apiOption2.mafs) == null ? void 0 : _this$props$apiOption2[this.props.graph.type]) && /*#__PURE__*/React.createElement(LockedFiguresSection, {