@khanacademy/math-input 17.4.0 → 17.5.0

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.5.0";
 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() {
@@ -3471,7 +3470,7 @@ function ButtonAsset(_ref) {
           viewBox: "0 0 32 32",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg",
-          "data-test-id": "comma-decimal"
+          "data-testid": "comma-decimal"
         }, /*#__PURE__*/React__namespace.createElement("path", {
           d: "M11.5559 25.3544C11.8679 24.661 12.1799 23.933 12.4919 23.1704C12.8039 22.425 13.0986 21.6884 13.3759 20.9604C13.6706 20.2324 13.9219 19.5737 14.1299 18.9844H16.6259L16.7299 19.2704C16.4526 19.877 16.1232 20.5357 15.7419 21.2464C15.3606 21.9397 14.9619 22.633 14.5459 23.3264C14.1299 24.037 13.7139 24.713 13.2979 25.3544H11.5559Z",
           fill: "#21242C"
@@ -3484,7 +3483,7 @@ function ButtonAsset(_ref) {
         viewBox: "0 0 40 40",
         fill: "none",
         xmlns: "http://www.w3.org/2000/svg",
-        "data-test-id": "period-decimal"
+        "data-testid": "period-decimal"
       }, /*#__PURE__*/React__namespace.createElement("path", {
         d: "M18.3401 27.512c0-.232.04-.448.12-.648.088-.208.204-.388.348-.54.152-.152.328-.272.528-.36.208-.088.428-.132.66-.132.232 0 .448.044.648.132.208.088.388.208.54.36.152.152.272.332.36.54.088.2.132.416.132.648 0 .24-.044.46-.132.66-.088.2-.208.376-.36.528-.152.152-.332.268-.54.348-.2.088-.416.132-.648.132-.232 0-.452-.044-.66-.132-.2-.08-.376-.196-.528-.348-.144-.152-.26-.328-.348-.528-.08-.2-.12-.42-.12-.66z",
         fill: "#21242C"
@@ -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"
   },