@pie-element/image-cloze-association 3.5.0 → 3.5.1-beta.587

package/lib/image-container.js

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,9 +27,13 @@ var _core = require("@material-ui/core");
 
 var _imageDropTarget = _interopRequireDefault(require("./image-drop-target"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 ImageContainer = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(ImageContainer, _Component);
@@ -57,7 +61,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
           onAnswerSelect = _this$props.onAnswerSelect,
           onDragAnswerBegin = _this$props.onDragAnswerBegin,
           onDragAnswerEnd = _this$props.onDragAnswerEnd,
-          responseContainers = _this$props.responseContainers;
+          responseContainers = _this$props.responseContainers,
+          showDashedBorder = _this$props.showDashedBorder;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement("img", {
@@ -88,7 +93,8 @@ var ImageContainer = /*#__PURE__*/function (_Component) {
             return onAnswerSelect(item, r.index);
           },
           onDragAnswerBegin: onDragAnswerBegin,
-          onDragAnswerEnd: onDragAnswerEnd
+          onDragAnswerEnd: onDragAnswerEnd,
+          showDashedBorder: showDashedBorder
         });
       }));
     }
@@ -106,7 +112,8 @@ ImageContainer.propTypes = {
   onAnswerSelect: _propTypes["default"].func.isRequired,
   onDragAnswerBegin: _propTypes["default"].func.isRequired,
   onDragAnswerEnd: _propTypes["default"].func.isRequired,
-  responseContainers: _propTypes["default"].array.isRequired
+  responseContainers: _propTypes["default"].array.isRequired,
+  showDashedBorder: _propTypes["default"].bool
 };
 ImageContainer.defaultProps = {
   classes: {},

package/lib/image-container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;IAEMA,c;;;;;;;;;;;;WACJ,kBAAS;AAAA,wBAgBH,KAAKC,KAhBF;AAAA,UAELC,OAFK,eAELA,OAFK;AAAA,UAGLC,OAHK,eAGLA,OAHK;AAAA,UAILC,OAJK,eAILA,OAJK;AAAA,UAKLC,eALK,eAKLA,eALK;AAAA,UAMLC,kBANK,eAMLA,kBANK;AAAA,0CAOLC,KAPK;AAAA,UAQHC,MARG,qBAQHA,MARG;AAAA,UASHC,GATG,qBASHA,GATG;AAAA,UAUHC,KAVG,qBAUHA,KAVG;AAAA,UAYLC,cAZK,eAYLA,cAZK;AAAA,UAaLC,iBAbK,eAaLA,iBAbK;AAAA,UAcLC,eAdK,eAcLA,eAdK;AAAA,UAeLC,kBAfK,eAeLA,kBAfK;AAkBP,0BACE;AAAK,QAAA,SAAS,EAAEV,OAAO,CAACW;AAAxB,sBACE;AACE,QAAA,GAAG,EAAEN,GADP;AAEE,QAAA,MAAM,EAAED,MAFV;AAGE,QAAA,KAAK,EAAEE;AAHT,QADF,EAMGI,kBAAkB,CAACE,GAAnB,CAAuB,UAACC,CAAD,EAAIC,CAAJ,EAAU;AAChC,YAAMC,OAAO,GAAIF,CAAC,CAACT,MAAF,CAASY,OAAT,CAAiB,GAAjB,EAAsB,EAAtB,IAA4B,GAA7B,GAAoCZ,MAApD;AACA,YAAMa,MAAM,GAAIJ,CAAC,CAACP,KAAF,CAAQU,OAAR,CAAgB,GAAhB,EAAqB,EAArB,IAA2B,GAA5B,GAAmCV,KAAlD;AACA,YAAMY,KAAK,GAAIL,CAAC,CAACM,CAAF,GAAM,GAAP,GAAcb,KAA5B;AACA,YAAMc,IAAI,GAAIP,CAAC,CAACQ,CAAF,GAAM,GAAP,GAAcjB,MAA3B;AACA,YAAMkB,aAAa,GAAGxB,OAAO,CAACyB,MAAR,CAAe,UAAAC,CAAC;AAAA,iBAAIA,CAAC,CAACC,cAAF,KAAqBZ,CAAC,CAACa,KAA3B;AAAA,SAAhB,CAAtB;AAEA,4BACE,gCAAC,2BAAD;AACE,UAAA,OAAO,EAAEJ,aADX;AAEE,UAAA,OAAO,EAAEvB,OAFX;AAGE,UAAA,cAAc,EAAE;AACdK,YAAAA,MAAM,EAAEW,OADM;AAEdT,YAAAA,KAAK,EAAEW,MAFO;AAGdU,YAAAA,IAAI,EAAET,KAHQ;AAIdU,YAAAA,GAAG,EAAER;AAJS,WAHlB;AASE,UAAA,kBAAkB,EAAElB,kBATtB;AAUE,UAAA,GAAG,EAAEW,CAAC,CAACgB,EAAF,GAAOf,CAVd;AAWE,UAAA,eAAe,EAAEb,eAXnB;AAYE,UAAA,MAAM,EAAE,gBAAC6B,IAAD;AAAA,mBAAUvB,cAAc,CAACuB,IAAD,EAAOjB,CAAC,CAACa,KAAT,CAAxB;AAAA,WAZV;AAaE,UAAA,iBAAiB,EAAElB,iBAbrB;AAcE,UAAA,eAAe,EAAEC;AAdnB,UADF;AAkBD,OAzBA,CANH,CADF;AAmCD;;;EAtD0BsB,gB;;AAyD7BnC,cAAc,CAACoC,SAAf,GAA2B;AACzBlC,EAAAA,OAAO,EAAEmC,sBAAUC,KAAV,CAAgBC,UADA;AAEzBpC,EAAAA,OAAO,EAAEkC,sBAAUG,IAAV,CAAeD,UAFC;AAGzBnC,EAAAA,OAAO,EAAEiC,sBAAUI,MAHM;AAIzBpC,EAAAA,eAAe,EAAEgC,sBAAUK,KAAV,CAAgB,EAAhB,EAAoBH,UAJZ;AAKzBjC,EAAAA,kBAAkB,EAAE+B,sBAAUG,IALL;AAMzBjC,EAAAA,KAAK,EAAE8B,sBAAUI,MAAV,CAAiBF,UANC;AAOzB5B,EAAAA,cAAc,EAAE0B,sBAAUM,IAAV,CAAeJ,UAPN;AAQzB3B,EAAAA,iBAAiB,EAAEyB,sBAAUM,IAAV,CAAeJ,UART;AASzB1B,EAAAA,eAAe,EAAEwB,sBAAUM,IAAV,CAAeJ,UATP;AAUzBzB,EAAAA,kBAAkB,EAAEuB,sBAAUC,KAAV,CAAgBC;AAVX,CAA3B;AAaAvC,cAAc,CAAC4C,YAAf,GAA8B;AAC5BxC,EAAAA,OAAO,EAAE,EADmB;AAE5BE,EAAAA,kBAAkB,EAAE;AAFQ,CAA9B;;AAKA,IAAMuC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvB/B,IAAAA,IAAI,EAAE;AACJgC,MAAAA,MAAM,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CADzB;AAEJC,MAAAA,QAAQ,EAAE;AAFN;AADiB,GAAL;AAAA,CAApB;;eAMe,sBAAWL,MAAX,EAAmB7C,cAAnB,C","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      draggingElement,\n      duplicateResponses,\n      image: {\n        height,\n        src,\n        width\n      },\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img\n          src={src}\n          height={height}\n          width={width}\n        />\n        {responseContainers.map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter(a => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop\n              }}\n              duplicateResponses={duplicateResponses}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n            />\n          );\n        })}\n      </div>\n    )\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  draggingElement: PropTypes.shape({}).isRequired,\n  duplicateResponses: PropTypes.bool,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n  duplicateResponses: false\n};\n\nconst styles = theme => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative'\n  }\n});\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}
+{"version":3,"sources":["../src/image-container.jsx"],"names":["ImageContainer","props","answers","canDrag","classes","draggingElement","duplicateResponses","image","height","src","width","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","base","map","r","i","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","left","top","id","item","Component","propTypes","PropTypes","array","isRequired","bool","object","shape","func","defaultProps","styles","theme","margin","spacing","unit","position"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\n\nimport ImageDropTarget from './image-drop-target';\n\nclass ImageContainer extends Component {\n  render() {\n    const {\n      answers,\n      canDrag,\n      classes,\n      draggingElement,\n      duplicateResponses,\n      image: { height, src, width },\n      onAnswerSelect,\n      onDragAnswerBegin,\n      onDragAnswerEnd,\n      responseContainers,\n      showDashedBorder,\n    } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <img src={src} height={height} width={width} />\n        {responseContainers.map((r, i) => {\n          const rHeight = (r.height.replace('%', '') / 100) * height;\n          const rWidth = (r.width.replace('%', '') / 100) * width;\n          const rLeft = (r.x / 100) * width;\n          const rTop = (r.y / 100) * height;\n          const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n          return (\n            <ImageDropTarget\n              answers={answersParsed}\n              canDrag={canDrag}\n              containerStyle={{\n                height: rHeight,\n                width: rWidth,\n                left: rLeft,\n                top: rTop,\n              }}\n              duplicateResponses={duplicateResponses}\n              key={r.id + i}\n              draggingElement={draggingElement}\n              onDrop={(item) => onAnswerSelect(item, r.index)}\n              onDragAnswerBegin={onDragAnswerBegin}\n              onDragAnswerEnd={onDragAnswerEnd}\n              showDashedBorder={showDashedBorder}\n            />\n          );\n        })}\n      </div>\n    );\n  }\n}\n\nImageContainer.propTypes = {\n  answers: PropTypes.array.isRequired,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  draggingElement: PropTypes.shape({}).isRequired,\n  duplicateResponses: PropTypes.bool,\n  image: PropTypes.object.isRequired,\n  onAnswerSelect: PropTypes.func.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  responseContainers: PropTypes.array.isRequired,\n  showDashedBorder: PropTypes.bool,\n};\n\nImageContainer.defaultProps = {\n  classes: {},\n  duplicateResponses: false,\n};\n\nconst styles = (theme) => ({\n  base: {\n    margin: theme.spacing.unit * 2,\n    position: 'relative',\n  },\n});\nexport default withStyles(styles)(ImageContainer);\n"],"file":"image-container.js"}

package/lib/image-drop-target.js

@@ -30,10 +30,11 @@ var ImageDropTarget = function ImageDropTarget(_ref) {
       duplicateResponses = _ref.duplicateResponses,
       onDragAnswerBegin = _ref.onDragAnswerBegin,
       onDragAnswerEnd = _ref.onDragAnswerEnd,
+      showDashedBorder = _ref.showDashedBorder,
       connectDropTarget = _ref.connectDropTarget,
       isOverCurrent = _ref.isOverCurrent;
   return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-    className: "\n        ".concat(classes.responseContainer, "\n        ").concat(draggingElement.id ? classes.responseContainerActive : '', "\n      "),
+    className: "\n        ".concat(classes.responseContainer, "\n        ").concat(showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : '', "\n        ").concat(draggingElement.id ? classes.responseContainerActive : '', "\n      "),
     style: containerStyle
   }, isOverCurrent && !duplicateResponses ? /*#__PURE__*/_react["default"].createElement("div", {
     className: classes.dragOverContainer
@@ -67,7 +68,8 @@ ImageDropTarget.propTypes = {
   draggingElement: _propTypes["default"].object.isRequired,
   onDragAnswerBegin: _propTypes["default"].func.isRequired,
   onDragAnswerEnd: _propTypes["default"].func.isRequired,
-  onDrop: _propTypes["default"].func.isRequired
+  onDrop: _propTypes["default"].func.isRequired,
+  showDashedBorder: _propTypes["default"].bool
 };
 ImageDropTarget.defaultProps = {
   answer: {},
@@ -91,6 +93,9 @@ var styles = function styles() {
     responseContainerActive: {
       border: "2px solid ".concat(_renderUi.color.text()),
       backgroundColor: 'rgba(230, 242, 252, .8)'
+    },
+    responseContainerDashed: {
+      border: "2px dashed ".concat(_renderUi.color.text())
     }
   };
 };

package/lib/image-drop-target.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","connectDropTarget","isOverCurrent","responseContainer","id","responseContainerActive","dragOverContainer","__html","value","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","defaultProps","styles","display","flexWrap","backgroundColor","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  classes,\n  containerStyle,\n  draggingElement,\n  duplicateResponses,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  // dnd-related props\n  connectDropTarget,\n  isOverCurrent\n}) => connectDropTarget(\n  <div\n    className={`\n        ${classes.responseContainer}\n        ${draggingElement.id ? classes.responseContainerActive : ''}\n      `}\n    style={containerStyle}\n  >\n    {/* HOVER */}\n    {isOverCurrent && !duplicateResponses ? (\n      <div className={classes.dragOverContainer}>\n        <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />\n      </div>\n    ) : null}\n\n    {/* EXISTING ANSWERS */}\n    {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (\n      <div className={classes.answers}>\n        {answers.map(answer => (\n          <PossibleResponse\n            canDrag={canDrag}\n            containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n            key={answer.id}\n            data={answer}\n            onDragBegin={() => onDragAnswerBegin(answer)}\n            onDragEnd={onDragAnswerEnd}\n          />\n        ))}\n      </div>\n    ) : null}\n  </div>\n);\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {}\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap'\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content'\n  },\n  responseContainer: {\n    position: 'absolute'\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)'\n  }\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  }\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOverCurrent: monitor.isOver({ shallow: true })\n}))(Styled);\n"],"file":"image-drop-target.js"}
+{"version":3,"sources":["../src/image-drop-target.jsx"],"names":["ImageDropTarget","answers","canDrag","classes","containerStyle","draggingElement","duplicateResponses","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","connectDropTarget","isOverCurrent","responseContainer","id","responseContainerDashed","responseContainerActive","dragOverContainer","__html","value","length","map","answer","isCorrect","undefined","borderWidth","propTypes","PropTypes","object","bool","isRequired","func","onDrop","defaultProps","styles","display","flexWrap","backgroundColor","color","background","pointerEvents","width","position","border","text","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","item","getItem","c","types","response","connect","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst ImageDropTarget = ({\n  answers,\n  canDrag,\n  classes,\n  containerStyle,\n  draggingElement,\n  duplicateResponses,\n  onDragAnswerBegin,\n  onDragAnswerEnd,\n  showDashedBorder,\n  // dnd-related props\n  connectDropTarget,\n  isOverCurrent,\n}) =>\n  connectDropTarget(\n    <div\n      className={`\n        ${classes.responseContainer}\n        ${showDashedBorder && !draggingElement.id ? classes.responseContainerDashed : ''}\n        ${draggingElement.id ? classes.responseContainerActive : ''}\n      `}\n      style={containerStyle}\n    >\n      {/* HOVER */}\n      {isOverCurrent && !duplicateResponses ? (\n        <div className={classes.dragOverContainer}>\n          <span dangerouslySetInnerHTML={{ __html: draggingElement.value }} />\n        </div>\n      ) : null}\n\n      {/* EXISTING ANSWERS */}\n      {(!isOverCurrent && answers.length) || (duplicateResponses && answers.length) ? (\n        <div className={classes.answers}>\n          {answers.map((answer) => (\n            <PossibleResponse\n              canDrag={canDrag}\n              containerStyle={answer.isCorrect === undefined ? { borderWidth: 0 } : {}}\n              key={answer.id}\n              data={answer}\n              onDragBegin={() => onDragAnswerBegin(answer)}\n              onDragEnd={onDragAnswerEnd}\n            />\n          ))}\n        </div>\n      ) : null}\n    </div>,\n  );\n\nImageDropTarget.propTypes = {\n  answer: PropTypes.object,\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  containerStyle: PropTypes.object.isRequired,\n  draggingElement: PropTypes.object.isRequired,\n  onDragAnswerBegin: PropTypes.func.isRequired,\n  onDragAnswerEnd: PropTypes.func.isRequired,\n  onDrop: PropTypes.func.isRequired,\n  showDashedBorder: PropTypes.bool,\n};\n\nImageDropTarget.defaultProps = {\n  answer: {},\n  classes: {},\n};\n\nconst styles = () => ({\n  answers: {\n    display: 'flex',\n    flexWrap: 'wrap',\n  },\n  dragOverContainer: {\n    backgroundColor: color.background(),\n    pointerEvents: 'none',\n    width: 'fit-content',\n  },\n  responseContainer: {\n    position: 'absolute',\n  },\n  responseContainerActive: {\n    border: `2px solid ${color.text()}`,\n    backgroundColor: 'rgba(230, 242, 252, .8)',\n  },\n  responseContainerDashed: {\n    border: `2px dashed ${color.text()}`,\n  },\n});\n\nconst Styled = withStyles(styles)(ImageDropTarget);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onDrop(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOverCurrent: monitor.isOver({ shallow: true }),\n}))(Styled);\n"],"file":"image-drop-target.js"}

package/lib/index.js

@@ -31,7 +31,7 @@ var _root = _interopRequireDefault(require("./root"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 ImageClozeAssociation = /*#__PURE__*/function (_HTMLElement) {
   (0, _inherits2["default"])(ImageClozeAssociation, _HTMLElement);
@@ -62,6 +62,9 @@ var ImageClozeAssociation = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       if (s && !s.answers) {
         s.answers = [];

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["ImageClozeAssociation","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","ImageClozeAssociationComponent","model","session","updateAnswer","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;;;;;IAEqBA,qB;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CACE,IAAIC,8BAAJ,CACE,KAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKL,MAHT,CADF;;AAOA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aACEC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CADzE;AAGD;;;SAED,aAAYC,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAED,sBAAaO,IAAb,EAAmB;AACjB,WAAKN,QAAL,CAAcG,OAAd,GAAwBG,IAAxB;AAEA,WAAKZ,aAAL,CACE,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CADF;;AAIA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAAoD;AAC7DC,UAAAA,KAAK,EAAE,KAAKnB,MADiD;AAE7DoB,UAAAA,OAAO,EAAE,KAAKb,QAF+C;AAG7Dc,UAAAA,YAAY,EAAE,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB;AAH+C,SAApD,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA1DgDU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport {\n  ModelSetEvent,\n  SessionChangedEvent\n} from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return (\n      Array.isArray(this._session.answers) && this._session.answers.length > 0\n    );\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  updateAnswer(data) {\n    this._session.answers = data;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(ImageClozeAssociationComponent, {\n        model: this._model,\n        session: this._session,\n        updateAnswer: this.updateAnswer.bind(this)\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["ImageClozeAssociation","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","ImageClozeAssociationComponent","model","session","updateAnswer","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,qB;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CAAmB,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,UAAL,EAA9C,EAAiE,CAAC,CAAC,KAAKL,MAAxE,CAAnB;;AACA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aAAOC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CAA9E;AACD;;;SAWD,eAAc;AACZ,aAAO,KAAKJ,QAAZ;AACD,K;SAXD,aAAYK,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAMD,sBAAaO,IAAb,EAAmB;AACjB,WAAKN,QAAL,CAAcG,OAAd,GAAwBG,IAAxB;AAEA,WAAKZ,aAAL,CAAmB,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CAAnB;;AAEA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAAoD;AAC7DC,UAAAA,KAAK,EAAE,KAAKnB,MADiD;AAE7DoB,UAAAA,OAAO,EAAE,KAAKb,QAF+C;AAG7Dc,UAAAA,YAAY,EAAE,KAAKA,YAAL,CAAkBC,IAAlB,CAAuB,IAAvB;AAH+C,SAApD,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDArDgDU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport ImageClozeAssociationComponent from './root';\n\nexport default class ImageClozeAssociation extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return Array.isArray(this._session.answers) && this._session.answers.length > 0;\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  updateAnswer(data) {\n    this._session.answers = data;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(ImageClozeAssociationComponent, {\n        model: this._model,\n        session: this._session,\n        updateAnswer: this.updateAnswer.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/lib/interactive-section.js

@@ -29,7 +29,7 @@ var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 InteractiveSection = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(InteractiveSection, _React$Component);

package/lib/interactive-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","children","classname","getClassname","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","interactiveDefault","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,kB;;;;;;;;;;;;WACJ,wBAAe;AAAA,wBACwB,KAAKC,KAD7B;AAAA,UACLC,OADK,eACLA,OADK;AAAA,UACIC,eADJ,eACIA,eADJ;AAEb,UAAIC,SAAJ;;AAEA,cAAQD,eAAR;AACE,aAAKE,SAAL;AACED,UAAAA,SAAS,GAAG,oBAAZ;AAAkC;;AACpC,aAAK,IAAL;AACEA,UAAAA,SAAS,GAAG,oBAAZ;AAAkC;;AACpC;AACEA,UAAAA,SAAS,GAAG,sBAAZ;AAAoC;AANxC;;AAQA,aAAOF,OAAO,CAACE,SAAD,CAAd;AACD;;;WAED,kBAAS;AAAA,yBAC+B,KAAKH,KADpC;AAAA,UACCK,QADD,gBACCA,QADD;AAAA,UACWH,eADX,gBACWA,eADX;AAEP,UAAMI,SAAS,GAAG,KAAKC,YAAL,EAAlB;AACA,UAAMC,eAAe,GAAG;AACtBC,QAAAA,OAAO,EAAE,MADa;AAEtBC,QAAAA,MAAM,EAAE,QAFc;AAGtBC,QAAAA,SAAS,EAAE,CAAC;AAHU,OAAxB;AAMA,0BACE;AAAK,QAAA,SAAS,EAAEL;AAAhB,sBACE,gCAAC,0BAAD;AACE,QAAA,cAAc,EAAEE,eADlB;AAEE,QAAA,MAAM,MAFR;AAGE,QAAA,SAAS,EAAEN;AAHb,QADF,EAMGG,QANH,CADF;AAUD;;;EAnC8BO,kBAAMC,S;;AAsCvCd,kBAAkB,CAACe,SAAnB,GAA+B;AAC7Bb,EAAAA,OAAO,EAAEc,sBAAUC,MADU;AAE7BX,EAAAA,QAAQ,EAAEU,sBAAUE,SAAV,CAAoB,CAC5BF,sBAAUG,OADkB,EAE5BH,sBAAUI,KAFkB,CAApB,EAGPC,UAL0B;AAM7BlB,EAAAA,eAAe,EAAEa,sBAAUE,SAAV,CAAoB,CACnCF,sBAAUM,IADyB,EAEnCN,sBAAUO,MAFyB,CAApB;AANY,CAA/B;AAYAvB,kBAAkB,CAACwB,YAAnB,GAAkC;AAChCtB,EAAAA,OAAO,EAAE,EADuB;AAEhCC,EAAAA,eAAe,EAAEE;AAFe,CAAlC;;AAKA,IAAMoB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,kBAAkB,EAAE;AAClBC,MAAAA,MAAM,sBAAeC,gBAAMC,QAAN,EAAf;AADY,KADA;AAIpBC,IAAAA,kBAAkB,EAAE;AAClBH,MAAAA,MAAM,sBAAeC,gBAAMG,OAAN,EAAf;AADY,KAJA;AAOpBC,IAAAA,oBAAoB,EAAE;AACpBL,MAAAA,MAAM,sBAAeC,gBAAMK,SAAN,EAAf;AADc;AAPF,GAAP;AAAA,CAAf;;eAYe,sBAAWR,MAAX,EAAmBzB,kBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n  getClassname() {\n    const { classes, responseCorrect } = this.props;\n    let styleProp;\n\n    switch (responseCorrect) {\n      case undefined:\n        styleProp = 'interactiveDefault'; break;\n      case true:\n        styleProp = 'interactiveCorrect'; break;\n      default:\n        styleProp = 'interactiveIncorrect'; break;\n    }\n    return classes[styleProp];\n  }\n\n  render() {\n    const { children, responseCorrect } = this.props;\n    const classname = this.getClassname();\n    const evaluationStyle = {\n      display: 'flex',\n      margin: '0 auto',\n      marginTop: -14\n    };\n\n    return (\n      <div className={classname}>\n        <EvaluationIcon\n          containerStyle={evaluationStyle}\n          filled\n          isCorrect={responseCorrect}\n        />\n        {children}\n      </div>\n    );\n  }\n}\n\nInteractiveSection.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.oneOfType([\n    PropTypes.element,\n    PropTypes.array\n  ]).isRequired,\n  responseCorrect: PropTypes.oneOfType([\n    PropTypes.bool,\n    PropTypes.number\n  ])\n};\n\nInteractiveSection.defaultProps = {\n  classes: {},\n  responseCorrect: undefined\n};\n\nconst styles = () => ({\n  interactiveDefault: {\n    border: `1px solid ${color.disabled()}`\n  },\n  interactiveCorrect: {\n    border: `2px solid ${color.correct()}`\n  },\n  interactiveIncorrect: {\n    border: `2px solid ${color.incorrect()}`\n  }\n});\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}
+{"version":3,"sources":["../src/interactive-section.jsx"],"names":["InteractiveSection","props","classes","responseCorrect","styleProp","undefined","children","classname","getClassname","evaluationStyle","display","margin","marginTop","React","Component","propTypes","PropTypes","object","oneOfType","element","array","isRequired","bool","number","defaultProps","styles","interactiveDefault","border","color","disabled","interactiveCorrect","correct","interactiveIncorrect","incorrect"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,kB;;;;;;;;;;;;WACJ,wBAAe;AACb,wBAAqC,KAAKC,KAA1C;AAAA,UAAQC,OAAR,eAAQA,OAAR;AAAA,UAAiBC,eAAjB,eAAiBA,eAAjB;AACA,UAAIC,SAAJ;;AAEA,cAAQD,eAAR;AACE,aAAKE,SAAL;AACED,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF,aAAK,IAAL;AACEA,UAAAA,SAAS,GAAG,oBAAZ;AACA;;AACF;AACEA,UAAAA,SAAS,GAAG,sBAAZ;AACA;AATJ;;AAWA,aAAOF,OAAO,CAACE,SAAD,CAAd;AACD;;;WAED,kBAAS;AACP,yBAAsC,KAAKH,KAA3C;AAAA,UAAQK,QAAR,gBAAQA,QAAR;AAAA,UAAkBH,eAAlB,gBAAkBA,eAAlB;AACA,UAAMI,SAAS,GAAG,KAAKC,YAAL,EAAlB;AACA,UAAMC,eAAe,GAAG;AACtBC,QAAAA,OAAO,EAAE,MADa;AAEtBC,QAAAA,MAAM,EAAE,QAFc;AAGtBC,QAAAA,SAAS,EAAE,CAAC;AAHU,OAAxB;AAMA,0BACE;AAAK,QAAA,SAAS,EAAEL;AAAhB,sBACE,gCAAC,0BAAD;AAAgB,QAAA,cAAc,EAAEE,eAAhC;AAAiD,QAAA,MAAM,MAAvD;AAAwD,QAAA,SAAS,EAAEN;AAAnE,QADF,EAEGG,QAFH,CADF;AAMD;;;EAlC8BO,kBAAMC,S;;AAqCvCd,kBAAkB,CAACe,SAAnB,GAA+B;AAC7Bb,EAAAA,OAAO,EAAEc,sBAAUC,MADU;AAE7BX,EAAAA,QAAQ,EAAEU,sBAAUE,SAAV,CAAoB,CAACF,sBAAUG,OAAX,EAAoBH,sBAAUI,KAA9B,CAApB,EAA0DC,UAFvC;AAG7BlB,EAAAA,eAAe,EAAEa,sBAAUE,SAAV,CAAoB,CAACF,sBAAUM,IAAX,EAAiBN,sBAAUO,MAA3B,CAApB;AAHY,CAA/B;AAMAvB,kBAAkB,CAACwB,YAAnB,GAAkC;AAChCtB,EAAAA,OAAO,EAAE,EADuB;AAEhCC,EAAAA,eAAe,EAAEE;AAFe,CAAlC;;AAKA,IAAMoB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBC,IAAAA,kBAAkB,EAAE;AAClBC,MAAAA,MAAM,sBAAeC,gBAAMC,QAAN,EAAf;AADY,KADA;AAIpBC,IAAAA,kBAAkB,EAAE;AAClBH,MAAAA,MAAM,sBAAeC,gBAAMG,OAAN,EAAf;AADY,KAJA;AAOpBC,IAAAA,oBAAoB,EAAE;AACpBL,MAAAA,MAAM,sBAAeC,gBAAMK,SAAN,EAAf;AADc;AAPF,GAAP;AAAA,CAAf;;eAYe,sBAAWR,MAAX,EAAmBzB,kBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\n\nclass InteractiveSection extends React.Component {\n  getClassname() {\n    const { classes, responseCorrect } = this.props;\n    let styleProp;\n\n    switch (responseCorrect) {\n      case undefined:\n        styleProp = 'interactiveDefault';\n        break;\n      case true:\n        styleProp = 'interactiveCorrect';\n        break;\n      default:\n        styleProp = 'interactiveIncorrect';\n        break;\n    }\n    return classes[styleProp];\n  }\n\n  render() {\n    const { children, responseCorrect } = this.props;\n    const classname = this.getClassname();\n    const evaluationStyle = {\n      display: 'flex',\n      margin: '0 auto',\n      marginTop: -14,\n    };\n\n    return (\n      <div className={classname}>\n        <EvaluationIcon containerStyle={evaluationStyle} filled isCorrect={responseCorrect} />\n        {children}\n      </div>\n    );\n  }\n}\n\nInteractiveSection.propTypes = {\n  classes: PropTypes.object,\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,\n  responseCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n};\n\nInteractiveSection.defaultProps = {\n  classes: {},\n  responseCorrect: undefined,\n};\n\nconst styles = () => ({\n  interactiveDefault: {\n    border: `1px solid ${color.disabled()}`,\n  },\n  interactiveCorrect: {\n    border: `2px solid ${color.correct()}`,\n  },\n  interactiveIncorrect: {\n    border: `2px solid ${color.incorrect()}`,\n  },\n});\n\nexport default withStyles(styles)(InteractiveSection);\n"],"file":"interactive-section.js"}

package/lib/possible-response.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports["default"] = exports.PossibleResponse = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -31,13 +31,15 @@ var _styles = require("@material-ui/core/styles");
 
 var _renderUi = require("@pie-lib/render-ui");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _evaluationIcon = _interopRequireDefault(require("./evaluation-icon"));
 
 var _constants = _interopRequireDefault(require("./constants"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 PossibleResponse = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(PossibleResponse, _React$Component);
@@ -89,15 +91,16 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
           data = _this$props2.data;
       var additionalClass = this.getClassname();
       var evaluationStyle = {
-        alignSelf: 'center',
         fontSize: 14,
-        paddingRight: 2
+        position: 'absolute',
+        bottom: '3px',
+        right: '3px'
       };
       return connectDragSource( /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(classes.base, " ").concat(additionalClass),
         style: containerStyle
       }, /*#__PURE__*/_react["default"].createElement("span", {
-        className: classes.span,
+        className: (0, _classnames["default"])([classes.span, (0, _defineProperty2["default"])({}, classes.hiddenSpan, data.hidden)]),
         dangerouslySetInnerHTML: {
           __html: data.value
         }
@@ -110,6 +113,7 @@ var PossibleResponse = /*#__PURE__*/function (_React$Component) {
   return PossibleResponse;
 }(_react["default"].Component);
 
+exports.PossibleResponse = PossibleResponse;
 PossibleResponse.propTypes = {
   canDrag: _propTypes["default"].bool.isRequired,
   classes: _propTypes["default"].object,
@@ -128,9 +132,14 @@ PossibleResponse.defaultProps = {
 var styles = function styles() {
   return {
     base: {
+      position: 'relative',
       backgroundColor: _renderUi.color.background(),
       border: "1px solid ".concat(_renderUi.color.primary()),
       display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '28px',
+      padding: '0 3px',
       marginLeft: 2,
       marginTop: 2,
       width: 'fit-content'
@@ -143,6 +152,9 @@ var styles = function styles() {
     },
     span: {
       backgroundColor: _renderUi.color.background()
+    },
+    hiddenSpan: {
+      visibility: 'hidden'
     }
   };
 };

package/lib/possible-response.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","alignSelf","fontSize","paddingRight","base","span","__html","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nclass PossibleResponse extends React.Component {\n  getClassname = () => {\n    const { classes, data: { isCorrect } } = this.props;\n    let styleProp;\n\n    switch (isCorrect) {\n      case undefined:\n        styleProp = null; break;\n      case true:\n        styleProp = 'baseCorrect'; break;\n      default:\n        styleProp = 'baseIncorrect'; break;\n    }\n    return styleProp ? classes[styleProp] : '';\n  };\n\n  render() {\n    const { classes, connectDragSource, containerStyle, data } = this.props;\n    const additionalClass = this.getClassname();\n    const evaluationStyle = {\n      alignSelf: 'center',\n      fontSize: 14,\n      paddingRight: 2\n    };\n\n    return connectDragSource(\n      <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n        <span className={classes.span} dangerouslySetInnerHTML={{__html: data.value}}/>\n        <EvaluationIcon\n          isCorrect={data.isCorrect}\n          containerStyle={evaluationStyle}\n        />\n      </div>\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {}\n};\n\nconst styles = () => ({\n  base: {\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content'\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()}`\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()}`\n  },\n  span: {\n    backgroundColor: color.background()\n  }\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const { data, data: { id, value, containerIndex }, onDragBegin } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  }\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging()\n}))(Styled);\n"],"file":"possible-response.js"}
+{"version":3,"sources":["../src/possible-response.jsx"],"names":["PossibleResponse","props","classes","isCorrect","data","styleProp","undefined","connectDragSource","containerStyle","additionalClass","getClassname","evaluationStyle","fontSize","position","bottom","right","base","span","hiddenSpan","hidden","__html","value","React","Component","propTypes","canDrag","PropTypes","bool","isRequired","object","func","onDragBegin","onDragEnd","defaultProps","styles","backgroundColor","color","background","border","primary","display","alignItems","justifyContent","minHeight","padding","marginLeft","marginTop","width","baseCorrect","correct","baseIncorrect","incorrect","visibility","Styled","tileSource","beginDrag","id","containerIndex","endDrag","c","types","response","connect","monitor","dragSource","isDragging"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DragSource } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\nimport classNames from 'classnames';\n\nimport EvaluationIcon from './evaluation-icon';\nimport c from './constants';\n\nexport class PossibleResponse extends React.Component {\n  getClassname = () => {\n    const {\n      classes,\n      data: { isCorrect },\n    } = this.props;\n    let styleProp;\n\n    switch (isCorrect) {\n      case undefined:\n        styleProp = null;\n        break;\n      case true:\n        styleProp = 'baseCorrect';\n        break;\n      default:\n        styleProp = 'baseIncorrect';\n        break;\n    }\n    return styleProp ? classes[styleProp] : '';\n  };\n\n  render() {\n    const { classes, connectDragSource, containerStyle, data } = this.props;\n    const additionalClass = this.getClassname();\n    const evaluationStyle = {\n      fontSize: 14,\n      position: 'absolute',\n      bottom: '3px',\n      right: '3px',\n    };\n\n    return connectDragSource(\n      <div className={`${classes.base} ${additionalClass}`} style={containerStyle}>\n        <span\n          className={classNames([classes.span, { [classes.hiddenSpan]: data.hidden }])}\n          dangerouslySetInnerHTML={{ __html: data.value }}\n        />\n        <EvaluationIcon isCorrect={data.isCorrect} containerStyle={evaluationStyle} />\n      </div>,\n    );\n  }\n}\n\nPossibleResponse.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  connectDragSource: PropTypes.func,\n  containerStyle: PropTypes.object,\n  data: PropTypes.object.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponse.defaultProps = {\n  classes: {},\n  connectDragSource: () => {},\n  containerStyle: {},\n};\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n    backgroundColor: color.background(),\n    border: `1px solid ${color.primary()}`,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minHeight: '28px',\n    padding: '0 3px',\n    marginLeft: 2,\n    marginTop: 2,\n    width: 'fit-content',\n  },\n  baseCorrect: {\n    border: `2px solid ${color.correct()}`,\n  },\n  baseIncorrect: {\n    border: `2px solid ${color.incorrect()}`,\n  },\n  span: {\n    backgroundColor: color.background(),\n  },\n  hiddenSpan: {\n    visibility: 'hidden',\n  },\n});\n\nconst Styled = withStyles(styles)(PossibleResponse);\n\nconst tileSource = {\n  canDrag(props) {\n    const { canDrag } = props;\n    return canDrag;\n  },\n  beginDrag(props) {\n    const {\n      data,\n      data: { id, value, containerIndex },\n      onDragBegin,\n    } = props;\n    onDragBegin(data);\n    return {\n      id,\n      value,\n      containerIndex,\n    };\n  },\n  endDrag(props) {\n    props.onDragEnd();\n  },\n};\n\nexport default DragSource(c.types.response, tileSource, (connect, monitor) => ({\n  connectDragSource: connect.dragSource(),\n  isDragging: monitor.isDragging(),\n}))(Styled);\n"],"file":"possible-response.js"}

package/lib/possible-responses.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","connectDropTarget","data","isOverCurrent","onDragBegin","onDragEnd","base","active","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","onAnswerRemove","func","defaultProps","styles","theme","border","color","primary","backgroundColor","background","display","flexWrap","justifyContent","padding","spacing","unit","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","getItem","c","types","response","connect","dropTarget"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAEA,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,MACxBC,OADwB,QACxBA,OADwB;AAAA,MACfC,OADe,QACfA,OADe;AAAA,MACNC,iBADM,QACNA,iBADM;AAAA,MACaC,IADb,QACaA,IADb;AAAA,MACmBC,aADnB,QACmBA,aADnB;AAAA,MACkCC,WADlC,QACkCA,WADlC;AAAA,MAC+CC,SAD/C,QAC+CA,SAD/C;AAAA,SAEpBJ,iBAAiB,eACrB;AAAK,IAAA,SAAS,YAAKD,OAAO,CAACM,IAAb,cAAqBH,aAAa,GAAGH,OAAO,CAACO,MAAX,GAAoB,EAAtD;AAAd,KACGL,IAAI,CAACM,GAAL,CAAS,UAAAC,IAAI;AAAA,wBACZ,gCAAC,4BAAD;AACE,MAAA,OAAO,EAAEV,OADX;AAEE,MAAA,GAAG,EAAEU,IAAI,CAACC,EAFZ;AAGE,MAAA,IAAI,EAAED,IAHR;AAIE,MAAA,WAAW,EAAEL,WAJf;AAKE,MAAA,SAAS,EAAEC;AALb,MADY;AAAA,GAAb,CADH,CADqB,CAFG;AAAA,CAA1B;;AAgBAP,iBAAiB,CAACa,SAAlB,GAA8B;AAC5BZ,EAAAA,OAAO,EAAEa,sBAAUC,IAAV,CAAeC,UADI;AAE5Bd,EAAAA,OAAO,EAAEY,sBAAUG,MAFS;AAG5Bb,EAAAA,IAAI,EAAEU,sBAAUI,KAAV,CAAgBF,UAHM;AAI5BG,EAAAA,cAAc,EAAEL,sBAAUM,IAAV,CAAeJ,UAJH;AAK5BV,EAAAA,WAAW,EAAEQ,sBAAUM,IAAV,CAAeJ,UALA;AAM5BT,EAAAA,SAAS,EAAEO,sBAAUM,IAAV,CAAeJ;AANE,CAA9B;AASAhB,iBAAiB,CAACqB,YAAlB,GAAiC;AAC/BnB,EAAAA,OAAO,EAAE;AADsB,CAAjC;;AAIA,IAAMoB,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBd,IAAAA,MAAM,EAAE;AACNe,MAAAA,MAAM,sBAAeC,gBAAMC,OAAN,EAAf;AADA,KADe;AAIvBlB,IAAAA,IAAI,EAAE;AACJmB,MAAAA,eAAe,EAAEF,gBAAMG,UAAN,EADb;AAEJC,MAAAA,OAAO,EAAE,MAFL;AAGJC,MAAAA,QAAQ,EAAE,MAHN;AAIJC,MAAAA,cAAc,EAAE,QAJZ;AAKJC,MAAAA,OAAO,EAAET,KAAK,CAACU,OAAN,CAAcC,IAAd,GAAqB;AAL1B;AAJiB,GAAL;AAAA,CAApB;;AAaA,IAAMC,MAAM,GAAG,sBAAWb,MAAX,EAAmBtB,iBAAnB,CAAf;AAEA,IAAMoC,UAAU,GAAG;AACjBC,EAAAA,KADiB,iBACXC,KADW,EACJC,OADI,EACK;AACpBA,IAAAA,OAAO,CAACC,MAAR,CAAe;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAAf;AACD,GAHgB;AAIjBC,EAAAA,IAJiB,gBAIZJ,KAJY,EAILC,OAJK,EAII;AACnB,QAAM5B,IAAI,GAAG4B,OAAO,CAACI,OAAR,EAAb;AACAL,IAAAA,KAAK,CAACnB,cAAN,CAAqBR,IAArB;AACD;AAPgB,CAAnB;;eAUe,sBAAWiC,sBAAEC,KAAF,CAAQC,QAAnB,EAA6BV,UAA7B,EAAyC,UAACW,OAAD,EAAUR,OAAV;AAAA,SAAuB;AAC7EpC,IAAAA,iBAAiB,EAAE4C,OAAO,CAACC,UAAR,EAD0D;AAE7E3C,IAAAA,aAAa,EAAEkC,OAAO,CAACC,MAAR,CAAe;AAAEC,MAAAA,OAAO,EAAE;AAAX,KAAf;AAF8D,GAAvB;AAAA,CAAzC,EAGXN,MAHW,C","sourcesContent":["import React  from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst PossibleResponses = ({\n  canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd\n}) => connectDropTarget(\n  <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>\n    {data.map(item => (\n      <PossibleResponse\n        canDrag={canDrag}\n        key={item.id}\n        data={item}\n        onDragBegin={onDragBegin}\n        onDragEnd={onDragEnd}\n      />\n    ))}\n  </div>\n);\n\nPossibleResponses.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  data: PropTypes.array.isRequired,\n  onAnswerRemove: PropTypes.func.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired\n};\n\nPossibleResponses.defaultProps = {\n  classes: {}\n};\n\nconst styles = theme => ({\n  active: {\n    border: `1px solid ${color.primary()}`\n  },\n  base: {\n    backgroundColor: color.background(),\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    padding: theme.spacing.unit * 2\n  }\n});\n\nconst Styled = withStyles(styles)(PossibleResponses);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onAnswerRemove(item);\n  }\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOverCurrent: monitor.isOver({ shallow: true })\n}))(Styled);\n\n"],"file":"possible-responses.js"}
+{"version":3,"sources":["../src/possible-responses.jsx"],"names":["PossibleResponses","canDrag","classes","connectDropTarget","data","isOverCurrent","onDragBegin","onDragEnd","base","active","map","item","id","propTypes","PropTypes","bool","isRequired","object","array","onAnswerRemove","func","defaultProps","styles","theme","border","color","primary","backgroundColor","background","display","flexWrap","justifyContent","padding","spacing","unit","Styled","tileSource","hover","props","monitor","isOver","shallow","drop","getItem","c","types","response","connect","dropTarget"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { DropTarget } from '@pie-lib/drag';\nimport { withStyles } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nimport PossibleResponse from './possible-response';\nimport c from './constants';\n\nconst PossibleResponses = ({ canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd }) =>\n  connectDropTarget(\n    <div className={`${classes.base} ${isOverCurrent ? classes.active : ''}`}>\n      {data.map((item) => (\n        <PossibleResponse canDrag={canDrag} key={item.id} data={item} onDragBegin={onDragBegin} onDragEnd={onDragEnd} />\n      ))}\n    </div>,\n  );\n\nPossibleResponses.propTypes = {\n  canDrag: PropTypes.bool.isRequired,\n  classes: PropTypes.object,\n  data: PropTypes.array.isRequired,\n  onAnswerRemove: PropTypes.func.isRequired,\n  onDragBegin: PropTypes.func.isRequired,\n  onDragEnd: PropTypes.func.isRequired,\n};\n\nPossibleResponses.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  active: {\n    border: `1px solid ${color.primary()}`,\n  },\n  base: {\n    backgroundColor: color.background(),\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'center',\n    padding: theme.spacing.unit * 2,\n  },\n});\n\nconst Styled = withStyles(styles)(PossibleResponses);\n\nconst tileSource = {\n  hover(props, monitor) {\n    monitor.isOver({ shallow: true });\n  },\n  drop(props, monitor) {\n    const item = monitor.getItem();\n    props.onAnswerRemove(item);\n  },\n};\n\nexport default DropTarget(c.types.response, tileSource, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOverCurrent: monitor.isOver({ shallow: true }),\n}))(Styled);\n"],"file":"possible-responses.js"}