@khanacademy/math-input 17.4.0 → 17.4.1

package/dist/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var perseusCore = require('@khanacademy/perseus-core');
-var Color = require('@khanacademy/wonder-blocks-color');
 var i18n = require('@khanacademy/wonder-blocks-i18n');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 var wonderStuffCore = require('@khanacademy/wonder-stuff-core');
 var aphrodite = require('aphrodite');
 var React = require('react');
@@ -37,7 +37,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var i18n__namespace = /*#__PURE__*/_interopNamespace(i18n);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
@@ -47,7 +46,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 // This file is processed by a Rollup plugin (replace) to inject the production
 const libName = "@khanacademy/math-input";
-const libVersion = "17.4.0";
+const libVersion = "17.4.1";
 perseusCore.addLibraryVersionToPerseusDebug(libName, libVersion);
 
 function _extends() {
@@ -2233,7 +2232,7 @@ class MathInput extends React__namespace.Component {
       ...inlineStyles.innerContainer,
       borderWidth: this.getBorderWidthPx(),
       ...(showInputFocusStyle ? {
-        borderColor: Color__default["default"].blue
+        borderColor: wonderBlocksTokens.color.blue
       } : {}),
       ...style
     };
@@ -2329,9 +2328,9 @@ const inlineStyles = {
     boxSizing: "border-box",
     position: "relative",
     borderStyle: "solid",
-    borderColor: Color__default["default"].offBlack50,
+    borderColor: wonderBlocksTokens.color.offBlack50,
     borderRadius: 4,
-    color: Color__default["default"].offBlack
+    color: wonderBlocksTokens.color.offBlack
   }
 };
 
@@ -2457,7 +2456,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     marginLeft: 1
   },
   hovered: {
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     border: "1px solid #1865F2"
   },
   pressed: {
@@ -2465,7 +2464,7 @@ const styles$6 = aphrodite.StyleSheet.create({
   },
   focused: {
     outline: "none",
-    border: `2px solid ${Color__default["default"].blue}`
+    border: `2px solid ${wonderBlocksTokens.color.blue}`
   },
   innerBox: {
     boxSizing: "border-box",
@@ -2477,7 +2476,7 @@ const styles$6 = aphrodite.StyleSheet.create({
     alignItems: "center"
   },
   innerBoxPressed: {
-    border: `1px solid ${Color__default["default"].white}`
+    border: `1px solid ${wonderBlocksTokens.color.white}`
   },
   activeIndicator: {
     position: "absolute",
@@ -2495,15 +2494,15 @@ const styles$6 = aphrodite.StyleSheet.create({
 });
 function imageTintColor(itemState, hovered, focused, pressed) {
   if (itemState === "disabled") {
-    return Color__default["default"].offBlack64;
+    return wonderBlocksTokens.color.offBlack64;
   } else if (pressed) {
-    return Color__default["default"].white;
+    return wonderBlocksTokens.color.white;
   } else if (itemState === "active") {
-    return Color__default["default"].blue;
+    return wonderBlocksTokens.color.blue;
   } else if (hovered) {
-    return Color__default["default"].blue;
+    return wonderBlocksTokens.color.blue;
   }
-  return Color__default["default"].offBlack64;
+  return wonderBlocksTokens.color.offBlack64;
 }
 class TabbarItem extends React__namespace.Component {
   render() {
@@ -4827,9 +4826,9 @@ const styles$4 = aphrodite.StyleSheet.create({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
+    boxShadow: `0px 1px 0px ${wonderBlocksTokens.color.offBlack32}`,
     boxSizing: "border-box",
-    background: Color__default["default"].white,
+    background: wonderBlocksTokens.color.white,
     borderRadius: 4,
     borderWidth: 2,
     borderStyle: "solid",
@@ -4840,19 +4839,19 @@ const styles$4 = aphrodite.StyleSheet.create({
     padding: 1
   },
   hovered: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     padding: 1,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     padding: 0,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
     padding: 0,
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     boxShadow: "none"
   },
   outerBoxBase: {
@@ -5211,13 +5210,13 @@ const styles$3 = aphrodite.StyleSheet.create({
     width: "100%"
   },
   base: {
-    boxShadow: `0px 1px 0px ${Color__default["default"].offBlack32}`,
+    boxShadow: `0px 1px 0px ${wonderBlocksTokens.color.offBlack32}`,
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    background: Color__default["default"].white,
+    background: wonderBlocksTokens.color.white,
     borderWidth: 2,
-    borderColor: Color__default["default"].white
+    borderColor: wonderBlocksTokens.color.white
   },
   up: {
     borderTopLeftRadius: borderRadiusPx,
@@ -5236,16 +5235,16 @@ const styles$3 = aphrodite.StyleSheet.create({
     borderBottomLeftRadius: borderRadiusPx
   },
   hovered: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     boxShadow: "none"
   },
   focused: {
-    borderColor: Color__default["default"].blue,
+    borderColor: wonderBlocksTokens.color.blue,
     boxShadow: "none"
   },
   pressed: {
     border: "2px solid #1B50B3",
-    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color__default["default"].white}`,
+    background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${wonderBlocksTokens.color.white}`,
     boxShadow: "none"
   }
 });
@@ -5295,7 +5294,7 @@ const styles$2 = aphrodite.StyleSheet.create({
   spacer: {
     gridColumn: 2,
     gridRow: 2,
-    background: Color__default["default"].white
+    background: wonderBlocksTokens.color.white
   }
 });
 
@@ -5488,11 +5487,11 @@ const styles$1 = aphrodite.StyleSheet.create({
     alignItems: "center"
   },
   wrapper: {
-    background: Color__default["default"].white
+    background: wonderBlocksTokens.color.white
   },
   expandedWrapper: {
     borderWidth: "1px 1px 0 1px",
-    borderColor: Color__default["default"].offBlack32,
+    borderColor: wonderBlocksTokens.color.offBlack32,
     maxWidth: expandedViewThreshold,
     borderRadius: "3px 3px 0 0"
   },