@khanacademy/perseus-editor 14.9.1 → 14.10.1

package/dist/es/index.js

@@ -1,5 +1,5 @@
 import { addLibraryVersionToPerseusDebug, PerseusError, Errors } from '@khanacademy/perseus-core';
-import { constants, components, Widgets, icons, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, SizingUtils, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, getClockwiseAngle, InteractiveGraphWidget, globalStyles, globalConstants, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
+import { components, Widgets, iconChevronDown, iconTrash, WIDGET_PROP_DENYLIST, Util, Log, PerseusMarkdown, preprocessTex, ApiOptions, buildMapper, itemToTree, buildEmptyItemTreeForShape, shapes, ItemExtras, itemDataVersion, ClassNames, MultiItems, traverse, Categorizer as Categorizer$1, Changeable, EditorJsonify, Dependencies, PerseusExpressionAnswerFormConsidered, Expression, interactiveSizes, KhanMath, GrapherWidget, GrapherUtil, containerSizeClass, getInteractiveBoxFromSizeClass, PerseusI18nContext, KhanColors, lockedFigureColors, lockedFigureFillStyles, getAngleCoords, getPolygonCoords, getPointCoords, getQuadraticCoords, getSinusoidCoords, getCircleCoords, getLinearSystemCoords, getSegmentCoords, getLineCoords, getClockwiseAngle, InteractiveGraphWidget, bodyXsmallBold, MatrixWidget, makeSafeUrl, PlotterWidget, plotterPlotTypes, BaseRadio, TableWidget, widgets } from '@khanacademy/perseus';
 export { widgets } from '@khanacademy/perseus';
 import * as React from 'react';
 import { useRef, useEffect, useState, useId } from 'react';
@@ -46,7 +46,7 @@ import arrowCounterClockwise from '@phosphor-icons/core/bold/arrow-counter-clock
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus-editor";
-const libVersion = "14.9.1";
+const libVersion = "14.10.1";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -59,6 +59,21 @@ function _extends() {
   }, _extends.apply(null, 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;
+
 const SCREEN_SIZES = {
   phone: {
     width: 320,
@@ -105,7 +120,7 @@ const DeviceFramer = ({
       key: "screen",
       style: {
         overflow: "scroll",
-        width: SCREEN_SIZES[_deviceType].framedWidth + 2 * constants.perseusFrameBorderWidth + constants.lintGutterWidth
+        width: SCREEN_SIZES[_deviceType].framedWidth + 2 * perseusFrameBorderWidth + lintGutterWidth
       }
     }, /*#__PURE__*/React.createElement("div", null, children));
   }
@@ -20676,15 +20691,52 @@ 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 _excluded$4 = ["label"];
 const {
   InlineIcon: InlineIcon$a
 } = components;
-const {
-  iconChevronDown: iconChevronDown$1,
-  iconChevronRight,
-  iconTrash: iconTrash$7
-} = icons;
 const _upgradeWidgetInfo = props => {
   // We can't call serialize here because this.refs.widget
   // doesn't exist before this component is mounted.
@@ -20791,7 +20843,7 @@ class WidgetEditor extends React.Component {
       className: "perseus-widget-editor-title-id",
       href: "#",
       onClick: this._toggleWidget
-    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronDown$1) : /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement(LabeledSwitch$1, {
+    }, this.props.id, this.state.showWidget ? /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronDown) : /*#__PURE__*/React.createElement(InlineIcon$a, iconChevronRight)), supportsStaticMode && /*#__PURE__*/React.createElement(LabeledSwitch$1, {
       label: "Static",
       checked: !!widgetInfo.static,
       onChange: this._setStatic
@@ -20802,7 +20854,7 @@ class WidgetEditor extends React.Component {
     }, supportedAlignments.map(alignment => /*#__PURE__*/React.createElement("option", {
       key: alignment
     }, alignment))), /*#__PURE__*/React.createElement(SectionControlButton, {
-      icon: iconTrash$7,
+      icon: iconTrash,
       onClick: () => {
         this.props.onRemove();
       },
@@ -21925,12 +21977,6 @@ const {
   HUD: HUD$1,
   InlineIcon: InlineIcon$9
 } = components;
-const {
-  iconCircleArrowDown: iconCircleArrowDown$1,
-  iconCircleArrowUp: iconCircleArrowUp$1,
-  iconPlus: iconPlus$4,
-  iconTrash: iconTrash$6
-} = icons;
 class ArticleEditor extends React.Component {
   constructor(...args) {
     super(...args);
@@ -22029,25 +22075,25 @@ class ArticleEditor extends React.Component {
           float: "right"
         }
       }, sectionImageUploadGenerator(i), /*#__PURE__*/React.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.createElement(SectionControlButton, {
-        icon: iconCircleArrowDown$1,
+        icon: iconCircleArrowDown,
         onClick: () => {
           this._handleMoveSectionLater(i);
         },
         title: "Move this section down"
       }), i > 0 && /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconCircleArrowUp$1,
+        icon: iconCircleArrowUp,
         onClick: () => {
           this._handleMoveSectionEarlier(i);
         },
         title: "Move this section up"
       }), /*#__PURE__*/React.createElement(SectionControlButton, {
-        icon: iconTrash$6,
+        icon: iconTrash,
         onClick: () => {
           const msg = "Are you sure you " + "want to delete section " + (i + 1) + "?";
           /* eslint-disable no-alert */
@@ -22082,7 +22128,7 @@ class ArticleEditor extends React.Component {
       onClick: () => {
         this._handleAddSectionAfter(this._sections().length - 1);
       }
-    }, /*#__PURE__*/React.createElement(InlineIcon$9, iconPlus$4), " Add a section")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$9, iconPlus), " Add a section")));
   }
   _renderLinterHUD() {
     return /*#__PURE__*/React.createElement(HUD$1, {
@@ -22232,14 +22278,6 @@ const {
   ButtonGroup: ButtonGroup$8,
   InlineIcon: InlineIcon$8
 } = components;
-const {
-  devices
-} = constants;
-const {
-  iconDesktop,
-  iconMobilePhone,
-  iconTablet
-} = icons;
 const ViewportResizer = props => {
   const phoneButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconMobilePhone), " Phone");
   const tabletButtonContents = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(InlineIcon$8, iconTablet), " Tablet");
@@ -23593,12 +23631,6 @@ const {
   InfoTip: InfoTip$n,
   InlineIcon: InlineIcon$7
 } = components;
-const {
-  iconCircleArrowDown,
-  iconCircleArrowUp,
-  iconPlus: iconPlus$3,
-  iconTrash: iconTrash$5
-} = icons;
 /* Renders a hint editor box
  *
  * This includes:
@@ -23672,7 +23704,7 @@ class HintEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.props.onRemove
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash$5), "Remove this hint", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconTrash), "Remove this hint", " ")));
   }
 }
 HintEditor.defaultProps = {
@@ -23896,7 +23928,7 @@ class CombinedHintsEditor extends React.Component {
       type: "button",
       className: "add-hint simple-button orange",
       onClick: this.addHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconPlus$3), " Add a hint"))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$7, iconPlus), " Add a hint"))));
     /* eslint-enable max-len */
   }
 }
@@ -24779,10 +24811,6 @@ const _excluded$2 = ["depth"],
 const {
   InlineIcon: InlineIcon$6
 } = components;
-const {
-  iconChevronDown,
-  iconTrash: iconTrash$4
-} = icons;
 const {
   MultiRenderer
 } = MultiItems;
@@ -25261,7 +25289,7 @@ const ArrayNodeContent = props => {
       color: "orange",
       title: "Delete",
       onClick: () => actions.removeArrayElement(subpath)
-    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash$4)))];
+    }, /*#__PURE__*/React.createElement(InlineIcon$6, iconTrash)))];
     return /*#__PURE__*/React.createElement("div", {
       key: i,
       className: css(styles$O.arrayElement, !elementIsLeaf && styles$O.arrayElementAndNotLeaf)
@@ -25395,14 +25423,14 @@ class MultiRendererEditor extends React.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 function () {}
-          }
+          },
+          useVideo: () => {}
         }
       }, ({
         renderers
@@ -26013,10 +26041,6 @@ const {
   InfoTip: InfoTip$k,
   InlineIcon: InlineIcon$5
 } = components;
-const {
-  iconPlus: iconPlus$2,
-  iconTrash: iconTrash$3
-} = icons;
 class DropdownEditor extends React.Component {
   constructor(...args) {
     super(...args);
@@ -26131,14 +26155,14 @@ class DropdownEditor extends React.Component {
         this, i)
       }, /*#__PURE__*/React.createElement("span", {
         className: "remove-choice"
-      }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash$3)))));
+      }, /*#__PURE__*/React.createElement(InlineIcon$5, iconTrash)))));
     }, this)), /*#__PURE__*/React.createElement("div", {
       className: "add-choice-container"
     }, /*#__PURE__*/React.createElement("a", {
       href: "#",
       className: "simple-button orange",
       onClick: this.addChoice
-    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus$2), " Add a choice", " ")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$5, iconPlus), " Add a choice", " ")));
   }
 }
 DropdownEditor.propTypes = {
@@ -26840,10 +26864,6 @@ const {
   InlineIcon: InlineIcon$4,
   TextInput: TextInput$5
 } = components;
-const {
-  iconPlus: iconPlus$1,
-  iconTrash: iconTrash$2
-} = icons;
 class GradedGroupEditor extends React.Component {
   constructor(..._args) {
     super(..._args);
@@ -26912,7 +26932,7 @@ class GradedGroupEditor extends React.Component {
       },
       className: "add-hint simple-button orange",
       onClick: this.handleAddHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus$1), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconPlus), " Add a hint"), this.props.hint && /*#__PURE__*/React.createElement("div", {
       className: "perseus-hint-editor"
     }, /*#__PURE__*/React.createElement("div", {
       className: css(styles$L.hintsTitle)
@@ -26934,7 +26954,7 @@ class GradedGroupEditor extends React.Component {
       type: "button",
       className: "remove-hint simple-button orange",
       onClick: this.handleRemoveHint
-    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash$2), " Remove this hint")));
+    }, /*#__PURE__*/React.createElement(InlineIcon$4, iconTrash), " Remove this hint")));
   }
 }
 GradedGroupEditor.propTypes = _extends({}, Changeable.propTypes, {
@@ -27538,10 +27558,6 @@ const {
   InfoTip: InfoTip$h,
   MultiButtonGroup: MultiButtonGroup$1
 } = components;
-const {
-  containerSizeClass: containerSizeClass$1,
-  getInteractiveBoxFromSizeClass: getInteractiveBoxFromSizeClass$1
-} = SizingUtils;
 const Grapher = GrapherWidget.widget;
 const {
   DEFAULT_GRAPHER_PROPS,
@@ -27579,7 +27595,7 @@ class GrapherEditor extends React.Component {
     };
   }
   render() {
-    const sizeClass = containerSizeClass$1.SMALL;
+    const sizeClass = containerSizeClass.SMALL;
     let equationString;
     let graph;
     if (this.props.graph.valid === true) {
@@ -27620,7 +27636,7 @@ class GrapherEditor extends React.Component {
     }
     return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, "Correct answer", " ", /*#__PURE__*/React.createElement(InfoTip$h, null, /*#__PURE__*/React.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.createElement(GraphSettings, {
       editableSettings: ["graph", "snap", "image"],
-      box: getInteractiveBoxFromSizeClass$1(sizeClass),
+      box: getInteractiveBoxFromSizeClass(sizeClass),
       range: this.props.graph.range,
       labels: this.props.graph.labels,
       step: this.props.graph.step,
@@ -27945,7 +27961,7 @@ class ImageEditor extends React.Component {
       // eslint-disable-next-line react/jsx-no-bind
       ,
       onClick: this.removeLabel.bind(this, i)
-    }, /*#__PURE__*/React.createElement(InlineIcon$3, icons.iconTrash))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$3, iconTrash))));
   }
   change(...args) {
     return Changeable.change.apply(this, args);
@@ -28285,17 +28301,17 @@ class ElementContainer extends React.Component {
       href: "#",
       className: "perseus-interaction-element-title " + (this.state.show ? "open" : "closed"),
       onClick: this.toggle
-    }, this.state.show ? /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconChevronDown) : /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconChevronRight), this.props.title), /*#__PURE__*/React.createElement("div", {
+    }, this.state.show ? /*#__PURE__*/React.createElement(InlineIcon$2, iconChevronDown) : /*#__PURE__*/React.createElement(InlineIcon$2, iconChevronRight), this.props.title), /*#__PURE__*/React.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.createElement("div", {
       className: "edit-controls"
     }, this.props.onUp != null && /*#__PURE__*/React.createElement("button", {
       onClick: this.props.onUp
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconCircleArrowUp)), this.props.onDown != null && /*#__PURE__*/React.createElement("button", {
       onClick: this.props.onDown
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconCircleArrowDown)), this.props.onDelete != null && /*#__PURE__*/React.createElement("button", {
       onClick: this.props.onDelete
-    }, /*#__PURE__*/React.createElement(InlineIcon$2, icons.iconTrash)))));
+    }, /*#__PURE__*/React.createElement(InlineIcon$2, iconTrash)))));
   }
 }
 ElementContainer.defaultProps = {
@@ -33407,10 +33423,6 @@ const StartCoordsSettings = props => {
 const {
   InfoTip: InfoTip$b
 } = components;
-const {
-  containerSizeClass,
-  getInteractiveBoxFromSizeClass
-} = SizingUtils;
 const InteractiveGraph = InteractiveGraphWidget.widget;
 const defaultBackgroundImage = {
   url: null
@@ -33908,6 +33920,15 @@ const styles$a = 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";
+
 const _excluded$1 = ["forwardedRef", "width", "grow", "shrink", "icon", "backgroundColor", "focusBorderColor", "borderColor", "color", "onSubmit", "leftSideIcon", "id", "testId", "type", "labelMediumInputText"];
 class FormWrappedTextField extends React.Component {
   constructor(...args) {
@@ -34008,13 +34029,16 @@ class FormWrappedTextField extends React.Component {
   }
 }
 const styles$9 = StyleSheet.create({
-  inputBase: _extends({
+  inputBase: {
     background: "inherit",
-    border: "none"
-  }, globalStyles.typography.bodyXsmall, {
+    border: "none",
+    // TODO: can we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 15,
+    lineHeight: "22px",
     outline: "none",
     "::placeholder": {
-      color: globalStyles.colors.gray41
+      color: gray41
     },
     width: "100%",
     color: "inherit",
@@ -34024,7 +34048,7 @@ const styles$9 = StyleSheet.create({
     padding: 0,
     // override Chrome's stylesheet
     margin: 0 // override Safari's stylesheet
-  }),
+  },
 
   // HACK(mattmorgan) to enforce WB LabelMedium-like styles on this older
   // component.
@@ -34033,7 +34057,7 @@ const styles$9 = StyleSheet.create({
     border: "none",
     outline: "none",
     "::placeholder": {
-      color: globalStyles.colors.gray41
+      color: gray41
     },
     width: "100%",
     fontWeight: "normal",
@@ -34043,7 +34067,7 @@ const styles$9 = StyleSheet.create({
   },
   input: {
     height: 40,
-    borderRadius: globalStyles.borderRadius,
+    borderRadius: 4,
     boxSizing: "border-box",
     padding: "8px 10px"
   },
@@ -34053,7 +34077,7 @@ const styles$9 = StyleSheet.create({
     marginBottom: 0
   },
   defaultBackground: {
-    backgroundColor: globalStyles.colors.white
+    backgroundColor: color.white
   },
   icon: {
     display: "flex",
@@ -34166,10 +34190,6 @@ const styles$8 = StyleSheet.create({
   }
 });
 
-const {
-  colors: colors$6,
-  typography: typography$3
-} = globalStyles;
 const {
   Icon: Icon$1
 } = components;
@@ -34214,7 +34234,7 @@ const DraggableGripIcon = () => /*#__PURE__*/React.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.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)"
 }));
 
@@ -34291,9 +34311,9 @@ const AnswerChoices = ({
   onClick: () => onChange([...choices, ""])
 }));
 const styles$7 = StyleSheet.create({
-  title: _extends({}, typography$3.bodyXsmallBold, {
+  title: _extends({}, bodyXsmallBold, {
     marginBottom: 6,
-    color: colors$6.gray17
+    color: gray17
   }),
   answers: {
     marginTop: 12,
@@ -34307,7 +34327,7 @@ const styles$7 = StyleSheet.create({
       marginTop: 12
     }
   },
-  addAnswer: _extends({}, typography$3.bodyXsmallBold, {
+  addAnswer: _extends({}, bodyXsmallBold, {
     display: "flex",
     flexDirection: "row",
     alignItems: "center",
@@ -34471,10 +34491,8 @@ HoverBehavior.defaultProps = {
   shouldUpdate: () => true
 };
 
-const {
-  borderRadius: borderRadius$1,
-  colors: colors$5
-} = 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.
@@ -34491,7 +34509,7 @@ class Checkbox extends React.Component {
       dataTestId,
       id
     } = this.props;
-    const checkedColor = colors$5.gray41;
+    const checkedColor = gray41;
     return /*#__PURE__*/React.createElement(HoverBehavior, null, ({
       focused
     }, handlers) => /*#__PURE__*/React.createElement("div", _extends({}, handlers, {
@@ -34515,14 +34533,14 @@ class Checkbox extends React.Component {
       height: size,
       x: "0",
       y: "0",
-      rx: borderRadius$1
+      rx: borderRadius
     }), /*#__PURE__*/React.createElement("path", {
-      fill: colors$5.white,
-      stroke: colors$5.white,
+      fill: color.white,
+      stroke: 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.createElement("rect", {
-      fill: colors$5.white,
-      stroke: colors$5.gray68,
+      fill: color.white,
+      stroke: gray68,
       width: size - 2 * padding,
       height: size - 2 * padding,
       x: padding,
@@ -34556,7 +34574,7 @@ const styles$6 = StyleSheet.create({
     display: "inline-block",
     verticalAlign: "middle",
     lineHeight: 0,
-    borderRadius: borderRadius$1,
+    borderRadius: borderRadius,
     width: sizeWithPadding,
     height: sizeWithPadding,
     flexShrink: 0
@@ -34569,7 +34587,7 @@ const styles$6 = StyleSheet.create({
       right: -2,
       bottom: -2,
       left: -2,
-      borderRadius: borderRadius$1 + 2,
+      borderRadius: borderRadius + 2,
       backgroundColor: "lightblue" // TODO(kevinb) get real focus ring
     }
   },
@@ -34598,10 +34616,6 @@ const styles$6 = StyleSheet.create({
   }
 });
 
-const {
-  colors: colors$4,
-  typography: typography$2
-} = globalStyles;
 const Behavior = ({
   multipleAnswers,
   hideChoicesFromInstructions,
@@ -34650,26 +34664,27 @@ const Behavior = ({
   value: "RIGHT"
 }, " Right ")))));
 const styles$5 = StyleSheet.create({
-  title: _extends({}, typography$2.bodyXsmallBold, {
+  title: _extends({}, bodyXsmallBold, {
     marginBottom: 6,
-    color: colors$4.gray17
+    color: gray17
   }),
   option: {
     display: "flex",
     padding: "6px 0"
   },
-  label: _extends({}, typography$2.smallSubheadingMobile, {
+  label: {
+    // TODO: could we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 15,
+    lineHeight: 1.25,
     marginLeft: 16,
-    color: colors$4.gray17
-  })
+    color: gray17
+  }
 });
 
 const {
   Icon
 } = components;
-const {
-  colors: colors$3
-} = globalStyles;
 const findAndFocusElement = component => {
   const DOMNode = ReactDOM.findDOMNode(component);
   const button = DOMNode;
@@ -34819,18 +34834,18 @@ const styles$4 = 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"
     }
@@ -34858,10 +34873,6 @@ const styles$4 = StyleSheet.create({
   }
 });
 
-const {
-  colors: colors$2,
-  borderRadius
-} = globalStyles;
 class Marker extends React.Component {
   constructor(props) {
     super(props);
@@ -35047,7 +35058,7 @@ const styles$3 = 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"
     }
@@ -35058,7 +35069,7 @@ const styles$3 = StyleSheet.create({
   dividerHorizontal: {
     height: 0,
     margin: 0,
-    border: `solid ${colors$2.gray85}`,
+    border: `solid ${gray85}`,
     borderWidth: "0 0 1px",
     boxShadow: "none"
   },
@@ -35067,19 +35078,15 @@ const styles$3 = StyleSheet.create({
   dropdownBody: {
     position: "absolute",
     border: "solid 1px rgba(0, 0, 0, 0.1)",
-    zIndex: 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
-} = globalStyles;
 class QuestionMarkers extends React.Component {
   constructor(...args) {
     super(...args);
@@ -35158,14 +35165,18 @@ class QuestionMarkers extends React.Component {
   }
 }
 const styles$2 = StyleSheet.create({
-  title: _extends({}, typography$1.bodyXsmallBold, {
+  title: _extends({}, bodyXsmallBold, {
     marginBottom: 6,
-    color: colors$1.gray17
+    color: gray17
   }),
-  subtitle: _extends({}, typography$1.labelSmall, {
+  subtitle: {
+    // TODO: can we use WB typography?
+    fontFamily: "inherit",
+    fontSize: 12,
+    lineHeight: "14px",
     marginBottom: 12,
-    color: colors$1.gray68
-  }),
+    color: gray68
+  },
   markersCanvas: {
     position: "relative",
     border: "solid 1px rgba(33, 36, 44, 0.16)"
@@ -35180,10 +35191,6 @@ const styles$2 = StyleSheet.create({
   }
 });
 
-const {
-  colors,
-  typography
-} = globalStyles;
 const SelectImage = ({
   onChange,
   url
@@ -35213,9 +35220,9 @@ const SelectImage = ({
   style: styles$1.btn
 }, url ? "Remove" : "Upload")));
 const styles$1 = StyleSheet.create({
-  title: _extends({}, typography.bodyXsmallBold, {
+  title: _extends({}, bodyXsmallBold, {
     marginBottom: 6,
-    color: colors.gray17
+    color: gray17
   }),
   components: {
     display: "flex"
@@ -36148,10 +36155,6 @@ const {
   NumberInput: NumberInput$4,
   TextInput: TextInput$2
 } = components;
-const {
-  iconGear,
-  iconTrash: iconTrash$1
-} = icons;
 const {
   firstNumericalParse
 } = Util;
@@ -36486,7 +36489,7 @@ class NumericInputEditor extends React.Component {
           this.onTrashAnswer(i);
         },
         onKeyDown: e => this.onSpace(e, this.onTrashAnswer)
-      }, /*#__PURE__*/React.createElement(InlineIcon$1, iconTrash$1)), /*#__PURE__*/React.createElement("a", {
+      }, /*#__PURE__*/React.createElement(InlineIcon$1, iconTrash)), /*#__PURE__*/React.createElement("a", {
         href: "#",
         className: "options-toggle",
         "aria-label": "Toggle options",
@@ -37208,10 +37211,6 @@ PythonProgramEditor.defaultProps = {
 const {
   InlineIcon
 } = components;
-const {
-  iconPlus,
-  iconTrash
-} = icons;
 class ChoiceEditor extends React.Component {
   render() {
     const checkedClass = this.props.choice.correct ? "correct" : "incorrect";