@khanacademy/perseus-editor 11.5.0 → 11.6.0

package/dist/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
 var perseus = require('@khanacademy/perseus');
-var React = require('react');
+var React$1 = require('react');
 var _ = require('underscore');
 var createReactClass = require('create-react-class');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
@@ -13,17 +13,19 @@ 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');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
+var keypadContext = require('@khanacademy/keypad-context');
+var mathInput = require('@khanacademy/math-input');
 var ReactDOM = require('react-dom');
 var kmath = require('@khanacademy/kmath');
 var KAS = require('@khanacademy/kas');
 var Button = require('@khanacademy/wonder-blocks-button');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
-var mathInput = require('@khanacademy/math-input');
 var wonderBlocksDropdown = require('@khanacademy/wonder-blocks-dropdown');
 var wonderBlocksAccordion = require('@khanacademy/wonder-blocks-accordion');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
@@ -32,7 +34,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');
@@ -58,12 +63,13 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React$1);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var createReactClass__default = /*#__PURE__*/_interopDefaultLegacy(createReactClass);
 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 +81,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 +92,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 = "11.6.0";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -278,13 +287,13 @@ class SectionControlButton extends React__namespace.Component {
       role: "button",
       hideDefaultFocusRing: true,
       "aria-label": title,
-      style: styles$S.button
+      style: styles$T.button
     }, _ref => {
       return /*#__PURE__*/React__namespace.createElement(InlineIcon$a, icon);
     });
   }
 }
-const styles$S = aphrodite.StyleSheet.create({
+const styles$T = aphrodite.StyleSheet.create({
   button: {
     backgroundColor: wonderBlocksTokens.color.gold,
     margin: 2,
@@ -20606,6 +20615,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$S.grow, style]
+    });
+  }
+}
+const styles$S = 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 +20779,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 +20831,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 +20857,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() {
@@ -24357,6 +24483,64 @@ var i18n = {
   findImagesInItemData: findImagesInItemData
 };
 
+/**
+ * The `ContentPreview` component provides a simple preview system for Perseus
+ * Content. Due to how Persus styles are built, the preview styling matches the
+ * current device based on the viewport width (using `@media` queries for
+ * `min-width` and `max-width`).
+ *
+ * The preview will render the mobile variant (styling and layout) when the
+ * `previewDevice` is phone or tablet. Note that the styling cannot be matched
+ * 100% due to the above `@media` query limitation.
+ */
+function ContentPreview(_ref) {
+  let {
+    question,
+    apiOptions,
+    seamless,
+    linterContext,
+    legacyPerseusLint,
+    previewDevice,
+    strings
+  } = _ref;
+  const isMobile = previewDevice !== "desktop";
+  const className = isMobile ? "perseus-mobile" : "";
+  return /*#__PURE__*/React.createElement(wonderBlocksCore.View, {
+    className: `framework-perseus ${className}`,
+    style: [styles$O.container, !seamless ? styles$O.gutter : undefined]
+  }, /*#__PURE__*/React.createElement(keypadContext.StatefulKeypadContextProvider, null, /*#__PURE__*/React.createElement(keypadContext.KeypadContext.Consumer, null, _ref2 => {
+    let {
+      setKeypadActive,
+      keypadElement,
+      setKeypadElement
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(perseus.Renderer, _extends({
+      strings: strings,
+      apiOptions: {
+        ...apiOptions,
+        isMobile
+      },
+      keypadElement: keypadElement,
+      linterContext: linterContext,
+      legacyPerseusLint: legacyPerseusLint
+    }, question)), /*#__PURE__*/React.createElement(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: perseus.constants.lintGutterWidth
+  }
+});
+
 var isObject = function (obj) {
   return obj === Object(obj);
 };
@@ -24593,12 +24777,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 +24995,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 +25024,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 +25042,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 +25183,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 +25195,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 +25213,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 +25234,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 +25253,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 +25286,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 +25310,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 +25336,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 +25506,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 +26530,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"];
 
 /**
@@ -28521,13 +28613,13 @@ class InputNumberEditor extends React__namespace.Component {
  * it's just the input itself for use writing TeX.
  */
 function MathquillInput(props) {
-  const mathFieldWrapperRef = React.useRef(null);
-  const mathFieldInstance = React.useRef();
+  const mathFieldWrapperRef = React$1.useRef(null);
+  const mathFieldInstance = React$1.useRef();
   const {
     locale,
     strings
   } = mathInput.useMathInputI18n();
-  React.useEffect(() => {
+  React$1.useEffect(() => {
     // If we have the mount for the input, but not the input
     // make a new Mathquill input
     if (mathFieldWrapperRef.current && !mathFieldInstance.current) {
@@ -30546,8 +30638,8 @@ const LockedFunctionSettings = props => {
   // Tracking the string value of domain constraints to handle interim state of
   //     entering a negative value, as well as representing Infinity as an empty string.
   // This variable is used when specifying the values of the input fields.
-  const [domainEntries, setDomainEntries] = React.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
-  React.useEffect(() => {
+  const [domainEntries, setDomainEntries] = React$1.useState([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
+  React$1.useEffect(() => {
     // "useEffect" used to maintain parity between domain constraints and their string representation.
     setDomainEntries([domain && domain[0] !== -Infinity ? domain[0].toString() : "", domain && domain[1] !== Infinity ? domain[1].toString() : ""]);
   }, [domain]);
@@ -31095,6 +31187,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 +31313,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 +31323,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 +31372,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
   },
@@ -37050,6 +37220,7 @@ exports.AllEditors = AllEditors;
 exports.AllWidgets = AllWidgets;
 exports.ArticleDiff = ArticleDiff;
 exports.ArticleEditor = ArticleEditor;
+exports.ContentPreview = ContentPreview;
 exports.DeviceFramer = DeviceFramer;
 exports.Editor = Editor;
 exports.EditorPage = EditorPage;