@khanacademy/perseus 20.4.1 → 20.5.0

package/dist/es/index.js

@@ -32,6 +32,7 @@ import caretDown from '@phosphor-icons/core/assets/regular/caret-down.svg';
 import caretUp from '@phosphor-icons/core/assets/regular/caret-up.svg';
 import debounce$2 from 'lodash.debounce';
 import { Point as Point$2, vec, useTransformContext, useMovable, Vector, Coordinates, Mafs } from 'mafs';
+import { color } from '@khanacademy/wonder-blocks-tokens';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import questionIcon from '@phosphor-icons/core/regular/question.svg';
 import { LabelSmall, LabelMedium } from '@khanacademy/wonder-blocks-typography';
@@ -28125,6 +28126,17 @@ Graph.defaultProps = {
   isMobile: false
 };
 
+/**
+ * Takes a style object with color names and converts them to actual
+ * Wonder Blocks color values. This way, we can use colors and their
+ * names in the editor UI without having to convert them back and forth.
+ */
+function convertStyle(style) {
+  return _extends({}, style, {
+    stroke: color[(style == null ? void 0 : style.stroke) || "blue"],
+    fill: color[(style == null ? void 0 : style.fill) || "blue"]
+  });
+}
 const GraphLockedLayer = props => {
   const {
     lockedFigures
@@ -28138,7 +28150,7 @@ const GraphLockedLayer = props => {
           x: x,
           y: y,
           svgCircleProps: {
-            style: figure.style
+            style: convertStyle(figure.style)
           }
         });
     }
@@ -41481,7 +41493,7 @@ const init = function init(options) {
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/perseus";
-const libVersion = "20.4.1";
+const libVersion = "20.5.0";
 addLibraryVersionToPerseusDebug(libName, libVersion);
 
 const apiVersion = {