@khanacademy/perseus-editor 35.4.0 → 36.0.0

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

@@ -25,7 +25,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (newAlignment: Alignment) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "image" | "radio" | "categorizer" | "iframe" | "table" | "video" | "definition" | "group" | "cs-program" | "dropdown" | "explanation" | "expression" | "free-response" | "grapher" | "graded-group-set" | "graded-group" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "number-line" | "numeric-input" | "orderer" | "phet-simulation" | "python-program" | "plotter" | "sorter" | "mock-widget" | "deprecated-standin";
+        type: "image" | "radio" | "categorizer" | "iframe" | "table" | "video" | "definition" | "group" | "cs-program" | "blank" | "dropdown" | "explanation" | "expression" | "free-response" | "grapher" | "graded-group-set" | "graded-group" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "number-line" | "numeric-input" | "orderer" | "phet-simulation" | "python-program" | "plotter" | "sorter" | "mock-widget" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/es/index.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import React__default, { useId, useContext, useState, createElement, useRef, useEffect } from 'react';
 import { PerseusMarkdown, Util, Widgets, excludeDenylistKeys, ApiOptions, Log, preprocessTex, components, Dependencies, ClassNames, usePerseusI18n, UserInputManager, Renderer, Categorizer as Categorizer$1, Changeable, EditorJsonify, Expression, interactiveSizes, GrapherWidget, GrapherUtil, containerSizeClass, getInteractiveBoxFromSizeClass, iconChevronDown, iconTrash, KhanColors, mathOnlyParser, getLogarithmCoords, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getTangentCoords, getExponentialCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getVectorCoords, getLineCoords, getAbsoluteValueCoords, InteractiveGraphWidget, MatrixWidget, PlotterWidget, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
-import { generateImageWidget, generateImageOptions, isSuccess, CoreWidgetRegistry, applyDefaultsToWidget, getWidgetIdsFromContent, PerseusError, Errors, parseAndMigratePerseusArticle, getDefaultAnswerArea, ItemExtras, isFeatureOn, parseAndMigratePerseusItem, categorizerLogic, csProgramLogic, definitionLogic, dropdownLogic, explanationLogic, expressionLogic, deriveExtraKeys, PerseusExpressionAnswerFormConsidered, freeResponseLogic, gradedGroupLogic, gradedGroupSetLogic, grapherLogic, GrapherUtil as GrapherUtil$1, groupLogic, iframeLogic, imageLogic, numericInputLogic, interactionLogic, lockedFigureColors, lockedFigureFillStyles, getDefaultFigureForType, interactiveGraphLogic, labelImageLogic, matcherLogic, matrixLogic, getMatrixSize, measurerLogic, numberLineLogic, ordererLogic, phetSimulationLogic, makeSafeUrl, plotterLogic, plotterPlotTypes, pythonProgramLogic, radioLogic, deriveNumCorrect, sorterLogic, tableLogic, videoLogic } from '@khanacademy/perseus-core';
+import { generateImageWidget, generateImageOptions, isSuccess, CoreWidgetRegistry, applyDefaultsToWidget, getWidgetIdsFromContent, PerseusError, Errors, parseAndMigratePerseusArticle, getDefaultAnswerArea, ItemExtras, isFeatureOn, parseAndMigratePerseusItem, categorizerLogic, definitionLogic, dropdownLogic, explanationLogic, expressionLogic, deriveExtraKeys, PerseusExpressionAnswerFormConsidered, freeResponseLogic, gradedGroupLogic, gradedGroupSetLogic, grapherLogic, GrapherUtil as GrapherUtil$1, groupLogic, iframeLogic, imageLogic, numericInputLogic, interactionLogic, lockedFigureColors, lockedFigureFillStyles, getDefaultFigureForType, interactiveGraphLogic, labelImageLogic, matcherLogic, matrixLogic, getMatrixSize, measurerLogic, numberLineLogic, ordererLogic, phetSimulationLogic, makeSafeUrl, plotterLogic, plotterPlotTypes, pythonProgramLogic, radioLogic, deriveNumCorrect, sorterLogic, tableLogic, videoLogic } from '@khanacademy/perseus-core';
 import * as PerseusLinter from '@khanacademy/perseus-linter';
 import Button from '@khanacademy/wonder-blocks-button';
 import arrowCircleDownIcon from '@phosphor-icons/core/bold/arrow-circle-down-bold.svg';
@@ -65,7 +65,7 @@ import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import minusCircleIcon from '@phosphor-icons/core/bold/minus-circle-bold.svg';
 
-const libName="@khanacademy/perseus-editor";const libVersion="35.4.0";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="36.0.0";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1537,21 +1537,23 @@ const assistanceNeededMessage="Developer assistance needed - Please send this ex
 
 function usePreviewPresenter(options={}){const{contentContainerRef}=options;const[content,setContent]=React.useState(null);const[contentVersion,setContentVersion]=React.useState(0);const[a11yScanningEnabled,setA11yScanningEnabled]=React.useState(false);const[highlightTargets,setHighlightTargets]=React.useState([]);const schedule=useActionScheduler();const iframe=window.frameElement;if(iframe==null){throw new Error("usePreviewPresenter must be used within an iframe")}React.useEffect(()=>{const handleMessage=event=>{if(event.source!==window.parent){return}const message=event.data;if(!isParentToIframeMessage(message)){return}switch(message.type){case "content-data":setContent(message.content);setContentVersion(message.contentVersion);break;case "iframe-init":setContent(message.content);setA11yScanningEnabled(message.a11yScanningEnabled);setContentVersion(message.contentVersion);break;case "set-a11y-scanning-enabled":setA11yScanningEnabled(message.enabled);break;case "highlight-issues":if(message.contentVersion!==contentVersionRef.current){break}setHighlightTargets(message.instanceIds.flatMap(instanceId=>elementMapRef.current.get(instanceId)??[]));break;case "clear-highlights":setHighlightTargets([]);break;default:throw new UnreachableCaseError(message)}};window.addEventListener("message",handleMessage);window.parent.postMessage(createPreviewIframeReadyMessage(),"/");return ()=>{window.removeEventListener("message",handleMessage);}},[]);const a11yScanningEnabledRef=React.useRef(a11yScanningEnabled);React.useEffect(()=>{a11yScanningEnabledRef.current=a11yScanningEnabled;},[a11yScanningEnabled]);const contentVersionRef=React.useRef(contentVersion);React.useEffect(()=>{contentVersionRef.current=contentVersion;},[contentVersion]);React.useEffect(()=>{setHighlightTargets([]);},[contentVersion]);const scanPromiseRef=React.useRef(null);const rescanRequestedRef=React.useRef(false);const elementMapRef=React.useRef(new Map);const startScan=React.useCallback(()=>{const container=contentContainerRef?.current;if(!a11yScanningEnabledRef.current||container==null){return}if(scanPromiseRef.current!=null){rescanRequestedRef.current=true;return}const scannedVersion=contentVersionRef.current;scanPromiseRef.current=(async()=>{const axe=(await import('axe-core')).default;axe.configure({reporter:"v2"});const results=await axe.run({include:container,exclude:[['[target="lint-help-window"]']]},{elementRef:true});if(!a11yScanningEnabledRef.current){return}const{issues:violations,elementMap:violationMap}=mapAxeResults(results.violations,"Alert");const{issues:incompletes,elementMap:incompleteMap}=mapAxeResults(results.incomplete,"Warning");elementMapRef.current=new Map([...violationMap,...incompleteMap]);window.parent.postMessage(createPreviewA11yReportMessage(violations,incompletes,scannedVersion),"/");})().finally(()=>{scanPromiseRef.current=null;if(rescanRequestedRef.current){rescanRequestedRef.current=false;startScan();}});},[contentContainerRef]);React.useEffect(()=>{const container=contentContainerRef?.current;if(!a11yScanningEnabled||content==null||container==null){return}const scheduledScan=schedule.timeout(startScan,1500);return ()=>scheduledScan.clear()},[content,contentVersion,a11yScanningEnabled,contentContainerRef,schedule,startScan]);const reportHeight=React.useCallback(height=>{if(window.parent==null){return}const message={source:PREVIEW_MESSAGE_SOURCE,type:"height-update",height};window.parent.postMessage(message,"/");},[]);return {content,isMobile:iframe.dataset.mobile==="true",hasLintGutter:iframe.dataset.lintGutter==="true",reportHeight,a11yScanningEnabled,highlightTargets}}
 
+function getOverlayRect(targetRect,containerRect){return {top:targetRect.top-containerRect.top-4,left:targetRect.left-containerRect.left-4,width:targetRect.width+8,height:targetRect.height+8}}function A11yOverlays({targets,container}){if(container==null){return null}const containerRect=container.getBoundingClientRect();return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:targets.map((target,index)=>jsxRuntimeExports.jsx("div",{"data-testid":"a11y-overlay",style:{position:"absolute",border:"2px solid red",borderRadius:"4px",...getOverlayRect(target.getBoundingClientRect(),containerRect)}},index))})}
+
 const textWidthCache={};function getTextWidth(text){if(!textWidthCache[text]){const $test=$("<span>").text(text).appendTo("body");textWidthCache[text]=$test.width()+5;$test.remove();}return textWidthCache[text]}class TextListEditor extends React.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({items:nextProps.options.concat("")});}render(){const className=["perseus-text-list-editor","perseus-clearfix","layout-"+this.props.layout].join(" ");const inputs=this.state.items.map((item,i)=>{return jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsx("input",{ref:"input_"+i,type:"text",value:item,onChange:this.onChange.bind(this,i),onKeyDown:this.onKeyDown.bind(this,i),style:{width:getTextWidth(item)}})},i)});return jsxRuntimeExports.jsx("ul",{className:className,children:inputs})}constructor(...args){super(...args),this.state={items:this.props.options.concat("")},this.onChange=(index,event)=>{let items=_.clone(this.state.items);items[index]=event.target.value;if(index===items.length-1){items=items.concat("");}this.setState({items:items});this.props.onChange(_.compact(items));},this.onKeyDown=(index,event)=>{const which=event.nativeEvent.keyCode;if(which===8&&this.state.items[index]===""){event.preventDefault();const items=_.clone(this.state.items);const focusIndex=index===0?0:index-1;if(index===items.length-1&&(index===0||items[focusIndex]!=="")){ReactDOM.findDOMNode(this.refs["input_"+focusIndex]).focus();}else {items.splice(index,1);this.setState({items:items},function(){ReactDOM.findDOMNode(this.refs["input_"+focusIndex]).focus();});}}else if(which===8&&this.state.items[index].length===1&&index===this.state.items.length-2){event.preventDefault();const items=_.clone(this.state.items);items.splice(index,1);this.setState({items:items});this.props.onChange(_.compact(items));}else if(which===13){event.preventDefault();const items=_.clone(this.state.items);const focusIndex=index+1;if(index===items.length-2){ReactDOM.findDOMNode(this.refs["input_"+focusIndex]).focus();}else {items.splice(focusIndex,0,"");this.setState({items:items},function(){ReactDOM.findDOMNode(this.refs["input_"+focusIndex]).focus();});}}};}}TextListEditor.propTypes={options:PropTypes.array,layout:PropTypes.oneOf(["horizontal","vertical"]),onChange:PropTypes.func.isRequired};TextListEditor.defaultProps={options:[],layout:"horizontal"};
 
-const Categorizer=Categorizer$1.widget;class CategorizerEditor extends React.Component{render(){const categorizerProps={items:this.props.items,categories:this.props.categories,userInput:{values:this.props.values},handleUserInput:userInput=>{this.props.onChange({values:userInput.values});},apiOptions:this.props.apiOptions,trackInteraction:function(){}};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Randomize item order",checked:this.props.randomizeItems,onChange:value=>{this.props.onChange({randomizeItems:value});}})}),"Categories:",jsxRuntimeExports.jsx(TextListEditor,{options:this.props.categories,onChange:cat=>{this.change("categories",cat);},layout:"horizontal"}),"Items:",jsxRuntimeExports.jsx(TextListEditor,{options:this.props.items,onChange:items=>{this.change({items:items,values:_.first(this.props.values,items.length)});},layout:"vertical"}),jsxRuntimeExports.jsx(Categorizer,{...categorizerProps})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}CategorizerEditor.propTypes={...Changeable.propTypes,apiOptions:ApiOptions.propTypes,items:PropTypes.arrayOf(PropTypes.string),categories:PropTypes.arrayOf(PropTypes.string),values:PropTypes.arrayOf(PropTypes.number),randomizeItems:PropTypes.bool};CategorizerEditor.widgetName="categorizer";CategorizerEditor.defaultProps=categorizerLogic.defaultWidgetOptions;
+const Categorizer=Categorizer$1.widget;class CategorizerEditor extends React.Component{render(){const categorizerProps={items:this.props.items,categories:this.props.categories,userInput:{values:this.props.values},handleUserInput:userInput=>{this.props.onChange({values:userInput.values});},apiOptions:this.props.apiOptions,trackInteraction:function(){}};return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Randomize item order",checked:this.props.randomizeItems,onChange:value=>{this.props.onChange({randomizeItems:value});}})}),"Categories:",jsxRuntimeExports.jsx(TextListEditor,{options:this.props.categories,onChange:cat=>{this.change("categories",cat);},layout:"horizontal"}),"Items:",jsxRuntimeExports.jsx(TextListEditor,{options:this.props.items,onChange:items=>{this.change({items:items,values:_.first(this.props.values,items.length)});},layout:"vertical"}),jsxRuntimeExports.jsx(Categorizer,{...categorizerProps})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}CategorizerEditor.widgetName="categorizer";CategorizerEditor.defaultProps=categorizerLogic.defaultWidgetOptions;
 
 class BlurInput extends React.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({value:nextProps.value});}focus(){this.input.current?.focus();}render(){return jsxRuntimeExports.jsx("input",{ref:this.input,className:this.props.className,style:this.props.style,type:"text",value:this.state.value,onChange:this.handleChange,onBlur:this.handleBlur})}constructor(props){super(props),this.input=React.createRef(),this.handleChange=e=>{this.setState({value:e.target.value});},this.handleBlur=e=>{this.props.onChange(e.target.value);};this.state={value:this.props.value};}}
 
-const DEFAULT_WIDTH=400;const DEFAULT_HEIGHT=400;let PairEditor$1 = class PairEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("fieldset",{className:"pair-editor",children:[jsxRuntimeExports.jsxs("label",{children:["Name:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.name,onChange:this.change("name")})]}),jsxRuntimeExports.jsxs("label",{children:[" ","Value:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.value,onChange:this.change("value")})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)};}};PairEditor$1.propTypes={...Changeable.propTypes,name:PropTypes.string,value:PropTypes.string};PairEditor$1.defaultProps={name:"",value:""};let PairsEditor$1 = class PairsEditor extends React.Component{render(){const editors=this.props.pairs.map((pair,i)=>{return jsxRuntimeExports.jsx(PairEditor$1,{name:pair.name,value:pair.value,onChange:this.handlePairChange.bind(this,i)},i)});return jsxRuntimeExports.jsx("div",{children:editors})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handlePairChange=(pairIndex,pair)=>{const pairs=this.props.pairs.slice();pairs[pairIndex]=pair;const lastPair=pairs[pairs.length-1];if(lastPair.name&&lastPair.value){pairs.push({name:"",value:""});}this.change("pairs",pairs);};}};PairsEditor$1.propTypes={...Changeable.propTypes,pairs:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,value:PropTypes.string})).isRequired};const KA_PROGRAM_URL=/khanacademy\.org\/computer-programming\/[^/]+\/(\d+)/;function isolateProgramID(programUrl){const match=KA_PROGRAM_URL.exec(programUrl);if(match){programUrl=match[1];}return programUrl}class CSProgramEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Url or Program ID:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.programID,onChange:this._handleProgramIDChange})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Show Editor",checked:this.props.showEditor,onChange:value=>{this.props.onChange({showEditor:value});}}),jsxRuntimeExports.jsx(InfoTip,{children:'If you show the editor, you should use the "full-width" alignment to make room for the width of the editor.'}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Show Buttons",checked:this.props.showButtons,onChange:value=>{this.props.onChange({showButtons:value});}}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Settings:",jsxRuntimeExports.jsx(PairsEditor$1,{name:"settings",pairs:this.props.settings,onChange:this._handleSettingsChange}),jsxRuntimeExports.jsxs(InfoTip,{children:["Settings that you add here are available to the program as an object returned by ",jsxRuntimeExports.jsx("code",{children:"Program.settings()"})]})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this._handleSettingsChange=settings=>{this.change({settings:settings.pairs});},this._handleProgramIDChange=programID=>{programID=isolateProgramID(programID);const{isDevServer,InitialRequestUrl}=Dependencies.getDependencies();const host=isDevServer?InitialRequestUrl.origin:"https://www.khanacademy.org";const baseUrl=`${host}/api/internal/scratchpads/${programID}`;$.getJSON(baseUrl).done(programInfo=>{const programType=programInfo.userAuthoredContentType;this.change({width:programInfo.width,height:programInfo.height,programID:programID,programType:programType});}).fail((jqxhr,textStatus,error)=>{Log.error("Error retrieving scratchpad info for program ID ",Errors.TransientService,{cause:error,loggedMetadata:{textStatus,programID}});this.change({width:DEFAULT_WIDTH,height:DEFAULT_HEIGHT,programID:programID,programType:null});});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}CSProgramEditor.propTypes={...Changeable.propTypes};CSProgramEditor.widgetName="cs-program";CSProgramEditor.defaultProps=csProgramLogic.defaultWidgetOptions;
+const DEFAULT_WIDTH=400;const DEFAULT_HEIGHT=400;let PairEditor$1 = class PairEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("fieldset",{className:"pair-editor",children:[jsxRuntimeExports.jsxs("label",{children:["Name:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.name,onChange:this.change("name")})]}),jsxRuntimeExports.jsxs("label",{children:[" ","Value:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.value,onChange:this.change("value")})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)};}};PairEditor$1.defaultProps={name:"",value:""};let PairsEditor$1 = class PairsEditor extends React.Component{render(){const editors=this.props.pairs.map((pair,i)=>{return jsxRuntimeExports.jsx(PairEditor$1,{name:pair.name,value:pair.value,onChange:this.handlePairChange.bind(this,i)},i)});return jsxRuntimeExports.jsx("div",{children:editors})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handlePairChange=(pairIndex,pair)=>{const pairs=this.props.pairs.slice();pairs[pairIndex]=pair;const lastPair=pairs[pairs.length-1];if(lastPair.name&&lastPair.value){pairs.push({name:"",value:""});}this.change("pairs",pairs);};}};const KA_PROGRAM_URL=/khanacademy\.org\/computer-programming\/[^/]+\/(\d+)/;function isolateProgramID(programUrl){const match=KA_PROGRAM_URL.exec(programUrl);if(match){programUrl=match[1];}return programUrl}class CSProgramEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Url or Program ID:"," ",jsxRuntimeExports.jsx(BlurInput,{value:this.props.programID,onChange:this._handleProgramIDChange})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Show Editor",checked:this.props.showEditor,onChange:value=>{this.props.onChange({showEditor:value});}}),jsxRuntimeExports.jsx(InfoTip,{children:'If you show the editor, you should use the "full-width" alignment to make room for the width of the editor.'}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Show Buttons",checked:this.props.showButtons,onChange:value=>{this.props.onChange({showButtons:value});}}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Settings:",jsxRuntimeExports.jsx(PairsEditor$1,{pairs:this.props.settings,onChange:this._handleSettingsChange}),jsxRuntimeExports.jsxs(InfoTip,{children:["Settings that you add here are available to the program as an object returned by ",jsxRuntimeExports.jsx("code",{children:"Program.settings()"})]})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this._handleSettingsChange=settings=>{this.change({settings:settings.pairs});},this._handleProgramIDChange=programID=>{programID=isolateProgramID(programID);const{isDevServer,InitialRequestUrl}=Dependencies.getDependencies();const host=isDevServer?InitialRequestUrl.origin:"https://www.khanacademy.org";const baseUrl=`${host}/api/internal/scratchpads/${programID}`;$.getJSON(baseUrl).done(programInfo=>{const programType=programInfo.userAuthoredContentType;this.change({width:programInfo.width,height:programInfo.height,programID:programID,programType:programType});}).fail((jqxhr,textStatus,error)=>{Log.error("Error retrieving scratchpad info for program ID ",Errors.TransientService,{cause:error,loggedMetadata:{textStatus,programID}});this.change({width:DEFAULT_WIDTH,height:DEFAULT_HEIGHT,programID:programID,programType:null});});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}CSProgramEditor.widgetName="cs-program";
 
-const{TextInput: TextInput$5}=components;class DefinitionEditor extends React.Component{static initializeWidgetOptions(params){const defaultWidgetOptions={...definitionLogic.defaultWidgetOptions};if(params.selectedText){defaultWidgetOptions.togglePrompt=params.selectedText;}return defaultWidgetOptions}render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-definition-editor",children:[jsxRuntimeExports.jsx("a",{href:"https://docs.google.com/document/d/1udaPef4imOfTMhmLDlWq4SM0mxL0r3YHFZE-5J1uGfo",target:"_blank",rel:"noreferrer",children:"Definition style guide"}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Word to be defined:"," ",jsxRuntimeExports.jsx(TextInput$5,{value:this.props.togglePrompt,onChange:this.change("togglePrompt"),placeholder:"define me"})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.definition,widgetEnabled:false,placeholder:"definition goes here",onChange:props=>{const newProps={};if(_.has(props,"content")){newProps.definition=props.content;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}DefinitionEditor.propTypes={...Changeable.propTypes,togglePrompt:PropTypes.string,definition:PropTypes.string,apiOptions:PropTypes.any};DefinitionEditor.widgetName="definition";DefinitionEditor.defaultProps=definitionLogic.defaultWidgetOptions;
+const{TextInput: TextInput$5}=components;class DefinitionEditor extends React.Component{static initializeWidgetOptions(params){const defaultWidgetOptions={...definitionLogic.defaultWidgetOptions};if(params.selectedText){defaultWidgetOptions.togglePrompt=params.selectedText;}return defaultWidgetOptions}render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-definition-editor",children:[jsxRuntimeExports.jsx("a",{href:"https://docs.google.com/document/d/1udaPef4imOfTMhmLDlWq4SM0mxL0r3YHFZE-5J1uGfo",target:"_blank",rel:"noreferrer",children:"Definition style guide"}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Word to be defined:"," ",jsxRuntimeExports.jsx(TextInput$5,{value:this.props.togglePrompt,onChange:this.change("togglePrompt"),placeholder:"define me"})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.definition,widgetEnabled:false,placeholder:"definition goes here",onChange:props=>{const newProps={};if(_.has(props,"content")){newProps.definition=props.content;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}DefinitionEditor.widgetName="definition";DefinitionEditor.defaultProps=definitionLogic.defaultWidgetOptions;
 
 class DeprecatedStandinEditor extends React.Component{serialize(){return EditorJsonify.serialize.call(this)}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("p",{children:"This widget has been deprecated and removed"}),jsxRuntimeExports.jsx("p",{children:"Learners will see a message and they will not be graded on this part. Please replace this widget with a supported one."})]})}}DeprecatedStandinEditor.widgetName="deprecated-standin";
 
 class DropdownEditor extends React.Component{render(){const dropdownGroupName=_.uniqueId("perseus_dropdown_");const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-dropdown",children:[jsxRuntimeExports.jsxs("div",{className:"dropdown-info",children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Dropdown"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["The drop down is useful for making inequalities in a custom format. We normally use the symbols ","<",","," ",">",', ≤, ≥ (in that order) which you can copy into the choices. When possible, use the "multiple choice" answer type instead.']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Visible label",jsxRuntimeExports.jsx(TextField,{value:this.props.visibleLabel,onChange:this.onVisibleLabelChange})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Optional visible label"})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Aria label",jsxRuntimeExports.jsx(TextField,{value:this.props.ariaLabel,onChange:this.onAriaLabelChange,type:"text"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["Label text that's read by screen readers. Highly recommend adding a label here to ensure your exercise is accessible. For more information on writing accessible labels, please see"," ",jsxRuntimeExports.jsx("a",{href:"https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",target:"_blank",rel:"noreferrer",children:"this article."})," ",'If left blank, the value will default to "Select an answer".']})})]}),jsxRuntimeExports.jsxs("div",{className:"dropdown-field",children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",children:["Placeholder",jsxRuntimeExports.jsx(TextField,{value:this.props.placeholder,onChange:this.onPlaceholderChange,placeholder:"Placeholder value"})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."})})]}),jsxRuntimeExports.jsx("div",{className:"clearfix"}),jsxRuntimeExports.jsx(BodyText,{children:"Choices"}),jsxRuntimeExports.jsx("ul",{className:"dropdown-choices",children:this.props.choices.map((choice,i)=>{const choiceBackgroundColor=choice.correct?semanticColor.core.background.success.subtle:semanticColor.core.background.critical.subtle;return jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("div",{className:"dropdown-choice",children:[jsxRuntimeExports.jsx("input",{type:"radio",ref:"radio"+i,name:dropdownGroupName,checked:choice.correct,onChange:()=>this.onCorrectChange(i)}),jsxRuntimeExports.jsx(TextField,{value:choice.content,ref:"editor"+i,"aria-label":`Choice ${i+1} content`,disabled:editingDisabled,style:{backgroundColor:choiceBackgroundColor},onChange:newContent=>this.onContentChange(i,newContent)}),jsxRuntimeExports.jsx(IconButton,{icon:trashIcon,"aria-label":"Delete choice",disabled:editingDisabled,kind:"tertiary",size:"small",onClick:()=>this.removeChoice(i)})]})},""+i)},this)}),jsxRuntimeExports.jsx("div",{className:"add-choice-container",children:jsxRuntimeExports.jsx(Button,{kind:"secondary",disabled:editingDisabled,onClick:this.addChoice,startIcon:plusIcon,children:"Add a choice"})})]})}constructor(...args){super(...args),this.onVisibleLabelChange=visibleLabel=>{this.props.onChange({visibleLabel});},this.onAriaLabelChange=ariaLabel=>{this.props.onChange({ariaLabel});},this.onPlaceholderChange=placeholder=>{this.props.onChange({placeholder});},this.onCorrectChange=choiceIndex=>{const choices=this.props.choices.map(function(choice,i){return _.extend({},choice,{correct:i===choiceIndex})});this.props.onChange({choices:choices});},this.onContentChange=(choiceIndex,newContent)=>{const choices=this.props.choices.slice();const choice=_.clone(choices[choiceIndex]);choice.content=newContent;choices[choiceIndex]=choice;this.props.onChange({choices:choices});},this.addChoice=()=>{const choices=this.props.choices;const blankChoice={content:"",correct:false};this.props.onChange({choices:choices.concat([blankChoice])},this.focus.bind(this,choices.length));},this.removeChoice=choiceIndex=>{const choices=_(this.props.choices).clone();choices.splice(choiceIndex,1);this.props.onChange({choices:choices});},this.focus=i=>{ReactDOM.findDOMNode(this.refs["editor"+i]).focus();return true},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}DropdownEditor.propTypes={choices:PropTypes.arrayOf(PropTypes.shape({content:PropTypes.string,correct:PropTypes.bool})),placeholder:PropTypes.string};DropdownEditor.widgetName="dropdown";DropdownEditor.defaultProps=dropdownLogic.defaultWidgetOptions;
 
-const{TextInput: TextInput$4}=components;class ExplanationEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-explanation-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to show explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.showPrompt,onChange:this.change("showPrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to hide explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.hidePrompt,onChange:this.change("hidePrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.explanation,widgets:this.props.widgets,widgetEnabled:true,onChange:props=>{const newProps={};if(_.has(props,"content")){newProps.explanation=props.content;}if(_.has(props,"widgets")){newProps.widgets=props.widgets;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.state={},this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}ExplanationEditor.propTypes={...Changeable.propTypes,showPrompt:PropTypes.string,hidePrompt:PropTypes.string,explanation:PropTypes.string,widgets:PropTypes.object,apiOptions:PropTypes.any};ExplanationEditor.widgetName="explanation";ExplanationEditor.defaultProps=explanationLogic.defaultWidgetOptions;
+const{TextInput: TextInput$4}=components;class ExplanationEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-explanation-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to show explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.showPrompt,onChange:this.change("showPrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{children:["Prompt to hide explanation:"," ",jsxRuntimeExports.jsx(TextInput$4,{value:this.props.hidePrompt,onChange:this.change("hidePrompt")})]})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:this.props.explanation,widgets:this.props.widgets,widgetEnabled:true,onChange:props=>{const newProps={};if(_.has(props,"content")){newProps.explanation=props.content;}if(_.has(props,"widgets")){newProps.widgets=props.widgets;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}ExplanationEditor.widgetName="explanation";ExplanationEditor.defaultProps=explanationLogic.defaultWidgetOptions;
 
 var styles$N = {"paddedX":"perseus_o-vx07Zg","paddedY":"perseus_873n-udD","answerOption":"perseus_x7ZKrcCV","buttonRow":"perseus_oxdBYi-q","buttonSets":"perseus_086GhAqW","answersSubtitle":"perseus_Xz7kTZ-l","answersGroup":"perseus_xzQO7ISR","answersList":"perseus_AIxq-uWT","deleteButton":"perseus_ppk4h52d"};
 
@@ -1562,9 +1564,9 @@ class FreeResponseEditor extends React.Component{render(){const editingDisabled=
 
 var styles$L = {"title":"perseus_n2P9eL87","input":"perseus_09NCEMrz","hintsTitle":"perseus_fGIysYAE"};
 
-const{TextInput: TextInput$3}=components;class GradedGroupEditor extends React.Component{render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-group-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{className:styles$L.title,children:["Title:"," ",jsxRuntimeExports.jsx(TextInput$3,{value:this.props.title,className:styles$L.input,onChange:this.change("title")})]})}),jsxRuntimeExports.jsx(Editor,{ref:this.editor,content:this.props.content,widgets:this.props.widgets,apiOptions:this.props.apiOptions,images:this.props.images,widgetEnabled:true,onChange:this.props.onChange,warnNoPrompt:true,warnNoWidgets:true}),!this.props.hint&&jsxRuntimeExports.jsx(Button,{startIcon:plusIcon,size:"small",kind:"tertiary",onClick:this.handleAddHint,disabled:editingDisabled,children:"Add a hint"}),this.props.hint&&jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor",children:[jsxRuntimeExports.jsx("div",{className:styles$L.hintsTitle,children:"Hint"}),jsxRuntimeExports.jsx(Editor,{ref:this.hintEditor,content:this.props.hint?this.props.hint.content:"",widgets:this.props.hint?this.props.hint.widgets:{},apiOptions:this.props.apiOptions,images:this.props.hint&&this.props.hint.images,widgetEnabled:true,onChange:props=>{this.change("hint",Object.assign({},this.props.hint,props));}}),jsxRuntimeExports.jsx(Button,{startIcon:trashIcon,size:"small",kind:"tertiary",onClick:this.handleRemoveHint,disabled:editingDisabled,style:{marginInlineStart:"auto",display:"flex"},children:"Remove this hint"})]})]})}constructor(...args){super(...args),this.editor=React.createRef(),this.hintEditor=React.createRef(),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handleAddHint=()=>{const hint={content:"",images:{},widgets:{}};this.props.onChange({hint},()=>{this.hintEditor.current?.focus();});},this.handleRemoveHint=()=>{this.props.onChange({hint:null});},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=()=>{return {title:this.props.title,...this.editor.current?.serialize(),hint:this.hintEditor.current?.serialize()}};}}GradedGroupEditor.propTypes={...Changeable.propTypes,title:PropTypes.string,content:PropTypes.string,widgets:PropTypes.object,images:PropTypes.object,apiOptions:ApiOptions.propTypes};GradedGroupEditor.widgetName="graded-group";GradedGroupEditor.defaultProps=gradedGroupLogic.defaultWidgetOptions;
+const{TextInput: TextInput$3}=components;class GradedGroupEditor extends React.Component{render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-group-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{className:styles$L.title,children:["Title:"," ",jsxRuntimeExports.jsx(TextInput$3,{value:this.props.title,className:styles$L.input,onChange:this.change("title")})]})}),jsxRuntimeExports.jsx(Editor,{ref:this.editor,content:this.props.content,widgets:this.props.widgets,apiOptions:this.props.apiOptions,images:this.props.images,widgetEnabled:true,onChange:this.props.onChange,warnNoPrompt:true,warnNoWidgets:true}),!this.props.hint&&jsxRuntimeExports.jsx(Button,{startIcon:plusIcon,size:"small",kind:"tertiary",onClick:this.handleAddHint,disabled:editingDisabled,children:"Add a hint"}),this.props.hint&&jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor",children:[jsxRuntimeExports.jsx("div",{className:styles$L.hintsTitle,children:"Hint"}),jsxRuntimeExports.jsx(Editor,{ref:this.hintEditor,content:this.props.hint.content,widgets:this.props.hint.widgets,apiOptions:this.props.apiOptions,images:this.props.hint.images,widgetEnabled:true,onChange:props=>{this.change("hint",Object.assign({},this.props.hint,props));}}),jsxRuntimeExports.jsx(Button,{startIcon:trashIcon,size:"small",kind:"tertiary",onClick:this.handleRemoveHint,disabled:editingDisabled,style:{marginInlineStart:"auto",display:"flex"},children:"Remove this hint"})]})]})}constructor(...args){super(...args),this.editor=React.createRef(),this.hintEditor=React.createRef(),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handleAddHint=()=>{const hint={content:"",images:{},widgets:{}};this.props.onChange({hint},()=>{this.hintEditor.current?.focus();});},this.handleRemoveHint=()=>{this.props.onChange({hint:null});},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=()=>{return {title:this.props.title,...this.editor.current?.serialize(),hint:this.hintEditor.current?.serialize()}};}}GradedGroupEditor.widgetName="graded-group";GradedGroupEditor.defaultProps=gradedGroupLogic.defaultWidgetOptions;
 
-class GradedGroupSetEditor extends React.Component{UNSAFE_componentWillMount(){this._editors=[];}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-group-editor",children:[this.renderGroups(),jsxRuntimeExports.jsx("button",{onClick:this.addGroup,disabled:editingDisabled,children:"Add group"})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.getSaveWarnings=()=>{return [].concat(...this._editors.map(editor=>editor?editor.getSaveWarnings():[]))},this.serialize=()=>{return {gradedGroups:this.props.gradedGroups}},this.renderGroups=()=>{if(!this.props.gradedGroups){return null}return this.props.gradedGroups.map((group,i)=>jsxRuntimeExports.jsx(GradedGroupEditor,{ref:el=>this._editors[i]=el,...group,apiOptions:this.props.apiOptions,widgetEnabled:true,onChange:data=>this.change("gradedGroups",setArrayItem(this.props.gradedGroups,i,{...this.props.gradedGroups[i],...data}))},i))},this.addGroup=()=>{const groups=this.props.gradedGroups||[];this.change("gradedGroups",groups.concat([GradedGroupEditor.defaultProps]));};}}GradedGroupSetEditor.propTypes={...Changeable.propTypes,apiOptions:ApiOptions.propTypes,gradedGroups:PropTypes.array,onChange:PropTypes.func.isRequired};GradedGroupSetEditor.widgetName="graded-group-set";GradedGroupSetEditor.defaultProps=gradedGroupSetLogic.defaultWidgetOptions;const setArrayItem=(list,i,value)=>[...list.slice(0,i),value,...list.slice(i+1)];
+class GradedGroupSetEditor extends React.Component{UNSAFE_componentWillMount(){this._editors=[];}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs("div",{className:"perseus-group-editor",children:[this.renderGroups(),jsxRuntimeExports.jsx("button",{onClick:this.addGroup,disabled:editingDisabled,children:"Add group"})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.getSaveWarnings=()=>{return [].concat(...this._editors.map(editor=>editor?editor.getSaveWarnings():[]))},this.serialize=()=>{return {gradedGroups:this.props.gradedGroups}},this.renderGroups=()=>{const gradedGroups=this.props.gradedGroups??[];return gradedGroups.map((group,i)=>jsxRuntimeExports.jsx(GradedGroupEditor,{ref:el=>this._editors[i]=el,...group,apiOptions:this.props.apiOptions,onChange:data=>this.change("gradedGroups",setArrayItem(gradedGroups,i,{...gradedGroups[i],...data}))},i))},this.addGroup=()=>{const groups=this.props.gradedGroups??[];this.change("gradedGroups",groups.concat([GradedGroupEditor.defaultProps]));};}}GradedGroupSetEditor.widgetName="graded-group-set";GradedGroupSetEditor.defaultProps=gradedGroupSetLogic.defaultWidgetOptions;const setArrayItem=(list,i,value)=>[...list.slice(0,i),value,...list.slice(i+1)];
 
 const{ButtonGroup: ButtonGroup$6,RangeInput: RangeInput$5}=components;const defaultBackgroundImage$1={url:null,width:0,height:0};function numSteps$1(range,step){return Math.floor((range[1]-range[0])/step)}class GraphSettings extends React.Component{getInitialState(){return this.stateFromProps(this.props)}componentDidMount(){this._isMounted=true;this.changeGraph=_.debounce(this.changeGraph,300);}UNSAFE_componentWillReceiveProps(nextProps){if(!_.isEqual(this.props.labels,nextProps.labels)||!_.isEqual(this.props.gridStep,nextProps.gridStep)||!_.isEqual(this.props.snapStep,nextProps.snapStep)||!_.isEqual(this.props.step,nextProps.step)||!_.isEqual(this.props.range,nextProps.range)||!_.isEqual(this.props.backgroundImage,nextProps.backgroundImage)){this.setState(this.stateFromProps(nextProps));}}componentWillUnmount(){this._isMounted=false;}stateFromProps(props){return {labelsTextbox:props.labels,gridStepTextbox:props.gridStep,snapStepTextbox:props.snapStep,stepTextbox:props.step,rangeTextbox:props.range,backgroundImage:_.clone(props.backgroundImage)}}changeRulerLabel(e){this.props.onChange({rulerLabel:e.target.value});}changeRulerTicks(e){this.props.onChange({rulerTicks:+e.target.value});}changeBackgroundUrl(e){if(e.type==="keypress"&&"key"in e&&e.key!=="Enter"){return}const setUrl=(url,width,height)=>{const image=_.clone(this.props.backgroundImage);image.url=url;image.width=width;image.height=height;this.setState({backgroundImage:image},this.changeGraph);};const url=ReactDOM.findDOMNode(this.refs["bg-url"]).value;if(url){Util.getImageSize(url,(width,height)=>{if(this._isMounted){setUrl(url,width,height);}});}else {setUrl(null,0,0);}}renderLabelChoices(choices){return choices.map(function([name,value]){return jsxRuntimeExports.jsx("option",{value:value,children:name},value)})}validRange(range){const numbers=_.every(range,function(num){return _.isFinite(num)});if(!numbers){return "Range must be a valid number"}if(range[0]>=range[1]){return "Range must have a higher number on the right"}return true}validateStepValue(settings){const{step,range,name,minTicks,maxTicks}=settings;if(!_.isFinite(step)){return name+" must be a valid number"}const nSteps=numSteps$1(range,step);if(nSteps<minTicks){return name+" is too large, there must be at least "+minTicks+" ticks."}if(nSteps>maxTicks){return name+" is too small, there can be at most "+maxTicks+" ticks."}return true}validSnapStep(step,range){return this.validateStepValue({step:step,range:range,name:"Snap step",minTicks:5,maxTicks:60})}validGridStep(step,range){return this.validateStepValue({step:step,range:range,name:"Grid step",minTicks:3,maxTicks:60})}validStep(step,range){return this.validateStepValue({step:step,range:range,name:"Step",minTicks:3,maxTicks:20})}validBackgroundImageSize(image){if(!image.url){return true}const validSize=(image.width??0)<=450&&(image.height??0)<=450;if(!validSize){return "Image must be smaller than 450px x 450px."}return true}validateGraphSettings(range,step,gridStep,snapStep,image){const self=this;let msg;const goodRange=_.every(range,function(range){msg=self.validRange(range);return msg===true});if(!goodRange){return msg}const goodStep=_.every(step,function(step,i){msg=self.validStep(step,range[i]);return msg===true});if(!goodStep){return msg}const goodGridStep=_.every(gridStep,function(gridStep,i){msg=self.validGridStep(gridStep,range[i]);return msg===true});if(!goodGridStep){return msg}const goodSnapStep=_.every(snapStep,function(snapStep,i){msg=self.validSnapStep(snapStep,range[i]);return msg===true});if(!goodSnapStep){return msg}const goodImageSize=this.validBackgroundImageSize(image);if(goodImageSize!==true){msg=goodImageSize;return msg}return true}changeLabel(i,e){const val=e.target.value;const labels=this.state.labelsTextbox.slice();labels[i]=val;this.setState({labelsTextbox:labels},this.changeGraph);}changeRange(i,values){const ranges=this.state.rangeTextbox.slice();ranges[i]=values;const step=this.state.stepTextbox.slice();const gridStep=this.state.gridStepTextbox.slice();const snapStep=this.state.snapStepTextbox.slice();const scale=Util.scaleFromExtent(ranges[i],this.props.box[i]);if(this.validRange(ranges[i])===true){step[i]=Util.tickStepFromExtent(ranges[i],this.props.box[i]);gridStep[i]=Util.gridStepFromTickStep(step[i],scale);snapStep[i]=gridStep[i]/2;}this.setState({stepTextbox:step,gridStepTextbox:gridStep,snapStepTextbox:snapStep,rangeTextbox:ranges},this.changeGraph);}changeStep(step){this.setState({stepTextbox:step},this.changeGraph);}changeSnapStep(snapStep){this.setState({snapStepTextbox:snapStep},this.changeGraph);}changeGridStep(gridStep){this.setState({gridStepTextbox:gridStep,snapStepTextbox:gridStep.map(function(step){return step/2})},this.changeGraph);}changeGraph(){const labels=this.state.labelsTextbox;const range=this.state.rangeTextbox.map(range=>range.map(Number));const step=this.state.stepTextbox.map(Number);const gridStep=this.state.gridStepTextbox;const snapStep=this.state.snapStepTextbox;const image=this.state.backgroundImage;const validationResult=this.validateGraphSettings(range,step,gridStep,snapStep,image);if(validationResult===true){this.props.onChange({valid:true,labels:labels,range:range,step:step,gridStep:gridStep,snapStep:snapStep,backgroundImage:image});}else {this.props.onChange({valid:validationResult});}}render(){const scale=[KhanMath.roundTo(2,Util.scaleFromExtent(this.props.range[0],this.props.box[0])),KhanMath.roundTo(2,Util.scaleFromExtent(this.props.range[1],this.props.box[1]))];const{TeX}=Dependencies.getDependencies();return jsxRuntimeExports.jsxs("div",{children:[this.props.editableSettings.includes("canvas")&&jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("label",{htmlFor:"canvas-size",children:"Canvas size (x,y pixels)"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"canvas-size",value:this.props.box,onChange:box=>{this.props.onChange({box:box});}})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:["Scale (px per div):"," ",jsxRuntimeExports.jsx(TeX,{children:"("+scale[0]+", "+scale[1]+")"})]})]}),this.props.editableSettings.includes("graph")&&jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"labels-x",children:"x Label"}),jsxRuntimeExports.jsx("input",{id:"labels-x",type:"text",className:"graph-settings-axis-label",ref:"labels-0",onChange:e=>this.changeLabel(0,e),value:this.state.labelsTextbox[0]||""})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"labels-y",children:"y Label"}),jsxRuntimeExports.jsx("input",{id:"labels-y",type:"text",className:"graph-settings-axis-label",ref:"labels-1",onChange:e=>this.changeLabel(1,e),value:this.state.labelsTextbox[1]||""})]})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"range-x",children:"x Range"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"range-x",value:this.state.rangeTextbox[0],onChange:vals=>this.changeRange(0,vals)})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"range-y",children:"y Range"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"range-y",value:this.state.rangeTextbox[1],onChange:vals=>this.changeRange(1,vals)})]})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"tick-step",children:"Tick Step"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"tick-step",value:this.state.stepTextbox,onChange:this.changeStep})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"grid-step",children:"Grid Step"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"grid-step",value:this.state.gridStepTextbox,onChange:this.changeGridStep})]})]}),this.props.editableSettings.includes("snap")&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:[jsxRuntimeExports.jsx("label",{htmlFor:"snap-step",children:"Snap Step"}),jsxRuntimeExports.jsx(RangeInput$5,{id:"snap-step",value:this.state.snapStepTextbox,onChange:this.changeSnapStep})]})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("label",{children:"Markings: "}),jsxRuntimeExports.jsx(ButtonGroup$6,{value:this.props.markings,allowEmpty:false,buttons:[{value:"graph",content:"Graph"},{value:"grid",content:"Grid"},{value:"none",content:"None"}],onChange:value=>this.props.onChange({markings:value})})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show tooltips",checked:this.props.showTooltips,onChange:value=>{this.props.onChange({showTooltips:value});}})})]}),this.props.editableSettings.includes("image")&&jsxRuntimeExports.jsxs("div",{className:"image-settings",children:[jsxRuntimeExports.jsx("div",{children:"Background image:"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("label",{htmlFor:"bg-url",children:"Url:"}),jsxRuntimeExports.jsx("input",{id:"bg-url",type:"text",className:"graph-settings-background-url",ref:"bg-url",value:this.state.backgroundImage.url||"",onChange:e=>{const image=_.clone(this.props.backgroundImage);image.url=e.target.value;this.setState({backgroundImage:image});},onKeyPress:this.changeBackgroundUrl,onBlur:this.changeBackgroundUrl}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Create an image in graphie, or use the "Add image" function to create a background.'})})]})]}),this.props.editableSettings.includes("measure")&&jsxRuntimeExports.jsxs("div",{className:"misc-settings",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show ruler",checked:this.props.showRuler,onChange:value=>{this.props.onChange({showRuler:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.props.onChange({showProtractor:value});}})})]}),this.props.showRuler&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler label:"," ",jsxRuntimeExports.jsxs("select",{onChange:this.changeRulerLabel,value:this.props.rulerLabel,children:[jsxRuntimeExports.jsx("option",{value:"",children:"None"}),jsxRuntimeExports.jsx("optgroup",{label:"Metric",children:this.renderLabelChoices([["milimeters","mm"],["centimeters","cm"],["meters","m"],["kilometers","km"]])}),jsxRuntimeExports.jsx("optgroup",{label:"Imperial",children:this.renderLabelChoices([["inches","in"],["feet","ft"],["yards","yd"],["miles","mi"]])})]})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler ticks:"," ",jsxRuntimeExports.jsx("select",{onChange:this.changeRulerTicks,value:this.props.rulerTicks,children:[1,2,4,8,10,16].map(function(n){return jsxRuntimeExports.jsx("option",{value:n,children:n},n)})})]})})]})]})]})}constructor(props){super(props),this._isMounted=false;this.state=this.getInitialState();this.changeBackgroundUrl=this.changeBackgroundUrl.bind(this);this.changeGraph=this.changeGraph.bind(this);this.changeGridStep=this.changeGridStep.bind(this);this.changeLabel=this.changeLabel.bind(this);this.changeRange=this.changeRange.bind(this);this.changeRulerLabel=this.changeRulerLabel.bind(this);this.changeRulerTicks=this.changeRulerTicks.bind(this);this.changeSnapStep=this.changeSnapStep.bind(this);this.changeStep=this.changeStep.bind(this);}}GraphSettings.defaultProps={editableSettings:["graph","snap","image","measure"],box:[interactiveSizes.defaultBoxSizeSmall,interactiveSizes.defaultBoxSizeSmall],labels:["x","y"],range:[[-10,10],[-10,10]],step:[1,1],gridStep:[1,1],snapStep:[1,1],valid:true,backgroundImage:defaultBackgroundImage$1,markings:"graph",rulerLabel:"",rulerTicks:10,showProtractor:false,showRuler:false,showTooltips:false};
 
@@ -1572,7 +1574,7 @@ const{MultiButtonGroup}=components;const Grapher=GrapherWidget.widget;const{choo
 
 class GroupEditor extends React.Component{serialize(){invariant(this.editor.current,"cannot serialize GroupEditor without Editor");return {...this.editor.current.serialize()}}render(){return jsxRuntimeExports.jsx("div",{className:"perseus-group-editor",children:jsxRuntimeExports.jsx(Editor,{ref:this.editor,content:this.props.content,widgets:this.props.widgets,apiOptions:this.props.apiOptions,images:this.props.images,widgetEnabled:true,onChange:this.props.onChange})})}constructor(...args){super(...args),this.editor=React.createRef(),this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()};}}GroupEditor.propTypes={content:PropTypes.string,widgets:PropTypes.object,images:PropTypes.object,apiOptions:ApiOptions.propTypes};GroupEditor.widgetName="group";GroupEditor.defaultProps=groupLogic.defaultWidgetOptions;
 
-class PairEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("fieldset",{children:[jsxRuntimeExports.jsxs("label",{children:["Name:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.name,onChange:this.change("name")})]}),jsxRuntimeExports.jsxs("label",{children:["Value:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.value,onChange:this.change("value")})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)};}}PairEditor.propTypes={...Changeable.propTypes,name:PropTypes.string,value:PropTypes.string};PairEditor.defaultProps={name:"",value:""};class PairsEditor extends React.Component{render(){const editors=this.props.pairs.map((pair,i)=>{return jsxRuntimeExports.jsx(PairEditor,{name:pair.name,value:pair.value,onChange:this.handlePairChange.bind(this,i)},i)});return jsxRuntimeExports.jsx("div",{children:editors})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handlePairChange=(pairIndex,pair)=>{const pairs=this.props.pairs.slice();pairs[pairIndex]=pair;const lastPair=pairs[pairs.length-1];if(lastPair.name&&lastPair.value){pairs.push({name:"",value:""});}this.change("pairs",pairs);};}}PairsEditor.propTypes={...Changeable.propTypes,pairs:PropTypes.arrayOf(PropTypes.shape({name:PropTypes.string,value:PropTypes.string})).isRequired};class IframeEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{style:{fontWeight:"bold",textAlign:"center"},children:["This widget is deprecated! ",jsxRuntimeExports.jsx("br",{}),"Try using the Video or CS Program widgets instead."]}),jsxRuntimeExports.jsxs("label",{children:["Url or Program ID:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.url,onChange:this.change("url")})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Settings:",jsxRuntimeExports.jsx(PairsEditor,{name:"settings",pairs:this.props.settings,onChange:this.handleSettingsChange})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Width:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.width,onChange:this.change("width")})]}),jsxRuntimeExports.jsxs("label",{children:["Height:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.height,onChange:this.change("height")})]}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Allow full screen",checked:this.props.allowFullScreen,onChange:value=>{this.props.onChange({allowFullScreen:value});}}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Allow iframe content to redirect the page",checked:this.props.allowTopNavigation,onChange:value=>{this.props.onChange({allowTopNavigation:value});}})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handleSettingsChange=settings=>{this.change({settings:settings.pairs});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}IframeEditor.propTypes={...Changeable.propTypes};IframeEditor.widgetName="iframe";IframeEditor.defaultProps=iframeLogic.defaultWidgetOptions;
+class PairEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("fieldset",{children:[jsxRuntimeExports.jsxs("label",{children:["Name:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.name,onChange:this.change("name")})]}),jsxRuntimeExports.jsxs("label",{children:["Value:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.value,onChange:this.change("value")})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)};}}class PairsEditor extends React.Component{render(){const editors=this.props.pairs.map((pair,i)=>{return jsxRuntimeExports.jsx(PairEditor,{name:pair.name,value:pair.value,onChange:this.handlePairChange.bind(this,i)},i)});return jsxRuntimeExports.jsx("div",{children:editors})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handlePairChange=(pairIndex,pair)=>{const pairs=this.props.pairs.slice();pairs[pairIndex]=pair;const lastPair=pairs[pairs.length-1];if(lastPair.name&&lastPair.value){pairs.push({name:"",value:""});}this.change("pairs",pairs);};}}class IframeEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("div",{style:{fontWeight:"bold",textAlign:"center"},children:["This widget is deprecated! ",jsxRuntimeExports.jsx("br",{}),"Try using the Video or CS Program widgets instead."]}),jsxRuntimeExports.jsxs("label",{children:["Url or Program ID:",jsxRuntimeExports.jsx(BlurInput,{value:this.props.url,onChange:this.change("url")})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Settings:",jsxRuntimeExports.jsx(PairsEditor,{pairs:this.props.settings??[],onChange:this.handleSettingsChange})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Width:",jsxRuntimeExports.jsx(BlurInput,{value:String(this.props.width),onChange:this.change("width")})]}),jsxRuntimeExports.jsxs("label",{children:["Height:",jsxRuntimeExports.jsx(BlurInput,{value:String(this.props.height),onChange:this.change("height")})]}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Allow full screen",checked:this.props.allowFullScreen,onChange:value=>{this.props.onChange({allowFullScreen:value});}}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx(Checkbox$1,{label:"Allow iframe content to redirect the page",checked:this.props.allowTopNavigation,onChange:value=>{this.props.onChange({allowTopNavigation:value});}})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.handleSettingsChange=settings=>{this.change({settings:settings.pairs});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}IframeEditor.widgetName="iframe";IframeEditor.defaultProps=iframeLogic.defaultWidgetOptions;
 
 const{SvgImage}=components;function ImagePreview({src,alt,width,height,wbTheme}){return jsxRuntimeExports.jsx("div",{className:"perseus-image-preview-container","data-testid":"image-preview-container","data-wb-theme":wbTheme,children:jsxRuntimeExports.jsx(SvgImage,{src:src,alt:alt,width:width,height:height,allowZoom:false})})}
 
@@ -1830,9 +1832,9 @@ class LabelImageEditor extends React.Component{componentDidUpdate(prevProps){con
 
 class MatcherEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-matcher-editor",children:[jsxRuntimeExports.jsxs("div",{children:[" ","Correct answer:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Enter the correct answers here. The preview on the right will show the cards in a randomized order, which is how the student will see them."})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-clearfix",children:[jsxRuntimeExports.jsx(TextListEditor,{options:this.props.left,onChange:(options,cb)=>{this.props.onChange({left:options},cb);},layout:"vertical"}),jsxRuntimeExports.jsx(TextListEditor,{options:this.props.right,onChange:(options,cb)=>{this.props.onChange({right:options},cb);},layout:"vertical"})]}),jsxRuntimeExports.jsxs("span",{children:[" ","Labels:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"These are entirely optional."})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("input",{type:"text",defaultValue:this.props.labels[0],onChange:this.onLabelChange.bind(this,0)}),jsxRuntimeExports.jsx("input",{type:"text",defaultValue:this.props.labels[1],onChange:this.onLabelChange.bind(this,1)})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Checkbox$1,{label:"Order of the matched pairs matters:",checked:this.props.orderMatters,onChange:value=>{this.props.onChange({orderMatters:value});}}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:"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."}),jsxRuntimeExports.jsx("p",{children:"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."})]})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(Checkbox$1,{label:"Padding:",checked:this.props.padding,onChange:value=>{this.props.onChange({padding:value});}}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Padding is good for text, but not needed for images."})})]})]})}constructor(...args){super(...args),this.onLabelChange=(index,e)=>{const labels=_.clone(this.props.labels);labels[index]=e.target.value;this.props.onChange({labels:labels});},this.getSaveWarnings=()=>{if(this.props.left.length!==this.props.right.length){return ["The two halves of the matcher have different numbers"+" of cards."]}return []},this.serialize=()=>{return _.pick(this.props,"left","right","labels","orderMatters","padding")};}}MatcherEditor.propTypes={left:PropTypes.array,right:PropTypes.array,labels:PropTypes.array,orderMatters:PropTypes.bool,padding:PropTypes.bool};MatcherEditor.widgetName="matcher";MatcherEditor.defaultProps=matcherLogic.defaultWidgetOptions;
 
-const{RangeInput: RangeInput$3}=components;const Matrix=MatrixWidget.widget;const MAX_BOARD_SIZE=6;class MatrixEditor extends React.Component{render(){const matrixProps={onBlur:()=>{},onFocus:()=>{},trackInteraction:()=>{},userInput:{answers:this.props.answers},handleUserInput:userInput=>{this.change({answers:userInput.answers});},...this.props};return jsxRuntimeExports.jsxs("div",{className:"perseus-matrix-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Max matrix size:"," ",jsxRuntimeExports.jsx(RangeInput$3,{value:this.props.matrixBoardSize,onChange:this.onMatrixBoardSizeChange,format:this.props.labelStyle,useArrowKeys:true})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Matrix,{...matrixProps})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix prefix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"prefix",apiOptions:this.props.apiOptions,content:this.props.prefix,widgetEnabled:false,onChange:newProps=>{this.change({prefix:newProps.content});}})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix suffix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"suffix",apiOptions:this.props.apiOptions,content:this.props.suffix,widgetEnabled:false,onChange:newProps=>{this.change({suffix:newProps.content});}})]})]})}constructor(...args){super(...args),this.change=(...args)=>{if(this.props.apiOptions.editingDisabled){return}return Changeable.change.apply(this,args)},this.onMatrixBoardSizeChange=range=>{const matrixSize=getMatrixSize(this.props.answers);if(range[0]!==null&&range[1]!==null){range=[Math.round(Math.min(Math.max(range[0],1),MAX_BOARD_SIZE)),Math.round(Math.min(Math.max(range[1],1),MAX_BOARD_SIZE))];const answers=_(Math.min(range[0],matrixSize[0])).times(row=>{return _(Math.min(range[1],matrixSize[1])).times(col=>{return this.props.answers[row][col]})});this.props.onChange({matrixBoardSize:range,answers:answers});}},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}MatrixEditor.propTypes={...Changeable.propTypes,matrixBoardSize:PropTypes.arrayOf(PropTypes.number).isRequired,answers:PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),prefix:PropTypes.string,suffix:PropTypes.string,cursorPosition:PropTypes.arrayOf(PropTypes.number)};MatrixEditor.widgetName="matrix";MatrixEditor.defaultProps=matrixLogic.defaultWidgetOptions;
+const{RangeInput: RangeInput$3}=components;const Matrix=MatrixWidget.widget;const MAX_BOARD_SIZE=6;class MatrixEditor extends React.Component{render(){const matrixProps={onBlur:()=>{},onFocus:()=>{},trackInteraction:()=>{},userInput:{answers:this.props.answers.map(row=>row.map(cell=>cell==null?"":String(cell)))},handleUserInput:userInput=>{this.change({answers:userInput.answers});},...this.props};return jsxRuntimeExports.jsxs("div",{className:"perseus-matrix-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Max matrix size:"," ",jsxRuntimeExports.jsx(RangeInput$3,{value:this.props.matrixBoardSize,onChange:this.onMatrixBoardSizeChange,useArrowKeys:true})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(Matrix,{...matrixProps})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix prefix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"prefix",apiOptions:this.props.apiOptions,content:this.props.prefix,widgetEnabled:false,onChange:newProps=>{this.change({prefix:newProps.content});}})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[" ","Matrix suffix:"," ",jsxRuntimeExports.jsx(Editor,{ref:"suffix",apiOptions:this.props.apiOptions,content:this.props.suffix,widgetEnabled:false,onChange:newProps=>{this.change({suffix:newProps.content});}})]})]})}constructor(...args){super(...args),this.change=(...args)=>{if(this.props.apiOptions.editingDisabled){return}return Changeable.change.apply(this,args)},this.onMatrixBoardSizeChange=range=>{const matrixSize=getMatrixSize(this.props.answers);if(range[0]!==null&&range[1]!==null){range=[Math.round(Math.min(Math.max(range[0],1),MAX_BOARD_SIZE)),Math.round(Math.min(Math.max(range[1],1),MAX_BOARD_SIZE))];const answers=_(Math.min(range[0],matrixSize[0])).times(row=>{return _(Math.min(range[1],matrixSize[1])).times(col=>{return this.props.answers[row][col]})});this.props.onChange({matrixBoardSize:range,answers:answers});}},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}MatrixEditor.widgetName="matrix";MatrixEditor.defaultProps=matrixLogic.defaultWidgetOptions;
 
-const{NumberInput: NumberInput$4,RangeInput: RangeInput$2}=components;const defaultImage={url:null,top:0,left:0};class MeasurerEditor extends React.Component{render(){const image=_.extend({},defaultImage,this.props.image);return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-measurer",children:[jsxRuntimeExports.jsx("div",{children:"Image displayed under protractor and/or ruler:"}),jsxRuntimeExports.jsxs("div",{children:["URL:"," ",jsxRuntimeExports.jsx("input",{type:"text",className:"perseus-widget-measurer-url",ref:"image-url",defaultValue:image.url,onChange:this._changeUrl}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Create an image in graphie, or use the "Add image" function to create a background.'})})]}),image.url&&jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("label",{className:"perseus-widget-left-col",children:["Pixels from top:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:0,onChange:this._changeTop,value:image.top,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("label",{className:"perseus-widget-right-col",children:["Pixels from left:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:0,onChange:this._changeLeft,value:image.left,useArrowKeys:true})]})]}),jsxRuntimeExports.jsxs("div",{children:["Containing area [width, height]:"," ",jsxRuntimeExports.jsx(RangeInput$2,{onChange:this.change("box"),value:this.props.box,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show ruler",checked:this.props.showRuler,onChange:value=>{this.props.onChange({showRuler:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.props.onChange({showProtractor:value});}})})]}),this.props.showRuler&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler label:"," ",jsxRuntimeExports.jsxs("select",{onChange:e=>this.change("rulerLabel",e.target.value),value:this.props.rulerLabel,children:[jsxRuntimeExports.jsx("option",{value:"",children:"None"}),jsxRuntimeExports.jsx("optgroup",{label:"Metric",children:this.renderLabelChoices([["milimeters","mm"],["centimeters","cm"],["meters","m"],["kilometers","km"]])}),jsxRuntimeExports.jsx("optgroup",{label:"Imperial",children:this.renderLabelChoices([["inches","in"],["feet","ft"],["yards","yd"],["miles","mi"]])})]})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler ticks:"," ",jsxRuntimeExports.jsx("select",{onChange:e=>this.change("rulerTicks",+e.target.value),value:this.props.rulerTicks,children:[1,2,4,8,10,16].map(function(n){return jsxRuntimeExports.jsx("option",{value:n,children:n},n)})})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler pixels per unit:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:40,onChange:this.change("rulerPixels"),value:this.props.rulerPixels,useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler length in units:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:10,onChange:this.change("rulerLength"),value:this.props.rulerLength,useArrowKeys:true})]})})]})]})}constructor(...args){super(...args),this.className="perseus-widget-measurer",this.change=(...args)=>{return Changeable.change.apply(this,args)},this._changeUrl=e=>{this._changeImage("url",e.target.value);},this._changeTop=newTop=>{this._changeImage("top",newTop);},this._changeLeft=newLeft=>{this._changeImage("left",newLeft);},this._changeImage=(subProp,newValue)=>{const image=_.clone(this.props.image);image[subProp]=newValue;this.change("image",image);},this.renderLabelChoices=choices=>{return choices.map(function(nameAndValue){const[name,value]=nameAndValue;return jsxRuntimeExports.jsx("option",{value:value,children:name},value)})},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}MeasurerEditor.widgetName="measurer";MeasurerEditor.propTypes={...Changeable.propTypes,box:PropTypes.arrayOf(PropTypes.number),image:PropTypes.shape({url:PropTypes.string,top:PropTypes.number,left:PropTypes.number}),showProtractor:PropTypes.bool,showRuler:PropTypes.bool,rulerLabel:PropTypes.string,rulerTicks:PropTypes.number,rulerPixels:PropTypes.number,rulerLength:PropTypes.number};MeasurerEditor.defaultProps=measurerLogic.defaultWidgetOptions;
+const{NumberInput: NumberInput$4,RangeInput: RangeInput$2}=components;const defaultImage={url:null,top:0,left:0};class MeasurerEditor extends React.Component{render(){const image=_.extend({},defaultImage,this.props.image);return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-measurer",children:[jsxRuntimeExports.jsx("div",{children:"Image displayed under protractor and/or ruler:"}),jsxRuntimeExports.jsxs("div",{children:["URL:"," ",jsxRuntimeExports.jsx("input",{type:"text",className:"perseus-widget-measurer-url",ref:"image-url",defaultValue:image.url,onChange:this._changeUrl}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Create an image in graphie, or use the "Add image" function to create a background.'})})]}),image.url&&jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("label",{className:"perseus-widget-left-col",children:["Pixels from top:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:0,onChange:this._changeTop,value:image.top,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("label",{className:"perseus-widget-right-col",children:["Pixels from left:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:0,onChange:this._changeLeft,value:image.left,useArrowKeys:true})]})]}),jsxRuntimeExports.jsxs("div",{children:["Containing area [width, height]:"," ",jsxRuntimeExports.jsx(RangeInput$2,{onChange:this.change("box"),value:this.props.box,useArrowKeys:true})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show ruler",checked:this.props.showRuler,onChange:value=>{this.props.onChange({showRuler:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.props.onChange({showProtractor:value});}})})]}),this.props.showRuler&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler label:"," ",jsxRuntimeExports.jsxs("select",{onChange:e=>this.change("rulerLabel",e.target.value),value:this.props.rulerLabel,children:[jsxRuntimeExports.jsx("option",{value:"",children:"None"}),jsxRuntimeExports.jsx("optgroup",{label:"Metric",children:this.renderLabelChoices([["milimeters","mm"],["centimeters","cm"],["meters","m"],["kilometers","km"]])}),jsxRuntimeExports.jsx("optgroup",{label:"Imperial",children:this.renderLabelChoices([["inches","in"],["feet","ft"],["yards","yd"],["miles","mi"]])})]})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:[" ","Ruler ticks:"," ",jsxRuntimeExports.jsx("select",{onChange:e=>this.change("rulerTicks",+e.target.value),value:this.props.rulerTicks,children:[1,2,4,8,10,16].map(function(n){return jsxRuntimeExports.jsx("option",{value:n,children:n},n)})})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler pixels per unit:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:40,onChange:this.change("rulerPixels"),value:this.props.rulerPixels,useArrowKeys:true})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Ruler length in units:"," ",jsxRuntimeExports.jsx(NumberInput$4,{placeholder:10,onChange:this.change("rulerLength"),value:this.props.rulerLength,useArrowKeys:true})]})})]})]})}constructor(...args){super(...args),this.className="perseus-widget-measurer",this.change=(...args)=>{return Changeable.change.apply(this,args)},this._changeUrl=e=>{this._changeImage("url",e.target.value);},this._changeTop=newTop=>{this._changeImage("top",newTop);},this._changeLeft=newLeft=>{this._changeImage("left",newLeft);},this._changeImage=(subProp,newValue)=>{const image=_.clone(this.props.image);image[subProp]=newValue;this.change("image",image);},this.renderLabelChoices=choices=>{return choices.map(function(nameAndValue){const[name,value]=nameAndValue;return jsxRuntimeExports.jsx("option",{value:value,children:name},value)})},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}MeasurerEditor.widgetName="measurer";MeasurerEditor.defaultProps=measurerLogic.defaultWidgetOptions;
 
 const{ButtonGroup,NumberInput: NumberInput$3,RangeInput: RangeInput$1}=components;const bound=(x,gt,lt)=>Math.min(Math.max(x,gt),lt);const EN_DASH="–";class NumberLineEditor extends React.Component{render(){const range=this.props.range;const labelRange=this.props.labelRange;const divisionRange=this.props.divisionRange;range[0]=+range[0];range[1]=+range[1];const width=range[1]-range[0];const numDivisions=this.props.numDivisions;const snapDivisions=this.props.snapDivisions;const tickStep=this.props.tickStep;const isTickCtrl=this.props.isTickCtrl;let step;if(!isTickCtrl){step=tickStep?tickStep/snapDivisions:width/numDivisions/snapDivisions;}else {step=null;}const labelStyleEditorButtons=[{value:"decimal",content:"0.75",title:"Decimals"},{value:"improper",content:"⁷⁄₄",title:"Improper fractions"},{value:"mixed",content:"1¾",title:"Mixed numbers"},{value:"non-reduced",content:"⁸⁄₄",title:"Non-reduced"}];return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-number-line-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:["Correct x"," ",jsxRuntimeExports.jsxs("select",{value:this.props.correctRel,onChange:this.onChangeRelation,"aria-label":"Select relationship",children:[jsxRuntimeExports.jsx("option",{value:"eq","aria-label":"Equal",children:"="}),jsxRuntimeExports.jsx("option",{value:"lt","aria-label":"Less than",children:"<"}),jsxRuntimeExports.jsx("option",{value:"gt","aria-label":"Greater than",children:">"}),jsxRuntimeExports.jsx("option",{value:"le","aria-label":"Less than or equal",children:"≤"}),jsxRuntimeExports.jsx("option",{value:"ge","aria-label":"Greater than or equal",children:"≥"})]})," ",jsxRuntimeExports.jsx(NumberInput$3,{value:this.props.correctX,format:this.props.labelStyle,onChange:this.onNumChange.bind(this,"correctX"),checkValidity:val=>val>=range[0]&&val<=range[1]&&(!step||number.isInteger((val-range[0])/step)),placeholder:"answer",size:"normal",useArrowKeys:true}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"This is the correct answer. The answer is validated (as right or wrong) by using only the end position of the point and the relation (=, <, >, ≤, ≥)."})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[this.props.static?jsxRuntimeExports.jsx("label",{children:"Range:"}):jsxRuntimeExports.jsxs("label",{children:["Position:"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:this.props.initialX,format:this.props.labelStyle,onChange:this.onNumChange.bind(this,"initialX"),placeholder:range[0],checkValidity:val=>{return val>=range[0]&&val<=range[1]},useArrowKeys:true})," ∈ "]}),jsxRuntimeExports.jsx(RangeInput$1,{value:range,onChange:this.onRangeChange,format:this.props.labelStyle,useArrowKeys:true}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsxs("p",{children:["This controls the initial position of the point along the number line and the",jsxRuntimeExports.jsx("strong",{children:"range"}),", the position of the endpoints of the number line. Setting the range constrains the position of the answer and the labels."]}),jsxRuntimeExports.jsx("p",{children:"In static mode, the initial position of the point is determined by Correct x instead of position."})]})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("div",{className:"perseus-widget-left-col",children:["Labels:"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:labelRange[0],placeholder:range[0],format:this.props.labelStyle,checkValidity:val=>val>=range[0]&&val<=range[1],onChange:this.onLabelRangeChange.bind(this,0),useArrowKeys:true}),jsxRuntimeExports.jsx("span",{children:" & "}),jsxRuntimeExports.jsx(NumberInput$3,{value:labelRange[1],placeholder:range[1],format:this.props.labelStyle,checkValidity:val=>val>=range[0]&&val<=range[1],onChange:this.onLabelRangeChange.bind(this,1),useArrowKeys:true}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["This controls the position of the left / right labels. By default, the labels are set by the range ",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("strong",{children:"Note:"})," Ensure that the labels line up with the tick marks, or it may be confusing for users."]})})]})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:["Style:"," ",jsxRuntimeExports.jsx(ButtonGroup,{allowEmpty:false,value:this.props.labelStyle,buttons:labelStyleEditorButtons,onChange:this.onLabelStyleChange}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"This controls the styling of the labels for the two main labels as well as all the tick mark labels, if applicable. Your choices are decimal, improper fractions, mixed fractions, and non-reduced fractions."})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[!this.props.static&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show tick controller",checked:!!this.props.isTickCtrl,onChange:value=>{this.props.onChange({isTickCtrl:value});}})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show label ticks",checked:this.props.labelTicks,onChange:value=>{this.props.onChange({labelTicks:value});}})})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:!this.props.static&&jsxRuntimeExports.jsx(Checkbox$1,{label:"Show tooltips",checked:this.props.showTooltips,onChange:value=>{this.props.onChange({showTooltips:value});}})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[isTickCtrl&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:["Start num divisions at"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:this.props.numDivisions||null,format:"decimal",onChange:this.onNumDivisionsChange,checkValidity:val=>{return val>=divisionRange[0]&&val<=divisionRange[1]},placeholder:width/this.props.tickStep,useArrowKeys:true})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["This controls the number (and position) of the tick marks. The number of divisions is constrained to"," "+divisionRange[0]+EN_DASH+divisionRange[1],".",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("strong",{children:"Note:"})," The user will be able to specify the number of divisions in a number input."]})})]}),!isTickCtrl&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:["Num divisions:"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:this.props.numDivisions||null,format:"decimal",onChange:this.onNumDivisionsChange,checkValidity:val=>{return val>=divisionRange[0]&&val<=divisionRange[1]},placeholder:width/this.props.tickStep,useArrowKeys:true})]})," ",jsxRuntimeExports.jsxs("label",{children:["or tick step:"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:this.props.tickStep||null,format:this.props.labelStyle,onChange:this.onTickStepChange,checkValidity:val=>{return val>0&&val<=width},placeholder:width/this.props.numDivisions,useArrowKeys:true})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["This controls the number (and position) of the tick marks; you can either set the number of divisions (2 divisions would split the entire range in two halves), or the tick step (the distance between ticks) and the other value will be updated accordingly."," ",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("strong",{children:"Note:"})," There is no check to see if labels coordinate with the tick marks, which may be confusing for users if the blue labels and black ticks are off-step."]})})]})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsxs("label",{children:["Snap increments per tick:"," ",jsxRuntimeExports.jsx(NumberInput$3,{value:snapDivisions,checkValidity:val=>val>0,format:this.props.labelStyle,onChange:this.onNumChange.bind(this,"snapDivisions"),useArrowKeys:true})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsxs("p",{children:["This determines the number of different places the point will snap between two adjacent tick marks."," ",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("strong",{children:"Note:"}),"Ensure the required number of snap increments is provided to answer the question."]})})]})]})}constructor(...args){super(...args),this.onRangeChange=range=>{this.props.onChange({range:range});},this.onLabelRangeChange=(i,num)=>{let labelRange=this.props.labelRange.slice();const otherNum=labelRange[1-i];if(num==null||otherNum==null){labelRange[i]=num;}else {labelRange=[Math.min(num,otherNum),Math.max(num,otherNum)];}this.props.onChange({labelRange:labelRange});},this.onDivisionRangeChange=divisionRange=>{let numDivisions=this.props.numDivisions;numDivisions=bound(numDivisions,divisionRange[0],divisionRange[1]);this.props.onChange({divisionRange:divisionRange,numDivisions:numDivisions});},this.onNumChange=(key,value)=>{const opts={};opts[key]=value;this.props.onChange(opts);},this.onNumDivisionsChange=numDivisions=>{const divRange=this.props.divisionRange.slice();numDivisions=_.isFinite(numDivisions)?Math.round(numDivisions):0;numDivisions=numDivisions<0?numDivisions*-1:numDivisions;if(numDivisions){numDivisions=Math.min(divRange[1],Math.max(divRange[0],numDivisions));this.props.onChange({tickStep:null,divisionRange:divRange,numDivisions:numDivisions});}},this.onTickStepChange=tickStep=>{this.props.onChange({numDivisions:null,tickStep:tickStep});},this.onChangeRelation=e=>{const value=e.target.value;this.props.onChange({correctRel:value,isInequality:value!=="eq"});},this.onLabelStyleChange=labelStyle=>{this.props.onChange({labelStyle:labelStyle});},this.serialize=()=>{return EditorJsonify.serialize.call(this)};}}NumberLineEditor.widgetName="number-line";NumberLineEditor.defaultProps=numberLineLogic.defaultWidgetOptions;
 
@@ -1875,5 +1877,5 @@ var AllEditors = [CategorizerEditor,CSProgramEditor,DefinitionEditor,DropdownEdi
 
 Widgets.registerEditors(AllEditors);Widgets.registerWidgets(widgets);Widgets.replaceDeprecatedWidgets();Widgets.replaceDeprecatedEditors();
 
-export { AllEditors, ArticleDiff, ArticleEditor, ContentPreview, DeviceFramer, Editor, EditorPage, IframeContentRenderer, IssuesPanel, ItemDiff, PreviewWithIframe, ViewportResizer, libVersion, usePreviewController, usePreviewPresenter };
+export { A11yOverlays, AllEditors, ArticleDiff, ArticleEditor, ContentPreview, DeviceFramer, Editor, EditorPage, IframeContentRenderer, IssuesPanel, ItemDiff, PreviewWithIframe, ViewportResizer, libVersion, usePreviewController, usePreviewPresenter };
 //# sourceMappingURL=index.js.map