@khanacademy/perseus-editor 35.3.0 → 36.0.0

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.3.0";addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="36.0.0";addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1423,21 +1423,21 @@ const defaultItemEditorContext={question:{content:"",widgets:{},images:{}},onEdi
 
 const IssueCta=({issue})=>{const{question,onEditorChange}=useItemEditorContext();const cta=getCtaForIssueId(issue.id,question,onEditorChange);if(!cta){return null}return jsxRuntimeExports.jsx(Button,{size:"small",onClick:cta.onClick,style:styles$W.button,children:cta.label},issue.id)};const styles$W={button:{marginTop:sizing.size_080,marginBottom:sizing.size_080}};
 
-const PerseusEditorAccordion=props=>{const{animated,children,header,expanded,containerStyle,panelStyle,headerStyle,onToggle}=props;return jsxRuntimeExports.jsx(View,{className:"perseus-editor-accordion",children:jsxRuntimeExports.jsx(AccordionSection,{animated:animated,expanded:expanded,onToggle:onToggle,style:[styles$V.container,containerStyle],headerStyle:[styles$V.accordionHeader,headerStyle],header:header,children:jsxRuntimeExports.jsx(View,{style:[styles$V.accordionPanel,panelStyle],children:children})})})};const styles$V=StyleSheet.create({container:{backgroundColor:semanticColor.core.background.instructive.subtle,marginTop:spacing.xSmall_8},accordionHeader:{padding:spacing.small_12,paddingInlineEnd:0,height:spacing.xxLarge_48},accordionPanel:{paddingTop:spacing.xxSmall_6,paddingBottom:spacing.xxxSmall_4,paddingLeft:spacing.small_12,paddingRight:spacing.small_12}});
+const PerseusEditorAccordion=props=>{const{animated,children,header,expanded,containerStyle,panelStyle,headerStyle,onToggle}=props;return jsxRuntimeExports.jsx(View,{className:"perseus-editor-accordion",children:jsxRuntimeExports.jsx(AccordionSection,{animated:animated,expanded:expanded,onToggle:onToggle,style:[styles$V.container,containerStyle],headerStyle:[styles$V.accordionHeader,headerStyle],header:header,children:jsxRuntimeExports.jsx(View,{style:[styles$V.accordionPanel,panelStyle],children:children})})})};const styles$V=StyleSheet.create({container:{backgroundColor:semanticColor.core.background.instructive.subtle,marginBlockStart:spacing.xSmall_8},accordionHeader:{padding:spacing.small_12,paddingInlineEnd:0,height:spacing.xxLarge_48},accordionPanel:{paddingBlockStart:spacing.xxSmall_6,paddingBlockEnd:spacing.xxxSmall_4,paddingInlineStart:spacing.small_12,paddingInlineEnd:spacing.small_12}});
 
 const showMeStyle={marginBlockStart:"1em",display:"flex",alignItems:"center"};const ShowMe=({instanceId})=>{const[showMe,setShowMe]=React.useState(false);const context=React.useContext(A11yContext);React.useEffect(()=>{return ()=>{if(instanceId!=null){context?.setIssueHighlight(instanceId,false);}}},[]);if(instanceId==null||context==null){return jsxRuntimeExports.jsx("div",{children:"Unable to find the offending element. Please ask a developer for help fixing this."})}const handleChange=checked=>{setShowMe(checked);context.setIssueHighlight(instanceId,checked);};return jsxRuntimeExports.jsxs(BodyText,{size:"small",tag:"span",weight:"bold",style:showMeStyle,children:[jsxRuntimeExports.jsx("span",{style:{marginInlineEnd:"1em"},children:"Show Me"}),jsxRuntimeExports.jsx(Switch,{checked:showMe,onChange:handleChange,"aria-label":"Show Me"})]})};
 
-const impactStringMap={high:"Error",medium:"Warning",low:"Guideline"};const IssueDetails=({issue})=>{const[expanded,setExpanded]=React.useState(false);const toggleVisibility=()=>setExpanded(!expanded);const accordionColor=issue.impact==="high"?semanticColor.feedback.critical.subtle.background:semanticColor.feedback.warning.subtle.background;const messageStyling={whiteSpace:"pre-line",color:semanticColor.core.foreground.critical.default};return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{animated:true,expanded:expanded,onToggle:toggleVisibility,containerStyle:{backgroundColor:accordionColor},panelStyle:{backgroundColor:"white"},header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",style:{textOverflow:"ellipsis",maxWidth:"100%",overflow:"hidden",whiteSpace:"nowrap"},children:`${impactStringMap[issue.impact]}: ${issue.id}`}),children:[jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",children:"Description:"}),jsxRuntimeExports.jsx("span",{children:issue.description}),jsxRuntimeExports.jsx("a",{href:issue.helpUrl,target:"_blank",rel:"noreferrer",children:issue.help}),jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",style:{marginTop:"1em"},children:"Impact:"}),jsxRuntimeExports.jsxs("span",{style:{fontWeight:"initial"},children:[" ",issue.impact]}),jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",style:{marginTop:"1em"},children:"Issue:"}),jsxRuntimeExports.jsx("span",{style:messageStyling,children:issue.message}),jsxRuntimeExports.jsx(ShowMe,{instanceId:issue.source==="a11y"?issue.instanceId:undefined}),jsxRuntimeExports.jsx(IssueCta,{issue:issue})]})};
+const impactStringMap={high:"Error",medium:"Warning",low:"Guideline"};const IssueDetails=({issue})=>{const[expanded,setExpanded]=React.useState(false);const toggleVisibility=()=>setExpanded(!expanded);const accordionColor=issue.impact==="high"?semanticColor.feedback.critical.subtle.background:semanticColor.feedback.warning.subtle.background;const messageStyling={whiteSpace:"pre-line",color:semanticColor.core.foreground.critical.default};return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{animated:true,expanded:expanded,onToggle:toggleVisibility,containerStyle:{backgroundColor:accordionColor},panelStyle:{backgroundColor:"white"},header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",style:{textOverflow:"ellipsis",maxInlineSize:"100%",overflow:"hidden",whiteSpace:"nowrap"},children:`${impactStringMap[issue.impact]}: ${issue.id}`}),children:[jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",children:"Description:"}),jsxRuntimeExports.jsx("span",{children:issue.description}),jsxRuntimeExports.jsx("a",{href:issue.helpUrl,target:"_blank",rel:"noreferrer",children:issue.help}),jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",style:{marginBlockStart:"1em"},children:"Impact:"}),jsxRuntimeExports.jsxs("span",{style:{fontWeight:"initial"},children:[" ",issue.impact]}),jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",weight:"bold",style:{marginBlockStart:"1em"},children:"Issue:"}),jsxRuntimeExports.jsx("span",{style:messageStyling,children:issue.message}),jsxRuntimeExports.jsx(ShowMe,{instanceId:issue.source==="a11y"?issue.instanceId:undefined}),jsxRuntimeExports.jsx(IssueCta,{issue:issue})]})};
 
 const LabeledSwitch=props=>{const{checked,label,labelSide="end",size="medium",style,disabled=false,onChange}=props;const switchId=useId();const labelElement=jsxRuntimeExports.jsx(BodyText,{size:size==="small"?"small":undefined,tag:"label",htmlFor:switchId,children:label});const strut=jsxRuntimeExports.jsx(Strut,{size:spacing.xSmall_8});return jsxRuntimeExports.jsxs(View,{style:[styles$U.row,style],children:[labelSide==="start"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[labelElement,strut]}),jsxRuntimeExports.jsx(Switch,{id:switchId,checked:checked,disabled:disabled,onChange:onChange}),labelSide==="end"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[strut,labelElement]})]})};const styles$U=StyleSheet.create({row:{flexDirection:"row",alignItems:"center"}});
 
 function ToggleableCaret(props){const iconStyle=props.isExpanded?styles$T.expanded:styles$T.collapsed;return jsxRuntimeExports.jsx(PhosphorIcon,{icon:caretRight,style:iconStyle})}const styles$T=StyleSheet.create({collapsed:{transition:".15s"},expanded:{transform:"rotate(90deg)",transition:".15s"}});
 
-function getIssueKey(issue){return issue.instanceId??issue.id}const IssuesPanel=props=>{const{issues=[]}=props;const context=useContext(A11yContext);const[showPanel,setShowPanel]=useState(false);const axeCoreIssues=context?.a11yScanningEnabled?context.axeCoreIssues:[];const allIssues=[...issues,...axeCoreIssues];const hasWarnings=allIssues.length>0;const hasErrors=allIssues.some(issue=>issue.impact==="high");const issuesCount=`${allIssues.length} issue${allIssues.length===1?"":"s"}`;const icon=hasErrors?iconAlert:hasWarnings?iconWarning:iconPass;const iconColor=hasErrors?semanticColor.feedback.critical.strong.icon:hasWarnings?semanticColor.feedback.warning.strong.icon:semanticColor.feedback.success.strong.icon;const impactOrder={high:3,medium:2,low:1};const sortedIssues=[...allIssues].sort((a,b)=>{if(impactOrder[b.impact]!==impactOrder[a.impact]){return impactOrder[b.impact]-impactOrder[a.impact]}return a.id.localeCompare(b.id)});return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-title",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-title-id",children:jsxRuntimeExports.jsxs(View,{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"0.25em"},onClick:()=>setShowPanel(!showPanel),children:[jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:showPanel}),jsxRuntimeExports.jsx("span",{children:"Issues"})]})}),jsxRuntimeExports.jsx(PhosphorIcon,{icon:icon,size:"medium",color:iconColor,testId:`issues-icon-${icon}`,style:{marginRight:"0.25em"}}),issuesCount]}),showPanel&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-panel",children:jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-content",children:[sortedIssues.map(issue=>jsxRuntimeExports.jsx(IssueDetails,{issue:issue},getIssueKey(issue))),allIssues.length===0&&jsxRuntimeExports.jsx("div",{children:"No issues found"}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"Include axe-core scan",checked:context?.a11yScanningEnabled??false,onChange:enabled=>{context?.setA11yScanningEnabled(enabled);},style:{marginBlockStart:"1rem"}})]})})]})};
+function getIssueKey(issue){return issue.instanceId??issue.id}const IssuesPanel=props=>{const{issues=[]}=props;const context=useContext(A11yContext);const[showPanel,setShowPanel]=useState(false);const axeCoreIssues=context?.a11yScanningEnabled?context.axeCoreIssues:[];const allIssues=[...issues,...axeCoreIssues];const hasWarnings=allIssues.length>0;const hasErrors=allIssues.some(issue=>issue.impact==="high");const issuesCount=`${allIssues.length} issue${allIssues.length===1?"":"s"}`;const icon=hasErrors?iconAlert:hasWarnings?iconWarning:iconPass;const iconColor=hasErrors?semanticColor.feedback.critical.strong.icon:hasWarnings?semanticColor.feedback.warning.strong.icon:semanticColor.feedback.success.strong.icon;const impactOrder={high:3,medium:2,low:1};const sortedIssues=[...allIssues].sort((a,b)=>{if(impactOrder[b.impact]!==impactOrder[a.impact]){return impactOrder[b.impact]-impactOrder[a.impact]}return a.id.localeCompare(b.id)});return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-title",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-title-id",children:jsxRuntimeExports.jsxs(View,{style:{display:"flex",flexDirection:"row",alignItems:"center",gap:"0.25em"},onClick:()=>setShowPanel(!showPanel),children:[jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:showPanel}),jsxRuntimeExports.jsx("span",{children:"Issues"})]})}),jsxRuntimeExports.jsx(PhosphorIcon,{icon:icon,size:"medium",color:iconColor,testId:`issues-icon-${icon}`,style:{marginInlineEnd:"0.25em"}}),issuesCount]}),showPanel&&jsxRuntimeExports.jsx("div",{className:"perseus-widget-editor-panel",children:jsxRuntimeExports.jsxs("div",{className:"perseus-widget-editor-content",children:[sortedIssues.map(issue=>jsxRuntimeExports.jsx(IssueDetails,{issue:issue},getIssueKey(issue))),allIssues.length===0&&jsxRuntimeExports.jsx("div",{children:"No issues found"}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"Include axe-core scan",checked:context?.a11yScanningEnabled??false,onChange:enabled=>{context?.setA11yScanningEnabled(enabled);},style:{marginBlockStart:"1rem"}})]})})]})};
 
 class JsonEditor extends React.Component{getInitialState(){return {currentValue:JSON.stringify(this.props.value,null,4),valid:true}}componentDidUpdate(prevProps){if(!_.isEqual(prevProps.value,this.props.value)){const shouldReplaceContent=!this.state.valid||!_.isEqual(this.props.value,this.getCurrentValueAsJson());if(shouldReplaceContent){this.setState({currentValue:JSON.stringify(this.props.value,null,4),valid:true});}}}getCurrentValueAsJson(){try{return this.state.currentValue?this.typesafeParseOrThrow(this.state.currentValue):{}}catch{return null}}handleKeyDown(e){if(e.key==="Tab"){const textarea=e.currentTarget;const cursorPos=textarea.selectionStart;const v=textarea.value;const textBefore=v.substring(0,cursorPos);const textAfter=v.substring(cursorPos,v.length);textarea.value=textBefore+"    "+textAfter;textarea.selectionStart=textBefore.length+4;textarea.selectionEnd=textBefore.length+4;e.preventDefault();this.processChange(textarea.value);}}handleChange(e){this.processChange(e.target.value);}processChange(nextString){try{const json=this.typesafeParseOrThrow(nextString);this.setState({currentValue:nextString,valid:true},()=>{this.props.onChange(json);});}catch{this.setState({currentValue:nextString,valid:false});}}handleBlur(e){const nextString=e.target.value;try{const json=this.typesafeParseOrThrow(nextString);this.setState({currentValue:JSON.stringify(json,null,4),valid:true},()=>{this.props.onChange(json);});}catch{this.setState({currentValue:JSON.stringify(this.props.value,null,4),valid:true});}}typesafeParseOrThrow(json){const parsed=this.props.parser(json);if(isSuccess(parsed)){return parsed.value}const parsedFromQuotedString=this.props.parser(JSON.parse(json));if(isSuccess(parsedFromQuotedString)){return parsedFromQuotedString.value}throw new TypeError("JsonEditor: parse failure")}render(){const classes="perseus-json-editor "+(this.state.valid?"valid":"invalid");return jsxRuntimeExports.jsx("textarea",{className:classes,value:this.state.currentValue,onChange:this.handleChange,onKeyDown:this.handleKeyDown,onBlur:this.handleBlur,disabled:this.props.editingDisabled})}constructor(props){super(props);this.state=this.getInitialState();this.handleBlur=this.handleBlur.bind(this);this.handleChange=this.handleChange.bind(this);this.handleKeyDown=this.handleKeyDown.bind(this);}}
 
-const SectionControlButton=({icon,onClick,title,disabled})=>{return jsxRuntimeExports.jsx(IconButton,{icon:icon,disabled:disabled,"aria-label":title,style:styles$S.button,size:"xsmall",onClick:onClick})};const styles$S=StyleSheet.create({button:{marginLeft:5}});
+const SectionControlButton=({icon,onClick,title,disabled})=>{return jsxRuntimeExports.jsx(IconButton,{icon:icon,disabled:disabled,"aria-label":title,style:styles$S.button,size:"xsmall",onClick:onClick})};const styles$S=StyleSheet.create({button:{marginInlineStart:5}});
 
 class DragTarget extends React.Component{handleDrop(e){e.stopPropagation();e.preventDefault();this.setState({dragHover:false});this.props.onDrop(e);}handleDragEnd(){this.setState({dragHover:false});}handleDragOver(e){e.preventDefault();}handleDragLeave(){this.setState({dragHover:false});}handleDragEnter(e){this.setState({dragHover:this.props.shouldDragHighlight(e)});}render(){const opacity=this.state.dragHover?{opacity:.3}:{};const{shouldDragHighlight,...forwardProps}=this.props;return jsxRuntimeExports.jsx(View,{...forwardProps,style:Object.assign({},this.props.style,opacity),onDrop:this.handleDrop,onDragEnd:this.handleDragEnd,onDragOver:this.handleDragOver,onDragEnter:this.handleDragEnter,onDragLeave:this.handleDragLeave})}constructor(props){super(props);this.state={dragHover:false};this.handleDrop=this.handleDrop.bind(this);this.handleDragEnd=this.handleDragEnd.bind(this);this.handleDragOver=this.handleDragOver.bind(this);this.handleDragLeave=this.handleDragLeave.bind(this);this.handleDragEnter=this.handleDragEnter.bind(this);}}DragTarget.defaultProps={shouldDragHighlight:()=>true};
 
@@ -1483,7 +1483,7 @@ katex.__defineMacro("\\ce",function(context){return chemParse(context.consumeArg
 
 const MATHJAX_ONLY_MACROS={"\\gold":"{#1}","\\inte":"\\int","\\RR":"\\mathbb{R}","\\AA":"A","\\^":"{#1}","\\lcm":"\\operatorname{lcm}","\\gcf":"\\operatorname{gcf}","\\arraystretch":""};function detectTexErrors(content){const errors=[];const ast=PerseusMarkdown.parse(content,{});PerseusMarkdown.traverseContent(ast,node=>{if(node.type==="math"||node.type==="blockMath"){const texContent=preprocessTex(node.content);try{katex.renderToString(texContent,{colorIsTextColor:true,macros:{...MATHJAX_ONLY_MACROS}});}catch(e){errors.push({math:texContent,message:e.message});}}});return errors}
 
-const{HUD: HUD$1}=components;class ArticleEditor extends React.Component{componentDidMount(){this._updateIssues();}componentDidUpdate(prevProps){if(prevProps.json!==this.props.json){this._updateIssues();}}_updateIssues(){const issues=this._sections().map(section=>{const parsed=PerseusMarkdown.parse(section.content??"",{});const linterContext={content:section.content,widgets:section.widgets,stack:[]};const sectionIssues=PerseusLinter.runLinter(parsed,linterContext,false)?.map(linterWarning=>{if(linterWarning.rule==="inaccessible-widget"){return WARNINGS.inaccessibleWidget(linterWarning.metadata?.widgetType??"unknown",linterWarning.metadata?.widgetId??"unknown")}return WARNINGS.genericLinterWarning(linterWarning.rule,linterWarning.message,linterWarning.severity)})??[];const texErrors=detectTexErrors(section.content??"");const texIssues=texErrors.map((error,index)=>WARNINGS.texError(error.math,error.message,index));return [...texIssues,...sectionIssues]});this.setState({issues});}_previewDataForSection(section,sectionIndex){const editor=this.refs[`editor${sectionIndex}`];return {article:section,apiOptions:this._apiOptionsForPreview(),linterContext:{contentType:"article",highlightLint:this.state.highlightLint},legacyPerseusLint:editor?.getSaveWarnings()??[]}}_apiOptionsForPreview(){return {...ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true}}_sections(){const json=this.props.json;return json instanceof Array?json:[json]}_renderEditor(){const{imageUploader,sectionImageUploadGenerator}=this.props;const apiOptions={...ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true};const sections=this._sections();const editingDisabled=this.props.apiOptions?.editingDisabled??false;const isMobile=this._isMobilePreview();return jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[sections.map((section,i)=>{return [jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("fieldset",{disabled:editingDisabled,children:[jsxRuntimeExports.jsx(IssuesPanel,{issues:this.state.issues[i]}),jsxRuntimeExports.jsxs("div",{className:"pod-title",children:["Section ",i+1,jsxRuntimeExports.jsxs("div",{style:{display:"inline-block",float:"right"},children:[sectionImageUploadGenerator(i),jsxRuntimeExports.jsx(SectionControlButton,{icon:plusIcon,disabled:editingDisabled,onClick:()=>{this._handleAddSectionAfter(i);},title:"Add a new section after this one"}),i+1<sections.length&&jsxRuntimeExports.jsx(SectionControlButton,{icon:arrowCircleDownIcon,disabled:editingDisabled,onClick:()=>{this._handleMoveSectionLater(i);},title:"Move this section down"}),i>0&&jsxRuntimeExports.jsx(SectionControlButton,{icon:arrowCircleUpIcon,disabled:editingDisabled,onClick:()=>{this._handleMoveSectionEarlier(i);},title:"Move this section up"}),jsxRuntimeExports.jsx(SectionControlButton,{icon:trashIcon,disabled:editingDisabled,onClick:()=>{const msg="Are you sure you "+"want to delete section "+(i+1)+"?";if(confirm(msg)){this._handleRemoveSection(i);}},title:"Delete this section"})]})]}),jsxRuntimeExports.jsx(Editor,{...section,apiOptions:apiOptions,imageUploader:imageUploader,onChange:newProps=>this._handleEditorChange(i,newProps),placeholder:"Type your section text here...",ref:"editor"+i})]})}),jsxRuntimeExports.jsx("div",{className:"editor-preview",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.screen,nochrome:true,children:jsxRuntimeExports.jsx(PreviewWithIframe,{isMobile:isMobile,seamless:true,url:this.props.previewURL,content:{type:"article-section",data:this._previewDataForSection(section,i)}},`${String(i)}-${this.props.screen}`)})})]},i)]}),this._renderAddSection(editingDisabled),this._renderLinterHUD()]})}_renderAddSection(editingDisabled){return jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(Button,{startIcon:plusIcon,disabled:editingDisabled,kind:"tertiary","aria-label":"Add a section",onClick:()=>{this._handleAddSectionAfter(this._sections().length-1);},children:"Add a section"})})})}_renderLinterHUD(){return jsxRuntimeExports.jsx(HUD$1,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})}_renderPreviewMode(){return jsxRuntimeExports.jsx("div",{className:"standalone-preview",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.screen,nochrome:false,children:jsxRuntimeExports.jsx(PreviewWithIframe,{isMobile:this._isMobilePreview(),seamless:false,url:this.props.previewURL,content:{type:"article-all",data:{article:this._sections(),apiOptions:this._apiOptionsForPreview()}}},`all-${this.props.screen}`)})})}_isMobilePreview(){return this.props.screen==="phone"||this.props.screen==="tablet"}_handleMoveSectionEarlier(i){if(i===0){return}const sections=[...this._sections()];const section=sections[i];sections.splice(i,1);sections.splice(i-1,0,section);this.props.onChange({json:sections});}_handleMoveSectionLater(i){const sections=[...this._sections()];if(i+1===sections.length){return}const section=sections[i];sections.splice(i,1);sections.splice(i+1,0,section);this.props.onChange({json:sections});}_handleAddSectionAfter(i){const clonedArticle=this.serialize();const sections=clonedArticle instanceof Array?clonedArticle:[clonedArticle];const newSection={content:"",images:{},widgets:i>=0?sections[i].widgets:{}};sections.splice(i+1,0,newSection);this.props.onChange({json:sections});}_handleRemoveSection(i){const sections=[...this._sections()];sections.splice(i,1);this.props.onChange({json:sections});}serialize(){if(this.props.mode==="edit"){return this._sections().map((section,i)=>{return this.refs["editor"+i].serialize()})}if(this.props.mode==="preview"||this.props.mode==="json"){return this.props.json}throw new PerseusError("Could not serialize; mode "+this.props.mode+" not found",Errors.Internal)}getSaveWarnings(){if(this.props.mode!=="edit"){throw new PerseusError("Can only get save warnings in edit mode.",Errors.NotAllowed)}return this._sections().map((section,i)=>{return this.refs["editor"+i].getSaveWarnings()})}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsx(Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{className:"framework-perseus perseus-article-editor",children:[this.props.mode==="edit"&&this._renderEditor(),this.props.mode==="preview"&&this._renderPreviewMode(),this.props.mode==="json"&&jsxRuntimeExports.jsxs("div",{className:"json-editor",children:[jsxRuntimeExports.jsx("div",{className:"json-editor-warning",children:jsxRuntimeExports.jsx("span",{children:"Warning: Editing in this mode can lead to broken articles!"})}),jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,onChange:this._handleJsonChange,value:this.props.json,parser:parseAndMigratePerseusArticle,editingDisabled:editingDisabled})]})]})})}constructor(...args){super(...args),this.state={highlightLint:true,issues:[]},this._handleJsonChange=newJson=>{this.props.onChange({json:newJson});},this._handleEditorChange=(i,newProps)=>{const sections=[...this._sections()];sections[i]={...sections[i],...newProps};this.props.onChange({json:sections});};}}ArticleEditor.defaultProps={json:[{content:"",widgets:{},images:{}}],mode:"edit",screen:"desktop",sectionImageUploadGenerator:()=>jsxRuntimeExports.jsx("span",{})};
+const{HUD: HUD$1}=components;class ArticleEditor extends React.Component{componentDidMount(){this._updateIssues();}componentDidUpdate(prevProps){if(prevProps.json!==this.props.json){this._updateIssues();}}_updateIssues(){const issues=this._sections().map(section=>{const parsed=PerseusMarkdown.parse(section.content??"",{});const linterContext={content:section.content,widgets:section.widgets,stack:[]};const sectionIssues=PerseusLinter.runLinter(parsed,linterContext,false)?.map(linterWarning=>{if(linterWarning.rule==="inaccessible-widget"){return WARNINGS.inaccessibleWidget(linterWarning.metadata?.widgetType??"unknown",linterWarning.metadata?.widgetId??"unknown")}return WARNINGS.genericLinterWarning(linterWarning.rule,linterWarning.message,linterWarning.severity)})??[];const texErrors=detectTexErrors(section.content??"");const texIssues=texErrors.map((error,index)=>WARNINGS.texError(error.math,error.message,index));return [...texIssues,...sectionIssues]});this.setState({issues});}_previewDataForSection(section,sectionIndex){const editor=this.refs[`editor${sectionIndex}`];return {article:section,apiOptions:this._apiOptionsForPreview(),linterContext:{contentType:"article",highlightLint:this.state.highlightLint},legacyPerseusLint:editor?.getSaveWarnings()??[]}}_apiOptionsForPreview(){return {...ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true}}_sections(){const json=this.props.json;return json instanceof Array?json:[json]}_renderEditor(){const{imageUploader,sectionImageUploadGenerator}=this.props;const apiOptions={...ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true};const sections=this._sections();const editingDisabled=this.props.apiOptions?.editingDisabled??false;const isMobile=this._isMobilePreview();return jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[sections.map((section,i)=>{return [jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("fieldset",{disabled:editingDisabled,children:[jsxRuntimeExports.jsx(IssuesPanel,{issues:this.state.issues[i]}),jsxRuntimeExports.jsxs("div",{className:"pod-title",children:["Section ",i+1,jsxRuntimeExports.jsxs("div",{style:{display:"inline-block",float:"inline-end"},children:[sectionImageUploadGenerator(i),jsxRuntimeExports.jsx(SectionControlButton,{icon:plusIcon,disabled:editingDisabled,onClick:()=>{this._handleAddSectionAfter(i);},title:"Add a new section after this one"}),i+1<sections.length&&jsxRuntimeExports.jsx(SectionControlButton,{icon:arrowCircleDownIcon,disabled:editingDisabled,onClick:()=>{this._handleMoveSectionLater(i);},title:"Move this section down"}),i>0&&jsxRuntimeExports.jsx(SectionControlButton,{icon:arrowCircleUpIcon,disabled:editingDisabled,onClick:()=>{this._handleMoveSectionEarlier(i);},title:"Move this section up"}),jsxRuntimeExports.jsx(SectionControlButton,{icon:trashIcon,disabled:editingDisabled,onClick:()=>{const msg="Are you sure you "+"want to delete section "+(i+1)+"?";if(confirm(msg)){this._handleRemoveSection(i);}},title:"Delete this section"})]})]}),jsxRuntimeExports.jsx(Editor,{...section,apiOptions:apiOptions,imageUploader:imageUploader,onChange:newProps=>this._handleEditorChange(i,newProps),placeholder:"Type your section text here...",ref:"editor"+i})]})}),jsxRuntimeExports.jsx("div",{className:"editor-preview",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.screen,nochrome:true,children:jsxRuntimeExports.jsx(PreviewWithIframe,{isMobile:isMobile,seamless:true,url:this.props.previewURL,content:{type:"article-section",data:this._previewDataForSection(section,i)}},`${String(i)}-${this.props.screen}`)})})]},i)]}),this._renderAddSection(editingDisabled),this._renderLinterHUD()]})}_renderAddSection(editingDisabled){return jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(Button,{startIcon:plusIcon,disabled:editingDisabled,kind:"tertiary","aria-label":"Add a section",onClick:()=>{this._handleAddSectionAfter(this._sections().length-1);},children:"Add a section"})})})}_renderLinterHUD(){return jsxRuntimeExports.jsx(HUD$1,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})}_renderPreviewMode(){return jsxRuntimeExports.jsx("div",{className:"standalone-preview",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.screen,nochrome:false,children:jsxRuntimeExports.jsx(PreviewWithIframe,{isMobile:this._isMobilePreview(),seamless:false,url:this.props.previewURL,content:{type:"article-all",data:{article:this._sections(),apiOptions:this._apiOptionsForPreview()}}},`all-${this.props.screen}`)})})}_isMobilePreview(){return this.props.screen==="phone"||this.props.screen==="tablet"}_handleMoveSectionEarlier(i){if(i===0){return}const sections=[...this._sections()];const section=sections[i];sections.splice(i,1);sections.splice(i-1,0,section);this.props.onChange({json:sections});}_handleMoveSectionLater(i){const sections=[...this._sections()];if(i+1===sections.length){return}const section=sections[i];sections.splice(i,1);sections.splice(i+1,0,section);this.props.onChange({json:sections});}_handleAddSectionAfter(i){const clonedArticle=this.serialize();const sections=clonedArticle instanceof Array?clonedArticle:[clonedArticle];const newSection={content:"",images:{},widgets:i>=0?sections[i].widgets:{}};sections.splice(i+1,0,newSection);this.props.onChange({json:sections});}_handleRemoveSection(i){const sections=[...this._sections()];sections.splice(i,1);this.props.onChange({json:sections});}serialize(){if(this.props.mode==="edit"){return this._sections().map((section,i)=>{return this.refs["editor"+i].serialize()})}if(this.props.mode==="preview"||this.props.mode==="json"){return this.props.json}throw new PerseusError("Could not serialize; mode "+this.props.mode+" not found",Errors.Internal)}getSaveWarnings(){if(this.props.mode!=="edit"){throw new PerseusError("Can only get save warnings in edit mode.",Errors.NotAllowed)}return this._sections().map((section,i)=>{return this.refs["editor"+i].getSaveWarnings()})}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsx(Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsxs("div",{className:"framework-perseus perseus-article-editor",children:[this.props.mode==="edit"&&this._renderEditor(),this.props.mode==="preview"&&this._renderPreviewMode(),this.props.mode==="json"&&jsxRuntimeExports.jsxs("div",{className:"json-editor",children:[jsxRuntimeExports.jsx("div",{className:"json-editor-warning",children:jsxRuntimeExports.jsx("span",{children:"Warning: Editing in this mode can lead to broken articles!"})}),jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,onChange:this._handleJsonChange,value:this.props.json,parser:parseAndMigratePerseusArticle,editingDisabled:editingDisabled})]})]})})}constructor(...args){super(...args),this.state={highlightLint:true,issues:[]},this._handleJsonChange=newJson=>{this.props.onChange({json:newJson});},this._handleEditorChange=(i,newProps)=>{const sections=[...this._sections()];sections[i]={...sections[i],...newProps};this.props.onChange({json:sections});};}}ArticleEditor.defaultProps={json:[{content:"",widgets:{},images:{}}],mode:"edit",screen:"desktop",sectionImageUploadGenerator:()=>jsxRuntimeExports.jsx("span",{})};
 
 const iconChevronRight={path:"M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",width:63.034,height:100};const iconCircleArrowDown={path:"M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",width:100,height:100};const iconCircleArrowUp={path:"M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",width:100,height:100};const iconDesktop={path:"M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",width:100,height:86.648};const iconMobilePhone={path:"M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",width:60.013,height:100};const iconTablet={path:"M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",width:81.852,height:100};
 
@@ -1499,7 +1499,7 @@ const{SvgImage: SvgImage$2}=components;const BEFORE$1="before";const AFTER$1="af
 
 const{SvgImage: SvgImage$1}=components;class ImageWidgetDiff extends React.Component{render(){const{before,after}=this.props;const beforeSrc=before?.options?.backgroundImage?.url?before?.options.backgroundImage.url:"";const afterSrc=after?.options?.backgroundImage?.url?after?.options.backgroundImage.url:"";const beforeAlt=before?.options?.alt?before?.options.alt:"";const afterAlt=after?.options?.alt?after?.options.alt:"";return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("div",{className:"diff-row before",children:beforeSrc&&jsxRuntimeExports.jsx("div",{className:classNames({image:true,"image-unchanged":beforeSrc===afterSrc,"image-removed":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:beforeSrc,title:beforeSrc,allowZoom:false,alt:beforeAlt})})}),jsxRuntimeExports.jsx("div",{className:"diff-row after",children:afterSrc&&jsxRuntimeExports.jsx("div",{className:classNames({image:true,"image-unchanged":beforeSrc===afterSrc,"image-added":beforeSrc!==afterSrc}),children:jsxRuntimeExports.jsx(SvgImage$1,{src:afterSrc,title:afterSrc,allowZoom:false,alt:afterAlt})})})]})}}
 
-const indentationFromDepth=function(depth){return (depth-1)*20};const BEFORE="before";const AFTER="after";const UNCHANGED$1="unchanged";class DiffSide extends React.Component{render(){const className=classNames(this.props.className,{"diff-row":true,before:this.props.side===BEFORE,after:this.props.side===AFTER});return jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsxs("div",{style:{paddingLeft:indentationFromDepth(this.props.depth)},children:[this.props.showKey&&this.props.propKey+": ",jsxRuntimeExports.jsx("span",{className:"inner-value dark "+this.props.className,children:this.props.value})]})})}}class CollapsedRow extends React.Component{render(){const self=this;return jsxRuntimeExports.jsx("div",{style:{clear:"both"},children:[BEFORE,AFTER].map(function(side){return jsxRuntimeExports.jsx("div",{className:"diff-row collapsed "+side,children:jsxRuntimeExports.jsx("div",{style:{paddingTop:sizing.size_040,paddingBottom:sizing.size_040,paddingLeft:indentationFromDepth(self.props.depth)},children:jsxRuntimeExports.jsx(Button,{size:"small",kind:"secondary",actionType:"neutral",onClick:self.props.onClick,children:"show unmodified"})})},side)})})}}CollapsedRow.defaultProps={depth:0};class DiffEntry extends React.Component{render(){const entry=this.props.entry;const propertyDeleted=entry.status==="removed";const propertyAdded=entry.status==="added";const propertyChanged=entry.status==="changed";const hasChildren=entry.children.length>0;const leftClass=classNames({removed:propertyDeleted||propertyChanged&&!hasChildren,dark:propertyDeleted,"blank-space":propertyAdded});const rightClass=classNames({added:propertyAdded||propertyChanged&&!hasChildren,dark:propertyAdded,"blank-space":propertyDeleted});let shownChildren;if(this.state.expanded){shownChildren=entry.children;}else {shownChildren=_(entry.children).select(function(child){return child.status!==UNCHANGED$1});}let collapsed=shownChildren.length<entry.children.length;if(entry.children.length===shownChildren.length+1){shownChildren=entry.children;collapsed=false;}const self=this;return jsxRuntimeExports.jsxs("div",{children:[entry.key&&jsxRuntimeExports.jsxs("div",{style:{clear:"both"},children:[jsxRuntimeExports.jsx(DiffSide,{side:BEFORE,className:leftClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyAdded,value:entry.before}),jsxRuntimeExports.jsx(DiffSide,{side:AFTER,className:rightClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyDeleted,value:entry.after})]}),shownChildren.map(function(child){return jsxRuntimeExports.jsx(DiffEntry,{depth:self.props.depth+1,entry:child,expanded:self.state.expanded},child.key)}),collapsed&&jsxRuntimeExports.jsx(CollapsedRow,{depth:this.props.depth+1,onClick:this.expand})]})}constructor(...args){super(...args),this.state={expanded:this.props.expanded??false},this.expand=()=>{this.setState({expanded:true});};}}DiffEntry.defaultProps={depth:0};
+const indentationFromDepth=function(depth){return (depth-1)*20};const BEFORE="before";const AFTER="after";const UNCHANGED$1="unchanged";class DiffSide extends React.Component{render(){const className=classNames(this.props.className,{"diff-row":true,before:this.props.side===BEFORE,after:this.props.side===AFTER});return jsxRuntimeExports.jsx("div",{className:className,children:jsxRuntimeExports.jsxs("div",{style:{paddingInlineStart:indentationFromDepth(this.props.depth)},children:[this.props.showKey&&this.props.propKey+": ",jsxRuntimeExports.jsx("span",{className:"inner-value dark "+this.props.className,children:this.props.value})]})})}}class CollapsedRow extends React.Component{render(){const self=this;return jsxRuntimeExports.jsx("div",{style:{clear:"both"},children:[BEFORE,AFTER].map(function(side){return jsxRuntimeExports.jsx("div",{className:"diff-row collapsed "+side,children:jsxRuntimeExports.jsx("div",{style:{paddingBlockStart:sizing.size_040,paddingBlockEnd:sizing.size_040,paddingInlineStart:indentationFromDepth(self.props.depth)},children:jsxRuntimeExports.jsx(Button,{size:"small",kind:"secondary",actionType:"neutral",onClick:self.props.onClick,children:"show unmodified"})})},side)})})}}CollapsedRow.defaultProps={depth:0};class DiffEntry extends React.Component{render(){const entry=this.props.entry;const propertyDeleted=entry.status==="removed";const propertyAdded=entry.status==="added";const propertyChanged=entry.status==="changed";const hasChildren=entry.children.length>0;const leftClass=classNames({removed:propertyDeleted||propertyChanged&&!hasChildren,dark:propertyDeleted,"blank-space":propertyAdded});const rightClass=classNames({added:propertyAdded||propertyChanged&&!hasChildren,dark:propertyAdded,"blank-space":propertyDeleted});let shownChildren;if(this.state.expanded){shownChildren=entry.children;}else {shownChildren=_(entry.children).select(function(child){return child.status!==UNCHANGED$1});}let collapsed=shownChildren.length<entry.children.length;if(entry.children.length===shownChildren.length+1){shownChildren=entry.children;collapsed=false;}const self=this;return jsxRuntimeExports.jsxs("div",{children:[entry.key&&jsxRuntimeExports.jsxs("div",{style:{clear:"both"},children:[jsxRuntimeExports.jsx(DiffSide,{side:BEFORE,className:leftClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyAdded,value:entry.before}),jsxRuntimeExports.jsx(DiffSide,{side:AFTER,className:rightClass,depth:this.props.depth,propKey:entry.key,showKey:!propertyDeleted,value:entry.after})]}),shownChildren.map(function(child){return jsxRuntimeExports.jsx(DiffEntry,{depth:self.props.depth+1,entry:child,expanded:self.state.expanded},child.key)}),collapsed&&jsxRuntimeExports.jsx(CollapsedRow,{depth:this.props.depth+1,onClick:this.expand})]})}constructor(...args){super(...args),this.state={expanded:this.props.expanded??false},this.expand=()=>{this.setState({expanded:true});};}}DiffEntry.defaultProps={depth:0};
 
 const UNCHANGED="unchanged";const CHANGED="changed";const ADDED="added";const REMOVED="removed";const valueEntry=function(before,after,key){let status;if(before===after){status=UNCHANGED;}else if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {status=CHANGED;}return {after:JSON.stringify(after),before:JSON.stringify(before),children:[],key:key,status:status}};const objectEntry=function(before,after,key){const beforeKeys=_.isObject(before)?_(before).keys():[];const afterKeys=_.isObject(after)?_(after).keys():[];const keys=_.union(beforeKeys,afterKeys);const children=keys.map(function(key){return performDiff((before||{})[key],(after||{})[key],key)});let status;if(before===undefined){status=ADDED;}else if(after===undefined){status=REMOVED;}else {const changed=_.any(children,function(child){return child.status!==UNCHANGED});status=changed?CHANGED:UNCHANGED;}return {after:"",before:"",children:children,key:key,status:status}};const performDiff=function(before,after,key){if(typeof before==="object"||typeof after==="object"){return objectEntry(before,after,key)}return valueEntry(before,after,key)};
 
@@ -1525,11 +1525,11 @@ function buildDeviceApiOptions(inputs){return {...ApiOptions.defaults,...inputs.
 
 function lintRenderer(content,widgets){const parsed=PerseusMarkdown.parse(content,{});const linterContext={content,widgets,stack:[]};const linterIssues=(PerseusLinter.runLinter(parsed,linterContext,false)??[]).map(warning=>{if(warning.rule==="inaccessible-widget"){return WARNINGS.inaccessibleWidget(warning.metadata?.widgetType??"unknown",warning.metadata?.widgetId??"unknown")}return WARNINGS.genericLinterWarning(warning.rule,warning.message,warning.severity)});const texIssues=detectTexErrors(content).map((error,i)=>WARNINGS.texError(error.math,error.message,i));return [...linterIssues,...texIssues]}function gatherLinterIssues(question,hints,hostIssues){const questionIssues=lintRenderer(question?.content??"",question?.widgets);const hintIssues=hints.flatMap((hint,i)=>lintRenderer(hint.content??"",hint.widgets??undefined).map(issue=>({...issue,id:`hint-${i+1}-${issue.id}`,instanceId:`hint-${i+1}-${getIssueKey(issue)}`,message:`Hint ${i+1}: ${issue.message}`})));return [...hostIssues??[],...questionIssues,...hintIssues]}
 
-const{HUD}=components;class EditorPage extends React.Component{componentDidMount(){this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});}getSnapshotBeforeUpdate(prevProps,prevState){if(!prevProps.jsonMode&&this.props.jsonMode){return {...this.itemEditor.current?.serialize()??{},hints:this.hintsEditor.current?.serialize()}}return null}componentDidUpdate(previousProps,prevState,snapshot){if(snapshot){this.setState({json:snapshot});return}if(!_.isEqual(previousProps.question,this.props.question)||!_.isEqual(previousProps.answerArea,this.props.answerArea)||!_.isEqual(previousProps.hints,this.props.hints)){this.syncJsonStateFromProps();}const questionOrHintsChanged=previousProps.question?.content!==this.props.question?.content||previousProps.question?.widgets!==this.props.question?.widgets||!_.isEqual(previousProps.hints,this.props.hints);if(questionOrHintsChanged){this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});}}syncJsonStateFromProps(){this.setState({json:{question:this.props.question,answerArea:this.props.answerArea,hints:this.props.hints}});}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(){if(this.props.jsonMode){return this.state.json}invariant(this.itemEditor.current,"cannot serialize EditorPage without ItemEditor");invariant(this.hintsEditor.current,"cannot serialize EditorPage without HintsEditor");return {...this.itemEditor.current.serialize(),hints:this.hintsEditor.current.serialize()}}render(){let className="framework-perseus";const editingDisabled=this.props.apiOptions?.editingDisabled??false;const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions=this.deriveDeviceApiOptions({apiOptions:this.props.apiOptions,touch});const showEditor=!this.props.developerMode||!this.props.jsonMode;if(deviceBasedApiOptions.isMobile){className+=" "+ClassNames.MOBILE;}return jsxRuntimeExports.jsx(Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsx(ItemEditorContext.Provider,{value:{question:this.props.question,onEditorChange:this.handleEditorChange},children:jsxRuntimeExports.jsxs("div",{id:"perseus",className:className,children:[jsxRuntimeExports.jsxs("div",{style:{marginBottom:10},children:[this.props.developerMode&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Developer JSON Mode:"," ",jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.jsonMode,disabled:this.props.apiOptions?.editingDisabled,onChange:this.toggleJsonMode})]})," "]}),!this.props.jsonMode&&jsxRuntimeExports.jsx(ViewportResizer,{deviceType:this.props.previewDevice,onViewportSizeChanged:this.props.onPreviewDeviceChange}),!this.props.jsonMode&&jsxRuntimeExports.jsx(HUD,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})]}),this.props.developerMode&&this.props.jsonMode&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,value:this.state.json,parser:parseAndMigratePerseusItem,onChange:this.changeJSON,editingDisabled:editingDisabled})}),jsxRuntimeExports.jsxs(A11yContext.Provider,{value:createA11yContextValue({setIssueHighlight:this.setIssueHighlight,a11yScanningEnabled:this.state.a11yScanningEnabled,setA11yScanningEnabled:this.setA11yScanningEnabled,highlightInstanceIds:this.state.highlightInstanceIds,onA11yReport:this.handleA11yReport,axeCoreIssues:this.state.axeCoreIssues}),children:[showEditor&&jsxRuntimeExports.jsx("div",{className:"perseus-editor-table",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(IssuesPanel,{issues:this.state.issues})})})}),showEditor&&jsxRuntimeExports.jsx(ItemEditor,{ref:this.itemEditor,itemId:this.props.itemId,question:this.props.question,answerArea:this.props.answerArea,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,additionalTemplates:this.props.additionalTemplates,highlightLint:this.state.highlightLint,problemNum:this.props.problemNum})]}),showEditor&&jsxRuntimeExports.jsx(CombinedHintsEditor,{ref:this.hintsEditor,itemId:this.props.itemId,hints:this.props.hints,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,highlightLint:this.state.highlightLint,widgetIsOpen:this.state.widgetsAreOpen})]})})})}constructor(props){super(props),this.itemEditor=React.createRef(),this.hintsEditor=React.createRef(),this.deriveDeviceApiOptions=createDeviceApiOptionsDeriver(),this.setIssueHighlight=(instanceId,highlighted)=>{this.setState(prevState=>{const current=prevState.highlightInstanceIds;if(highlighted===current.includes(instanceId)){return null}return {highlightInstanceIds:highlighted?[...current,instanceId]:current.filter(id=>id!==instanceId)}});},this.handleA11yReport=report=>{this.setState({axeCoreIssues:report?[...report.violations,...report.needsReview]:[]});},this.setA11yScanningEnabled=enabled=>{this.setState({a11yScanningEnabled:enabled});},this.toggleJsonMode=()=>{this.setState({json:this.serialize()},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=toChange=>{const newProps=_(this.props).pick("question","hints","answerArea");_(newProps).extend(toChange);this.props.onChange(newProps);},this.handleEditorChange=newProps=>{this.handleChange({question:{...this.props.question,...newProps}});},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:_.pick(this.props,"question","answerArea","hints"),highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true,issues:[],axeCoreIssues:[],a11yScanningEnabled:false,highlightInstanceIds:[]};}}EditorPage.defaultProps={answerArea:getDefaultAnswerArea(),developerMode:false,hints:[],jsonMode:false,onChange:()=>{}};
+const{HUD}=components;class EditorPage extends React.Component{componentDidMount(){this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});}getSnapshotBeforeUpdate(prevProps,prevState){if(!prevProps.jsonMode&&this.props.jsonMode){return {...this.itemEditor.current?.serialize()??{},hints:this.hintsEditor.current?.serialize()}}return null}componentDidUpdate(previousProps,prevState,snapshot){if(snapshot){this.setState({json:snapshot});return}if(!_.isEqual(previousProps.question,this.props.question)||!_.isEqual(previousProps.answerArea,this.props.answerArea)||!_.isEqual(previousProps.hints,this.props.hints)){this.syncJsonStateFromProps();}const questionOrHintsChanged=previousProps.question?.content!==this.props.question?.content||previousProps.question?.widgets!==this.props.question?.widgets||!_.isEqual(previousProps.hints,this.props.hints);if(questionOrHintsChanged){this.setState({issues:gatherLinterIssues(this.props.question,this.props.hints,this.props.issues)});}}syncJsonStateFromProps(){this.setState({json:{question:this.props.question,answerArea:this.props.answerArea,hints:this.props.hints}});}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(){if(this.props.jsonMode){return this.state.json}invariant(this.itemEditor.current,"cannot serialize EditorPage without ItemEditor");invariant(this.hintsEditor.current,"cannot serialize EditorPage without HintsEditor");return {...this.itemEditor.current.serialize(),hints:this.hintsEditor.current.serialize()}}render(){let className="framework-perseus";const editingDisabled=this.props.apiOptions?.editingDisabled??false;const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions=this.deriveDeviceApiOptions({apiOptions:this.props.apiOptions,touch});const showEditor=!this.props.developerMode||!this.props.jsonMode;if(deviceBasedApiOptions.isMobile){className+=" "+ClassNames.MOBILE;}return jsxRuntimeExports.jsx(Dependencies.DependenciesContext.Provider,{value:this.props.dependencies,children:jsxRuntimeExports.jsx(ItemEditorContext.Provider,{value:{question:this.props.question,onEditorChange:this.handleEditorChange},children:jsxRuntimeExports.jsxs("div",{id:"perseus",className:className,children:[jsxRuntimeExports.jsxs("div",{style:{marginBlockEnd:10},children:[this.props.developerMode&&jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Developer JSON Mode:"," ",jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.jsonMode,disabled:this.props.apiOptions?.editingDisabled,onChange:this.toggleJsonMode})]})," "]}),!this.props.jsonMode&&jsxRuntimeExports.jsx(ViewportResizer,{deviceType:this.props.previewDevice,onViewportSizeChanged:this.props.onPreviewDeviceChange}),!this.props.jsonMode&&jsxRuntimeExports.jsx(HUD,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})]}),this.props.developerMode&&this.props.jsonMode&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(JsonEditor,{multiLine:true,value:this.state.json,parser:parseAndMigratePerseusItem,onChange:this.changeJSON,editingDisabled:editingDisabled})}),jsxRuntimeExports.jsxs(A11yContext.Provider,{value:createA11yContextValue({setIssueHighlight:this.setIssueHighlight,a11yScanningEnabled:this.state.a11yScanningEnabled,setA11yScanningEnabled:this.setA11yScanningEnabled,highlightInstanceIds:this.state.highlightInstanceIds,onA11yReport:this.handleA11yReport,axeCoreIssues:this.state.axeCoreIssues}),children:[showEditor&&jsxRuntimeExports.jsx("div",{className:"perseus-editor-table",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(IssuesPanel,{issues:this.state.issues})})})}),showEditor&&jsxRuntimeExports.jsx(ItemEditor,{ref:this.itemEditor,itemId:this.props.itemId,question:this.props.question,answerArea:this.props.answerArea,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,additionalTemplates:this.props.additionalTemplates,highlightLint:this.state.highlightLint,problemNum:this.props.problemNum})]}),showEditor&&jsxRuntimeExports.jsx(CombinedHintsEditor,{ref:this.hintsEditor,itemId:this.props.itemId,hints:this.props.hints,imageUploader:this.props.imageUploader,onChange:this.handleChange,deviceType:this.props.previewDevice,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL,highlightLint:this.state.highlightLint,widgetIsOpen:this.state.widgetsAreOpen})]})})})}constructor(props){super(props),this.itemEditor=React.createRef(),this.hintsEditor=React.createRef(),this.deriveDeviceApiOptions=createDeviceApiOptionsDeriver(),this.setIssueHighlight=(instanceId,highlighted)=>{this.setState(prevState=>{const current=prevState.highlightInstanceIds;if(highlighted===current.includes(instanceId)){return null}return {highlightInstanceIds:highlighted?[...current,instanceId]:current.filter(id=>id!==instanceId)}});},this.handleA11yReport=report=>{this.setState({axeCoreIssues:report?[...report.violations,...report.needsReview]:[]});},this.setA11yScanningEnabled=enabled=>{this.setState({a11yScanningEnabled:enabled});},this.toggleJsonMode=()=>{this.setState({json:this.serialize()},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=toChange=>{const newProps=_(this.props).pick("question","hints","answerArea");_(newProps).extend(toChange);this.props.onChange(newProps);},this.handleEditorChange=newProps=>{this.handleChange({question:{...this.props.question,...newProps}});},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:_.pick(this.props,"question","answerArea","hints"),highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true,issues:[],axeCoreIssues:[],a11yScanningEnabled:false,highlightInstanceIds:[]};}}EditorPage.defaultProps={answerArea:getDefaultAnswerArea(),developerMode:false,hints:[],jsonMode:false,onChange:()=>{}};
 
 let nextIframeID=0;const requestIframeData={};const updateIframeHeight={};window.iframeDataStore={};window.addEventListener("message",event=>{if(typeof event.data==="string"){const callback=requestIframeData[event.data];if(callback){callback();}}else if(event.data.id){if(event.data.height!==undefined){updateIframeHeight[event.data.id](event.data.height);}else if(event.data.lintWarnings){Log.log("LINTER REPORT",{lintWarnings:JSON.stringify(event.data.lintWarnings)});}}});class IframeContentRenderer extends React.Component{componentDidMount(){this._isMounted=true;this.iframeID=nextIframeID;nextIframeID++;this._prepareFrame();requestIframeData[this.iframeID]=()=>{this.sendNewData(this._lastData);};updateIframeHeight[this.iframeID]=height=>{this._lastHeight=height;if(this._isMounted&&this.props.seamless&&this.container.current){this.container.current.style.height=height+"px";}};}shouldComponentUpdate(nextProps){return nextProps.datasetValue!==this.props.datasetValue||nextProps.seamless!==this.props.seamless}componentDidUpdate(prevProps){if(this.container.current){if(!this.props.seamless){this.container.current.style.height="100%";}else {this.container.current.style.height=this._lastHeight+"px";}}if(prevProps.datasetValue!==this.props.datasetValue){this._prepareFrame();}}componentWillUnmount(){requestIframeData[this.iframeID]=null;updateIframeHeight[this.iframeID]=null;this._isMounted=false;}_prepareFrame(){if(this._frame){this.container.current?.removeChild(this._frame);}const frame=document.createElement("iframe");frame.style.width="100%";frame.style.height="100%";frame.dataset.name="content-preview";frame.src=this.props.url;frame.onload=()=>{const iframeDoc=frame.contentDocument||frame.contentWindow?.document;if(iframeDoc){const axeCoreScriptElement=iframeDoc.createElement("script");axeCoreScriptElement.src="https://unpkg.com/axe-core@4.11.0/axe.js";iframeDoc.body.appendChild(axeCoreScriptElement);}else {console.warn("Unable to add axe-core to iframe document");}};if(this.props.datasetKey){frame.dataset[this.props.datasetKey]=this.props.datasetValue;}frame.dataset.id=String(this.iframeID);if(this.props.seamless){frame.dataset.lintGutter="true";}this.container.current?.appendChild(frame);this._frame=frame;}sendNewData(data){const frame=this._frame;if(this._isMounted&&data&&frame?.contentWindow){this._lastData=data;window.iframeDataStore[this.iframeID]=data;frame.contentWindow.postMessage(this.iframeID,"*");}}render(){return jsxRuntimeExports.jsx("div",{ref:this.container,style:{width:"100%",height:"100%"}})}constructor(...args){super(...args),this.container=React.createRef();}}
 
-function ContentPreview({question,apiOptions,seamless,linterContext,legacyPerseusLint,previewDevice,reviewMode}){const i18n=usePerseusI18n();const isMobile=previewDevice!=="desktop";const className=isMobile?"perseus-mobile":"";return jsxRuntimeExports.jsx(View,{className:`framework-perseus ${className}`,style:[styles$O.container,!seamless?styles$O.gutter:undefined],children:jsxRuntimeExports.jsx(StatefulKeypadContextProvider,{children:jsxRuntimeExports.jsx(KeypadContext.Consumer,{children:({setKeypadActive,keypadElement,setKeypadElement})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(UserInputManager,{widgets:question?.widgets||{},problemNum:0,children:({userInput,handleUserInput,initializeUserInput})=>jsxRuntimeExports.jsx(Renderer,{strings:i18n.strings,apiOptions:{...apiOptions,isMobile},keypadElement:keypadElement,linterContext:linterContext,legacyPerseusLint:legacyPerseusLint,userInput:userInput,handleUserInput:handleUserInput,initializeUserInput:initializeUserInput,reviewMode:reviewMode,...question})}),jsxRuntimeExports.jsx(MobileKeypad,{onAnalyticsEvent:()=>Promise.resolve(),onDismiss:()=>setKeypadActive(false),onElementMounted:setKeypadElement})]})})})})}const styles$O=StyleSheet.create({container:{padding:spacing.xxxSmall_4,containerType:"inline-size",containerName:"perseus-root"},gutter:{marginRight:lintGutterWidth}});
+function ContentPreview({question,apiOptions,seamless,linterContext,legacyPerseusLint,previewDevice,reviewMode}){const i18n=usePerseusI18n();const isMobile=previewDevice!=="desktop";const className=isMobile?"perseus-mobile":"";return jsxRuntimeExports.jsx(View,{className:`framework-perseus ${className}`,style:[styles$O.container,!seamless?styles$O.gutter:undefined],children:jsxRuntimeExports.jsx(StatefulKeypadContextProvider,{children:jsxRuntimeExports.jsx(KeypadContext.Consumer,{children:({setKeypadActive,keypadElement,setKeypadElement})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(UserInputManager,{widgets:question?.widgets||{},problemNum:0,children:({userInput,handleUserInput,initializeUserInput})=>jsxRuntimeExports.jsx(Renderer,{strings:i18n.strings,apiOptions:{...apiOptions,isMobile},keypadElement:keypadElement,linterContext:linterContext,legacyPerseusLint:legacyPerseusLint,userInput:userInput,handleUserInput:handleUserInput,initializeUserInput:initializeUserInput,reviewMode:reviewMode,...question})}),jsxRuntimeExports.jsx(MobileKeypad,{onAnalyticsEvent:()=>Promise.resolve(),onDismiss:()=>setKeypadActive(false),onElementMounted:setKeypadElement})]})})})})}const styles$O=StyleSheet.create({container:{padding:spacing.xxxSmall_4,containerType:"inline-size",containerName:"perseus-root"},gutter:{marginInlineEnd:lintGutterWidth}});
 
 var issuesList = {"axe-core":{"user-fixable":["aria-input-field-name","aria-meter-name","aria-toggle-field-name","image-alt","input-image-alt","label","link-name","list","role-img-alt","select-name","summary-name","svg-img-alt","video-caption"]}};
 
@@ -1537,34 +1537,36 @@ 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_xyIPJvSm","paddedY":"perseus_6B-8VzAW","answerOption":"perseus_SHUAvRqo","buttonRow":"perseus_yBc0LCPb","buttonSets":"perseus_h0zeeqNR","answersSubtitle":"perseus_xbG0OWq1","answersGroup":"perseus_XphVr0Eg","answersList":"perseus_-z--eTDm","deleteButton":"perseus_UuEVVICK"};
+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"};
 
 const{ButtonGroup: ButtonGroup$7}=components;const buttonSetsList=["basic","trig","prealgebra","logarithms","scientific","basic relations","advanced relations"];class ExpressionEditor extends React.Component{serialize(){const{answerForms,buttonSets,functions,times,visibleLabel,ariaLabel}=this.props;return {answerForms,buttonSets,functions,times,visibleLabel,ariaLabel,extraKeys:deriveExtraKeys(this.props)}}updateAnswerForm(index,answerFormProps){const answerForms=this.props.answerForms.slice();answerForms[index]=answerFormProps;const{extraKeys,...restProps}=this.props;const derivedExtraKeys=deriveExtraKeys({...restProps,answerForms});this.props.onChange({answerForms,extraKeys:derivedExtraKeys});}changeSimplify(index,simplify){const answerForm={...this.props.answerForms[index],simplify};this.updateAnswerForm(index,answerForm);}changeForm(index,form){const answerForm={...this.props.answerForms[index],form};this.updateAnswerForm(index,answerForm);}changeConsidered(index,considered){const answerForm={...this.props.answerForms[index],considered};this.updateAnswerForm(index,answerForm);}changeTimes(times){this.props.onChange({times:times});}render(){const editingDisabled=this.props.apiOptions.editingDisabled??false;const answerOptions=this.props.answerForms.map((ans,index)=>{const expressionProps={times:this.props.times,functions:this.props.functions,buttonSets:this.props.buttonSets,buttonsVisible:"focused",userInput:ans.value,handleUserInput:input=>this.changeExpressionWidget(index,input),trackInteraction:()=>{},widgetId:this.props.widgetId+"-"+ans.key,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel};return jsxRuntimeExports.jsx(AnswerOption,{considered:ans.considered,editingDisabled:editingDisabled,expressionProps:expressionProps,form:ans.form,simplify:ans.simplify,onDelete:()=>this.handleRemoveForm(index),onChangeSimplify:simplify=>this.changeSimplify(index,simplify),onChangeForm:form=>this.changeForm(index,form),onChangeConsidered:considered=>this.changeConsidered(index,considered)},ans.key)});const buttonSetChoices=buttonSetsList.map(name=>{const isBasic=name==="basic";const checked=this.props.buttonSets.includes(name)||isBasic;return jsxRuntimeExports.jsx(Checkbox$1,{label:name,checked:checked,disabled:isBasic,onChange:()=>this.handleButtonSet(name)},name)});buttonSetChoices.unshift(jsxRuntimeExports.jsx(Checkbox$1,{label:"show ÷ button",checked:this.props.buttonSets.includes("basic+div"),onChange:this.handleToggleDiv},"show ÷ button"));return jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsx(Heading$1,{size:"medium",children:"Global Options"}),jsxRuntimeExports.jsx("div",{className:styles$N.paddedY,children:jsxRuntimeExports.jsx(LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Visible label",jsxRuntimeExports.jsx(InfoTip,{children:"Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."})]}),value:this.props.visibleLabel||"",onChange:this.handleVisibleLabel})}),jsxRuntimeExports.jsx("div",{className:styles$N.paddedY,children:jsxRuntimeExports.jsx(LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Aria label",jsxRuntimeExports.jsxs(InfoTip,{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 writting 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."})]})]}),value:this.props.ariaLabel||"",onChange:this.handleAriaLabel})}),jsxRuntimeExports.jsx("div",{className:styles$N.paddedY,children:jsxRuntimeExports.jsx(LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Function variables",jsxRuntimeExports.jsx(InfoTip,{children:'Single-letter variables listed here will be interpreted as functions. This let us know that f(x) means "f of x" and not "f times x".'})]}),value:this.state.functionsInternal,onChange:this.handleFunctions})}),jsxRuntimeExports.jsx("div",{className:styles$N.paddedY,children:jsxRuntimeExports.jsx(Checkbox$1,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Use × instead of ⋅ for multiplication",jsxRuntimeExports.jsx(InfoTip,{children:"For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."})]}),checked:this.props.times,onChange:newCheckedState=>{this.changeTimes(newCheckedState);}})}),jsxRuntimeExports.jsxs("div",{className:styles$N.paddedY,children:[jsxRuntimeExports.jsx(Heading$1,{size:"small",className:styles$N.buttonSets,children:"Button Sets"}),buttonSetChoices]}),jsxRuntimeExports.jsx(Heading$1,{size:"medium",children:"Answers"}),jsxRuntimeExports.jsx(BodyText,{size:"small",className:styles$N.answersSubtitle,children:"student responses area matched against these from top to bottom"}),jsxRuntimeExports.jsxs(View,{className:styles$N.answersGroup,children:[jsxRuntimeExports.jsx(View,{className:styles$N.answersList,children:answerOptions}),jsxRuntimeExports.jsx(Button,{size:"small",disabled:editingDisabled,onClick:this.newAnswer,children:"Add new answer"})]})]})}constructor(props){super(props),this.getSaveWarnings=()=>{const issues=[];if(this.props.answerForms.length===0){issues.push("No answers specified");}else {const hasCorrect=this.props.answerForms.some(form=>{return form.considered==="correct"});if(!hasCorrect){issues.push("No correct answer specified");}_(this.props.answerForms).each((form,ix)=>{if(this.props.value===""){issues.push(`Answer ${ix+1} is empty`);}else {const expression=KAS.parse(form.value,{functions:this.props.functions});if(!expression.parsed){issues.push(`Couldn't parse ${form.value}`);}else if(form.simplify&&!expression.expr.isSimplified()){issues.push(`${form.value} isn't simplified, but is required" +
                             " to be`);}}});}return issues},this.newAnswer=()=>{const answerForms=this.props.answerForms.slice();const newKey=crypto.randomUUID();const newAnswerForm={considered:"correct",form:false,key:`${newKey}`,simplify:false,value:""};answerForms.push(newAnswerForm);this.props.onChange({answerForms});},this.handleRemoveForm=i=>{const updatedAnswerForms=this.props.answerForms.slice();updatedAnswerForms.splice(i,1);this.props.onChange({answerForms:updatedAnswerForms});},this.handleButtonSet=changingName=>{const buttonSetNames=buttonSetsList;const buttonSets=buttonSetNames.filter(set=>{return this.props.buttonSets.includes(set)!==(set===changingName)});this.props.onChange({buttonSets});},this.handleToggleDiv=()=>{let keep;let remove;if(this.props.buttonSets.includes("basic+div")){keep="basic";remove="basic+div";}else {keep="basic+div";remove="basic";}const buttonSets=this.props.buttonSets.filter(set=>set!==remove).concat(keep);this.props.onChange({buttonSets});},this.handleTexInsert=str=>{this.refs.expression.insert(str);},this.handleFunctions=value=>{this.setState({functionsInternal:value});const newProps={};newProps.functions=value.split(/[ ,]+/).filter(isTruthy);this.props.onChange(newProps);},this.handleVisibleLabel=visibleLabel=>{this.props.onChange({visibleLabel});},this.handleAriaLabel=ariaLabel=>{this.props.onChange({ariaLabel});},this.changeExpressionWidget=(index,input)=>{const answerForm={...this.props.answerForms[index],value:input};this.updateAnswerForm(index,answerForm);};this.state={functionsInternal:this.props.functions.join(" ")};}}ExpressionEditor.widgetName="expression";ExpressionEditor.defaultProps={...expressionLogic.defaultWidgetOptions};const findNextIn=function(arr,val){let ix=arr.indexOf(val);ix=(ix+1)%arr.length;return arr[ix]};class AnswerOption extends React.Component{render(){const{editingDisabled}=this.props;const removeButton=this.state.deleteFocused?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Button,{size:"small",disabled:editingDisabled,onClick:this.handleImSure,actionType:"destructive",children:"I'm sure!"}),jsxRuntimeExports.jsx(Button,{size:"small",disabled:editingDisabled,onClick:this.handleCancelDelete,kind:"secondary",children:"Cancel"})]}):jsxRuntimeExports.jsx(Button,{size:"small",disabled:editingDisabled,onClick:this.handleDelete,actionType:"destructive",kind:"tertiary",className:styles$N.deleteButton,children:"Delete"});return jsxRuntimeExports.jsxs("div",{className:styles$N.answerOption,children:[jsxRuntimeExports.jsx(ButtonGroup$7,{onChange:this.toggleConsidered,allowEmpty:false,disabled:editingDisabled,value:this.props.considered,selectedButtonStyle:consideredButtonStyles[this.props.considered],buttons:PerseusExpressionAnswerFormConsidered.map(c=>({value:c,content:c,title:`This answer will be considered ${c}`}))}),jsxRuntimeExports.jsx(Expression,{...this.props.expressionProps}),jsxRuntimeExports.jsx("div",{className:`${styles$N.paddedY} ${styles$N.paddedX}`,children:jsxRuntimeExports.jsx(Checkbox$1,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must have the same form.",jsxRuntimeExports.jsx(InfoTip,{children:"The student's answer must be in the same form. Commutativity and excess negative signs are ignored."})]}),checked:this.props.form,onChange:this.props.onChangeForm})}),jsxRuntimeExports.jsx("div",{className:`${styles$N.paddedY} ${styles$N.paddedX}`,children:jsxRuntimeExports.jsx(Checkbox$1,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must be fully expanded and simplified.",jsxRuntimeExports.jsx(InfoTip,{children:'The student\'s answer must be fully expanded and simplified. Answering this equation (x^2+2x+1) with this factored equation (x+1)^2 will render this response "Your answer is not fully expanded and simplified."'})]}),checked:this.props.simplify,onChange:this.props.onChangeSimplify})}),jsxRuntimeExports.jsx("div",{className:`${styles$N.buttonRow} ${styles$N.paddedY}`,children:removeButton})]})}constructor(...args){super(...args),this.state={deleteFocused:false},this.handleImSure=()=>{this.props.onDelete();this.handleCancelDelete();},this.handleCancelDelete=()=>{this.setState({deleteFocused:false});},this.handleDelete=()=>{this.setState({deleteFocused:true});},this.toggleConsidered=()=>{const newVal=findNextIn(PerseusExpressionAnswerFormConsidered,this.props.considered);this.props.onChangeConsidered(newVal);};}}const wbStyles$1=StyleSheet.create({answerStatusWrong:{backgroundColor:semanticColor.core.background.critical.subtle},answerStatusCorrect:{backgroundColor:semanticColor.core.background.success.subtle},answerStatusUngraded:{backgroundColor:semanticColor.core.background.instructive.subtle}});const consideredButtonStyles={wrong:wbStyles$1.answerStatusWrong,correct:wbStyles$1.answerStatusCorrect,ungraded:wbStyles$1.answerStatusUngraded};
 
-class FreeResponseEditor extends React.Component{render(){const editingDisabled=this.props.apiOptions.editingDisabled??false;return jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsx(LabeledField,{label:"Question",field:jsxRuntimeExports.jsx(TextArea,{value:this.props.question,onChange:newValue=>this.props.onChange({question:newValue})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(LabeledField,{label:"Placeholder",field:jsxRuntimeExports.jsx(TextArea,{value:this.props.placeholder,onChange:newValue=>this.props.onChange({placeholder:newValue})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(LabeledField,{label:"Allow unlimited characters",field:jsxRuntimeExports.jsx(Checkbox$1,{checked:this.props.allowUnlimitedCharacters,onChange:val=>this.props.onChange({allowUnlimitedCharacters:val})}),styles:{root:styles$M.labeledInputField}}),!this.props.allowUnlimitedCharacters&&jsxRuntimeExports.jsx(LabeledField,{label:"Character limit",field:jsxRuntimeExports.jsx(TextField,{type:"number",min:1,value:String(this.props.characterLimit),onChange:this.handleUpdateCharacterLimit}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsxs(View,{style:styles$M.criteriaList,tag:"fieldset",children:[jsxRuntimeExports.jsx(BodyText,{tag:"legend",children:"Scoring criteria"}),this.renderCriteriaList(editingDisabled)]}),jsxRuntimeExports.jsx(View,{children:jsxRuntimeExports.jsx(Button,{onClick:this.handleAddCriterion,startIcon:plusCircle,disabled:editingDisabled,children:"Add an item"})})]})]})}constructor(...args){super(...args),this.serialize=()=>{return {allowUnlimitedCharacters:this.props.allowUnlimitedCharacters,characterLimit:this.props.characterLimit,placeholder:this.props.placeholder,question:this.props.question,scoringCriteria:this.props.scoringCriteria}},this.getSaveWarnings=()=>{const warnings=[];if(!this.props.question){warnings.push("The question is empty");}if(this.props.question.match(Util.rWidgetRule)!=null){warnings.push("The question contains a widget");}return warnings},this.handleUpdateCharacterLimit=newValue=>{const val=parseInt(newValue);if(isNaN(val)){return}this.props.onChange({characterLimit:Math.max(1,val)});},this.handleUpdateCriterion=(index,criterion)=>{const newCriteria=this.props.scoringCriteria.map((c,i)=>{if(i===index){return criterion}return c});this.props.onChange({scoringCriteria:newCriteria});},this.handleDeleteCriterion=index=>{this.props.onChange({scoringCriteria:this.props.scoringCriteria.filter((_,i)=>i!==index)});},this.handleAddCriterion=()=>{this.props.onChange({scoringCriteria:[...this.props.scoringCriteria,{text:""}]});},this.renderCriteriaList=editingDisabled=>{const isDeletable=this.props.scoringCriteria.length>1;return this.props.scoringCriteria.map((criterion,index)=>{return jsxRuntimeExports.jsx(CriterionEditor,{criterion:criterion,index:index,isDeletable:isDeletable,editingDisabled:editingDisabled,onChange:this.handleUpdateCriterion,onDelete:this.handleDeleteCriterion},index)})};}}FreeResponseEditor.defaultProps={...freeResponseLogic.defaultWidgetOptions};FreeResponseEditor.widgetName="free-response";const CriterionEditor=function(props){return jsxRuntimeExports.jsxs(View,{style:styles$M.criterionContainer,children:[jsxRuntimeExports.jsx("textarea",{"aria-label":`Criterion ${props.index+1}`,onChange:e=>props.onChange(props.index,{text:e.target.value}),value:props.criterion.text}),props.isDeletable&&jsxRuntimeExports.jsx(View,{style:styles$M.deleteButtonContainer,children:jsxRuntimeExports.jsx(Button,{"aria-label":`Delete criterion ${props.index+1}`,actionType:"destructive",disabled:!props.isDeletable||props.editingDisabled,kind:"tertiary",onClick:()=>props.onDelete(props.index),size:"small",startIcon:trashIcon$1,children:"Delete"})})]})};const styles$M=StyleSheet.create({criteriaList:{gap:spacing.small_12},criterionContainer:{paddingTop:spacing.xSmall_8,paddingBottom:spacing.xSmall_8,borderBottom:`1px solid ${semanticColor.core.border.neutral.subtle}`,":last-child":{borderBottom:"none"}},deleteButtonContainer:{display:"flex",flexDirection:"row",justifyContent:"flex-end"},labeledInputField:{paddingBottom:spacing.large_24}});
+class FreeResponseEditor extends React.Component{render(){const editingDisabled=this.props.apiOptions.editingDisabled??false;return jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsx(LabeledField,{label:"Question",field:jsxRuntimeExports.jsx(TextArea,{value:this.props.question,onChange:newValue=>this.props.onChange({question:newValue})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(LabeledField,{label:"Placeholder",field:jsxRuntimeExports.jsx(TextArea,{value:this.props.placeholder,onChange:newValue=>this.props.onChange({placeholder:newValue})}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsx(LabeledField,{label:"Allow unlimited characters",field:jsxRuntimeExports.jsx(Checkbox$1,{checked:this.props.allowUnlimitedCharacters,onChange:val=>this.props.onChange({allowUnlimitedCharacters:val})}),styles:{root:styles$M.labeledInputField}}),!this.props.allowUnlimitedCharacters&&jsxRuntimeExports.jsx(LabeledField,{label:"Character limit",field:jsxRuntimeExports.jsx(TextField,{type:"number",min:1,value:String(this.props.characterLimit),onChange:this.handleUpdateCharacterLimit}),styles:{root:styles$M.labeledInputField}}),jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsxs(View,{style:styles$M.criteriaList,tag:"fieldset",children:[jsxRuntimeExports.jsx(BodyText,{tag:"legend",children:"Scoring criteria"}),this.renderCriteriaList(editingDisabled)]}),jsxRuntimeExports.jsx(View,{children:jsxRuntimeExports.jsx(Button,{onClick:this.handleAddCriterion,startIcon:plusCircle,disabled:editingDisabled,children:"Add an item"})})]})]})}constructor(...args){super(...args),this.serialize=()=>{return {allowUnlimitedCharacters:this.props.allowUnlimitedCharacters,characterLimit:this.props.characterLimit,placeholder:this.props.placeholder,question:this.props.question,scoringCriteria:this.props.scoringCriteria}},this.getSaveWarnings=()=>{const warnings=[];if(!this.props.question){warnings.push("The question is empty");}if(this.props.question.match(Util.rWidgetRule)!=null){warnings.push("The question contains a widget");}return warnings},this.handleUpdateCharacterLimit=newValue=>{const val=parseInt(newValue);if(isNaN(val)){return}this.props.onChange({characterLimit:Math.max(1,val)});},this.handleUpdateCriterion=(index,criterion)=>{const newCriteria=this.props.scoringCriteria.map((c,i)=>{if(i===index){return criterion}return c});this.props.onChange({scoringCriteria:newCriteria});},this.handleDeleteCriterion=index=>{this.props.onChange({scoringCriteria:this.props.scoringCriteria.filter((_,i)=>i!==index)});},this.handleAddCriterion=()=>{this.props.onChange({scoringCriteria:[...this.props.scoringCriteria,{text:""}]});},this.renderCriteriaList=editingDisabled=>{const isDeletable=this.props.scoringCriteria.length>1;return this.props.scoringCriteria.map((criterion,index)=>{return jsxRuntimeExports.jsx(CriterionEditor,{criterion:criterion,index:index,isDeletable:isDeletable,editingDisabled:editingDisabled,onChange:this.handleUpdateCriterion,onDelete:this.handleDeleteCriterion},index)})};}}FreeResponseEditor.defaultProps={...freeResponseLogic.defaultWidgetOptions};FreeResponseEditor.widgetName="free-response";const CriterionEditor=function(props){return jsxRuntimeExports.jsxs(View,{style:styles$M.criterionContainer,children:[jsxRuntimeExports.jsx("textarea",{"aria-label":`Criterion ${props.index+1}`,onChange:e=>props.onChange(props.index,{text:e.target.value}),value:props.criterion.text}),props.isDeletable&&jsxRuntimeExports.jsx(View,{style:styles$M.deleteButtonContainer,children:jsxRuntimeExports.jsx(Button,{"aria-label":`Delete criterion ${props.index+1}`,actionType:"destructive",disabled:!props.isDeletable||props.editingDisabled,kind:"tertiary",onClick:()=>props.onDelete(props.index),size:"small",startIcon:trashIcon$1,children:"Delete"})})]})};const styles$M=StyleSheet.create({criteriaList:{gap:spacing.small_12},criterionContainer:{paddingBlockStart:spacing.xSmall_8,paddingBlockEnd:spacing.xSmall_8,borderBlockEnd:`1px solid ${semanticColor.core.border.neutral.subtle}`,":last-child":{borderBlockEnd:"none"}},deleteButtonContainer:{display:"flex",flexDirection:"row",justifyContent:"flex-end"},labeledInputField:{paddingBlockEnd:spacing.large_24}});
 
-var styles$L = {"title":"perseus_az1kQinp","input":"perseus_khxW0hEz","hintsTitle":"perseus_UPlDqNry"};
+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})})}
 
@@ -1592,19 +1594,19 @@ const ScrolllessNumberTextField=props=>{const{value,onChange,...restOfProps}=pro
 
 const LARGE_DIMENSION_THRESHOLD=1048576;function ImageScaleInput({backgroundImage,scale,editingDisabled=false,onChange}){const width=backgroundImage.width??0;const height=backgroundImage.height??0;const hasInvalidDimensions=isInvalidDimension(width)||isInvalidDimension(height);function handleScaleChange(newScale){const scaleNum=Number(newScale);if(isNaN(scaleNum)||scaleNum<=0){return}onChange({scale:scaleNum});}function handleScaledWidthChange(newScaledWidth){const newScaledWidthNum=Number(newScaledWidth);if(isNaN(newScaledWidthNum)||newScaledWidthNum<=0){return}if(width===0){return}const newScale=newScaledWidthNum/width;onChange({scale:newScale});}function handleScaledHeightChange(newScaledHeight){const newScaledHeightNum=Number(newScaledHeight);if(isNaN(newScaledHeightNum)||newScaledHeightNum<=0){return}if(height===0){return}const newScale=newScaledHeightNum/height;onChange({scale:newScale});}async function handleResetToOriginalSize(){if(!backgroundImage.url){return}const naturalSize=await Util.getImageSizeModern(backgroundImage.url);const[naturalWidth,naturalHeight]=naturalSize;if(naturalWidth===backgroundImage.width&&naturalHeight===backgroundImage.height){return}onChange({backgroundImage:{...backgroundImage,width:naturalWidth,height:naturalHeight}});}const hasLargeDimensions=width*height>LARGE_DIMENSION_THRESHOLD;return jsxRuntimeExports.jsxs("div",{className:styles$K.dimensionsContainer,children:[jsxRuntimeExports.jsxs(BodyMonospace,{children:["Natural size: ",width," x ",height]}),jsxRuntimeExports.jsx(Button,{kind:"tertiary",size:"small",startIcon:arrowCounterClockwise,disabled:editingDisabled,onClick:handleResetToOriginalSize,children:"Recalculate natural size"}),hasLargeDimensions&&jsxRuntimeExports.jsx(Banner,{kind:"warning",text:"Large images may cause slow performance for learners. Please use a max size of 1024 x 1024."}),jsxRuntimeExports.jsx("div",{className:styles$K.horizontalLine}),hasInvalidDimensions&&jsxRuntimeExports.jsx(Banner,{kind:"warning",text:'Image size is invalid. Please use the "Recalculate natural size" button to enable scaling.',styles:{root:{marginBottom:sizing.size_080}}}),jsxRuntimeExports.jsx(LabeledField,{label:"Scale",description:"Use 1 to display image at original size.",field:jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:scale.toString(),min:0,onChange:handleScaleChange,disabled:hasInvalidDimensions||editingDisabled}),styles:wbFieldStyles}),jsxRuntimeExports.jsxs("div",{className:styles$K.dimensionsFieldContainer,children:[jsxRuntimeExports.jsx(LabeledField,{label:"Scaled Width",field:jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:(width*scale).toString(),min:0,onChange:handleScaledWidthChange,disabled:hasInvalidDimensions||editingDisabled}),styles:wbFieldStyles}),jsxRuntimeExports.jsx("span",{className:styles$K.xSpan,children:"x"}),jsxRuntimeExports.jsx(LabeledField,{label:"Scaled Height",field:jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:(height*scale).toString(),min:0,onChange:handleScaledHeightChange,disabled:hasInvalidDimensions||editingDisabled}),styles:wbFieldStyles})]})]})}
 
-const MIN_ALT_TEXT_LENGTH=8;const MAX_ALT_TEXT_LENGTH=125;const altTextTooLongError="Keep alt succinct at roughly 125 characters in length. Please pair the alt with a long description if you need significantly more text to sufficiently describe the image.";const altTextTooShortError="Add more detail to describe your image. While alt text should be brief, it must also describe the image well.";function ImageSettings({alt,apiOptions,backgroundImage,scale=1,caption,decorative,longDescription,title,onChange}){const[altFieldWarning,setAltFieldWarning]=React.useState(null);const[wbTheme,setWBTheme]=React.useState(undefined);if(!backgroundImage.url){return null}const editingDisabled=apiOptions?.editingDisabled??false;const hasPopulatedFields=Boolean(alt||caption||title||longDescription);function handleAltFieldChange(value){if(value.length===0){setAltFieldWarning(null);}else if(value.length>MAX_ALT_TEXT_LENGTH){setAltFieldWarning(altTextTooLongError);}else if(value.length>=MIN_ALT_TEXT_LENGTH){setAltFieldWarning(null);}onChange({alt:value});}function handleAltFieldBlur(value){if(value.length>0&&value.length<MIN_ALT_TEXT_LENGTH){setAltFieldWarning(altTextTooShortError);}}return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledField,{label:"Preview",field:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(DarkModeToggle,{editingDisabled:editingDisabled,backgroundImage:backgroundImage,onShowToggle:setWBTheme,onSuppressToggle:onChange}),jsxRuntimeExports.jsx(ImagePreview,{src:backgroundImage.url,alt:`Preview: ${alt||"No alt text"}`,width:backgroundImage.width,height:backgroundImage.height,wbTheme:wbTheme})]}),styles:wbFieldStyles}),jsxRuntimeExports.jsx(ImageScaleInput,{backgroundImage:backgroundImage,scale:scale,editingDisabled:editingDisabled,onChange:onChange}),jsxRuntimeExports.jsx(DecorativeToggle,{decorative:decorative,hasPopulatedFields:hasPopulatedFields,editingDisabled:editingDisabled,onChange:onChange}),jsxRuntimeExports.jsx(LabeledField,{label:"Title",field:jsxRuntimeExports.jsx(TextArea,{value:title??"",onChange:value=>onChange({title:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles}),jsxRuntimeExports.jsxs("div",{className:styles$K.altTextFieldContainer,children:[jsxRuntimeExports.jsx(LabeledField,{label:"Alt text",description:"Summarize the image using up to 125 characters.",field:jsxRuntimeExports.jsx(TextArea,{value:alt??"",onBlur:e=>handleAltFieldBlur(e.target.value),onChange:handleAltFieldChange,disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStylesWithDescription}),jsxRuntimeExports.jsxs(BodyText,{size:"xsmall",tag:"span",style:wbStyles.characterCounter,children:[alt?.length??0," characters"]})]}),altFieldWarning&&jsxRuntimeExports.jsx(Banner,{kind:"warning",text:altFieldWarning,styles:{root:{marginBottom:sizing.size_080}}}),jsxRuntimeExports.jsx(LabeledField,{label:"Long description",field:jsxRuntimeExports.jsx(TextArea,{value:longDescription??"",onChange:value=>onChange({longDescription:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles}),jsxRuntimeExports.jsx(LabeledField,{label:"Caption",field:jsxRuntimeExports.jsx(TextArea,{value:caption??"",onChange:value=>onChange({caption:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles})]})}const wbStyles=StyleSheet.create({characterCounter:{position:"absolute",bottom:0,right:8}});
+const MIN_ALT_TEXT_LENGTH=8;const MAX_ALT_TEXT_LENGTH=125;const altTextTooLongError="Keep alt succinct at roughly 125 characters in length. Please pair the alt with a long description if you need significantly more text to sufficiently describe the image.";const altTextTooShortError="Add more detail to describe your image. While alt text should be brief, it must also describe the image well.";function ImageSettings({alt,apiOptions,backgroundImage,scale=1,caption,decorative,longDescription,title,onChange}){const[altFieldWarning,setAltFieldWarning]=React.useState(null);const[wbTheme,setWBTheme]=React.useState(undefined);if(!backgroundImage.url){return null}const editingDisabled=apiOptions?.editingDisabled??false;const hasPopulatedFields=Boolean(alt||caption||title||longDescription);function handleAltFieldChange(value){if(value.length===0){setAltFieldWarning(null);}else if(value.length>MAX_ALT_TEXT_LENGTH){setAltFieldWarning(altTextTooLongError);}else if(value.length>=MIN_ALT_TEXT_LENGTH){setAltFieldWarning(null);}onChange({alt:value});}function handleAltFieldBlur(value){if(value.length>0&&value.length<MIN_ALT_TEXT_LENGTH){setAltFieldWarning(altTextTooShortError);}}return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledField,{label:"Preview",field:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(DarkModeToggle,{editingDisabled:editingDisabled,backgroundImage:backgroundImage,onShowToggle:setWBTheme,onSuppressToggle:onChange}),jsxRuntimeExports.jsx(ImagePreview,{src:backgroundImage.url,alt:`Preview: ${alt||"No alt text"}`,width:backgroundImage.width,height:backgroundImage.height,wbTheme:wbTheme})]}),styles:wbFieldStyles}),jsxRuntimeExports.jsx(ImageScaleInput,{backgroundImage:backgroundImage,scale:scale,editingDisabled:editingDisabled,onChange:onChange}),jsxRuntimeExports.jsx(DecorativeToggle,{decorative:decorative,hasPopulatedFields:hasPopulatedFields,editingDisabled:editingDisabled,onChange:onChange}),jsxRuntimeExports.jsx(LabeledField,{label:"Title",field:jsxRuntimeExports.jsx(TextArea,{value:title??"",onChange:value=>onChange({title:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles}),jsxRuntimeExports.jsxs("div",{className:styles$K.altTextFieldContainer,children:[jsxRuntimeExports.jsx(LabeledField,{label:"Alt text",description:"Summarize the image using up to 125 characters.",field:jsxRuntimeExports.jsx(TextArea,{value:alt??"",onBlur:e=>handleAltFieldBlur(e.target.value),onChange:handleAltFieldChange,disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStylesWithDescription}),jsxRuntimeExports.jsxs(BodyText,{size:"xsmall",tag:"span",style:wbStyles.characterCounter,children:[alt?.length??0," characters"]})]}),altFieldWarning&&jsxRuntimeExports.jsx(Banner,{kind:"warning",text:altFieldWarning,styles:{root:{marginBottom:sizing.size_080}}}),jsxRuntimeExports.jsx(LabeledField,{label:"Long description",field:jsxRuntimeExports.jsx(TextArea,{value:longDescription??"",onChange:value=>onChange({longDescription:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles}),jsxRuntimeExports.jsx(LabeledField,{label:"Caption",field:jsxRuntimeExports.jsx(TextArea,{value:caption??"",onChange:value=>onChange({caption:value}),disabled:decorative||editingDisabled,autoResize:true}),styles:wbFieldStyles})]})}const wbStyles=StyleSheet.create({characterCounter:{position:"absolute",insetBlockEnd:0,insetInlineEnd:8}});
 
 const INTERNALLY_HOSTED_DOMAINS="("+"ka-.*.s3.amazonaws.com|"+"(fastly|cdn).kastatic.org|"+"khanacademy.org|"+"kasandbox.org"+")";const INTERNALLY_HOSTED_URL_RE=new RegExp("^(https?|web\\+graphie)://[^/]*"+INTERNALLY_HOSTED_DOMAINS);function ImageUrlInput({backgroundImage,onChange}){const uniqueId=React__default.useId();const urlId=`${uniqueId}-url`;const[urlFieldValue,setUrlFieldValue]=React__default.useState(backgroundImage.url||"");const[backgroundImageError,setBackgroundImageError]=React__default.useState(null);React__default.useEffect(()=>{setUrlFieldValue(backgroundImage.url||"");},[backgroundImage.url]);function setUrl(url,width,height){const image={...backgroundImage};image.url=url;image.width=width;image.height=height;const box=[image.width,image.height];onChange({backgroundImage:image,box:box});}async function onUrlChange(url){setBackgroundImageError(null);if(!url){setUrl(url,0,0);return}if(url===backgroundImage.url){return}if(url&&!INTERNALLY_HOSTED_URL_RE.test(url)){setBackgroundImageError("Images must be from sites hosted by Khan Academy. "+"Please input a Khan Academy-owned address, or use the "+"Add Image tool to rehost an existing image");return}try{const size=await Util.getImageSizeModern(url);setUrl(url,size[0],size[1]);}catch(error){setBackgroundImageError(`There was an error loading the image URL: ${JSON.stringify(error,null,2)}`);}}return jsxRuntimeExports.jsx(LabeledField,{label:"Image URL",description:"Paste an image or graphie image URL.",field:jsxRuntimeExports.jsx(TextField,{id:urlId,value:urlFieldValue,onBlur:e=>onUrlChange(e.target.value),onChange:value=>setUrlFieldValue(value)}),errorMessage:backgroundImageError,styles:wbFieldStylesWithDescription})}
 
 class ImageEditor extends React.Component{serialize(){return EditorJsonify.serialize.call(this)}render(){return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ImageUrlInput,{...this.props}),jsxRuntimeExports.jsx(ImageSettings,{...this.props})]})}}ImageEditor.displayName="ImageEditor";ImageEditor.widgetName="image";ImageEditor.defaultProps=imageLogic.defaultWidgetOptions;
 
-function Heading({title,isOpen,isCollapsible,onToggle}){return jsxRuntimeExports.jsx(Clickable,{style:[styles$H.container,!isCollapsible&&styles$H.notClickable],disabled:!isCollapsible,onClick:()=>isCollapsible&&onToggle?.(!isOpen),children:()=>jsxRuntimeExports.jsxs(View,{style:styles$H.heading,children:[jsxRuntimeExports.jsx(BodyText,{size:"small",weight:"bold",tag:"span",children:title}),isCollapsible&&jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:isOpen})]})})}const styles$H=StyleSheet.create({container:{marginTop:spacing.small_12,marginInline:-10,backgroundColor:semanticColor.core.background.neutral.subtle,padding:spacing.xSmall_8,width:"calc(100% + 20px)"},heading:{flexDirection:"row",justifyContent:"space-between",userSelect:"none"},notClickable:{color:"inherit",cursor:"default"}});
+function Heading({title,isOpen,isCollapsible,onToggle}){return jsxRuntimeExports.jsx(Clickable,{style:[styles$H.container,!isCollapsible&&styles$H.notClickable],disabled:!isCollapsible,onClick:()=>isCollapsible&&onToggle?.(!isOpen),children:()=>jsxRuntimeExports.jsxs(View,{style:styles$H.heading,children:[jsxRuntimeExports.jsx(BodyText,{size:"small",weight:"bold",tag:"span",children:title}),isCollapsible&&jsxRuntimeExports.jsx(ToggleableCaret,{isExpanded:isOpen})]})})}const styles$H=StyleSheet.create({container:{marginBlockStart:spacing.small_12,marginInline:-10,backgroundColor:semanticColor.core.background.neutral.subtle,padding:spacing.xSmall_8,width:"calc(100% + 20px)"},heading:{flexDirection:"row",justifyContent:"space-between",userSelect:"none"},notClickable:{color:"inherit",cursor:"default"}});
 
 var styles$G = {"group":"perseus_Vniq-14O","wrapGroup":"perseus_8W6ltSJv","segment":"perseus_pYpuDydt"};
 
 function ToggleButton({selected,onClick,disabled=false,role="radio",children,style,"aria-label":ariaLabel}){return jsxRuntimeExports.jsx(Clickable,{role:role,"aria-checked":selected,"aria-label":ariaLabel,disabled:disabled,onClick:onClick,className:styles$G.segment,style:style,children:()=>children})}function SegmentedControl({options,selectedValue,onChange,disabled=false,"aria-label":ariaLabel}){return jsxRuntimeExports.jsx(View,{role:"radiogroup","aria-label":ariaLabel,className:styles$G.group,children:options.map(option=>jsxRuntimeExports.jsx(ToggleButton,{role:"radio",selected:option.value===selectedValue,"aria-label":option.ariaLabel,disabled:disabled,onClick:()=>onChange(option.value),children:option.label},option.value))})}function ToggleButtonGroup({options,selectedValues,onToggle,disabled=false,"aria-label":ariaLabel}){return jsxRuntimeExports.jsx(View,{role:"group","aria-label":ariaLabel,className:styles$G.wrapGroup,children:options.map(option=>jsxRuntimeExports.jsx(ToggleButton,{role:"checkbox",selected:selectedValues.includes(option.value),"aria-label":option.ariaLabel,disabled:disabled,onClick:()=>onToggle(option.value),children:option.label},option.value))})}
 
-var styles$F = {"field":"perseus_JbwuUF5N","labelRow":"perseus_aHiPdK--","inlineField":"perseus_dNMdOiQI"};
+var styles$F = {"field":"perseus_SjB5EkqY","labelRow":"perseus_kGIonNza","inlineField":"perseus_AjUqaLV1"};
 
 const{NumberInput: NumberInput$b,TextInput: TextInput$2}=components;const{firstNumericalParse}=Util;const answerFormButtons=[{title:"Integers",value:"integer",content:"6"},{title:"Decimals",value:"decimal",content:"0.75"},{title:"Proper fractions",value:"proper",content:"⅗"},{title:"Improper fractions",value:"improper",content:"⁷⁄₄"},{title:"Mixed numbers",value:"mixed",content:"1¾"},{title:"Numbers with π",value:"pi",content:"π"}];const initAnswer=status=>{return {value:null,status:status,message:"",simplify:"required",answerForms:[],strict:false,maxError:null}};class NumericInputEditor extends React.Component{render(){const answers=this.props.answers;const editingDisabled=this.props.apiOptions.editingDisabled;const unsimplifiedAnswers=i=>jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[answers[i]["status"]!=="correct"&&jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Unsimplified answers are irrelevant for this status"}),answers[i]["status"]==="correct"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{className:styles$F.labelRow,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Unsimplified answers are"}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:'Normally select "ungraded". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and after)'}),jsxRuntimeExports.jsx("p",{children:'Select "accepted" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)'}),jsxRuntimeExports.jsxs("p",{children:['Select "wrong" ',jsxRuntimeExports.jsx("em",{children:"only"})," if we are specifically assessing the ability to simplify."]})]})]}),jsxRuntimeExports.jsx(SegmentedControl,{"aria-label":"Unsimplified answers are",disabled:editingDisabled,selectedValue:answers[i]["simplify"],onChange:value=>this.updateAnswer(i,{simplify:value}),options:[{value:"required",label:"Ungraded"},{value:"optional",label:"Accepted"},{value:"enforced",label:"Wrong"}]})]})]});const suggestedAnswerTypes=i=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsxs(View,{className:styles$F.labelRow,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Possible answer formats"}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:'Formats will be autoselected for you based on the given answer; to show no suggested formats and accept all types, simply have a decimal/integer be the answer. Values with π will have format "pi", and values that are fractions will have some subset (mixed will be "mixed" and "proper"; improper/proper will both be "improper" and "proper"). If you would like to specify that it is only a proper fraction (or only a mixed/improper fraction), deselect the other format. Except for specific cases, you should not need to change the autoselected formats.'}),jsxRuntimeExports.jsxs("p",{children:["To restrict the answer to ",jsxRuntimeExports.jsx("em",{children:"only"}),' an improper fraction (i.e. 7/4), select the improper fraction and toggle "strict" to true. This ',jsxRuntimeExports.jsx("b",{children:"will not"})," accept 1.75 as an answer."," "]}),jsxRuntimeExports.jsx("p",{children:"Unless you are testing that specific skill, please do not restrict the answer format."})]})]}),jsxRuntimeExports.jsx(ToggleButtonGroup,{"aria-label":"Possible answer formats",disabled:editingDisabled,selectedValues:answers[i]["answerForms"]??[],onToggle:value=>this.onToggleAnswerForm(i,value),options:answerFormButtons.map(format=>({value:format.value,label:format.content,ariaLabel:format.title}))})]}),jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Answer formats are"}),jsxRuntimeExports.jsx(SegmentedControl,{"aria-label":"Answer formats are",disabled:editingDisabled,selectedValue:answers[i]["strict"]?"required":"suggested",onChange:value=>this.updateAnswer(i,{strict:value==="required"}),options:[{value:"suggested",label:"Suggested"},{value:"required",label:"Required"}]})]})]});const inputSize=jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsxs(View,{className:styles$F.labelRow,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Width"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Use size "Normal" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them.'})})]}),jsxRuntimeExports.jsx(SegmentedControl,{"aria-label":"Width",disabled:editingDisabled,selectedValue:this.props.size,onChange:value=>this.change("size")(value),options:[{value:"normal",label:"Normal (80px)"},{value:"small",label:"Small (40px)"}]})]});const labelText=jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsxs(View,{className:styles$F.labelRow,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Answer Field Aria label"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Text to describe the Answer Field for screenreader users."})})]}),jsxRuntimeExports.jsx(TextInput$2,{labelText:"aria label",value:this.props.labelText,onChange:this.change("labelText")})]});const coefficientCheck=jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsxs(View,{className:styles$F.labelRow,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Number style"}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"A coefficient style number allows the student to use - for -1 and an empty string to mean 1."})})]}),jsxRuntimeExports.jsx(SegmentedControl,{"aria-label":"Number style",disabled:editingDisabled,selectedValue:this.props.coefficient?"coefficient":"standard",onChange:value=>this.props.onChange({coefficient:value==="coefficient"}),options:[{value:"standard",label:"Standard"},{value:"coefficient",label:"Coefficient"}]})]});const instructions={wrong:"(address the mistake/misconception)",ungraded:"(explain in detail to avoid confusion)",correct:"(reinforce the user's understanding)"};const generateInputAnswerEditors=()=>answers.map((answer,i)=>{const editor=jsxRuntimeExports.jsx(Editor,{apiOptions:this.props.apiOptions,content:answer.message||"",placeholder:"Why is this answer "+answer.status+"?	"+instructions[answer.status],widgetEnabled:false,onChange:newProps=>{if("content"in newProps){this.updateAnswer(i,{message:newProps.content});}}});const statusProper=answer.status.charAt(0).toUpperCase()+answer.status.slice(1);const answerFormat=(answer.answerForms||[]).at(-1);const answerString=KhanMath.toNumericString(answer.value??0,answerFormat);const answerRangeText=answer.maxError?`\xb1 ${KhanMath.toNumericString(answer.maxError,answerFormat)}`:"";const answerHeading=answer.value===null?"New Answer":`${statusProper} answer: ${answerString} ${answerRangeText}`;return jsxRuntimeExports.jsx("div",{className:"perseus-widget-row answer-option",children:jsxRuntimeExports.jsxs(PerseusEditorAccordion,{animated:true,expanded:this.state.showAnswerDetails[i],onToggle:()=>{this.onToggleAnswers(i);},header:jsxRuntimeExports.jsx(BodyText,{weight:"bold",tag:"span",children:answerHeading}),children:[jsxRuntimeExports.jsxs("div",{className:"input-answer-editor-value-container"+(answer.maxError?" with-max-error":""),children:[jsxRuntimeExports.jsxs(View,{tag:"label",className:styles$F.inlineField,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"User input"}),jsxRuntimeExports.jsx(NumberInput$b,{value:answer.value,className:"numeric-input-value",placeholder:"answer",format:_.last(answer.answerForms||[]),onFormatChange:(newValue,format)=>{let forms;if(format==="pi"){forms=["pi"];}else if(format==="mixed"){forms=["proper","mixed"];}else if(format==="proper"||format==="improper"){forms=["proper","improper"];}this.updateAnswer(i,{value:firstNumericalParse(newValue),answerForms:forms});},onChange:newValue=>{this.updateAnswer(i,{value:firstNumericalParse(newValue)});}})]}),jsxRuntimeExports.jsx("span",{className:"max-error-plusmn",children:"±"}),jsxRuntimeExports.jsx(NumberInput$b,{className:"max-error-input-value",placeholder:0,value:answers[i]["maxError"],format:_.last(answer.answerForms||[]),onChange:this.updateAnswer(i,"maxError")})]}),jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"Status"}),jsxRuntimeExports.jsx(SegmentedControl,{"aria-label":"Status",disabled:editingDisabled,selectedValue:answers[i]["status"],onChange:value=>this.onEvaluationChange(i,value),options:[{value:"correct",label:"Correct"},{value:"wrong",label:"Wrong"},{value:"ungraded",label:"Ungraded"}]})]}),unsimplifiedAnswers(i),jsxRuntimeExports.jsxs(View,{className:styles$F.field,children:[jsxRuntimeExports.jsx(BodyText,{weight:"semi",children:"(Articles only) Message shown to user"}),editor]}),suggestedAnswerTypes(i),jsxRuntimeExports.jsx(Button,{startIcon:trashIcon,"aria-label":`Delete ${answerHeading}`,className:"delete-item-button",disabled:editingDisabled,onClick:()=>{this.onTrashAnswer(i);},kind:"tertiary",children:"Delete"})]})},i)});return jsxRuntimeExports.jsxs("div",{className:"perseus-input-number-editor",children:[jsxRuntimeExports.jsx(Heading,{title:"General Settings",isCollapsible:true,isOpen:this.state.showSettings,onToggle:this.onToggleHeading("Settings")}),jsxRuntimeExports.jsx("div",{className:`perseus-editor-accordion-container ${this.state.showSettings?"expanded":"collapsed"}`,children:jsxRuntimeExports.jsxs("div",{className:"perseus-editor-accordion-content",children:[inputSize,jsxRuntimeExports.jsxs("label",{children:["Text alignment",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:this.props.textAlign,onChange:value=>{this.props.onChange({textAlign:value});},options:{left:"Left",center:"Center",right:"Right"},placeholder:"Select text alignment"})]}),coefficientCheck,labelText]})}),jsxRuntimeExports.jsx(Heading,{title:"Answers",isCollapsible:true,isOpen:this.state.showAnswers,onToggle:this.onToggleHeading("Answers")}),jsxRuntimeExports.jsx("div",{className:`perseus-editor-accordion-container ${this.state.showAnswers?"expanded":"collapsed"}`,children:jsxRuntimeExports.jsxs("div",{className:"perseus-editor-accordion-content",children:[generateInputAnswerEditors(),jsxRuntimeExports.jsx(Button,{kind:"tertiary",disabled:editingDisabled,onClick:this.addAnswer,children:"Add new answer"})]})})]})}constructor(props){super(props),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.onToggleAnswers=answerIndex=>{const showAnswerDetails=this.state.showAnswerDetails.slice();showAnswerDetails[answerIndex]=!showAnswerDetails[answerIndex];this.setState({showAnswerDetails:showAnswerDetails});},this.onToggleAnswerForm=(answerIndex,answerForm)=>{let answerForms=[...this.props.answers[answerIndex]["answerForms"]??[]];const formSelected=answerForms.includes(answerForm);if(!formSelected){answerForms.push(answerForm);}else {answerForms=answerForms.filter(form=>form!==answerForm);}const updateFn=this.updateAnswer(answerIndex,"answerForms");if(updateFn){updateFn(answerForms);}},this.onToggleHeading=accordionName=>{return ()=>{const toggleName=`show${accordionName}`;const newState={...this.state};newState[toggleName]=!newState[toggleName];this.setState(newState);}},this.onTrashAnswer=choiceIndex=>{if(choiceIndex>=0&&choiceIndex<this.props.answers.length){const answers=this.props.answers.slice(0);answers.splice(choiceIndex,1);this.props.onChange({answers:answers});}},this.onSpace=(e,callback,...args)=>{if(e.key===" "){e.preventDefault();callback.apply(this,args);}},this.onStatusChange=choiceIndex=>{const statuses=["wrong","ungraded","correct"];const answers=this.props.answers;const i=statuses.indexOf(answers[choiceIndex].status);const newStatus=statuses[(i+1)%statuses.length];this.updateAnswer(choiceIndex,{status:newStatus,simplify:newStatus==="correct"?"required":"accepted"});},this.onEvaluationChange=(choiceIndex,newStatus)=>{this.updateAnswer(choiceIndex,{status:newStatus,simplify:newStatus==="correct"?"required":"accepted"});},this.updateAnswer=(choiceIndex,update)=>{if(!_.isObject(update)){return _.partial((choiceIndex,key,value)=>{const update={};update[key]=value;this.updateAnswer(choiceIndex,update);},choiceIndex,update)}let answers=[...this.props.answers];if(choiceIndex===answers.length){const lastAnswer=initAnswer(this.state.lastStatus);answers=answers.concat(lastAnswer);}answers[choiceIndex]=_.extend({},answers[choiceIndex],update);this.props.onChange({answers:answers});},this.addAnswer=()=>{const lastAnswer=initAnswer(this.state.lastStatus);const answers=this.props.answers.concat(lastAnswer);const showAnswerDetails=this.state.showAnswerDetails.concat(true);this.setState({showAnswerDetails:showAnswerDetails});this.props.onChange({answers:answers});},this.getSaveWarnings=()=>{const warnings=[];if(_.contains(_.pluck(this.props.answers,"value"),"")){warnings.push("One or more answers is empty");}this.props.answers.forEach((answer,i)=>{const formatError=answer.strict&&(!answer.answerForms||answer.answerForms.length===0);if(formatError){warnings.push(`Answer ${i+1} is set to string format `+"matching, but no format was selected");}});return warnings},this.serialize=()=>{return EditorJsonify.serialize.call(this)};this.state={lastStatus:"wrong",showAnswerDetails:Array(this.props.answers.length).fill(true),showSettings:true,showAnswers:true};}}NumericInputEditor.widgetName="numeric-input";NumericInputEditor.displayName="NumericInputEditor";NumericInputEditor.defaultProps={...numericInputLogic.defaultWidgetOptions};
 
@@ -1642,7 +1644,7 @@ const{unescapeMathMode}=Util;const defaultOptionsByElementType={point:PointEdito
 
 var styles$D = {"singleSelectShort":"perseus_wAZzFxEx","row":"perseus_6FquBkGo"};
 
-const LabeledRow=props=>{const{children,label,labelSide="left",labelSize="small",style}=props;return jsxRuntimeExports.jsx("label",{className:css(styles$C.label),children:jsxRuntimeExports.jsxs(View,{style:[styles$C.row,style],children:[labelSide==="start"||jsxRuntimeExports.jsx(BodyText,{size:labelSize==="small"?"small":undefined,tag:"span",style:styles$C.spaceEnd,children:label}),children,labelSide==="end"&&jsxRuntimeExports.jsx(BodyText,{size:labelSize==="small"?"small":undefined,tag:"span",style:styles$C.spaceStart,children:label})]})})};const styles$C=StyleSheet.create({label:{width:"fit-content"},row:{flexDirection:"row",marginTop:spacing.xSmall_8,alignItems:"center",width:"fit-content"},spaceStart:{marginInlineStart:spacing.xSmall_8},spaceEnd:{marginInlineEnd:spacing.xSmall_8}});
+const LabeledRow=props=>{const{children,label,labelSide="left",labelSize="small",style}=props;return jsxRuntimeExports.jsx("label",{className:css(styles$C.label),children:jsxRuntimeExports.jsxs(View,{style:[styles$C.row,style],children:[labelSide==="start"||jsxRuntimeExports.jsx(BodyText,{size:labelSize==="small"?"small":undefined,tag:"span",style:styles$C.spaceEnd,children:label}),children,labelSide==="end"&&jsxRuntimeExports.jsx(BodyText,{size:labelSize==="small"?"small":undefined,tag:"span",style:styles$C.spaceStart,children:label})]})})};const styles$C=StyleSheet.create({label:{width:"fit-content"},row:{flexDirection:"row",marginBlockStart:spacing.xSmall_8,alignItems:"center",width:"fit-content"},spaceStart:{marginInlineStart:spacing.xSmall_8},spaceEnd:{marginInlineEnd:spacing.xSmall_8}});
 
 function AngleAnswerOptions({correct,graph,onChange}){return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{className:styles$D.row,children:[jsxRuntimeExports.jsx(Checkbox$1,{label:jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",children:"Show angle measures"}),checked:!!correct?.showAngles,onChange:newValue=>{if(graph?.type==="angle"){invariant(correct.type==="angle",`Expected graph type to be angle, but got ${correct.type}`);onChange({correct:{...correct,showAngles:newValue},graph:{...graph,showAngles:newValue}});}}}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(View,{className:styles$D.row,children:[jsxRuntimeExports.jsx(Checkbox$1,{label:jsxRuntimeExports.jsx(BodyText,{size:"small",tag:"span",children:"Allow reflex angles"}),checked:!!correct?.allowReflexAngles,onChange:newValue=>{invariant(correct.type==="angle",`Expected graph type to be angle, but got ${correct.type}`);invariant(graph?.type==="angle",`Expected graph type to be angle, but got ${graph?.type}`);const update={allowReflexAngles:newValue};onChange({correct:{...correct,...update},graph:{...graph,...update}});}}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Allow students to be able to create reflex angles."})})]}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:correct.match||"exact",options:{exact:"match exactly",congruent:"be congruent"},onChange:newValue=>{const match=newValue==="exact"?undefined:newValue;onChange({correct:{...correct,match}});},className:styles$D.singleSelectShort}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"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."})})]})]})}
 
@@ -1652,11 +1654,11 @@ const pointsCountOptions={"1":"1 point","2":"2 points","3":"3 points","4":"4 poi
 
 const GraphTypeSelector=props=>{return jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:props.graphType,onChange:props.onChange,placeholder:"Select an answer type",className:styles$D.singleSelectShort,disabled:props.disabled,options:{none:"None","absolute-value":"Absolute value function",exponential:"Exponential function",linear:"Linear function",logarithm:"Logarithmic function",quadratic:"Quadratic function",sinusoid:"Sinusoidal function",tangent:"Tangent function",angle:"Angle",circle:"Circle","linear-system":"Linear system",segment:"Line segment(s)",point:"Point(s)",polygon:"Polygon",ray:"Ray",vector:"Vector"}})};
 
-function InteractiveGraphCorrectAnswer(props){return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Correct Answer",isOpen:true,isCollapsible:false}),jsxRuntimeExports.jsxs(View,{id:props.id,children:[jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsx(BodyText,{size:"xsmall",style:{paddingTop:spacing.xxSmall_6,paddingBottom:spacing.xxSmall_6,color:semanticColor.core.foreground.neutral.subtle},children:"Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."}),jsxRuntimeExports.jsx(BodyMonospace,{style:{fontSize:12,backgroundColor:"#eee",paddingInline:spacing.xxSmall_6,borderColor:"#ccc",borderStyle:"solid",borderWidth:1},children:props.equationString})]}),props.children]})]})}
+function InteractiveGraphCorrectAnswer(props){return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Correct Answer",isOpen:true,isCollapsible:false}),jsxRuntimeExports.jsxs(View,{id:props.id,children:[jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsx(BodyText,{size:"xsmall",style:{paddingBlockStart:spacing.xxSmall_6,paddingBlockEnd:spacing.xxSmall_6,color:semanticColor.core.foreground.neutral.subtle},children:"Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer."}),jsxRuntimeExports.jsx(BodyMonospace,{style:{fontSize:12,backgroundColor:"#eee",paddingInline:spacing.xxSmall_6,borderColor:"#ccc",borderStyle:"solid",borderWidth:1},children:props.equationString})]}),props.children]})]})}
 
 var styles$B = {"container":"perseus_7paQgL4U","caption":"perseus_DdFGH-ag"};
 
-function InteractiveGraphDescription(props){const{ariaLabelValue,ariaDescriptionValue,editingDisabled=false,onChange}=props;const[isOpen,setIsOpen]=React.useState(true);const uniqueId=React.useId();const descriptionTextAreaId=`${uniqueId}-description-textarea`;return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Description",isCollapsible:true,isOpen:isOpen,onToggle:setIsOpen}),isOpen&&jsxRuntimeExports.jsxs(View,{className:styles$B.container,children:[jsxRuntimeExports.jsx(BodyText,{size:"xsmall",className:styles$B.caption,children:"Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who may be visually impaired."}),jsxRuntimeExports.jsx(BodyText,{size:"xsmall",className:styles$B.caption,children:"Aria description required when using locked figures. Locked figures aren't automatically described."}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"label",children:["Title",jsxRuntimeExports.jsx(TextField,{value:ariaLabelValue,onChange:newValue=>onChange({fullGraphAriaLabel:newValue||undefined}),disabled:editingDisabled,style:{marginTop:sizing.size_040}})]}),jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"label",htmlFor:descriptionTextAreaId,children:"Description"}),jsxRuntimeExports.jsx(TextArea,{id:descriptionTextAreaId,value:ariaDescriptionValue,onChange:newValue=>onChange({fullGraphAriaDescription:newValue||undefined}),disabled:editingDisabled,autoResize:true})]})]})}
+function InteractiveGraphDescription(props){const{ariaLabelValue,ariaDescriptionValue,editingDisabled=false,onChange}=props;const[isOpen,setIsOpen]=React.useState(true);const uniqueId=React.useId();const descriptionTextAreaId=`${uniqueId}-description-textarea`;return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Description",isCollapsible:true,isOpen:isOpen,onToggle:setIsOpen}),isOpen&&jsxRuntimeExports.jsxs(View,{className:styles$B.container,children:[jsxRuntimeExports.jsx(BodyText,{size:"xsmall",className:styles$B.caption,children:"Use these fields to describe the graph as a whole. These are used by screen readers to describe content to users who may be visually impaired."}),jsxRuntimeExports.jsx(BodyText,{size:"xsmall",className:styles$B.caption,children:"Aria description required when using locked figures. Locked figures aren't automatically described."}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"label",children:["Title",jsxRuntimeExports.jsx(TextField,{value:ariaLabelValue,onChange:newValue=>onChange({fullGraphAriaLabel:newValue||undefined}),disabled:editingDisabled,style:{marginBlockStart:sizing.size_040}})]}),jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"label",htmlFor:descriptionTextAreaId,children:"Description"}),jsxRuntimeExports.jsx(TextArea,{id:descriptionTextAreaId,value:ariaDescriptionValue,onChange:newValue=>onChange({fullGraphAriaDescription:newValue||undefined}),disabled:editingDisabled,autoResize:true})]})]})}
 
 function AxisArrowSwitches(props){const{showAxisArrows,onChange,disabled}=props;return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(BodyText,{size:"small",children:"Arrows"}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",style:{display:"flex",flexDirection:"row",alignItems:"center",gap:sizing.size_060},children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledSwitch,{label:"x min",labelSide:"start",size:"small",checked:showAxisArrows.xMin,disabled:disabled,onChange:()=>onChange("xMin")})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledSwitch,{label:"y min",labelSide:"start",size:"small",checked:showAxisArrows.yMin,disabled:disabled,onChange:()=>onChange("yMin")})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",style:{display:"flex",flexDirection:"row",alignItems:"center",gap:sizing.size_060},children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledSwitch,{label:"x max",labelSide:"start",size:"small",checked:showAxisArrows.xMax,disabled:disabled,onChange:()=>onChange("xMax")})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledSwitch,{label:"y max",labelSide:"start",size:"small",checked:showAxisArrows.yMax,disabled:disabled,onChange:()=>onChange("yMax")})})]})]})}
 
@@ -1664,7 +1666,7 @@ function AxisTickSwitches(props){const{showAxisTicks,onChange,disabled}=props;re
 
 var styles$A = {"backgroundUrlInput":"perseus_so0nIc4z","checkboxRow":"perseus_lfG1X93S","protractorSection":"perseus_thf-SEbO"};
 
-const{ButtonGroup: ButtonGroup$1,RangeInput: RangeInput$4}=components;const defaultBackgroundImage={url:null,width:0,height:0};function numSteps(range,step){return Math.floor((range[1]-range[0])/step)}class InteractiveGraphSettings extends React.Component{static stateFromProps(props){return {labelsTextbox:props.labels,labelLocation:props.labelLocation,gridStepTextbox:props.gridStep,snapStepTextbox:props.snapStep,stepTextbox:props.step,rangeTextbox:props.range,showAxisArrowsSwitches:props.showAxisArrows,showAxisTicksSwitches:props.showAxisTicks,backgroundImage:{...props.backgroundImage}}}componentDidMount(){this._isMounted=true;this.changeGraph=_.debounce(this.changeGraph,300);}UNSAFE_componentWillReceiveProps(nextProps){if(!_.isEqual(this.props.labels,nextProps.labels)||!_.isEqual(this.props.labelLocation,nextProps.labelLocation)||!_.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(InteractiveGraphSettings.stateFromProps(nextProps));}}componentWillUnmount(){this._isMounted=false;}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Common Graph Settings",isOpen:this.state.isExpanded,isCollapsible:true,onToggle:()=>this.setState({isExpanded:!this.state.isExpanded})}),this.state.isExpanded&&jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Label Location",children:jsxRuntimeExports.jsx(ButtonGroup$1,{value:this.props.labelLocation,allowEmpty:false,buttons:[{value:"onAxis",content:"On Axis"},{value:"alongEdge",content:"Along Graph Edge"}],onChange:this.change("labelLocation"),disabled:editingDisabled})})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"x Label",children:jsxRuntimeExports.jsx("input",{type:"text",className:"graph-settings-axis-label",ref:this.labelXRef,onChange:e=>this.changeLabel(0,e),value:this.state.labelsTextbox[0]||""})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"y Label",children:jsxRuntimeExports.jsx("input",{type:"text",className:"graph-settings-axis-label",ref:this.labelYRef,onChange:e=>this.changeLabel(1,e),value:this.state.labelsTextbox[1]||""})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"x Range",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.rangeTextbox[0],onChange:vals=>this.changeRange(0,vals),allowPiTruncation:true})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"y Range",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.rangeTextbox[1],onChange:vals=>this.changeRange(1,vals),allowPiTruncation:true})})})]}),jsxRuntimeExports.jsx(AxisArrowSwitches,{showAxisArrows:this.state.showAxisArrowsSwitches,onChange:this.changeShowAxisArrows,disabled:this.props.apiOptions?.editingDisabled??false}),jsxRuntimeExports.jsx(AxisTickSwitches,{showAxisTicks:this.state.showAxisTicksSwitches,onChange:this.changeShowAxisTicks,disabled:this.props.apiOptions?.editingDisabled??false}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Tick Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.stepTextbox,onChange:this.changeStep,allowPiTruncation:true})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Grid Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.gridStepTextbox,onChange:this.changeGridStep,allowPiTruncation:true})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Snap Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.snapStepTextbox,onChange:this.changeSnapStep,allowPiTruncation:true})})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",onClick:()=>{this.changeStepsBasedOnRange();},disabled:editingDisabled,children:"Auto-adjust steps"}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:'Use the "Auto-adjust" steps button to update the tick step, grid step, and snap step to values that are valid for the current range.'}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("p",{children:"This is useful when the range is changed, and the graph errors due to the step sizes being too large or too small."})]})]})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Markings",children:jsxRuntimeExports.jsx(ButtonGroup$1,{value:this.props.markings,allowEmpty:false,buttons:[{value:"axes",content:"Axes"},{value:"graph",content:"Graph"},{value:"grid",content:"Grid"},{value:"none",content:"None"}],onChange:this.change("markings"),disabled:editingDisabled})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show tooltips",checked:this.props.showTooltips,onChange:value=>{this.change({showTooltips:value});},disabled:editingDisabled})})]}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Background image URL",style:{marginTop:0},children:[jsxRuntimeExports.jsx("input",{type:"text",className:styles$A.backgroundUrlInput,ref:this.bgUrlRef,value:this.state.backgroundImage.url||"",onChange:e=>{const image={...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.'})})]}),jsxRuntimeExports.jsxs(View,{className:styles$A.protractorSection,children:[jsxRuntimeExports.jsx(View,{className:styles$A.checkboxRow,children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.change({showProtractor:value});},disabled:editingDisabled,style:{marginTop:0}})}),this.props.showProtractor&&jsxRuntimeExports.jsx(Banner,{text:"The protractor is not accessible. Please consider an alternate approach.",kind:"warning"})]})]})]})}constructor(props){super(props),this._isMounted=false,this.bgUrlRef=React.createRef(),this.labelXRef=React.createRef(),this.labelYRef=React.createRef(),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.changeBackgroundUrl=e=>{if(e.type==="keypress"&&e.key!=="Enter"){return}const setUrl=(url,width,height)=>{const image={...this.props.backgroundImage};image.url=url;image.width=width;image.height=height;this.setState({backgroundImage:image},this.changeGraph);};const url=this.bgUrlRef.current?.value;if(url){Util.getImageSize(url,(width,height)=>{if(this._isMounted){setUrl(url,width,height);}});}else {setUrl(null,0,0);}},this.renderLabelChoices=choices=>{return choices.map(nameAndValue=>jsxRuntimeExports.jsx("option",{value:nameAndValue[1],children:nameAndValue[0]},nameAndValue[1]))},this.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},this.validateStepValue=settings=>{const{step,range,name,minTicks,maxTicks}=settings;const nSteps=numSteps(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},this.validSnapStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Snap step",minTicks:5,maxTicks:60})},this.validGridStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Grid step",minTicks:3,maxTicks:60})},this.validStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Step",minTicks:3,maxTicks:20})},this.validBackgroundImageSize=image=>{if(!image.url){return true}const validSize=image.width<=450&&image.height<=450;if(!validSize){return "Image must be smaller than 450px x 450px."}return true},this.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},this.changeLabel=(i,e)=>{const val=e.target.value;const labels=this.state.labelsTextbox.slice();labels[i]=val;this.setState({labelsTextbox:labels},this.changeGraph);},this.changeRange=(i,values)=>{const ranges=this.state.rangeTextbox.slice();ranges[i]=values;this.setState({rangeTextbox:ranges},this.changeGraph);},this.changeShowAxisArrows=axis=>{const newShowAxisArrows={...this.state.showAxisArrowsSwitches};newShowAxisArrows[axis]=!newShowAxisArrows[axis];this.setState({showAxisArrowsSwitches:newShowAxisArrows},this.changeGraph);},this.changeShowAxisTicks=axis=>{const newShowAxisTicks={...this.state.showAxisTicksSwitches};newShowAxisTicks[axis]=!newShowAxisTicks[axis];this.setState({showAxisTicksSwitches:newShowAxisTicks},this.changeGraph);},this.changeStepsBasedOnRange=()=>{const ranges=this.state.rangeTextbox.slice();const step=this.state.stepTextbox.slice();const gridStep=this.state.gridStepTextbox.slice();const snapStep=this.state.snapStepTextbox.slice();const scaleX=Util.scaleFromExtent(ranges[0],this.props.box[0]);if(this.validRange(ranges[0])===true){step[0]=Util.tickStepFromExtent(ranges[0],this.props.box[0]);const gridStepValue=Util.gridStepFromTickStep(step[0],scaleX);if(gridStepValue){gridStep[0]=gridStepValue;}snapStep[0]=gridStep[0]/2;}const scaleY=Util.scaleFromExtent(ranges[1],this.props.box[1]);if(this.validRange(ranges[1])===true){step[1]=Util.tickStepFromExtent(ranges[1],this.props.box[1]);const gridStepValue=Util.gridStepFromTickStep(step[1],scaleY);if(gridStepValue){gridStep[1]=gridStepValue;}snapStep[1]=gridStep[1]/2;}this.setState({stepTextbox:step,gridStepTextbox:gridStep,snapStepTextbox:snapStep,rangeTextbox:ranges},this.changeGraph);},this.changeStep=step=>{this.setState({stepTextbox:step},this.changeGraph);},this.changeSnapStep=snapStep=>{this.setState({snapStepTextbox:snapStep},this.changeGraph);},this.changeGridStep=gridStep=>{this.setState({gridStepTextbox:gridStep,snapStepTextbox:gridStep.map(function(step){return step/2})},this.changeGraph);},this.changeGraph=()=>{const labels=this.state.labelsTextbox;const labelLocation=this.state.labelLocation;const range=this.state.rangeTextbox.map(range=>range.map(value=>Number(value)));const showAxisArrows=this.state.showAxisArrowsSwitches;const showAxisTicks=this.state.showAxisTicksSwitches;const step=this.state.stepTextbox.map(value=>Number(value));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.change({valid:true,labels:labels,labelLocation:labelLocation,range:range,showAxisArrows:showAxisArrows,showAxisTicks:showAxisTicks,step:step,gridStep:gridStep,snapStep:snapStep,backgroundImage:image});}else {this.change({valid:validationResult});}};this.state={isExpanded:true,...InteractiveGraphSettings.stateFromProps(props)};}}InteractiveGraphSettings.defaultProps={box:[interactiveSizes.defaultBoxSizeSmall,interactiveSizes.defaultBoxSizeSmall],labels:["$x$","$y$"],labelLocation:"onAxis",range:[[-10,10],[-10,10]],step:[1,1],gridStep:[1,1],snapStep:[1,1],valid:true,backgroundImage:defaultBackgroundImage,markings:"graph",showProtractor:false,showTooltips:false,showAxisArrows:{xMin:true,xMax:true,yMin:true,yMax:true},showAxisTicks:{x:true,y:true}};
+const{ButtonGroup: ButtonGroup$1,RangeInput: RangeInput$4}=components;const defaultBackgroundImage={url:null,width:0,height:0};function numSteps(range,step){return Math.floor((range[1]-range[0])/step)}class InteractiveGraphSettings extends React.Component{static stateFromProps(props){return {labelsTextbox:props.labels,labelLocation:props.labelLocation,gridStepTextbox:props.gridStep,snapStepTextbox:props.snapStep,stepTextbox:props.step,rangeTextbox:props.range,showAxisArrowsSwitches:props.showAxisArrows,showAxisTicksSwitches:props.showAxisTicks,backgroundImage:{...props.backgroundImage}}}componentDidMount(){this._isMounted=true;this.changeGraph=_.debounce(this.changeGraph,300);}UNSAFE_componentWillReceiveProps(nextProps){if(!_.isEqual(this.props.labels,nextProps.labels)||!_.isEqual(this.props.labelLocation,nextProps.labelLocation)||!_.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(InteractiveGraphSettings.stateFromProps(nextProps));}}componentWillUnmount(){this._isMounted=false;}render(){const editingDisabled=this.props.apiOptions?.editingDisabled??false;return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Heading,{title:"Common Graph Settings",isOpen:this.state.isExpanded,isCollapsible:true,onToggle:()=>this.setState({isExpanded:!this.state.isExpanded})}),this.state.isExpanded&&jsxRuntimeExports.jsxs(View,{children:[jsxRuntimeExports.jsxs("div",{className:"graph-settings",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Label Location",children:jsxRuntimeExports.jsx(ButtonGroup$1,{value:this.props.labelLocation,allowEmpty:false,buttons:[{value:"onAxis",content:"On Axis"},{value:"alongEdge",content:"Along Graph Edge"}],onChange:this.change("labelLocation"),disabled:editingDisabled})})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"x Label",children:jsxRuntimeExports.jsx("input",{type:"text",className:"graph-settings-axis-label",ref:this.labelXRef,onChange:e=>this.changeLabel(0,e),value:this.state.labelsTextbox[0]||""})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"y Label",children:jsxRuntimeExports.jsx("input",{type:"text",className:"graph-settings-axis-label",ref:this.labelYRef,onChange:e=>this.changeLabel(1,e),value:this.state.labelsTextbox[1]||""})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"x Range",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.rangeTextbox[0],onChange:vals=>this.changeRange(0,vals),allowPiTruncation:true})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"y Range",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.rangeTextbox[1],onChange:vals=>this.changeRange(1,vals),allowPiTruncation:true})})})]}),jsxRuntimeExports.jsx(AxisArrowSwitches,{showAxisArrows:this.state.showAxisArrowsSwitches,onChange:this.changeShowAxisArrows,disabled:this.props.apiOptions?.editingDisabled??false}),jsxRuntimeExports.jsx(AxisTickSwitches,{showAxisTicks:this.state.showAxisTicksSwitches,onChange:this.changeShowAxisTicks,disabled:this.props.apiOptions?.editingDisabled??false}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Tick Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.stepTextbox,onChange:this.changeStep,allowPiTruncation:true})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-right-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Grid Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.gridStepTextbox,onChange:this.changeGridStep,allowPiTruncation:true})})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Snap Step",children:jsxRuntimeExports.jsx(RangeInput$4,{value:this.state.snapStepTextbox,onChange:this.changeSnapStep,allowPiTruncation:true})})}),jsxRuntimeExports.jsxs("div",{className:"perseus-widget-right-col",children:[jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",onClick:()=>{this.changeStepsBasedOnRange();},disabled:editingDisabled,children:"Auto-adjust steps"}),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:'Use the "Auto-adjust" steps button to update the tick step, grid step, and snap step to values that are valid for the current range.'}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("p",{children:"This is useful when the range is changed, and the graph errors due to the step sizes being too large or too small."})]})]})]}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsx(LabeledRow,{label:"Markings",children:jsxRuntimeExports.jsx(ButtonGroup$1,{value:this.props.markings,allowEmpty:false,buttons:[{value:"axes",content:"Axes"},{value:"graph",content:"Graph"},{value:"grid",content:"Grid"},{value:"none",content:"None"}],onChange:this.change("markings"),disabled:editingDisabled})})}),jsxRuntimeExports.jsx("div",{className:"perseus-widget-left-col",children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show tooltips",checked:this.props.showTooltips,onChange:value=>{this.change({showTooltips:value});},disabled:editingDisabled})})]}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Background image URL",style:{marginBlockStart:0},children:[jsxRuntimeExports.jsx("input",{type:"text",className:styles$A.backgroundUrlInput,ref:this.bgUrlRef,value:this.state.backgroundImage.url||"",onChange:e=>{const image={...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.'})})]}),jsxRuntimeExports.jsxs(View,{className:styles$A.protractorSection,children:[jsxRuntimeExports.jsx(View,{className:styles$A.checkboxRow,children:jsxRuntimeExports.jsx(Checkbox$1,{label:"Show protractor",checked:this.props.showProtractor,onChange:value=>{this.change({showProtractor:value});},disabled:editingDisabled,style:{marginBlockStart:0}})}),this.props.showProtractor&&jsxRuntimeExports.jsx(Banner,{text:"The protractor is not accessible. Please consider an alternate approach.",kind:"warning"})]})]})]})}constructor(props){super(props),this._isMounted=false,this.bgUrlRef=React.createRef(),this.labelXRef=React.createRef(),this.labelYRef=React.createRef(),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.changeBackgroundUrl=e=>{if(e.type==="keypress"&&e.key!=="Enter"){return}const setUrl=(url,width,height)=>{const image={...this.props.backgroundImage};image.url=url;image.width=width;image.height=height;this.setState({backgroundImage:image},this.changeGraph);};const url=this.bgUrlRef.current?.value;if(url){Util.getImageSize(url,(width,height)=>{if(this._isMounted){setUrl(url,width,height);}});}else {setUrl(null,0,0);}},this.renderLabelChoices=choices=>{return choices.map(nameAndValue=>jsxRuntimeExports.jsx("option",{value:nameAndValue[1],children:nameAndValue[0]},nameAndValue[1]))},this.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},this.validateStepValue=settings=>{const{step,range,name,minTicks,maxTicks}=settings;const nSteps=numSteps(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},this.validSnapStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Snap step",minTicks:5,maxTicks:60})},this.validGridStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Grid step",minTicks:3,maxTicks:60})},this.validStep=(step,range)=>{return this.validateStepValue({step:step,range:range,name:"Step",minTicks:3,maxTicks:20})},this.validBackgroundImageSize=image=>{if(!image.url){return true}const validSize=image.width<=450&&image.height<=450;if(!validSize){return "Image must be smaller than 450px x 450px."}return true},this.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},this.changeLabel=(i,e)=>{const val=e.target.value;const labels=this.state.labelsTextbox.slice();labels[i]=val;this.setState({labelsTextbox:labels},this.changeGraph);},this.changeRange=(i,values)=>{const ranges=this.state.rangeTextbox.slice();ranges[i]=values;this.setState({rangeTextbox:ranges},this.changeGraph);},this.changeShowAxisArrows=axis=>{const newShowAxisArrows={...this.state.showAxisArrowsSwitches};newShowAxisArrows[axis]=!newShowAxisArrows[axis];this.setState({showAxisArrowsSwitches:newShowAxisArrows},this.changeGraph);},this.changeShowAxisTicks=axis=>{const newShowAxisTicks={...this.state.showAxisTicksSwitches};newShowAxisTicks[axis]=!newShowAxisTicks[axis];this.setState({showAxisTicksSwitches:newShowAxisTicks},this.changeGraph);},this.changeStepsBasedOnRange=()=>{const ranges=this.state.rangeTextbox.slice();const step=this.state.stepTextbox.slice();const gridStep=this.state.gridStepTextbox.slice();const snapStep=this.state.snapStepTextbox.slice();const scaleX=Util.scaleFromExtent(ranges[0],this.props.box[0]);if(this.validRange(ranges[0])===true){step[0]=Util.tickStepFromExtent(ranges[0],this.props.box[0]);const gridStepValue=Util.gridStepFromTickStep(step[0],scaleX);if(gridStepValue){gridStep[0]=gridStepValue;}snapStep[0]=gridStep[0]/2;}const scaleY=Util.scaleFromExtent(ranges[1],this.props.box[1]);if(this.validRange(ranges[1])===true){step[1]=Util.tickStepFromExtent(ranges[1],this.props.box[1]);const gridStepValue=Util.gridStepFromTickStep(step[1],scaleY);if(gridStepValue){gridStep[1]=gridStepValue;}snapStep[1]=gridStep[1]/2;}this.setState({stepTextbox:step,gridStepTextbox:gridStep,snapStepTextbox:snapStep,rangeTextbox:ranges},this.changeGraph);},this.changeStep=step=>{this.setState({stepTextbox:step},this.changeGraph);},this.changeSnapStep=snapStep=>{this.setState({snapStepTextbox:snapStep},this.changeGraph);},this.changeGridStep=gridStep=>{this.setState({gridStepTextbox:gridStep,snapStepTextbox:gridStep.map(function(step){return step/2})},this.changeGraph);},this.changeGraph=()=>{const labels=this.state.labelsTextbox;const labelLocation=this.state.labelLocation;const range=this.state.rangeTextbox.map(range=>range.map(value=>Number(value)));const showAxisArrows=this.state.showAxisArrowsSwitches;const showAxisTicks=this.state.showAxisTicksSwitches;const step=this.state.stepTextbox.map(value=>Number(value));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.change({valid:true,labels:labels,labelLocation:labelLocation,range:range,showAxisArrows:showAxisArrows,showAxisTicks:showAxisTicks,step:step,gridStep:gridStep,snapStep:snapStep,backgroundImage:image});}else {this.change({valid:validationResult});}};this.state={isExpanded:true,...InteractiveGraphSettings.stateFromProps(props)};}}InteractiveGraphSettings.defaultProps={box:[interactiveSizes.defaultBoxSizeSmall,interactiveSizes.defaultBoxSizeSmall],labels:["$x$","$y$"],labelLocation:"onAxis",range:[[-10,10],[-10,10]],step:[1,1],gridStep:[1,1],snapStep:[1,1],valid:true,backgroundImage:defaultBackgroundImage,markings:"graph",showProtractor:false,showTooltips:false,showAxisArrows:{xMin:true,xMax:true,yMin:true,yMax:true},showAxisTicks:{x:true,y:true}};
 
 var styles$z = {"treeList":"perseus_dM32KBSs","indentList":"perseus_0LO0xYxg","switchRow":"perseus_T8Wphznm"};
 
@@ -1700,7 +1702,7 @@ const EllipseSwatch=props=>{const{color,fillStyle,strokeStyle}=props;return jsxR
 
 var styles$r = {"lineStrokeSelect":"perseus_L42pujHE"};
 
-const LineStrokeSelect=props=>{const{selectedValue,containerStyle,editingDisabled=false,onChange}=props;return jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:styles$r.lineStrokeSelect,style:containerStyle,children:["stroke",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:selectedValue,disabled:editingDisabled,onChange:onChange,options:{solid:"solid",dashed:"dashed"}})]})};
+const lineStrokeStyleOptions={solid:"solid",dashed:"dashed"};const fillableStrokeStyleOptions={solid:"solid",dashed:"dashed",none:"none"};const LineStrokeSelect=props=>{const{selectedValue,options,containerStyle,editingDisabled=false,onChange}=props;return jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:styles$r.lineStrokeSelect,style:containerStyle,children:["stroke",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:selectedValue,disabled:editingDisabled,onChange:onChange,options:options})]})};
 
 var styles$q = {"lineWeightSelect":"perseus_NDL3xmfp"};
 
@@ -1720,9 +1722,9 @@ var styles$m = {"accordionHeaderContainer":"perseus_WmxZMpCR","accordionHeader":
 
 const spaceUnderStyle$3={marginBottom:sizing.size_080};function LockedLabelSettings(props){const{type,coord,color,size,text,expanded,editingDisabled=false,onChangeProps,onMove,onRemove,onToggle,containerStyle}=props;return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$m.row} ${styles$m.accordionHeaderContainer} ${styles$m.header}`,children:[jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"span",children:["Label (",coord[0],", ",coord[1],")"]}),text!==""&&jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",className:styles$m.accordionHeader,style:{color:lockedFigureColors[color]},children:text})]}),containerStyle:containerStyle,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:coord,disabled:editingDisabled,onChange:newCoords=>{onChangeProps({coord:newCoords});},style:spaceUnderStyle$3}),jsxRuntimeExports.jsxs(View,{className:styles$m.row,children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$m.row} ${styles$m.textLabel}`,children:["text",jsxRuntimeExports.jsx(TextField,{value:text,placeholder:"ex. $x^2$ or $\\frac{1}{2}$",disabled:editingDisabled,onChange:newValue=>onChangeProps({text:newValue})})]}),jsxRuntimeExports.jsxs(InfoTip,{children:["Surround your text with $ for TeX.",jsxRuntimeExports.jsx("br",{}),"Example: ",`This circle has radius $\\frac{1}{2}$ units.`,jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("br",{}),'It is important to use TeX when appropriate for accessibility. The above example would be read as "This circle has radius one-half units" by screen readers.']})]}),jsxRuntimeExports.jsxs(View,{className:`${styles$m.row} ${styles$m.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,editingDisabled:editingDisabled,onChange:newColor=>{onChangeProps({color:newColor});},style:spaceUnderStyle$3}),jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$m.row} ${styles$m.sizeLabel}`,children:["size",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:size,disabled:editingDisabled,onChange:newValue=>onChangeProps({size:newValue}),options:{small:"small",medium:"medium",large:"large"}})]})]}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})}
 
-function generateLockedFigureAppearanceDescription(color,strokeStyle="solid",fill,weight="medium"){const convertedColor=color==="grayH"?"gray":color;const weightString=weight==="medium"?"":` ${weight}`;const baseAppearance=`. Appearance${weightString} ${strokeStyle} ${convertedColor}`;switch(fill){case "none":return `${baseAppearance} border, with no fill.`;case "white":return `${baseAppearance} border, with a white fill.`;case "solid":case "translucent":return `${baseAppearance} border, with a ${fill} ${convertedColor} fill.`;case undefined:return `${baseAppearance}.`;default:throw new UnreachableCaseError(fill)}}async function generateSpokenMathDetails(mathString){const engine=await SpeechRuleEngine.setup("en");let convertedSpeech="";const parsedContent=mathOnlyParser(mathString);for(const piece of parsedContent){switch(piece.type){case "math":convertedSpeech+=engine.texToSpeech(piece.content);break;case "specialCharacter":convertedSpeech+=piece.content.length>1?piece.content.slice(1):piece.content;break;default:convertedSpeech+=piece.content;break}}return convertedSpeech}async function joinLabelsAsSpokenMath(labels){if(labels.length===0){return ""}const spokenLabelPromises=labels.map(label=>{return generateSpokenMathDetails(label.text)});const spokenLabels=await Promise.all(spokenLabelPromises);return ` ${spokenLabels.join(", ")}`}
+function generateLockedFigureAppearanceDescription(color,strokeStyle="solid",fill,weight="medium"){const convertedColor=color==="grayH"?"gray":color;const weightString=weight==="medium"?"":` ${weight}`;const strokeDescription=strokeStyle==="none"?"no":`${strokeStyle} ${convertedColor}`;const baseAppearance=`. Appearance${weightString} ${strokeDescription}`;switch(fill){case "none":return `${baseAppearance} border, with no fill.`;case "white":return `${baseAppearance} border, with a white fill.`;case "solid":case "translucent":return `${baseAppearance} border, with a ${fill} ${convertedColor} fill.`;case undefined:return `${baseAppearance}.`;default:throw new UnreachableCaseError(fill)}}async function generateSpokenMathDetails(mathString){const engine=await SpeechRuleEngine.setup("en");let convertedSpeech="";const parsedContent=mathOnlyParser(mathString);for(const piece of parsedContent){switch(piece.type){case "math":convertedSpeech+=engine.texToSpeech(piece.content);break;case "specialCharacter":convertedSpeech+=piece.content.length>1?piece.content.slice(1):piece.content;break;default:convertedSpeech+=piece.content;break}}return convertedSpeech}async function joinLabelsAsSpokenMath(labels){if(labels.length===0){return ""}const spokenLabelPromises=labels.map(label=>{return generateSpokenMathDetails(label.text)});const spokenLabels=await Promise.all(spokenLabelPromises);return ` ${spokenLabels.join(", ")}`}
 
-const{convertRadiansToDegrees}=angles;const spaceUnderStyle$2={marginBottom:sizing.size_080};const labelContainerStyle$3={backgroundColor:semanticColor.core.background.base.default};const LockedEllipseSettings=props=>{const{center,radius,angle,color,labels,ariaLabel,fillStyle,strokeStyle,weight,expanded,editingDisabled=false,onToggle,onChangeProps,onMove,onRemove}=props;async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const spokenCenterX=await generateSpokenMathDetails(`$${center[0]}$`);const spokenCenterY=await generateSpokenMathDetails(`$${center[1]}$`);const spokenRotation=await generateSpokenMathDetails(`$${convertRadiansToDegrees(angle)}$`);const isCircle=radius[0]===radius[1];let str="";if(isCircle){str+=`Circle${visiblelabel} with radius ${radius[0]}`;}else {str+=`Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`;}str+=`, centered at ${spokenCenterX} comma ${spokenCenterY}`;if(!isCircle&&angle!==0){str+=`, rotated by ${spokenRotation} degrees`;}const ellipseAppearance=generateLockedFigureAppearanceDescription(color,strokeStyle,fillStyle,weight);str+=ellipseAppearance;return str}function handleCenterChange(newCoord){const xOffset=newCoord[0]-center[0];const yOffset=newCoord[1]-center[1];const newProps={center:newCoord};newProps.labels=labels.map(label=>({...label,coord:[label.coord[0]+xOffset,label.coord[1]+yOffset]}));onChangeProps(newProps);}function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$p.row} ${styles$p.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",tag:"span",weight:"bold",children:`Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`}),jsxRuntimeExports.jsx(EllipseSwatch,{color:props.color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:styles$p.row,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:center,style:spaceUnderStyle$2,disabled:editingDisabled,onChange:handleCenterChange}),jsxRuntimeExports.jsx(View,{className:styles$p.spaceUnder,children:jsxRuntimeExports.jsx(InfoTip,{children:"The coordinates for the center of the ellipse."})})]}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:radius,labels:["x radius","y radius"],style:spaceUnderStyle$2,disabled:editingDisabled,onChange:newCoords=>onChangeProps({radius:newCoords})}),jsxRuntimeExports.jsx(AngleInput,{angle:angle,onChange:newAngle=>onChangeProps({angle:newAngle})}),jsxRuntimeExports.jsxs(View,{className:`${styles$p.row} ${styles$p.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$p.row} ${styles$p.truncatedWidth} ${styles$p.fillLabel}`,children:["fill",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:fillStyle,disabled:editingDisabled,onChange:value=>onChangeProps({fillStyle:value}),options:{none:"none",white:"white",translucent:"translucent",solid:"solid"}})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,editingDisabled:editingDisabled,onChange:value=>onChangeProps({strokeStyle:value}),containerStyle:{marginBottom:sizing.size_080}}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),jsxRuntimeExports.jsx(View,{className:`${styles$p.horizontalRule} ${styles$p.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$p.horizontalRule} ${styles$p.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$p.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$3})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[center[0],center[1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},className:styles$p.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
+const{convertRadiansToDegrees}=angles;const spaceUnderStyle$2={marginBottom:sizing.size_080};const labelContainerStyle$3={backgroundColor:semanticColor.core.background.base.default};const LockedEllipseSettings=props=>{const{center,radius,angle,color,labels,ariaLabel,fillStyle,strokeStyle,weight,expanded,editingDisabled=false,onToggle,onChangeProps,onMove,onRemove}=props;async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const spokenCenterX=await generateSpokenMathDetails(`$${center[0]}$`);const spokenCenterY=await generateSpokenMathDetails(`$${center[1]}$`);const spokenRotation=await generateSpokenMathDetails(`$${convertRadiansToDegrees(angle)}$`);const isCircle=radius[0]===radius[1];let str="";if(isCircle){str+=`Circle${visiblelabel} with radius ${radius[0]}`;}else {str+=`Ellipse${visiblelabel} with x radius ${radius[0]} and y radius ${radius[1]}`;}str+=`, centered at ${spokenCenterX} comma ${spokenCenterY}`;if(!isCircle&&angle!==0){str+=`, rotated by ${spokenRotation} degrees`;}const ellipseAppearance=generateLockedFigureAppearanceDescription(color,strokeStyle,fillStyle,weight);str+=ellipseAppearance;return str}function handleCenterChange(newCoord){const xOffset=newCoord[0]-center[0];const yOffset=newCoord[1]-center[1];const newProps={center:newCoord};newProps.labels=labels.map(label=>({...label,coord:[label.coord[0]+xOffset,label.coord[1]+yOffset]}));onChangeProps(newProps);}function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$p.row} ${styles$p.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",tag:"span",weight:"bold",children:`Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`}),jsxRuntimeExports.jsx(EllipseSwatch,{color:props.color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:styles$p.row,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:center,style:spaceUnderStyle$2,disabled:editingDisabled,onChange:handleCenterChange}),jsxRuntimeExports.jsx(View,{className:styles$p.spaceUnder,children:jsxRuntimeExports.jsx(InfoTip,{children:"The coordinates for the center of the ellipse."})})]}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:radius,labels:["x radius","y radius"],style:spaceUnderStyle$2,disabled:editingDisabled,onChange:newCoords=>onChangeProps({radius:newCoords})}),jsxRuntimeExports.jsx(AngleInput,{angle:angle,onChange:newAngle=>onChangeProps({angle:newAngle})}),jsxRuntimeExports.jsxs(View,{className:`${styles$p.row} ${styles$p.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$p.row} ${styles$p.truncatedWidth} ${styles$p.fillLabel}`,children:["fill",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:fillStyle,disabled:editingDisabled,onChange:value=>onChangeProps({fillStyle:value}),options:{none:"none",white:"white",translucent:"translucent",solid:"solid"}})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,options:fillableStrokeStyleOptions,editingDisabled:editingDisabled,onChange:value=>onChangeProps({strokeStyle:value}),containerStyle:{marginBottom:sizing.size_080}}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),jsxRuntimeExports.jsx(View,{className:`${styles$p.horizontalRule} ${styles$p.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$p.horizontalRule} ${styles$p.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$p.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$3})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[center[0],center[1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},className:styles$p.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
 
 const LineSwatch=props=>{const{color,lineStyle}=props;return jsxRuntimeExports.jsx(View,{style:styles$l.container,children:jsxRuntimeExports.jsx(View,{"aria-label":`${color}, ${lineStyle}`,style:[styles$l.lineSwatch,{border:`5px ${lineStyle} ${lockedFigureColors[color]}`}]})})};const styles$l=StyleSheet.create({container:{backgroundColor:semanticColor.core.background.base.default,justifyContent:"center",padding:spacing.xSmall_8,borderRadius:spacing.xxxSmall_4},lineSwatch:{width:40}});
 
@@ -1730,7 +1732,7 @@ const examples={linear:["x + 5","1/2x - 2"],polynomial:["1/2x^2 + 3x - 4","(1/3)
 
 var styles$k = {"accordionHeader":"perseus_tXEvWJUz","axisMenu":"perseus_3xCRJZPa","copyPasteButton":"perseus_jQjspEma","domainMin":"perseus_sKC9BNwU","domainMax":"perseus_FKW3Nxnm","dropdownLabel":"perseus_yi6yIVkG","exampleContainer":"perseus_4hIadz5F","exampleContent":"perseus_Im9FqKCL","exampleRow":"perseus_XTGXne8n","rowSpace":"perseus_pLyszuFy","row":"perseus_QcmxeGEV","header":"perseus_n6hVg5Q8","colorRow":"perseus_lTxTG2gH","axisRow":"perseus_-uNx1-Ee","domainRow":"perseus_ledp5RIf","addButton":"perseus_hZeYfTVX","horizontalRule":"perseus_MdlHBO-Z","sectionTop":"perseus_f26X1kQX","dividerTight":"perseus_xD6EJyrU","exampleContentIndent":"perseus_BlYv-O-3"};
 
-const LockedFunctionSettings=props=>{const{color:lineColor,strokeStyle,equation,directionalAxis,domain,weight,ariaLabel,editingDisabled=false,onChangeProps,onMove,onRemove}=props;const labels=props.labels;const equationPrefix=directionalAxis==="x"?"y=":"x=";const lineLabel=`Function (${equationPrefix}${equation})`;const getDomainStringValues=domain=>{return [Number.isFinite(domain[0])?domain[0].toString():"",Number.isFinite(domain[1])?domain[1].toString():""]};const[domainEntries,setDomainEntries]=useState(getDomainStringValues(domain));const[exampleCategory,setExampleCategory]=useState(null);useEffect(()=>{setDomainEntries(getDomainStringValues(domain));},[domain]);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);let str=`Function${visiblelabel} with equation ${equationPrefix}${equation}`;if(Number.isFinite(domain[0])||Number.isFinite(domain[1])){str+=`, domain from ${domain[0]} to ${domain[1]}`;}const functionAppearance=generateLockedFigureAppearanceDescription(lineColor,strokeStyle,undefined,weight);str+=functionAppearance;return str}function handlePropChange(property,newValue){const updatedProps={};updatedProps[property]=newValue;onChangeProps(updatedProps);}function handleDomainChange(limitIndex,newValueString){const newDomainEntries=[...domainEntries];newDomainEntries[limitIndex]=newValueString;setDomainEntries(newDomainEntries);const newDomain=[...domain];let newValue=parseFloat(newValueString);if(newValueString===""&&limitIndex===0){newValue=-Infinity;}else if(newValueString===""&&limitIndex===1){newValue=Infinity;}newDomain[limitIndex]=newValue;onChangeProps({domain:newDomain});}const exampleContent=exampleCategory!=null?examples[exampleCategory]:["Select category to see example equations"];function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",className:styles$k.accordionHeader,children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,editingDisabled:editingDisabled,onChange:newValue=>{handlePropChange("strokeStyle",newValue);}})]}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.rowSpace} ${styles$k.axisRow}`,children:[jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:directionalAxis,disabled:editingDisabled,options:{x:"y =",y:"x ="},onChange:newValue=>{handlePropChange("directionalAxis",newValue);},"aria-label":"equation prefix",className:`${styles$k.dropdownLabel} ${styles$k.axisMenu}`}),jsxRuntimeExports.jsx(TextField,{type:"text","aria-label":"equation",value:equation,disabled:editingDisabled,onChange:newValue=>{handlePropChange("equation",newValue);},style:{flexGrow:1}})]}),jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.rowSpace} ${styles$k.domainRow}`,children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$k.dropdownLabel} ${styles$k.domainMin}`,children:["domain min",jsxRuntimeExports.jsx(TextField,{type:"number",style:{width:"calc(100% - 88.7px)"},value:domainEntries[0],disabled:editingDisabled,onChange:newValue=>{handleDomainChange(0,newValue);}})]}),jsxRuntimeExports.jsxs(BodyText,{tag:"label","aria-label":"domain max",className:`${styles$k.dropdownLabel} ${styles$k.domainMax}`,children:["max",jsxRuntimeExports.jsx(TextField,{type:"number",style:{width:"calc(100% - 36.2px)"},value:domainEntries[1],disabled:editingDisabled,onChange:newValue=>{handleDomainChange(1,newValue);}})]})]}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Example Functions"}),expanded:false,containerStyle:{background:semanticColor.core.background.base.subtle},panelStyle:{alignItems:"start",paddingBottom:sizing.size_120,flexDirection:"row",flexWrap:"wrap"},children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:styles$k.dropdownLabel,children:["Choose a category",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:exampleCategory,disabled:editingDisabled,options:{linear:"linear",polynomial:"polynomial",trigonometric:"trigonometric"},onChange:setExampleCategory,placeholder:"examples"})]}),exampleCategory!=null&&jsxRuntimeExports.jsx("ul",{className:styles$k.exampleContainer,children:exampleContent.map((example,index)=>jsxRuntimeExports.jsx(ExampleItem,{category:exampleCategory,example:example,index:index,editingDisabled:editingDisabled,pasteEquationFn:handlePropChange},index))})]}),jsxRuntimeExports.jsx(View,{className:`${styles$k.horizontalRule} ${styles$k.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$k.horizontalRule} ${styles$k.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$k.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>jsxRuntimeExports.jsx(LockedLabelSettings,{...label,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:{backgroundColor:semanticColor.core.background.base.default}},labelIndex)),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[0,-labels.length],color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$k.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};const ExampleItem=props=>{const{category,example,index,editingDisabled,pasteEquationFn}=props;const exampleId=useId();return jsxRuntimeExports.jsxs("li",{className:styles$k.exampleRow,children:[jsxRuntimeExports.jsx(IconButton,{icon:autoPasteIcon,kind:"tertiary","aria-label":"paste example","aria-describedby":exampleId,disabled:editingDisabled,onClick:()=>pasteEquationFn("equation",example),size:"medium",className:styles$k.copyPasteButton}),jsxRuntimeExports.jsx(IconButton,{icon:copyIcon,kind:"tertiary","aria-label":"copy example","aria-describedby":exampleId,disabled:editingDisabled,onClick:()=>navigator.clipboard.writeText(example),size:"medium",className:styles$k.copyPasteButton}),jsxRuntimeExports.jsx(View,{className:`${styles$k.exampleContent} ${styles$k.exampleContentIndent}`,id:exampleId,children:example})]},`${category}-${index}`)};
+const LockedFunctionSettings=props=>{const{color:lineColor,strokeStyle,equation,directionalAxis,domain,weight,ariaLabel,editingDisabled=false,onChangeProps,onMove,onRemove}=props;const labels=props.labels;const equationPrefix=directionalAxis==="x"?"y=":"x=";const lineLabel=`Function (${equationPrefix}${equation})`;const getDomainStringValues=domain=>{return [Number.isFinite(domain[0])?domain[0].toString():"",Number.isFinite(domain[1])?domain[1].toString():""]};const[domainEntries,setDomainEntries]=useState(getDomainStringValues(domain));const[exampleCategory,setExampleCategory]=useState(null);useEffect(()=>{setDomainEntries(getDomainStringValues(domain));},[domain]);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);let str=`Function${visiblelabel} with equation ${equationPrefix}${equation}`;if(Number.isFinite(domain[0])||Number.isFinite(domain[1])){str+=`, domain from ${domain[0]} to ${domain[1]}`;}const functionAppearance=generateLockedFigureAppearanceDescription(lineColor,strokeStyle,undefined,weight);str+=functionAppearance;return str}function handlePropChange(property,newValue){const updatedProps={};updatedProps[property]=newValue;onChangeProps(updatedProps);}function handleDomainChange(limitIndex,newValueString){const newDomainEntries=[...domainEntries];newDomainEntries[limitIndex]=newValueString;setDomainEntries(newDomainEntries);const newDomain=[...domain];let newValue=parseFloat(newValueString);if(newValueString===""&&limitIndex===0){newValue=-Infinity;}else if(newValueString===""&&limitIndex===1){newValue=Infinity;}newDomain[limitIndex]=newValue;onChangeProps({domain:newDomain});}const exampleContent=exampleCategory!=null?examples[exampleCategory]:["Select category to see example equations"];function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",className:styles$k.accordionHeader,children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,options:lineStrokeStyleOptions,editingDisabled:editingDisabled,onChange:newValue=>{handlePropChange("strokeStyle",newValue);}})]}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.rowSpace} ${styles$k.axisRow}`,children:[jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:directionalAxis,disabled:editingDisabled,options:{x:"y =",y:"x ="},onChange:newValue=>{handlePropChange("directionalAxis",newValue);},"aria-label":"equation prefix",className:`${styles$k.dropdownLabel} ${styles$k.axisMenu}`}),jsxRuntimeExports.jsx(TextField,{type:"text","aria-label":"equation",value:equation,disabled:editingDisabled,onChange:newValue=>{handlePropChange("equation",newValue);},style:{flexGrow:1}})]}),jsxRuntimeExports.jsxs(View,{className:`${styles$k.row} ${styles$k.rowSpace} ${styles$k.domainRow}`,children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$k.dropdownLabel} ${styles$k.domainMin}`,children:["domain min",jsxRuntimeExports.jsx(TextField,{type:"number",style:{width:"calc(100% - 88.7px)"},value:domainEntries[0],disabled:editingDisabled,onChange:newValue=>{handleDomainChange(0,newValue);}})]}),jsxRuntimeExports.jsxs(BodyText,{tag:"label","aria-label":"domain max",className:`${styles$k.dropdownLabel} ${styles$k.domainMax}`,children:["max",jsxRuntimeExports.jsx(TextField,{type:"number",style:{width:"calc(100% - 36.2px)"},value:domainEntries[1],disabled:editingDisabled,onChange:newValue=>{handleDomainChange(1,newValue);}})]})]}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Example Functions"}),expanded:false,containerStyle:{background:semanticColor.core.background.base.subtle},panelStyle:{alignItems:"start",paddingBottom:sizing.size_120,flexDirection:"row",flexWrap:"wrap"},children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:styles$k.dropdownLabel,children:["Choose a category",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:exampleCategory,disabled:editingDisabled,options:{linear:"linear",polynomial:"polynomial",trigonometric:"trigonometric"},onChange:setExampleCategory,placeholder:"examples"})]}),exampleCategory!=null&&jsxRuntimeExports.jsx("ul",{className:styles$k.exampleContainer,children:exampleContent.map((example,index)=>jsxRuntimeExports.jsx(ExampleItem,{category:exampleCategory,example:example,index:index,editingDisabled:editingDisabled,pasteEquationFn:handlePropChange},index))})]}),jsxRuntimeExports.jsx(View,{className:`${styles$k.horizontalRule} ${styles$k.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$k.horizontalRule} ${styles$k.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$k.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>jsxRuntimeExports.jsx(LockedLabelSettings,{...label,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:{backgroundColor:semanticColor.core.background.base.default}},labelIndex)),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[0,-labels.length],color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$k.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};const ExampleItem=props=>{const{category,example,index,editingDisabled,pasteEquationFn}=props;const exampleId=useId();return jsxRuntimeExports.jsxs("li",{className:styles$k.exampleRow,children:[jsxRuntimeExports.jsx(IconButton,{icon:autoPasteIcon,kind:"tertiary","aria-label":"paste example","aria-describedby":exampleId,disabled:editingDisabled,onClick:()=>pasteEquationFn("equation",example),size:"medium",className:styles$k.copyPasteButton}),jsxRuntimeExports.jsx(IconButton,{icon:copyIcon,kind:"tertiary","aria-label":"copy example","aria-describedby":exampleId,disabled:editingDisabled,onClick:()=>navigator.clipboard.writeText(example),size:"medium",className:styles$k.copyPasteButton}),jsxRuntimeExports.jsx(View,{className:`${styles$k.exampleContent} ${styles$k.exampleContentIndent}`,id:exampleId,children:example})]},`${category}-${index}`)};
 
 var styles$j = {"row":"perseus_nBzKD32m","header":"perseus_WNElRLBL","spaceUnder":"perseus_sEXwoqeH","kindLabel":"perseus_MohIPkUC","colorRow":"perseus_WDC67hHF","errorText":"perseus_57zeueK9","addButton":"perseus_se9nOPo3","horizontalRule":"perseus_XnNJefSQ","sectionTop":"perseus_mCvSm-pU","dividerTight":"perseus_34Yfh9Ri"};
 
@@ -1739,17 +1741,17 @@ var styles$i = {"row":"perseus_PsQTUHiB","addButton":"perseus_DzebTj-c","horizon
 const spaceUnderStyle$1={marginBottom:sizing.size_080};const LockedPointSettings=props=>{const{headerLabel,editingDisabled=false,coord,color:pointColor,filled=true,labels,ariaLabel,onChangeProps,onMove,onRemove,showPoint,error,expanded,onTogglePoint,onToggle}=props;const isDefiningPoint=!onMove&&!onRemove;async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const spokenX=await generateSpokenMathDetails(`$${coord[0]}$`);const spokenY=await generateSpokenMathDetails(`$${coord[1]}$`);let str=`Point${visiblelabel} at ${spokenX} comma ${spokenY}`;const pointAppearance=generateLockedFigureAppearanceDescription(pointColor,"solid",filled?undefined:"none");str+=pointAppearance;return str}function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handleCoordChange(newCoord){const xOffset=newCoord[0]-coord[0];const yOffset=newCoord[1]-coord[1];const newProps={coord:newCoord};newProps.labels=labels.map(label=>({...label,coord:[label.coord[0]+xOffset,label.coord[1]+yOffset]}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,containerStyle:isDefiningPoint?{marginTop:sizing.size_080,marginBottom:0,marginLeft:-sizing.size_040,marginRight:-sizing.size_040,backgroundColor:semanticColor.core.background.base.default}:undefined,panelStyle:isDefiningPoint?{paddingBottom:sizing.size_060}:undefined,header:jsxRuntimeExports.jsxs(View,{className:styles$i.row,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`${headerLabel||"Point"} (${coord[0]}, ${coord[1]})`}),jsxRuntimeExports.jsx(ColorSwatch,{color:pointColor,filled:filled})]}),children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:coord,style:spaceUnderStyle$1,disabled:editingDisabled,onChange:handleCoordChange,error:!!error}),onTogglePoint&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"show point on graph",checked:!!showPoint,style:showPoint&&spaceUnderStyle$1,disabled:editingDisabled,onChange:onTogglePoint}),(!isDefiningPoint||showPoint)&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:pointColor,onChange:handleColorChange,style:spaceUnderStyle$1,editingDisabled:editingDisabled}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"open point",checked:!filled,disabled:editingDisabled,onChange:newValue=>{onChangeProps({filled:!newValue});}})]}),!isDefiningPoint&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(View,{className:`${styles$i.horizontalRule} ${styles$i.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}})]}),jsxRuntimeExports.jsx(View,{className:`${styles$i.horizontalRule} ${styles$i.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$i.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,containerStyle:!isDefiningPoint&&{backgroundColor:semanticColor.core.background.base.default},expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);}})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[coord[0]+.5,coord[1]-labels.length],color:pointColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$i.addButton,children:"Add visible label"}),onRemove&&jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
 
 const lengthZeroStr="The line cannot have length 0.";const labelContainerStyle$2={backgroundColor:semanticColor.core.background.base.default};const LockedLineSettings=props=>{const{kind,points,color:lineColor,lineStyle="solid",showPoint1,showPoint2,weight,labels,ariaLabel,editingDisabled=false,onChangeProps,onMove,onRemove}=props;const[point1,point2]=points;const capitalizeKind=kind.charAt(0).toUpperCase()+kind.slice(1);const lineLabel=`${capitalizeKind} (${point1.coord[0]},
-        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;const isInvalid=vector.equal(point1.coord,point2.coord);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const point1VisibleLabel=await joinLabelsAsSpokenMath(point1.labels);const point2VisibleLabel=await joinLabelsAsSpokenMath(point2.labels);const spokenPoint1X=await generateSpokenMathDetails(`$${point1.coord[0]}$`);const spokenPoint1Y=await generateSpokenMathDetails(`$${point1.coord[1]}$`);const spokenPoint2X=await generateSpokenMathDetails(`$${point2.coord[0]}$`);const spokenPoint2Y=await generateSpokenMathDetails(`$${point2.coord[1]}$`);let str;switch(kind){case "line":str=`${capitalizeKind}${visiblelabel} through point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} and point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;case "ray":str=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} through point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;case "segment":str=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} to point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;default:throw new UnreachableCaseError(kind,"Unknown line kind")}const lineAppearance=generateLockedFigureAppearanceDescription(lineColor,lineStyle,undefined,weight);str+=lineAppearance;return str}function handleChangePoint(newPointProps,index){const newPoints=[...points];newPoints[index]={...points[index],...newPointProps};const oldMidpoint=vec.midpoint(points[0].coord,points[1].coord);const newMidpoint=vec.midpoint(newPoints[0].coord,newPoints[1].coord);const offset=[newMidpoint[0]-oldMidpoint[0],newMidpoint[1]-oldMidpoint[1]];const newLabels=labels.map((label,labelIndex)=>({...label,coord:[label.coord[0]+offset[0],label.coord[1]+offset[1]]}));onChangeProps({points:newPoints,labels:newLabels});}function handleColorChange(newColor){const newLabels=labels.map(label=>({...label,color:newColor}));onChangeProps({color:newColor,points:[{...point1,color:newColor,labels:point1.labels.map(label=>({...label,color:newColor}))},{...point2,color:newColor,labels:point2.labels.map(label=>({...label,color:newColor}))}],labels:newLabels});}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$j.row} ${styles$j.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:lineStyle})]}),children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$j.row} ${styles$j.spaceUnder} ${styles$j.kindLabel}`,children:["kind",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:kind,disabled:editingDisabled,onChange:value=>onChangeProps({kind:value}),options:{line:"line",ray:"ray",segment:"segment"}})]}),jsxRuntimeExports.jsxs(View,{className:`${styles$j.row} ${styles$j.spaceUnder} ${styles$j.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:lineStyle,editingDisabled:editingDisabled,onChange:value=>onChangeProps({lineStyle:value})})]}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),isInvalid&&jsxRuntimeExports.jsx(BodyText,{className:styles$j.errorText,children:lengthZeroStr}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 1",expanded:true,showPoint:showPoint1,error:isInvalid?lengthZeroStr:null,...point1,editingDisabled:editingDisabled,onTogglePoint:newValue=>onChangeProps({showPoint1:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,0)}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 2",expanded:true,showPoint:showPoint2,error:isInvalid?lengthZeroStr:null,...point2,editingDisabled:editingDisabled,onTogglePoint:newValue=>onChangeProps({showPoint2:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,1)}),jsxRuntimeExports.jsx(View,{className:`${styles$j.horizontalRule} ${styles$j.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$j.horizontalRule} ${styles$j.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$j.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$2})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=vec.add(vec.scale(offsetPerLabel,labels.length),vec.midpoint(points[0].coord,points[1].coord));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$j.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
+        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;const isInvalid=vector.equal(point1.coord,point2.coord);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const point1VisibleLabel=await joinLabelsAsSpokenMath(point1.labels);const point2VisibleLabel=await joinLabelsAsSpokenMath(point2.labels);const spokenPoint1X=await generateSpokenMathDetails(`$${point1.coord[0]}$`);const spokenPoint1Y=await generateSpokenMathDetails(`$${point1.coord[1]}$`);const spokenPoint2X=await generateSpokenMathDetails(`$${point2.coord[0]}$`);const spokenPoint2Y=await generateSpokenMathDetails(`$${point2.coord[1]}$`);let str;switch(kind){case "line":str=`${capitalizeKind}${visiblelabel} through point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} and point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;case "ray":str=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} through point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;case "segment":str=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} to point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;break;default:throw new UnreachableCaseError(kind,"Unknown line kind")}const lineAppearance=generateLockedFigureAppearanceDescription(lineColor,lineStyle,undefined,weight);str+=lineAppearance;return str}function handleChangePoint(newPointProps,index){const newPoints=[...points];newPoints[index]={...points[index],...newPointProps};const oldMidpoint=vec.midpoint(points[0].coord,points[1].coord);const newMidpoint=vec.midpoint(newPoints[0].coord,newPoints[1].coord);const offset=[newMidpoint[0]-oldMidpoint[0],newMidpoint[1]-oldMidpoint[1]];const newLabels=labels.map((label,labelIndex)=>({...label,coord:[label.coord[0]+offset[0],label.coord[1]+offset[1]]}));onChangeProps({points:newPoints,labels:newLabels});}function handleColorChange(newColor){const newLabels=labels.map(label=>({...label,color:newColor}));onChangeProps({color:newColor,points:[{...point1,color:newColor,labels:point1.labels.map(label=>({...label,color:newColor}))},{...point2,color:newColor,labels:point2.labels.map(label=>({...label,color:newColor}))}],labels:newLabels});}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$j.row} ${styles$j.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:lineStyle})]}),children:[jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$j.row} ${styles$j.spaceUnder} ${styles$j.kindLabel}`,children:["kind",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:kind,disabled:editingDisabled,onChange:value=>onChangeProps({kind:value}),options:{line:"line",ray:"ray",segment:"segment"}})]}),jsxRuntimeExports.jsxs(View,{className:`${styles$j.row} ${styles$j.spaceUnder} ${styles$j.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:lineStyle,options:lineStrokeStyleOptions,editingDisabled:editingDisabled,onChange:value=>onChangeProps({lineStyle:value})})]}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),isInvalid&&jsxRuntimeExports.jsx(BodyText,{className:styles$j.errorText,children:lengthZeroStr}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 1",expanded:true,showPoint:showPoint1,error:isInvalid?lengthZeroStr:null,...point1,editingDisabled:editingDisabled,onTogglePoint:newValue=>onChangeProps({showPoint1:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,0)}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 2",expanded:true,showPoint:showPoint2,error:isInvalid?lengthZeroStr:null,...point2,editingDisabled:editingDisabled,onTogglePoint:newValue=>onChangeProps({showPoint2:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,1)}),jsxRuntimeExports.jsx(View,{className:`${styles$j.horizontalRule} ${styles$j.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$j.horizontalRule} ${styles$j.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$j.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$2})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=vec.add(vec.scale(offsetPerLabel,labels.length),vec.midpoint(points[0].coord,points[1].coord));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$j.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
 
 var styles$h = {"row":"perseus_7gvpLIxX","header":"perseus_a9dhxydf","spaceUnder":"perseus_FMC5CN4y","colorRow":"perseus_bj3iyVpL","fillLabel":"perseus_gbGj72Hu","icon":"perseus_DYnWU1Yr","polygonActionsContainer":"perseus_YhcLg4qs","movementButtonsContainer":"perseus_DtEDhGzL","truncatedWidth":"perseus_14L-Mr6p","addButton":"perseus_dc8k1hRY","horizontalRule":"perseus_iR-te9L8","sectionTop":"perseus_q3l-Nth6","dividerTight":"perseus_WNA-ZWQ8"};
 
 const PolygonSwatch=props=>{const{color,fillStyle,strokeStyle}=props;return jsxRuntimeExports.jsx(View,{"aria-label":`${color}, stroke ${strokeStyle}, fill ${fillStyle}`,style:[styles$g.container,{border:`4px ${strokeStyle} ${lockedFigureColors[color]}`}],children:jsxRuntimeExports.jsx(View,{style:[styles$g.innerSquare,{backgroundColor:lockedFigureColors[color],opacity:fillStyle==="white"?0:lockedFigureFillStyles[fillStyle]}]})})};const styles$g=StyleSheet.create({container:{outline:`2px solid ${semanticColor.focus.inner}`,width:spacing.large_24,height:spacing.large_24,backgroundColor:semanticColor.core.background.base.default,alignItems:"center",justifyContent:"center"},innerSquare:{width:20,height:20}});
 
-const spaceUnderStyle={marginBottom:sizing.size_080};const pointAccordionContainerStyle={backgroundColor:semanticColor.core.background.base.default};const pointAccordionPanelStyle={alignItems:"start"};const labelContainerStyle$1={backgroundColor:semanticColor.core.background.base.default};const LockedPolygonSettings=props=>{const{points,color,showVertices,fillStyle,strokeStyle,weight,labels,ariaLabel,expanded,editingDisabled=false,onToggle,onChangeProps,onMove,onRemove}=props;async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);let str=`Polygon${visiblelabel} with ${points.length} sides, vertices at `;const pointsList=await Promise.all(points.map(async([x,y])=>{const spokenX=await generateSpokenMathDetails(`$${x}$`);const spokenY=await generateSpokenMathDetails(`$${y}$`);return `${spokenX} comma ${spokenY}`}));str+=pointsList.join(", ");const polygonAppearance=generateLockedFigureAppearanceDescription(color,strokeStyle,fillStyle,weight);str+=polygonAppearance;return str}function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handlePolygonMove(movement){switch(movement){case "up":onChangeProps({points:points.map(([x,y])=>[x,y+1]),labels:labels.map(label=>({...label,coord:[label.coord[0],label.coord[1]+1]}))});break;case "down":onChangeProps({points:points.map(([x,y])=>[x,y-1]),labels:labels.map(label=>({...label,coord:[label.coord[0],label.coord[1]-1]}))});break;case "left":onChangeProps({points:points.map(([x,y])=>[x-1,y]),labels:labels.map(label=>({...label,coord:[label.coord[0]-1,label.coord[1]]}))});break;case "right":onChangeProps({points:points.map(([x,y])=>[x+1,y]),labels:labels.map(label=>({...label,coord:[label.coord[0]+1,label.coord[1]]}))});break}}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Polygon, ${points.length} sides`}),jsxRuntimeExports.jsx(PolygonSwatch,{color:color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$h.row} ${styles$h.truncatedWidth} ${styles$h.fillLabel}`,children:["fill",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:fillStyle,disabled:editingDisabled,onChange:value=>onChangeProps({fillStyle:value}),options:{none:"none",white:"white",translucent:"translucent",solid:"solid"}})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,editingDisabled:editingDisabled,onChange:value=>onChangeProps({strokeStyle:value}),containerStyle:spaceUnderStyle}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value}),containerStyle:spaceUnderStyle}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"show vertices",checked:showVertices,disabled:editingDisabled,onChange:newValue=>onChangeProps({showVertices:newValue}),style:spaceUnderStyle}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Points"}),expanded:true,containerStyle:pointAccordionContainerStyle,panelStyle:pointAccordionPanelStyle,children:[points.map((point,index)=>{const pointLabel=String.fromCharCode(65+index);return jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.spaceUnder}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",children:`${pointLabel}:`}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:point,labels:["x","y"],style:{marginInlineStart:sizing.size_160},disabled:editingDisabled,onChange:newValue=>{const newPoints=[...points];newPoints[index]=newValue;props.onChangeProps({points:newPoints});}}),points.length>3&&jsxRuntimeExports.jsx(IconButton,{"aria-label":`Delete polygon point ${pointLabel}`,icon:minusCircle,kind:"tertiary",actionType:"destructive",disabled:editingDisabled,onClick:()=>{const newPoints=[...points];newPoints.splice(index,1);props.onChangeProps({points:newPoints});},className:styles$h.icon})]},`locked-polygon-point-index-${index}`)}),jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.polygonActionsContainer}`,children:[jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{props.onChangeProps({points:[...points,[0,0]]});},children:"Add point"}),jsxRuntimeExports.jsx(Spring,{}),jsxRuntimeExports.jsxs(View,{className:styles$h.movementButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon up",size:"small",icon:arrowFatUp,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("up")}),jsxRuntimeExports.jsxs(View,{className:styles$h.row,children:[jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon left",size:"small",icon:arrowFatLeft,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("left")}),jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon down",size:"small",icon:arrowFatDown,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("down")}),jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon right",size:"small",icon:arrowFatRight,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("right")})]})]})]})]}),jsxRuntimeExports.jsx(View,{className:`${styles$h.horizontalRule} ${styles$h.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$h.horizontalRule} ${styles$h.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$h.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$1})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[points[0][0],points[0][1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},className:styles$h.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
+const spaceUnderStyle={marginBottom:sizing.size_080};const pointAccordionContainerStyle={backgroundColor:semanticColor.core.background.base.default};const pointAccordionPanelStyle={alignItems:"start"};const labelContainerStyle$1={backgroundColor:semanticColor.core.background.base.default};const LockedPolygonSettings=props=>{const{points,color,showVertices,fillStyle,strokeStyle,weight,labels,ariaLabel,expanded,editingDisabled=false,onToggle,onChangeProps,onMove,onRemove}=props;async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);let str=`Polygon${visiblelabel} with ${points.length} sides, vertices at `;const pointsList=await Promise.all(points.map(async([x,y])=>{const spokenX=await generateSpokenMathDetails(`$${x}$`);const spokenY=await generateSpokenMathDetails(`$${y}$`);return `${spokenX} comma ${spokenY}`}));str+=pointsList.join(", ");const polygonAppearance=generateLockedFigureAppearanceDescription(color,strokeStyle,fillStyle,weight);str+=polygonAppearance;return str}function handleColorChange(newValue){const newProps={color:newValue};newProps.labels=labels.map(label=>({...label,color:newValue}));onChangeProps(newProps);}function handlePolygonMove(movement){switch(movement){case "up":onChangeProps({points:points.map(([x,y])=>[x,y+1]),labels:labels.map(label=>({...label,coord:[label.coord[0],label.coord[1]+1]}))});break;case "down":onChangeProps({points:points.map(([x,y])=>[x,y-1]),labels:labels.map(label=>({...label,coord:[label.coord[0],label.coord[1]-1]}))});break;case "left":onChangeProps({points:points.map(([x,y])=>[x-1,y]),labels:labels.map(label=>({...label,coord:[label.coord[0]-1,label.coord[1]]}))});break;case "right":onChangeProps({points:points.map(([x,y])=>[x+1,y]),labels:labels.map(label=>({...label,coord:[label.coord[0]+1,label.coord[1]]}))});break}}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.header}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Polygon, ${points.length} sides`}),jsxRuntimeExports.jsx(PolygonSwatch,{color:color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.colorRow}`,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,editingDisabled:editingDisabled,onChange:handleColorChange}),jsxRuntimeExports.jsxs(BodyText,{tag:"label",className:`${styles$h.row} ${styles$h.truncatedWidth} ${styles$h.fillLabel}`,children:["fill",jsxRuntimeExports.jsx(TypedSingleSelect,{selectedValue:fillStyle,disabled:editingDisabled,onChange:value=>onChangeProps({fillStyle:value}),options:{none:"none",white:"white",translucent:"translucent",solid:"solid"}})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,options:fillableStrokeStyleOptions,editingDisabled:editingDisabled,onChange:value=>onChangeProps({strokeStyle:value}),containerStyle:spaceUnderStyle}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value}),containerStyle:spaceUnderStyle}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"show vertices",checked:showVertices,disabled:editingDisabled,onChange:newValue=>onChangeProps({showVertices:newValue}),style:spaceUnderStyle}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Points"}),expanded:true,containerStyle:pointAccordionContainerStyle,panelStyle:pointAccordionPanelStyle,children:[points.map((point,index)=>{const pointLabel=String.fromCharCode(65+index);return jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.spaceUnder}`,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",children:`${pointLabel}:`}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:point,labels:["x","y"],style:{marginInlineStart:sizing.size_160},disabled:editingDisabled,onChange:newValue=>{const newPoints=[...points];newPoints[index]=newValue;props.onChangeProps({points:newPoints});}}),points.length>3&&jsxRuntimeExports.jsx(IconButton,{"aria-label":`Delete polygon point ${pointLabel}`,icon:minusCircle,kind:"tertiary",actionType:"destructive",disabled:editingDisabled,onClick:()=>{const newPoints=[...points];newPoints.splice(index,1);props.onChangeProps({points:newPoints});},className:styles$h.icon})]},`locked-polygon-point-index-${index}`)}),jsxRuntimeExports.jsxs(View,{className:`${styles$h.row} ${styles$h.polygonActionsContainer}`,children:[jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{props.onChangeProps({points:[...points,[0,0]]});},children:"Add point"}),jsxRuntimeExports.jsx(Spring,{}),jsxRuntimeExports.jsxs(View,{className:styles$h.movementButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon up",size:"small",icon:arrowFatUp,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("up")}),jsxRuntimeExports.jsxs(View,{className:styles$h.row,children:[jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon left",size:"small",icon:arrowFatLeft,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("left")}),jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon down",size:"small",icon:arrowFatDown,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("down")}),jsxRuntimeExports.jsx(IconButton,{"aria-label":"Move polygon right",size:"small",icon:arrowFatRight,kind:"tertiary",disabled:editingDisabled,onClick:()=>handlePolygonMove("right")})]})]})]})]}),jsxRuntimeExports.jsx(View,{className:`${styles$h.horizontalRule} ${styles$h.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$h.horizontalRule} ${styles$h.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$h.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle$1})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[points[0][0],points[0][1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},className:styles$h.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
 
 var styles$f = {"row":"perseus_Ug-lFL8r","errorText":"perseus_6gvwJ939","addButton":"perseus_vcxh5KIo","horizontalRule":"perseus_HRitDKmQ","sectionTop":"perseus_QY6CaDZH","dividerTight":"perseus_QDq7G5V4"};
 
-const lengthErrorMessage="The vector cannot have length 0.";const coordsAccordionContainerStyle={marginTop:sizing.size_080,marginBottom:0,marginLeft:-sizing.size_040,marginRight:-sizing.size_040,backgroundColor:semanticColor.core.background.base.default};const coordsAccordionPanelStyle={paddingBottom:sizing.size_160};const labelContainerStyle={backgroundColor:semanticColor.core.background.base.default};const LockedVectorSettings=props=>{const{points,color:lineColor,weight,labels,ariaLabel,editingDisabled=false,onChangeProps,onMove,onRemove}=props;const[tail,tip]=points;const lineLabel=`Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;const isInvalid=vector.equal(tail,tip);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const spokenTailX=await generateSpokenMathDetails(`$${tail[0]}$`);const spokenTailY=await generateSpokenMathDetails(`$${tail[1]}$`);const spokenTipX=await generateSpokenMathDetails(`$${tip[0]}$`);const spokenTipY=await generateSpokenMathDetails(`$${tip[1]}$`);let str=`Vector${visiblelabel} from ${spokenTailX} comma ${spokenTailY} to ${spokenTipX} comma ${spokenTipY}`;const vectorAppearance=generateLockedFigureAppearanceDescription(lineColor,"solid",undefined,weight);str+=vectorAppearance;return str}function handleChangePoint(newCoord,index){if(typeof newCoord!=="undefined"){const newPoints=[...points];newPoints[index]=[...newCoord];const oldMidpoint=vec.midpoint(tail,tip);const newMidpoint=vec.midpoint(newPoints[0],newPoints[1]);const offset=vec.sub(newMidpoint,oldMidpoint);const newLabels=labels.map(label=>({...label,coord:vec.add(label.coord,offset)}));onChangeProps({points:newPoints,labels:newLabels});}}function handleColorChange(newColor){const newProps={color:newColor};newProps.labels=labels.map(label=>({...label,color:newColor}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:styles$f.row,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:"solid"})]}),children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange,style:{marginBottom:sizing.size_080}}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),isInvalid&&jsxRuntimeExports.jsx(BodyText,{className:styles$f.errorText,children:lengthErrorMessage}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:coordsAccordionContainerStyle,panelStyle:coordsAccordionPanelStyle,header:jsxRuntimeExports.jsx(View,{className:styles$f.row,children:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Tail (${tail[0]}, ${tail[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tail,error:isInvalid,disabled:editingDisabled,onChange:newProps=>{handleChangePoint(newProps,0);}})}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:coordsAccordionContainerStyle,panelStyle:coordsAccordionPanelStyle,header:jsxRuntimeExports.jsx(View,{className:styles$f.row,children:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Tip (${tip[0]}, ${tip[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tip,error:isInvalid,disabled:editingDisabled,onChange:newProps=>{handleChangePoint(newProps,1);}})}),jsxRuntimeExports.jsx(View,{className:`${styles$f.horizontalRule} ${styles$f.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$f.horizontalRule} ${styles$f.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$f.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=vec.add(vec.scale(offsetPerLabel,labels.length),vec.midpoint(tail,tip));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$f.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
+const lengthErrorMessage="The vector cannot have length 0.";const coordsAccordionContainerStyle={marginTop:sizing.size_080,marginBottom:0,marginLeft:-sizing.size_040,marginRight:-sizing.size_040,backgroundColor:semanticColor.core.background.base.default};const coordsAccordionPanelStyle={paddingBottom:sizing.size_160};const labelContainerStyle={backgroundColor:semanticColor.core.background.base.default};const LockedVectorSettings=props=>{const{points,color:lineColor,weight,labels,ariaLabel,editingDisabled=false,onChangeProps,onMove,onRemove}=props;const[tail,tip]=points;const lineLabel=`Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;const isInvalid=vector.equal(tail,tip);async function getPrepopulatedAriaLabel(){const visiblelabel=await joinLabelsAsSpokenMath(labels);const spokenTailX=await generateSpokenMathDetails(`$${tail[0]}$`);const spokenTailY=await generateSpokenMathDetails(`$${tail[1]}$`);const spokenTipX=await generateSpokenMathDetails(`$${tip[0]}$`);const spokenTipY=await generateSpokenMathDetails(`$${tip[1]}$`);let str=`Vector${visiblelabel} from ${spokenTailX} comma ${spokenTailY} to ${spokenTipX} comma ${spokenTipY}`;const vectorAppearance=generateLockedFigureAppearanceDescription(lineColor,"solid",undefined,weight);str+=vectorAppearance;return str}function handleChangePoint(newCoord,index){if(typeof newCoord!=="undefined"){const newPoints=[...points];newPoints[index]=[...newCoord];const oldMidpoint=vec.midpoint(tail,tip);const newMidpoint=vec.midpoint(newPoints[0],newPoints[1]);const offset=vec.sub(newMidpoint,oldMidpoint);const newLabels=labels.map(label=>({...label,coord:vec.add(label.coord,offset)}));onChangeProps({points:newPoints,labels:newLabels});}}function handleColorChange(newColor){const newProps={color:newColor};newProps.labels=labels.map(label=>({...label,color:newColor}));onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(View,{className:styles$f.row,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:lineLabel}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:"solid"})]}),children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,editingDisabled:editingDisabled,onChange:handleColorChange,style:{marginBlockEnd:sizing.size_080}}),jsxRuntimeExports.jsx(LineWeightSelect,{selectedValue:weight,editingDisabled:editingDisabled,onChange:value=>onChangeProps({weight:value})}),isInvalid&&jsxRuntimeExports.jsx(BodyText,{className:styles$f.errorText,children:lengthErrorMessage}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:coordsAccordionContainerStyle,panelStyle:coordsAccordionPanelStyle,header:jsxRuntimeExports.jsx(View,{className:styles$f.row,children:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Tail (${tail[0]}, ${tail[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tail,error:isInvalid,disabled:editingDisabled,onChange:newProps=>{handleChangePoint(newProps,0);}})}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:coordsAccordionContainerStyle,panelStyle:coordsAccordionPanelStyle,header:jsxRuntimeExports.jsx(View,{className:styles$f.row,children:jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:`Tip (${tip[0]}, ${tip[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tip,error:isInvalid,disabled:editingDisabled,onChange:newProps=>{handleChangePoint(newProps,1);}})}),jsxRuntimeExports.jsx(View,{className:`${styles$f.horizontalRule} ${styles$f.sectionTop}`}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,editingDisabled:editingDisabled,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(View,{className:`${styles$f.horizontalRule} ${styles$f.dividerTight}`}),jsxRuntimeExports.jsx(BodyText,{className:styles$f.sectionTop,children:"Visible labels"}),labels.map((label,labelIndex)=>createElement(LockedLabelSettings,{...label,key:labelIndex,editingDisabled:editingDisabled,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:labelContainerStyle})),jsxRuntimeExports.jsx(Button,{kind:"tertiary",startIcon:plusCircle,disabled:editingDisabled,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=vec.add(vec.scale(offsetPerLabel,labels.length),vec.midpoint(tail,tip));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},className:styles$f.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,editingDisabled:editingDisabled,onMove:onMove,onRemove:onRemove})]})};
 
 const LockedFigureSettings=props=>{switch(props.type){case "point":return jsxRuntimeExports.jsx(LockedPointSettings,{...props});case "line":return jsxRuntimeExports.jsx(LockedLineSettings,{...props});case "vector":return jsxRuntimeExports.jsx(LockedVectorSettings,{...props});case "ellipse":return jsxRuntimeExports.jsx(LockedEllipseSettings,{...props});case "polygon":return jsxRuntimeExports.jsx(LockedPolygonSettings,{...props});case "function":return jsxRuntimeExports.jsx(LockedFunctionSettings,{...props});case "label":return jsxRuntimeExports.jsx(LockedLabelSettings,{...props});default:throw new UnreachableCaseError(props)}};
 
@@ -1765,9 +1767,9 @@ const StartCoordsAbsoluteValue=props=>{const{startCoords,onChange,pointLabels,on
 
 const{getClockwiseAngle}=angles;function getStartCoords(graph){if("startCoords"in graph){return graph.startCoords}return undefined}function getDefaultGraphStartCoords(graph,range,step){switch(graph.type){case "absolute-value":return getAbsoluteValueCoords({...graph,startCoords:undefined},range,step);case "linear":case "ray":return getLineCoords({...graph,startCoords:undefined},range,step);case "vector":return getVectorCoords({...graph,startCoords:undefined},range,step);case "segment":return getSegmentCoords({...graph,startCoords:undefined},range,step);case "linear-system":return getLinearSystemCoords({...graph,startCoords:undefined},range,step);case "circle":const startCoords=getCircleCoords({...graph,startCoords:undefined});const radius=vector.length(vector.subtract(startCoords.radiusPoint,startCoords.center));return {center:startCoords.center,radius};case "sinusoid":return getSinusoidCoords({...graph,startCoords:undefined},range,step);case "exponential":{const{coords,asymptote}=getExponentialCoords({...graph,startCoords:undefined},range,step);return {coords,asymptote}}case "tangent":return getTangentCoords({...graph,startCoords:undefined},range,step);case "quadratic":return getQuadraticCoords({...graph,startCoords:undefined},range,step);case "point":return getPointCoords({...graph,startCoords:undefined},range,step);case "polygon":return getPolygonCoords({...graph,startCoords:undefined},range,step);case "angle":return getAngleCoords({graph:{...graph,startCoords:undefined},range,step});case "logarithm":{const{coords,asymptote}=getLogarithmCoords({...graph,startCoords:undefined},range,step);return {coords,asymptote}}default:return undefined}}const getSinusoidEquation=startCoords=>{const p1=startCoords[0];const p2=startCoords[1];const amplitude=p2[1]-p1[1];const angularFrequency=Math.PI/(2*(p2[0]-p1[0]));const phase=p1[0]*angularFrequency;const verticalOffset=p1[1];return "y = "+amplitude.toFixed(3)+"sin("+angularFrequency.toFixed(3)+"x - "+phase.toFixed(3)+") + "+verticalOffset.toFixed(3)};const getTangentEquation=startCoords=>{const p1=startCoords[0];const p2=startCoords[1];const amplitude=p2[1]-p1[1];const angularFrequency=Math.PI/(4*(p2[0]-p1[0]));const phase=p1[0]*angularFrequency;const verticalOffset=p1[1];return "y = "+amplitude.toFixed(3)+"tan("+angularFrequency.toFixed(3)+"x - "+phase.toFixed(3)+") + "+verticalOffset.toFixed(3)};const getQuadraticEquation=startCoords=>{const p1=startCoords[0];const p2=startCoords[1];const p3=startCoords[2];const denom=(p1[0]-p2[0])*(p1[0]-p3[0])*(p2[0]-p3[0]);if(denom===0){return "Division by zero error"}const a=(p3[0]*(p2[1]-p1[1])+p2[0]*(p1[1]-p3[1])+p1[0]*(p3[1]-p2[1]))/denom;const b=(p3[0]*p3[0]*(p1[1]-p2[1])+p2[0]*p2[0]*(p3[1]-p1[1])+p1[0]*p1[0]*(p2[1]-p3[1]))/denom;const c=(p2[0]*p3[0]*(p2[0]-p3[0])*p1[1]+p3[0]*p1[0]*(p3[0]-p1[0])*p2[1]+p1[0]*p2[0]*(p1[0]-p2[0])*p3[1])/denom;return "y = "+a.toFixed(3)+"x^2 + "+b.toFixed(3)+"x + "+c.toFixed(3)};const getLogarithmEquation=(coords,asymptote)=>{const p1=coords[0];const p2=coords[1];if(p1[1]===p2[1]){return "undefined (points share the same y)"}if(p1[0]===asymptote||p2[0]===asymptote){return "undefined (point on asymptote)"}const ratio=(p1[0]-asymptote)/(p2[0]-asymptote);if(ratio<=0){return "undefined (points on opposite sides of asymptote)"}const bExp=Math.log(ratio)/(p1[1]-p2[1]);const aExp=(p1[0]-asymptote)/Math.exp(bExp*p1[1]);if(!isFinite(bExp)||!isFinite(aExp)||aExp===0||bExp===0){return "undefined (invalid coefficients)"}const a=1/bExp;const b=1/aExp;const c=-asymptote/aExp;return "y = "+a.toFixed(3)+"ln("+b.toFixed(3)+"x + "+c.toFixed(3)+")"};const getAngleEquation=(startCoords,allowReflexAngles=false)=>{const vertex=startCoords[1];const roundedAngle=getClockwiseAngle(startCoords,allowReflexAngles).toFixed(0);return `${roundedAngle}\u00B0 angle at (${vertex[0]}, ${vertex[1]})`};const shouldShowStartCoordsUI=(graph,isStatic)=>{if(isStatic){return false}switch(graph.type){case "point":return graph.numPoints!=="unlimited";case "polygon":return graph.numSides!=="unlimited"&&graph.snapTo!=="angles"&&graph.snapTo!=="sides";case "none":return false;case "angle":case "circle":case "exponential":case "linear":case "linear-system":case "tangent":case "quadratic":case "ray":case "segment":case "sinusoid":case "absolute-value":case "logarithm":case "vector":return true;default:throw new UnreachableCaseError(graph)}};
 
-const StartCoordsAngle=props=>{const{startCoords,allowReflexAngles,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??"",index===2?newLabel:pointLabels[2]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$c.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$c.equationBody,children:getAngleEquation(startCoords,allowReflexAngles)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1],startCoords[2]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Vertex",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value,startCoords[2]]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[2],onChange:value=>onChange([startCoords[0],startCoords[1],value]),pointLabel:pointLabels[2],onPointLabelChange:newLabel=>updatePointLabel(2,newLabel)})]})};const styles$c=StyleSheet.create({equationSection:{marginTop:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginTop:spacing.xSmall_8,paddingLeft:spacing.xSmall_8,paddingRight:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
+const StartCoordsAngle=props=>{const{startCoords,allowReflexAngles,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??"",index===2?newLabel:pointLabels[2]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$c.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$c.equationBody,children:getAngleEquation(startCoords,allowReflexAngles)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1],startCoords[2]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Vertex",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value,startCoords[2]]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[2],onChange:value=>onChange([startCoords[0],startCoords[1],value]),pointLabel:pointLabels[2],onPointLabelChange:newLabel=>updatePointLabel(2,newLabel)})]})};const styles$c=StyleSheet.create({equationSection:{marginBlockStart:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginBlockStart:spacing.xSmall_8,paddingInlineStart:spacing.xSmall_8,paddingInlineEnd:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
 
-const StartCoordsCircle=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const[radiusState,setRadiusState]=React.useState(startCoords.radius.toString());React.useEffect(()=>{setRadiusState(startCoords.radius.toString());},[startCoords.radius]);function handleRadiuschange(newValue){setRadiusState(newValue);if(isNaN(+newValue)||newValue===""||+newValue===0){return}onChange({center:startCoords.center,radius:parseFloat(newValue)});}return jsxRuntimeExports.jsxs(View,{style:styles$b.tile,children:[jsxRuntimeExports.jsxs(View,{style:styles$b.row,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Center:"}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:startCoords.center,labels:["x","y"],onChange:coord=>onChange({center:coord,radius:startCoords.radius})})]}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"label",style:styles$b.row,children:["Radius:",jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:radiusState,onChange:handleRadiuschange,style:styles$b.textField})]}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"span",style:styles$b.row,children:["Radius point label:",jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(View,{style:styles$b.textField,children:jsxRuntimeExports.jsx(TextField,{"aria-label":"Radius point name",value:pointLabels[0]??"",placeholder:"Radius point",onChange:newLabel=>onChangePointLabels([newLabel])})})]})]})};const styles$b=StyleSheet.create({tile:{backgroundColor:semanticColor.core.background.instructive.subtle,marginTop:spacing.xSmall_8,padding:spacing.small_12,borderRadius:spacing.xSmall_8},row:{display:"flex",flexDirection:"row",alignItems:"center"},textField:{width:spacing.xxxLarge_64}});
+const StartCoordsCircle=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const[radiusState,setRadiusState]=React.useState(startCoords.radius.toString());React.useEffect(()=>{setRadiusState(startCoords.radius.toString());},[startCoords.radius]);function handleRadiuschange(newValue){setRadiusState(newValue);if(isNaN(+newValue)||newValue===""||+newValue===0){return}onChange({center:startCoords.center,radius:parseFloat(newValue)});}return jsxRuntimeExports.jsxs(View,{style:styles$b.tile,children:[jsxRuntimeExports.jsxs(View,{style:styles$b.row,children:[jsxRuntimeExports.jsx(BodyText,{size:"medium",weight:"bold",tag:"span",children:"Center:"}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:startCoords.center,labels:["x","y"],onChange:coord=>onChange({center:coord,radius:startCoords.radius})})]}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"label",style:styles$b.row,children:["Radius:",jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:radiusState,onChange:handleRadiuschange,style:styles$b.textField})]}),jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsxs(BodyText,{size:"medium",weight:"bold",tag:"span",style:styles$b.row,children:["Radius point label:",jsxRuntimeExports.jsx(Strut,{size:spacing.small_12}),jsxRuntimeExports.jsx(View,{style:styles$b.textField,children:jsxRuntimeExports.jsx(TextField,{"aria-label":"Radius point name",value:pointLabels[0]??"",placeholder:"Radius point",onChange:newLabel=>onChangePointLabels([newLabel])})})]})]})};const styles$b=StyleSheet.create({tile:{backgroundColor:semanticColor.core.background.instructive.subtle,marginBlockStart:spacing.xSmall_8,padding:spacing.small_12,borderRadius:spacing.xSmall_8},row:{display:"flex",flexDirection:"row",alignItems:"center"},textField:{width:spacing.xxxLarge_64}});
 
 const AsymptoteInput=props=>{const{axis,value,onChange}=props;const[textState,setTextState]=React.useState(value.toString());React.useEffect(()=>{setTextState(value.toString());},[value]);function handleChange(newValue){setTextState(newValue);if(isNaN(+newValue)||newValue===""){return}onChange(parseFloat(newValue));}return jsxRuntimeExports.jsxs(BodyText,{weight:"bold",tag:"label",className:styles$d.tileRow,children:[`Asymptote ${axis} =`,jsxRuntimeExports.jsx(View,{className:styles$d["text-field-wrapper"],children:jsxRuntimeExports.jsx(ScrolllessNumberTextField,{value:textState,onChange:handleChange})})]})};
 
@@ -1781,9 +1783,9 @@ const StartCoordsMultiline=props=>{const{startCoords,type,onChange,pointLabels,o
 
 const StartCoordsPoint=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:startCoords.map((coord,index)=>jsxRuntimeExports.jsx(CoordInput,{label:`Point ${index+1}`,coord:coord,onChange:newCoord=>{const newStartCoords=[...startCoords];newStartCoords[index]=newCoord;onChange(newStartCoords);},pointLabel:pointLabels?.[index],onPointLabelChange:onChangePointLabels&&(newLabel=>{const next=Array.from({length:startCoords.length},(_,i)=>i===index?newLabel:pointLabels?.[i]??"");onChangePointLabels(next);})},index))})};
 
-const StartCoordsQuadratic=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??"",index===2?newLabel:pointLabels[2]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$a.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$a.equationBody,children:getQuadraticEquation(startCoords)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1],startCoords[2]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value,startCoords[2]]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 3",coord:startCoords[2],onChange:value=>onChange([startCoords[0],startCoords[1],value]),pointLabel:pointLabels[2],onPointLabelChange:newLabel=>updatePointLabel(2,newLabel)})]})};const styles$a=StyleSheet.create({equationSection:{marginTop:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginTop:spacing.xSmall_8,paddingLeft:spacing.xSmall_8,paddingRight:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
+const StartCoordsQuadratic=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??"",index===2?newLabel:pointLabels[2]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$a.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$a.equationBody,children:getQuadraticEquation(startCoords)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1],startCoords[2]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value,startCoords[2]]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 3",coord:startCoords[2],onChange:value=>onChange([startCoords[0],startCoords[1],value]),pointLabel:pointLabels[2],onPointLabelChange:newLabel=>updatePointLabel(2,newLabel)})]})};const styles$a=StyleSheet.create({equationSection:{marginBlockStart:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginBlockStart:spacing.xSmall_8,paddingInlineStart:spacing.xSmall_8,paddingInlineEnd:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
 
-const StartCoordsSinusoid=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$9.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$9.equationBody,children:getSinusoidEquation(startCoords)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)})]})};const styles$9=StyleSheet.create({equationSection:{marginTop:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginTop:spacing.xSmall_8,paddingLeft:spacing.xSmall_8,paddingRight:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
+const StartCoordsSinusoid=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{style:styles$9.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{style:styles$9.equationBody,children:getSinusoidEquation(startCoords)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)})]})};const styles$9=StyleSheet.create({equationSection:{marginBlockStart:spacing.small_12},equationBody:{backgroundColor:semanticColor.core.background.neutral.subtle,border:`1px solid ${semanticColor.core.border.neutral.subtle}`,marginBlockStart:spacing.xSmall_8,paddingInlineStart:spacing.xSmall_8,paddingInlineEnd:spacing.xSmall_8,fontSize:font.body.size.xsmall}});
 
 const StartCoordsTangent=props=>{const{startCoords,onChange,pointLabels,onChangePointLabels}=props;const updatePointLabel=(index,newLabel)=>{const next=[index===0?newLabel:pointLabels[0]??"",index===1?newLabel:pointLabels[1]??""];onChangePointLabels(next);};return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(View,{className:styles$d.equationSection,children:[jsxRuntimeExports.jsx(BodyText,{children:"Starting equation:"}),jsxRuntimeExports.jsx(BodyMonospace,{className:styles$d.equationBody,children:getTangentEquation(startCoords)})]}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 1",coord:startCoords[0],onChange:value=>onChange([value,startCoords[1]]),pointLabel:pointLabels[0],onPointLabelChange:newLabel=>updatePointLabel(0,newLabel)}),jsxRuntimeExports.jsx(CoordInput,{label:"Point 2",coord:startCoords[1],onChange:value=>onChange([startCoords[0],value]),pointLabel:pointLabels[1],onPointLabelChange:newLabel=>updatePointLabel(1,newLabel)})]})};
 
@@ -1797,7 +1799,7 @@ const InteractiveGraph=InteractiveGraphWidget.widget;class InteractiveGraphEdito
 
 const gray98="#FAFAFA";const gray95="#F0F1F2";const gray85="#D6D8DA";const gray76="#BABEC2";const gray68="#888D93";const gray41="#626569";const gray17="#21242C";
 
-class FormWrappedTextField extends React.Component{render(){const{forwardedRef,width,grow,shrink,icon,backgroundColor,focusBorderColor,borderColor,color,onSubmit,leftSideIcon,id,testId,type,labelMediumInputText,...allProps}=this.props;const{focused}=this.state;const extraStyles={};const spanStyle=[styles$8.input,styles$8.container];if(width){extraStyles.width=width;}if(grow){extraStyles.flexGrow=grow===true?1:grow;}if(shrink||shrink===0){extraStyles.flexShrink=shrink===true?0:shrink;}if(backgroundColor){extraStyles.backgroundColor=backgroundColor;}else {spanStyle.push(styles$8.defaultBackground);}if(color){extraStyles.color=color;}const borderColorStyle=focused?focusBorderColor||semanticColor.focus.outer:borderColor||semanticColor.core.border.neutral.subtle;extraStyles.border=`1px solid ${borderColorStyle}`;const wrappedIcon=icon&&jsxRuntimeExports.jsx("span",{className:css(styles$8.icon),children:icon});const inputBase=labelMediumInputText?styles$8.labelMediumInputBase:styles$8.inputBase;return jsxRuntimeExports.jsxs("form",{className:css(...spanStyle),style:extraStyles,onSubmit:onSubmit||this.disableDefault,children:[leftSideIcon&&wrappedIcon,jsxRuntimeExports.jsx("input",{...allProps,onFocus:this.handleFocus,onBlur:this.handleBlur,type:type,className:css(inputBase),ref:forwardedRef,id:id,"data-testid":testId}),!leftSideIcon&&wrappedIcon]})}constructor(...args){super(...args),this.state={focused:false},this.handleBlur=e=>{const{onBlur}=this.props;onBlur?.(e);this.setState({focused:false});},this.handleFocus=e=>{const{onFocus}=this.props;onFocus?.(e);this.setState({focused:true});},this.disableDefault=e=>{e.preventDefault();};}}const styles$8=StyleSheet.create({inputBase:{background:"inherit",border:"none",fontFamily:"inherit",fontSize:15,lineHeight:"22px",outline:"none","::placeholder":{color:gray41},width:"100%",color:"inherit",marginBottom:0,paddingLeft:0,boxShadow:"none",padding:0,margin:0},labelMediumInputBase:{background:"inherit",border:"none",outline:"none","::placeholder":{color:gray41},width:"100%",fontWeight:"normal",fontFamily:"Lato, san-serif",fontSize:"16px",lineHeight:"20px"},input:{height:40,borderRadius:4,boxSizing:"border-box",padding:"8px 10px"},container:{display:"inline-flex",alignItems:"center",marginBottom:0},defaultBackground:{backgroundColor:semanticColor.core.background.base.default},icon:{display:"flex",alignItems:"center",justifyContent:"center"}});var FormWrappedTextField$1 = React.forwardRef((props,ref)=>jsxRuntimeExports.jsx(FormWrappedTextField,{...props,forwardedRef:ref}));
+class FormWrappedTextField extends React.Component{render(){const{forwardedRef,width,grow,shrink,icon,backgroundColor,focusBorderColor,borderColor,color,onSubmit,leftSideIcon,id,testId,type,labelMediumInputText,...allProps}=this.props;const{focused}=this.state;const extraStyles={};const spanStyle=[styles$8.input,styles$8.container];if(width){extraStyles.width=width;}if(grow){extraStyles.flexGrow=grow===true?1:grow;}if(shrink||shrink===0){extraStyles.flexShrink=shrink===true?0:shrink;}if(backgroundColor){extraStyles.backgroundColor=backgroundColor;}else {spanStyle.push(styles$8.defaultBackground);}if(color){extraStyles.color=color;}const borderColorStyle=focused?focusBorderColor||semanticColor.focus.outer:borderColor||semanticColor.core.border.neutral.subtle;extraStyles.border=`1px solid ${borderColorStyle}`;const wrappedIcon=icon&&jsxRuntimeExports.jsx("span",{className:css(styles$8.icon),children:icon});const inputBase=labelMediumInputText?styles$8.labelMediumInputBase:styles$8.inputBase;return jsxRuntimeExports.jsxs("form",{className:css(...spanStyle),style:extraStyles,onSubmit:onSubmit||this.disableDefault,children:[leftSideIcon&&wrappedIcon,jsxRuntimeExports.jsx("input",{...allProps,onFocus:this.handleFocus,onBlur:this.handleBlur,type:type,className:css(inputBase),ref:forwardedRef,id:id,"data-testid":testId}),!leftSideIcon&&wrappedIcon]})}constructor(...args){super(...args),this.state={focused:false},this.handleBlur=e=>{const{onBlur}=this.props;onBlur?.(e);this.setState({focused:false});},this.handleFocus=e=>{const{onFocus}=this.props;onFocus?.(e);this.setState({focused:true});},this.disableDefault=e=>{e.preventDefault();};}}const styles$8=StyleSheet.create({inputBase:{background:"inherit",border:"none",fontFamily:"inherit",fontSize:15,lineHeight:"22px",outline:"none","::placeholder":{color:gray41},width:"100%",color:"inherit",marginBlockEnd:0,paddingInlineStart:0,boxShadow:"none",padding:0,margin:0},labelMediumInputBase:{background:"inherit",border:"none",outline:"none","::placeholder":{color:gray41},width:"100%",fontWeight:"normal",fontFamily:"Lato, san-serif",fontSize:"16px",lineHeight:"20px"},input:{height:40,borderRadius:4,boxSizing:"border-box",paddingBlock:"8px",paddingInline:"10px"},container:{display:"inline-flex",alignItems:"center",marginBlockEnd:0},defaultBackground:{backgroundColor:semanticColor.core.background.base.default},icon:{display:"flex",alignItems:"center",justifyContent:"center"}});var FormWrappedTextField$1 = React.forwardRef((props,ref)=>jsxRuntimeExports.jsx(FormWrappedTextField,{...props,forwardedRef:ref}));
 
 var styles$7 = {"answers":"perseus_DTFHZTRU","answer":"perseus_h6UVAo1f","addAnswerContent":"perseus_bB9KRsBQ","addAnswer":"perseus_be-n-Bce","removeButtonContent":"perseus_JqR-dZ9h","removeButton":"perseus_uYELsWW-"};
 
@@ -1806,7 +1808,7 @@ const AddAnswer=({onClick,editingDisabled})=>jsxRuntimeExports.jsx(Clickable,{cl
 class HoverBehavior extends React.Component{render(){const handlers={onBlur:this.handleBlur,onClick:this.handleClick,onFocus:this.handleFocus,onMouseDown:this.handleMouseDown,onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd};const{children}=this.props;return children?.(this.state,handlers)||null}constructor(props){super(props),this.handleClick=e=>{if(!this.props.disabled){if(this.props.shouldUpdate()){this.waitingForClick=false;}if(this.props.onClick&&!this.props.disabled){this.props.onClick(e);}}},this.handleMouseEnter=()=>{if(!this.props.disabled&&this.props.shouldUpdate()&&!this.waitingForClick){this.setState({hovered:true});}},this.handleMouseLeave=()=>{if(!this.props.disabled&&this.props.shouldUpdate()&&!this.waitingForClick){this.setState({hovered:false});}},this.handleTouchStart=()=>{if(!this.props.disabled&&this.props.shouldUpdate()){this.setState({hovered:true});}},this.handleTouchEnd=()=>{if(!this.props.disabled&&this.props.shouldUpdate()){this.setState({hovered:false});this.waitingForClick=true;}},this.handleMouseDown=()=>{if(!this.props.disabled&&this.props.shouldUpdate()){this.setState({focused:false});this.focusFlag=true;}},this.handleBlur=()=>{if(!this.props.disabled&&this.props.shouldUpdate()){this.setState({focused:false});}},this.handleFocus=()=>{if(!this.props.disabled&&this.props.shouldUpdate()){if(this.focusFlag){this.focusFlag=false;}else {this.setState({focused:true});}}};this.state={focused:false,hovered:props.startHovered};}}HoverBehavior.defaultProps={startHovered:false,shouldUpdate:()=>true};
 
 const borderRadius=4;const onChangeCheckboxNoop=event=>{};class Checkbox extends React.Component{render(){const{checked,disabled,appearDisabled,onChange,tabIndex,style,dataTestId,id}=this.props;const checkedColor=gray41;return jsxRuntimeExports.jsx(HoverBehavior,{children:({focused},handlers)=>jsxRuntimeExports.jsxs("div",{...handlers,className:css(styles$6.container,focused&&styles$6.focused),style:style,"data-testid":dataTestId,"data-checked":checked,children:[jsxRuntimeExports.jsx("svg",{className:css(styles$6.svg,(disabled||appearDisabled)&&styles$6.disabled),width:sizeWithPadding,height:sizeWithPadding,viewBox:`-${padding} -${padding}
-                         ${sizeWithPadding} ${sizeWithPadding}`,children:jsxRuntimeExports.jsxs("g",{fill:"none",fillRule:"evenodd",children:[checked&&jsxRuntimeExports.jsxs("g",{children:[jsxRuntimeExports.jsx("rect",{fill:checkedColor,width:size,height:size,x:"0",y:"0",rx:borderRadius}),jsxRuntimeExports.jsx("path",{fill:semanticColor.core.foreground.knockout.default,stroke:semanticColor.core.foreground.knockout.default,d:"M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47 10.53c0.23.23.59.23.81 0l4.55-4.55a0.58.58 0 0 0-0.81-0.81L6.88 9.31 4.98 7.41z"})]}),!checked&&jsxRuntimeExports.jsx("rect",{fill:semanticColor.core.foreground.knockout.default,stroke:gray68,width:size-2*padding,height:size-2*padding,x:padding,y:padding,rx:"4",strokeWidth:borderWidth})]})}),jsxRuntimeExports.jsx("input",{type:"checkbox",id:id,checked:checked,className:css(styles$6.checkbox,disabled&&styles$6.defaultCursor),disabled:disabled,onChange:onChange,tabIndex:tabIndex})]})})}}Checkbox.defaultProps={checked:false,onChange:onChangeCheckboxNoop};const size=16;const padding=.5;const borderWidth=1;const sizeWithPadding=size+2*padding;const styles$6=StyleSheet.create({container:{position:"relative",display:"inline-block",verticalAlign:"middle",lineHeight:0,borderRadius:borderRadius,width:sizeWithPadding,height:sizeWithPadding,flexShrink:0},focused:{"::before":{content:'""',position:"absolute",top:-2,right:-2,bottom:-2,left:-2,borderRadius:borderRadius+2,backgroundColor:"lightblue"}},svg:{position:"absolute",left:0,top:0},checkbox:{appearance:"none",opacity:0,position:"absolute",top:padding,width:size,height:size,margin:0,outline:"none",cursor:"pointer"},disabled:{opacity:.5},defaultCursor:{cursor:"default"}});
+                         ${sizeWithPadding} ${sizeWithPadding}`,children:jsxRuntimeExports.jsxs("g",{fill:"none",fillRule:"evenodd",children:[checked&&jsxRuntimeExports.jsxs("g",{children:[jsxRuntimeExports.jsx("rect",{fill:checkedColor,width:size,height:size,x:"0",y:"0",rx:borderRadius}),jsxRuntimeExports.jsx("path",{fill:semanticColor.core.foreground.knockout.default,stroke:semanticColor.core.foreground.knockout.default,d:"M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47 10.53c0.23.23.59.23.81 0l4.55-4.55a0.58.58 0 0 0-0.81-0.81L6.88 9.31 4.98 7.41z"})]}),!checked&&jsxRuntimeExports.jsx("rect",{fill:semanticColor.core.foreground.knockout.default,stroke:gray68,width:size-2*padding,height:size-2*padding,x:padding,y:padding,rx:"4",strokeWidth:borderWidth})]})}),jsxRuntimeExports.jsx("input",{type:"checkbox",id:id,checked:checked,className:css(styles$6.checkbox,disabled&&styles$6.defaultCursor),disabled:disabled,onChange:onChange,tabIndex:tabIndex})]})})}}Checkbox.defaultProps={checked:false,onChange:onChangeCheckboxNoop};const size=16;const padding=.5;const borderWidth=1;const sizeWithPadding=size+2*padding;const styles$6=StyleSheet.create({container:{position:"relative",display:"inline-block",verticalAlign:"middle",lineHeight:0,borderRadius:borderRadius,width:sizeWithPadding,height:sizeWithPadding,flexShrink:0},focused:{"::before":{content:'""',position:"absolute",insetBlockStart:-2,insetInlineEnd:-2,insetBlockEnd:-2,insetInlineStart:-2,borderRadius:borderRadius+2,backgroundColor:"lightblue"}},svg:{position:"absolute",insetInlineStart:0,insetBlockStart:0},checkbox:{appearance:"none",opacity:0,position:"absolute",insetBlockStart:padding,width:size,height:size,margin:0,outline:"none",cursor:"pointer"},disabled:{opacity:.5},defaultCursor:{cursor:"default"}});
 
 var styles$5 = {"optionsList":"perseus_9p2fIJDN","option":"perseus_uz5HIc6B","label":"perseus_nqkpIulz","selectLabel":"perseus_aAJcd7Pn","editor":"perseus_ELq9XmxW"};
 
@@ -1816,35 +1818,35 @@ const{Icon}=components;const findAndFocusElement=component=>{const DOMNode=React
  S3.5,9.9,3.4,9.8L2.5,8.9L0.2,6.6C0.1,6.5,0,6.3,0,6.2s0.1-0.3,0.2-0.4
  l0.9-0.9c0.1-0.1,0.3-0.2,0.4-0.2s0.3,0.1,0.4,0.2l1.9,1.9l4.2-4.2c0.1
  -0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2l0.9,0.9C9.9,3.5,10,3.7,
- 10,3.8z`;const optionHeight=30;class Option extends React.Component{handleKeyDown(event){const{onDropdownClose}=this.props;const pressedKey=event.key;const focusedElement=event.currentTarget;if(pressedKey==="ArrowDown"&&focusedElement.nextElementSibling){event.preventDefault();focusedElement.nextElementSibling.focus();}if(pressedKey==="ArrowUp"&&focusedElement.previousElementSibling){event.preventDefault();focusedElement.previousElementSibling.focus();}if(pressedKey==="ArrowUp"&&!focusedElement.previousElementSibling&&onDropdownClose){event.preventDefault();onDropdownClose();}if((pressedKey==="Escape"||pressedKey==="Tab")&&onDropdownClose){onDropdownClose();}}render(){const{selected,value,onClick,children,disabled,hideFocusState,testId,ariaLabel}=this.props;return jsxRuntimeExports.jsx("button",{ref:node=>this.node=node,value:value,role:"menuitemradio","aria-checked":selected,className:css(styles$4.notAButton,disabled&&styles$4.cursorDefault,hideFocusState&&styles$4.noFocus),onClick:value=>{if(!disabled&&onClick){onClick(value);}},onKeyDown:event=>this.handleKeyDown(event),"aria-disabled":disabled,"aria-label":ariaLabel,"data-testid":testId,children:jsxRuntimeExports.jsxs("span",{className:css(styles$4.option,selected&&styles$4.optionSelected,disabled&&styles$4.optionDisabled),children:[children,selected&&jsxRuntimeExports.jsx("span",{className:css(styles$4.check),children:jsxRuntimeExports.jsx(Icon,{icon:check})})]})})}}class OptionGroup extends React.Component{componentDidMount(){if(this.focusedElement){findAndFocusElement(this.focusedElement);}}render(){const{children,onSelected,selectedValues,noMargin,onDropdownClose,hideFocusState}=this.props;return jsxRuntimeExports.jsx("div",{style:{top},className:css(styles$4.optionGroup,noMargin&&styles$4.optionGroupNoMargin),children:React.Children.map(children,(child,index)=>{const selected=selectedValues.includes(child.props.value);const reference=selected||index===0?node=>this.focusedElement=node:null;return React.cloneElement(child,{...child.props,key:index,selected:selected,onClick:()=>onSelected(child.props.value),ref:reference,onDropdownClose:onDropdownClose,hideFocusState:hideFocusState})})})}}const styles$4=StyleSheet.create({optionGroup:{margin:"4px 0"},optionGroupNoMargin:{margin:0},option:{display:"flex",flexDirection:"row",alignItems:"center",paddingLeft:32,paddingRight:32,height:optionHeight,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:gray17,userSelect:"none",":hover":{backgroundColor:gray95}},optionSelected:{backgroundColor:gray95,color:"#11ACCD"},optionDisabled:{color:gray76,":hover":{backgroundColor:"transparent"}},check:{position:"absolute",left:11},notAButton:{backgroundColor:"transparent",border:"none",display:"block",padding:0,margin:0,width:"100%",font:"inherit"},noFocus:{outline:"none"},cursorDefault:{cursor:"default"}});
+ 10,3.8z`;const optionHeight=30;class Option extends React.Component{handleKeyDown(event){const{onDropdownClose}=this.props;const pressedKey=event.key;const focusedElement=event.currentTarget;if(pressedKey==="ArrowDown"&&focusedElement.nextElementSibling){event.preventDefault();focusedElement.nextElementSibling.focus();}if(pressedKey==="ArrowUp"&&focusedElement.previousElementSibling){event.preventDefault();focusedElement.previousElementSibling.focus();}if(pressedKey==="ArrowUp"&&!focusedElement.previousElementSibling&&onDropdownClose){event.preventDefault();onDropdownClose();}if((pressedKey==="Escape"||pressedKey==="Tab")&&onDropdownClose){onDropdownClose();}}render(){const{selected,value,onClick,children,disabled,hideFocusState,testId,ariaLabel}=this.props;return jsxRuntimeExports.jsx("button",{ref:node=>this.node=node,value:value,role:"menuitemradio","aria-checked":selected,className:css(styles$4.notAButton,disabled&&styles$4.cursorDefault,hideFocusState&&styles$4.noFocus),onClick:value=>{if(!disabled&&onClick){onClick(value);}},onKeyDown:event=>this.handleKeyDown(event),"aria-disabled":disabled,"aria-label":ariaLabel,"data-testid":testId,children:jsxRuntimeExports.jsxs("span",{className:css(styles$4.option,selected&&styles$4.optionSelected,disabled&&styles$4.optionDisabled),children:[children,selected&&jsxRuntimeExports.jsx("span",{className:css(styles$4.check),children:jsxRuntimeExports.jsx(Icon,{icon:check})})]})})}}class OptionGroup extends React.Component{componentDidMount(){if(this.focusedElement){findAndFocusElement(this.focusedElement);}}render(){const{children,onSelected,selectedValues,noMargin,onDropdownClose,hideFocusState}=this.props;return jsxRuntimeExports.jsx("div",{style:{top},className:css(styles$4.optionGroup,noMargin&&styles$4.optionGroupNoMargin),children:React.Children.map(children,(child,index)=>{const selected=selectedValues.includes(child.props.value);const reference=selected||index===0?node=>this.focusedElement=node:null;return React.cloneElement(child,{...child.props,key:index,selected:selected,onClick:()=>onSelected(child.props.value),ref:reference,onDropdownClose:onDropdownClose,hideFocusState:hideFocusState})})})}}const styles$4=StyleSheet.create({optionGroup:{marginBlock:"4px",marginInline:"0"},optionGroupNoMargin:{margin:0},option:{display:"flex",flexDirection:"row",alignItems:"center",paddingInlineStart:32,paddingInlineEnd:32,height:optionHeight,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",color:gray17,userSelect:"none",":hover":{backgroundColor:gray95}},optionSelected:{backgroundColor:gray95,color:"#11ACCD"},optionDisabled:{color:gray76,":hover":{backgroundColor:"transparent"}},check:{position:"absolute",insetInlineStart:11},notAButton:{backgroundColor:"transparent",border:"none",display:"block",padding:0,margin:0,width:"100%",font:"inherit"},noFocus:{outline:"none"},cursorDefault:{cursor:"default"}});
 
-class Marker extends React.Component{componentDidMount(){document.addEventListener("click",this.handleClick,true);}UNSAFE_componentWillReceiveProps(nextProps){const{answers}=this.props;const filteredAnswers=answers.filter(answer=>nextProps.choices.includes(answer));if(JSON.stringify(answers)!==JSON.stringify(filteredAnswers)){setTimeout(()=>this.updateAnswers(filteredAnswers));}}componentWillUnmount(){document.removeEventListener("click",this.handleClick,true);}openDropdown(){this.setState({showDropdown:true});}updateAnswers(answers){const{label,onChange,x,y}=this.props;onChange({answers,label,x,y});}updateLabel(label){const{answers,onChange,x,y}=this.props;onChange({answers,label,x,y});}render(){const{answers,choices,label,onRemove,x,y}=this.props;const{showDropdown}=this.state;return jsxRuntimeExports.jsx("div",{className:css(styles$3.marker,answers.length>0&&styles$3.markerWithAnswers,showDropdown&&styles$3.markerSelected),ref:node=>this._marker=node,style:{left:`${x}%`,top:`${y}%`},title:"Click to select marker answers or to delete marker. "+"Repositioning marker is not implemented.",children:showDropdown&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("div",{className:css(styles$3.dropdownBody,styles$3.dropdownPositionWithArrow),children:[jsxRuntimeExports.jsx(Option,{value:"",onClick:()=>onRemove(),children:"Delete marker"}),jsxRuntimeExports.jsx("hr",{className:css(styles$3.dividerHorizontal)}),jsxRuntimeExports.jsx(OptionGroup,{onSelected:this.handleSelectAnswer,selectedValues:answers,children:choices.map(choice=>jsxRuntimeExports.jsx(Option,{value:choice,children:choice},choice))}),jsxRuntimeExports.jsx("div",{className:css(styles$3.labelContainer),children:jsxRuntimeExports.jsx(FormWrappedTextField$1,{placeholder:"ARIA label (for screen readers)",onChange:this.handleLabelChange,value:label,width:"100%"})})]})})})}constructor(...args){super(...args),this.state={showDropdown:false},this.handleClick=e=>{const{showDropdown}=this.state;if(this._marker===e.target){this.setState({showDropdown:!showDropdown});}else if(showDropdown){if(this._marker&&e.target instanceof Node&&!this._marker.contains(e.target)){e.stopPropagation();this.setState({showDropdown:false});}}},this.handleLabelChange=e=>{this.updateLabel(e.target.value);},this.handleSelectAnswer=toggleAnswer=>{let{answers}=this.props;if(answers.includes(toggleAnswer)){answers=answers.filter(answer=>answer!==toggleAnswer);}else {answers=[...answers,toggleAnswer];}this.updateAnswers(answers);};}}const styles$3=StyleSheet.create({marker:{position:"absolute",boxSizing:"content-box",width:16,height:16,marginLeft:-8,marginTop:-8,cursor:"pointer",background:"linear-gradient(to bottom, rgba(33, 36, 44, 0.2), rgba(33, 36, 44, 0.5))",border:"solid 2px #ffffff",borderRadius:16,boxShadow:"0 2px 10px 0 rgba(33, 36, 44, 0.1)"},markerSelected:{width:28,height:28,marginLeft:-12,marginTop:-12,border:"none",borderRadius:28,"::before":{content:"''",display:"block",width:20,height:20,marginLeft:2,marginTop:2,border:"solid 2px #ffffff",borderRadius:20}},markerWithAnswers:{background:"#1865f2"},dropdownPositionWithArrow:{left:46,bottom:-12,"::before":{content:"''",display:"block",position:"absolute",width:0,height:0,left:-16,bottom:8,borderRight:`solid 16px ${gray98}`,borderTop:"solid 16px transparent",borderBottom:"solid 16px transparent"}},labelContainer:{padding:4},dividerHorizontal:{height:0,margin:0,border:`solid ${gray85}`,borderWidth:"0 0 1px",boxShadow:"none"},dropdownBody:{position:"absolute",border:"solid 1px rgba(0, 0, 0, 0.1)",zIndex:1e3,color:gray17,backgroundColor:gray98,borderRadius:4,maxHeight:320,cursor:"pointer"}});
+class Marker extends React.Component{componentDidMount(){document.addEventListener("click",this.handleClick,true);}UNSAFE_componentWillReceiveProps(nextProps){const{answers}=this.props;const filteredAnswers=answers.filter(answer=>nextProps.choices.includes(answer));if(JSON.stringify(answers)!==JSON.stringify(filteredAnswers)){setTimeout(()=>this.updateAnswers(filteredAnswers));}}componentWillUnmount(){document.removeEventListener("click",this.handleClick,true);}openDropdown(){this.setState({showDropdown:true});}updateAnswers(answers){const{label,onChange,x,y}=this.props;onChange({answers,label,x,y});}updateLabel(label){const{answers,onChange,x,y}=this.props;onChange({answers,label,x,y});}render(){const{answers,choices,label,onRemove,x,y}=this.props;const{showDropdown}=this.state;return jsxRuntimeExports.jsx("div",{className:css(styles$3.marker,answers.length>0&&styles$3.markerWithAnswers,showDropdown&&styles$3.markerSelected),ref:node=>this._marker=node,style:{left:`${x}%`,top:`${y}%`},title:"Click to select marker answers or to delete marker. "+"Repositioning marker is not implemented.",children:showDropdown&&jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("div",{className:css(styles$3.dropdownBody,styles$3.dropdownPositionWithArrow),children:[jsxRuntimeExports.jsx(Option,{value:"",onClick:()=>onRemove(),children:"Delete marker"}),jsxRuntimeExports.jsx("hr",{className:css(styles$3.dividerHorizontal)}),jsxRuntimeExports.jsx(OptionGroup,{onSelected:this.handleSelectAnswer,selectedValues:answers,children:choices.map(choice=>jsxRuntimeExports.jsx(Option,{value:choice,children:choice},choice))}),jsxRuntimeExports.jsx("div",{className:css(styles$3.labelContainer),children:jsxRuntimeExports.jsx(FormWrappedTextField$1,{placeholder:"ARIA label (for screen readers)",onChange:this.handleLabelChange,value:label,width:"100%"})})]})})})}constructor(...args){super(...args),this.state={showDropdown:false},this.handleClick=e=>{const{showDropdown}=this.state;if(this._marker===e.target){this.setState({showDropdown:!showDropdown});}else if(showDropdown){if(this._marker&&e.target instanceof Node&&!this._marker.contains(e.target)){e.stopPropagation();this.setState({showDropdown:false});}}},this.handleLabelChange=e=>{this.updateLabel(e.target.value);},this.handleSelectAnswer=toggleAnswer=>{let{answers}=this.props;if(answers.includes(toggleAnswer)){answers=answers.filter(answer=>answer!==toggleAnswer);}else {answers=[...answers,toggleAnswer];}this.updateAnswers(answers);};}}const styles$3=StyleSheet.create({marker:{position:"absolute",boxSizing:"content-box",width:16,height:16,marginLeft:-8,marginTop:-8,cursor:"pointer",background:"linear-gradient(to bottom, rgba(33, 36, 44, 0.2), rgba(33, 36, 44, 0.5))",border:"solid 2px #ffffff",borderRadius:16,boxShadow:"0 2px 10px 0 rgba(33, 36, 44, 0.1)"},markerSelected:{width:28,height:28,marginLeft:-12,marginTop:-12,border:"none",borderRadius:28,"::before":{content:"''",display:"block",width:20,height:20,marginInlineStart:2,marginBlockStart:2,border:"solid 2px #ffffff",borderRadius:20}},markerWithAnswers:{background:"#1865f2"},dropdownPositionWithArrow:{left:46,bottom:-12,"::before":{content:"''",display:"block",position:"absolute",width:0,height:0,left:-16,bottom:8,borderInlineEnd:`solid 16px ${gray98}`,borderBlockStart:"solid 16px transparent",borderBlockEnd:"solid 16px transparent"}},labelContainer:{padding:4},dividerHorizontal:{height:0,margin:0,border:`solid ${gray85}`,borderWidth:"0 0 1px",boxShadow:"none"},dropdownBody:{position:"absolute",border:"solid 1px rgba(0, 0, 0, 0.1)",zIndex:1e3,color:gray17,backgroundColor:gray98,borderRadius:4,maxBlockSize:320,cursor:"pointer"}});
 
-class QuestionMarkers extends React.Component{openDropdownForMarkerIndices(indices){indices.forEach(index=>{if(this._markers[index]){this._markers[index]?.openDropdown();}});}render(){const{choices,imageUrl,imageWidth,imageHeight,markers,onChange}=this.props;const staticUrl=Dependencies.getDependencies().staticUrl;return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(BodyText,{weight:"bold",tag:"span",children:"Markers"}),jsxRuntimeExports.jsx("div",{className:css(styles$2.subtitle),children:imageUrl?jsxRuntimeExports.jsxs("span",{children:["Double-click on the image to add a marker.",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("br",{}),"Markers are read by screen readers in the order that you add them here, so add in a logical order for the learner (e.g. sequentially, clockwise). You can test order by using keyboard tabbing."]}):"Upload an image to place markers."}),imageUrl&&jsxRuntimeExports.jsxs("div",{className:css(styles$2.markersCanvas),style:{maxWidth:imageWidth,maxHeight:imageHeight},children:[jsxRuntimeExports.jsx("img",{alt:"",className:css(styles$2.image),src:staticUrl(Util.getRealImageUrl(imageUrl)),onDoubleClick:this.handleImageDoubleClick}),markers.map((marker,index)=>createElement(Marker,{...marker,choices:choices,key:`${marker.x}.${marker.y}`,onChange:marker=>onChange([...markers.slice(0,index),marker,...markers.slice(index+1)]),onRemove:()=>onChange([...markers.slice(0,index),...markers.slice(index+1)]),ref:node=>this._markers[index]=node}))]})]})}constructor(...args){super(...args),this._markers=[],this.handleImageDoubleClick=e=>{e.preventDefault();if(this.props.editingDisabled){return}const rect=e.currentTarget.getBoundingClientRect();const x=Math.round((e.clientX-rect.left)/rect.width*1e3)/10;const y=Math.round((e.clientY-rect.top)/rect.height*1e3)/10;const{markers,onChange}=this.props;onChange([...markers,{answers:[],label:"",x,y}]);};}}const styles$2=StyleSheet.create({subtitle:{fontFamily:"inherit",fontSize:12,lineHeight:"14px",marginTop:8,marginBottom:12,color:gray68},markersCanvas:{position:"relative",border:"solid 1px rgba(33, 36, 44, 0.16)"},image:{display:"block",maxWidth:"100%"}});
+class QuestionMarkers extends React.Component{openDropdownForMarkerIndices(indices){indices.forEach(index=>{if(this._markers[index]){this._markers[index]?.openDropdown();}});}render(){const{choices,imageUrl,imageWidth,imageHeight,markers,onChange}=this.props;const staticUrl=Dependencies.getDependencies().staticUrl;return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(BodyText,{weight:"bold",tag:"span",children:"Markers"}),jsxRuntimeExports.jsx("div",{className:css(styles$2.subtitle),children:imageUrl?jsxRuntimeExports.jsxs("span",{children:["Double-click on the image to add a marker.",jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsx("br",{}),"Markers are read by screen readers in the order that you add them here, so add in a logical order for the learner (e.g. sequentially, clockwise). You can test order by using keyboard tabbing."]}):"Upload an image to place markers."}),imageUrl&&jsxRuntimeExports.jsxs("div",{className:css(styles$2.markersCanvas),style:{maxInlineSize:imageWidth,maxBlockSize:imageHeight},children:[jsxRuntimeExports.jsx("img",{alt:"",className:css(styles$2.image),src:staticUrl(Util.getRealImageUrl(imageUrl)),onDoubleClick:this.handleImageDoubleClick}),markers.map((marker,index)=>createElement(Marker,{...marker,choices:choices,key:`${marker.x}.${marker.y}`,onChange:marker=>onChange([...markers.slice(0,index),marker,...markers.slice(index+1)]),onRemove:()=>onChange([...markers.slice(0,index),...markers.slice(index+1)]),ref:node=>this._markers[index]=node}))]})]})}constructor(...args){super(...args),this._markers=[],this.handleImageDoubleClick=e=>{e.preventDefault();if(this.props.editingDisabled){return}const rect=e.currentTarget.getBoundingClientRect();const x=Math.round((e.clientX-rect.left)/rect.width*1e3)/10;const y=Math.round((e.clientY-rect.top)/rect.height*1e3)/10;const{markers,onChange}=this.props;onChange([...markers,{answers:[],label:"",x,y}]);};}}const styles$2=StyleSheet.create({subtitle:{fontFamily:"inherit",fontSize:12,lineHeight:"14px",marginBlockStart:8,marginBlockEnd:12,color:gray68},markersCanvas:{position:"relative",border:"solid 1px rgba(33, 36, 44, 0.16)"},image:{display:"block",maxInlineSize:"100%"}});
 
 var styles$1 = {"imageRow":"perseus_-XexOs6i"};
 
-const SelectImage=({onChange,url,editingDisabled=false})=>jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(BodyText,{weight:"bold",tag:"span",children:"Image"}),jsxRuntimeExports.jsxs("div",{className:styles$1.imageRow,children:[jsxRuntimeExports.jsx(FormWrappedTextField$1,{placeholder:"URL",grow:1,onChange:e=>onChange(e.target.value),value:url}),jsxRuntimeExports.jsx(Button,{disabled:!url||editingDisabled,"aria-label":url?"":"Not implemented. Use the 'Add Image' button in "+"the editor to upload image, then copy the URL here.",onClick:()=>onChange(""),style:{minWidth:90},children:url?"Remove":"Upload"})]})]});
+const SelectImage=({onChange,url,editingDisabled=false})=>jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(BodyText,{weight:"bold",tag:"span",children:"Image"}),jsxRuntimeExports.jsxs("div",{className:styles$1.imageRow,children:[jsxRuntimeExports.jsx(FormWrappedTextField$1,{placeholder:"URL",grow:1,onChange:e=>onChange(e.target.value),value:url}),jsxRuntimeExports.jsx(Button,{disabled:!url||editingDisabled,"aria-label":url?"":"Not implemented. Use the 'Add Image' button in "+"the editor to upload image, then copy the URL here.",onClick:()=>onChange(""),style:{minInlineSize:90},children:url?"Remove":"Upload"})]})]});
 
 class LabelImageEditor extends React.Component{componentDidUpdate(prevProps){const coordsToMarkers={};prevProps.markers.forEach(marker=>coordsToMarkers[`${marker.x}.${marker.y}`]=marker);const newIndices=this.props.markers.map((marker,index)=>coordsToMarkers.hasOwnProperty(`${marker.x}.${marker.y}`)?-1:index).filter(index=>index!==-1);if(newIndices.length&&this._questionMarkers){this._questionMarkers.openDropdownForMarkerIndices(newIndices);}}serialize(){return EditorJsonify.serialize.call(this)}render(){const{choices,imageAlt,imageUrl,imageWidth,imageHeight,markers,multipleAnswers,hideChoicesFromInstructions,preferredPopoverDirection}=this.props;const editingDisabled=this.props.apiOptions?.editingDisabled??false;const imageSelected=imageUrl&&imageWidth>0&&imageHeight>0;return jsxRuntimeExports.jsxs("div",{className:styles$5.editor,children:[jsxRuntimeExports.jsx(SelectImage,{onChange:this.handleImageChange,url:imageUrl,editingDisabled:editingDisabled}),imageSelected&&jsxRuntimeExports.jsx(FormWrappedTextField$1,{placeholder:"Alt text (for screen readers)",onChange:e=>this.handleAltChange(e.target.value),value:imageAlt,width:"100%"}),jsxRuntimeExports.jsx(QuestionMarkers,{editingDisabled:editingDisabled,choices:choices,imageUrl:imageSelected?imageUrl:"",imageWidth:imageWidth,imageHeight:imageHeight,markers:markers,onChange:this.handleMarkersChange,ref:node=>this._questionMarkers=node}),jsxRuntimeExports.jsx(AnswerChoices,{choices:choices,editingDisabled:editingDisabled,onChange:this.handleChoicesChange}),jsxRuntimeExports.jsx(Behavior,{preferredPopoverDirection:preferredPopoverDirection,multipleAnswers:multipleAnswers,hideChoicesFromInstructions:hideChoicesFromInstructions,onChange:this.handleBehaviorChange})]})}constructor(...args){super(...args),this.getSaveWarnings=()=>{const{choices,imageAlt,imageUrl,markers}=this.props;const warnings=[];if(choices.length<2){warnings.push("Question requires at least two answer choices");}if(!imageUrl){warnings.push("Image is not specified for question");}else if(!imageAlt){warnings.push("Question image has no alt text");}if(!markers.length){warnings.push("Question has no markers, to label answers on image");}else {let numNoAnswers=0;let numNoLabels=0;for(const marker of markers){if(!marker.answers.length){numNoAnswers++;}if(!marker.label){numNoLabels++;}}if(numNoAnswers){warnings.push(`Question has ${numNoAnswers} markers with no `+"answers selected");}if(numNoLabels){warnings.push(`Question has ${numNoLabels} markers with no `+"ARIA label");}}return warnings},this.handleImageChange=url=>{this.props.onChange({imageUrl:url,imageWidth:0,imageHeight:0});if(url){Util.getImageSize(url,(width,height)=>{if(this.props.imageUrl===url&&this.props.imageWidth===width&&this.props.imageHeight===height){return}this.props.onChange({imageUrl:url,imageWidth:width,imageHeight:height});});}},this.handleAltChange=alt=>{this.props.onChange({imageAlt:alt});},this.handleChoicesChange=choices=>{this.props.onChange({choices});},this.handleMarkersChange=markers=>{this.props.onChange({markers});},this.handleBehaviorChange=options=>{this.props.onChange(options);};}}LabelImageEditor.defaultProps=labelImageLogic.defaultWidgetOptions;LabelImageEditor.widgetName="label-image";
 
 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;
 
 const NORMAL="normal";const AUTO="auto";const HORIZONTAL$1="horizontal";const VERTICAL$1="vertical";const getUpdatedOptions=(correctOptions,otherOptions,whichOptions,options)=>{const props={};if(whichOptions&&options!==undefined){props[whichOptions]=options.map(option=>({content:option}));}const correctOptionsToUse=whichOptions==="correctOptions"?props.correctOptions:correctOptions;const otherOptionsToUse=whichOptions==="otherOptions"?props.otherOptions:otherOptions;const allOptions=[...correctOptionsToUse,...otherOptionsToUse];const updatedOptions=[...new Set(allOptions.map(item=>item.content))].filter(content=>content!=="").sort().sort((a,b)=>{const getCategoryScore=content=>{if(/\d/.test(content)){return 0}if(/^\$?[a-zA-Z]+\$?$/.test(content)){return 2}return 1};return getCategoryScore(a)-getCategoryScore(b)}).map(content=>({content}));return {...props,options:updatedOptions}};class OrdererEditor extends React.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-orderer",children:[jsxRuntimeExports.jsxs("div",{children:[" ","Correct answer:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Place the cards in the correct order. The same card can be used more than once in the answer but will only be displayed once at the top of a stack of identical cards."})})]}),jsxRuntimeExports.jsx(TextListEditor,{options:this.props.correctOptions.map(option=>option.content),onChange:this.onOptionsChange.bind(this,"correctOptions"),layout:this.props.layout}),jsxRuntimeExports.jsxs("div",{children:[" ","Other cards:"," ",jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Create cards that are not part of the answer."})})]}),jsxRuntimeExports.jsx(TextListEditor,{options:this.props.otherOptions.map(option=>option.content),onChange:this.onOptionsChange.bind(this,"otherOptions"),layout:this.props.layout}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Layout:"," ",jsxRuntimeExports.jsxs("select",{value:this.props.layout,onChange:this.onLayoutChange,children:[jsxRuntimeExports.jsx("option",{value:HORIZONTAL$1,children:"Horizontal"}),jsxRuntimeExports.jsx("option",{value:VERTICAL$1,children:"Vertical"})]})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Use the horizontal layout for short text and small images. The vertical layout is best for longer text (e.g. proofs)."})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:[" ","Height:"," ",jsxRuntimeExports.jsxs("select",{value:this.props.height,onChange:this.onHeightChange,children:[jsxRuntimeExports.jsx("option",{value:NORMAL,children:"Normal"}),jsxRuntimeExports.jsx("option",{value:AUTO,children:"Automatic"})]})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Use "Normal" for text, "Automatic" for images.'})})]})]})}constructor(...args){super(...args),this.onOptionsChange=(whichOptions,options,cb)=>{const updatedOptions=getUpdatedOptions(this.props.correctOptions||[],this.props.otherOptions||[],whichOptions,options);this.props.onChange(updatedOptions,cb);},this.onLayoutChange=e=>{this.props.onChange({layout:e.target.value});},this.onHeightChange=e=>{this.props.onChange({height:e.target.value});},this.serialize=()=>{const{options}=getUpdatedOptions(this.props.correctOptions||[],this.props.otherOptions||[]);return {options:options,correctOptions:this.props.correctOptions,otherOptions:this.props.otherOptions,height:this.props.height,layout:this.props.layout}};}}OrdererEditor.propTypes={correctOptions:PropTypes.array,otherOptions:PropTypes.array,height:PropTypes.oneOf([NORMAL,AUTO]),layout:PropTypes.oneOf([HORIZONTAL$1,VERTICAL$1]),onChange:PropTypes.func.isRequired};OrdererEditor.widgetName="orderer";OrdererEditor.defaultProps=ordererLogic.defaultWidgetOptions;
 
-class PhetSimulationEditor extends React.Component{serialize(){return {url:this.props.url,description:this.props.description}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(LabeledTextField,{label:"URL",value:this.props.url,onChange:url=>this.props.onChange({url}),style:{marginBottom:spacing.large_24}}),jsxRuntimeExports.jsx(LabeledTextField,{label:"Description",value:this.props.description,onChange:description=>this.props.onChange({description})})]})}constructor(...args){super(...args),this.getSaveWarnings=()=>{if(makeSafeUrl(this.props.url,"en","https://phet.colorado.edu")===null){return ["Please enter a URL from the PhET domain."]}return []};}}PhetSimulationEditor.defaultProps=phetSimulationLogic.defaultWidgetOptions;PhetSimulationEditor.widgetName="phet-simulation";
+class PhetSimulationEditor extends React.Component{serialize(){return {url:this.props.url,description:this.props.description}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(LabeledTextField,{label:"URL",value:this.props.url,onChange:url=>this.props.onChange({url}),style:{marginBlockEnd:spacing.large_24}}),jsxRuntimeExports.jsx(LabeledTextField,{label:"Description",value:this.props.description,onChange:description=>this.props.onChange({description})})]})}constructor(...args){super(...args),this.getSaveWarnings=()=>{if(makeSafeUrl(this.props.url,"en","https://phet.colorado.edu")===null){return ["Please enter a URL from the PhET domain."]}return []};}}PhetSimulationEditor.defaultProps=phetSimulationLogic.defaultWidgetOptions;PhetSimulationEditor.widgetName="phet-simulation";
 
 const{NumberInput: NumberInput$2,RangeInput}=components;const Plotter=PlotterWidget.widget;const STARTING="starting";const CORRECT="correct";const editingStates=[STARTING,CORRECT];function padArray(array,n,value){const copy=_.clone(array);copy.length=n;for(let i=array.length;i<n;i++){copy[i]=value;}return copy}const editorDefaults={scaleY:1,maxY:10,snapsPerLine:2};const formatNumber=num=>"$"+number.round(num,2)+"$";class PlotterEditor extends React.Component{UNSAFE_componentWillMount(){this.fetchPic(this.props.picUrl);}UNSAFE_componentWillReceiveProps(nextProps){this.fetchPic(nextProps.picUrl);if(nextProps.static){this.setState({editing:"starting"});}}render(){const setFromScale=["line","histogram","dotplot"].includes(this.props.type);const canChangeSnaps=!["pic","dotplot"].includes(this.props.type);const plotterProps={...this.props,trackInteraction:()=>{},starting:this.props[this.state.editing],onChange:this.handlePlotterChange,userInput:this.props.correct,handleUserInput:userInput=>{this.props.onChange({correct:userInput});}};return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-plotter-editor",children:[jsxRuntimeExports.jsxs("div",{children:["Chart type:"," ",plotterPlotTypes.map(type=>{return jsxRuntimeExports.jsxs("label",{children:[jsxRuntimeExports.jsx("input",{type:"radio",name:"chart-type",checked:this.props.type===type,onChange:_.partial(this.changeType,type)}),type]},type)},this)]}),jsxRuntimeExports.jsxs("div",{children:["Labels:"," ",["x","y"].map((axis,i)=>{return jsxRuntimeExports.jsxs("label",{children:[axis+":",jsxRuntimeExports.jsx("input",{type:"text",onChange:_.partial(this.changeLabel,i),defaultValue:this.props.labels[i]})]},axis)},this)]}),setFromScale&&jsxRuntimeExports.jsxs("div",{className:"set-from-scale-box",children:[jsxRuntimeExports.jsx("span",{className:"categories-title",children:"Set Categories From Scale"}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Tick Step:"," ",jsxRuntimeExports.jsx(NumberInput$2,{placeholder:1,useArrowKeys:true,value:this.state.tickStep,onChange:this.handleChangeTickStep})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"The difference between adjacent ticks."})})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Range:"," ",jsxRuntimeExports.jsx(RangeInput,{placeholder:[0,10],useArrowKeys:true,value:[this.state.minX,this.state.maxX],onChange:this.handleChangeRange})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("button",{onClick:this.setCategoriesFromScale,children:["Set Categories"," "]})})]}),jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Label Interval:"," ",jsxRuntimeExports.jsx(NumberInput$2,{useArrowKeys:true,value:this.props.labelInterval,onChange:this.changeLabelInterval})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Which ticks to display the labels for. For instance, setting this to "4" will only show every 4th label (plus the last one)'})})]}),this.props.type==="pic"&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Picture:"," ",jsxRuntimeExports.jsx(BlurInput,{className:"pic-url",value:this.props.picUrl??"",onChange:this.changePicUrl}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:'Use the default picture of Earth, or insert the URL for a different picture using the "Add image" function.'})})]}),this.state.pic&&this.state.pic.width!==this.state.pic.height&&jsxRuntimeExports.jsxs("p",{className:"warning",children:[jsxRuntimeExports.jsx("b",{children:"Warning"}),": You are using a picture which is not square. This means the image will get distorted. You should probably crop it to be square."]})]}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Categories:"," ",jsxRuntimeExports.jsx(TextListEditor,{ref:"categories",layout:"horizontal",options:this.props.categories,onChange:this.changeCategories})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Scale (y):"," ",jsxRuntimeExports.jsx("input",{type:"text",onChange:this.changeScale,defaultValue:this.props.scaleY})]})}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsxs("label",{children:["Max y:"," ",jsxRuntimeExports.jsx("input",{type:"text",ref:"maxY",onChange:this.changeMax,defaultValue:this.props.maxY})]})}),canChangeSnaps&&jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["Snaps per line:"," ",jsxRuntimeExports.jsx("input",{type:"text",onChange:this.changeSnaps,defaultValue:this.props.snapsPerLine})]}),jsxRuntimeExports.jsx(InfoTip,{children:jsxRuntimeExports.jsx("p",{children:"Creates the specified number of divisions between the horizontal lines. Fewer snaps between lines makes the graph easier for the student to create correctly."})})]}),jsxRuntimeExports.jsxs("div",{children:["Editing values:"," ",editingStates.map(editing=>jsxRuntimeExports.jsxs("label",{children:[jsxRuntimeExports.jsx("input",{type:"radio",disabled:editing===CORRECT&&this.props.static,checked:this.props.static?editing===STARTING:this.state.editing===editing,onChange:e=>this.changeEditing(editing)}),editing]},editing)),jsxRuntimeExports.jsxs(InfoTip,{children:[jsxRuntimeExports.jsx("p",{children:"Use this toggle to switch between editing the correct answer (what the student will be graded on) and the starting values (what the student will see plotted when they start the problem). Note: These cannot be the same."}),jsxRuntimeExports.jsx("p",{children:"In static mode, the starting values are rendered out to the displayed widget."})]})]}),jsxRuntimeExports.jsx(Plotter,{...plotterProps})]})}constructor(...args){super(...args),this.state={editing:this.props.static?STARTING:CORRECT,pic:null,loadedUrl:null,minX:null,maxX:null,tickStep:null},this.fetchPic=url=>{if(url==null){if(this.state.pic!==null){this.setState({pic:null,loadedUrl:null});}return}if(this.state.loadedUrl!==url){const pic=new Image;pic.src=url;pic.onload=()=>{this.setState({pic:pic,loadedUrl:url});};}},this.handleChangeTickStep=value=>{this.setState({tickStep:value});},this.handleChangeRange=newValue=>{this.setState({minX:newValue[0],maxX:newValue[1]});},this.changeLabelInterval=value=>{this.props.onChange({labelInterval:value});},this.handlePlotterChange=newProps=>{const props={};props[this.state.editing]=newProps.values;this.props.onChange(props);},this.changeType=type=>{let categories;if(type==="histogram"){categories=[formatNumber(0)].concat(this.props.categories);this.props.onChange({type:type,categories:categories});}else if(this.props.type==="histogram"){categories=this.props.categories.slice(1);this.props.onChange({type:type,categories:categories});}else {this.props.onChange({type:type});}if(categories){const node=ReactDOM.findDOMNode(this.refs.categories);node.value=categories.join(", ");}},this.changeLabel=(i,e)=>{const labels=_.clone(this.props.labels);labels[i]=e.target.value;this.props.onChange({labels:labels});},this.changePicUrl=value=>{const url=Util.getRealImageUrl(value);this.props.onChange({picUrl:url});},this.changeCategories=categories=>{let n=categories.length;if(this.props.type==="histogram"){n--;}const value=this.props.scaleY;this.props.onChange({categories:categories,correct:padArray(this.props.correct,n,value),starting:padArray(this.props.starting,n,value)});},this.changeScale=e=>{const oldScale=this.props.scaleY;const newScale=+e.target.value||editorDefaults.scaleY;const scale=function(value){return value*newScale/oldScale};const maxY=scale(this.props.maxY);this.props.onChange({scaleY:newScale,maxY:maxY,correct:this.props.correct.map(scale),starting:this.props.starting.map(scale)});ReactDOM.findDOMNode(this.refs.maxY).value=maxY;},this.changeMax=e=>{this.props.onChange({maxY:+e.target.value||editorDefaults.maxY});},this.changeSnaps=e=>{this.props.onChange({snapsPerLine:+e.target.value||editorDefaults.snapsPerLine});},this.changeEditing=editing=>{this.setState({editing:editing});},this.setCategoriesFromScale=()=>{const scale=this.state.tickStep||1;const min=this.state.minX||0;const max=this.state.maxX||0;const length=Math.floor((max-min)/scale)*scale;let categories;if(this.props.type==="histogram"||this.props.type==="dotplot"){categories=_.range(0,length+scale,scale);}else {categories=_.range(scale,length+scale,scale);}categories=categories.map(num=>num+min);categories=categories.map(formatNumber);this.changeCategories(categories);const node=ReactDOM.findDOMNode(this.refs.categories);node.value=categories.join(", ");},this.serialize=()=>{const json=_.pick(this.props,"correct","starting","type","labels","categories","scaleY","maxY","snapsPerLine","labelInterval");if(this.props.type==="pic"){json.picUrl=this.props.picUrl;}return json};}}PlotterEditor.widgetName="plotter";PlotterEditor.defaultProps=plotterLogic.defaultWidgetOptions;
 
 const{NumberInput: NumberInput$1,TextInput}=components;function validateOptions(height,programID){const errors=[];if(programID===""){errors.push("The program ID is required.");}if(!Number.isInteger(height)||height<1){errors.push("The height must be a positive integer.");}return errors}class PythonProgramEditor extends React.Component{serialize(){return {programID:this.props.programID,height:this.props.height}}render(){return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsxs("label",{children:["User Program ID:"," ",jsxRuntimeExports.jsx(TextInput,{value:this.props.programID,onChange:this.change("programID"),placeholder:"123"})]}),jsxRuntimeExports.jsx("br",{}),jsxRuntimeExports.jsxs("label",{children:["Height:"," ",jsxRuntimeExports.jsx(NumberInput$1,{value:this.props.height,onChange:this.change("height"),placeholder:"400"})]})]})}constructor(...args){super(...args),this.change=(...args)=>{return Changeable.change.apply(this,args)},this.getSaveWarnings=()=>{return validateOptions(this.props.height,this.props.programID)};}}PythonProgramEditor.widgetName="python-program";PythonProgramEditor.defaultProps=pythonProgramLogic.defaultWidgetOptions;
 
-var styles = {"tile":"perseus_fAVMAcnB","statusRow":"perseus_kH21BUyY","radioOptionActionsContainer":"perseus_qMTuHJ53","buttonRow":"perseus_FUUSHyqm"};
+var styles = {"tile":"perseus_H66MpddK","statusRow":"perseus_WkPB-jwX","radioOptionActionsContainer":"perseus_5aWP3vgw","buttonRow":"perseus_ezHjicvY"};
 
 function RadioImageEditor({imageUrl,imageAltText,onSave,onDelete,editingDisabled=false}){const uniqueId=React.useId();const imageUrlTextAreaId=`${uniqueId}-image-url-textarea`;const imageAltTextTextAreaId=`${uniqueId}-image-alt-text-textarea`;const[stateImageUrl,setStateImageUrl]=React.useState(imageUrl);const[dimensions,setDimensions]=React.useState({});React.useEffect(()=>{if(!imageUrl){setDimensions({});return}let cancelled=false;async function fetchDimensions(){try{const size=await Util.getImageSizeModern(imageUrl);if(!cancelled){setDimensions({width:size[0],height:size[1]});}}catch(error){if(!cancelled){setDimensions({});}}}void fetchDimensions();return ()=>{cancelled=true;}},[imageUrl]);return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[imageUrl?jsxRuntimeExports.jsx(LabeledField,{label:"Preview",field:jsxRuntimeExports.jsx(ImagePreview,{src:imageUrl,alt:`Preview: ${imageAltText}`,width:dimensions.width,height:dimensions.height}),styles:{root:{marginBlockEnd:sizing.size_160}}}):jsxRuntimeExports.jsx(BodyText,{style:{color:semanticColor.core.foreground.critical.default,marginBlockEnd:sizing.size_160},children:"Missing image URL"}),jsxRuntimeExports.jsx(BodyText,{size:"small",weight:"bold",tag:"label",htmlFor:imageUrlTextAreaId,style:{marginBlockEnd:sizing.size_040},children:"Image URL"}),jsxRuntimeExports.jsx(TextArea,{id:imageUrlTextAreaId,value:stateImageUrl,placeholder:"cdn.kastatic.org/...",onChange:setStateImageUrl,onBlur:()=>onSave(stateImageUrl,imageAltText),style:{marginBlockEnd:sizing.size_080},autoResize:true,disabled:editingDisabled}),jsxRuntimeExports.jsx(BodyText,{size:"small",weight:"bold",tag:"label",htmlFor:imageAltTextTextAreaId,style:{marginBlockEnd:sizing.size_040},children:"Image Alt Text"}),jsxRuntimeExports.jsx(TextArea,{id:imageAltTextTextAreaId,value:imageAltText,placeholder:"Example: Graph of a linear function...",onChange:value=>onSave(imageUrl,value),autoResize:true,disabled:editingDisabled}),jsxRuntimeExports.jsx("span",{className:styles.buttonRow,children:jsxRuntimeExports.jsx(Button,{size:"small",kind:"tertiary",startIcon:trashIcon,style:{alignSelf:"flex-start"},onClick:onDelete,disabled:editingDisabled,children:"Delete this image"})})]})}
 
@@ -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