@khanacademy/perseus-editor 14.9.1 → 14.10.1

package/dist/index.js

@@ -98,7 +98,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 = "14.9.1";
+const libVersion = "14.10.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -116,6 +116,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const devices = {
+  PHONE: "phone",
+  TABLET: "tablet",
+  DESKTOP: "desktop"
+};
+
+// How many pixels do we reserve on the right-hand side of a preview
+// for displaying lint indicators? This space needs to be reserved
+// in DeviceFramer, but it is actually allocated in PerseusFrame
+const lintGutterWidth = 36;
+
+// How wide a border does PerseusFrame draw? We need to allocate enough
+// space for it in DeviceFramer.
+const perseusFrameBorderWidth = 1;
+
 /**
  * A component that displays its contents inside a device frame.
  */
@@ -166,7 +181,7 @@ const DeviceFramer = _ref => {
       key: "screen",
       style: {
         overflow: "scroll",
-        width: SCREEN_SIZES[deviceType].framedWidth + 2 * perseus.constants.perseusFrameBorderWidth + perseus.constants.lintGutterWidth
+        width: SCREEN_SIZES[deviceType].framedWidth + 2 * perseusFrameBorderWidth + lintGutterWidth
       }
     }, /*#__PURE__*/React__namespace.createElement("div", null, children));
   }
@@ -20726,14 +20741,51 @@ const Spacing = {
   xxxLarge_64: 64
 };
 
+const iconChevronRight = {
+  path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
+  width: 63.034,
+  height: 100
+};
+const iconCircleArrowDown = {
+  path: "M50.046 83.676q1.767 0 2.907-1.14l29.526-29.526q1.197-1.197 1.197-2.907t-1.197-2.964l-5.928-5.928q-1.197-1.14-2.964-1.14t-2.907 1.14l-12.312 12.312l0-32.661q0-1.71-1.254-2.964t-2.907-1.254l-8.322 0q-1.71 0-2.964 1.254t-1.254 2.964l0 32.661l-12.312-12.312q-1.197-1.254-2.907-1.254t-2.907 1.254l-5.928 5.928q-1.197 1.197-1.197 2.964t1.197 2.907l29.469 29.526q1.197 1.14 2.964 1.14zm49.989-33.63q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+  width: 100,
+  height: 100
+};
+const iconCircleArrowUp = {
+  path: "M54.207 83.391q1.653 0 2.907-1.254t1.254-2.907l0-32.718l12.312 12.312q1.254 1.254 2.964 1.254t2.907-1.254l5.928-5.928q1.197-1.197 1.14-2.964 0-1.767-1.14-2.907l-29.526-29.526q-1.197-1.14-2.907-1.14t-2.964 1.14l-29.469 29.526q-1.197 1.254-1.197 2.964t1.197 2.907l5.928 5.928q1.197 1.197 2.907 1.197t2.907-1.197l12.312-12.312l0 32.718q0 1.653 1.254 2.907t2.964 1.254l8.322 0zm45.828-33.345q.057 13.623-6.669 25.137t-18.24 18.183-25.08 6.669-25.137-6.726q-11.514-6.726-18.183-18.183-6.726-11.571-6.726-25.137t6.726-25.08 18.24-18.24 25.08-6.669q13.566 0 25.08 6.726 11.514 6.669 18.24 18.183t6.669 25.137z",
+  width: 100,
+  height: 100
+};
+const iconDesktop = {
+  path: "M94.208 52.119l0-43.746q0-.69-.506-1.15t-1.196-.506l-84.088 0q-.69 0-1.196.506t-.506 1.15l0 43.746q0 .69.506 1.196t1.196.506l84.088 0q.69 0 1.196-.506t.506-1.196zm6.716-43.746l0 57.224q0 3.45-2.484 5.934t-5.934 2.484l-28.566 0q0 3.128 2.53 7.774.828 1.61.828 2.622t-1.012 2.07q-1.012 1.012-2.346.966l-26.91 0q-1.38 0-2.392-1.012t-1.012-2.024q0-1.058 1.656-4.14t1.748-6.256l-28.612 0q-3.45 0-5.934-2.484t-2.484-5.934l0-57.224q0-3.45 2.484-5.934t5.934-2.438l84.088 0q3.45 0 5.98 2.438 2.438 2.484 2.438 5.934z",
+  width: 100,
+  height: 86.648
+};
+// Grabbed from https://github.com/encharm/Font-Awesome-SVG-PNG
+const iconGear = {
+  path: "M1152 896q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm512-109v222q0 12-8 23t-20 13l-185 28q-19 54-39 91 35 50 107 138 10 12 10 25t-9 23q-27 37-99 108t-94 71q-12 0-26-9l-138-108q-44 23-91 38-16 136-29 186-7 28-36 28h-222q-14 0-24.5-8.5t-11.5-21.5l-28-184q-49-16-90-37l-141 107q-10 9-25 9-14 0-25-11-126-114-165-168-7-10-7-23 0-12 8-23 15-21 51-66.5t54-70.5q-27-50-41-99l-183-27q-13-2-21-12.5t-8-23.5v-222q0-12 8-23t19-13l186-28q14-46 39-92-40-57-107-138-10-12-10-24 0-10 9-23 26-36 98.5-107.5t94.5-71.5q13 0 26 10l138 107q44-23 91-38 16-136 29-186 7-28 36-28h222q14 0 24.5 8.5t11.5 21.5l28 184q49 16 90 37l142-107q9-9 24-9 13 0 25 10 129 119 165 170 7 8 7 22 0 12-8 23-15 21-51 66.5t-54 70.5q26 50 41 98l183 28q13 2 21 12.5t8 23.5z",
+  width: 1792,
+  height: 1792
+};
+const iconMobilePhone = {
+  path: "M36.04 89.557q0-2.584-1.836-4.42t-4.42-1.836-4.352 1.836q-1.836 1.836-1.836 4.42t1.836 4.352 4.42 1.836q2.652-.068 4.42-1.836t1.768-4.352zm16.184-12.444l0-54.74q0-1.088-.748-1.768t-1.768-.68l-39.78 0q-1.088 0-1.768.748t-.68 1.7l0 54.74q0 1.02.748 1.768t1.7.68l39.78 0q1.02-.068 1.768-.748t.748-1.7zm-14.892-65.892q0-1.224-1.292-1.292l-12.444 0q-1.224.068-1.224 1.292t1.224 1.224l12.444 0q1.292 0 1.292-1.224zm22.372-1.292l0 79.628q0 3.944-2.992 6.936t-7.004 2.992l-39.78 0q-4.012 0-7.004-2.924-2.924-2.924-2.924-7.004l0-79.628q0-4.012 2.924-6.936t7.004-2.992l39.78 0q4.012-.068 7.004 2.924t2.992 7.004z",
+  width: 60.013,
+  height: 100
+};
+const iconPlus = {
+  path: "M99.758 43.09l0 13.578q0 2.852-1.984 4.836t-4.836 1.984l-29.45 0l0 29.45q0 2.852-1.984 4.836t-4.836 1.984l-13.578 0q-2.852 0-4.836-1.984t-1.984-4.836l0-29.45l-29.45 0q-2.852 0-4.836-1.984t-1.984-4.836l0-13.578q0-2.852 1.984-4.836t4.836-1.984l29.45 0l0-29.45q0-2.852 1.984-4.836t4.836-1.984l13.578 0q2.852 0 4.836 1.984t1.984 4.836l0 29.45l29.45 0q2.852 0 4.836 1.984t1.984 4.836z",
+  width: 100,
+  height: 100
+};
+const iconTablet = {
+  path: "M45.322 90.706q0-1.86-1.302-3.224-1.364-1.364-3.224-1.364t-3.224 1.364-1.302 3.224q0 1.86 1.364 3.224 1.302 1.364 3.162 1.302 1.86.062 3.224-1.302t1.302-3.224zm27.218-11.346l0-68.014q0-.93-.682-1.612t-1.55-.682l-58.962 0q-.93 0-1.612.682t-.682 1.612l0 68.014q0 .93.682 1.612t1.612.62l58.962 0q.992-.062 1.612-.682t.62-1.55zm9.114-68.014l0 77.066q0 4.65-3.348 7.998t-7.998 3.348l-58.962 0q-4.65 0-7.998-3.348t-3.348-7.998l0-77.066q0-4.65 3.348-7.998t7.998-3.348l58.962 0q4.65 0 7.998 3.348t3.348 7.998z",
+  width: 81.852,
+  height: 100
+};
+
 const {
   InlineIcon: InlineIcon$a
 } = perseus.components;
-const {
-  iconChevronDown: iconChevronDown$1,
-  iconChevronRight,
-  iconTrash: iconTrash$7
-} = perseus.icons;
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
   // doesn't exist before this component is mounted.
@@ -20843,7 +20895,7 @@ 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$a, iconChevronDown$1) : /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React__namespace.createElement(InlineIcon$a, perseus.iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React__namespace.createElement(LabeledSwitch$1, {
       label: "Static",
       checked: !!widgetInfo.static,
       onChange: this._setStatic
@@ -20854,7 +20906,7 @@ class WidgetEditor extends React__namespace.Component {
     }, supportedAlignments.map(alignment => /*#__PURE__*/React__namespace.createElement("option", {
       key: alignment
     }, alignment))), /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-      icon: iconTrash$7,
+      icon: perseus.iconTrash,
       onClick: () => {
         this.props.onRemove();
       },
@@ -21967,12 +22019,6 @@ const {
   HUD: HUD$1,
   InlineIcon: InlineIcon$9
 } = perseus.components;
-const {
-  iconCircleArrowDown: iconCircleArrowDown$1,
-  iconCircleArrowUp: iconCircleArrowUp$1,
-  iconPlus: iconPlus$4,
-  iconTrash: iconTrash$6
-} = perseus.icons;
 class ArticleEditor extends React__namespace.Component {
   static defaultProps = {
     contentPaths: [],
@@ -22067,25 +22113,25 @@ class ArticleEditor extends React__namespace.Component {
           float: "right"
         }
       }, sectionImageUploadGenerator(i), /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-        icon: iconPlus$4,
+        icon: iconPlus,
         onClick: () => {
           this._handleAddSectionAfter(i);
         },
         title: "Add a new section after this one"
       }), i + 1 < sections.length && /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-        icon: iconCircleArrowDown$1,
+        icon: iconCircleArrowDown,
         onClick: () => {
           this._handleMoveSectionLater(i);
         },
         title: "Move this section down"
       }), i > 0 && /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-        icon: iconCircleArrowUp$1,
+        icon: iconCircleArrowUp,
         onClick: () => {
           this._handleMoveSectionEarlier(i);
         },
         title: "Move this section up"
       }), /*#__PURE__*/React__namespace.createElement(SectionControlButton, {
-        icon: iconTrash$6,
+        icon: perseus.iconTrash,
         onClick: () => {
           const msg = "Are you sure you " + "want to delete section " + (i + 1) + "?";
           /* eslint-disable no-alert */
@@ -22120,7 +22166,7 @@ class ArticleEditor extends React__namespace.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$9, iconPlus), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React__namespace.createElement(HUD$1, {
@@ -22275,14 +22321,6 @@ const {
   ButtonGroup: ButtonGroup$8,
   InlineIcon: InlineIcon$8
 } = perseus.components;
-const {
-  devices
-} = perseus.constants;
-const {
-  iconDesktop,
-  iconMobilePhone,
-  iconTablet
-} = perseus.icons;
 const ViewportResizer = props => {
   const phoneButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconMobilePhone), " Phone");
   const tabletButtonContents = /*#__PURE__*/React__namespace.createElement("span", null, /*#__PURE__*/React__namespace.createElement(InlineIcon$8, iconTablet), " Tablet");
@@ -23622,12 +23660,6 @@ const {
   InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$7
 } = perseus.components;
-const {
-  iconCircleArrowDown,
-  iconCircleArrowUp,
-  iconPlus: iconPlus$3,
-  iconTrash: iconTrash$5
-} = perseus.icons;
 /* Renders a hint editor box
  *
  * This includes:
@@ -23703,7 +23735,7 @@ class HintEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, perseus.iconTrash), "Remove this hint", " ")));
   }
 }
 /* A single hint-row containing a hint editor and preview */
@@ -23915,7 +23947,7 @@ class CombinedHintsEditor extends React__namespace.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$7, iconPlus), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24780,10 +24812,6 @@ const styles$P = aphrodite.StyleSheet.create({
 const {
   InlineIcon: InlineIcon$6
 } = perseus.components;
-const {
-  iconChevronDown,
-  iconTrash: iconTrash$4
-} = perseus.icons;
 const {
   MultiRenderer
 } = perseus.MultiItems;
@@ -25244,21 +25272,21 @@ const ArrayNodeContent = props => {
       onClick: () => actions.moveArrayElementUp(subpath)
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$O.verticalFlip)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, perseus.iconChevronDown)))), i < data.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
       key: "moveArrayElementDown",
       className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Move down",
       onClick: () => actions.moveArrayElementDown(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, perseus.iconChevronDown))), /*#__PURE__*/React__namespace.createElement("div", {
       key: "removeArrayElement",
       className: aphrodite.css(styles$O.control)
     }, /*#__PURE__*/React__namespace.createElement(SimpleButton, {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, iconTrash$4)))];
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$6, perseus.iconTrash)))];
     return /*#__PURE__*/React__namespace.createElement("div", {
       key: i,
       className: aphrodite.css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
@@ -25393,14 +25421,14 @@ class MultiRendererEditor extends React__namespace.Component {
       item: item,
       shape: itemShape,
       apiOptions: apiOptions
-      // Today, with analytics being the only thing in
-      // dependencies, we send in a dummy function as we don't
-      // want to gather analytics events from within the editor.
+      // MultiRenderer is on its way out,
+      // so I think it's save to use these dummy deps
       ,
       dependencies: {
         analytics: {
           onAnalyticsEvent: async () => {}
-        }
+        },
+        useVideo: () => {}
       }
     }, _ref4 => {
       let {
@@ -26035,10 +26063,6 @@ const {
   InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$5
 } = perseus.components;
-const {
-  iconPlus: iconPlus$2,
-  iconTrash: iconTrash$3
-} = perseus.icons;
 class DropdownEditor extends React__namespace.Component {
   static propTypes = {
     choices: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
@@ -26165,14 +26189,14 @@ class DropdownEditor extends React__namespace.Component {
         this, i)
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconTrash$3)))));
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, perseus.iconTrash)))));
     }, this)), /*#__PURE__*/React__namespace.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React__namespace.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$5, iconPlus), " Add a choice", " ")));
   }
 }
 
@@ -26873,10 +26897,6 @@ const {
   InlineIcon: InlineIcon$4,
   TextInput: TextInput$5
 } = perseus.components;
-const {
-  iconPlus: iconPlus$1,
-  iconTrash: iconTrash$2
-} = perseus.icons;
 class GradedGroupEditor extends React__namespace.Component {
   static propTypes = {
     ...perseus.Changeable.propTypes,
@@ -26961,7 +26981,7 @@ class GradedGroupEditor extends React__namespace.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconPlus), " Add a hint"), this.props.hint && /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React__namespace.createElement("div", {
       className: aphrodite.css(styles$L.hintsTitle)
@@ -26983,7 +27003,7 @@ class GradedGroupEditor extends React__namespace.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$4, perseus.iconTrash), " Remove this hint")));
   }
 }
 const styles$L = aphrodite.StyleSheet.create({
@@ -27586,10 +27606,6 @@ const {
   InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = perseus.components;
-const {
-  containerSizeClass: containerSizeClass$1,
-  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass$1
-} = perseus.SizingUtils;
 const Grapher = perseus.GrapherWidget.widget;
 const {
   DEFAULT_GRAPHER_PROPS,
@@ -27639,7 +27655,7 @@ class GrapherEditor extends React__namespace.Component {
     }).value();
   };
   render() {
-    const sizeClass = containerSizeClass$1.SMALL;
+    const sizeClass = perseus.containerSizeClass.SMALL;
     let equationString;
     let graph;
     if (this.props.graph.valid === true) {
@@ -27679,7 +27695,7 @@ class GrapherEditor extends React__namespace.Component {
     }
     return /*#__PURE__*/React__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React__namespace.createElement(InfoTip$h, null, /*#__PURE__*/React__namespace.createElement("p", null, "Graph the correct answer in the graph below and ensure the equation or point coordinates displayed represent the correct answer.")), " ", ": ", equationString), /*#__PURE__*/React__namespace.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
-      box: getInteractiveBoxFromSizeClass$1(sizeClass),
+      box: perseus.getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.graph.range,
       labels: this.props.graph.labels,
       step: this.props.graph.step,
@@ -28022,7 +28038,7 @@ class ImageEditor extends React__namespace.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, perseus.icons.iconTrash))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$3, perseus.iconTrash))));
   }
   change() {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -28354,17 +28370,17 @@ class ElementContainer extends React__namespace.Component {
       href: "#",
       className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
       onClick: this.toggle
-    }, this.state.show ? /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconChevronRight), this.props.title), /*#__PURE__*/React__namespace.createElement("div", {
+    }, this.state.show ? /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.iconChevronDown) : /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconChevronRight), this.props.title), /*#__PURE__*/React__namespace.createElement("div", {
       className: "perseus-interaction-element-content " + (this.state.show ? "enter" : "leave")
     }, this.props.children, (this.props.onUp != null || this.props.onDown != null || this.props.onDelete != null) && /*#__PURE__*/React__namespace.createElement("div", {
       className: "edit-controls"
     }, this.props.onUp != null && /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.props.onUp
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.props.onDown
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React__namespace.createElement("button", {
       onClick: this.props.onDelete
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.icons.iconTrash)))));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon$2, perseus.iconTrash)))));
   }
 }
 
@@ -33578,10 +33594,6 @@ const StartCoordsSettings = props => {
 const {
   InfoTip: InfoTip$b
 } = perseus.components;
-const {
-  containerSizeClass,
-  getInteractiveBoxFromSizeClass
-} = perseus.SizingUtils;
 const InteractiveGraph = perseus.InteractiveGraphWidget.widget;
 const defaultBackgroundImage = {
   url: null
@@ -33671,7 +33683,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
     let equationString;
     const gridStep = this.props.gridStep || perseus.Util.getGridStep(this.props.range, this.props.step, perseus.interactiveSizes.defaultBoxSize);
     const snapStep = this.props.snapStep || perseus.Util.snapStepFromGridStep(gridStep);
-    const sizeClass = containerSizeClass.SMALL;
+    const sizeClass = perseus.containerSizeClass.SMALL;
     if (this.props.valid === true) {
       const correct = this.props.correct;
 
@@ -33950,7 +33962,7 @@ class InteractiveGraphEditor extends React__namespace.Component {
       step: this.props.step,
       onChange: this.changeStartCoords
     })), /*#__PURE__*/React__namespace.createElement(InteractiveGraphSettings, {
-      box: getInteractiveBoxFromSizeClass(sizeClass),
+      box: perseus.getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.range,
       labels: this.props.labels,
       step: this.props.step,
@@ -34131,6 +34143,15 @@ const styles$a = aphrodite.StyleSheet.create({
   }
 });
 
+// TODO: use WB colors
+const gray98 = "#FAFAFA";
+const gray95 = "#F0F1F2";
+const gray85 = "#D6D8DA";
+const gray76 = "#BABEC2";
+const gray68 = "#888D93";
+const gray41 = "#626569";
+const gray17 = "#21242C";
+
 class FormWrappedTextField extends React__namespace.Component {
   state = {
     focused: false
@@ -34229,10 +34250,13 @@ const styles$9 = aphrodite.StyleSheet.create({
   inputBase: {
     background: "inherit",
     border: "none",
-    ...perseus.globalStyles.typography.bodyXsmall,
+    // TODO: can we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 15,
+    lineHeight: "22px",
     outline: "none",
     "::placeholder": {
-      color: perseus.globalStyles.colors.gray41
+      color: gray41
     },
     width: "100%",
     color: "inherit",
@@ -34251,7 +34275,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     border: "none",
     outline: "none",
     "::placeholder": {
-      color: perseus.globalStyles.colors.gray41
+      color: gray41
     },
     width: "100%",
     fontWeight: "normal",
@@ -34261,7 +34285,7 @@ const styles$9 = aphrodite.StyleSheet.create({
   },
   input: {
     height: 40,
-    borderRadius: perseus.globalStyles.borderRadius,
+    borderRadius: 4,
     boxSizing: "border-box",
     padding: "8px 10px"
   },
@@ -34271,7 +34295,7 @@ const styles$9 = aphrodite.StyleSheet.create({
     marginBottom: 0
   },
   defaultBackground: {
-    backgroundColor: perseus.globalStyles.colors.white
+    backgroundColor: wonderBlocksTokens.color.white
   },
   icon: {
     display: "flex",
@@ -34392,10 +34416,6 @@ const styles$8 = aphrodite.StyleSheet.create({
 /**
  * Controlled list of answer choices, handles adding and removing answers.
  */
-const {
-  colors: colors$6,
-  typography: typography$3
-} = perseus.globalStyles;
 const {
   Icon: Icon$1
 } = perseus.components;
@@ -34440,7 +34460,7 @@ const DraggableGripIcon = () => /*#__PURE__*/React__namespace.createElement("svg
   values: "0 0 0 0 0.129411765 0 0 0 0 0.141176471 0 0 0 0 0.17254902 0 0 0 0.2 0"
 })), /*#__PURE__*/React__namespace.createElement("path", {
   d: "M1 4a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1zm0 10a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H1zm0-5a1 1 0 1 1 0-2h14a1 1 0 0 1 0 2H1z",
-  fill: colors$6.gray17,
+  fill: gray17,
   filter: "url(#draggable-grip-shadow)"
 }));
 
@@ -34527,9 +34547,9 @@ const AnswerChoices = _ref3 => {
 };
 const styles$7 = aphrodite.StyleSheet.create({
   title: {
-    ...typography$3.bodyXsmallBold,
+    ...perseus.bodyXsmallBold,
     marginBottom: 6,
-    color: colors$6.gray17
+    color: gray17
   },
   answers: {
     marginTop: 12,
@@ -34544,7 +34564,7 @@ const styles$7 = aphrodite.StyleSheet.create({
     }
   },
   addAnswer: {
-    ...typography$3.bodyXsmallBold,
+    ...perseus.bodyXsmallBold,
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -34708,10 +34728,8 @@ class HoverBehavior extends React__namespace.Component {
   }
 }
 
-const {
-  borderRadius: borderRadius$1,
-  colors: colors$5
-} = perseus.globalStyles;
+const borderRadius = 4;
+
 // NOTE(jangmi): Checkbox may have `onChange` depends on circumstances but lack
 // of onChange causes Dev only alert so we provide the no op func as default
 // to prevent that.
@@ -34732,7 +34750,7 @@ class Checkbox extends React__namespace.Component {
       dataTestId,
       id
     } = this.props;
-    const checkedColor = colors$5.gray41;
+    const checkedColor = gray41;
     return /*#__PURE__*/React__namespace.createElement(HoverBehavior, null, (_ref, handlers) => {
       let {
         focused
@@ -34758,14 +34776,14 @@ class Checkbox extends React__namespace.Component {
         height: size,
         x: "0",
         y: "0",
-        rx: borderRadius$1
+        rx: borderRadius
       }), /*#__PURE__*/React__namespace.createElement("path", {
-        fill: colors$5.white,
-        stroke: colors$5.white,
+        fill: wonderBlocksTokens.color.white,
+        stroke: wonderBlocksTokens.color.white,
         d: "M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47 10.53c0.23.23.59.23.81 0l4.55-4.55a0.58.58 0 0 0-0.81-0.81L6.88 9.31 4.98 7.41z"
       })), !checked && /*#__PURE__*/React__namespace.createElement("rect", {
-        fill: colors$5.white,
-        stroke: colors$5.gray68,
+        fill: wonderBlocksTokens.color.white,
+        stroke: gray68,
         width: size - 2 * padding,
         height: size - 2 * padding,
         x: padding,
@@ -34796,7 +34814,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     display: "inline-block",
     verticalAlign: "middle",
     lineHeight: 0,
-    borderRadius: borderRadius$1,
+    borderRadius: borderRadius,
     width: sizeWithPadding,
     height: sizeWithPadding,
     flexShrink: 0
@@ -34809,7 +34827,7 @@ const styles$6 = aphrodite.StyleSheet.create({
       right: -2,
       bottom: -2,
       left: -2,
-      borderRadius: borderRadius$1 + 2,
+      borderRadius: borderRadius + 2,
       backgroundColor: "lightblue" // TODO(kevinb) get real focus ring
     }
   },
@@ -34841,10 +34859,6 @@ const styles$6 = aphrodite.StyleSheet.create({
 /**
  * Controlled component to display and change widget options.
  */
-const {
-  colors: colors$4,
-  typography: typography$2
-} = perseus.globalStyles;
 const Behavior = _ref => {
   let {
     multipleAnswers,
@@ -34897,18 +34911,21 @@ const Behavior = _ref => {
 };
 const styles$5 = aphrodite.StyleSheet.create({
   title: {
-    ...typography$2.bodyXsmallBold,
+    ...perseus.bodyXsmallBold,
     marginBottom: 6,
-    color: colors$4.gray17
+    color: gray17
   },
   option: {
     display: "flex",
     padding: "6px 0"
   },
   label: {
-    ...typography$2.smallSubheadingMobile,
+    // TODO: could we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 15,
+    lineHeight: 1.25,
     marginLeft: 16,
-    color: colors$4.gray17
+    color: gray17
   }
 });
 
@@ -34916,9 +34933,6 @@ const styles$5 = aphrodite.StyleSheet.create({
 const {
   Icon
 } = perseus.components;
-const {
-  colors: colors$3
-} = perseus.globalStyles;
 const findAndFocusElement = component => {
   const DOMNode = ReactDOM__default["default"].findDOMNode(component);
   const button = DOMNode;
@@ -35064,18 +35078,18 @@ const styles$4 = aphrodite.StyleSheet.create({
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
-    color: colors$3.gray17,
+    color: gray17,
     userSelect: "none",
     ":hover": {
-      backgroundColor: colors$3.gray95
+      backgroundColor: gray95
     }
   },
   optionSelected: {
-    backgroundColor: colors$3.gray95,
+    backgroundColor: gray95,
     color: "#11ACCD"
   },
   optionDisabled: {
-    color: colors$3.gray76,
+    color: gray76,
     ":hover": {
       backgroundColor: "transparent"
     }
@@ -35104,10 +35118,6 @@ const styles$4 = aphrodite.StyleSheet.create({
 });
 
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-const {
-  colors: colors$2,
-  borderRadius
-} = perseus.globalStyles;
 class Marker extends React__namespace.Component {
   _marker;
   constructor(props) {
@@ -35295,7 +35305,7 @@ const styles$3 = aphrodite.StyleSheet.create({
       height: 0,
       left: -16,
       bottom: 8,
-      borderRight: `solid 16px ${colors$2.gray98}`,
+      borderRight: `solid 16px ${gray98}`,
       borderTop: "solid 16px transparent",
       borderBottom: "solid 16px transparent"
     }
@@ -35306,7 +35316,7 @@ const styles$3 = aphrodite.StyleSheet.create({
   dividerHorizontal: {
     height: 0,
     margin: 0,
-    border: `solid ${colors$2.gray85}`,
+    border: `solid ${gray85}`,
     borderWidth: "0 0 1px",
     boxShadow: "none"
   },
@@ -35315,19 +35325,15 @@ const styles$3 = aphrodite.StyleSheet.create({
   dropdownBody: {
     position: "absolute",
     border: "solid 1px rgba(0, 0, 0, 0.1)",
-    zIndex: perseus.globalConstants.zindexDropdown,
-    color: colors$2.gray17,
-    backgroundColor: colors$2.gray98,
-    borderRadius: borderRadius,
+    zIndex: 1000,
+    color: gray17,
+    backgroundColor: gray98,
+    borderRadius: 4,
     maxHeight: 320,
     cursor: "pointer"
   }
 });
 
-const {
-  colors: colors$1,
-  typography: typography$1
-} = perseus.globalStyles;
 class QuestionMarkers extends React__namespace.Component {
   _markers = [];
   openDropdownForMarkerIndices(indices) {
@@ -35403,14 +35409,17 @@ class QuestionMarkers extends React__namespace.Component {
 }
 const styles$2 = aphrodite.StyleSheet.create({
   title: {
-    ...typography$1.bodyXsmallBold,
+    ...perseus.bodyXsmallBold,
     marginBottom: 6,
-    color: colors$1.gray17
+    color: gray17
   },
   subtitle: {
-    ...typography$1.labelSmall,
+    // TODO: can we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 12,
+    lineHeight: "14px",
     marginBottom: 12,
-    color: colors$1.gray68
+    color: gray68
   },
   markersCanvas: {
     position: "relative",
@@ -35429,10 +35438,6 @@ const styles$2 = aphrodite.StyleSheet.create({
 /**
  * Controlled component for selecting the question image, for answer labeling.
  */
-const {
-  colors,
-  typography
-} = perseus.globalStyles;
 const SelectImage = _ref => {
   let {
     onChange,
@@ -35466,9 +35471,9 @@ const SelectImage = _ref => {
 };
 const styles$1 = aphrodite.StyleSheet.create({
   title: {
-    ...typography.bodyXsmallBold,
+    ...perseus.bodyXsmallBold,
     marginBottom: 6,
-    color: colors.gray17
+    color: gray17
   },
   components: {
     display: "flex"
@@ -36405,10 +36410,6 @@ const {
   NumberInput: NumberInput$4,
   TextInput: TextInput$2
 } = perseus.components;
-const {
-  iconGear,
-  iconTrash: iconTrash$1
-} = perseus.icons;
 const {
   firstNumericalParse
 } = perseus.Util;
@@ -36765,7 +36766,7 @@ class NumericInputEditor extends React__namespace.Component {
           this.onTrashAnswer(i);
         },
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
-      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, iconTrash$1)), /*#__PURE__*/React__namespace.createElement("a", {
+      }, /*#__PURE__*/React__namespace.createElement(InlineIcon$1, perseus.iconTrash)), /*#__PURE__*/React__namespace.createElement("a", {
         href: "#",
         className: "options-toggle",
         "aria-label": "Toggle options",
@@ -37489,10 +37490,6 @@ class PythonProgramEditor extends React__namespace.Component {
 const {
   InlineIcon
 } = perseus.components;
-const {
-  iconPlus,
-  iconTrash
-} = perseus.icons;
 class ChoiceEditor extends React__namespace.Component {
   static propTypes = {
     apiOptions: perseus.ApiOptions.propTypes,
@@ -37538,7 +37535,7 @@ class ChoiceEditor extends React__namespace.Component {
         this.props.onDelete();
       },
       title: "Remove this choice"
-    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, iconTrash));
+    }, /*#__PURE__*/React__namespace.createElement(InlineIcon, perseus.iconTrash));
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "choice-clue-editors"
     }, /*#__PURE__*/React__namespace.createElement("div", {