@pie-element/math-inline 11.0.5-esm.1 → 11.1.2-next.1

package/lib/simple-question-block.js

@@ -1,185 +1,148 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleQuestionBlockRaw = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.SimpleQuestionBlock = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _mathToolbar = require("@pie-lib/math-toolbar");
-
 var _mathInput = require("@pie-lib/math-input");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _renderUi = require("@pie-lib/render-ui");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var SimpleQuestionBlockRaw = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(SimpleQuestionBlockRaw, _React$Component);
-
-  var _super = _createSuper(SimpleQuestionBlockRaw);
-
-  function SimpleQuestionBlockRaw(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, SimpleQuestionBlockRaw);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "mathToolBarContainsTarget", function (e) {
-      return document.getElementById(_this.mathToolBarId).contains(e.target);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
+const Expression = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  padding: theme.spacing(1)
+}));
+const Static = (0, _styles.styled)('div', {
+  shouldForwardProp: prop => !['isCorrect', 'isIncorrect'].includes(prop)
+})(({
+  theme,
+  isCorrect,
+  isIncorrect
+}) => ({
+  color: _renderUi.color.text(),
+  background: _renderUi.color.background(),
+  border: isCorrect ? `2px solid ${_renderUi.color.correct()} !important` : isIncorrect ? `2px solid ${_renderUi.color.incorrect()} !important` : `1px solid ${_renderUi.color.primaryLight()}`,
+  width: 'fit-content',
+  fontSize: '1rem',
+  padding: isCorrect || isIncorrect ? theme.spacing(1) : theme.spacing(0.5),
+  letterSpacing: isCorrect || isIncorrect ? '0.5px' : 'normal',
+  '& > .mq-math-mode': {
+    '& > .mq-hasCursor': {
+      '& > .mq-cursor': {
+        display: 'none'
+      }
+    }
+  }
+}));
+
+// CSS for MathToolbar classNames (used as strings)
+if (typeof document !== 'undefined') {
+  const styleId = 'math-inline-simple-question-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .response-editor {
+        display: flex;
+        justify-content: center;
+        width: auto;
+        max-width: fit-content;
+        height: auto;
+        text-align: left;
+        padding: 8px;
+      }
+      .response-editor.mq-math-mode {
+        border: 1px solid ${_renderUi.color.primaryLight()};
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+class SimpleQuestionBlock extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "mathToolBarContainsTarget", e => document.getElementById(this.mathToolBarId).contains(e.target));
+    (0, _defineProperty2.default)(this, "handleClick", e => {
       try {
-        if (!_this.mathToolBarContainsTarget(e)) {
-          _this.setState({
+        if (!this.mathToolBarContainsTarget(e)) {
+          this.setState({
             showKeypad: false
           });
         }
-      } catch (e) {// console.log(e.toString());
+      } catch (e) {
+        // console.log(e.toString());
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function () {
-      var onSubFieldFocus = _this.props.onSubFieldFocus;
-      onSubFieldFocus(_this.mathToolBarId);
+    (0, _defineProperty2.default)(this, "onFocus", () => {
+      const {
+        onSubFieldFocus
+      } = this.props;
+      onSubFieldFocus(this.mathToolBarId);
     });
-    _this.mathToolBarId = "math-toolbar-".concat(new Date().getTime());
-    return _this;
+    this.mathToolBarId = `math-toolbar-${new Date().getTime()}`;
   }
-
-  (0, _createClass2["default"])(SimpleQuestionBlockRaw, [{
-    key: "render",
-    value: function render() {
-      var _cx;
-
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          model = _this$props.model,
-          showCorrect = _this$props.showCorrect,
-          session = _this$props.session,
-          emptyResponse = _this$props.emptyResponse,
-          onSimpleResponseChange = _this$props.onSimpleResponseChange,
-          showKeypad = _this$props.showKeypad;
-
-      var _ref = model || {},
-          config = _ref.config,
-          disabled = _ref.disabled,
-          correctness = _ref.correctness;
-
-      if (!config) {
-        return;
-      }
-
-      var correct = correctness && correctness.correct;
-      var responses = config.responses,
-          equationEditor = config.equationEditor;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.expression,
-        "data-keypad": true
-      }, showCorrect || disabled ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes["static"], (_cx = {}, (0, _defineProperty2["default"])(_cx, classes.incorrect, !emptyResponse && !correct && !showCorrect), (0, _defineProperty2["default"])(_cx, classes.correct, !emptyResponse && (correct || showCorrect)), _cx))
-      }, /*#__PURE__*/_react["default"].createElement(_mathInput.mq.Static, {
-        latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || ''
-      })) : /*#__PURE__*/_react["default"].createElement("div", {
-        id: this.mathToolBarId
-      }, /*#__PURE__*/_react["default"].createElement(_mathToolbar.MathToolbar, {
-        classNames: {
-          editor: classes.responseEditor
-        },
-        latex: session.response,
-        keypadMode: equationEditor,
-        onChange: onSimpleResponseChange,
-        onDone: function onDone() {},
-        onFocus: this.onFocus,
-        controlledKeypad: true,
-        showKeypad: showKeypad,
-        hideDoneButton: true
-      })));
+  render() {
+    const {
+      model,
+      showCorrect,
+      session,
+      emptyResponse,
+      onSimpleResponseChange,
+      showKeypad
+    } = this.props;
+    const {
+      config,
+      disabled,
+      correctness
+    } = model || {};
+    if (!config) {
+      return;
     }
-  }]);
-  return SimpleQuestionBlockRaw;
-}(_react["default"].Component);
-
-exports.SimpleQuestionBlockRaw = SimpleQuestionBlockRaw;
-(0, _defineProperty2["default"])(SimpleQuestionBlockRaw, "propTypes", {
-  classes: _propTypes["default"].object,
-  onSimpleResponseChange: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired,
-  emptyResponse: _propTypes["default"].bool,
-  session: _propTypes["default"].object.isRequired,
-  showCorrect: _propTypes["default"].bool,
-  onSubFieldFocus: _propTypes["default"].func.isRequired,
-  showKeypad: _propTypes["default"].bool.isRequired
+    const correct = correctness && correctness.correct;
+    const {
+      responses,
+      equationEditor
+    } = config;
+    return /*#__PURE__*/_react.default.createElement(Expression, {
+      "data-keypad": true
+    }, showCorrect || disabled ? /*#__PURE__*/_react.default.createElement(Static, {
+      isIncorrect: !emptyResponse && !correct && !showCorrect,
+      isCorrect: !emptyResponse && (correct || showCorrect)
+    }, /*#__PURE__*/_react.default.createElement(_mathInput.mq.Static, {
+      latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || ''
+    })) : /*#__PURE__*/_react.default.createElement("div", {
+      id: this.mathToolBarId
+    }, /*#__PURE__*/_react.default.createElement(_mathToolbar.MathToolbar, {
+      classNames: {
+        editor: 'response-editor'
+      },
+      latex: session.response,
+      keypadMode: equationEditor,
+      onChange: onSimpleResponseChange,
+      onDone: () => {},
+      onFocus: this.onFocus,
+      controlledKeypad: true,
+      showKeypad: showKeypad,
+      hideDoneButton: true
+    })));
+  }
+}
+exports.SimpleQuestionBlock = SimpleQuestionBlock;
+(0, _defineProperty2.default)(SimpleQuestionBlock, "propTypes", {
+  onSimpleResponseChange: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  emptyResponse: _propTypes.default.bool,
+  session: _propTypes.default.object.isRequired,
+  showCorrect: _propTypes.default.bool,
+  onSubFieldFocus: _propTypes.default.func.isRequired,
+  showKeypad: _propTypes.default.bool.isRequired
 });
-var SimpleQuestionBlock = (0, _styles.withStyles)(function (theme) {
-  return {
-    responseEditor: {
-      display: 'flex',
-      justifyContent: 'center',
-      width: 'auto',
-      maxWidth: 'fit-content',
-      height: 'auto',
-      textAlign: 'left',
-      padding: theme.spacing.unit,
-      '&.mq-math-mode': {
-        border: "1px solid ".concat(_renderUi.color.primaryLight())
-      }
-    },
-    expression: {
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2,
-      padding: theme.spacing.unit
-    },
-    "static": {
-      color: _renderUi.color.text(),
-      background: _renderUi.color.background(),
-      border: "1px solid ".concat(_renderUi.color.primaryLight()),
-      width: 'fit-content',
-      fontSize: '1rem',
-      padding: theme.spacing.unit / 2,
-      '& > .mq-math-mode': {
-        '& > .mq-hasCursor': {
-          '& > .mq-cursor': {
-            display: 'none'
-          }
-        }
-      }
-    },
-    correct: {
-      border: "2px solid ".concat(_renderUi.color.correct(), " !important"),
-      padding: theme.spacing.unit,
-      letterSpacing: '0.5px'
-    },
-    incorrect: {
-      border: "2px solid ".concat(_renderUi.color.incorrect(), " !important"),
-      padding: theme.spacing.unit,
-      letterSpacing: '0.5px'
-    }
-  };
-})(SimpleQuestionBlockRaw);
-var _default = SimpleQuestionBlock;
-exports["default"] = _default;
+var _default = exports.default = SimpleQuestionBlock;
 //# sourceMappingURL=simple-question-block.js.map

package/lib/simple-question-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/simple-question-block.jsx"],"names":["SimpleQuestionBlockRaw","props","e","document","getElementById","mathToolBarId","contains","target","mathToolBarContainsTarget","setState","showKeypad","onSubFieldFocus","Date","getTime","classes","model","showCorrect","session","emptyResponse","onSimpleResponseChange","config","disabled","correctness","correct","responses","equationEditor","expression","incorrect","length","answer","response","editor","responseEditor","onFocus","React","Component","PropTypes","object","func","isRequired","bool","SimpleQuestionBlock","theme","display","justifyContent","width","maxWidth","height","textAlign","padding","spacing","unit","border","color","primaryLight","marginTop","marginBottom","text","background","fontSize","letterSpacing"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { MathToolbar } from '@pie-lib/math-toolbar';\nimport { mq } from '@pie-lib/math-input';\nimport cx from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nexport class SimpleQuestionBlockRaw extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    onSimpleResponseChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    emptyResponse: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    showCorrect: PropTypes.bool,\n    onSubFieldFocus: PropTypes.func.isRequired,\n    showKeypad: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.mathToolBarId = `math-toolbar-${new Date().getTime()}`;\n  }\n\n  mathToolBarContainsTarget = (e) => document.getElementById(this.mathToolBarId).contains(e.target);\n\n  handleClick = (e) => {\n    try {\n      if (!this.mathToolBarContainsTarget(e)) {\n        this.setState({ showKeypad: false });\n      }\n    } catch (e) {\n      // console.log(e.toString());\n    }\n  };\n\n  onFocus = () => {\n    const { onSubFieldFocus } = this.props;\n\n    onSubFieldFocus(this.mathToolBarId);\n  };\n\n  render() {\n    const { classes, model, showCorrect, session, emptyResponse, onSimpleResponseChange, showKeypad } = this.props;\n    const { config, disabled, correctness } = model || {};\n\n    if (!config) {\n      return;\n    }\n\n    const correct = correctness && correctness.correct;\n    const { responses, equationEditor } = config;\n\n    return (\n      <div className={classes.expression} data-keypad={true}>\n        {showCorrect || disabled ? (\n          <div\n            className={cx(classes.static, {\n              [classes.incorrect]: !emptyResponse && !correct && !showCorrect,\n              [classes.correct]: !emptyResponse && (correct || showCorrect),\n            })}\n          >\n            <mq.Static\n              latex={showCorrect ? responses && responses.length && responses[0].answer : session.response || ''}\n            />\n          </div>\n        ) : (\n          <div id={this.mathToolBarId}>\n            <MathToolbar\n              classNames={{ editor: classes.responseEditor }}\n              latex={session.response}\n              keypadMode={equationEditor}\n              onChange={onSimpleResponseChange}\n              onDone={() => {}}\n              onFocus={this.onFocus}\n              controlledKeypad={true}\n              showKeypad={showKeypad}\n              hideDoneButton={true}\n            />\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n\nconst SimpleQuestionBlock = withStyles((theme) => ({\n  responseEditor: {\n    display: 'flex',\n    justifyContent: 'center',\n    width: 'auto',\n    maxWidth: 'fit-content',\n    height: 'auto',\n    textAlign: 'left',\n    padding: theme.spacing.unit,\n    '&.mq-math-mode': {\n      border: `1px solid ${color.primaryLight()}`,\n    },\n  },\n  expression: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    padding: theme.spacing.unit,\n  },\n  static: {\n    color: color.text(),\n    background: color.background(),\n    border: `1px solid ${color.primaryLight()}`,\n    width: 'fit-content',\n    fontSize: '1rem',\n    padding: theme.spacing.unit / 2,\n    '& > .mq-math-mode': {\n      '& > .mq-hasCursor': {\n        '& > .mq-cursor': {\n          display: 'none',\n        },\n      },\n    },\n  },\n  correct: {\n    border: `2px solid ${color.correct()} !important`,\n    padding: theme.spacing.unit,\n    letterSpacing: '0.5px',\n  },\n  incorrect: {\n    border: `2px solid ${color.incorrect()} !important`,\n    padding: theme.spacing.unit,\n    letterSpacing: '0.5px',\n  },\n}))(SimpleQuestionBlockRaw);\n\nexport default SimpleQuestionBlock;\n"],"file":"simple-question-block.js"}
+{"version":3,"file":"simple-question-block.js","names":["_react","_interopRequireDefault","require","_mathToolbar","_mathInput","_styles","_propTypes","_renderUi","Expression","styled","theme","marginTop","spacing","marginBottom","padding","Static","shouldForwardProp","prop","includes","isCorrect","isIncorrect","color","text","background","border","correct","incorrect","primaryLight","width","fontSize","letterSpacing","display","document","styleId","getElementById","style","createElement","id","textContent","head","appendChild","SimpleQuestionBlock","React","Component","constructor","props","_defineProperty2","default","e","mathToolBarId","contains","target","mathToolBarContainsTarget","setState","showKeypad","onSubFieldFocus","Date","getTime","render","model","showCorrect","session","emptyResponse","onSimpleResponseChange","config","disabled","correctness","responses","equationEditor","mq","latex","length","answer","response","MathToolbar","classNames","editor","keypadMode","onChange","onDone","onFocus","controlledKeypad","hideDoneButton","exports","PropTypes","func","object","isRequired","bool","_default"],"sources":["../src/simple-question-block.jsx"],"sourcesContent":["import React from 'react';\nimport { MathToolbar } from '@pie-lib/math-toolbar';\nimport { mq } from '@pie-lib/math-input';\nimport { styled } from '@mui/material/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/render-ui';\n\nconst Expression = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n  padding: theme.spacing(1),\n}));\n\nconst Static = styled('div', {\n  shouldForwardProp: (prop) => !['isCorrect', 'isIncorrect'].includes(prop),\n})(({ theme, isCorrect, isIncorrect }) => ({\n  color: color.text(),\n  background: color.background(),\n  border: isCorrect\n    ? `2px solid ${color.correct()} !important`\n    : isIncorrect\n      ? `2px solid ${color.incorrect()} !important`\n      : `1px solid ${color.primaryLight()}`,\n  width: 'fit-content',\n  fontSize: '1rem',\n  padding: isCorrect || isIncorrect ? theme.spacing(1) : theme.spacing(0.5),\n  letterSpacing: (isCorrect || isIncorrect) ? '0.5px' : 'normal',\n  '& > .mq-math-mode': {\n    '& > .mq-hasCursor': {\n      '& > .mq-cursor': {\n        display: 'none',\n      },\n    },\n  },\n}));\n\n// CSS for MathToolbar classNames (used as strings)\nif (typeof document !== 'undefined') {\n  const styleId = 'math-inline-simple-question-styles';\n  if (!document.getElementById(styleId)) {\n    const style = document.createElement('style');\n    style.id = styleId;\n    style.textContent = `\n      .response-editor {\n        display: flex;\n        justify-content: center;\n        width: auto;\n        max-width: fit-content;\n        height: auto;\n        text-align: left;\n        padding: 8px;\n      }\n      .response-editor.mq-math-mode {\n        border: 1px solid ${color.primaryLight()};\n      }\n    `;\n    document.head.appendChild(style);\n  }\n}\n\nexport class SimpleQuestionBlock extends React.Component {\n  static propTypes = {\n    onSimpleResponseChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n    emptyResponse: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    showCorrect: PropTypes.bool,\n    onSubFieldFocus: PropTypes.func.isRequired,\n    showKeypad: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.mathToolBarId = `math-toolbar-${new Date().getTime()}`;\n  }\n\n  mathToolBarContainsTarget = (e) => document.getElementById(this.mathToolBarId).contains(e.target);\n\n  handleClick = (e) => {\n    try {\n      if (!this.mathToolBarContainsTarget(e)) {\n        this.setState({ showKeypad: false });\n      }\n    } catch (e) {\n      // console.log(e.toString());\n    }\n  };\n\n  onFocus = () => {\n    const { onSubFieldFocus } = this.props;\n\n    onSubFieldFocus(this.mathToolBarId);\n  };\n\n  render() {\n    const { model, showCorrect, session, emptyResponse,onSimpleResponseChange, showKeypad } = this.props;\n    const { config, disabled, correctness } = model || {};\n\n    if (!config) {\n      return;\n    }\n\n    const correct = correctness && correctness.correct;\n    const { responses, equationEditor } = config;\n\n    return (\n      <Expression data-keypad={true}>\n        {showCorrect || disabled ? (\n          <Static\n            isIncorrect={!emptyResponse && !correct && !showCorrect}\n            isCorrect={!emptyResponse && (correct || showCorrect)}\n          >\n            <mq.Static\n              latex={showCorrect ? responses && responses.length && responses[0].answer : session.response || ''}\n            />\n          </Static>\n        ) : (\n          <div id={this.mathToolBarId}>\n            <MathToolbar\n              classNames={{ editor: 'response-editor' }}\n              latex={session.response}\n              keypadMode={equationEditor}\n              onChange={onSimpleResponseChange}\n              onDone={() => {}}\n              onFocus={this.onFocus}\n              controlledKeypad={true}\n              showKeypad={showKeypad}\n              hideDoneButton={true}\n            />\n          </div>\n        )}\n      </Expression>\n    );\n  }\n}\n\nexport default SimpleQuestionBlock;\n"],"mappings":"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","ignoreList":[]}

package/lib/utils.js

@@ -4,9 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResponseTypes = void 0;
-var ResponseTypes = {
+const ResponseTypes = exports.ResponseTypes = {
   advanced: 'Advanced Multi',
   simple: 'Simple'
 };
-exports.ResponseTypes = ResponseTypes;
 //# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["ResponseTypes","advanced","simple"],"mappings":";;;;;;AAAO,IAAMA,aAAa,GAAG;AAC3BC,EAAAA,QAAQ,EAAE,gBADiB;AAE3BC,EAAAA,MAAM,EAAE;AAFmB,CAAtB","sourcesContent":["export const ResponseTypes = {\n  advanced: 'Advanced Multi',\n  simple: 'Simple',\n};\n"],"file":"utils.js"}
+{"version":3,"file":"utils.js","names":["ResponseTypes","exports","advanced","simple"],"sources":["../src/utils.js"],"sourcesContent":["export const ResponseTypes = {\n  advanced: 'Advanced Multi',\n  simple: 'Simple',\n};\n"],"mappings":";;;;;;AAAO,MAAMA,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG;EAC3BE,QAAQ,EAAE,gBAAgB;EAC1BC,MAAM,EAAE;AACV,CAAC","ignoreList":[]}

package/package.json

@@ -1,56 +1,41 @@
 {
   "name": "@pie-element/math-inline",
+  "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
-  "repository": "pie-framework/pie-elements",
-  "version": "11.0.5-esm.1",
+  "version": "11.1.2-next.1",
   "main": "lib/index.js",
   "description": "",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/mathquill": "^1.1.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.22.3",
-    "@pie-lib/math-input": "^6.28.3",
-    "@pie-lib/math-rendering": "^3.19.2",
-    "@pie-lib/math-toolbar": "^1.28.3",
-    "@pie-lib/render-ui": "^4.32.3",
-    "@pie-lib/translator": "^2.20.2",
+    "@pie-lib/correct-answer-toggle": "3.2.0-next.4",
+    "@pie-lib/math-input": "7.2.0-next.4",
+    "@pie-lib/math-rendering": "4.2.0-next.3",
+    "@pie-lib/math-toolbar": "2.2.0-next.5",
+    "@pie-lib/render-ui": "5.2.0-next.4",
+    "@pie-lib/translator": "3.2.0-next.3",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
-    "lodash": "^4.17.10",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "a2a70ca496469571771f6b28bc73f618758bbfec",
+  "gitHead": "9cc4a1cd183a260a03c7d817e0085517112a1a56",
   "module": "src/index.js",
   "exports": {
-    ".": {
-      "import": "./esm/element.js",
-      "require": "./lib/index.js",
-      "default": "./esm/element.js"
-    },
-    "./configure": {
-      "import": "./esm/configure.js",
-      "require": "./configure/lib/index.js",
-      "default": "./esm/configure.js"
-    },
-    "./controller": {
-      "import": "./esm/controller.js",
-      "require": "./controller/lib/index.js",
-      "default": "./esm/controller.js"
-    },
-    "./print": {
-      "import": "./esm/print.js",
-      "require": "./lib/print.js",
-      "default": "./esm/print.js"
-    }
+    ".": "./src/index.js",
+    "./print": "./src/print.js"
   }
 }