@pie-element/categorize 11.3.4-next.3 → 12.0.0-beta.1

package/configure/lib/design/categories/choice-preview.js

@@ -1,143 +1,78 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChoicePreview = 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.ChoicePreview = void 0;
 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 _classnames = _interopRequireDefault(require("classnames"));
-
+var _styles = require("@mui/material/styles");
 var _drag = require("@pie-lib/drag");
-
-var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-
-var _RemoveCircleOutline = _interopRequireDefault(require("@material-ui/icons/RemoveCircleOutline"));
-
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _RemoveCircleOutline = _interopRequireDefault(require("@mui/icons-material/RemoveCircleOutline"));
 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 ChoicePreview = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(ChoicePreview, _React$Component);
-
-  var _super = _createSuper(ChoicePreview);
-
-  function ChoicePreview() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ChoicePreview);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "delete", function () {
-      var _this$props = _this.props,
-          onDelete = _this$props.onDelete,
-          choice = _this$props.choice;
+const ChoicePreviewContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  overflow: 'auto'
+});
+const DeleteIconButton = (0, _styles.styled)(_IconButton.default)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  color: `${_renderUi.color.tertiary()} !important`
+});
+class ChoicePreview extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "delete", () => {
+      const {
+        onDelete,
+        choice
+      } = this.props;
       onDelete(choice);
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(ChoicePreview, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          alternateResponseIndex = _this$props2.alternateResponseIndex,
-          category = _this$props2.category,
-          classes = _this$props2.classes,
-          className = _this$props2.className,
-          choice = _this$props2.choice,
-          choiceIndex = _this$props2.choiceIndex;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.choicePreview, className)
-      }, choice ? /*#__PURE__*/_react["default"].createElement(_drag.Choice, {
-        alternateResponseIndex: alternateResponseIndex,
-        category: category,
-        choice: choice,
-        choiceIndex: choiceIndex,
-        className: classes.overflowChoice,
-        onRemoveChoice: function onRemoveChoice() {
-          return _this2["delete"]();
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.HtmlAndMath, {
-        html: choice === null || choice === void 0 ? void 0 : choice.content,
-        className: "".concat(classes.breakWord)
-      }), /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
-        "aria-label": "delete",
-        className: (0, _classnames["default"])(classes["delete"], classes.customColor),
-        onClick: this["delete"]
-      }, /*#__PURE__*/_react["default"].createElement(_RemoveCircleOutline["default"], null))) : null);
-    }
-  }]);
-  return ChoicePreview;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      choice,
+      choiceIndex
+    } = this.props;
+
+    // Generate unique ID for each instance to distinguish multiple instances of the same choice
+    const categoryId = category && category.id;
+    const uniqueId = alternateResponseIndex !== undefined ? `${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}` : `${choice.id}-${categoryId}-${choiceIndex}`;
+    return /*#__PURE__*/_react.default.createElement(ChoicePreviewContainer, null, choice ? /*#__PURE__*/_react.default.createElement(_drag.DraggableChoice, {
+      alternateResponseIndex: alternateResponseIndex,
+      category: category,
+      choice: choice,
+      choiceIndex: choiceIndex,
+      onRemoveChoice: this.delete,
+      type: 'choice-preview',
+      id: uniqueId,
+      categoryId: categoryId
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.HtmlAndMath, {
+      html: choice?.content
+    })) : null, /*#__PURE__*/_react.default.createElement(DeleteIconButton, {
+      "aria-label": "delete",
+      onClick: this.delete,
+      size: "large"
+    }, /*#__PURE__*/_react.default.createElement(_RemoveCircleOutline.default, null)));
+  }
+}
 exports.ChoicePreview = ChoicePreview;
-(0, _defineProperty2["default"])(ChoicePreview, "propTypes", {
-  alternateResponseIndex: _propTypes["default"].number,
-  category: _propTypes["default"].object,
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  choice: _propTypes["default"].object.isRequired,
-  choiceIndex: _propTypes["default"].number,
-  onDelete: _propTypes["default"].func.isRequired
+(0, _defineProperty2.default)(ChoicePreview, "propTypes", {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choice: _propTypes.default.object.isRequired,
+  choiceIndex: _propTypes.default.number,
+  onDelete: _propTypes.default.func
 });
-(0, _defineProperty2["default"])(ChoicePreview, "defaultProps", {});
-
-var styles = function styles() {
-  return {
-    choicePreview: {
-      position: 'relative',
-      overflow: 'auto'
-    },
-    "delete": {
-      position: 'absolute',
-      right: 0,
-      top: 0
-    },
-    breakWord: {
-      maxWidth: '90%',
-      wordBreak: 'break-all'
-    },
-    customColor: {
-      color: "".concat(_renderUi.color.tertiary(), " !important")
-    },
-    overflowChoice: {
-      overflow: 'auto'
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(ChoicePreview);
-
-exports["default"] = _default;
-//# sourceMappingURL=choice-preview.js.map
+(0, _defineProperty2.default)(ChoicePreview, "defaultProps", {
+  onDelete: () => {}
+});
+var _default = exports.default = ChoicePreview;
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9wcm9wVHlwZXMiLCJfc3R5bGVzIiwiX2RyYWciLCJfSWNvbkJ1dHRvbiIsIl9SZW1vdmVDaXJjbGVPdXRsaW5lIiwiX3JlbmRlclVpIiwiQ2hvaWNlUHJldmlld0NvbnRhaW5lciIsInN0eWxlZCIsInBvc2l0aW9uIiwib3ZlcmZsb3ciLCJEZWxldGVJY29uQnV0dG9uIiwiSWNvbkJ1dHRvbiIsInJpZ2h0IiwidG9wIiwiY29sb3IiLCJ0ZXJ0aWFyeSIsIkNob2ljZVByZXZpZXciLCJSZWFjdCIsIkNvbXBvbmVudCIsImNvbnN0cnVjdG9yIiwiYXJncyIsIl9kZWZpbmVQcm9wZXJ0eTIiLCJkZWZhdWx0Iiwib25EZWxldGUiLCJjaG9pY2UiLCJwcm9wcyIsInJlbmRlciIsImFsdGVybmF0ZVJlc3BvbnNlSW5kZXgiLCJjYXRlZ29yeSIsImNob2ljZUluZGV4IiwiY2F0ZWdvcnlJZCIsImlkIiwidW5pcXVlSWQiLCJ1bmRlZmluZWQiLCJjcmVhdGVFbGVtZW50IiwiRHJhZ2dhYmxlQ2hvaWNlIiwib25SZW1vdmVDaG9pY2UiLCJkZWxldGUiLCJ0eXBlIiwiSHRtbEFuZE1hdGgiLCJodG1sIiwiY29udGVudCIsIm9uQ2xpY2siLCJzaXplIiwiZXhwb3J0cyIsIlByb3BUeXBlcyIsIm51bWJlciIsIm9iamVjdCIsImlzUmVxdWlyZWQiLCJmdW5jIiwiX2RlZmF1bHQiXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZGVzaWduL2NhdGVnb3JpZXMvY2hvaWNlLXByZXZpZXcuanN4Il0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgc3R5bGVkIH0gZnJvbSAnQG11aS9tYXRlcmlhbC9zdHlsZXMnO1xuaW1wb3J0IHsgRHJhZ2dhYmxlQ2hvaWNlIH0gZnJvbSAnQHBpZS1saWIvZHJhZyc7XG5pbXBvcnQgSWNvbkJ1dHRvbiBmcm9tICdAbXVpL21hdGVyaWFsL0ljb25CdXR0b24nO1xuaW1wb3J0IFJlbW92ZUNpcmNsZU91dGxpbmVJY29uIGZyb20gJ0BtdWkvaWNvbnMtbWF0ZXJpYWwvUmVtb3ZlQ2lyY2xlT3V0bGluZSc7XG5pbXBvcnQgeyBIdG1sQW5kTWF0aCB9IGZyb20gJ0BwaWUtbGliL3JlbmRlci11aSc7XG5pbXBvcnQgeyBjb2xvciB9IGZyb20gJ0BwaWUtbGliL3JlbmRlci11aSc7XG5cbmNvbnN0IENob2ljZVByZXZpZXdDb250YWluZXIgPSBzdHlsZWQoJ2RpdicpKHtcbiAgcG9zaXRpb246ICdyZWxhdGl2ZScsXG4gIG92ZXJmbG93OiAnYXV0bycsXG59KTtcblxuY29uc3QgRGVsZXRlSWNvbkJ1dHRvbiA9IHN0eWxlZChJY29uQnV0dG9uKSh7XG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICByaWdodDogMCxcbiAgdG9wOiAwLFxuICBjb2xvcjogYCR7Y29sb3IudGVydGlhcnkoKX0gIWltcG9ydGFudGAsXG59KTtcblxuZXhwb3J0IGNsYXNzIENob2ljZVByZXZpZXcgZXh0ZW5kcyBSZWFjdC5Db21wb25lbnQge1xuICBzdGF0aWMgcHJvcFR5cGVzID0ge1xuICAgIGFsdGVybmF0ZVJlc3BvbnNlSW5kZXg6IFByb3BUeXBlcy5udW1iZXIsXG4gICAgY2F0ZWdvcnk6IFByb3BUeXBlcy5vYmplY3QsXG4gICAgY2hvaWNlOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG4gICAgY2hvaWNlSW5kZXg6IFByb3BUeXBlcy5udW1iZXIsXG4gICAgb25EZWxldGU6IFByb3BUeXBlcy5mdW5jLFxuICB9O1xuICBzdGF0aWMgZGVmYXVsdFByb3BzID0ge1xuICAgIG9uRGVsZXRlOiAoKSA9PiB7fSxcbiAgfTtcblxuICBkZWxldGUgPSAoKSA9PiB7XG4gICAgY29uc3QgeyBvbkRlbGV0ZSwgY2hvaWNlIH0gPSB0aGlzLnByb3BzO1xuICAgIG9uRGVsZXRlKGNob2ljZSk7XG4gIH07XG5cbiAgcmVuZGVyKCkge1xuICAgIGNvbnN0IHsgYWx0ZXJuYXRlUmVzcG9uc2VJbmRleCwgY2F0ZWdvcnksIGNob2ljZSwgY2hvaWNlSW5kZXggfSA9IHRoaXMucHJvcHM7XG5cbiAgICAvLyBHZW5lcmF0ZSB1bmlxdWUgSUQgZm9yIGVhY2ggaW5zdGFuY2UgdG8gZGlzdGluZ3Vpc2ggbXVsdGlwbGUgaW5zdGFuY2VzIG9mIHRoZSBzYW1lIGNob2ljZVxuICAgIGNvbnN0IGNhdGVnb3J5SWQgPSBjYXRlZ29yeSAmJiBjYXRlZ29yeS5pZDtcbiAgICBjb25zdCB1bmlxdWVJZCA9XG4gICAgICBhbHRlcm5hdGVSZXNwb25zZUluZGV4ICE9PSB1bmRlZmluZWRcbiAgICAgICAgPyBgJHtjaG9pY2UuaWR9LSR7Y2F0ZWdvcnlJZH0tJHtjaG9pY2VJbmRleH0tYWx0LSR7YWx0ZXJuYXRlUmVzcG9uc2VJbmRleH1gXG4gICAgICAgIDogYCR7Y2hvaWNlLmlkfS0ke2NhdGVnb3J5SWR9LSR7Y2hvaWNlSW5kZXh9YDtcblxuICAgIHJldHVybiAoXG4gICAgICA8Q2hvaWNlUHJldmlld0NvbnRhaW5lcj5cbiAgICAgICAge2Nob2ljZSA/IChcbiAgICAgICAgICA8RHJhZ2dhYmxlQ2hvaWNlXG4gICAgICAgICAgICBhbHRlcm5hdGVSZXNwb25zZUluZGV4PXthbHRlcm5hdGVSZXNwb25zZUluZGV4fVxuICAgICAgICAgICAgY2F0ZWdvcnk9e2NhdGVnb3J5fVxuICAgICAgICAgICAgY2hvaWNlPXtjaG9pY2V9XG4gICAgICAgICAgICBjaG9pY2VJbmRleD17Y2hvaWNlSW5kZXh9XG4gICAgICAgICAgICBvblJlbW92ZUNob2ljZT17dGhpcy5kZWxldGV9XG4gICAgICAgICAgICB0eXBlPXsnY2hvaWNlLXByZXZpZXcnfVxuICAgICAgICAgICAgaWQ9e3VuaXF1ZUlkfVxuICAgICAgICAgICAgY2F0ZWdvcnlJZD17Y2F0ZWdvcnlJZH1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8SHRtbEFuZE1hdGggaHRtbD17Y2hvaWNlPy5jb250ZW50fSAvPlxuICAgICAgICAgIDwvRHJhZ2dhYmxlQ2hvaWNlPlxuICAgICAgICApIDogbnVsbH1cbiAgICAgICAgPERlbGV0ZUljb25CdXR0b24gYXJpYS1sYWJlbD1cImRlbGV0ZVwiIG9uQ2xpY2s9e3RoaXMuZGVsZXRlfSBzaXplPVwibGFyZ2VcIj5cbiAgICAgICAgICA8UmVtb3ZlQ2lyY2xlT3V0bGluZUljb24gLz5cbiAgICAgICAgPC9EZWxldGVJY29uQnV0dG9uPlxuICAgICAgPC9DaG9pY2VQcmV2aWV3Q29udGFpbmVyPlxuICAgICk7XG4gIH1cbn1cblxuZXhwb3J0IGRlZmF1bHQgQ2hvaWNlUHJldmlldztcbiJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFBQSxJQUFBQSxNQUFBLEdBQUFDLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBQyxVQUFBLEdBQUFGLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBRSxPQUFBLEdBQUFGLE9BQUE7QUFDQSxJQUFBRyxLQUFBLEdBQUFILE9BQUE7QUFDQSxJQUFBSSxXQUFBLEdBQUFMLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBSyxvQkFBQSxHQUFBTixzQkFBQSxDQUFBQyxPQUFBO0FBQ0EsSUFBQU0sU0FBQSxHQUFBTixPQUFBO0FBR0EsTUFBTU8sc0JBQXNCLEdBQUcsSUFBQUMsY0FBTSxFQUFDLEtBQUssQ0FBQyxDQUFDO0VBQzNDQyxRQUFRLEVBQUUsVUFBVTtFQUNwQkMsUUFBUSxFQUFFO0FBQ1osQ0FBQyxDQUFDO0FBRUYsTUFBTUMsZ0JBQWdCLEdBQUcsSUFBQUgsY0FBTSxFQUFDSSxtQkFBVSxDQUFDLENBQUM7RUFDMUNILFFBQVEsRUFBRSxVQUFVO0VBQ3BCSSxLQUFLLEVBQUUsQ0FBQztFQUNSQyxHQUFHLEVBQUUsQ0FBQztFQUNOQyxLQUFLLEVBQUUsR0FBR0EsZUFBSyxDQUFDQyxRQUFRLENBQUMsQ0FBQztBQUM1QixDQUFDLENBQUM7QUFFSyxNQUFNQyxhQUFhLFNB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

package/configure/lib/design/categories/choice-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/choice-preview.jsx"],"names":["ChoicePreview","props","onDelete","choice","alternateResponseIndex","category","classes","className","choiceIndex","choicePreview","overflowChoice","content","breakWord","customColor","React","Component","PropTypes","number","object","isRequired","string","func","styles","position","overflow","right","top","maxWidth","wordBreak","color","tertiary"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAGaA,a;;;;;;;;;;;;;;;+FAYF,YAAM;AACb,wBAA6B,MAAKC,KAAlC;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,MAAlB,eAAkBA,MAAlB;AACAD,MAAAA,QAAQ,CAACC,MAAD,CAAR;AACD,K;;;;;;WAED,kBAAS;AAAA;;AACP,yBAAsF,KAAKF,KAA3F;AAAA,UAAQG,sBAAR,gBAAQA,sBAAR;AAAA,UAAgCC,QAAhC,gBAAgCA,QAAhC;AAAA,UAA0CC,OAA1C,gBAA0CA,OAA1C;AAAA,UAAmDC,SAAnD,gBAAmDA,SAAnD;AAAA,UAA8DJ,MAA9D,gBAA8DA,MAA9D;AAAA,UAAsEK,WAAtE,gBAAsEA,WAAtE;AACA,0BACE;AAAK,QAAA,SAAS,EAAE,4BAAWF,OAAO,CAACG,aAAnB,EAAkCF,SAAlC;AAAhB,SACGJ,MAAM,gBACL,gCAAC,YAAD;AACE,QAAA,sBAAsB,EAAEC,sBAD1B;AAEE,QAAA,QAAQ,EAAEC,QAFZ;AAGE,QAAA,MAAM,EAAEF,MAHV;AAIE,QAAA,WAAW,EAAEK,WAJf;AAKE,QAAA,SAAS,EAAEF,OAAO,CAACI,cALrB;AAME,QAAA,cAAc,EAAE;AAAA,iBAAM,MAAI,UAAJ,EAAN;AAAA;AANlB,sBAQE,gCAAC,qBAAD;AAAa,QAAA,IAAI,EAAEP,MAAF,aAAEA,MAAF,uBAAEA,MAAM,CAAEQ,OAA3B;AAAoC,QAAA,SAAS,YAAKL,OAAO,CAACM,SAAb;AAA7C,QARF,eASE,gCAAC,sBAAD;AACE,sBAAW,QADb;AAEE,QAAA,SAAS,EAAE,4BAAWN,OAAO,UAAlB,EAA2BA,OAAO,CAACO,WAAnC,CAFb;AAGE,QAAA,OAAO,EAAE;AAHX,sBAKE,gCAAC,+BAAD,OALF,CATF,CADK,GAkBH,IAnBN,CADF;AAuBD;;;EA1CgCC,kBAAMC,S;;;iCAA5Bf,a,eACQ;AACjBI,EAAAA,sBAAsB,EAAEY,sBAAUC,MADjB;AAEjBZ,EAAAA,QAAQ,EAAEW,sBAAUE,MAFH;AAGjBZ,EAAAA,OAAO,EAAEU,sBAAUE,MAAV,CAAiBC,UAHT;AAIjBZ,EAAAA,SAAS,EAAES,sBAAUI,MAJJ;AAKjBjB,EAAAA,MAAM,EAAEa,sBAAUE,MAAV,CAAiBC,UALR;AAMjBX,EAAAA,WAAW,EAAEQ,sBAAUC,MANN;AAOjBf,EAAAA,QAAQ,EAAEc,sBAAUK,IAAV,CAAeF;AAPR,C;iCADRnB,a,kBAUW,E;;AAkCxB,IAAMsB,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBb,IAAAA,aAAa,EAAE;AACbc,MAAAA,QAAQ,EAAE,UADG;AAEbC,MAAAA,QAAQ,EAAE;AAFG,KADK;AAKpB,cAAQ;AACND,MAAAA,QAAQ,EAAE,UADJ;AAENE,MAAAA,KAAK,EAAE,CAFD;AAGNC,MAAAA,GAAG,EAAE;AAHC,KALY;AAUpBd,IAAAA,SAAS,EAAE;AACTe,MAAAA,QAAQ,EAAE,KADD;AAETC,MAAAA,SAAS,EAAE;AAFF,KAVS;AAcpBf,IAAAA,WAAW,EAAE;AACXgB,MAAAA,KAAK,YAAKA,gBAAMC,QAAN,EAAL;AADM,KAdO;AAiBpBpB,IAAAA,cAAc,EAAE;AACdc,MAAAA,QAAQ,EAAE;AADI;AAjBI,GAAP;AAAA,CAAf;;eAqBe,wBAAWF,MAAX,EAAmBtB,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport { Choice } from '@pie-lib/drag';\nimport IconButton from '@material-ui/core/IconButton';\nimport RemoveCircleOutlineIcon from '@material-ui/icons/RemoveCircleOutline';\nimport { HtmlAndMath } from '@pie-lib/render-ui';\nimport { color } from '@pie-lib/render-ui';\n\nexport class ChoicePreview extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    choice: PropTypes.object.isRequired,\n    choiceIndex: PropTypes.number,\n    onDelete: PropTypes.func.isRequired,\n  };\n  static defaultProps = {};\n\n  delete = () => {\n    const { onDelete, choice } = this.props;\n    onDelete(choice);\n  };\n\n  render() {\n    const { alternateResponseIndex, category, classes, className, choice, choiceIndex } = this.props;\n    return (\n      <div className={classNames(classes.choicePreview, className)}>\n        {choice ? (\n          <Choice\n            alternateResponseIndex={alternateResponseIndex}\n            category={category}\n            choice={choice}\n            choiceIndex={choiceIndex}\n            className={classes.overflowChoice}\n            onRemoveChoice={() => this.delete()}\n          >\n            <HtmlAndMath html={choice?.content} className={`${classes.breakWord}`} />\n            <IconButton\n              aria-label=\"delete\"\n              className={classNames(classes.delete, classes.customColor)}\n              onClick={this.delete}\n            >\n              <RemoveCircleOutlineIcon />\n            </IconButton>\n          </Choice>\n        ) : null}\n      </div>\n    );\n  }\n}\nconst styles = () => ({\n  choicePreview: {\n    position: 'relative',\n    overflow: 'auto',\n  },\n  delete: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  breakWord: {\n    maxWidth: '90%',\n    wordBreak: 'break-all',\n  },\n  customColor: {\n    color: `${color.tertiary()} !important`,\n  },\n  overflowChoice: {\n    overflow: 'auto',\n  },\n});\nexport default withStyles(styles)(ChoicePreview);\n"],"file":"choice-preview.js"}
+{"version":3,"file":"choice-preview.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_drag","_IconButton","_RemoveCircleOutline","_renderUi","ChoicePreviewContainer","styled","position","overflow","DeleteIconButton","IconButton","right","top","color","tertiary","ChoicePreview","React","Component","constructor","args","_defineProperty2","default","onDelete","choice","props","render","alternateResponseIndex","category","choiceIndex","categoryId","id","uniqueId","undefined","createElement","DraggableChoice","onRemoveChoice","delete","type","HtmlAndMath","html","content","onClick","size","exports","PropTypes","number","object","isRequired","func","_default"],"sources":["../../../src/design/categories/choice-preview.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { DraggableChoice } from '@pie-lib/drag';\nimport IconButton from '@mui/material/IconButton';\nimport RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';\nimport { HtmlAndMath } from '@pie-lib/render-ui';\nimport { color } from '@pie-lib/render-ui';\n\nconst ChoicePreviewContainer = styled('div')({\n  position: 'relative',\n  overflow: 'auto',\n});\n\nconst DeleteIconButton = styled(IconButton)({\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  color: `${color.tertiary()} !important`,\n});\n\nexport class ChoicePreview extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object,\n    choice: PropTypes.object.isRequired,\n    choiceIndex: PropTypes.number,\n    onDelete: PropTypes.func,\n  };\n  static defaultProps = {\n    onDelete: () => {},\n  };\n\n  delete = () => {\n    const { onDelete, choice } = this.props;\n    onDelete(choice);\n  };\n\n  render() {\n    const { alternateResponseIndex, category, choice, choiceIndex } = this.props;\n\n    // Generate unique ID for each instance to distinguish multiple instances of the same choice\n    const categoryId = category && category.id;\n    const uniqueId =\n      alternateResponseIndex !== undefined\n        ? `${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}`\n        : `${choice.id}-${categoryId}-${choiceIndex}`;\n\n    return (\n      <ChoicePreviewContainer>\n        {choice ? (\n          <DraggableChoice\n            alternateResponseIndex={alternateResponseIndex}\n            category={category}\n            choice={choice}\n            choiceIndex={choiceIndex}\n            onRemoveChoice={this.delete}\n            type={'choice-preview'}\n            id={uniqueId}\n            categoryId={categoryId}\n          >\n            <HtmlAndMath html={choice?.content} />\n          </DraggableChoice>\n        ) : null}\n        <DeleteIconButton aria-label=\"delete\" onClick={this.delete} size=\"large\">\n          <RemoveCircleOutlineIcon />\n        </DeleteIconButton>\n      </ChoicePreviewContainer>\n    );\n  }\n}\n\nexport default ChoicePreview;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/design/categories/droppable-placeholder.js

@@ -1,187 +1,95 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.spec = exports["default"] = exports.DroppablePlaceHolder = 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"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
+var _styles = require("@mui/material/styles");
 var _choicePreview = _interopRequireDefault(require("./choice-preview"));
-
-var _reactDnd = require("react-dnd");
-
+var _core = require("@dnd-kit/core");
 var _drag = require("@pie-lib/drag");
-
 var _debug = _interopRequireDefault(require("debug"));
-
-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-element:categorize:configure');
-var Helper = (0, _styles.withStyles)(function (theme) {
-  return {
-    helper: {
-      display: 'flex',
-      alignItems: 'center',
-      fontSize: theme.typography.fontSize - 2,
-      color: "rgba(".concat(theme.palette.common.black, ", 0.4)"),
-      width: '100%',
-      height: '100%'
-    }
-  };
-})(function (_ref) {
-  var classes = _ref.classes;
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.helper
-  }, "Drag your correct answers here");
+const log = (0, _debug.default)('@pie-element:categorize:configure');
+const HelperText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: theme.typography.fontSize - 2,
+  color: `rgba(${theme.palette.common.black}, 0.4)`,
+  width: '100%',
+  height: '100%'
+}));
+const Helper = () => /*#__PURE__*/_react.default.createElement(HelperText, null, "Drag your correct answers here");
+const DroppablePlaceholderContainer = (0, _styles.styled)('div')({
+  minHeight: '100px'
 });
-
-var Previews = function Previews(_ref2) {
-  var alternateResponseIndex = _ref2.alternateResponseIndex,
-      category = _ref2.category,
-      choices = _ref2.choices,
-      onDeleteChoice = _ref2.onDeleteChoice;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, choices.map(function (c, index) {
-    return c && /*#__PURE__*/_react["default"].createElement(_choicePreview["default"], {
-      alternateResponseIndex: alternateResponseIndex,
-      category: category,
-      choice: c,
-      key: index,
-      choiceIndex: index,
-      onDelete: function onDelete(choice) {
-        return onDeleteChoice(choice, index);
-      }
-    });
-  }));
-};
-
+const Previews = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice
+}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (choices || []).map((c, index) => c && /*#__PURE__*/_react.default.createElement(_choicePreview.default, {
+  alternateResponseIndex: alternateResponseIndex,
+  category: category,
+  choice: c,
+  key: index,
+  choiceIndex: index,
+  onDelete: choice => onDeleteChoice(choice, index)
+})));
 Previews.propTypes = {
-  alternateResponseIndex: _propTypes["default"].number,
-  category: _propTypes["default"].object,
-  choices: _propTypes["default"].array,
-  onDeleteChoice: _propTypes["default"].func
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choices: _propTypes.default.array,
+  onDeleteChoice: _propTypes.default.func
 };
-
-var DroppablePlaceHolder = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(DroppablePlaceHolder, _React$Component);
-
-  var _super = _createSuper(DroppablePlaceHolder);
-
-  function DroppablePlaceHolder() {
-    (0, _classCallCheck2["default"])(this, DroppablePlaceHolder);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(DroppablePlaceHolder, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          alternateResponseIndex = _this$props.alternateResponseIndex,
-          isOver = _this$props.isOver,
-          category = _this$props.category,
-          choices = _this$props.choices,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          connectDropTarget = _this$props.connectDropTarget,
-          onDeleteChoice = _this$props.onDeleteChoice;
-      return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-        className: (0, _classnames["default"])(classes.droppablePlaceholder, className)
-      }, /*#__PURE__*/_react["default"].createElement(_drag.PlaceHolder, {
-        isOver: isOver,
-        className: classes.placeHolder
-      }, (choices || []).length === 0 ? /*#__PURE__*/_react["default"].createElement(Helper, null) : /*#__PURE__*/_react["default"].createElement(Previews, {
-        alternateResponseIndex: alternateResponseIndex,
-        category: category,
-        choices: choices,
-        onDeleteChoice: onDeleteChoice
-      }))));
+const DroppablePlaceHolder = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice,
+  categoryId,
+  isAlternate
+}) => {
+  const {
+    setNodeRef,
+    isOver
+  } = (0, _core.useDroppable)({
+    id: `${categoryId}-${isAlternate ? 'alternate' : 'standard'}`,
+    data: {
+      accepts: ['choice', 'choice-preview'],
+      alternateResponseIndex,
+      categoryId,
+      type: isAlternate ? 'category-alternate' : 'category',
+      id: categoryId
     }
-  }]);
-  return DroppablePlaceHolder;
-}(_react["default"].Component);
-
-exports.DroppablePlaceHolder = DroppablePlaceHolder;
-(0, _defineProperty2["default"])(DroppablePlaceHolder, "propTypes", {
-  alternateResponseIndex: _propTypes["default"].number,
-  category: _propTypes["default"].object,
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  connectDropTarget: _propTypes["default"].func.isRequired,
-  choices: _propTypes["default"].array,
-  onDropChoice: _propTypes["default"].func.isRequired,
-  onMoveChoice: _propTypes["default"].func,
-  isOver: _propTypes["default"].bool,
-  onDeleteChoice: _propTypes["default"].func,
-  categoryId: _propTypes["default"].string.isRequired
-});
-(0, _defineProperty2["default"])(DroppablePlaceHolder, "defaultProps", {});
-
-var styles = function styles() {
-  return {
-    droppablePlaceholder: {
-      minHeight: '100px'
-    },
-    placeHolder: {
+  });
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: setNodeRef
+  }, /*#__PURE__*/_react.default.createElement(DroppablePlaceholderContainer, null, /*#__PURE__*/_react.default.createElement(_drag.PlaceHolder, {
+    isOver: isOver,
+    extraStyles: {
       width: '100%',
       minHeight: '100px',
       height: 'auto'
     }
-  };
+  }, (choices || []).length === 0 ? /*#__PURE__*/_react.default.createElement(Helper, null) : /*#__PURE__*/_react.default.createElement(Previews, {
+    alternateResponseIndex: alternateResponseIndex,
+    category: category,
+    choices: choices,
+    onDeleteChoice: onDeleteChoice
+  }))));
 };
-
-var Styled = (0, _styles.withStyles)(styles)(DroppablePlaceHolder);
-var spec = {
-  drop: function drop(props, monitor) {
-    log('[drop] props: ', props);
-    var item = monitor.getItem();
-
-    if (item.from && item.alternateResponseIndex === props.alternateResponseIndex) {
-      props.onMoveChoice(item.choiceId, item.from, props.categoryId, item.choiceIndex, item.alternateResponseIndex);
-    } else if (!item.from) {
-      // avoid dropping choice when user tries to move it to an alternate with other index
-      props.onDropChoice(item, props.categoryId);
-    }
-  },
-  canDrop: function canDrop(props
-  /*, monitor*/
-  ) {
-    return !props.disabled;
-  }
+DroppablePlaceHolder.propTypes = {
+  alternateResponseIndex: _propTypes.default.number,
+  category: _propTypes.default.object,
+  choices: _propTypes.default.array,
+  onDeleteChoice: _propTypes.default.func,
+  categoryId: _propTypes.default.string.isRequired,
+  isAlternate: _propTypes.default.bool
 };
-exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(function (_ref3) {
-  var uid = _ref3.uid;
-  return uid;
-}, spec, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
-  };
-})(Styled);
-
-var _default = _drag.uid.withUid(WithTarget);
-
-exports["default"] = _default;
-//# sourceMappingURL=droppable-placeholder.js.map
+var _default = exports.default = _drag.uid.withUid(DroppablePlaceHolder);
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJfcmVhY3QiLCJfaW50ZXJvcFJlcXVpcmVEZWZhdWx0IiwicmVxdWlyZSIsIl9wcm9wVHlwZXMiLCJfc3R5bGVzIiwiX2Nob2ljZVByZXZpZXciLCJfY29yZSIsIl9kcmFnIiwiX2RlYnVnIiwibG9nIiwiZGVidWciLCJIZWxwZXJUZXh0Iiwic3R5bGVkIiwidGhlbWUiLCJkaXNwbGF5IiwiYWxpZ25JdGVtcyIsImZvbnRTaXplIiwidHlwb2dyYXBoeSIsImNvbG9yIiwicGFsZXR0ZSIsImNvbW1vbiIsImJsYWNrIiwid2lkdGgiLCJoZWlnaHQiLCJIZWxwZXIiLCJkZWZhdWx0IiwiY3JlYXRlRWxlbWVudCIsIkRyb3BwYWJsZVBsYWNlaG9sZGVyQ29udGFpbmVyIiwibWluSGVpZ2h0IiwiUHJldmlld3MiLCJhbHRlcm5hdGVSZXNwb25zZUluZGV4IiwiY2F0ZWdvcnkiLCJjaG9pY2VzIiwib25EZWxldGVDaG9pY2UiLCJGcmFnbWVudCIsIm1hcCIsImMiLCJpbmRleCIsImNob2ljZSIsImtleSIsImNob2ljZUluZGV4Iiwib25EZWxldGUiLCJwcm9wVHlwZXMiLCJQcm9wVHlwZXMiLCJudW1iZXIiLCJvYmplY3QiLCJhcnJheSIsImZ1bmMiLCJEcm9wcGFibGVQbGFjZUhvbGRlciIsImNhdGVnb3J5SWQiLCJpc0FsdGVybmF0ZSIsInNldE5vZGVSZWYiLCJpc092ZXIiLCJ1c2VEcm9wcGFibGUiLCJpZCIsImRhdGEiLCJhY2NlcHRzIiwidHlwZSIsInJlZiIsIlBsYWNlSG9sZGVyIiwiZXh0cmFTdHlsZXMiLCJsZW5ndGgiLCJzdHJpbmciLCJpc1JlcXVpcmVkIiwiYm9vbCIsIl9kZWZhdWx0IiwiZXhwb3J0cyIsInVpZCIsIndpdGhVaWQiXSwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZGVzaWduL2NhdGVnb3JpZXMvZHJvcHBhYmxlLXBsYWNlaG9sZGVyLmpzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IFByb3BUeXBlcyBmcm9tICdwcm9wLXR5cGVzJztcbmltcG9ydCB7IHN0eWxlZCB9IGZyb20gJ0BtdWkvbWF0ZXJpYWwvc3R5bGVzJztcbmltcG9ydCBDaG9pY2VQcmV2aWV3IGZyb20gJy4vY2hvaWNlLXByZXZpZXcnO1xuaW1wb3J0IHsgdXNlRHJvcHBhYmxlIH0gZnJvbSAnQGRuZC1raXQvY29yZSc7XG5pbXBvcnQgeyB1aWQsIFBsYWNlSG9sZGVyIH0gZnJvbSAnQHBpZS1saWIvZHJhZyc7XG5pbXBvcnQgZGVidWcgZnJvbSAnZGVidWcnO1xuXG5jb25zdCBsb2cgPSBkZWJ1ZygnQHBpZS1lbGVtZW50OmNhdGVnb3JpemU6Y29uZmlndXJlJyk7XG5cbmNvbnN0IEhlbHBlclRleHQgPSBzdHlsZWQoJ2RpdicpKCh7IHRoZW1lIH0pID0+ICh7XG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgYWxpZ25JdGVtczogJ2NlbnRlcicsXG4gIGZvbnRTaXplOiB0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplIC0gMixcbiAgY29sb3I6IGByZ2JhKCR7dGhlbWUucGFsZXR0ZS5jb21tb24uYmxhY2t9LCAwLjQpYCxcbiAgd2lkdGg6ICcxMDAlJyxcbiAgaGVpZ2h0OiAnMTAwJScsXG59KSk7XG5cbmNvbnN0IEhlbHBlciA9ICgpID0+IDxIZWxwZXJUZXh0PkRyYWcgeW91ciBjb3JyZWN0IGFuc3dlcnMgaGVyZTwvSGVscGVyVGV4dD47XG5cbmNvbnN0IERyb3BwYWJsZVBsYWNlaG9sZGVyQ29udGFpbmVyID0gc3R5bGVkKCdkaXYnKSh7XG4gIG1pbkhlaWdodDogJzEwMHB4Jyxcbn0pO1xuXG5jb25zdCBQcmV2aWV3cyA9ICh7IGFsdGVybmF0ZVJlc3BvbnNlSW5kZXgsIGNhdGVnb3J5LCBjaG9pY2VzLCBvbkRlbGV0ZUNob2ljZSB9KSA9PiAoXG4gIDxSZWFjdC5GcmFnbWVudD5cbiAgICB7KGNob2ljZXMgfHwgW10pLm1hcCgoYywgaW5kZXgpID0+XG4gICAgICBjICYmIChcbiAgICAgICAgPENob2ljZVByZXZpZXdcbiAgICAgICAgICBhbHRlcm5hdGVSZXNwb25zZUluZGV4PXthbHRlcm5hdGVSZXNwb25zZUluZGV4fVxuICAgICAgICAgIGNhdGVnb3J5PXtjYXRlZ29yeX1cbiAgICAgICAgICBjaG9pY2U9e2N9XG4gICAgICAgICAga2V5PXtpbmRleH1cbiAgICAgICAgICBjaG9pY2VJbmRleD17aW5kZXh9XG4gICAgICAgICAgb25EZWxldGU9eyhjaG9pY2UpID0+IG9uRGVsZXRlQ2hvaWNlKGNob2ljZSwgaW5kZXgpfVxuICAgICAgICAvPlxuICAgICAgKVxuICAgICl9XG4gIDwvUmVhY3QuRnJhZ21lbnQ+XG4pO1xuXG5QcmV2aWV3cy5wcm9wVHlwZXMgPSB7XG4gIGFsdGVybmF0ZVJlc3BvbnNlSW5kZXg6IFByb3BUeXBlcy5udW1iZXIsXG4gIGNhdGVnb3J5OiBQcm9wVHlwZXMub2JqZWN0LFxuICBjaG9pY2VzOiBQcm9wVHlwZXMuYXJyYXksXG4gIG9uRGVsZXRlQ2hvaWNlOiBQcm9wVHlwZXMuZnVuYyxcbn07XG5cbmNvbnN0IERyb3BwYWJsZVBsYWNlSG9sZGVyID0gKHtcbiAgYWx0ZXJuYXRlUmVzcG9uc2VJbmRleCxcbiAgY2F0ZWdvcnksXG4gIGNob2ljZXMsXG4gIG9uRGVsZXRlQ2hvaWNlLFxuICBjYXRlZ29yeUlkLFxuICBpc0FsdGVybmF0ZVxufSkgPT4ge1xuICBjb25zdCB7IHNldE5vZGVSZWYsIGlzT3ZlciB9ID0gdXNlRHJvcHBhYmxlKHtcbiAgICBpZDogYCR7Y2F0ZWdvcnlJZH0tJHtpc0FsdGVybmF0ZSA/ICdhbHRlcm5hdGUnIDogJ3N0YW5kYXJkJ31gLFxuICAgIGRhdGE6IHtcbiAgICAgIGFjY2VwdHM6IFsnY2hvaWNlJywgJ2Nob2ljZS1wcmV2aWV3J10sXG4gICAgICBhbHRlcm5hdGVSZXNwb25zZUluZGV4LFxuICAgICAgY2F0ZWdvcnlJZCxcbiAgICAgIHR5cGU6IGlzQWx0ZXJuYXRlID8gJ2NhdGVnb3J5LWFsdGVybmF0ZScgOiAnY2F0ZWdvcnknLFxuICAgICAgaWQ6IGNhdGVnb3J5SWQsXG4gICAgfSxcbiAgfSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IHJlZj17c2V0Tm9kZVJlZn0+XG4gICAgICA8RHJvcHBhYmxlUGxhY2Vob2xkZXJDb250YWluZXI+XG4gICAgICAgIDxQbGFjZUhvbGRlclxuICAgICAgICAgIGlzT3Zlcj17aXNPdmVyfVxuICAgICAgICAgIGV4dHJhU3R5bGVzPXt7XG4gICAgICAgICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgICAgICAgbWluSGVpZ2h0OiAnMTAwcHgnLFxuICAgICAgICAgICAgaGVpZ2h0OiAnYXV0bycsXG4gICAgICAgICAgfX0+XG4gICAgICAgICAgeyhjaG9pY2VzIHx8IFtdKS5sZW5ndGggPT09IDAgPyAoXG4gICAgICAgICAgICA8SGVscGVyIC8+XG4gICAgICAgICAgKSA6IChcbiAgICAgICAgICAgIDxQcmV2aWV3c1xuICAgICAgICAgICAgICBhbHRlcm5hdGVSZXNwb25zZUluZGV4PXthbHRlcm5hdGVSZXNwb25zZUluZGV4fVxuICAgICAgICAgICAgICBjYXRlZ29yeT17Y2F0ZWdvcnl9XG4gICAgICAgICAgICAgIGNob2ljZXM9e2Nob2ljZXN9XG4gICAgICAgICAgICAgIG9uRGVsZXRlQ2hvaWNlPXtvbkRlbGV0ZUNob2ljZX1cbiAgICAgICAgICAgIC8+XG4gICAgICAgICAgKX1cbiAgICAgICAgPC9QbGFjZUhvbGRlcj5cbiAgICAgIDwvRHJvcHBhYmxlUGxhY2Vob2xkZXJDb250YWluZXI+XG4gICAgPC9kaXY+XG4gICk7XG59O1xuXG5Ecm9wcGFibGVQbGFjZUhvbGRlci5wcm9wVHlwZXMgPSB7XG4gIGFsdGVybmF0ZVJlc3BvbnNlSW5kZXg6IFByb3BUeXBlcy5udW1iZXIsXG4gIGNhdGVnb3J5OiBQcm9wVHlwZXMub2JqZWN0LFxuICBjaG9pY2VzOiBQcm9wVHlwZXMuYXJyYXksXG4gIG9uRGVsZXRlQ2hvaWNlOiBQcm9wVHlwZXMuZnVuYyxcbiAgY2F0ZWdvcnlJZDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICBpc0FsdGVybmF0ZTogUHJvcFR5cGVzLmJvb2wsXG59O1xuXG5leHBvcnQgZGVmYXVsdCB1aWQud2l0aFVpZChEcm9wcGFibGVQbGFjZUhvbGRlcik7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxJQUFBQSxNQUFBLEdBQUFDLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBQyxVQUFBLEdBQUFGLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBRSxPQUFBLEdBQUFGLE9BQUE7QUFDQSxJQUFBRyxjQUFBLEdBQUFKLHNCQUFBLENBQUFDLE9BQUE7QUFDQSxJQUFBSSxLQUFBLEdBQUFKLE9BQUE7QUFDQSxJQUFBSyxLQUFBLEdBQUFMLE9BQUE7QUFDQSxJQUFBTSxNQUFBLEdBQUFQLHNCQUFBLENBQUFDLE9BQUE7QUFFQSxNQUFNTyxHQUFHLEdBQUcsSUFBQUMsY0FBSyxFQUFDLG1DQUFtQyxDQUFDO0FBRXRELE1BQU1DLFVBQVUsR0FBRyxJQUFBQyxjQUFNLEVBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztFQUFFQztBQUFNLENBQUMsTUFBTTtFQUMvQ0MsT0FBTyxFQUFFLE1BQU07RUFDZkMsVUFBVSxFQUFFLFFBQVE7RUFDcEJDLFFBQVEsRUFBRUgsS0FBSyxDQUFDSSxVQUFVLENBQUNELFFBQVEsR0FBRyxDQUFDO0VBQ3ZDRSxLQUFLLEVBQUUsUUFBUUwsS0FBSyxDQUFDTSxPQUFPLENBQUNDLE1BQU0sQ0FBQ0MsS0FBSyxRQUFRO0VBQ2pEQyxLQUFLLEVBQUUsTUFBTTtFQUNiQyxNQUFNLEVBQUU7QUFDVixDQUFDLENBQUMsQ0FBQztBQUVILE1BQU1DLE1BQU0sR0FBR0EsQ0FBQSxrQkFBTXhCLE1BQUEsQ0FBQXlCLE9BQUEsQ0FBQUMsYUFBQSxDQUFDZixVQUFVLFFBQUMsZ0NBQTBDLENBQUM7QUFFNUUsTUFBTWdCLDZCQUE2QixHQUFHLElBQUFmLGNBQU0sRUFBQyxLQUFLLENBQUMsQ0FBQztFQUNsRGdCLFNBQVMsRUFBRTtBQUNiLENBQUMsQ0FBQztBQUVGLE1BQU1DLFFBQVEsR0FBR0EsQ0FBQztFQUFFQyxzQkFBc0I7RUFBRUMsUUFBUTtFQUFFQyxPQUFPO0VBQUVDO0FBQWUsQ0FBQyxrQkFDN0VqQyxNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUEsQ0FBQzFCLE1BQUEsQ0FBQXlCLE9BQUssQ0FBQ1MsUUFBUSxRQUNaLENBQUNGLE9BQU8sSUFBSSxFQUFFLEVBQUVHLEdBQUcsQ0FBQyxDQUFDQyxDQUFDLEVBQUVDLEtBQUssS0FDNUJELENBQUMsaUJBQ0NwQyxNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUEsQ0FBQ3JCLGNBQUEsQ0FBQW9CLE9BQWE7RUFDWkssc0JBQXNCLEVBQUVBLHNCQUF1QjtFQUMvQ0MsUUFBUSxFQUFFQSxRQUFTO0VBQ25CTyxNQUFNLEVBQUVGLENBQUU7RUFDVkcsR0FBRyxFQUFFRixLQUFNO0VBQ1hHLFdBQVcsRUFBRUgsS0FBTTtFQUNuQkksUUFBUSxFQUFHSCxNQUFNLElBQUtMLGNBQWMsQ0FBQ0ssTUFBTSxFQUFFRCxLQUFLO0FBQUUsQ0FDckQsQ0FFTCxDQUNjLENBQ2pCO0FBRURSLFFBQVEsQ0FBQ2EsU0FBUyxHQUFHO0VBQ25CWixzQkFBc0IsRUFBRWEsa0JBQVMsQ0FBQ0MsTUFBTTtFQUN4Q2IsUUFBUSxFQUFFWSxrQkFBUyxDQUFDRSxNQUFNO0VBQzFCYixPQUFPLEVBQUVXLGtCQUFTLENBQUNHLEtBQUs7RUFDeEJiLGNBQWMsRUFBRVUsa0JBQVMsQ0FBQ0k7QUFDNUIsQ0FBQztBQUVELE1BQU1DLG9CQUFvQixHQUFHQSxDQUFDO0VBQzVCbEIsc0JBQXNCO0VBQ3RCQyxRQUFRO0VBQ1JDLE9BQU87RUFDUEMsY0FBYztFQUNkZ0IsVUFBVTtFQUNWQztBQUNGLENBQUMsS0FBSztFQUNKLE1BQU07SUFBRUMsVUFBVTtJQUFFQztFQUFPLENBQUMsR0FBRyxJQUFBQyxrQkFBWSxFQUFDO0lBQzFDQyxFQUFFLEVBQUUsR0FBR0wsVUFBVSxJQUFJQyxXQUFXLEdBQUcsV0FBVyxHQUFHLFVBQVUsRUFBRTtJQUM3REssSUFBSSxFQUFFO01BQ0pDLE9BQU8sRUFBRSxDQUFDLFFBQVEsRUFBRSxnQkFBZ0IsQ0FBQztNQUNyQzFCLHNCQUFzQjtNQUN0Qm1CLFVBQVU7TUFDVlEsSUFBSSxFQUFFUCxXQUFXLEdBQUcsb0JBQW9CLEdBQUcsVUFBVTtNQUNyREksRUFBRSxFQUFFTDtJQUNOO0VBQ0YsQ0FBQyxDQUFDO0VBRUYsb0JBQ0VqRCxNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUE7SUFBS2dDLEdBQUcsRUFBRVA7RUFBVyxnQkFDbkJuRCxNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUEsQ0FBQ0MsNkJBQTZCLHFCQUM1QjNCLE1BQUEsQ0FBQXlCLE9BQUEsQ0FBQUMsYUFBQSxDQUFDbkIsS0FBQSxDQUFBb0QsV0FBVztJQUNWUCxNQUFNLEVBQUVBLE1BQU87SUFDZlEsV0FBVyxFQUFFO01BQ1h0QyxLQUFLLEVBQUUsTUFBTTtNQUNiTSxTQUFTLEVBQUUsT0FBTztNQUNsQkwsTUFBTSxFQUFFO0lBQ1Y7RUFBRSxHQUNELENBQUNTLE9BQU8sSUFBSSxFQUFFLEVBQUU2QixNQUFNLEtBQUssQ0FBQyxnQkFDM0I3RCxNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUEsQ0FBQ0YsTUFBTSxNQUFFLENBQUMsZ0JBRVZ4QixNQUFBLENBQUF5QixPQUFBLENBQUFDLGFBQUEsQ0FBQ0csUUFBUTtJQUNQQyxzQkFBc0IsRUFBRUEsc0JBQXVCO0lBQy9DQyxRQUFRLEVBQUVBLFFBQVM7SUFDbkJDLE9BQU8sRUFBRUEsT0FBUTtJQUNqQkMsY0FBYyxFQUFFQTtFQUFlLENBQ2hDLENBRVEsQ0FDZ0IsQ0FDNUIsQ0FBQztBQUVWLENBQUM7QUFFRGUsb0JBQW9CLENBQUNOLFNBQVMsR0FBRztFQUMvQlosc0JBQXNCLEVBQUVhLGtCQUFTLENBQUNDLE1BQU07RUFDeENiLFFBQVEsRUFBRVksa0JBQVMsQ0FBQ0UsTUFBTTtFQUMxQmIsT0FBTyxFQUFFVyxrQkFBUyxDQUFDRyxLQUFLO0VBQ3hCYixjQUFjLEVBQUVVLGtCQUFTLENBQUNJLElBQUk7RUFDOUJFLFVBQVUsRUFBRU4sa0JBQVMsQ0FBQ21CLE1BQU0sQ0FBQ0MsVUFBVTtFQUN2Q2IsV0FBVyxFQUFFUCxrQkFBUyxDQUFDcUI7QUFDekIsQ0FBQztBQUFDLElBQUFDLFFBQUEsR0FBQUMsT0FBQSxDQUFBekMsT0FBQSxHQUVhMEMsU0FBRyxDQUFDQyxPQUFPLENBQUNwQixvQkFBb0IsQ0FBQyIsImlnbm9yZUxpc3QiOltdfQ==

package/configure/lib/design/categories/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/design/categories/droppable-placeholder.jsx"],"names":["log","Helper","theme","helper","display","alignItems","fontSize","typography","color","palette","common","black","width","height","classes","Previews","alternateResponseIndex","category","choices","onDeleteChoice","map","c","index","choice","propTypes","PropTypes","number","object","array","func","DroppablePlaceHolder","props","isOver","className","connectDropTarget","droppablePlaceholder","placeHolder","length","React","Component","isRequired","string","onDropChoice","onMoveChoice","bool","categoryId","styles","minHeight","Styled","spec","drop","monitor","item","getItem","from","choiceId","choiceIndex","canDrop","disabled","WithTarget","uid","connect","dropTarget","withUid"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\nimport ChoicePreview from './choice-preview';\nimport { DropTarget } from 'react-dnd';\nimport { uid, PlaceHolder } from '@pie-lib/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-element:categorize:configure');\n\nconst Helper = withStyles((theme) => ({\n  helper: {\n    display: 'flex',\n    alignItems: 'center',\n    fontSize: theme.typography.fontSize - 2,\n    color: `rgba(${theme.palette.common.black}, 0.4)`,\n    width: '100%',\n    height: '100%',\n  },\n}))(({ classes }) => <div className={classes.helper}>Drag your correct answers here</div>);\n\nconst Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (\n  <React.Fragment>\n    {choices.map(\n      (c, index) =>\n        c && (\n          <ChoicePreview\n            alternateResponseIndex={alternateResponseIndex}\n            category={category}\n            choice={c}\n            key={index}\n            choiceIndex={index}\n            onDelete={(choice) => onDeleteChoice(choice, index)}\n          />\n        ),\n    )}\n  </React.Fragment>\n);\n\nPreviews.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n};\n\nexport class DroppablePlaceHolder extends React.Component {\n  static propTypes = {\n    alternateResponseIndex: PropTypes.number,\n    category: PropTypes.object,\n    classes: PropTypes.object.isRequired,\n    className: PropTypes.string,\n    connectDropTarget: PropTypes.func.isRequired,\n    choices: PropTypes.array,\n    onDropChoice: PropTypes.func.isRequired,\n    onMoveChoice: PropTypes.func,\n    isOver: PropTypes.bool,\n    onDeleteChoice: PropTypes.func,\n    categoryId: PropTypes.string.isRequired,\n  };\n\n  static defaultProps = {};\n  render() {\n    const { alternateResponseIndex, isOver, category, choices, classes, className, connectDropTarget, onDeleteChoice } =\n      this.props;\n\n    return connectDropTarget(\n      <div className={classNames(classes.droppablePlaceholder, className)}>\n        <PlaceHolder isOver={isOver} className={classes.placeHolder}>\n          {(choices || []).length === 0 ? (\n            <Helper />\n          ) : (\n            <Previews\n              alternateResponseIndex={alternateResponseIndex}\n              category={category}\n              choices={choices}\n              onDeleteChoice={onDeleteChoice}\n            />\n          )}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\nconst styles = () => ({\n  droppablePlaceholder: {\n    minHeight: '100px',\n  },\n  placeHolder: {\n    width: '100%',\n    minHeight: '100px',\n    height: 'auto',\n  },\n});\n\nconst Styled = withStyles(styles)(DroppablePlaceHolder);\n\nexport const spec = {\n  drop: (props, monitor) => {\n    log('[drop] props: ', props);\n    const item = monitor.getItem();\n\n    if (item.from && item.alternateResponseIndex === props.alternateResponseIndex) {\n      props.onMoveChoice(item.choiceId, item.from, props.categoryId, item.choiceIndex, item.alternateResponseIndex);\n    } else if (!item.from) {\n      // avoid dropping choice when user tries to move it to an alternate with other index\n      props.onDropChoice(item, props.categoryId);\n    }\n  },\n  canDrop: (props /*, monitor*/) => {\n    return !props.disabled;\n  },\n};\n\nconst WithTarget = DropTarget(\n  ({ uid }) => uid,\n  spec,\n  (connect, monitor) => ({\n    connectDropTarget: connect.dropTarget(),\n    isOver: monitor.isOver(),\n  }),\n)(Styled);\n\nexport default uid.withUid(WithTarget);\n"],"file":"droppable-placeholder.js"}
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_choicePreview","_core","_drag","_debug","log","debug","HelperText","styled","theme","display","alignItems","fontSize","typography","color","palette","common","black","width","height","Helper","default","createElement","DroppablePlaceholderContainer","minHeight","Previews","alternateResponseIndex","category","choices","onDeleteChoice","Fragment","map","c","index","choice","key","choiceIndex","onDelete","propTypes","PropTypes","number","object","array","func","DroppablePlaceHolder","categoryId","isAlternate","setNodeRef","isOver","useDroppable","id","data","accepts","type","ref","PlaceHolder","extraStyles","length","string","isRequired","bool","_default","exports","uid","withUid"],"sources":["../../../src/design/categories/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport ChoicePreview from './choice-preview';\nimport { useDroppable } from '@dnd-kit/core';\nimport { uid, PlaceHolder } from '@pie-lib/drag';\nimport debug from 'debug';\n\nconst log = debug('@pie-element:categorize:configure');\n\nconst HelperText = styled('div')(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  fontSize: theme.typography.fontSize - 2,\n  color: `rgba(${theme.palette.common.black}, 0.4)`,\n  width: '100%',\n  height: '100%',\n}));\n\nconst Helper = () => <HelperText>Drag your correct answers here</HelperText>;\n\nconst DroppablePlaceholderContainer = styled('div')({\n  minHeight: '100px',\n});\n\nconst Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (\n  <React.Fragment>\n    {(choices || []).map((c, index) =>\n      c && (\n        <ChoicePreview\n          alternateResponseIndex={alternateResponseIndex}\n          category={category}\n          choice={c}\n          key={index}\n          choiceIndex={index}\n          onDelete={(choice) => onDeleteChoice(choice, index)}\n        />\n      )\n    )}\n  </React.Fragment>\n);\n\nPreviews.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n};\n\nconst DroppablePlaceHolder = ({\n  alternateResponseIndex,\n  category,\n  choices,\n  onDeleteChoice,\n  categoryId,\n  isAlternate\n}) => {\n  const { setNodeRef, isOver } = useDroppable({\n    id: `${categoryId}-${isAlternate ? 'alternate' : 'standard'}`,\n    data: {\n      accepts: ['choice', 'choice-preview'],\n      alternateResponseIndex,\n      categoryId,\n      type: isAlternate ? 'category-alternate' : 'category',\n      id: categoryId,\n    },\n  });\n\n  return (\n    <div ref={setNodeRef}>\n      <DroppablePlaceholderContainer>\n        <PlaceHolder\n          isOver={isOver}\n          extraStyles={{\n            width: '100%',\n            minHeight: '100px',\n            height: 'auto',\n          }}>\n          {(choices || []).length === 0 ? (\n            <Helper />\n          ) : (\n            <Previews\n              alternateResponseIndex={alternateResponseIndex}\n              category={category}\n              choices={choices}\n              onDeleteChoice={onDeleteChoice}\n            />\n          )}\n        </PlaceHolder>\n      </DroppablePlaceholderContainer>\n    </div>\n  );\n};\n\nDroppablePlaceHolder.propTypes = {\n  alternateResponseIndex: PropTypes.number,\n  category: PropTypes.object,\n  choices: PropTypes.array,\n  onDeleteChoice: PropTypes.func,\n  categoryId: PropTypes.string.isRequired,\n  isAlternate: PropTypes.bool,\n};\n\nexport default uid.withUid(DroppablePlaceHolder);\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,KAAA,GAAAL,OAAA;AACA,IAAAM,MAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEA,MAAMO,GAAG,GAAG,IAAAC,cAAK,EAAC,mCAAmC,CAAC;AAEtD,MAAMC,UAAU,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC/CC,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,QAAQ,EAAEH,KAAK,CAACI,UAAU,CAACD,QAAQ,GAAG,CAAC;EACvCE,KAAK,EAAE,QAAQL,KAAK,CAACM,OAAO,CAACC,MAAM,CAACC,KAAK,QAAQ;EACjDC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE;AACV,CAAC,CAAC,CAAC;AAEH,MAAMC,MAAM,GAAGA,CAAA,kBAAMxB,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACf,UAAU,QAAC,gCAA0C,CAAC;AAE5E,MAAMgB,6BAA6B,GAAG,IAAAf,cAAM,EAAC,KAAK,CAAC,CAAC;EAClDgB,SAAS,EAAE;AACb,CAAC,CAAC;AAEF,MAAMC,QAAQ,GAAGA,CAAC;EAAEC,sBAAsB;EAAEC,QAAQ;EAAEC,OAAO;EAAEC;AAAe,CAAC,kBAC7EjC,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAAC1B,MAAA,CAAAyB,OAAK,CAACS,QAAQ,QACZ,CAACF,OAAO,IAAI,EAAE,EAAEG,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAC5BD,CAAC,iBACCpC,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACrB,cAAA,CAAAoB,OAAa;EACZK,sBAAsB,EAAEA,sBAAuB;EAC/CC,QAAQ,EAAEA,QAAS;EACnBO,MAAM,EAAEF,CAAE;EACVG,GAAG,EAAEF,KAAM;EACXG,WAAW,EAAEH,KAAM;EACnBI,QAAQ,EAAGH,MAAM,IAAKL,cAAc,CAACK,MAAM,EAAED,KAAK;AAAE,CACrD,CAEL,CACc,CACjB;AAEDR,QAAQ,CAACa,SAAS,GAAG;EACnBZ,sBAAsB,EAAEa,kBAAS,CAACC,MAAM;EACxCb,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEW,kBAAS,CAACG,KAAK;EACxBb,cAAc,EAAEU,kBAAS,CAACI;AAC5B,CAAC;AAED,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BlB,sBAAsB;EACtBC,QAAQ;EACRC,OAAO;EACPC,cAAc;EACdgB,UAAU;EACVC;AACF,CAAC,KAAK;EACJ,MAAM;IAAEC,UAAU;IAAEC;EAAO,CAAC,GAAG,IAAAC,kBAAY,EAAC;IAC1CC,EAAE,EAAE,GAAGL,UAAU,IAAIC,WAAW,GAAG,WAAW,GAAG,UAAU,EAAE;IAC7DK,IAAI,EAAE;MACJC,OAAO,EAAE,CAAC,QAAQ,EAAE,gBAAgB,CAAC;MACrC1B,sBAAsB;MACtBmB,UAAU;MACVQ,IAAI,EAAEP,WAAW,GAAG,oBAAoB,GAAG,UAAU;MACrDI,EAAE,EAAEL;IACN;EACF,CAAC,CAAC;EAEF,oBACEjD,MAAA,CAAAyB,OAAA,CAAAC,aAAA;IAAKgC,GAAG,EAAEP;EAAW,gBACnBnD,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACC,6BAA6B,qBAC5B3B,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACnB,KAAA,CAAAoD,WAAW;IACVP,MAAM,EAAEA,MAAO;IACfQ,WAAW,EAAE;MACXtC,KAAK,EAAE,MAAM;MACbM,SAAS,EAAE,OAAO;MAClBL,MAAM,EAAE;IACV;EAAE,GACD,CAACS,OAAO,IAAI,EAAE,EAAE6B,MAAM,KAAK,CAAC,gBAC3B7D,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACF,MAAM,MAAE,CAAC,gBAEVxB,MAAA,CAAAyB,OAAA,CAAAC,aAAA,CAACG,QAAQ;IACPC,sBAAsB,EAAEA,sBAAuB;IAC/CC,QAAQ,EAAEA,QAAS;IACnBC,OAAO,EAAEA,OAAQ;IACjBC,cAAc,EAAEA;EAAe,CAChC,CAEQ,CACgB,CAC5B,CAAC;AAEV,CAAC;AAEDe,oBAAoB,CAACN,SAAS,GAAG;EAC/BZ,sBAAsB,EAAEa,kBAAS,CAACC,MAAM;EACxCb,QAAQ,EAAEY,kBAAS,CAACE,MAAM;EAC1Bb,OAAO,EAAEW,kBAAS,CAACG,KAAK;EACxBb,cAAc,EAAEU,kBAAS,CAACI,IAAI;EAC9BE,UAAU,EAAEN,kBAAS,CAACmB,MAAM,CAACC,UAAU;EACvCb,WAAW,EAAEP,kBAAS,CAACqB;AACzB,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAzC,OAAA,GAEa0C,SAAG,CAACC,OAAO,CAACpB,oBAAoB,CAAC","ignoreList":[]}