@khanacademy/perseus-editor 6.2.0 → 6.2.1

package/dist/es/index.js

@@ -21,14 +21,15 @@ import { useMathInputI18n, createMathField } from '@khanacademy/math-input';
 import { SingleSelect, OptionItem, ActionMenu, ActionItem } from '@khanacademy/wonder-blocks-dropdown';
 import { TextField, Checkbox as Checkbox$1 } from '@khanacademy/wonder-blocks-form';
 import { LabelSmall, LabelMedium, LabelLarge, BodyMonospace } from '@khanacademy/wonder-blocks-typography';
-import Switch from '@khanacademy/wonder-blocks-switch';
+import Banner from '@khanacademy/wonder-blocks-banner';
 import { AccordionSection } from '@khanacademy/wonder-blocks-accordion';
 import Button from '@khanacademy/wonder-blocks-button';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
+import Switch from '@khanacademy/wonder-blocks-switch';
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "6.2.0";
+const libVersion = "6.2.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -29962,7 +29963,11 @@ class InteractiveGraphSettings extends React.Component {
       onBlur: this.changeBackgroundUrl
     }), /*#__PURE__*/React.createElement(InfoTip$c, 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$k.rulerSection
-    }, /*#__PURE__*/React.createElement(View, {
+    }, /*#__PURE__*/React.createElement(Banner, {
+      layout: "floating",
+      text: "The ruler and protractor are not accessible. Please consider an alternate approach.",
+      kind: "warning"
+    }), /*#__PURE__*/React.createElement(View, {
       style: styles$k.checkboxRow
     }, /*#__PURE__*/React.createElement(PropCheckBox$7, {
       label: "Show ruler",
@@ -30073,7 +30078,8 @@ const styles$k = StyleSheet.create({
   checkboxRow: {
     flexDirection: "row",
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    marginTop: spacing.xSmall_8
   },
   rulerSection: {
     marginTop: spacing.xSmall_8,
@@ -30269,35 +30275,6 @@ const styles$h = StyleSheet.create({
   }
 });
 
-const LabeledSwitch = props => {
-  const {
-    checked,
-    label,
-    style,
-    onChange
-  } = props;
-  const ids = useUniqueIdWithMock();
-  const switchId = ids.get("switch");
-  return /*#__PURE__*/React.createElement(View, {
-    style: [styles$g.row, style]
-  }, /*#__PURE__*/React.createElement(Switch, {
-    id: switchId,
-    checked: checked,
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(Strut, {
-    size: spacing.xSmall_8
-  }), /*#__PURE__*/React.createElement(LabelMedium, {
-    tag: "label",
-    htmlFor: switchId
-  }, label));
-};
-const styles$g = StyleSheet.create({
-  row: {
-    flexDirection: "row",
-    alignItems: "center"
-  }
-});
-
 const LockedFigureSettingsAccordion = props => {
   const {
     children,
@@ -30312,14 +30289,14 @@ const LockedFigureSettingsAccordion = props => {
   , {
     className: "locked-figure-accordion"
   }, /*#__PURE__*/React.createElement(AccordionSection, {
-    style: [styles$f.container, containerStyle],
-    headerStyle: styles$f.accordionHeader,
+    style: [styles$g.container, containerStyle],
+    headerStyle: styles$g.accordionHeader,
     header: header
   }, /*#__PURE__*/React.createElement(View, {
-    style: [styles$f.accordionPanel, panelStyle]
+    style: [styles$g.accordionPanel, panelStyle]
   }, children)));
 };
-const styles$f = StyleSheet.create({
+const styles$g = StyleSheet.create({
   container: {
     backgroundColor: color.fadedBlue8,
     marginTop: spacing.xSmall_8
@@ -30351,16 +30328,16 @@ const LockedFigureSettingsActions = props => {
     figureAriaLabel
   } = props;
   return /*#__PURE__*/React.createElement(View, {
-    style: styles$e.container
+    style: styles$f.container
   }, /*#__PURE__*/React.createElement(Button, {
     startIcon: trashIcon,
     "aria-label": `Delete ${figureAriaLabel}`,
     onClick: onRemove,
     kind: "tertiary",
-    style: styles$e.deleteButton
+    style: styles$f.deleteButton
   }, "Delete"));
 };
-const styles$e = StyleSheet.create({
+const styles$f = StyleSheet.create({
   container: {
     width: "100%",
     flexDirection: "row",
@@ -30373,6 +30350,35 @@ const styles$e = StyleSheet.create({
   }
 });
 
+const LabeledSwitch = props => {
+  const {
+    checked,
+    label,
+    style,
+    onChange
+  } = props;
+  const ids = useUniqueIdWithMock();
+  const switchId = ids.get("switch");
+  return /*#__PURE__*/React.createElement(View, {
+    style: [styles$e.row, style]
+  }, /*#__PURE__*/React.createElement(Switch, {
+    id: switchId,
+    checked: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement(Strut, {
+    size: spacing.xSmall_8
+  }), /*#__PURE__*/React.createElement(LabelMedium, {
+    tag: "label",
+    htmlFor: switchId
+  }, label));
+};
+const styles$e = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+
 function focusWithChromeStickyFocusBugWorkaround(element) {
   // NOTE(marksandstrom) Chrome sticky focus bug.
   //
@@ -30418,7 +30424,7 @@ function getValidNumberFromString(value) {
   // If the value is not a number, return 0.
   return isNaN(parsed) ? 0 : parsed;
 }
-const DEFAULT_COLOR = "green";
+const DEFAULT_COLOR = "grayH";
 function getDefaultFigureForType(type) {
   switch (type) {
     case "point":
@@ -30437,7 +30443,6 @@ function getDefaultFigureForType(type) {
         })],
         color: DEFAULT_COLOR,
         lineStyle: "solid",
-        showArrows: false,
         showStartPoint: false,
         showEndPoint: false
       };
@@ -30586,7 +30591,6 @@ const LockedLineSettings = props => {
     points,
     color: lineColor,
     lineStyle = "solid",
-    showArrows,
     showStartPoint,
     showEndPoint,
     onChangeProps,
@@ -30682,13 +30686,7 @@ const LockedLineSettings = props => {
   }), /*#__PURE__*/React.createElement(OptionItem, {
     value: "dashed",
     label: "dashed"
-  })))), /*#__PURE__*/React.createElement(LabeledSwitch, {
-    label: "show arrows",
-    checked: showArrows,
-    onChange: newValue => onChangeProps({
-      showArrows: newValue
-    })
-  }), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
+  })))), /*#__PURE__*/React.createElement(LockedPointSettings, _extends({
     label: "Start point",
     toggled: showStartPoint
   }, startPoint, {