@khanacademy/perseus-editor 11.5.0 → 12.0.0

package/dist/es/index.js

@@ -10,6 +10,7 @@ import { StyleSheet, css } from 'aphrodite';
 import $ from 'jquery';
 import PropTypes from 'prop-types';
 import { View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import Switch from '@khanacademy/wonder-blocks-switch';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import caretRight from '@phosphor-icons/core/bold/caret-right-bold.svg';
 import classNames from 'classnames';
@@ -29,7 +30,10 @@ import caretDoubleUpIcon from '@phosphor-icons/core/bold/caret-double-up-bold.sv
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
 import caretUpIcon from '@phosphor-icons/core/bold/caret-up-bold.svg';
 import trashIcon from '@phosphor-icons/core/bold/trash-bold.svg';
-import Switch from '@khanacademy/wonder-blocks-switch';
+import arrowFatDown from '@phosphor-icons/core/regular/arrow-fat-down.svg';
+import arrowFatLeft from '@phosphor-icons/core/regular/arrow-fat-left.svg';
+import arrowFatRight from '@phosphor-icons/core/regular/arrow-fat-right.svg';
+import arrowFatUp from '@phosphor-icons/core/regular/arrow-fat-up.svg';
 import minusCircle from '@phosphor-icons/core/regular/minus-circle.svg';
 import plusCircle from '@phosphor-icons/core/regular/plus-circle.svg';
 import Banner from '@khanacademy/wonder-blocks-banner';
@@ -37,7 +41,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 = "11.5.0";
+const libVersion = "12.0.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20557,6 +20561,125 @@ const DragTarget = createReactClass({
   }
 });
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: spacing.medium_16,
+    marginWidth: spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: spacing.xLarge_32,
+    marginWidth: spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [styles$R.grow, style]
+    });
+  }
+}
+const styles$R = StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React.createElement(View, {
+      "aria-hidden": "true",
+      style: [strutStyle(size), style]
+    });
+  }
+}
+const strutStyle = size => {
+  return {
+    width: size,
+    MsFlexBasis: size,
+    MsFlexPreferredSize: size,
+    WebkitFlexBasis: size,
+    flexBasis: size,
+    flexShrink: 0
+  };
+};
+
+const Spacing = {
+  xxxxSmall_2: 2,
+  xxxSmall_4: 4,
+  xxSmall_6: 6,
+  xSmall_8: 8,
+  small_12: 12,
+  medium_16: 16,
+  large_24: 24,
+  xLarge_32: 32,
+  xxLarge_48: 48,
+  xxxLarge_64: 64
+};
+
+const _excluded$4 = ["label"];
 const {
   InlineIcon: InlineIcon$9
 } = components;
@@ -20599,10 +20722,9 @@ class WidgetEditor extends React.Component {
       });
       this.props.onChange(newWidgetInfo, cb, silent);
     };
-    this._toggleStatic = e => {
-      e.preventDefault();
-      const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
-        static: !this.state.widgetInfo.static
+    this._setStatic = value => {
+      const newWidgetInfo = _extends({}, this.state.widgetInfo, {
+        static: value
       });
       this.props.onChange(newWidgetInfo);
     };
@@ -20665,13 +20787,10 @@ class WidgetEditor extends React.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement("input", {
-      type: "button"
-      // @ts-expect-error - TS2322 - Type '(e: Event) => void' is not assignable to type 'MouseEventHandler<HTMLInputElement>'.
-      ,
-      onClick: this._toggleStatic,
-      className: "simple-button--small",
-      value: widgetInfo.static ? "Unset as static" : "Set as static"
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement(LabeledSwitch$1, {
+      label: "Static",
+      checked: !!widgetInfo.static,
+      onChange: this._setStatic
     }), supportedAlignments.length > 1 && /*#__PURE__*/React.createElement("select", {
       className: "alignment",
       value: widgetInfo.alignment,
@@ -20694,6 +20813,21 @@ class WidgetEditor extends React.Component {
     }, widgetInfo.options))));
   }
 }
+function LabeledSwitch$1(props) {
+  const {
+      label
+    } = props,
+    switchProps = _objectWithoutPropertiesLoose(props, _excluded$4);
+  const ids = useUniqueIdWithMock();
+  const id = ids.get("switch");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
+    htmlFor: id
+  }, label), /*#__PURE__*/React.createElement(Strut, {
+    size: Spacing.xxSmall_6
+  }), /*#__PURE__*/React.createElement(Switch, _extends({
+    id: id
+  }, switchProps)));
+}
 
 class WidgetSelect extends React.Component {
   constructor(...args) {
@@ -20740,13 +20874,13 @@ class WidgetSelect extends React.Component {
  * that collapse a region.
  */
 function ToggleableCaret(props) {
-  const iconStyle = props.isExpanded ? styles$R.expanded : styles$R.collapsed;
+  const iconStyle = props.isExpanded ? styles$Q.expanded : styles$Q.collapsed;
   return /*#__PURE__*/React.createElement(PhosphorIcon, {
     icon: caretRight,
     style: iconStyle
   });
 }
-const styles$R = StyleSheet.create({
+const styles$Q = StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20779,16 +20913,16 @@ class TexErrorView extends React.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.errorExplanation
+      style: styles$P.errorExplanation
     }, "If your math doesn't display correctly, these errors might help you troubleshoot. Message #content-kitchen for help."), showErrors && errorList.map((e, index) => /*#__PURE__*/React.createElement(View, {
-      style: styles$Q.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React.createElement(View, {
       style: {
@@ -20797,7 +20931,7 @@ class TexErrorView extends React.Component {
     }, e.math), /*#__PURE__*/React.createElement(View, null, e.message))));
   }
 }
-const styles$Q = StyleSheet.create({
+const styles$P = StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23910,7 +24044,7 @@ ItemExtrasEditor.defaultProps = {
   zTable: false
 };
 const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
 }, /*#__PURE__*/React.createElement(Checkbox$1, {
   label: /*#__PURE__*/React.createElement(View, {
     style: {
@@ -23920,7 +24054,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React.createElement(View, {
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = StyleSheet.create({
+const styles$O = StyleSheet.create({
   indented: {
     marginInlineStart: spacing.large_24
   }
@@ -24350,19 +24484,6 @@ var i18n = {
   findImagesInItemData: findImagesInItemData
 };
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
 var isObject = function isObject(obj) {
   return obj === Object(obj);
 };
@@ -24591,7 +24712,7 @@ class SimpleButton extends React.Component {
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$3);
     return /*#__PURE__*/React.createElement("div", _extends({
-      className: css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
+      className: css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
@@ -24606,7 +24727,7 @@ SimpleButton.defaultProps = {
   color: "green",
   onClick: () => {}
 };
-const styles$O = StyleSheet.create({
+const styles$N = StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24826,23 +24947,23 @@ const LeafContainer = ({
 }) => {
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$M.container)
   }, /*#__PURE__*/React.createElement("span", {
-    className: css(styles$N.row, styles$N.rowHeading)
+    className: css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: "pod-title " + css(styles$N.containerHeader)
+    className: "pod-title " + css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24855,11 +24976,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$M.container)
   }, controls && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft, styles$N.containerHeader)
+    className: css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React.createElement("div", null, children), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24872,28 +24993,28 @@ const ObjectContainer = ({
   path
 }) => {
   const headingEditor = /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader)
+    className: css(styles$M.containerHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.containerHeader, styles$N.previewCollectionHeader)
+    className: css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React.createElement(Header, {
     depth: path.length,
-    className: css(styles$N.containerTitle)
+    className: css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.container)
+    className: css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React.createElement("span", {
-    className: css(styles$N.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React.createElement("div", {
-    className: css(path.length > 0 && styles$N.contentIndent)
+    className: css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -25016,11 +25137,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25028,9 +25149,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25046,13 +25167,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.row)
+    className: css(styles$M.row)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React.createElement(HintEditor, _extends({}, data, {
-    className: css(styles$N.hintEditor),
+    className: css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25067,9 +25188,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnRight)
+    className: css(styles$M.columnRight)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(sticky && styles$N.sticky)
+    className: css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25086,9 +25207,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.columnLeft)
+    className: css(styles$M.columnLeft)
   }, /*#__PURE__*/React.createElement("div", {
-    className: css(styles$N.tagsEditor)
+    className: css(styles$M.tagsEditor)
   }, /*#__PURE__*/React.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25119,23 +25240,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementUp",
-      className: css(styles$N.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React.createElement("div", {
-      className: css(styles$N.verticalFlip)
+      className: css(styles$M.verticalFlip)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React.createElement("div", {
       key: "moveArrayElementDown",
-      className: css(styles$N.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React.createElement("div", {
       key: "removeArrayElement",
-      className: css(styles$N.control)
+      className: css(styles$M.control)
     }, /*#__PURE__*/React.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25143,7 +25264,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
+      className: css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25169,7 +25290,7 @@ const ObjectNodeContent = props => {
   // made sense to the shape's author is the order in which we'll iterate :)
   const children = Object.keys(shape.shape).map(subkey => /*#__PURE__*/React.createElement("div", {
     key: subkey,
-    className: css(styles$N.objectElement)
+    className: css(styles$M.objectElement)
   }, /*#__PURE__*/React.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25336,7 +25457,7 @@ class MultiRendererEditor extends React.Component {
     }, this._renderContent());
   }
 }
-const styles$N = StyleSheet.create({
+const styles$M = StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26323,98 +26444,6 @@ ExplanationEditor.propTypes = _extends({}, Changeable.propTypes, {
 ExplanationEditor.widgetName = "explanation";
 ExplanationEditor.defaultProps = defaultExplanationProps;
 
-const mediaDefaultSpecLargeMarginWidth = spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: spacing.medium_16,
-    marginWidth: spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: spacing.xLarge_32,
-    marginWidth: spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [styles$M.grow, style]
-    });
-  }
-}
-const styles$M = StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React.createElement(View, {
-      "aria-hidden": "true",
-      style: [strutStyle(size), style]
-    });
-  }
-}
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
-
 const PT = PropTypes;
 
 /**
@@ -30991,6 +31020,30 @@ const LockedPolygonSettings = props => {
       color: newValue
     });
   }
+  function handlePolygonMove(movement) {
+    switch (movement) {
+      case "up":
+        onChangeProps({
+          points: points.map(([x, y]) => [x, y + 1])
+        });
+        break;
+      case "down":
+        onChangeProps({
+          points: points.map(([x, y]) => [x, y - 1])
+        });
+        break;
+      case "left":
+        onChangeProps({
+          points: points.map(([x, y]) => [x - 1, y])
+        });
+        break;
+      case "right":
+        onChangeProps({
+          points: points.map(([x, y]) => [x + 1, y])
+        });
+        break;
+    }
+  }
   return /*#__PURE__*/React.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
@@ -31081,7 +31134,9 @@ const LockedPolygonSettings = props => {
       },
       style: styles$o.icon
     }));
-  }), /*#__PURE__*/React.createElement(Button, {
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles$o.row, styles$o.polygonActionsContainer]
+  }, /*#__PURE__*/React.createElement(Button, {
     kind: "tertiary",
     startIcon: plusCircle,
     onClick: () => {
@@ -31089,7 +31144,35 @@ const LockedPolygonSettings = props => {
         points: [...points, [0, 0]]
       });
     }
-  }, "Add point")), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
+  }, "Add point"), /*#__PURE__*/React.createElement(Spring, null), /*#__PURE__*/React.createElement(View, {
+    style: styles$o.movementButtonsContainer
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "Move polygon up",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatUp,
+    onClick: () => handlePolygonMove("up")
+  }), /*#__PURE__*/React.createElement(View, {
+    style: styles$o.row
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "Move polygon left",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatLeft,
+    onClick: () => handlePolygonMove("left")
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "Move polygon down",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatDown,
+    onClick: () => handlePolygonMove("down")
+  }), /*#__PURE__*/React.createElement(IconButton, {
+    "aria-label": "Move polygon right",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatRight,
+    onClick: () => handlePolygonMove("right")
+  }))))), /*#__PURE__*/React.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31110,6 +31193,18 @@ const styles$o = StyleSheet.create({
   icon: {
     marginInlineStart: spacing.xxxSmall_4
   },
+  polygonActionsContainer: {
+    width: "100%"
+  },
+  iconButton: {
+    margin: 0
+  },
+  movementButtonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: "fit-content"
+  },
   spaceUnder: {
     marginBottom: spacing.xSmall_8
   },