@khanacademy/perseus-editor 20.1.5 → 20.2.0

package/dist/index.js

@@ -30,6 +30,7 @@ var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var kmath = require('@khanacademy/kmath');
 var perseusScore = require('@khanacademy/perseus-score');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
+var invariant = require('tiny-invariant');
 var Banner = require('@khanacademy/wonder-blocks-banner');
 var Pill = require('@khanacademy/wonder-blocks-pill');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
@@ -84,6 +85,7 @@ var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultCompat(ReactDOM);
 var KAS__namespace = /*#__PURE__*/_interopNamespaceCompat(KAS);
 var Button__default = /*#__PURE__*/_interopDefaultCompat(Button);
+var invariant__default = /*#__PURE__*/_interopDefaultCompat(invariant);
 var Banner__default = /*#__PURE__*/_interopDefaultCompat(Banner);
 var Pill__default = /*#__PURE__*/_interopDefaultCompat(Pill);
 var plusCircle__default = /*#__PURE__*/_interopDefaultCompat(plusCircle);
@@ -103,7 +105,7 @@ var arrowFatUp__default = /*#__PURE__*/_interopDefaultCompat(arrowFatUp);
 var minusCircle__default = /*#__PURE__*/_interopDefaultCompat(minusCircle);
 var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultCompat(arrowCounterClockwise);
 
-const libName="@khanacademy/perseus-editor";const libVersion="20.1.5";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
+const libName="@khanacademy/perseus-editor";const libVersion="20.2.0";perseusUtils.addLibraryVersionToPerseusDebug(libName,libVersion);
 
 var jsxRuntime = {exports: {}};
 
@@ -1498,7 +1500,7 @@ let nextIframeID=0;const requestIframeData={};const updateIframeHeight={};window
 
 const{HUD: HUD$1,InlineIcon: InlineIcon$7}=perseus.components;class ArticleEditor extends React__namespace.Component{componentDidMount(){this._updatePreviewFrames();}componentDidUpdate(){this._updatePreviewFrames();}_updatePreviewFrames(){if(this.props.mode==="preview"){this.refs["frame-all"].sendNewData({type:"article-all",data:this._sections().map((section,i)=>{return this._apiOptionsForSection(section,i)})});}else if(this.props.mode==="edit"){this._sections().forEach((section,i)=>{this.refs["frame-"+i].sendNewData({type:"article",data:this._apiOptionsForSection(section,i)});});}}_apiOptionsForSection(section,sectionIndex){const editor=this.refs[`editor${sectionIndex}`];return {apiOptions:{...perseus.ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true},json:section,useNewStyles:this.props.useNewStyles,linterContext:{contentType:"article",highlightLint:this.state.highlightLint,paths:this.props.contentPaths},legacyPerseusLint:editor?editor.getSaveWarnings():[]}}_sections(){return Array.isArray(this.props.json)?this.props.json:[this.props.json]}_renderEditor(){const{imageUploader,sectionImageUploadGenerator}=this.props;const apiOptions={...perseus.ApiOptions.defaults,...this.props.apiOptions,showAlignmentOptions:true,isArticle:true};const sections=this._sections();return jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[sections.map((section,i)=>{return [jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[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:iconPlus,onClick:()=>{this._handleAddSectionAfter(i);},title:"Add a new section after this one"}),i+1<sections.length&&jsxRuntimeExports.jsx(SectionControlButton,{icon:iconCircleArrowDown,onClick:()=>{this._handleMoveSectionLater(i);},title:"Move this section down"}),i>0&&jsxRuntimeExports.jsx(SectionControlButton,{icon:iconCircleArrowUp,onClick:()=>{this._handleMoveSectionEarlier(i);},title:"Move this section up"}),jsxRuntimeExports.jsx(SectionControlButton,{icon:perseus.iconTrash,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:this._renderIframePreview(i,true)})]},i)]}),this._renderAddSection(),this._renderLinterHUD()]})}_renderAddSection(){return jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("a",{href:"#",className:"simple-button orange",onClick:()=>{this._handleAddSectionAfter(this._sections().length-1);},children:[jsxRuntimeExports.jsx(InlineIcon$7,{...iconPlus})," Add a section"]})})})}_renderLinterHUD(){return jsxRuntimeExports.jsx(HUD$1,{message:"Style warnings",enabled:this.state.highlightLint,onClick:()=>{this.setState({highlightLint:!this.state.highlightLint});}})}_renderIframePreview(i,nochrome){const isMobile=this.props.screen==="phone"||this.props.screen==="tablet";return jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.screen,nochrome:nochrome,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:"frame-"+i,datasetKey:"mobile",datasetValue:isMobile,seamless:nochrome,url:this.props.previewURL},this.props.screen)})}_renderPreviewMode(){return jsxRuntimeExports.jsx("div",{className:"standalone-preview",children:this._renderIframePreview("all",false)})}_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 sections=___default.default.clone(this.serialize());const newSection=i>=0?{widgets: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 perseusCore.PerseusError("Could not serialize; mode "+this.props.mode+" not found",perseusCore.Errors.Internal)}getSaveWarnings(){if(this.props.mode!=="edit"){throw new perseusCore.PerseusError("Can only get save warnings in edit mode.",perseusCore.Errors.NotAllowed)}return this._sections().map((section,i)=>{return this.refs["editor"+i].getSaveWarnings()})}render(){return 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})]})]})}constructor(...args){super(...args),this.state={highlightLint:true},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={contentPaths:[],json:[{}],mode:"edit",screen:"desktop",sectionImageUploadGenerator:()=>jsxRuntimeExports.jsx("span",{}),useNewStyles:false};
 
-const{ButtonGroup: ButtonGroup$7,InlineIcon: InlineIcon$6}=perseus.components;const ViewportResizer=props=>{const phoneButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconMobilePhone})," Phone"]});const tabletButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconTablet})," Tablet"]});const desktopButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconDesktop})," Desktop"]});return jsxRuntimeExports.jsxs("span",{className:"viewport-resizer",children:["Viewport:"," ",jsxRuntimeExports.jsx(ButtonGroup$7,{value:props.deviceType,allowEmpty:false,buttons:[{value:devices.PHONE,content:phoneButtonContents},{value:devices.TABLET,content:tabletButtonContents},{value:devices.DESKTOP,content:desktopButtonContents}],onChange:props.onViewportSizeChanged})]})};
+const{ButtonGroup: ButtonGroup$8,InlineIcon: InlineIcon$6}=perseus.components;const ViewportResizer=props=>{const phoneButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconMobilePhone})," Phone"]});const tabletButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconTablet})," Tablet"]});const desktopButtonContents=jsxRuntimeExports.jsxs("span",{children:[jsxRuntimeExports.jsx(InlineIcon$6,{...iconDesktop})," Desktop"]});return jsxRuntimeExports.jsxs("span",{className:"viewport-resizer",children:["Viewport:"," ",jsxRuntimeExports.jsx(ButtonGroup$8,{value:props.deviceType,allowEmpty:false,buttons:[{value:devices.PHONE,content:phoneButtonContents},{value:devices.TABLET,content:tabletButtonContents},{value:devices.DESKTOP,content:desktopButtonContents}],onChange:props.onViewportSizeChanged})]})};
 
 function clonePath(path){return {newPos:path.newPos,components:path.components.slice(0)}}function removeEmpty(array){var ret=[];for(var i=0;i<array.length;i++){if(array[i]){ret.push(array[i]);}}return ret}function escapeHTML(s){var n=s;n=n.replace(/&/g,"&amp;");n=n.replace(/</g,"&lt;");n=n.replace(/>/g,"&gt;");n=n.replace(/"/g,"&quot;");return n}var Diff=function(ignoreWhitespace){this.ignoreWhitespace=ignoreWhitespace;};Diff.prototype={diff:function(oldString,newString){if(newString===oldString){return [{value:newString}]}if(!newString){return [{value:oldString,removed:true}]}if(!oldString){return [{value:newString,added:true}]}newString=this.tokenize(newString);oldString=this.tokenize(oldString);var newLen=newString.length,oldLen=oldString.length;var maxEditLength=newLen+oldLen;var bestPath=[{newPos:-1,components:[]}];var oldPos=this.extractCommon(bestPath[0],newString,oldString,0);if(bestPath[0].newPos+1>=newLen&&oldPos+1>=oldLen){return bestPath[0].components}for(var editLength=1;editLength<=maxEditLength;editLength++){for(var diagonalPath=-1*editLength;diagonalPath<=editLength;diagonalPath+=2){var basePath;var addPath=bestPath[diagonalPath-1],removePath=bestPath[diagonalPath+1];oldPos=(removePath?removePath.newPos:0)-diagonalPath;if(addPath){bestPath[diagonalPath-1]=undefined;}var canAdd=addPath&&addPath.newPos+1<newLen;var canRemove=removePath&&0<=oldPos&&oldPos<oldLen;if(!canAdd&&!canRemove){bestPath[diagonalPath]=undefined;continue}if(!canAdd||canRemove&&addPath.newPos<removePath.newPos){basePath=clonePath(removePath);this.pushComponent(basePath.components,oldString[oldPos],undefined,true);}else {basePath=clonePath(addPath);basePath.newPos++;this.pushComponent(basePath.components,newString[basePath.newPos],true,undefined);}var oldPos=this.extractCommon(basePath,newString,oldString,diagonalPath);if(basePath.newPos+1>=newLen&&oldPos+1>=oldLen){return basePath.components}else {bestPath[diagonalPath]=basePath;}}}},pushComponent:function(components,value,added,removed){var last=components[components.length-1];if(last&&last.added===added&&last.removed===removed){components[components.length-1]={value:this.join(last.value,value),added:added,removed:removed};}else {components.push({value:value,added:added,removed:removed});}},extractCommon:function(basePath,newString,oldString,diagonalPath){var newLen=newString.length,oldLen=oldString.length,newPos=basePath.newPos,oldPos=newPos-diagonalPath;while(newPos+1<newLen&&oldPos+1<oldLen&&this.equals(newString[newPos+1],oldString[oldPos+1])){newPos++;oldPos++;this.pushComponent(basePath.components,newString[newPos],undefined,undefined);}basePath.newPos=newPos;return oldPos},equals:function(left,right){var reWhitespace=/\S/;if(this.ignoreWhitespace&&!reWhitespace.test(left)&&!reWhitespace.test(right)){return true}else {return left===right}},join:function(left,right){return left+right},tokenize:function(value){return value}};var CharDiff=new Diff;var WordDiff=new Diff(true);var WordWithSpaceDiff=new Diff;WordDiff.tokenize=WordWithSpaceDiff.tokenize=function(value){return removeEmpty(value.split(/(\s+|\b)/))};var CssDiff=new Diff(true);CssDiff.tokenize=function(value){return removeEmpty(value.split(/([{}:;,]|\s+)/))};var LineDiff=new Diff;LineDiff.tokenize=function(value){var retLines=[],lines=value.split(/^/m);for(var i=0;i<lines.length;i++){var line=lines[i],lastLine=lines[i-1];if(line=="\n"&&lastLine&&lastLine[lastLine.length-1]==="\r"){retLines[retLines.length-1]+="\n";}else if(line){retLines.push(line);}}return retLines};const JSDiff={Diff:Diff,diffChars:function(oldStr,newStr){return CharDiff.diff(oldStr,newStr)},diffWords:function(oldStr,newStr){return WordDiff.diff(oldStr,newStr)},diffWordsWithSpace:function(oldStr,newStr){return WordWithSpaceDiff.diff(oldStr,newStr)},diffLines:function(oldStr,newStr){return LineDiff.diff(oldStr,newStr)},diffCss:function(oldStr,newStr){return CssDiff.diff(oldStr,newStr)},createPatch:function(fileName,oldStr,newStr,oldHeader,newHeader){var ret=[];ret.push("Index: "+fileName);ret.push("===================================================================");ret.push("--- "+fileName+(typeof oldHeader==="undefined"?"":"	"+oldHeader));ret.push("+++ "+fileName+(typeof newHeader==="undefined"?"":"	"+newHeader));var diff=LineDiff.diff(oldStr,newStr);if(!diff[diff.length-1].value){diff.pop();}diff.push({value:"",lines:[]});function contextLines(lines){return lines.map(function(entry){return " "+entry})}function eofNL(curRange,i,current){var last=diff[diff.length-2],isLast=i===diff.length-2,isLastOfType=i===diff.length-3&&(current.added!==last.added||current.removed!==last.removed);if(!/\n$/.test(current.value)&&(isLast||isLastOfType)){curRange.push("\");}}var oldRangeStart=0,newRangeStart=0,curRange=[],oldLine=1,newLine=1;for(var i=0;i<diff.length;i++){var current=diff[i],lines=current.lines||current.value.replace(/\n$/,"").split("\n");current.lines=lines;if(current.added||current.removed){if(!oldRangeStart){var prev=diff[i-1];oldRangeStart=oldLine;newRangeStart=newLine;if(prev){curRange=contextLines(prev.lines.slice(-4));oldRangeStart-=curRange.length;newRangeStart-=curRange.length;}}curRange.push.apply(curRange,lines.map(function(entry){return (current.added?"+":"-")+entry}));eofNL(curRange,i,current);if(current.added){newLine+=lines.length;}else {oldLine+=lines.length;}}else {if(oldRangeStart){if(lines.length<=8&&i<diff.length-2){curRange.push.apply(curRange,contextLines(lines));}else {var contextSize=Math.min(lines.length,4);ret.push("@@ -"+oldRangeStart+","+(oldLine-oldRangeStart+contextSize)+" +"+newRangeStart+","+(newLine-newRangeStart+contextSize)+" @@");ret.push.apply(ret,curRange);ret.push.apply(ret,contextLines(lines.slice(0,contextSize)));if(lines.length<=4){eofNL(ret,i,current);}oldRangeStart=0;newRangeStart=0;curRange=[];}}oldLine+=lines.length;newLine+=lines.length;}}return ret.join("\n")+"\n"},applyPatch:function(oldStr,uniDiff){var diffstr=uniDiff.split("\n");var diff=[];var remEOFNL=false,addEOFNL=false;for(var i=diffstr[0][0]==="I"?4:0;i<diffstr.length;i++){if(diffstr[i][0]==="@"){var meh=diffstr[i].split(/@@ -(\d+),(\d+) \+(\d+),(\d+) @@/);diff.unshift({start:meh[3],oldlength:meh[2],oldlines:[],newlength:meh[4],newlines:[]});}else if(diffstr[i][0]==="+"){diff[0].newlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]==="-"){diff[0].oldlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]===" "){diff[0].newlines.push(diffstr[i].substr(1));diff[0].oldlines.push(diffstr[i].substr(1));}else if(diffstr[i][0]==="\\"){if(diffstr[i-1][0]==="+"){remEOFNL=true;}else if(diffstr[i-1][0]==="-"){addEOFNL=true;}}}var str=oldStr.split("\n");for(var i=diff.length-1;i>=0;i--){var d=diff[i];for(var j=0;j<d.oldlength;j++){if(str[d.start-1+j]!==d.oldlines[j]){return false}}Array.prototype.splice.apply(str,[d.start-1,+d.oldlength].concat(d.newlines));}if(remEOFNL){while(!str[str.length-1]){str.pop();}}else if(addEOFNL){str.push("");}return str.join("\n")},convertChangesToXML:function(changes){var ret=[];for(var i=0;i<changes.length;i++){var change=changes[i];if(change.added){ret.push("<ins>");}else if(change.removed){ret.push("<del>");}ret.push(escapeHTML(change.value));if(change.added){ret.push("</ins>");}else if(change.removed){ret.push("</del>");}}return ret.join("")},convertChangesToDMP:function(changes){var ret=[],change;for(var i=0;i<changes.length;i++){change=changes[i];ret.push([change.added?1:change.removed?-1:0,change.value]);}return ret}};
 
@@ -1518,13 +1520,13 @@ const rendererProps=PropTypes__default.default.shape({content:PropTypes__default
 
 const itemProps=PropTypes__default.default.shape({question:PropTypes__default.default.shape({}).isRequired,answerArea:PropTypes__default.default.shape({}).isRequired,hints:PropTypes__default.default.arrayOf(PropTypes__default.default.any).isRequired});class ItemDiff extends React__namespace.Component{render(){const{before,after}=this.props;const hintCount=Math.max(before.hints.length,after.hints.length);const question=jsxRuntimeExports.jsx(RendererDiff,{before:before.question,after:after.question,title:"Question",showAlignmentOptions:false,showSeparator:true});const extras=jsxRuntimeExports.jsx(WidgetDiff,{before:before.answerArea,after:after.answerArea,title:"Question extras"});const hints=___default.default.times(hintCount,function(n){return jsxRuntimeExports.jsx(RendererDiff,{before:n<before.hints.length?before.hints[n]:undefined,after:n<after.hints.length?after.hints[n]:undefined,title:`Hint ${n+1}`,showAlignmentOptions:false,showSeparator:n<hintCount-1},n)});return jsxRuntimeExports.jsxs("div",{className:"framework-perseus",children:[question,extras,hints&&jsxRuntimeExports.jsx("div",{className:"diff-separator"}),hints]})}}ItemDiff.propTypes={after:itemProps.isRequired,before:itemProps.isRequired};
 
-const{InfoTip: InfoTip$p,InlineIcon: InlineIcon$5}=perseus.components;class HintEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor "+this.props.className,children:[this.props.showTitle&&jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Hint"}),jsxRuntimeExports.jsx(Editor,{ref:this.editor,apiOptions:this.props.apiOptions,widgets:this.props.widgets||undefined,content:this.props.content||undefined,images:this.props.images,replace:this.props.replace,placeholder:"Type your hint here...",imageUploader:this.props.imageUploader,onChange:this.props.onChange},this.props.itemId),jsxRuntimeExports.jsxs("div",{className:"hint-controls-container clearfix",children:[this.props.showMoveButtons&&jsxRuntimeExports.jsxs("span",{className:"reorder-hints",children:[jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isLast?"hidden":"",onClick:___default.default.partial(this.props.onMove,1),children:jsxRuntimeExports.jsx(InlineIcon$5,{...iconCircleArrowDown})})," ",jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isFirst?"hidden":"",onClick:___default.default.partial(this.props.onMove,-1),children:jsxRuntimeExports.jsx(InlineIcon$5,{...iconCircleArrowUp})})," ",this.props.isLast&&jsxRuntimeExports.jsx(InfoTip$p,{children:jsxRuntimeExports.jsx("p",{children:"The last hint is automatically bolded."})})]}),jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.replace,onChange:this.handleChange}),"Replace previous hint",this.props.showRemoveButton&&jsxRuntimeExports.jsxs("button",{type:"button",className:"remove-hint simple-button orange",onClick:this.props.onRemove,children:[jsxRuntimeExports.jsx(InlineIcon$5,{...perseus.iconTrash}),"Remove this hint"," "]})]})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.handleChange=e=>{this.props.onChange({replace:e.target.checked});},this.focus=()=>{this.editor.current?.focus();},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)};}}HintEditor.defaultProps={className:"",content:"",replace:false,showMoveButtons:true,showTitle:true,showRemoveButton:true};class CombinedHintEditor extends React__namespace.Component{componentDidMount(){this.updatePreview();}componentDidUpdate(){this.updatePreview();}render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";return jsxRuntimeExports.jsxs("div",{className:"perseus-combined-hint-editor "+"perseus-editor-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(HintEditor,{ref:this.editor,itemId:this.props.itemId,isFirst:this.props.isFirst,isLast:this.props.isLast,widgets:this.props.hint.widgets,content:this.props.hint.content,images:this.props.hint.images,replace:this.props.hint.replace,imageUploader:this.props.imageUploader,onChange:this.props.onChange,onRemove:this.props.onRemove,onMove:this.props.onMove,apiOptions:this.props.apiOptions})}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.deviceType,nochrome:true,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:this.frame,datasetKey:"mobile",datasetValue:isMobile,seamless:true,url:this.props.previewURL})})})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.frame=React__namespace.createRef(),this.updatePreview=()=>{const shouldBold=this.props.isLast&&!/\*\*/.test(this.props.hint.content);this.frame.current?.sendNewData({type:"hint",data:{hint:this.props.hint,bold:shouldBold,pos:this.props.pos,apiOptions:this.props.apiOptions,linterContext:{contentType:"hint",highlightLint:this.props.highlightLint,paths:this.props.contentPaths}}});},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)},this.focus=()=>{this.editor.current?.focus();};}}CombinedHintEditor.defaultProps={highlightLint:false};class CombinedHintsEditor extends React__namespace.Component{render(){const{itemId,hints}=this.props;const hintElems=___default.default.map(hints,function(hint,i){return jsxRuntimeExports.jsx(CombinedHintEditor,{ref:"hintEditor"+i,isFirst:i===0,isLast:i+1===hints.length,itemId:itemId,hint:hint,pos:i,imageUploader:this.props.imageUploader,onChange:this.handleHintChange.bind(this,i),onRemove:this.handleHintRemove.bind(this,i),onMove:this.handleHintMove.bind(this,i),deviceType:this.props.deviceType,apiOptions:this.props.apiOptions,highlightLint:this.props.highlightLint,previewURL:this.props.previewURL,contentPaths:[]},"hintEditor"+i)},this);return jsxRuntimeExports.jsxs("div",{className:"perseus-hints-editor perseus-editor-table",children:[hintElems,jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"add-hint-container perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("button",{type:"button",className:"add-hint simple-button orange",onClick:this.addHint,children:[jsxRuntimeExports.jsx(InlineIcon$5,{...iconPlus})," Add a hint"]})})})]})}constructor(...args){super(...args),this.handleHintChange=(i,newProps,cb,silent)=>{const hints=[...this.props.hints];hints[i]=___default.default.extend({},this.serializeHint(i,{keepDeletedWidgets:true}),newProps);this.props.onChange({hints:hints},cb,silent);},this.handleHintRemove=i=>{if(!confirm("Are you sure you want to delete this hint?")){return}const hints=[...this.props.hints];hints.splice(i,1);this.props.onChange({hints:hints});},this.handleHintMove=(i,dir)=>{const hints=[...this.props.hints];const hint=hints.splice(i,1)[0];hints.splice(i+dir,0,hint);this.props.onChange({hints:hints},()=>{this.refs["hintEditor"+(i+dir)].focus();});},this.addHint=()=>{const hints=this.props.hints.concat([{content:"",images:{},widgets:{}}]);this.props.onChange({hints:hints},()=>{const i=hints.length-1;this.refs["hintEditor"+i].focus();});},this.getSaveWarnings=()=>{return ___default.default.chain(this.props.hints).map((hint,i)=>{return ___default.default.map(this.refs["hintEditor"+i].getSaveWarnings(),issue=>"Hint "+(i+1)+": "+issue)}).flatten(true).value()},this.serialize=options=>{return this.props.hints.map((hint,i)=>{return this.serializeHint(i,options)})},this.serializeHint=(index,options)=>{return this.refs["hintEditor"+index].serialize(options)};}}CombinedHintsEditor.HintEditor=HintEditor;CombinedHintsEditor.defaultProps={onChange:()=>{},hints:[],highlightLint:false};
+const{InfoTip: InfoTip$p,InlineIcon: InlineIcon$5}=perseus.components;class HintEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor "+this.props.className,children:[this.props.showTitle&&jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Hint"}),jsxRuntimeExports.jsx(Editor,{ref:this.editor,apiOptions:this.props.apiOptions,widgets:this.props.widgets||undefined,content:this.props.content||undefined,images:this.props.images,replace:this.props.replace,placeholder:"Type your hint here...",imageUploader:this.props.imageUploader,onChange:this.props.onChange,widgetIsOpen:this.props.widgetIsOpen},this.props.itemId),jsxRuntimeExports.jsxs("div",{className:"hint-controls-container clearfix",children:[this.props.showMoveButtons&&jsxRuntimeExports.jsxs("span",{className:"reorder-hints",children:[jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isLast?"hidden":"",onClick:___default.default.partial(this.props.onMove,1),children:jsxRuntimeExports.jsx(InlineIcon$5,{...iconCircleArrowDown})})," ",jsxRuntimeExports.jsx("button",{type:"button",className:this.props.isFirst?"hidden":"",onClick:___default.default.partial(this.props.onMove,-1),children:jsxRuntimeExports.jsx(InlineIcon$5,{...iconCircleArrowUp})})," ",this.props.isLast&&jsxRuntimeExports.jsx(InfoTip$p,{children:jsxRuntimeExports.jsx("p",{children:"The last hint is automatically bolded."})})]}),jsxRuntimeExports.jsx("input",{type:"checkbox",checked:this.props.replace,onChange:this.handleChange}),"Replace previous hint",this.props.showRemoveButton&&jsxRuntimeExports.jsxs("button",{type:"button",className:"remove-hint simple-button orange",onClick:this.props.onRemove,children:[jsxRuntimeExports.jsx(InlineIcon$5,{...perseus.iconTrash}),"Remove this hint"," "]})]})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.handleChange=e=>{this.props.onChange({replace:e.target.checked});},this.focus=()=>{this.editor.current?.focus();},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)};}}HintEditor.defaultProps={className:"",content:"",replace:false,showMoveButtons:true,showTitle:true,showRemoveButton:true};class CombinedHintEditor extends React__namespace.Component{componentDidMount(){this.updatePreview();}componentDidUpdate(){this.updatePreview();}render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";return jsxRuntimeExports.jsxs("div",{className:"perseus-combined-hint-editor "+"perseus-editor-row",children:[jsxRuntimeExports.jsx("div",{className:"perseus-editor-left-cell",children:jsxRuntimeExports.jsx(HintEditor,{ref:this.editor,itemId:this.props.itemId,isFirst:this.props.isFirst,isLast:this.props.isLast,widgets:this.props.hint.widgets,content:this.props.hint.content,images:this.props.hint.images,replace:this.props.hint.replace,imageUploader:this.props.imageUploader,onChange:this.props.onChange,onRemove:this.props.onRemove,onMove:this.props.onMove,apiOptions:this.props.apiOptions,widgetIsOpen:this.props.widgetIsOpen})}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",children:jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.deviceType,nochrome:true,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:this.frame,datasetKey:"mobile",datasetValue:isMobile,seamless:true,url:this.props.previewURL})})})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.frame=React__namespace.createRef(),this.updatePreview=()=>{const shouldBold=this.props.isLast&&!/\*\*/.test(this.props.hint.content);this.frame.current?.sendNewData({type:"hint",data:{hint:this.props.hint,bold:shouldBold,pos:this.props.pos,apiOptions:this.props.apiOptions,linterContext:{contentType:"hint",highlightLint:this.props.highlightLint,paths:this.props.contentPaths}}});},this.getSaveWarnings=()=>{return this.editor.current?.getSaveWarnings()},this.serialize=options=>{return this.editor.current?.serialize(options)},this.focus=()=>{this.editor.current?.focus();};}}CombinedHintEditor.defaultProps={highlightLint:false};class CombinedHintsEditor extends React__namespace.Component{render(){const{itemId,hints}=this.props;const hintElems=___default.default.map(hints,function(hint,i){return jsxRuntimeExports.jsx(CombinedHintEditor,{ref:"hintEditor"+i,isFirst:i===0,isLast:i+1===hints.length,itemId:itemId,hint:hint,pos:i,imageUploader:this.props.imageUploader,onChange:this.handleHintChange.bind(this,i),onRemove:this.handleHintRemove.bind(this,i),onMove:this.handleHintMove.bind(this,i),deviceType:this.props.deviceType,apiOptions:this.props.apiOptions,highlightLint:this.props.highlightLint,previewURL:this.props.previewURL,contentPaths:[],widgetIsOpen:this.props.widgetIsOpen},"hintEditor"+i)},this);return jsxRuntimeExports.jsxs("div",{className:"perseus-hints-editor perseus-editor-table",children:[hintElems,jsxRuntimeExports.jsx("div",{className:"perseus-editor-row",children:jsxRuntimeExports.jsx("div",{className:"add-hint-container perseus-editor-left-cell",children:jsxRuntimeExports.jsxs("button",{type:"button",className:"add-hint simple-button orange",onClick:this.addHint,children:[jsxRuntimeExports.jsx(InlineIcon$5,{...iconPlus})," Add a hint"]})})})]})}constructor(...args){super(...args),this.handleHintChange=(i,newProps,cb,silent)=>{const hints=[...this.props.hints];hints[i]=___default.default.extend({},this.serializeHint(i,{keepDeletedWidgets:true}),newProps);this.props.onChange({hints:hints},cb,silent);},this.handleHintRemove=i=>{if(!confirm("Are you sure you want to delete this hint?")){return}const hints=[...this.props.hints];hints.splice(i,1);this.props.onChange({hints:hints});},this.handleHintMove=(i,dir)=>{const hints=[...this.props.hints];const hint=hints.splice(i,1)[0];hints.splice(i+dir,0,hint);this.props.onChange({hints:hints},()=>{this.refs["hintEditor"+(i+dir)].focus();});},this.addHint=()=>{const hints=this.props.hints.concat([{content:"",images:{},widgets:{}}]);this.props.onChange({hints:hints},()=>{const i=hints.length-1;this.refs["hintEditor"+i].focus();});},this.getSaveWarnings=()=>{return ___default.default.chain(this.props.hints).map((hint,i)=>{return ___default.default.map(this.refs["hintEditor"+i].getSaveWarnings(),issue=>"Hint "+(i+1)+": "+issue)}).flatten(true).value()},this.serialize=options=>{return this.props.hints.map((hint,i)=>{return this.serializeHint(i,options)})},this.serializeHint=(index,options)=>{return this.refs["hintEditor"+index].serialize(options)};}}CombinedHintsEditor.HintEditor=HintEditor;CombinedHintsEditor.defaultProps={onChange:()=>{},hints:[],highlightLint:false};
 
 const{InfoTip: InfoTip$o}=perseus.components;class ItemExtrasEditor extends React__namespace.Component{shouldShowFinancialCalculatorOptions(){return this.props.financialCalculatorMonthlyPayment||this.props.financialCalculatorTotalAmount||this.props.financialCalculatorTimeToPayOff}render(){return jsxRuntimeExports.jsx("div",{className:"perseus-answer-editor",children:jsxRuntimeExports.jsxs("div",{className:"perseus-answer-options",children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show calculator",infoTip:"Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations.",checked:this.props.calculator,onChange:newCheckedState=>{this.props.onChange({calculator:newCheckedState});}}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show financial calculator",infoTip:"This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked.",checked:this.shouldShowFinancialCalculatorOptions(),onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState,financialCalculatorTotalAmount:newCheckedState,financialCalculatorTimeToPayOff:newCheckedState});}}),this.shouldShowFinancialCalculatorOptions()&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include monthly payment",infoTip:"This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?",checked:this.props.financialCalculatorMonthlyPayment,onChange:newCheckedState=>{this.props.onChange({financialCalculatorMonthlyPayment:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include total amount",infoTip:"This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?",checked:this.props.financialCalculatorTotalAmount,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTotalAmount:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include time-to-pay-off",infoTip:"This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?",checked:this.props.financialCalculatorTimeToPayOff,onChange:newCheckedState=>{this.props.onChange({financialCalculatorTimeToPayOff:newCheckedState});},indent:true})]}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show periodic table",infoTip:"This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions.",checked:this.props.periodicTable,onChange:newCheckedState=>{this.props.onChange({periodicTable:newCheckedState,periodicTableWithKey:false});}}),this.props.periodicTable&&jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Include key/legend with periodic table",infoTip:"Include a key for HS courses; omit for AP chemistry.",checked:this.props.periodicTableWithKey,onChange:newCheckedState=>{this.props.onChange({periodicTableWithKey:newCheckedState});},indent:true}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show z table (statistics)",infoTip:"This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions.",checked:this.props.zTable,onChange:newCheckedState=>{this.props.onChange({zTable:newCheckedState});}}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show t table (statistics)",infoTip:"This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions.",checked:this.props.tTable,onChange:newCheckedState=>{this.props.onChange({tTable:newCheckedState});}}),jsxRuntimeExports.jsx(ItemExtraCheckbox,{label:"Show chi-squared table (statistics)",infoTip:"This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions.",checked:this.props.chi2Table,onChange:newCheckedState=>{this.props.onChange({chi2Table:newCheckedState});}})]})})}constructor(...args){super(...args),this.serialize=()=>{const data={...ItemExtrasEditor.defaultProps};for(const key of perseusCore.ItemExtras){data[key]=!!this.props[key];}return data};}}ItemExtrasEditor.defaultProps={calculator:false,chi2Table:false,financialCalculatorMonthlyPayment:false,financialCalculatorTotalAmount:false,financialCalculatorTimeToPayOff:false,periodicTable:false,periodicTableWithKey:false,tTable:false,zTable:false};const ItemExtraCheckbox=props=>jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$P.checkbox,props.indent?styles$P.indented:undefined],children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:{flexDirection:"row"},children:[props.label," ",jsxRuntimeExports.jsx(InfoTip$o,{children:props.infoTip})]}),checked:props.checked,onChange:newCheckedState=>props.onChange(newCheckedState)})});const styles$P=aphrodite.StyleSheet.create({indented:{marginInlineStart:wonderBlocksTokens.spacing.large_24}});
 
 class ItemEditor extends React__namespace.Component{render(){const isMobile=this.props.deviceType==="phone"||this.props.deviceType==="tablet";return jsxRuntimeExports.jsxs("div",{className:"perseus-editor-table",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-question-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question"}),jsxRuntimeExports.jsx(Editor,{ref:this.questionEditor,placeholder:"Type your question here...",className:"perseus-question-editor",imageUploader:this.props.imageUploader,onChange:this.handleEditorChange,apiOptions:this.props.apiOptions,showWordCount:true,widgetIsOpen:this.props.widgetIsOpen,...this.props.question},this.props.itemId)]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell",children:jsxRuntimeExports.jsxs("div",{id:"problemarea",children:[jsxRuntimeExports.jsx(DeviceFramer,{deviceType:this.props.deviceType,nochrome:true,children:jsxRuntimeExports.jsx(IframeContentRenderer,{ref:this.frame,datasetKey:"mobile",datasetValue:isMobile,seamless:true,url:this.props.previewURL},this.props.deviceType)}),jsxRuntimeExports.jsx("div",{id:"hintsarea",className:"hintsarea",style:{display:"none"}})]})})]}),jsxRuntimeExports.jsxs("div",{className:"perseus-editor-row perseus-answer-container",children:[jsxRuntimeExports.jsxs("div",{className:"perseus-editor-left-cell",children:[jsxRuntimeExports.jsx("div",{className:"pod-title",children:"Question extras"}),jsxRuntimeExports.jsx(ItemExtrasEditor,{ref:this.itemExtrasEditor,onChange:this.handleItemExtrasChange,...this.props.answerArea})]}),jsxRuntimeExports.jsx("div",{className:"perseus-editor-right-cell"})]})]})}constructor(...args){super(...args),this.frame=React__namespace.createRef(),this.questionEditor=React__namespace.createRef(),this.itemExtrasEditor=React__namespace.createRef(),this.updateProps=(newProps,cb,silent)=>{const props=___default.default(this.props).pick("question","answerArea");this.props.onChange(___default.default(props).extend(newProps),cb,silent);},this.triggerPreviewUpdate=newData=>{this.frame.current?.sendNewData(newData);},this.handleEditorChange=(newProps,cb,silent)=>{const question=___default.default.extend({},this.props.question,newProps);this.updateProps({question},cb,silent);},this.handleItemExtrasChange=(newProps,cb,silent)=>{const answerArea=___default.default.extend({},this.props.answerArea,newProps);this.updateProps({answerArea},cb,silent);},this.getSaveWarnings=()=>{return this.questionEditor.current?.getSaveWarnings()},this.serialize=options=>{return {question:this.questionEditor.current?.serialize(options),answerArea:this.itemExtrasEditor.current?.serialize()}};}}ItemEditor.defaultProps={onChange:()=>{},question:{},answerArea:{}};
 
-const{HUD}=perseus.components;class EditorPage extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.updateRenderer();}componentDidUpdate(){setTimeout(()=>{this.updateRenderer();});}componentWillUnmount(){this._isMounted=false;}updateRenderer(){const hasEditor=!this.props.developerMode||!this.props.jsonMode;if(!this._isMounted||!hasEditor){return}const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};this.itemEditor.current?.triggerPreviewUpdate({type:"question",data:___default.default({item:this.serialize(),apiOptions:deviceBasedApiOptions,initialHintsVisible:0,device:this.props.previewDevice,linterContext:{contentType:"exercise",highlightLint:this.state.highlightLint,paths:this.props.contentPaths||[]},reviewMode:true,legacyPerseusLint:this.itemEditor.current?.getSaveWarnings()}).extend(___default.default(this.props).pick("workAreaSelector","solutionAreaSelector","hintsAreaSelector","problemNum"))});}getApiOptions(){return {...perseus.ApiOptions.defaults,...this.props.apiOptions}}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(options){if(this.props.jsonMode){return this.state.json}return ___default.default.extend(this.itemEditor.current?.serialize(options),{hints:this.hintsEditor.current?.serialize(options)})}render(){let className="framework-perseus";const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};if(deviceBasedApiOptions.isMobile){className+=" "+perseus.ClassNames.MOBILE;}return 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,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,onChange:this.changeJSON})}),(!this.props.developerMode||!this.props.jsonMode)&&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,wasAnswered:this.state.wasAnswered,gradeMessage:this.state.gradeMessage,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL}),(!this.props.developerMode||!this.props.jsonMode)&&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})]})}constructor(props){super(props),this.itemEditor=React__namespace.createRef(),this.hintsEditor=React__namespace.createRef(),this.toggleJsonMode=()=>{this.setState({json:this.serialize({keepDeletedWidgets:true})},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=(toChange,cb,silent)=>{const newProps=___default.default(this.props).pick("question","hints","answerArea");___default.default(newProps).extend(toChange);this.props.onChange(newProps,cb,silent);},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:___default.default.pick(this.props,"question","answerArea","hints"),gradeMessage:"",wasAnswered:false,highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true};this._isMounted=false;}}EditorPage.defaultProps={developerMode:false,jsonMode:false,onChange:()=>{}};
+const{HUD}=perseus.components;class EditorPage extends React__namespace.Component{componentDidMount(){this._isMounted=true;this.updateRenderer();}componentDidUpdate(){setTimeout(()=>{this.updateRenderer();});}componentWillUnmount(){this._isMounted=false;}updateRenderer(){const hasEditor=!this.props.developerMode||!this.props.jsonMode;if(!this._isMounted||!hasEditor){return}const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};this.itemEditor.current?.triggerPreviewUpdate({type:"question",data:___default.default({item:this.serialize(),apiOptions:deviceBasedApiOptions,initialHintsVisible:0,device:this.props.previewDevice,linterContext:{contentType:"exercise",highlightLint:this.state.highlightLint,paths:this.props.contentPaths||[]},reviewMode:true,legacyPerseusLint:this.itemEditor.current?.getSaveWarnings()}).extend(___default.default(this.props).pick("workAreaSelector","solutionAreaSelector","hintsAreaSelector","problemNum"))});}getApiOptions(){return {...perseus.ApiOptions.defaults,...this.props.apiOptions}}getSaveWarnings(){const issues1=this.itemEditor.current?.getSaveWarnings();const issues2=this.hintsEditor.current?.getSaveWarnings();return issues1.concat(issues2)}serialize(options){if(this.props.jsonMode){return this.state.json}return ___default.default.extend(this.itemEditor.current?.serialize(options),{hints:this.hintsEditor.current?.serialize(options)})}render(){let className="framework-perseus";const touch=this.props.previewDevice==="phone"||this.props.previewDevice==="tablet";const deviceBasedApiOptions={...this.getApiOptions(),customKeypad:touch,isMobile:touch};if(deviceBasedApiOptions.isMobile){className+=" "+perseus.ClassNames.MOBILE;}return 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,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,onChange:this.changeJSON})}),(!this.props.developerMode||!this.props.jsonMode)&&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,wasAnswered:this.state.wasAnswered,gradeMessage:this.state.gradeMessage,deviceType:this.props.previewDevice,widgetIsOpen:this.state.widgetsAreOpen,apiOptions:deviceBasedApiOptions,previewURL:this.props.previewURL}),(!this.props.developerMode||!this.props.jsonMode)&&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__namespace.createRef(),this.hintsEditor=React__namespace.createRef(),this.toggleJsonMode=()=>{this.setState({json:this.serialize({keepDeletedWidgets:true})},()=>{this.props.onChange({jsonMode:!this.props.jsonMode});});},this.handleChange=(toChange,cb,silent)=>{const newProps=___default.default(this.props).pick("question","hints","answerArea");___default.default(newProps).extend(toChange);this.props.onChange(newProps,cb,silent);},this.changeJSON=newJson=>{this.setState({json:newJson});this.props.onChange(newJson);};this.state={json:___default.default.pick(this.props,"question","answerArea","hints"),gradeMessage:"",wasAnswered:false,highlightLint:true,widgetsAreOpen:this.props.widgetsAreOpen??true};this._isMounted=false;}}EditorPage.defaultProps={developerMode:false,jsonMode:false,onChange:()=>{}};
 
 function ContentPreview({question,apiOptions,seamless,linterContext,legacyPerseusLint,previewDevice}){const i18n=perseus.usePerseusI18n();const isMobile=previewDevice!=="desktop";const className=isMobile?"perseus-mobile":"";return jsxRuntimeExports.jsx(wonderBlocksCore.View,{className:`framework-perseus ${className}`,style:[styles$O.container,!seamless?styles$O.gutter:undefined],children:jsxRuntimeExports.jsx(keypadContext.StatefulKeypadContextProvider,{children:jsxRuntimeExports.jsx(keypadContext.KeypadContext.Consumer,{children:({setKeypadActive,keypadElement,setKeypadElement})=>jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(perseus.Renderer,{strings:i18n.strings,apiOptions:{...apiOptions,isMobile},keypadElement:keypadElement,linterContext:linterContext,legacyPerseusLint:legacyPerseusLint,...question}),jsxRuntimeExports.jsx(mathInput.MobileKeypad,{onAnalyticsEvent:()=>Promise.resolve(),onDismiss:()=>setKeypadActive(false),onElementMounted:setKeypadElement})]})})})})}const styles$O=aphrodite.StyleSheet.create({container:{padding:wonderBlocksTokens.spacing.xxxSmall_4,containerType:"inline-size",containerName:"perseus-root"},gutter:{marginRight:lintGutterWidth}});
 
@@ -1542,8 +1544,8 @@ const{InfoTip: InfoTip$m,InlineIcon: InlineIcon$4}=perseus.components;class Drop
 
 const{TextInput: TextInput$6}=perseus.components;class ExplanationEditor extends React__namespace.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$6,{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$6,{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,immutableWidgets:false,onChange:props=>{const newProps={};if(___default.default.has(props,"content")){newProps.explanation=props.content;}if(___default.default.has(props,"widgets")){newProps.widgets=props.widgets;}this.change(newProps);}})})]})}constructor(...args){super(...args),this.state={},this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}ExplanationEditor.propTypes={...perseus.Changeable.propTypes,showPrompt:PropTypes__default.default.string,hidePrompt:PropTypes__default.default.string,explanation:PropTypes__default.default.string,widgets:PropTypes__default.default.object,apiOptions:PropTypes__default.default.any};ExplanationEditor.widgetName="explanation";ExplanationEditor.defaultProps=perseusCore.explanationLogic.defaultWidgetOptions;
 
-const{InfoTip: InfoTip$l}=perseus.components;const buttonSetsList=["basic","trig","prealgebra","logarithms","scientific","basic relations","advanced relations"];class ExpressionEditor extends React__namespace.Component{serialize(){const{answerForms,buttonSets,functions,times,visibleLabel,ariaLabel}=this.props;return {answerForms,buttonSets,functions,times,visibleLabel,ariaLabel,extraKeys:perseusCore.deriveExtraKeys(this.props)}}updateAnswerForm(index,answerFormProps){const answerForms=this.props.answerForms.slice();answerForms[index]=answerFormProps;const{extraKeys:_,...restProps}=this.props;const extraKeys=perseusCore.deriveExtraKeys({...restProps,answerForms});this.props.onChange({answerForms,extraKeys});}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 answerOptions=this.props.answerForms.map((ans,index)=>{const expressionProps={times:this.props.times,functions:this.props.functions,buttonSets:this.props.buttonSets,buttonsVisible:"focused",value:ans.value,onChange:props=>this.changeExpressionWidget(index,props),trackInteraction:()=>{},widgetId:this.props.widgetId+"-"+ans.key,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel};return jsxRuntimeExports.jsx(AnswerOption,{considered:ans.considered,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(wonderBlocksForm.Checkbox,{label:name,checked:checked,disabled:isBasic,onChange:()=>this.handleButtonSet(name)},name)});buttonSetChoices.unshift(jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"show ÷ button",checked:this.props.buttonSets.includes("basic+div"),onChange:this.handleToggleDiv},"show ÷ button"));return jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Global Options"}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:"Visible label",value:this.props.visibleLabel||"",onChange:this.handleVisibleLabel}),jsxRuntimeExports.jsx(InfoTip$l,{children:jsxRuntimeExports.jsx("p",{children:"Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:"Aria label",value:this.props.ariaLabel||"",onChange:this.handleAriaLabel}),jsxRuntimeExports.jsx(InfoTip$l,{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 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."})]})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:"Function variables",value:this.state.functionsInternal,onChange:this.handleFunctions}),jsxRuntimeExports.jsx(InfoTip$l,{children:jsxRuntimeExports.jsx("p",{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".'})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Use × instead of ⋅ for multiplication",checked:this.props.times,onChange:newCheckedState=>{this.changeTimes(newCheckedState);}}),jsxRuntimeExports.jsx(InfoTip$l,{children:jsxRuntimeExports.jsx("p",{children:"For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingXSmall,{children:"Button Sets"}),buttonSetChoices]}),jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Answers"}),jsxRuntimeExports.jsx("p",{style:{margin:"4px 0"},children:"student responses area matched against these from top to bottom"}),answerOptions,jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(Button__default.default,{size:"small",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");}___default.default(this.props.answerForms).each((form,ix)=>{if(this.props.value===""){issues.push(`Answer ${ix+1} is empty`);}else {const expression=KAS__namespace.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(wonderStuffCore.isTruthy);this.props.onChange(newProps);},this.handleVisibleLabel=visibleLabel=>{this.props.onChange({visibleLabel});},this.handleAriaLabel=ariaLabel=>{this.props.onChange({ariaLabel});},this.changeExpressionWidget=(index,props)=>{const answerForm={...this.props.answerForms[index],value:props.value};this.updateAnswerForm(index,answerForm);};this.state={functionsInternal:this.props.functions.join(" ")};}}ExpressionEditor.widgetName="expression";ExpressionEditor.defaultProps=perseusCore.expressionLogic.defaultWidgetOptions;const findNextIn=function(arr,val){let ix=arr.indexOf(val);ix=(ix+1)%arr.length;return arr[ix]};class AnswerOption extends React__namespace.Component{render(){const removeButton=this.state.deleteFocused?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleImSure,color:"destructive",children:"I'm sure!"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleCancelDelete,light:true,children:"Cancel"})]}):jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleDelete,color:"destructive",light:true,children:"Delete"});const answerStatusCss=aphrodite.css(styles$N.answerStatus,this.props.considered==="wrong"&&styles$N.answerStatusWrong,this.props.considered==="correct"&&styles$N.answerStatusCorrect,this.props.considered==="ungraded"&&styles$N.answerStatusUngraded);return jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.answerOption),children:jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.answerBody),children:[jsxRuntimeExports.jsxs("div",{children:[jsxRuntimeExports.jsx("button",{onClick:this.toggleConsidered,className:answerStatusCss,children:this.props.considered}),jsxRuntimeExports.jsx("div",{children:jsxRuntimeExports.jsx(perseus.Expression,{...this.props.expressionProps})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Answer expression must have the same form.",checked:this.props.form,onChange:this.props.onChangeForm}),jsxRuntimeExports.jsx(InfoTip$l,{children:jsxRuntimeExports.jsx("p",{children:"The student's answer must be in the same form. Commutativity and excess negative signs are ignored."})})]}),jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"Answer expression must be fully expanded and simplified.",checked:this.props.simplify,onChange:this.props.onChangeSimplify}),jsxRuntimeExports.jsx(InfoTip$l,{children:jsxRuntimeExports.jsx("p",{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."'})})]}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(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(perseusCore.PerseusExpressionAnswerFormConsidered,this.props.considered);this.props.onChangeConsidered(newVal);};}}const styles$N=aphrodite.StyleSheet.create({paddedX:{paddingLeft:wonderBlocksTokens.spacing.xSmall_8,paddingRight:wonderBlocksTokens.spacing.xSmall_8},paddedY:{paddingTop:wonderBlocksTokens.spacing.xxSmall_6,paddingBottom:wonderBlocksTokens.spacing.xxSmall_6},answerOption:{border:"1px solid #ddd",borderRadius:"3px",display:"flex"},answerStatus:{border:"none",userSelect:"none",width:"100px",paddingTop:wonderBlocksTokens.spacing.small_12,paddingBottom:wonderBlocksTokens.spacing.small_12},answerStatusWrong:{backgroundColor:wonderBlocksTokens.color.fadedRed16},answerStatusCorrect:{backgroundColor:wonderBlocksTokens.color.fadedGreen16},answerStatusUngraded:{backgroundColor:wonderBlocksTokens.color.fadedBlue16},answerBody:{},buttonRow:{display:"flex"}});
+const{ButtonGroup: ButtonGroup$7,InfoTip: InfoTip$l}=perseus.components;const buttonSetsList=["basic","trig","prealgebra","logarithms","scientific","basic relations","advanced relations"];class ExpressionEditor extends React__namespace.Component{serialize(){const{answerForms,buttonSets,functions,times,visibleLabel,ariaLabel}=this.props;return {answerForms,buttonSets,functions,times,visibleLabel,ariaLabel,extraKeys:perseusCore.deriveExtraKeys(this.props)}}updateAnswerForm(index,answerFormProps){const answerForms=this.props.answerForms.slice();answerForms[index]=answerFormProps;const{extraKeys:_,...restProps}=this.props;const extraKeys=perseusCore.deriveExtraKeys({...restProps,answerForms});this.props.onChange({answerForms,extraKeys});}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 answerOptions=this.props.answerForms.map((ans,index)=>{const expressionProps={times:this.props.times,functions:this.props.functions,buttonSets:this.props.buttonSets,buttonsVisible:"focused",value:ans.value,onChange:props=>this.changeExpressionWidget(index,props),trackInteraction:()=>{},widgetId:this.props.widgetId+"-"+ans.key,visibleLabel:this.props.visibleLabel,ariaLabel:this.props.ariaLabel};return jsxRuntimeExports.jsx(AnswerOption,{considered:ans.considered,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(wonderBlocksForm.Checkbox,{label:name,checked:checked,disabled:isBasic,onChange:()=>this.handleButtonSet(name)},name)});buttonSetChoices.unshift(jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:"show ÷ button",checked:this.props.buttonSets.includes("basic+div"),onChange:this.handleToggleDiv},"show ÷ button"));return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Global Options"}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Visible label",jsxRuntimeExports.jsx(InfoTip$l,{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:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Aria label",jsxRuntimeExports.jsxs(InfoTip$l,{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:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.LabeledTextField,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Function variables",jsxRuntimeExports.jsx(InfoTip$l,{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:aphrodite.css(styles$N.paddedY),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Use × instead of ⋅ for multiplication",jsxRuntimeExports.jsx(InfoTip$l,{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:aphrodite.css(styles$N.paddedY),children:[jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingXSmall,{children:"Button Sets"}),buttonSetChoices]}),jsxRuntimeExports.jsx(wonderBlocksTypography.HeadingSmall,{children:"Answers"}),jsxRuntimeExports.jsx(wonderBlocksTypography.Caption,{style:styles$N.answersSubtitle,children:"student responses area matched against these from top to bottom"}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:{gap:wonderBlocksTokens.spacing.xSmall_8},children:answerOptions}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",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");}___default.default(this.props.answerForms).each((form,ix)=>{if(this.props.value===""){issues.push(`Answer ${ix+1} is empty`);}else {const expression=KAS__namespace.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(wonderStuffCore.isTruthy);this.props.onChange(newProps);},this.handleVisibleLabel=visibleLabel=>{this.props.onChange({visibleLabel});},this.handleAriaLabel=ariaLabel=>{this.props.onChange({ariaLabel});},this.changeExpressionWidget=(index,props)=>{const answerForm={...this.props.answerForms[index],value:props.value};this.updateAnswerForm(index,answerForm);};this.state={functionsInternal:this.props.functions.join(" ")};}}ExpressionEditor.widgetName="expression";ExpressionEditor.defaultProps=perseusCore.expressionLogic.defaultWidgetOptions;const findNextIn=function(arr,val){let ix=arr.indexOf(val);ix=(ix+1)%arr.length;return arr[ix]};class AnswerOption extends React__namespace.Component{render(){const removeButton=this.state.deleteFocused?jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleImSure,color:"destructive",children:"I'm sure!"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleCancelDelete,kind:"secondary",children:"Cancel"})]}):jsxRuntimeExports.jsx(Button__default.default,{size:"small",onClick:this.handleDelete,color:"destructive",kind:"tertiary",style:styles$N.deleteButton,children:"Delete"});return jsxRuntimeExports.jsxs("div",{className:aphrodite.css(styles$N.answerOption),children:[jsxRuntimeExports.jsx(ButtonGroup$7,{onChange:this.toggleConsidered,allowEmpty:false,value:this.props.considered,selectedButtonStyle:consideredButtonStyles[this.props.considered],buttons:perseusCore.PerseusExpressionAnswerFormConsidered.map(c=>({value:c,content:c,title:`This answer will be considered ${c}`}))}),jsxRuntimeExports.jsx(perseus.Expression,{...this.props.expressionProps}),jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must have the same form.",jsxRuntimeExports.jsx(InfoTip$l,{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:aphrodite.css(styles$N.paddedY,styles$N.paddedX),children:jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:["Answer expression must be fully expanded and simplified.",jsxRuntimeExports.jsx(InfoTip$l,{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:aphrodite.css(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(perseusCore.PerseusExpressionAnswerFormConsidered,this.props.considered);this.props.onChangeConsidered(newVal);};}}const styles$N=aphrodite.StyleSheet.create({paddedX:{paddingLeft:wonderBlocksTokens.spacing.xSmall_8,paddingRight:wonderBlocksTokens.spacing.xSmall_8},paddedY:{paddingTop:wonderBlocksTokens.spacing.xxSmall_6,paddingBottom:wonderBlocksTokens.spacing.xxSmall_6},answersSubtitle:{fontStyle:"italic"},answerOption:{border:"1px solid #ddd",borderRadius:"3px",display:"flex",flexDirection:"column"},answerStatusWrong:{backgroundColor:wonderBlocksTokens.color.fadedRed16},answerStatusCorrect:{backgroundColor:wonderBlocksTokens.color.fadedGreen16},answerStatusUngraded:{backgroundColor:wonderBlocksTokens.color.fadedBlue16},buttonRow:{display:"flex"},deleteButton:{paddingInline:wonderBlocksTokens.sizing.size_160}});const consideredButtonStyles={wrong:styles$N.answerStatusWrong,correct:styles$N.answerStatusCorrect,ungraded:styles$N.answerStatusUngraded};
 
 const{InlineIcon: InlineIcon$3,TextInput: TextInput$5}=perseus.components;class GradedGroupEditor extends React__namespace.Component{render(){return jsxRuntimeExports.jsxs("div",{className:"perseus-group-editor",children:[jsxRuntimeExports.jsx("div",{className:"perseus-widget-row",children:jsxRuntimeExports.jsxs("label",{className:aphrodite.css(styles$M.title),children:["Title:"," ",jsxRuntimeExports.jsx(TextInput$5,{value:this.props.title,className:aphrodite.css(styles$M.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,immutableWidgets:false,onChange:this.props.onChange,warnNoPrompt:true,warnNoWidgets:true}),!this.props.hint&&jsxRuntimeExports.jsxs("button",{type:"button",style:{marginTop:10},className:"add-hint simple-button orange",onClick:this.handleAddHint,children:[jsxRuntimeExports.jsx(InlineIcon$3,{...iconPlus})," Add a hint"]}),this.props.hint&&jsxRuntimeExports.jsxs("div",{className:"perseus-hint-editor",children:[jsxRuntimeExports.jsx("div",{className:aphrodite.css(styles$M.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,immutableWidgets:false,onChange:props=>{this.change("hint",Object.assign({},this.props.hint,props));}}),jsxRuntimeExports.jsxs("button",{type:"button",className:"remove-hint simple-button orange",onClick:this.handleRemoveHint,children:[jsxRuntimeExports.jsx(InlineIcon$3,{...perseus.iconTrash})," Remove this hint"]})]})]})}constructor(...args){super(...args),this.editor=React__namespace.createRef(),this.hintEditor=React__namespace.createRef(),this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.handleAddHint=()=>{const hint={content:""};this.props.onChange({hint},()=>{this.hintEditor.current?.focus();});},this.handleRemoveHint=e=>{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={...perseus.Changeable.propTypes,title:PropTypes__default.default.string,content:PropTypes__default.default.string,widgets:PropTypes__default.default.object,images:PropTypes__default.default.object,apiOptions:perseus.ApiOptions.propTypes};GradedGroupEditor.widgetName="graded-group";GradedGroupEditor.defaultProps=perseusCore.gradedGroupLogic.defaultWidgetOptions;const styles$M=aphrodite.StyleSheet.create({title:{fontSize:18,fontWeight:"bold"},input:{fontSize:18},hintsTitle:{marginTop:10,fontSize:"110%",fontWeight:"bold"}});
 
@@ -1591,20 +1593,6 @@ const{getDependencies: getDependencies$1}=perseus.Dependencies;class RectangleEd
 
 const{getDependencies}=perseus.Dependencies;const{unescapeMathMode}=perseus.Util;class InteractionEditor extends React__namespace.Component{UNSAFE_componentWillReceiveProps(nextProps){this.setState({usedVarSubscripts:this._getAllVarSubscripts(nextProps.elements),usedFunctionNames:this._getAllFunctionNames(nextProps.elements)});}_getAllVarSubscripts(elements){return ___default.default.map(___default.default.where(elements,{type:"movable-point"}),element=>element.options.varSubscript).concat(___default.default.map(___default.default.where(elements,{type:"movable-line"}),element=>element.options.startSubscript)).concat(___default.default.map(___default.default.where(elements,{type:"movable-line"}),element=>element.options.endSubscript))}_getAllFunctionNames(elements){return ___default.default.map(___default.default.where(elements,{type:"function"}),element=>element.options.funcName)}render(){const{TeX}=getDependencies();return jsxRuntimeExports.jsxs("div",{className:"perseus-widget-interaction-editor",children:[jsxRuntimeExports.jsxs(ElementContainer,{title:"Grid settings",children:[jsxRuntimeExports.jsx(GraphSettings,{editableSettings:["canvas","graph"],box:this.props.graph.box,labels:this.props.graph.labels,range:this.props.graph.range,step:this.props.graph.tickStep,gridStep:this.props.graph.gridStep,markings:this.props.graph.markings,onChange:this._updateGraphProps}),jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment,{children:this.props.graph.valid!==true&&jsxRuntimeExports.jsx("div",{children:this.props.graph.valid})})]}),___default.default.map(this.props.elements,function(element,n){if(element.type==="movable-point"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Movable point"," ",jsxRuntimeExports.jsx(TeX,{children:"(x_{"+element.options.varSubscript+"}, y_{"+element.options.varSubscript+"})"})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement.bind(this,n),children:jsxRuntimeExports.jsx(MovablePointEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="movable-line"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Movable line"," ",jsxRuntimeExports.jsx(TeX,{children:"(x_{"+element.options.startSubscript+"}, y_{"+element.options.startSubscript+"})"})," ","to"," ",jsxRuntimeExports.jsx(TeX,{children:"(x_{"+element.options.endSubscript+"}, y_{"+element.options.endSubscript+"})"})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement.bind(this,n),children:jsxRuntimeExports.jsx(MovableLineEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="point"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Point"," ",jsxRuntimeExports.jsx(TeX,{children:"("+element.options.coordX+", "+element.options.coordY+")"})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement.bind(this,n),children:jsxRuntimeExports.jsx(PointEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="line"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Line"," ",jsxRuntimeExports.jsx(TeX,{children:"("+element.options.startX+", "+element.options.startY+")"})," ","to"," ",jsxRuntimeExports.jsx(TeX,{children:"("+element.options.endX+", "+element.options.endY+")"})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement.bind(this,n),children:jsxRuntimeExports.jsx(LineEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="function"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Function"," ",jsxRuntimeExports.jsx(TeX,{children:element.options.funcName+"(x) = "+element.options.value})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement,children:jsxRuntimeExports.jsx(FunctionEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="parametric"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsx("span",{children:"Parametric"}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement,children:jsxRuntimeExports.jsx(ParametricEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="label"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Label"," ",jsxRuntimeExports.jsx(TeX,{children:unescapeMathMode(element.options.label)})," "]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement,children:jsxRuntimeExports.jsx(LabelEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}if(element.type==="rectangle"){return jsxRuntimeExports.jsx(ElementContainer,{title:jsxRuntimeExports.jsxs("span",{children:["Rectangle"," ",jsxRuntimeExports.jsx(TeX,{children:"("+element.options.coordX+", "+element.options.coordY+")"})," — ",jsxRuntimeExports.jsx(TeX,{children:element.options.width+" \\times "+element.options.height})]}),onUp:n===0?null:this._moveElementUp.bind(this,n),onDown:n===this.props.elements.length-1?null:this._moveElementDown.bind(this,n),onDelete:this._deleteElement,children:jsxRuntimeExports.jsx(RectangleEditor,{...element.options,onChange:newProps=>{const elements=JSON.parse(JSON.stringify(this.props.elements));___default.default.extend(elements[n].options,newProps);this.change({elements:elements});}})},element.key)}},this),jsxRuntimeExports.jsx("div",{className:"perseus-widget-interaction-editor-select-element",children:jsxRuntimeExports.jsxs("select",{onChange:this._addNewElement,children:[jsxRuntimeExports.jsxs("option",{value:"",children:["Add an element","…"]}),jsxRuntimeExports.jsx("option",{disabled:true,children:"--"}),jsxRuntimeExports.jsx("option",{value:"point",children:"Point"}),jsxRuntimeExports.jsx("option",{value:"line",children:"Line segment"}),jsxRuntimeExports.jsx("option",{value:"function",children:"Function plot"}),jsxRuntimeExports.jsx("option",{value:"parametric",children:"Parametric plot"}),jsxRuntimeExports.jsx("option",{value:"label",children:"Label"}),jsxRuntimeExports.jsx("option",{value:"rectangle",children:"Rectangle"}),jsxRuntimeExports.jsx("option",{value:"movable-point",children:"★ Movable point"}),jsxRuntimeExports.jsx("option",{value:"movable-line",children:"★ Movable line segment"})]})})]})}constructor(...args){super(...args),this.state={usedVarSubscripts:this._getAllVarSubscripts(this.props.elements),usedFunctionNames:this._getAllFunctionNames(this.props.elements)},this._updateGraphProps=newProps=>{this.change({graph:___default.default.extend(___default.default.omit(newProps,"step"),{tickStep:newProps.step})});},this._addNewElement=e=>{const elementType=e.target.value;if(elementType===""){return}e.target.value="";const newElement={type:elementType,key:elementType+"-"+(Math.random()*0xffffff<<0).toString(16),options:elementType==="point"?___default.default.clone(PointEditor.defaultProps):elementType==="line"?___default.default.clone(LineEditor.defaultProps):elementType==="movable-point"?___default.default.clone(MovablePointEditor.defaultProps):elementType==="movable-line"?___default.default.clone(MovableLineEditor.defaultProps):elementType==="function"?___default.default.clone(FunctionEditor.defaultProps):elementType==="parametric"?___default.default.clone(ParametricEditor.defaultProps):elementType==="label"?___default.default.clone(LabelEditor.defaultProps):elementType==="rectangle"?___default.default.clone(RectangleEditor.defaultProps):{}};let nextSubscript;if(elementType==="movable-point"){nextSubscript=___default.default.max([___default.default.max(this.state.usedVarSubscripts),-1])+1;newElement.options.varSubscript=nextSubscript;}else if(elementType==="movable-line"){nextSubscript=___default.default.max([___default.default.max(this.state.usedVarSubscripts),-1])+1;newElement.options.startSubscript=nextSubscript;newElement.options.endSubscript=nextSubscript+1;}else if(elementType==="function"){const nextLetter=String.fromCharCode(___default.default.max([___default.default.max(___default.default.map(this.state.usedFunctionNames,function(c){return c.charCodeAt(0)})),"e".charCodeAt(0)])+1);newElement.options.funcName=nextLetter;}this.change({elements:this.props.elements.concat(newElement)});},this._deleteElement=index=>{const element=this.props.elements[index];this.change({elements:___default.default.without(this.props.elements,element)});},this._moveElementUp=index=>{const element=this.props.elements[index];const newElements=___default.default.without(this.props.elements,element);newElements.splice(index-1,0,element);this.change({elements:newElements});},this._moveElementDown=index=>{const element=this.props.elements[index];const newElements=___default.default.without(this.props.elements,element);newElements.splice(index+1,0,element);this.change({elements:newElements});},this.change=(...args)=>{return perseus.Changeable.change.apply(this,args)},this.serialize=()=>{return perseus.EditorJsonify.serialize.call(this)};}}InteractionEditor.widgetName="interaction";InteractionEditor.defaultProps=perseusCore.interactionLogic.defaultWidgetOptions;
 
-var isProduction = process.env.NODE_ENV === 'production';
-var prefix = 'Invariant failed';
-function invariant(condition, message) {
-    if (condition) {
-        return;
-    }
-    if (isProduction) {
-        throw new Error(prefix);
-    }
-    var provided = typeof message === 'function' ? message() : message;
-    var value = provided ? "".concat(prefix, ": ").concat(provided) : prefix;
-    throw new Error(value);
-}
-
 const UNLIMITED="unlimited";const parsePointCount=points=>{const parsed=parseInt(points,10);if(isNaN(parsed)){return UNLIMITED}return parsed===0?UNLIMITED:parsed};
 
 const GraphPointsCountSelector=({numPoints=1,onChange})=>{return jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:`${numPoints}`,onChange:newValue=>{onChange(parsePointCount(newValue));},placeholder:"",style:styles$K.singleSelectShort,children:[...[...Array(7).keys()].map(n=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${n}`,label:`${n} point${n>1?"s":""}`},n)),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:UNLIMITED,label:"unlimited"},"unlimited")]})};const styles$K=aphrodite.StyleSheet.create({singleSelectShort:{height:26}});
@@ -1649,28 +1637,28 @@ const LockedFigureSettingsActions=props=>{const{figureType,onMove,onRemove}=prop
 
 const{InfoTip: InfoTip$d}=perseus.components;function LockedLabelSettings(props){const{type,coord,color,size,text,expanded,onChangeProps,onMove,onRemove,onToggle,containerStyle}=props;return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$s.row,styles$s.accordionHeaderContainer],children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelLarge,{children:["Label (",coord[0],", ",coord[1],")"]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),text!==""&&jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{style:[{backgroundColor:wonderBlocksTokens.color.white,color:perseusCore.lockedFigureColors[color]},styles$s.accordionHeader],children:text})]}),containerStyle:containerStyle,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:coord,onChange:newCoords=>{onChangeProps({coord:newCoords});},style:styles$s.spaceUnder}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$s.row,children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$s.row,styles$s.spaceUnder,{flexGrow:1}],children:["text",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{value:text,placeholder:"ex. $x^2$ or $\\frac{1}{2}$",onChange:newValue=>onChangeProps({text:newValue})})]}),jsxRuntimeExports.jsxs(InfoTip$d,{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(wonderBlocksCore.View,{style:styles$s.row,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,onChange:newColor=>{onChangeProps({color:newColor});},style:styles$s.spaceUnder}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:styles$s.row,children:["size",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:size,onChange:newValue=>onChangeProps({size:newValue}),placeholder:"",children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"small",label:"small"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"medium",label:"medium"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"large",label:"large"})]})]})]}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:type,onMove:onMove,onRemove:onRemove})]})}const styles$s=aphrodite.StyleSheet.create({accordionHeaderContainer:{whiteSpace:"nowrap"},accordionHeader:{padding:wonderBlocksTokens.spacing.xxxSmall_4,marginInlineEnd:wonderBlocksTokens.spacing.xSmall_8,borderRadius:wonderBlocksTokens.spacing.xxxSmall_4,textOverflow:"ellipsis",overflow:"hidden"},row:{display:"flex",flexDirection:"row",alignItems:"center",minWidth:0},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8}});
 
-const DEFAULT_COLOR="grayH";function getDefaultFigureForType(type){switch(type){case "point":return {type:"point",coord:[0,0],color:DEFAULT_COLOR,filled:true};case "line":return {type:"line",kind:"line",points:[getDefaultFigureForType("point"),{...getDefaultFigureForType("point"),coord:[2,2]}],color:DEFAULT_COLOR,lineStyle:"solid",showPoint1:false,showPoint2:false};case "vector":return {type:"vector",points:[[0,0],[2,2]],color:DEFAULT_COLOR};case "ellipse":return {type:"ellipse",center:[0,0],radius:[1,1],angle:0,color:DEFAULT_COLOR,fillStyle:"none",strokeStyle:"solid"};case "polygon":return {type:"polygon",points:[[0,2],[-1,0],[1,0]],color:DEFAULT_COLOR,showVertices:false,fillStyle:"none",strokeStyle:"solid"};case "function":return {type:"function",color:DEFAULT_COLOR,strokeStyle:"solid",equation:"x^2",domain:[-Infinity,Infinity],directionalAxis:"x"};case "label":return {type:"label",coord:[0,0],text:"label",color:DEFAULT_COLOR,size:"medium"};default:throw new wonderStuffCore.UnreachableCaseError(type)}}function generateLockedFigureAppearanceDescription(color,strokeStyle="solid",fill){const convertedColor=color==="grayH"?"gray":color;switch(fill){case "none":return `. Appearance ${strokeStyle} ${convertedColor} border, with no fill.`;case "white":return `. Appearance ${strokeStyle} ${convertedColor} border, with a white fill.`;case "solid":case "translucent":return `. Appearance ${strokeStyle} ${convertedColor} border, with a ${fill} ${convertedColor} fill.`;case undefined:return `. Appearance ${strokeStyle} ${convertedColor}.`;default:throw new wonderStuffCore.UnreachableCaseError(fill)}}async function generateSpokenMathDetails(mathString){const engine=await mathjaxRenderer.SpeechRuleEngine.setup("en");let convertedSpeech="";const parsedContent=perseus.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||labels.length===0){return ""}const spokenLabelPromises=labels.map(label=>{return generateSpokenMathDetails(label.text)});const spokenLabels=await Promise.all(spokenLabelPromises);return ` ${spokenLabels.join(", ")}`}
+const DEFAULT_COLOR="grayH";function getDefaultFigureForType(type){switch(type){case "point":return {type:"point",coord:[0,0],color:DEFAULT_COLOR,filled:true,labels:[]};case "line":return {type:"line",kind:"line",points:[getDefaultFigureForType("point"),{...getDefaultFigureForType("point"),coord:[2,2]}],color:DEFAULT_COLOR,lineStyle:"solid",showPoint1:false,showPoint2:false,labels:[]};case "vector":return {type:"vector",points:[[0,0],[2,2]],color:DEFAULT_COLOR,labels:[]};case "ellipse":return {type:"ellipse",center:[0,0],radius:[1,1],angle:0,color:DEFAULT_COLOR,fillStyle:"none",strokeStyle:"solid",labels:[]};case "polygon":return {type:"polygon",points:[[0,2],[-1,0],[1,0]],color:DEFAULT_COLOR,showVertices:false,fillStyle:"none",strokeStyle:"solid",labels:[]};case "function":return {type:"function",color:DEFAULT_COLOR,strokeStyle:"solid",equation:"x^2",domain:[-Infinity,Infinity],directionalAxis:"x",labels:[]};case "label":return {type:"label",coord:[0,0],text:"label",color:DEFAULT_COLOR,size:"medium"};default:throw new wonderStuffCore.UnreachableCaseError(type)}}function generateLockedFigureAppearanceDescription(color,strokeStyle="solid",fill){const convertedColor=color==="grayH"?"gray":color;switch(fill){case "none":return `. Appearance ${strokeStyle} ${convertedColor} border, with no fill.`;case "white":return `. Appearance ${strokeStyle} ${convertedColor} border, with a white fill.`;case "solid":case "translucent":return `. Appearance ${strokeStyle} ${convertedColor} border, with a ${fill} ${convertedColor} fill.`;case undefined:return `. Appearance ${strokeStyle} ${convertedColor}.`;default:throw new wonderStuffCore.UnreachableCaseError(fill)}}async function generateSpokenMathDetails(mathString){const engine=await mathjaxRenderer.SpeechRuleEngine.setup("en");let convertedSpeech="";const parsedContent=perseus.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}=kmath.angles;const{InfoTip: InfoTip$c}=perseus.components;const LockedEllipseSettings=props=>{const{center,radius,angle,color,labels,ariaLabel,fillStyle,strokeStyle,expanded,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);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){if(!labels){return}const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){if(!labels){return}const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$r.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(EllipseSwatch,{color:props.color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$r.row,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:center,style:styles$r.spaceUnder,onChange:handleCenterChange}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.spaceUnder,children:jsxRuntimeExports.jsx(InfoTip$c,{children:"The coordinates for the center of the ellipse."})})]}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:radius,labels:["x radius","y radius"],style:styles$r.spaceUnder,onChange:newCoords=>onChangeProps({radius:newCoords})}),jsxRuntimeExports.jsx(AngleInput,{angle:angle,onChange:newAngle=>onChangeProps({angle:newAngle})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$r.row,styles$r.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$r.row,styles$r.truncatedWidth],children:["fill",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:fillStyle,onChange:value=>onChangeProps({fillStyle:value}),placeholder:"",children:Object.keys(perseusCore.lockedFigureFillStyles).map(option=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:option,label:option},option))})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:value=>onChangeProps({strokeStyle:value})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels?.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$r.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[center[0],center[1]-(labels?.length??0)],color:color};onChangeProps({labels:[...labels??[],newLabel]});},style:styles$r.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$r=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},truncatedWidth:{minWidth:0},addButton:{alignSelf:"start"},labelContainer:{backgroundColor:wonderBlocksTokens.color.white},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
+const{convertRadiansToDegrees}=kmath.angles;const{InfoTip: InfoTip$c}=perseus.components;const LockedEllipseSettings=props=>{const{center,radius,angle,color,labels,ariaLabel,fillStyle,strokeStyle,expanded,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);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(wonderBlocksCore.View,{style:styles$r.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Ellipse (${center[0]}, ${center[1]}), radius ${radius[0]}, ${radius[1]}`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(EllipseSwatch,{color:props.color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$r.row,children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:center,style:styles$r.spaceUnder,onChange:handleCenterChange}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.spaceUnder,children:jsxRuntimeExports.jsx(InfoTip$c,{children:"The coordinates for the center of the ellipse."})})]}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:radius,labels:["x radius","y radius"],style:styles$r.spaceUnder,onChange:newCoords=>onChangeProps({radius:newCoords})}),jsxRuntimeExports.jsx(AngleInput,{angle:angle,onChange:newAngle=>onChangeProps({angle:newAngle})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$r.row,styles$r.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$r.row,styles$r.truncatedWidth],children:["fill",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:fillStyle,onChange:value=>onChangeProps({fillStyle:value}),placeholder:"",children:Object.keys(perseusCore.lockedFigureFillStyles).map(option=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:option,label:option},option))})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:value=>onChangeProps({strokeStyle:value})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$r.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$r.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[center[0],center[1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},style:styles$r.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$r=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},truncatedWidth:{minWidth:0},addButton:{alignSelf:"start"},labelContainer:{backgroundColor:wonderBlocksTokens.color.white},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
 
 const LineSwatch=props=>{const{color,lineStyle}=props;return jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$q.container,children:jsxRuntimeExports.jsx(wonderBlocksCore.View,{"aria-label":`${color}, ${lineStyle}`,style:[styles$q.lineSwatch,{border:`5px ${lineStyle} ${perseusCore.lockedFigureColors[color]}`}]})})};const styles$q=aphrodite.StyleSheet.create({container:{backgroundColor:wonderBlocksTokens.color.white,justifyContent:"center",padding:wonderBlocksTokens.spacing.xSmall_8,borderRadius:wonderBlocksTokens.spacing.xxxSmall_4},lineSwatch:{width:40}});
 
 const examples={linear:["x + 5","1/2x - 2"],polynomial:["1/2x^2 + 3x - 4","(1/3)x^3 - 2x^2 + 3x - 4"],trigonometric:["sin(x) * 3","arctan(2x) + 4"]};
 
-const LockedFunctionSettings=props=>{const{color:lineColor,strokeStyle,equation,directionalAxis,domain,ariaLabel,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]=React.useState(getDomainStringValues(domain));const[exampleCategory,setExampleCategory]=React.useState("");React.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);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 exampleCategories=Object.keys(examples);const exampleCategorySelected=exampleCategory!=="";const exampleContent=exampleCategorySelected?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(wonderBlocksCore.View,{style:styles$p.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{style:styles$p.accordionHeader,children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:newValue=>{handlePropChange("strokeStyle",newValue);}})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.rowSpace],children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:directionalAxis,onChange:newValue=>{handlePropChange("directionalAxis",newValue);},"aria-label":"equation prefix",style:[styles$p.dropdownLabel,styles$p.axisMenu],placeholder:"",children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"x",label:"y ="}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"y",label:"x ="})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"text","aria-label":"equation",value:equation,onChange:newValue=>{handlePropChange("equation",newValue);},style:[styles$p.textField]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.rowSpace],children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$p.dropdownLabel,styles$p.domainMin],children:["domain min",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"number",style:styles$p.domainMinField,value:domainEntries[0],onChange:newValue=>{handleDomainChange(0,newValue);}})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label","aria-label":"domain max",style:[styles$p.dropdownLabel,styles$p.domainMax],children:["max",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"number",style:styles$p.domainMaxField,value:domainEntries[1],onChange:newValue=>{handleDomainChange(1,newValue);}})]})]}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:"Example Functions"}),expanded:false,containerStyle:styles$p.exampleWorkspace,panelStyle:styles$p.exampleAccordionPanel,children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:styles$p.dropdownLabel,children:["Choose a category",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:exampleCategory,onChange:setExampleCategory,placeholder:"examples",children:exampleCategories.map(category=>{return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:category,label:category},category)})})]}),exampleCategorySelected&&jsxRuntimeExports.jsx("ul",{className:aphrodite.css(styles$p.exampleContainer),children:exampleContent.map((example,index)=>jsxRuntimeExports.jsx(ExampleItem,{category:exampleCategory,example:example,index:index,pasteEquationFn:handlePropChange},index))})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex,allLabels)=>jsxRuntimeExports.jsx(LockedLabelSettings,{...label,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$p.labelContainer},labelIndex)),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[0,-labels.length],color:lineColor};onChangeProps({labels:[...labels,newLabel]});},style:styles$p.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const ExampleItem=props=>{const{category,example,index,pasteEquationFn}=props;const exampleId=React.useId();return jsxRuntimeExports.jsxs("li",{className:aphrodite.css(styles$p.exampleRow),children:[jsxRuntimeExports.jsx(IconButton__default.default,{icon:autoPasteIcon__default.default,kind:"tertiary","aria-label":"paste example","aria-describedby":exampleId,onClick:()=>pasteEquationFn("equation",example),size:"medium",style:styles$p.copyPasteButton}),jsxRuntimeExports.jsx(IconButton__default.default,{icon:copyIcon__default.default,kind:"tertiary","aria-label":"copy example","aria-describedby":exampleId,onClick:()=>navigator.clipboard.writeText(example),size:"medium",style:styles$p.copyPasteButton}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.exampleContent,id:exampleId,children:example})]},`${category}-${index}`)};const styles$p=aphrodite.StyleSheet.create({accordionHeader:{textOverflow:"ellipsis",maxWidth:"calc(100% - 64px)",overflow:"hidden",whiteSpace:"nowrap"},axisMenu:{minWidth:"auto"},copyPasteButton:{flexShrink:"0",margin:"0 2px"},domainMin:{justifyContent:"space-between",width:"calc(((100% - 141px) / 2) + 88.7px)",textWrap:"nowrap"},domainMinField:{width:"calc(100% - 88.7px)"},domainMax:{width:"calc(((100% - 141px) / 2) + 36.2px)"},domainMaxField:{width:"calc(100% - 36.2px)"},dropdownLabel:{alignItems:"center",display:"flex"},exampleAccordionPanel:{alignItems:"start",paddingBottom:"12px",flexDirection:"row",flexWrap:"wrap"},exampleContainer:{background:"white",border:`1px solid ${wonderBlocksTokens.color.fadedOffBlack16}`,borderRadius:"4px",flexGrow:"1",listStyleType:"none",maxHeight:"88px",margin:"8px 0 0 0",overflowY:"scroll",padding:"4px 12px 4px 4px"},exampleContent:{fontFamily:`"Lato", sans-serif`,flexGrow:"1",color:wonderBlocksTokens.color.offBlack},exampleRow:{alignItems:"center",display:"flex",flexDirection:"row",minHeight:"44px"},exampleWorkspace:{background:wonderBlocksTokens.color.white50},rowSpace:{marginTop:wonderBlocksTokens.spacing.xSmall_8},row:{display:"flex",flexDirection:"row",alignItems:"center"},textField:{flexGrow:"1"},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
+const LockedFunctionSettings=props=>{const{color:lineColor,strokeStyle,equation,directionalAxis,domain,ariaLabel,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]=React.useState(getDomainStringValues(domain));const[exampleCategory,setExampleCategory]=React.useState("");React.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);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 exampleCategories=Object.keys(examples);const exampleCategorySelected=exampleCategory!=="";const exampleContent=exampleCategorySelected?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(wonderBlocksCore.View,{style:styles$p.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{style:styles$p.accordionHeader,children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:newValue=>{handlePropChange("strokeStyle",newValue);}})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.rowSpace],children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:directionalAxis,onChange:newValue=>{handlePropChange("directionalAxis",newValue);},"aria-label":"equation prefix",style:[styles$p.dropdownLabel,styles$p.axisMenu],placeholder:"",children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"x",label:"y ="}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"y",label:"x ="})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"text","aria-label":"equation",value:equation,onChange:newValue=>{handlePropChange("equation",newValue);},style:[styles$p.textField]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$p.row,styles$p.rowSpace],children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$p.dropdownLabel,styles$p.domainMin],children:["domain min",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"number",style:styles$p.domainMinField,value:domainEntries[0],onChange:newValue=>{handleDomainChange(0,newValue);}})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label","aria-label":"domain max",style:[styles$p.dropdownLabel,styles$p.domainMax],children:["max",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksForm.TextField,{type:"number",style:styles$p.domainMaxField,value:domainEntries[1],onChange:newValue=>{handleDomainChange(1,newValue);}})]})]}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:"Example Functions"}),expanded:false,containerStyle:styles$p.exampleWorkspace,panelStyle:styles$p.exampleAccordionPanel,children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:styles$p.dropdownLabel,children:["Choose a category",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:exampleCategory,onChange:setExampleCategory,placeholder:"examples",children:exampleCategories.map(category=>{return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:category,label:category},category)})})]}),exampleCategorySelected&&jsxRuntimeExports.jsx("ul",{className:aphrodite.css(styles$p.exampleContainer),children:exampleContent.map((example,index)=>jsxRuntimeExports.jsx(ExampleItem,{category:exampleCategory,example:example,index:index,pasteEquationFn:handlePropChange},index))})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>jsxRuntimeExports.jsx(LockedLabelSettings,{...label,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$p.labelContainer},labelIndex)),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[0,-labels.length],color:lineColor};onChangeProps({labels:[...labels,newLabel]});},style:styles$p.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const ExampleItem=props=>{const{category,example,index,pasteEquationFn}=props;const exampleId=React.useId();return jsxRuntimeExports.jsxs("li",{className:aphrodite.css(styles$p.exampleRow),children:[jsxRuntimeExports.jsx(IconButton__default.default,{icon:autoPasteIcon__default.default,kind:"tertiary","aria-label":"paste example","aria-describedby":exampleId,onClick:()=>pasteEquationFn("equation",example),size:"medium",style:styles$p.copyPasteButton}),jsxRuntimeExports.jsx(IconButton__default.default,{icon:copyIcon__default.default,kind:"tertiary","aria-label":"copy example","aria-describedby":exampleId,onClick:()=>navigator.clipboard.writeText(example),size:"medium",style:styles$p.copyPasteButton}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$p.exampleContent,id:exampleId,children:example})]},`${category}-${index}`)};const styles$p=aphrodite.StyleSheet.create({accordionHeader:{textOverflow:"ellipsis",maxWidth:"calc(100% - 64px)",overflow:"hidden",whiteSpace:"nowrap"},axisMenu:{minWidth:"auto"},copyPasteButton:{flexShrink:"0",margin:"0 2px"},domainMin:{justifyContent:"space-between",width:"calc(((100% - 141px) / 2) + 88.7px)",textWrap:"nowrap"},domainMinField:{width:"calc(100% - 88.7px)"},domainMax:{width:"calc(((100% - 141px) / 2) + 36.2px)"},domainMaxField:{width:"calc(100% - 36.2px)"},dropdownLabel:{alignItems:"center",display:"flex"},exampleAccordionPanel:{alignItems:"start",paddingBottom:"12px",flexDirection:"row",flexWrap:"wrap"},exampleContainer:{background:"white",border:`1px solid ${wonderBlocksTokens.color.fadedOffBlack16}`,borderRadius:"4px",flexGrow:"1",listStyleType:"none",maxHeight:"88px",margin:"8px 0 0 0",overflowY:"scroll",padding:"4px 12px 4px 4px"},exampleContent:{fontFamily:`"Lato", sans-serif`,flexGrow:"1",color:wonderBlocksTokens.color.offBlack},exampleRow:{alignItems:"center",display:"flex",flexDirection:"row",minHeight:"44px"},exampleWorkspace:{background:wonderBlocksTokens.color.white50},rowSpace:{marginTop:wonderBlocksTokens.spacing.xSmall_8},row:{display:"flex",flexDirection:"row",alignItems:"center"},textField:{flexGrow:"1"},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
 
 const LabeledSwitch=props=>{const{checked,label,style,onChange}=props;const switchId=React.useId();return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$o.row,style],children:[jsxRuntimeExports.jsx(Switch__default.default,{id:switchId,checked:checked,onChange:onChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{tag:"label",htmlFor:switchId,children:label})]})};const styles$o=aphrodite.StyleSheet.create({row:{flexDirection:"row",alignItems:"center"}});
 
-const LockedPointSettings=props=>{const{headerLabel,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);str+=pointAppearance;return str}function handleColorChange(newValue){const newProps={color:newValue};if(labels){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};if(labels){newProps.labels=labels.map(label=>({...label,coord:[label.coord[0]+xOffset,label.coord[1]+yOffset]}));}onChangeProps(newProps);}function handleLabelChange(updatedLabel,labelIndex){if(!labels){return}const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){if(!labels){return}const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,containerStyle:isDefiningPoint?styles$n.definingContainer:undefined,panelStyle:isDefiningPoint?styles$n.definingPanel:undefined,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$n.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`${headerLabel||"Point"} (${coord[0]}, ${coord[1]})`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(ColorSwatch,{color:pointColor,filled:filled})]}),children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:coord,style:styles$n.spaceUnder,onChange:handleCoordChange,error:!!error}),onTogglePoint&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"show point on graph",checked:!!showPoint,style:showPoint&&styles$n.spaceUnder,onChange:onTogglePoint}),(!isDefiningPoint||showPoint)&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:pointColor,onChange:handleColorChange,style:styles$n.spaceUnder}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"open point",checked:!filled,onChange:newValue=>{onChangeProps({filled:!newValue});}})]}),!isDefiningPoint&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$n.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$n.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels?.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,containerStyle:!isDefiningPoint&&styles$n.lockedPointLabelContainer,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);}})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[coord[0]+.5,coord[1]-1*(labels?.length??0)],color:pointColor};onChangeProps({labels:[...labels??[],newLabel]});},style:styles$n.addButton,children:"Add visible label"}),onRemove&&jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$n=aphrodite.StyleSheet.create({definingContainer:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:0,marginLeft:-wonderBlocksTokens.spacing.xxxSmall_4,marginRight:-wonderBlocksTokens.spacing.xxxSmall_4,backgroundColor:wonderBlocksTokens.color.white},definingPanel:{paddingBottom:wonderBlocksTokens.spacing.xxSmall_6},lockedPointLabelContainer:{backgroundColor:wonderBlocksTokens.color.white},row:{flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
+const LockedPointSettings=props=>{const{headerLabel,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);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?styles$n.definingContainer:undefined,panelStyle:isDefiningPoint?styles$n.definingPanel:undefined,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$n.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`${headerLabel||"Point"} (${coord[0]}, ${coord[1]})`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(ColorSwatch,{color:pointColor,filled:filled})]}),children:[jsxRuntimeExports.jsx(CoordinatePairInput,{coord:coord,style:styles$n.spaceUnder,onChange:handleCoordChange,error:!!error}),onTogglePoint&&jsxRuntimeExports.jsx(LabeledSwitch,{label:"show point on graph",checked:!!showPoint,style:showPoint&&styles$n.spaceUnder,onChange:onTogglePoint}),(!isDefiningPoint||showPoint)&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:pointColor,onChange:handleColorChange,style:styles$n.spaceUnder}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"open point",checked:!filled,onChange:newValue=>{onChangeProps({filled:!newValue});}})]}),!isDefiningPoint&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$n.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$n.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,containerStyle:!isDefiningPoint&&styles$n.lockedPointLabelContainer,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);}})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[coord[0]+.5,coord[1]-labels.length],color:pointColor};onChangeProps({labels:[...labels,newLabel]});},style:styles$n.addButton,children:"Add visible label"}),onRemove&&jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$n=aphrodite.StyleSheet.create({definingContainer:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:0,marginLeft:-wonderBlocksTokens.spacing.xxxSmall_4,marginRight:-wonderBlocksTokens.spacing.xxxSmall_4,backgroundColor:wonderBlocksTokens.color.white},definingPanel:{paddingBottom:wonderBlocksTokens.spacing.xxSmall_6},lockedPointLabelContainer:{backgroundColor:wonderBlocksTokens.color.white},row:{flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
 
 const lengthZeroStr="The line cannot have length 0.";const LockedLineSettings=props=>{const{kind,points,color:lineColor,lineStyle="solid",showPoint1,showPoint2,labels,ariaLabel,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=kmath.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=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} to point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;const lineAppearance=generateLockedFigureAppearanceDescription(lineColor,lineStyle);str+=lineAppearance;return str}function handleChangePoint(newPointProps,index){const newPoints=[...points];newPoints[index]={...points[index],...newPointProps};const oldMidpoint=mafs.vec.midpoint(points[0].coord,points[1].coord);const newMidpoint=mafs.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){if(!labels){return}const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){if(!labels){return}const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$m.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:lineStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$m.row,styles$m.spaceUnder],children:["kind",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:kind,onChange:value=>onChangeProps({kind:value}),placeholder:"",children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"line",label:"line"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"ray",label:"ray"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"segment",label:"segment"})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$m.row,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:lineStyle,onChange:value=>onChangeProps({lineStyle:value})})]}),isInvalid&&jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{style:styles$m.errorText,children:lengthZeroStr}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 1",expanded:true,showPoint:showPoint1,error:isInvalid?lengthZeroStr:null,...point1,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,onTogglePoint:newValue=>onChangeProps({showPoint2:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,1)}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$m.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$m.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels?.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$m.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=mafs.vec.add(mafs.vec.scale(offsetPerLabel,labels?.length??0),mafs.vec.midpoint(points[0].coord,points[1].coord));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels??[],newLabel]});},style:styles$m.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$m=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},errorText:{color:wonderBlocksTokens.color.red},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
+        ${point1.coord[1]}), (${point2.coord[0]}, ${point2.coord[1]})`;const isInvalid=kmath.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=`${capitalizeKind}${visiblelabel} from point${point1VisibleLabel} at ${spokenPoint1X} comma ${spokenPoint1Y} to point${point2VisibleLabel} at ${spokenPoint2X} comma ${spokenPoint2Y}`;const lineAppearance=generateLockedFigureAppearanceDescription(lineColor,lineStyle);str+=lineAppearance;return str}function handleChangePoint(newPointProps,index){const newPoints=[...points];newPoints[index]={...points[index],...newPointProps};const oldMidpoint=mafs.vec.midpoint(points[0].coord,points[1].coord);const newMidpoint=mafs.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(wonderBlocksCore.View,{style:styles$m.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:lineStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$m.row,styles$m.spaceUnder],children:["kind",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:kind,onChange:value=>onChangeProps({kind:value}),placeholder:"",children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"line",label:"line"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"ray",label:"ray"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"segment",label:"segment"})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$m.row,children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:lineStyle,onChange:value=>onChangeProps({lineStyle:value})})]}),isInvalid&&jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{style:styles$m.errorText,children:lengthZeroStr}),jsxRuntimeExports.jsx(LockedPointSettings,{headerLabel:"Point 1",expanded:true,showPoint:showPoint1,error:isInvalid?lengthZeroStr:null,...point1,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,onTogglePoint:newValue=>onChangeProps({showPoint2:newValue}),onChangeProps:newProps=>handleChangePoint(newProps,1)}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$m.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$m.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$m.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=mafs.vec.add(mafs.vec.scale(offsetPerLabel,labels.length),mafs.vec.midpoint(points[0].coord,points[1].coord));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},style:styles$m.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$m=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},errorText:{color:wonderBlocksTokens.color.red},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
 
 const PolygonSwatch=props=>{const{color,fillStyle,strokeStyle}=props;return jsxRuntimeExports.jsx(wonderBlocksCore.View,{"aria-label":`${color}, stroke ${strokeStyle}, fill ${fillStyle}`,style:[styles$l.container,{border:`4px ${strokeStyle} ${perseusCore.lockedFigureColors[color]}`}],children:jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$l.innerSquare,{backgroundColor:perseusCore.lockedFigureColors[color],opacity:fillStyle==="white"?0:perseusCore.lockedFigureFillStyles[fillStyle]}]})})};const styles$l=aphrodite.StyleSheet.create({container:{outline:`2px solid ${wonderBlocksTokens.color.offWhite}`,width:wonderBlocksTokens.spacing.large_24,height:wonderBlocksTokens.spacing.large_24,backgroundColor:wonderBlocksTokens.color.white,alignItems:"center",justifyContent:"center"},innerSquare:{width:20,height:20}});
 
-const LockedPolygonSettings=props=>{const{points,color,showVertices,fillStyle,strokeStyle,labels,ariaLabel,expanded,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);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){if(!labels){return}const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){if(!labels){return}const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:expanded,onToggle:onToggle,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$k.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Polygon, ${points.length} sides`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(PolygonSwatch,{color:color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$k.row,styles$k.truncatedWidth],children:["fill",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:fillStyle,onChange:value=>onChangeProps({fillStyle:value}),placeholder:"",children:Object.keys(perseusCore.lockedFigureFillStyles).map(option=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:option,label:option},option))})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:value=>onChangeProps({strokeStyle:value})}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"show vertices",checked:showVertices,onChange:newValue=>onChangeProps({showVertices:newValue}),style:styles$k.spaceUnder}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:"Points"}),expanded:true,containerStyle:styles$k.pointAccordionContainer,panelStyle:styles$k.pointAccordionPanel,children:[points.map((point,index)=>{const pointLabel=String.fromCharCode(65+index);return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.spaceUnder],children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`${pointLabel}:`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:point,labels:["x","y"],onChange:newValue=>{const newPoints=[...points];newPoints[index]=newValue;props.onChangeProps({points:newPoints});}}),points.length>3&&jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":`Delete polygon point ${pointLabel}`,icon:minusCircle__default.default,kind:"tertiary",actionType:"destructive",onClick:()=>{const newPoints=[...points];newPoints.splice(index,1);props.onChangeProps({points:newPoints});},style:styles$k.icon})]},`locked-polygon-point-index-${index}`)}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.polygonActionsContainer],children:[jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{props.onChangeProps({points:[...points,[0,0]]});},children:"Add point"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Spring,{}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$k.movementButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon up",size:"small",icon:arrowFatUp__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("up")}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$k.row,children:[jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon left",size:"small",icon:arrowFatLeft__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("left")}),jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon down",size:"small",icon:arrowFatDown__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("down")}),jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon right",size:"small",icon:arrowFatRight__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("right")})]})]})]})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$k.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$k.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels?.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$k.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[points[0][0],points[0][1]-(labels?.length??0)],color:color};onChangeProps({labels:[...labels??[],newLabel]});},style:styles$k.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$k=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},pointAccordionContainer:{backgroundColor:wonderBlocksTokens.color.white},pointAccordionPanel:{alignItems:"start"},icon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},polygonActionsContainer:{width:"100%"},movementButtonsContainer:{display:"flex",flexDirection:"column",alignItems:"center",minWidth:"fit-content"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},truncatedWidth:{minWidth:0},addButton:{alignSelf:"start"},labelContainer:{backgroundColor:wonderBlocksTokens.color.white},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
+const LockedPolygonSettings=props=>{const{points,color,showVertices,fillStyle,strokeStyle,labels,ariaLabel,expanded,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);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(wonderBlocksCore.View,{style:styles$k.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Polygon, ${points.length} sides`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(PolygonSwatch,{color:color,fillStyle:fillStyle,strokeStyle:strokeStyle})]}),children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.spaceUnder],children:[jsxRuntimeExports.jsx(ColorSelect,{selectedValue:color,onChange:handleColorChange}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsxs(wonderBlocksTypography.LabelMedium,{tag:"label",style:[styles$k.row,styles$k.truncatedWidth],children:["fill",jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxSmall_6}),jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:fillStyle,onChange:value=>onChangeProps({fillStyle:value}),placeholder:"",children:Object.keys(perseusCore.lockedFigureFillStyles).map(option=>jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:option,label:option},option))})]})]}),jsxRuntimeExports.jsx(LineStrokeSelect,{selectedValue:strokeStyle,onChange:value=>onChangeProps({strokeStyle:value})}),jsxRuntimeExports.jsx(LabeledSwitch,{label:"show vertices",checked:showVertices,onChange:newValue=>onChangeProps({showVertices:newValue}),style:styles$k.spaceUnder}),jsxRuntimeExports.jsxs(PerseusEditorAccordion,{header:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:"Points"}),expanded:true,containerStyle:styles$k.pointAccordionContainer,panelStyle:styles$k.pointAccordionPanel,children:[points.map((point,index)=>{const pointLabel=String.fromCharCode(65+index);return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.spaceUnder],children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`${pointLabel}:`}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.medium_16}),jsxRuntimeExports.jsx(CoordinatePairInput,{coord:point,labels:["x","y"],onChange:newValue=>{const newPoints=[...points];newPoints[index]=newValue;props.onChangeProps({points:newPoints});}}),points.length>3&&jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":`Delete polygon point ${pointLabel}`,icon:minusCircle__default.default,kind:"tertiary",actionType:"destructive",onClick:()=>{const newPoints=[...points];newPoints.splice(index,1);props.onChangeProps({points:newPoints});},style:styles$k.icon})]},`locked-polygon-point-index-${index}`)}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:[styles$k.row,styles$k.polygonActionsContainer],children:[jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{props.onChangeProps({points:[...points,[0,0]]});},children:"Add point"}),jsxRuntimeExports.jsx(wonderBlocksLayout.Spring,{}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$k.movementButtonsContainer,children:[jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon up",size:"small",icon:arrowFatUp__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("up")}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$k.row,children:[jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon left",size:"small",icon:arrowFatLeft__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("left")}),jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon down",size:"small",icon:arrowFatDown__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("down")}),jsxRuntimeExports.jsx(IconButton__default.default,{"aria-label":"Move polygon right",size:"small",icon:arrowFatRight__default.default,kind:"tertiary",onClick:()=>handlePolygonMove("right")})]})]})]})]}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$k.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$k.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$k.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const newLabel={...getDefaultFigureForType("label"),coord:[points[0][0],points[0][1]-labels.length],color:color};onChangeProps({labels:[...labels,newLabel]});},style:styles$k.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$k=aphrodite.StyleSheet.create({row:{display:"flex",flexDirection:"row",alignItems:"center"},pointAccordionContainer:{backgroundColor:wonderBlocksTokens.color.white},pointAccordionPanel:{alignItems:"start"},icon:{marginInlineStart:wonderBlocksTokens.spacing.xxxSmall_4},polygonActionsContainer:{width:"100%"},movementButtonsContainer:{display:"flex",flexDirection:"column",alignItems:"center",minWidth:"fit-content"},spaceUnder:{marginBottom:wonderBlocksTokens.spacing.xSmall_8},truncatedWidth:{minWidth:0},addButton:{alignSelf:"start"},labelContainer:{backgroundColor:wonderBlocksTokens.color.white},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16}});
 
-const lengthErrorMessage="The vector cannot have length 0.";const LockedVectorSettings=props=>{const{points,color:lineColor,labels,ariaLabel,onChangeProps,onMove,onRemove}=props;const[tail,tip]=points;const lineLabel=`Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;const isInvalid=kmath.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);str+=vectorAppearance;return str}function handleChangePoint(newCoord,index){if(typeof newCoord!=="undefined"){const newPoints=[...points];newPoints[index]=[...newCoord];const oldMidpoint=mafs.vec.midpoint(tail,tip);const newMidpoint=mafs.vec.midpoint(newPoints[0],newPoints[1]);const offset=mafs.vec.sub(newMidpoint,oldMidpoint);const newLabels=labels?.map(label=>({...label,coord:mafs.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){if(!labels){return}const updatedLabels=[...labels];updatedLabels[labelIndex]={...labels[labelIndex],...updatedLabel};onChangeProps({labels:updatedLabels});}function handleLabelRemove(labelIndex){if(!labels){return}const updatedLabels=labels.filter((_,index)=>index!==labelIndex);onChangeProps({labels:updatedLabels});}return jsxRuntimeExports.jsxs(PerseusEditorAccordion,{expanded:props.expanded,onToggle:props.onToggle,header:jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$j.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:"solid"})]}),children:[jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$j.row,styles$j.spaceUnder],children:jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange})}),isInvalid&&jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{style:styles$j.errorText,children:lengthErrorMessage}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:styles$j.container,panelStyle:styles$j.accordionPanel,header:jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.row,children:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Tail (${tail[0]}, ${tail[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tail,error:isInvalid,onChange:newProps=>{handleChangePoint(newProps,0);}})}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:styles$j.container,panelStyle:styles$j.accordionPanel,header:jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.row,children:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Tip (${tip[0]}, ${tip[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tip,error:isInvalid,onChange:newProps=>{handleChangePoint(newProps,1);}})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels?.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$j.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=mafs.vec.add(mafs.vec.scale(offsetPerLabel,labels?.length??0),mafs.vec.midpoint(tail,tip));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels??[],newLabel]});},style:styles$j.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$j=aphrodite.StyleSheet.create({accordionPanel:{paddingBottom:wonderBlocksTokens.spacing.medium_16},container:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:0,marginLeft:-wonderBlocksTokens.spacing.xxxSmall_4,marginRight:-wonderBlocksTokens.spacing.xxxSmall_4,backgroundColor:wonderBlocksTokens.color.white},errorText:{color:wonderBlocksTokens.color.red,marginTop:wonderBlocksTokens.spacing.xSmall_8},row:{flexDirection:"row",alignItems:"center"},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
+const lengthErrorMessage="The vector cannot have length 0.";const LockedVectorSettings=props=>{const{points,color:lineColor,labels,ariaLabel,onChangeProps,onMove,onRemove}=props;const[tail,tip]=points;const lineLabel=`Vector (${tail[0]}, ${tail[1]}), (${tip[0]}, ${tip[1]})`;const isInvalid=kmath.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);str+=vectorAppearance;return str}function handleChangePoint(newCoord,index){if(typeof newCoord!=="undefined"){const newPoints=[...points];newPoints[index]=[...newCoord];const oldMidpoint=mafs.vec.midpoint(tail,tip);const newMidpoint=mafs.vec.midpoint(newPoints[0],newPoints[1]);const offset=mafs.vec.sub(newMidpoint,oldMidpoint);const newLabels=labels.map(label=>({...label,coord:mafs.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(wonderBlocksCore.View,{style:styles$j.row,children:[jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:lineLabel}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xSmall_8}),jsxRuntimeExports.jsx(LineSwatch,{color:lineColor,lineStyle:"solid"})]}),children:[jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:[styles$j.row,styles$j.spaceUnder],children:jsxRuntimeExports.jsx(ColorSelect,{selectedValue:lineColor,onChange:handleColorChange})}),isInvalid&&jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{style:styles$j.errorText,children:lengthErrorMessage}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:styles$j.container,panelStyle:styles$j.accordionPanel,header:jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.row,children:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Tail (${tail[0]}, ${tail[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tail,error:isInvalid,onChange:newProps=>{handleChangePoint(newProps,0);}})}),jsxRuntimeExports.jsx(PerseusEditorAccordion,{expanded:true,containerStyle:styles$j.container,panelStyle:styles$j.accordionPanel,header:jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.row,children:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelLarge,{children:`Tip (${tip[0]}, ${tip[1]})`})}),children:jsxRuntimeExports.jsx(CoordinatePairInput,{coord:tip,error:isInvalid,onChange:newProps=>{handleChangePoint(newProps,1);}})}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.horizontalRule}),jsxRuntimeExports.jsx(LockedFigureAria,{ariaLabel:ariaLabel,getPrepopulatedAriaLabel:getPrepopulatedAriaLabel,onChangeProps:newProps=>{onChangeProps(newProps);}}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.xxxSmall_4}),jsxRuntimeExports.jsx(wonderBlocksCore.View,{style:styles$j.horizontalRule}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(wonderBlocksTypography.LabelMedium,{children:"Visible labels"}),labels.map((label,labelIndex)=>React.createElement(LockedLabelSettings,{...label,key:labelIndex,expanded:true,onChangeProps:newLabel=>{handleLabelChange(newLabel,labelIndex);},onRemove:()=>{handleLabelRemove(labelIndex);},containerStyle:styles$j.labelContainer})),jsxRuntimeExports.jsx(Button__default.default,{kind:"tertiary",startIcon:plusCircle__default.default,onClick:()=>{const offsetPerLabel=[0,-1];const labelLocation=mafs.vec.add(mafs.vec.scale(offsetPerLabel,labels.length),mafs.vec.midpoint(tail,tip));const newLabel={...getDefaultFigureForType("label"),coord:labelLocation,color:lineColor};onChangeProps({labels:[...labels,newLabel]});},style:styles$j.addButton,children:"Add visible label"}),jsxRuntimeExports.jsx(LockedFigureSettingsActions,{figureType:props.type,onMove:onMove,onRemove:onRemove})]})};const styles$j=aphrodite.StyleSheet.create({accordionPanel:{paddingBottom:wonderBlocksTokens.spacing.medium_16},container:{marginTop:wonderBlocksTokens.spacing.xSmall_8,marginBottom:0,marginLeft:-wonderBlocksTokens.spacing.xxxSmall_4,marginRight:-wonderBlocksTokens.spacing.xxxSmall_4,backgroundColor:wonderBlocksTokens.color.white},errorText:{color:wonderBlocksTokens.color.red,marginTop:wonderBlocksTokens.spacing.xSmall_8},row:{flexDirection:"row",alignItems:"center"},addButton:{alignSelf:"start"},horizontalRule:{height:1,backgroundColor:wonderBlocksTokens.color.offBlack16},labelContainer:{backgroundColor:wonderBlocksTokens.color.white}});
 
 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 wonderStuffCore.UnreachableCaseError(props)}};
 
@@ -1694,7 +1682,7 @@ const StartCoordsSinusoid=props=>{const{startCoords,onChange}=props;return jsxRu
 
 const StartCoordsSettingsInner=props=>{const{type,range,step,allowReflexAngles,onChange}=props;switch(type){case "linear":case "ray":const linearCoords=perseus.getLineCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsLine,{startCoords:linearCoords,onChange:onChange});case "linear-system":case "segment":const multiLineCoords=type==="segment"?perseus.getSegmentCoords(props,range,step):perseus.getLinearSystemCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsMultiline,{type:type,startCoords:multiLineCoords,onChange:onChange});case "circle":const circleCoords=perseus.getCircleCoords(props);const radius=kmath.vector.length(kmath.vector.subtract(circleCoords.radiusPoint,circleCoords.center));return jsxRuntimeExports.jsx(StartCoordsCircle,{startCoords:{center:circleCoords.center,radius},onChange:onChange});case "sinusoid":const sinusoidCoords=perseus.getSinusoidCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsSinusoid,{startCoords:sinusoidCoords,onChange:onChange});case "quadratic":const quadraticCoords=perseus.getQuadraticCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsQuadratic,{startCoords:quadraticCoords,onChange:onChange});case "point":case "polygon":const pointCoords=type==="point"?perseus.getPointCoords(props,range,step):perseus.getPolygonCoords(props,range,step);return jsxRuntimeExports.jsx(StartCoordsPoint,{startCoords:pointCoords,onChange:onChange});case "angle":const angleCoords=perseus.getAngleCoords({graph:props,range,step});return jsxRuntimeExports.jsx(StartCoordsAngle,{startCoords:angleCoords,allowReflexAngles:allowReflexAngles,onChange:onChange});default:return null}};const StartCoordsSettings=props=>{const{range,step,onChange}=props;const[isOpen,setIsOpen]=React__namespace.useState(true);return jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(Heading,{isCollapsible:true,title:"Start coordinates",isOpen:isOpen,onToggle:()=>setIsOpen(!isOpen)}),isOpen&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(StartCoordsSettingsInner,{...props}),jsxRuntimeExports.jsx(wonderBlocksLayout.Strut,{size:wonderBlocksTokens.spacing.small_12}),jsxRuntimeExports.jsx(Button__default.default,{startIcon:arrowCounterClockwise__default.default,kind:"tertiary",size:"small",onClick:()=>{onChange(getDefaultGraphStartCoords(props,range,step));},children:"Use default start coordinates"})]})]})};
 
-const{InfoTip: InfoTip$b}=perseus.components;const InteractiveGraph=perseus.InteractiveGraphWidget.widget;const POLYGON_SIDES=___default.default.map(___default.default.range(3,13),function(value){return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${value}`,label:`${value} sides`},`polygon-sides-${value}`)});class InteractiveGraphEditor extends React__namespace.Component{serialize(){const json=___default.default.pick(this.props,"step","backgroundImage","markings","labels","labelLocation","showProtractor","showTooltips","range","gridStep","snapStep","lockedFigures","fullGraphAriaLabel","fullGraphAriaDescription");const graph=this.refs.graph;if(graph){const correct=graph&&graph.getUserInput();___default.default.extend(json,{graph:{type:correct.type,startCoords:this.props.graph&&getStartCoords(this.props.graph)},correct:correct});___default.default.each(["allowReflexAngles","angleOffsetDeg","numPoints","numSides","numSegments","showAngles","showSides","snapTo","snapDegrees"],function(key){if(___default.default.has(correct,key)){json.graph[key]=correct[key];}});}return json}render(){let graph;let equationString;const gridStep=this.props.gridStep||perseus.Util.getGridStep(this.props.range,this.props.step,perseus.interactiveSizes.defaultBoxSize);const snapStep=this.props.snapStep||perseus.Util.snapStepFromGridStep(gridStep);const sizeClass=perseus.containerSizeClass.SMALL;if(this.props.valid===true){const correct=this.props.correct;const graphProps={ref:"graph",box:this.props.box,range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,graph:correct,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,lockedFigures:this.props.lockedFigures,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,trackInteraction:function(){},onChange:({graph:newGraph})=>{let correct=this.props.correct;invariant(newGraph!=null);if(correct.type===newGraph.type){correct=mergeGraphs(correct,newGraph);}else {correct=newGraph;}this.props.onChange({correct:correct,graph:this.props.graph});}};graph=jsxRuntimeExports.jsx(InteractiveGraph,{...graphProps,containerSizeClass:sizeClass,apiOptions:{...this.props.apiOptions,isMobile:false}});equationString=InteractiveGraph.getEquationString(graphProps);}else {graph=jsxRuntimeExports.jsx("div",{className:"perseus-error",children:this.props.valid});}return jsxRuntimeExports.jsx(wonderBlocksCore.Id,{children:graphId=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Answer type:",children:jsxRuntimeExports.jsx(GraphTypeSelector,{graphType:this.props.graph?.type??InteractiveGraph.defaultProps.graph.type,onChange:type=>{this.props.onChange({graph:{type},correct:{type}});}})}),jsxRuntimeExports.jsx(InteractiveGraphDescription,{ariaLabelValue:this.props.fullGraphAriaLabel??"",ariaDescriptionValue:this.props.fullGraphAriaDescription??"",onChange:this.props.onChange}),jsxRuntimeExports.jsx(InteractiveGraphCorrectAnswer,{id:graphId,equationString:equationString,children:graph}),this.props.correct?.type==="point"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of Points:",children:jsxRuntimeExports.jsx(GraphPointsCountSelector,{numPoints:this.props.correct?.numPoints,onChange:points=>{this.props.onChange({correct:{type:"point",numPoints:points},graph:{type:"point",numPoints:points}});}})}),this.props.correct?.type==="angle"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:newValue=>{if(this.props.graph?.type==="angle"){invariant(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:newValue},graph:{...this.props.graph,showAngles:newValue}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Allow reflex angles"}),checked:!!this.props.correct?.allowReflexAngles,onChange:newValue=>{invariant(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);invariant(this.props.graph?.type==="angle",`Expected graph type to be angle, but got ${this.props.graph?.type}`);const update={allowReflexAngles:newValue};this.props.onChange({correct:{...this.props.correct,...update},graph:{...this.props.graph,...update}});}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Allow students to be able to create reflex angles."})})]})]}),this.props.correct?.type==="polygon"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Number of sides:",children:jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.numSides?`${this.props.correct.numSides}`:"3",placeholder:"",onChange:newValue=>{invariant(this.props.graph?.type==="polygon");const updates={numSides:parsePointCount(newValue),coords:null,startCoords:undefined,snapTo:"grid"};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[...POLYGON_SIDES,jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"unlimited",label:"unlimited sides"},"unlimited")]},"polygon-select")}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Snap to:",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.snapTo||"grid",placeholder:"",onChange:newValue=>{invariant(this.props.correct.type==="polygon",`Expected correct answer type to be polygon, but got ${this.props.correct.type}`);invariant(this.props.graph?.type==="polygon",`Expected graph type to be polygon, but got ${this.props.graph?.type}`);const updates={snapTo:newValue,coords:null};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"grid",label:"grid"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angles",label:"interior angles"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sides",label:"side measures"})]}),jsxRuntimeExports.jsxs(InfoTip$b,{children:[jsxRuntimeExports.jsx("p",{children:"These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."}),jsxRuntimeExports.jsx("p",{children:"The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:()=>{if(this.props.graph?.type==="polygon"){invariant(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:!this.props.correct.showAngles},graph:{...this.props.graph,showAngles:!this.props.graph.showAngles}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show side measures"}),checked:!!this.props.correct?.showSides,onChange:()=>{if(this.props.graph?.type==="polygon"&&this.props.correct.type==="polygon"){this.props.onChange({correct:{...this.props.correct,showSides:!this.props.correct.showSides},graph:{...this.props.graph,showSides:!this.props.graph.showSides}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the side lengths."})})]})]}),this.props.correct?.type==="segment"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of segments:",children:jsxRuntimeExports.jsx(SegmentCountSelector,{numSegments:this.props.correct?.numSegments,onChange:sides=>{this.props.onChange({correct:{type:"segment",numSegments:sides,coords:null},graph:{type:"segment",numSegments:sides}});}})}),this.props.graph?.type&&shouldShowStartCoordsUI(this.props.graph,this.props.static)&&jsxRuntimeExports.jsx(StartCoordsSettings,{...this.props.graph,range:this.props.range,step:this.props.step,onChange:this.changeStartCoords}),jsxRuntimeExports.jsx(InteractiveGraphSRTree,{graphId:graphId,correct:this.props.correct,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,lockedFigures:this.props.lockedFigures}),jsxRuntimeExports.jsx(InteractiveGraphSettings,{box:perseus.getInteractiveBoxFromSizeClass(sizeClass),range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,valid:this.props.valid,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,onChange:this.props.onChange}),this.props.correct.type==="polygon"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);const correct={...this.props.correct,match:newValue};this.props.onChange({correct});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"approx",label:"be approximately congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"similar",label:"be similar"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsxs("ul",{children:[jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Match Exactly:"})," Match exactly in size, orientation, and location on the grid even if it is not shown in the background."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Congruent:"})," Be congruent in size and shape, but can be located anywhere on the grid."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Approximately Congruent:"})," ","Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid."," ",jsxRuntimeExports.jsx("em",{children:"Use this with snapping to angle measure."})]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Similar:"})," Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."]})})]})})]}),this.props.correct.type==="angle"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{this.props.onChange({correct:{...this.props.correct,match:newValue}});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"})]}),jsxRuntimeExports.jsx(InfoTip$b,{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."})})]}),jsxRuntimeExports.jsx(LockedFiguresSection,{figures:this.props.lockedFigures,onChange:this.props.onChange})]})})}constructor(...args){super(...args),this.displayName="InteractiveGraphEditor",this.className="perseus-widget-interactive-graph",this.changeStartCoords=coords=>{if(!this.props.graph?.type){return}const graph={...this.props.graph,startCoords:coords};this.props.onChange({graph:graph});},this.getSaveWarnings=()=>{const issues=[];for(const figure of this.props.lockedFigures??[]){if(figure.type==="line"&&kmath.vector.equal(figure.points[0].coord,figure.points[1].coord)){issues.push("The line cannot have length 0.");}}if(this.props.graph?.type==="polygon"&&this.props.graph.numSides==="unlimited"&&this.props.graph.coords===null){issues.push("Polygon must be closed.");}return issues};}}InteractiveGraphEditor.widgetName="interactive-graph";InteractiveGraphEditor.defaultProps={...perseusCore.interactiveGraphLogic.defaultWidgetOptions,valid:true};function mergeGraphs(a,b){if(a.type!==b.type){throw new Error(`Cannot merge graphs with different types (${a.type} and ${b.type})`)}switch(a.type){case "angle":invariant(b.type==="angle");return {...a,...b};case "circle":invariant(b.type==="circle");return {...a,...b};case "linear":invariant(b.type==="linear");return {...a,...b};case "linear-system":invariant(b.type==="linear-system");return {...a,...b};case "none":invariant(b.type==="none");return {...a,...b};case "point":invariant(b.type==="point");return {...a,...b};case "polygon":invariant(b.type==="polygon");return {...a,...b};case "quadratic":invariant(b.type==="quadratic");return {...a,...b};case "ray":invariant(b.type==="ray");return {...a,...b};case "segment":invariant(b.type==="segment");return {...a,...b};case "sinusoid":invariant(b.type==="sinusoid");return {...a,...b};default:throw new wonderStuffCore.UnreachableCaseError(a)}}const styles$a=aphrodite.StyleSheet.create({singleSelectShort:{height:26},row:{flexDirection:"row",marginTop:wonderBlocksTokens.spacing.xSmall_8,alignItems:"center"}});
+const{InfoTip: InfoTip$b}=perseus.components;const InteractiveGraph=perseus.InteractiveGraphWidget.widget;const POLYGON_SIDES=___default.default.map(___default.default.range(3,13),function(value){return jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:`${value}`,label:`${value} sides`},`polygon-sides-${value}`)});class InteractiveGraphEditor extends React__namespace.Component{serialize(){const json=___default.default.pick(this.props,"step","backgroundImage","markings","labels","labelLocation","showProtractor","showTooltips","range","gridStep","snapStep","lockedFigures","fullGraphAriaLabel","fullGraphAriaDescription");const graph=this.refs.graph;if(graph){const correct=graph&&graph.getUserInput();___default.default.extend(json,{graph:{type:correct.type,startCoords:this.props.graph&&getStartCoords(this.props.graph)},correct:correct});___default.default.each(["allowReflexAngles","angleOffsetDeg","numPoints","numSides","numSegments","showAngles","showSides","snapTo","snapDegrees"],function(key){if(___default.default.has(correct,key)){json.graph[key]=correct[key];}});}return json}render(){let graph;let equationString;const gridStep=this.props.gridStep||perseus.Util.getGridStep(this.props.range,this.props.step,perseus.interactiveSizes.defaultBoxSize);const snapStep=this.props.snapStep||perseus.Util.snapStepFromGridStep(gridStep);const sizeClass=perseus.containerSizeClass.SMALL;if(this.props.valid===true){const correct=this.props.correct;const graphProps={ref:"graph",box:this.props.box,range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,graph:correct,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,lockedFigures:this.props.lockedFigures,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,trackInteraction:function(){},onChange:({graph:newGraph})=>{let correct=this.props.correct;invariant__default.default(newGraph!=null);if(correct.type===newGraph.type){correct=mergeGraphs(correct,newGraph);}else {correct=newGraph;}this.props.onChange({correct:correct,graph:this.props.graph});}};graph=jsxRuntimeExports.jsx(InteractiveGraph,{...graphProps,containerSizeClass:sizeClass,apiOptions:{...this.props.apiOptions,isMobile:false}});equationString=InteractiveGraph.getEquationString(graphProps);}else {graph=jsxRuntimeExports.jsx("div",{className:"perseus-error",children:this.props.valid});}return jsxRuntimeExports.jsx(wonderBlocksCore.Id,{children:graphId=>jsxRuntimeExports.jsxs(wonderBlocksCore.View,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Answer type:",children:jsxRuntimeExports.jsx(GraphTypeSelector,{graphType:this.props.graph?.type??InteractiveGraph.defaultProps.graph.type,onChange:type=>{this.props.onChange({graph:{type},correct:{type}});}})}),jsxRuntimeExports.jsx(InteractiveGraphDescription,{ariaLabelValue:this.props.fullGraphAriaLabel??"",ariaDescriptionValue:this.props.fullGraphAriaDescription??"",onChange:this.props.onChange}),jsxRuntimeExports.jsx(InteractiveGraphCorrectAnswer,{id:graphId,equationString:equationString,children:graph}),this.props.correct?.type==="point"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of Points:",children:jsxRuntimeExports.jsx(GraphPointsCountSelector,{numPoints:this.props.correct?.numPoints,onChange:points=>{this.props.onChange({correct:{type:"point",numPoints:points},graph:{type:"point",numPoints:points}});}})}),this.props.correct?.type==="angle"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:newValue=>{if(this.props.graph?.type==="angle"){invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:newValue},graph:{...this.props.graph,showAngles:newValue}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Allow reflex angles"}),checked:!!this.props.correct?.allowReflexAngles,onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="angle",`Expected graph type to be angle, but got ${this.props.graph?.type}`);const update={allowReflexAngles:newValue};this.props.onChange({correct:{...this.props.correct,...update},graph:{...this.props.graph,...update}});}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Allow students to be able to create reflex angles."})})]})]}),this.props.correct?.type==="polygon"&&jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment,{children:[jsxRuntimeExports.jsx(LabeledRow,{label:"Number of sides:",children:jsxRuntimeExports.jsx(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.numSides?`${this.props.correct.numSides}`:"3",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.graph?.type==="polygon");const updates={numSides:parsePointCount(newValue),coords:undefined,startCoords:undefined,snapTo:"grid"};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[...POLYGON_SIDES,jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"unlimited",label:"unlimited sides"},"unlimited")]},"polygon-select")}),jsxRuntimeExports.jsxs(LabeledRow,{label:"Snap to:",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct?.snapTo||"grid",placeholder:"",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected correct answer type to be polygon, but got ${this.props.correct.type}`);invariant__default.default(this.props.graph?.type==="polygon",`Expected graph type to be polygon, but got ${this.props.graph?.type}`);const updates={snapTo:newValue,coords:null};this.props.onChange({correct:{...this.props.correct,...updates},graph:{...this.props.graph,...updates}});},style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"grid",label:"grid"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"angles",label:"interior angles"}),this.props.correct?.numSides!=="unlimited"&&jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"sides",label:"side measures"})]}),jsxRuntimeExports.jsxs(InfoTip$b,{children:[jsxRuntimeExports.jsx("p",{children:"These options affect the movement of the vertex points. The grid option will guide the points to the nearest half step along the grid."}),jsxRuntimeExports.jsx("p",{children:"The interior angle and side measure options guide the points to the nearest whole angle or side measure respectively."})]})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show angle measures"}),checked:!!this.props.correct?.showAngles,onChange:()=>{if(this.props.graph?.type==="polygon"){invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,showAngles:!this.props.correct.showAngles},graph:{...this.props.graph,showAngles:!this.props.graph.showAngles}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the interior angle measures."})})]}),jsxRuntimeExports.jsxs(wonderBlocksCore.View,{style:styles$a.row,children:[jsxRuntimeExports.jsx(wonderBlocksForm.Checkbox,{label:jsxRuntimeExports.jsx(wonderBlocksTypography.LabelSmall,{children:"Show side measures"}),checked:!!this.props.correct?.showSides,onChange:()=>{if(this.props.graph?.type==="polygon"&&this.props.correct.type==="polygon"){this.props.onChange({correct:{...this.props.correct,showSides:!this.props.correct.showSides},graph:{...this.props.graph,showSides:!this.props.graph.showSides}});}}}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsx("p",{children:"Displays the side lengths."})})]})]}),this.props.correct?.type==="segment"&&jsxRuntimeExports.jsx(LabeledRow,{label:"Number of segments:",children:jsxRuntimeExports.jsx(SegmentCountSelector,{numSegments:this.props.correct?.numSegments,onChange:sides=>{this.props.onChange({correct:{type:"segment",numSegments:sides,coords:null},graph:{type:"segment",numSegments:sides}});}})}),this.props.graph?.type&&shouldShowStartCoordsUI(this.props.graph,this.props.static)&&jsxRuntimeExports.jsx(StartCoordsSettings,{...this.props.graph,range:this.props.range,step:this.props.step,onChange:this.changeStartCoords}),jsxRuntimeExports.jsx(InteractiveGraphSRTree,{graphId:graphId,correct:this.props.correct,fullGraphAriaLabel:this.props.fullGraphAriaLabel,fullGraphAriaDescription:this.props.fullGraphAriaDescription,lockedFigures:this.props.lockedFigures}),jsxRuntimeExports.jsx(InteractiveGraphSettings,{box:perseus.getInteractiveBoxFromSizeClass(sizeClass),range:this.props.range,labels:this.props.labels,labelLocation:this.props.labelLocation,step:this.props.step,gridStep:gridStep,snapStep:snapStep,valid:this.props.valid,backgroundImage:this.props.backgroundImage,markings:this.props.markings,showProtractor:this.props.showProtractor,showTooltips:this.props.showTooltips,onChange:this.props.onChange}),this.props.correct.type==="polygon"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="polygon",`Expected graph type to be polygon, but got ${this.props.correct.type}`);const correct={...this.props.correct,match:newValue};this.props.onChange({correct});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"approx",label:"be approximately congruent"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"similar",label:"be similar"})]}),jsxRuntimeExports.jsx(InfoTip$b,{children:jsxRuntimeExports.jsxs("ul",{children:[jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Match Exactly:"})," Match exactly in size, orientation, and location on the grid even if it is not shown in the background."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Congruent:"})," Be congruent in size and shape, but can be located anywhere on the grid."]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Approximately Congruent:"})," ","Be exactly similar, and congruent in size and shape to within 0.1 units, but can be located anywhere on the grid."," ",jsxRuntimeExports.jsx("em",{children:"Use this with snapping to angle measure."})]})}),jsxRuntimeExports.jsx("li",{children:jsxRuntimeExports.jsxs("p",{children:[jsxRuntimeExports.jsx("b",{children:"Be Similar:"})," Be similar with matching interior angles, and side measures that are matching or a multiple of the correct side measures. The figure can be located anywhere on the grid."]})})]})})]}),this.props.correct.type==="angle"&&jsxRuntimeExports.jsxs(LabeledRow,{label:"Student answer must",children:[jsxRuntimeExports.jsxs(wonderBlocksDropdown.SingleSelect,{selectedValue:this.props.correct.match||"exact",onChange:newValue=>{invariant__default.default(this.props.correct.type==="angle",`Expected graph type to be angle, but got ${this.props.correct.type}`);this.props.onChange({correct:{...this.props.correct,match:newValue}});},placeholder:"",style:styles$a.singleSelectShort,children:[jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"exact",label:"match exactly"}),jsxRuntimeExports.jsx(wonderBlocksDropdown.OptionItem,{value:"congruent",label:"be congruent"})]}),jsxRuntimeExports.jsx(InfoTip$b,{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."})})]}),jsxRuntimeExports.jsx(LockedFiguresSection,{figures:this.props.lockedFigures,onChange:this.props.onChange})]})})}constructor(...args){super(...args),this.displayName="InteractiveGraphEditor",this.className="perseus-widget-interactive-graph",this.changeStartCoords=coords=>{if(!this.props.graph?.type){return}const graph={...this.props.graph,startCoords:coords};this.props.onChange({graph:graph});},this.getSaveWarnings=()=>{const issues=[];for(const figure of this.props.lockedFigures??[]){if(figure.type==="line"&&kmath.vector.equal(figure.points[0].coord,figure.points[1].coord)){issues.push("The line cannot have length 0.");}}if(this.props.graph?.type==="polygon"&&this.props.graph.numSides==="unlimited"&&this.props.graph.coords===null){issues.push("Polygon must be closed.");}return issues};}}InteractiveGraphEditor.widgetName="interactive-graph";InteractiveGraphEditor.defaultProps={...perseusCore.interactiveGraphLogic.defaultWidgetOptions,valid:true,lockedFigures:[]};function mergeGraphs(a,b){if(a.type!==b.type){throw new Error(`Cannot merge graphs with different types (${a.type} and ${b.type})`)}switch(a.type){case "angle":invariant__default.default(b.type==="angle");return {...a,...b};case "circle":invariant__default.default(b.type==="circle");return {...a,...b};case "linear":invariant__default.default(b.type==="linear");return {...a,...b};case "linear-system":invariant__default.default(b.type==="linear-system");return {...a,...b};case "none":invariant__default.default(b.type==="none");return {...a,...b};case "point":invariant__default.default(b.type==="point");return {...a,...b};case "polygon":invariant__default.default(b.type==="polygon");return {...a,...b};case "quadratic":invariant__default.default(b.type==="quadratic");return {...a,...b};case "ray":invariant__default.default(b.type==="ray");return {...a,...b};case "segment":invariant__default.default(b.type==="segment");return {...a,...b};case "sinusoid":invariant__default.default(b.type==="sinusoid");return {...a,...b};default:throw new wonderStuffCore.UnreachableCaseError(a)}}const styles$a=aphrodite.StyleSheet.create({singleSelectShort:{height:26},row:{flexDirection:"row",marginTop:wonderBlocksTokens.spacing.xSmall_8,alignItems:"center"}});
 
 const gray98="#FAFAFA";const gray95="#F0F1F2";const gray85="#D6D8DA";const gray76="#BABEC2";const gray68="#888D93";const gray41="#626569";const gray17="#21242C";