@khanacademy/perseus-editor 14.10.3 → 14.11.0

package/dist/es/index.js

@@ -46,7 +46,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.10.3";
+const libVersion = "14.11.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -23628,7 +23628,7 @@ class StructuredItemDiff extends React.Component {
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$n,
+  InfoTip: InfoTip$o,
   InlineIcon: InlineIcon$7
 } = components;
 /* Renders a hint editor box
@@ -23694,7 +23694,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: this.props.isFirst ? "hidden" : "",
       onClick: _.partial(this.props.onMove, -1)
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$n, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconCircleArrowUp)), " ", this.props.isLast && /*#__PURE__*/React.createElement(InfoTip$o, null, /*#__PURE__*/React.createElement("p", null, "The last hint is automatically bolded."))), /*#__PURE__*/React.createElement("input", {
       type: "checkbox"
       // @ts-expect-error - TS2322 - Type 'boolean | null | undefined' is not assignable to type 'boolean | undefined'.
       ,
@@ -23940,7 +23940,7 @@ CombinedHintsEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$m
+  InfoTip: InfoTip$n
 } = components;
 class ItemExtrasEditor extends React.Component {
   constructor(...args) {
@@ -24085,7 +24085,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
     style: {
       flexDirection: "row"
     }
-  }, props.label, " ", /*#__PURE__*/React.createElement(InfoTip$m, null, props.infoTip)),
+  }, props.label, " ", /*#__PURE__*/React.createElement(InfoTip$n, null, props.infoTip)),
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
@@ -25776,7 +25776,7 @@ class BlurInput extends React.Component {
 }
 
 const {
-  InfoTip: InfoTip$l
+  InfoTip: InfoTip$m
 } = components;
 const DEFAULT_WIDTH = 400;
 const DEFAULT_HEIGHT = 400;
@@ -25940,7 +25940,7 @@ class CSProgramEditor extends React.Component {
           showEditor: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
+    }), /*#__PURE__*/React.createElement(InfoTip$m, null, "If you show the editor, you should use the \"full-width\" alignment to make room for the width of the editor."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Show Buttons",
       checked: this.props.showButtons,
       onChange: value => {
@@ -25952,7 +25952,7 @@ class CSProgramEditor extends React.Component {
       name: "settings",
       pairs: this.props.settings,
       onChange: this._handleSettingsChange
-    }), /*#__PURE__*/React.createElement(InfoTip$l, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
+    }), /*#__PURE__*/React.createElement(InfoTip$m, null, "Settings that you add here are available to the program as an object returned by ", /*#__PURE__*/React.createElement("code", null, "Program.settings()"))));
   }
 }
 CSProgramEditor.propTypes = _extends({}, Changeable.propTypes);
@@ -26038,7 +26038,7 @@ DeprecatedStandinEditor.widgetName = "deprecated-standin";
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
 const {
-  InfoTip: InfoTip$k,
+  InfoTip: InfoTip$l,
   InlineIcon: InlineIcon$5
 } = components;
 class DropdownEditor extends React.Component {
@@ -26103,14 +26103,14 @@ class DropdownEditor extends React.Component {
       className: "perseus-widget-dropdown"
     }, /*#__PURE__*/React.createElement("div", {
       className: "dropdown-info"
-    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
+    }, "Dropdown", /*#__PURE__*/React.createElement(InfoTip$l, null, /*#__PURE__*/React.createElement("p", null, "The drop down is useful for making inequalities in a custom format. We normally use the symbols ", "<", ",", " ", ">", ", \u2264, \u2265 (in that order) which you can copy into the choices. When possible, use the \"multiple choice\" answer type instead."))), /*#__PURE__*/React.createElement("div", {
       className: "dropdown-placeholder"
     }, /*#__PURE__*/React.createElement("input", {
       type: "text",
       placeholder: "Placeholder value",
       value: this.props.placeholder,
       onChange: this.onPlaceholderChange
-    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$l, null, /*#__PURE__*/React.createElement("p", null, "This value will appear as the drop down default. It should give the user some indication of the values available in the drop down itself, e.g., Yes/No/Maybe."))), /*#__PURE__*/React.createElement("div", {
       className: "clearfix"
     }), /*#__PURE__*/React.createElement("ul", {
       className: "dropdown-choices"
@@ -26438,7 +26438,7 @@ const styles$N = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$j
+  InfoTip: InfoTip$k
 } = components;
 
 // types for iterables
@@ -26684,13 +26684,13 @@ class ExpressionEditor extends React.Component {
       label: "Visible label",
       value: this.props.visibleLabel || "",
       onChange: this.change("visibleLabel")
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "Optional visible text; strongly encouraged to help learners using dictation software, but can be omitted if the surrounding content provides enough context."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(LabeledTextField, {
       label: "Aria label",
       value: this.props.ariaLabel || "",
       onChange: this.change("ariaLabel")
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "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", " ", /*#__PURE__*/React.createElement("a", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "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", " ", /*#__PURE__*/React.createElement("a", {
       href: "https://www.w3.org/WAI/tips/designing/#ensure-that-form-elements-include-clearly-associated-labels",
       target: "_blank"
     }, "this article.")))), /*#__PURE__*/React.createElement("div", {
@@ -26699,7 +26699,7 @@ class ExpressionEditor extends React.Component {
       label: "Function variables",
       value: this.state.functionsInternal,
       onChange: this.handleFunctions
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "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\"."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "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\"."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Use \xD7 instead of \u22C5 for multiplication",
@@ -26709,7 +26709,7 @@ class ExpressionEditor extends React.Component {
           times: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "For pre-algebra problems this option displays multiplication as \\times instead of \\cdot in both the rendered output and the acceptable formats examples."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY)
     }, /*#__PURE__*/React.createElement(HeadingXSmall, null, "Button Sets"), buttonSetChoices), /*#__PURE__*/React.createElement(HeadingSmall, null, "Answers"), /*#__PURE__*/React.createElement("p", {
       style: {
@@ -26801,7 +26801,7 @@ class AnswerOption extends React.Component {
           form: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "The student's answer must be in the same form. Commutativity and excess negative signs are ignored."))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.paddedY, styles$M.paddedX)
     }, /*#__PURE__*/React.createElement(Checkbox$1, {
       label: "Answer expression must be fully expanded and simplified.",
@@ -26811,7 +26811,7 @@ class AnswerOption extends React.Component {
           simplify: value
         });
       }
-    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "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.\""))), /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$k, null, /*#__PURE__*/React.createElement("p", null, "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.\""))), /*#__PURE__*/React.createElement("div", {
       className: css(styles$M.buttonRow, styles$M.paddedY)
     }, removeButton)));
   }
@@ -27050,7 +27050,7 @@ const setArrayItem = (list, i, value) => [...list.slice(0, i), value, ...list.sl
 
 const {
   ButtonGroup: ButtonGroup$7,
-  InfoTip: InfoTip$i,
+  InfoTip: InfoTip$j,
   RangeInput: RangeInput$6
 } = components;
 const defaultBackgroundImage$3 = {
@@ -27509,7 +27509,7 @@ const GraphSettings = createReactClass({
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
+    }), /*#__PURE__*/React.createElement(InfoTip$j, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background.")))), _.contains(this.props.editableSettings, "measure") && /*#__PURE__*/React.createElement("div", {
       className: "misc-settings"
     }, /*#__PURE__*/React.createElement("div", {
       className: "perseus-widget-row"
@@ -27555,7 +27555,7 @@ const GraphSettings = createReactClass({
 });
 
 const {
-  InfoTip: InfoTip$h,
+  InfoTip: InfoTip$i,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
 const Grapher = GrapherWidget.widget;
@@ -27634,7 +27634,7 @@ class GrapherEditor extends React.Component {
         className: "perseus-error"
       }, this.props.graph.valid);
     }
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$i, null, /*#__PURE__*/React.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
       box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.graph.range,
@@ -27884,7 +27884,7 @@ IframeEditor.defaultProps = {
 
 /* eslint-disable jsx-a11y/anchor-is-valid */
 const {
-  InfoTip: InfoTip$g,
+  InfoTip: InfoTip$h,
   InlineIcon: InlineIcon$3,
   RangeInput: RangeInput$5
 } = components;
@@ -28074,7 +28074,7 @@ class ImageEditor extends React.Component {
       style: {
         width: "100%"
       }
-    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$g, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
+    }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Dimensions:"), /*#__PURE__*/React.createElement("p", null, backgroundImage.width, "x", backgroundImage.height))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("div", null, "Alt text:", /*#__PURE__*/React.createElement(InfoTip$h, null, "This is important for screenreaders. The content of this alt text will be formatted as markdown (tables, emphasis, etc. are supported).")), /*#__PURE__*/React.createElement(Editor, {
       apiOptions: this.props.apiOptions,
       content: this.props.alt,
       onChange: props => {
@@ -28098,7 +28098,7 @@ class ImageEditor extends React.Component {
     }, this.state.backgroundImageError);
     return /*#__PURE__*/React.createElement("div", {
       className: "perseus-image-editor"
-    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$g, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
+    }, /*#__PURE__*/React.createElement("label", null, "Image url:", /*#__PURE__*/React.createElement(InfoTip$h, null, "Paste an image or graphie image URL."), this.state.backgroundImageError && backgroundImageErrorText, /*#__PURE__*/React.createElement(BlurInput, {
       value: backgroundImage.url || "",
       style: {
         width: 332
@@ -28120,7 +28120,7 @@ ImageEditor.defaultProps = {
 };
 
 const {
-  InfoTip: InfoTip$f
+  InfoTip: InfoTip$g
 } = components;
 const answerTypes = {
   number: {
@@ -28206,7 +28206,7 @@ class InputNumberEditor extends React.Component {
       value: "optional"
     }, "will be accepted"), /*#__PURE__*/React.createElement("option", {
       value: "enforced"
-    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "will be marked wrong"))), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Normally select \"will not be graded\". This will give the user a message saying the answer is correct but not simplified. The user will then have to simplify it and re-enter, but will not be penalized. (5th grade and anything after)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be accepted\" only if the user is not expected to know how to simplify fractions yet. (Anything prior to 5th grade)"), /*#__PURE__*/React.createElement("p", null, "Select \"will be marked wrong\" only if we are specifically assessing the ability to simplify."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.inexact,
       onChange: e => {
@@ -28242,7 +28242,7 @@ class InputNumberEditor extends React.Component {
         });
       },
       "aria-label": "Answer type"
-    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
+    }, answerTypeOptions), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Use the default \"Numbers\" unless the answer must be in a specific form (e.g., question is about converting decimals to fractions)."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, "Width", " ", /*#__PURE__*/React.createElement("select", {
       value: this.props.size,
       onChange: e => {
         // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
@@ -28254,7 +28254,7 @@ class InputNumberEditor extends React.Component {
       value: "normal"
     }, "Normal (80px)"), /*#__PURE__*/React.createElement("option", {
       value: "small"
-    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    }, "Small (40px)"))), /*#__PURE__*/React.createElement(InfoTip$g, null, /*#__PURE__*/React.createElement("p", null, "Use size \"Normal\" for all text boxes, unless there are multiple text boxes in one line and the answer area is too narrow to fit them."))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       checked: this.props.rightAlign,
       onChange: e => {
@@ -29764,7 +29764,7 @@ const styles$F = StyleSheet.create({
 
 const {
   ButtonGroup: ButtonGroup$2,
-  InfoTip: InfoTip$e,
+  InfoTip: InfoTip$f,
   RangeInput: RangeInput$4
 } = components;
 const defaultBackgroundImage$1 = {
@@ -30154,7 +30154,7 @@ class InteractiveGraphSettings extends React.Component {
       },
       onKeyPress: this.changeBackgroundUrl,
       onBlur: this.changeBackgroundUrl
-    }), /*#__PURE__*/React.createElement(InfoTip$e, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
+    }), /*#__PURE__*/React.createElement(InfoTip$f, null, /*#__PURE__*/React.createElement("p", null, "Create an image in graphie, or use the \"Add image\" function to create a background."))), /*#__PURE__*/React.createElement(View, {
       style: styles$E.protractorSection
     }, /*#__PURE__*/React.createElement(View, {
       style: styles$E.checkboxRow
@@ -30666,7 +30666,7 @@ const styles$v = StyleSheet.create({
 });
 
 const {
-  InfoTip: InfoTip$d
+  InfoTip: InfoTip$e
 } = components;
 function LockedFigureAria(props) {
   const {
@@ -30683,7 +30683,7 @@ function LockedFigureAria(props) {
   }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
     htmlFor: ariaLabelId
-  }, "Aria label"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(InfoTip$d, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Populating this field will make it so that users can use a screen reader to navigate to this point and hear the description.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "If you leave this field blank, the point will be hidden from screen readers. Users will not be able to navigate to this point using a screen reader.")), /*#__PURE__*/React.createElement(Strut, {
+  }, "Aria label"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(InfoTip$e, null, "Aria label is used by screen readers to describe content to users who may be visually impaired. ", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Populating this field will make it so that users can use a screen reader to navigate to this point and hear the description.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "If you leave this field blank, the point will be hidden from screen readers. Users will not be able to navigate to this point using a screen reader.")), /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xxSmall_6
   }), /*#__PURE__*/React.createElement(LabelXSmall, {
     style: styles$u.caption
@@ -30795,6 +30795,9 @@ const styles$t = StyleSheet.create({
  *
  * Used in the interactive graph editor's locked figures section.
  */
+const {
+  InfoTip: InfoTip$d
+} = components;
 function LockedLabelSettings(props) {
   const {
     type,
@@ -30831,10 +30834,14 @@ function LockedLabelSettings(props) {
       });
     },
     style: styles$s.spaceUnder
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$s.row
+  }, /*#__PURE__*/React.createElement(LabelMedium, {
     tag: "label",
-    style: [styles$s.row, styles$s.spaceUnder]
-  }, "TeX", /*#__PURE__*/React.createElement(Strut, {
+    style: [styles$s.row, styles$s.spaceUnder, {
+      flexGrow: 1
+    }]
+  }, "text", /*#__PURE__*/React.createElement(Strut, {
     size: spacing.xSmall_8
   }), /*#__PURE__*/React.createElement(TextField, {
     value: text,
@@ -30842,7 +30849,7 @@ function LockedLabelSettings(props) {
     onChange: newValue => onChangeProps({
       text: newValue
     })
-  })), /*#__PURE__*/React.createElement(View, {
+  })), /*#__PURE__*/React.createElement(InfoTip$d, null, "Surround your text with $ for TeX.", /*#__PURE__*/React.createElement("br", null), "Example: ", `This circle has radius $\\frac{1}{2}$ units.`, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "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.")), /*#__PURE__*/React.createElement(View, {
     style: styles$s.row
   }, /*#__PURE__*/React.createElement(ColorSelect, {
     selectedValue: color$1,