@pie-element/multiple-choice 8.14.0 → 8.14.1-next.1

package/lib/feedback-tick.js

@@ -1,174 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-var _styles = require("@material-ui/core/styles");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _renderUi = require("@pie-lib/pie-toolbox/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 stylesheet = {
-  incorrect: {
-    fill: "var(--feedback-incorrect-bg-color, ".concat(_renderUi.color.incorrect(), ")")
-  },
-  correct: {
-    fill: "var(--feedback-correct-bg-color, ".concat(_renderUi.color.correct(), ")")
-  },
-  feedbackTick: {
-    width: '33px',
-    height: '33px',
-    '& svg': {
-      position: 'absolute',
-      display: 'inline-block',
-      width: '33px',
-      height: '33px',
-      verticalAlign: 'middle',
-      '& hide': {
-        display: 'none'
-      }
-    }
-  },
-  feedbackTickEnter: {
-    opacity: '0',
-    left: '-50px'
-  },
-  feedbackTickEnterActive: {
-    opacity: '1',
-    left: '0px',
-    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms'
-  },
-  feedbackTickLeave: {
-    opacity: '1',
-    left: '0px'
-  },
-  feedbackTickLeaveActive: {
-    opacity: '0',
-    left: '-50px',
-    transition: 'left 300ms ease-in, opacity 300ms'
-  }
-};
-
-var FeedbackTick = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(FeedbackTick, _React$Component);
-
-  var _super = _createSuper(FeedbackTick);
-
-  function FeedbackTick(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, FeedbackTick);
-    _this = _super.call(this, props);
-    _this.incorrectIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-      key: "1",
-      preserveAspectRatio: "xMinYMin meet",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 44 40",
-      style: {
-        enableBackground: 'new 0 0 44 40'
-      }
-    }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
-      x: "11",
-      y: "17.3",
-      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
-      className: _this.props.classes.incorrect,
-      width: "16.6",
-      height: "3.7"
-    }), /*#__PURE__*/_react["default"].createElement("rect", {
-      x: "17.4",
-      y: "10.7",
-      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
-      className: _this.props.classes.incorrect,
-      width: "3.7",
-      height: "16.6"
-    })));
-    _this.correctIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-      key: "2",
-      preserveAspectRatio: "xMinYMin meet",
-      version: "1.1",
-      x: "0px",
-      y: "0px",
-      viewBox: "0 0 44 40",
-      style: {
-        enableBackground: 'new 0 0 44 40'
-      }
-    }, /*#__PURE__*/_react["default"].createElement("polygon", {
-      className: _this.props.classes.correct,
-      points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
-    }));
-    return _this;
-  }
-
-  (0, _createClass2["default"])(FeedbackTick, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          correctness = _this$props.correctness,
-          classes = _this$props.classes;
-
-      var icon = function () {
-        if (correctness === 'incorrect') {
-          return _this2.incorrectIcon;
-        } else if (correctness === 'correct') {
-          return _this2.correctIcon;
-        }
-      }();
-
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.feedbackTick
-      }, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, null, correctness && /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
-        classNames: {
-          enter: classes.feedbackTickEnter,
-          enterActive: classes.feedbackTickEnterActive,
-          exit: classes.feedbackTickLeave,
-          exitActive: classes.feedbackTickLeaveActive
-        },
-        timeout: {
-          enter: 700,
-          exit: 300
-        }
-      }, icon)));
-    }
-  }]);
-  return FeedbackTick;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(FeedbackTick, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  correctness: _propTypes["default"].string
-});
-
-var _default = (0, _styles.withStyles)(stylesheet, {
-  name: 'FeedbackTick'
-})(FeedbackTick);
-
-exports["default"] = _default;
-//# sourceMappingURL=feedback-tick.js.map

package/lib/feedback-tick.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst stylesheet = {\n  incorrect: {\n    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n  feedbackTick: {\n    width: '33px',\n    height: '33px',\n    '& svg': {\n      position: 'absolute',\n      display: 'inline-block',\n      width: '33px',\n      height: '33px',\n      verticalAlign: 'middle',\n      '& hide': {\n        display: 'none',\n      },\n    },\n  },\n  feedbackTickEnter: {\n    opacity: '0',\n    left: '-50px',\n  },\n  feedbackTickEnterActive: {\n    opacity: '1',\n    left: '0px',\n    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n  },\n  feedbackTickLeave: {\n    opacity: '1',\n    left: '0px',\n  },\n  feedbackTickLeaveActive: {\n    opacity: '0',\n    left: '-50px',\n    transition: 'left 300ms ease-in, opacity 300ms',\n  },\n};\n\nclass FeedbackTick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctness: PropTypes.string,\n  };\n  constructor(props) {\n    super(props);\n    this.incorrectIcon = (\n      <svg\n        key=\"1\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <g>\n          <rect\n            x=\"11\"\n            y=\"17.3\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n            className={this.props.classes.incorrect}\n            width=\"16.6\"\n            height=\"3.7\"\n          />\n          <rect\n            x=\"17.4\"\n            y=\"10.7\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n            className={this.props.classes.incorrect}\n            width=\"3.7\"\n            height=\"16.6\"\n          />\n        </g>\n      </svg>\n    );\n\n    this.correctIcon = (\n      <svg\n        key=\"2\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <polygon\n          className={this.props.classes.correct}\n          points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const { correctness, classes } = this.props;\n\n    const icon = (() => {\n      if (correctness === 'incorrect') {\n        return this.incorrectIcon;\n      } else if (correctness === 'correct') {\n        return this.correctIcon;\n      }\n    })();\n\n    return (\n      <div className={classes.feedbackTick}>\n        <TransitionGroup>\n          {correctness && (\n            <CSSTransition\n              classNames={{\n                enter: classes.feedbackTickEnter,\n                enterActive: classes.feedbackTickEnterActive,\n                exit: classes.feedbackTickLeave,\n                exitActive: classes.feedbackTickLeaveActive,\n              }}\n              timeout={{ enter: 700, exit: 300 }}\n            >\n              {icon}\n            </CSSTransition>\n          )}\n        </TransitionGroup>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}

package/lib/index.js

@@ -1,156 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isComplete = exports["default"] = 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"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
-var _main = _interopRequireDefault(require("./main"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
-var _debug = _interopRequireDefault(require("debug"));
-
-var _mathRenderingAccessible = require("@pie-lib/pie-toolbox/math-rendering-accessible");
-
-var _sessionUpdater = require("./session-updater");
-
-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 log = (0, _debug["default"])('pie-ui:multiple-choice');
-
-var isComplete = function isComplete(session) {
-  return !!(session && session.value && session.value.length);
-};
-
-exports.isComplete = isComplete;
-
-var MultipleChoice = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(MultipleChoice, _HTMLElement);
-
-  var _super = _createSuper(MultipleChoice);
-
-  function MultipleChoice() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, MultipleChoice);
-    _this = _super.call(this);
-    _this._model = null;
-    _this._session = null;
-    _this._rerender = (0, _debounce["default"])(function () {
-      if (_this._model && _this._session) {
-        var element = /*#__PURE__*/_react["default"].createElement(_main["default"], {
-          model: _this._model,
-          session: _this._session,
-          onChoiceChanged: _this._onChange.bind((0, _assertThisInitialized2["default"])(_this))
-        }); //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender
-
-
-        _this.setAttribute('aria-label', _this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
-
-        _this.setAttribute('role', 'region');
-
-        _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
-          log('render complete - render math');
-          (0, _mathRenderingAccessible.renderMath)((0, _assertThisInitialized2["default"])(_this));
-        });
-      } else {
-        log('skip');
-      }
-    }, 50, {
-      leading: false,
-      trailing: true
-    });
-    _this._dispatchResponseChanged = (0, _debounce["default"])(function () {
-      var event = new CustomEvent('session-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(_this._session),
-          component: _this.tagName.toLowerCase()
-        }
-      });
-
-      _this.dispatchEvent(event);
-    });
-    _this._dispatchModelSet = (0, _debounce["default"])(function () {
-      _this.dispatchEvent(new CustomEvent('model-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: isComplete(_this._session),
-          component: _this.tagName.toLowerCase(),
-          hasModel: _this._model !== undefined
-        }
-      }));
-    }, 50, {
-      leading: false,
-      trailing: true
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(MultipleChoice, [{
-    key: "model",
-    set: function set(s) {
-      this._model = s;
-
-      this._rerender();
-
-      this._dispatchModelSet();
-    }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    },
-    set: function set(s) {
-      this._session = s;
-
-      this._rerender(); //TODO: remove this session-changed should only be emit on user change
-
-
-      this._dispatchResponseChanged();
-    }
-  }, {
-    key: "_onChange",
-    value: function _onChange(data) {
-      (0, _sessionUpdater.updateSessionValue)(this._session, this._model.choiceMode, data);
-
-      this._dispatchResponseChanged();
-
-      this._rerender();
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      this._rerender();
-    }
-  }]);
-  return MultipleChoice;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = MultipleChoice;
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","isComplete","session","value","length","MultipleChoice","_model","_session","_rerender","element","React","createElement","Main","model","onChoiceChanged","_onChange","bind","setAttribute","choiceMode","ReactDOM","render","leading","trailing","_dispatchResponseChanged","event","CustomEvent","bubbles","composed","detail","complete","component","tagName","toLowerCase","dispatchEvent","_dispatchModelSet","hasModel","undefined","s","data","HTMLElement"],"mappings":"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","sourcesContent":["import Main from './main';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport debug from 'debug';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering-accessible';\nimport { updateSessionValue } from './session-updater';\n\nconst log = debug('pie-ui:multiple-choice');\n\nexport const isComplete = (session) => !!(session && session.value && session.value.length);\n\nexport default class MultipleChoice extends HTMLElement {\n  constructor() {\n    super();\n    this._model = null;\n    this._session = null;\n\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          var element = React.createElement(Main, {\n            model: this._model,\n            session: this._session,\n            onChoiceChanged: this._onChange.bind(this),\n          });\n\n          //TODO: aria-label is set in the _rerender because we need to change it when the model.choiceMode is updated. Consider revisiting the placement of the aria-label setting in the _rerender\n          this.setAttribute(\n            'aria-label',\n            this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question',\n          );\n          this.setAttribute('role', 'region');\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n\n    this._dispatchResponseChanged = debounce(() => {\n      var event = new CustomEvent('session-changed', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          complete: isComplete(this._session),\n          component: this.tagName.toLowerCase(),\n        },\n      });\n\n      this.dispatchEvent(event);\n    });\n\n    this._dispatchModelSet = debounce(\n      () => {\n        this.dispatchEvent(\n          new CustomEvent('model-set', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              complete: isComplete(this._session),\n              component: this.tagName.toLowerCase(),\n              hasModel: this._model !== undefined,\n            },\n          }),\n        );\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n    this._dispatchModelSet();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._rerender();\n    //TODO: remove this session-changed should only be emit on user change\n    this._dispatchResponseChanged();\n  }\n\n  _onChange(data) {\n    updateSessionValue(this._session, this._model.choiceMode, data);\n    this._dispatchResponseChanged();\n    this._rerender();\n  }\n\n  connectedCallback() {\n    this._rerender();\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -1,96 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
-
-var _multipleChoice = _interopRequireDefault(require("./multiple-choice"));
-
-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 styles = function styles() {
-  return {};
-};
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main(props) {
-    (0, _classCallCheck2["default"])(this, Main);
-    return _super.call(this, props);
-  }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          model = _this$props.model,
-          onChoiceChanged = _this$props.onChoiceChanged,
-          session = _this$props.session; // model.partLabel is a property used for ebsr
-
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewLayout, null, /*#__PURE__*/_react["default"].createElement(_multipleChoice["default"], (0, _extends2["default"])({}, model, {
-        session: session,
-        onChoiceChanged: onChoiceChanged
-      })));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  model: _propTypes["default"].object,
-  session: _propTypes["default"].object,
-  onChoiceChanged: _propTypes["default"].func,
-  classes: _propTypes["default"].object.isRequired
-});
-(0, _defineProperty2["default"])(Main, "defaultProps", {
-  model: {},
-  session: {}
-});
-var Styled = (0, _styles.withStyles)(styles, {
-  name: 'Main'
-})(Main);
-var theme = (0, _styles.createMuiTheme)({
-  typography: {
-    useNextVariants: true
-  }
-});
-
-var Root = function Root(props) {
-  return /*#__PURE__*/_react["default"].createElement(_styles.MuiThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/_react["default"].createElement(Styled, props));
-};
-
-var _default = Root;
-exports["default"] = _default;
-//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["styles","Main","props","model","onChoiceChanged","session","React","Component","PropTypes","object","func","classes","isRequired","Styled","name","theme","typography","useNextVariants","Root"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO,EAAP;AAAA,CAAf;;IAEMC,I;;;;;AAYJ,gBAAYC,KAAZ,EAAmB;AAAA;AAAA,6BACXA,KADW;AAElB;;;;WAED,kBAAS;AACP,wBAA4C,KAAKA,KAAjD;AAAA,UAAQC,KAAR,eAAQA,KAAR;AAAA,UAAeC,eAAf,eAAeA,eAAf;AAAA,UAAgCC,OAAhC,eAAgCA,OAAhC,CADO,CAGP;;AACA,0BACE,gCAAC,uBAAD,qBACE,gCAAC,0BAAD,gCAAoBF,KAApB;AAA2B,QAAA,OAAO,EAAEE,OAApC;AAA6C,QAAA,eAAe,EAAED;AAA9D,SADF,CADF;AAKD;;;EAzBgBE,kBAAMC,S;;iCAAnBN,I,eACe;AACjBE,EAAAA,KAAK,EAAEK,sBAAUC,MADA;AAEjBJ,EAAAA,OAAO,EAAEG,sBAAUC,MAFF;AAGjBL,EAAAA,eAAe,EAAEI,sBAAUE,IAHV;AAIjBC,EAAAA,OAAO,EAAEH,sBAAUC,MAAV,CAAiBG;AAJT,C;iCADfX,I,kBAQkB;AACpBE,EAAAA,KAAK,EAAE,EADa;AAEpBE,EAAAA,OAAO,EAAE;AAFW,C;AAoBxB,IAAMQ,MAAM,GAAG,wBAAWb,MAAX,EAAmB;AAAEc,EAAAA,IAAI,EAAE;AAAR,CAAnB,EAAqCb,IAArC,CAAf;AAEA,IAAMc,KAAK,GAAG,4BAAe;AAC3BC,EAAAA,UAAU,EAAE;AACVC,IAAAA,eAAe,EAAE;AADP;AADe,CAAf,CAAd;;AAMA,IAAMC,IAAI,GAAG,SAAPA,IAAO,CAAChB,KAAD;AAAA,sBACX,gCAAC,wBAAD;AAAkB,IAAA,KAAK,EAAEa;AAAzB,kBACE,gCAAC,MAAD,EAAYb,KAAZ,CADF,CADW;AAAA,CAAb;;eAMegB,I","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';\nimport { PreviewLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport MultipleChoice from './multiple-choice';\n\nconst styles = () => ({});\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onChoiceChanged: PropTypes.func,\n    classes: PropTypes.object.isRequired,\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n  constructor(props) {\n    super(props);\n  }\n\n  render() {\n    const { model, onChoiceChanged, session } = this.props;\n\n    // model.partLabel is a property used for ebsr\n    return (\n      <PreviewLayout>\n        <MultipleChoice {...model} session={session} onChoiceChanged={onChoiceChanged} />\n      </PreviewLayout>\n    );\n  }\n}\n\nconst Styled = withStyles(styles, { name: 'Main' })(Main);\n\nconst theme = createMuiTheme({\n  typography: {\n    useNextVariants: true,\n  },\n});\n\nconst Root = (props) => (\n  <MuiThemeProvider theme={theme}>\n    <Styled {...props} />\n  </MuiThemeProvider>\n);\n\nexport default Root;\n"],"file":"main.js"}