@khanacademy/perseus-editor 11.5.0 → 12.0.0

package/dist/index.js

@@ -13,6 +13,7 @@ var aphrodite = require('aphrodite');
 var $ = require('jquery');
 var PropTypes = require('prop-types');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var Switch = require('@khanacademy/wonder-blocks-switch');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var caretRight = require('@phosphor-icons/core/bold/caret-right-bold.svg');
 var classNames = require('classnames');
@@ -32,7 +33,10 @@ var caretDoubleUpIcon = require('@phosphor-icons/core/bold/caret-double-up-bold.
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
 var caretUpIcon = require('@phosphor-icons/core/bold/caret-up-bold.svg');
 var trashIcon = require('@phosphor-icons/core/bold/trash-bold.svg');
-var Switch = require('@khanacademy/wonder-blocks-switch');
+var arrowFatDown = require('@phosphor-icons/core/regular/arrow-fat-down.svg');
+var arrowFatLeft = require('@phosphor-icons/core/regular/arrow-fat-left.svg');
+var arrowFatRight = require('@phosphor-icons/core/regular/arrow-fat-right.svg');
+var arrowFatUp = require('@phosphor-icons/core/regular/arrow-fat-up.svg');
 var minusCircle = require('@phosphor-icons/core/regular/minus-circle.svg');
 var plusCircle = require('@phosphor-icons/core/regular/plus-circle.svg');
 var Banner = require('@khanacademy/wonder-blocks-banner');
@@ -64,6 +68,7 @@ var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactCl
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 var $__default = /*#__PURE__*/_interopDefaultLegacy($);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
 var caretRight__default = /*#__PURE__*/_interopDefaultLegacy(caretRight);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -75,7 +80,10 @@ var caretDoubleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDoubleU
 var caretDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretDownIcon);
 var caretUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(caretUpIcon);
 var trashIcon__default = /*#__PURE__*/_interopDefaultLegacy(trashIcon);
-var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var arrowFatDown__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatDown);
+var arrowFatLeft__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatLeft);
+var arrowFatRight__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatRight);
+var arrowFatUp__default = /*#__PURE__*/_interopDefaultLegacy(arrowFatUp);
 var minusCircle__default = /*#__PURE__*/_interopDefaultLegacy(minusCircle);
 var plusCircle__default = /*#__PURE__*/_interopDefaultLegacy(plusCircle);
 var Banner__default = /*#__PURE__*/_interopDefaultLegacy(Banner);
@@ -83,7 +91,7 @@ var arrowCounterClockwise__default = /*#__PURE__*/_interopDefaultLegacy(arrowCou
 
 // 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";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -20606,6 +20614,111 @@ const DragTarget = createReactClass__default["default"]({
   }
 });
 
+const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
+const MEDIA_DEFAULT_SPEC = {
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  medium: {
+    query: "(min-width: 768px) and (max-width: 1023px)",
+    totalColumns: 8,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.large_24
+  },
+  large: {
+    query: "(min-width: 1024px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: mediaDefaultSpecLargeMarginWidth,
+    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
+  }
+};
+({
+  large: {
+    query: "(min-width: 1px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  }
+});
+({
+  small: {
+    query: "(max-width: 767px)",
+    totalColumns: 4,
+    gutterWidth: wonderBlocksTokens.spacing.medium_16,
+    marginWidth: wonderBlocksTokens.spacing.medium_16
+  },
+  large: {
+    query: "(min-width: 768px)",
+    totalColumns: 12,
+    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
+    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
+  }
+});
+
+const defaultContext = {
+  ssrSize: "large",
+  mediaSpec: MEDIA_DEFAULT_SPEC
+};
+const MediaLayoutContext = React__namespace.createContext(defaultContext);
+MediaLayoutContext.displayName = "MediaLayoutContext";
+
+class Spring extends React__namespace.Component {
+  render() {
+    const {
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.View, {
+      "aria-hidden": "true",
+      style: [styles$R.grow, style]
+    });
+  }
+}
+const styles$R = aphrodite.StyleSheet.create({
+  grow: {
+    flexGrow: 1
+  }
+});
+
+class Strut extends React__namespace.Component {
+  render() {
+    const {
+      size,
+      style
+    } = this.props;
+    return React__namespace.createElement(wonderBlocksCore.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 {
   InlineIcon: InlineIcon$9
 } = perseus.components;
@@ -20665,11 +20778,11 @@ class WidgetEditor extends React__namespace.Component {
     };
     this.props.onChange(newWidgetInfo, cb, silent);
   };
-  _toggleStatic = e => {
-    e.preventDefault();
-    const newWidgetInfo = Object.assign({}, this.state.widgetInfo, {
-      static: !this.state.widgetInfo.static
-    });
+  _setStatic = value => {
+    const newWidgetInfo = {
+      ...this.state.widgetInfo,
+      static: value
+    };
     this.props.onChange(newWidgetInfo);
   };
   _handleAlignmentChange = e => {
@@ -20717,13 +20830,10 @@ class WidgetEditor extends React__namespace.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.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__namespace.createElement(InlineIcon$9, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
+      label: "Static",
+      checked: !!widgetInfo.static,
+      onChange: this._setStatic
     }), supportedAlignments.length > 1 && /*#__PURE__*/React__namespace.createElement("select", {
       className: "alignment",
       value: widgetInfo.alignment,
@@ -20746,6 +20856,21 @@ class WidgetEditor extends React__namespace.Component {
     }, widgetInfo.options))));
   }
 }
+function LabeledSwitch$1(props) {
+  const {
+    label,
+    ...switchProps
+  } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock();
+  const id = ids.get("switch");
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("label", {
+    htmlFor: id
+  }, label), /*#__PURE__*/React__namespace.createElement(Strut, {
+    size: Spacing.xxSmall_6
+  }), /*#__PURE__*/React__namespace.createElement(Switch__default["default"], _extends({
+    id: id
+  }, switchProps)));
+}
 
 class WidgetSelect extends React__namespace.Component {
   shouldComponentUpdate() {
@@ -20789,13 +20914,13 @@ class WidgetSelect extends React__namespace.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__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
     icon: caretRight__default["default"],
     style: iconStyle
   });
 }
-const styles$R = aphrodite.StyleSheet.create({
+const styles$Q = aphrodite.StyleSheet.create({
   collapsed: {
     transition: ".15s"
   },
@@ -20825,16 +20950,16 @@ class TexErrorView extends React__namespace.Component {
       showErrors
     } = this.state;
     return /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.errorContainer
+      style: styles$P.errorContainer
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.title,
+      style: styles$P.title,
       onClick: this.handleToggleTexErrors
     }, /*#__PURE__*/React__namespace.createElement(ToggleableCaret, {
       isExpanded: showErrors
     }), "\xA0 TeX Errors (", errorList.length, ")"), showErrors && /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.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__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$Q.error,
+      style: styles$P.error,
       key: index
     }, /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
       style: {
@@ -20843,7 +20968,7 @@ class TexErrorView extends React__namespace.Component {
     }, e.math), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, null, e.message))));
   }
 }
-const styles$Q = aphrodite.StyleSheet.create({
+const styles$P = aphrodite.StyleSheet.create({
   title: {
     backgroundColor: "#eee",
     fontSize: "1.25em",
@@ -23920,7 +24045,7 @@ class ItemExtrasEditor extends React__namespace.Component {
   }
 }
 const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
-  style: [styles$P.checkbox, props.indent ? styles$P.indented : undefined]
+  style: [styles$O.checkbox, props.indent ? styles$O.indented : undefined]
 }, /*#__PURE__*/React__namespace.createElement(wonderBlocksForm.Checkbox, {
   label: /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
     style: {
@@ -23930,7 +24055,7 @@ const ItemExtraCheckbox = props => /*#__PURE__*/React__namespace.createElement(w
   checked: props.checked,
   onChange: newCheckedState => props.onChange(newCheckedState)
 }));
-const styles$P = aphrodite.StyleSheet.create({
+const styles$O = aphrodite.StyleSheet.create({
   indented: {
     marginInlineStart: wonderBlocksTokens.spacing.large_24
   }
@@ -24593,12 +24718,12 @@ class SimpleButton extends React__namespace.Component {
       ...otherProps
     } = this.props;
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      className: aphrodite.css(styles$O.baseButton, color === "green" && styles$O.green, color === "orange" && styles$O.orange),
+      className: aphrodite.css(styles$N.baseButton, color === "green" && styles$N.green, color === "orange" && styles$N.orange),
       onClick: onClick
     }, otherProps), children);
   }
 }
-const styles$O = aphrodite.StyleSheet.create({
+const styles$N = aphrodite.StyleSheet.create({
   baseButton: {
     top: "0",
     fontSize: "11px",
@@ -24811,23 +24936,23 @@ const LeafContainer = _ref2 => {
   } = _ref2;
   const hasPreviewHeading = shape.type === "content" || shape.type === "hint";
   const previewHeading = hasPreviewHeading && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$M.container)
   }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row, styles$N.rowHeading)
+    className: aphrodite.css(styles$M.row, styles$M.rowHeading)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: "pod-title " + aphrodite.css(styles$N.containerHeader)
+    className: "pod-title " + aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, previewHeading)), children);
 };
 const ArrayContainer = props => {
@@ -24840,11 +24965,11 @@ const ArrayContainer = props => {
     actions
   } = props;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$M.container)
   }, controls && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft, styles$N.containerHeader)
+    className: aphrodite.css(styles$M.columnLeft, styles$M.containerHeader)
   }, controls), /*#__PURE__*/React__namespace.createElement("div", null, children), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("a", {
     href: "javascript:void 0",
     onClick: () => actions.addArrayElement(path, shape.elementShape)
@@ -24858,28 +24983,28 @@ const ObjectContainer = _ref3 => {
     path
   } = _ref3;
   const headingEditor = /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader)
+    className: aphrodite.css(styles$M.containerHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)), controls);
   const headingPreview = (name || controls) && /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.containerHeader, styles$N.previewCollectionHeader)
+    className: aphrodite.css(styles$M.containerHeader, styles$M.previewCollectionHeader)
   }, /*#__PURE__*/React__namespace.createElement(Header, {
     depth: path.length,
-    className: aphrodite.css(styles$N.containerTitle)
+    className: aphrodite.css(styles$M.containerTitle)
   }, capitalize(name)));
   const hasBothHeadings = headingEditor && headingPreview;
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.container)
+    className: aphrodite.css(styles$M.container)
   }, hasBothHeadings && /*#__PURE__*/React__namespace.createElement("span", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, headingEditor), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, headingPreview)), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(path.length > 0 && styles$N.contentIndent)
+    className: aphrodite.css(path.length > 0 && styles$M.contentIndent)
   }, children));
 };
 
@@ -24999,11 +25124,11 @@ const ItemNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   },
   /*#__PURE__*/
   // @ts-expect-error - TS2769 - No overload matches this call.
@@ -25011,9 +25136,9 @@ const ItemNodeContent = withStickiness(props => {
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview))));
 });
 const HintNodeContent = withStickiness(props => {
@@ -25029,13 +25154,13 @@ const HintNodeContent = withStickiness(props => {
     className: "framework-perseus"
   }, lens(renderers).get(path));
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.row)
+    className: aphrodite.css(styles$M.row)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, /*#__PURE__*/React__namespace.createElement(HintEditor, _extends({}, data, {
-    className: aphrodite.css(styles$N.hintEditor),
+    className: aphrodite.css(styles$M.hintEditor),
     onChange: newVal => actions.mergeValueAtPath(path, newVal),
     apiOptions: apiOptions,
     showTitle: false,
@@ -25050,9 +25175,9 @@ const HintNodeContent = withStickiness(props => {
     isFirst: true,
     isLast: true
   })))), /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnRight)
+    className: aphrodite.css(styles$M.columnRight)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(sticky && styles$N.sticky)
+    className: aphrodite.css(sticky && styles$M.sticky)
   }, preview)));
 });
 const TagsNodeContent = props => {
@@ -25069,9 +25194,9 @@ const TagsNodeContent = props => {
     return null;
   }
   return /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.columnLeft)
+    className: aphrodite.css(styles$M.columnLeft)
   }, /*#__PURE__*/React__namespace.createElement("div", {
-    className: aphrodite.css(styles$N.tagsEditor)
+    className: aphrodite.css(styles$M.tagsEditor)
   }, /*#__PURE__*/React__namespace.createElement(GroupMetadataEditor, {
     value: data,
     onChange: newVal => actions.setValueAtPath(path, newVal),
@@ -25102,23 +25227,23 @@ const ArrayNodeContent = props => {
     const subpath = path.concat(i);
     const controls = [i > 0 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementUp",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move up",
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
-      className: aphrodite.css(styles$N.verticalFlip)
+      className: aphrodite.css(styles$M.verticalFlip)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
-      className: aphrodite.css(styles$N.control)
+      className: aphrodite.css(styles$M.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
@@ -25126,7 +25251,7 @@ const ArrayNodeContent = props => {
     }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$4)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
-      className: aphrodite.css(styles$N.arrayElement, !elementIsLeaf && styles$N.arrayElementAndNotLeaf)
+      className: aphrodite.css(styles$M.arrayElement, !elementIsLeaf && styles$M.arrayElementAndNotLeaf)
     }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
       key: i,
       shape: shape.elementShape,
@@ -25152,7 +25277,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__namespace.createElement("div", {
     key: subkey,
-    className: aphrodite.css(styles$N.objectElement)
+    className: aphrodite.css(styles$M.objectElement)
   }, /*#__PURE__*/React__namespace.createElement(NodeContainer, _extends({}, otherProps, {
     shape: shape.shape[subkey],
     data: data[subkey],
@@ -25322,7 +25447,7 @@ class MultiRendererEditor extends React__namespace.Component {
     }, this._renderContent());
   }
 }
-const styles$N = aphrodite.StyleSheet.create({
+const styles$M = aphrodite.StyleSheet.create({
   // This is used in a number of places throughout this file.
   container: {},
   // eslint-disable-next-line react-native/no-unused-styles
@@ -26346,98 +26471,6 @@ class ExplanationEditor extends React__namespace.Component {
   }
 }
 
-const mediaDefaultSpecLargeMarginWidth = wonderBlocksTokens.spacing.large_24;
-const MEDIA_DEFAULT_SPEC = {
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  medium: {
-    query: "(min-width: 768px) and (max-width: 1023px)",
-    totalColumns: 8,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.large_24
-  },
-  large: {
-    query: "(min-width: 1024px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: mediaDefaultSpecLargeMarginWidth,
-    maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
-  }
-};
-({
-  large: {
-    query: "(min-width: 1px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  }
-});
-({
-  small: {
-    query: "(max-width: 767px)",
-    totalColumns: 4,
-    gutterWidth: wonderBlocksTokens.spacing.medium_16,
-    marginWidth: wonderBlocksTokens.spacing.medium_16
-  },
-  large: {
-    query: "(min-width: 768px)",
-    totalColumns: 12,
-    gutterWidth: wonderBlocksTokens.spacing.xLarge_32,
-    marginWidth: wonderBlocksTokens.spacing.xxLarge_48
-  }
-});
-
-const defaultContext = {
-  ssrSize: "large",
-  mediaSpec: MEDIA_DEFAULT_SPEC
-};
-const MediaLayoutContext = React__namespace.createContext(defaultContext);
-MediaLayoutContext.displayName = "MediaLayoutContext";
-
-class Spring extends React__namespace.Component {
-  render() {
-    const {
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      "aria-hidden": "true",
-      style: [styles$M.grow, style]
-    });
-  }
-}
-const styles$M = aphrodite.StyleSheet.create({
-  grow: {
-    flexGrow: 1
-  }
-});
-
-class Strut extends React__namespace.Component {
-  render() {
-    const {
-      size,
-      style
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.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__default["default"];
 
 /**
@@ -31095,6 +31128,42 @@ const LockedPolygonSettings = props => {
       color: newValue
     });
   }
+  function handlePolygonMove(movement) {
+    switch (movement) {
+      case "up":
+        onChangeProps({
+          points: points.map(_ref => {
+            let [x, y] = _ref;
+            return [x, y + 1];
+          })
+        });
+        break;
+      case "down":
+        onChangeProps({
+          points: points.map(_ref2 => {
+            let [x, y] = _ref2;
+            return [x, y - 1];
+          })
+        });
+        break;
+      case "left":
+        onChangeProps({
+          points: points.map(_ref3 => {
+            let [x, y] = _ref3;
+            return [x - 1, y];
+          })
+        });
+        break;
+      case "right":
+        onChangeProps({
+          points: points.map(_ref4 => {
+            let [x, y] = _ref4;
+            return [x + 1, y];
+          })
+        });
+        break;
+    }
+  }
   return /*#__PURE__*/React__namespace.createElement(PerseusEditorAccordion, {
     expanded: expanded,
     onToggle: onToggle,
@@ -31185,7 +31254,9 @@ const LockedPolygonSettings = props => {
       },
       style: styles$o.icon
     }));
-  }), /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles$o.row, styles$o.polygonActionsContainer]
+  }, /*#__PURE__*/React__namespace.createElement(Button__default["default"], {
     kind: "tertiary",
     startIcon: plusCircle__default["default"],
     onClick: () => {
@@ -31193,7 +31264,35 @@ const LockedPolygonSettings = props => {
         points: [...points, [0, 0]]
       });
     }
-  }, "Add point")), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
+  }, "Add point"), /*#__PURE__*/React__namespace.createElement(Spring, null), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$o.movementButtonsContainer
+  }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon up",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatUp__default["default"],
+    onClick: () => handlePolygonMove("up")
+  }), /*#__PURE__*/React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$o.row
+  }, /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon left",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatLeft__default["default"],
+    onClick: () => handlePolygonMove("left")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon down",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatDown__default["default"],
+    onClick: () => handlePolygonMove("down")
+  }), /*#__PURE__*/React__namespace.createElement(IconButton__default["default"], {
+    "aria-label": "Move polygon right",
+    style: styles$o.iconButton,
+    size: "small",
+    icon: arrowFatRight__default["default"],
+    onClick: () => handlePolygonMove("right")
+  }))))), /*#__PURE__*/React__namespace.createElement(LockedFigureSettingsActions, {
     figureType: props.type,
     onMove: onMove,
     onRemove: onRemove
@@ -31214,6 +31313,18 @@ const styles$o = aphrodite.StyleSheet.create({
   icon: {
     marginInlineStart: wonderBlocksTokens.spacing.xxxSmall_4
   },
+  polygonActionsContainer: {
+    width: "100%"
+  },
+  iconButton: {
+    margin: 0
+  },
+  movementButtonsContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    minWidth: "fit-content"
+  },
   spaceUnder: {
     marginBottom: wonderBlocksTokens.spacing.xSmall_8
   },