@pie-lib/drag 2.22.3-next.2 → 2.22.3-next.208

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.22.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.22.1...@pie-lib/drag@2.22.2) (2025-11-27)
+# [3.0.0-next.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.22.3-next.0...@pie-lib/drag@3.0.0-next.0) (2026-01-19)
 
 **Note:** Version bump only for package @pie-lib/drag
 
@@ -11,7 +11,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [2.22.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.2...@pie-lib/drag@2.22.1) (2025-10-22)
+## [2.22.3-next.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.36.0-mui-update.0...@pie-lib/drag@2.22.3-next.0) (2026-01-19)
 
 **Note:** Version bump only for package @pie-lib/drag
 
@@ -19,141 +19,87 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-# [2.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.21.0...@pie-lib/drag@2.22.0) (2025-10-16)
+## [2.22.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.22.1...@pie-lib/drag@2.22.2) (2025-11-27)
 
 **Note:** Version bump only for package @pie-lib/drag
 
+## [2.22.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.2...@pie-lib/drag@2.22.1) (2025-10-22)
 
+**Note:** Version bump only for package @pie-lib/drag
 
+# [2.22.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.21.0...@pie-lib/drag@2.22.0) (2025-10-16)
 
+**Note:** Version bump only for package @pie-lib/drag
 
 # [2.21.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.21.0) (2025-10-16)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.20.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.20.0) (2025-10-16)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.19.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.19.0) (2025-10-16)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 ## [2.18.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.1...@pie-lib/drag@2.18.2) (2025-10-14)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 ## [2.18.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.18.0...@pie-lib/drag@2.18.1) (2025-10-09)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.18.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.18.0) (2025-09-25)
 
-
 ### Bug Fixes
 
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
-
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 
 ### Features
 
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
-
-
-
-
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 
 # [2.17.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.16.0...@pie-lib/drag@2.17.0) (2025-09-18)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.16.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.15.0...@pie-lib/drag@2.16.0) (2025-09-18)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.15.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.15.0) (2025-09-18)
 
-
 ### Bug Fixes
 
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
-
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 
 ### Features
 
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
-
-
-
-
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 
 # [2.14.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.13.0...@pie-lib/drag@2.14.0) (2025-09-17)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.13.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.12.0...@pie-lib/drag@2.13.0) (2025-09-17)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 # [2.12.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.11.1...@pie-lib/drag@2.12.0) (2025-09-17)
 
 **Note:** Version bump only for package @pie-lib/drag
 
-
-
-
-
 ## [2.11.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.11.1) (2025-08-11)
 
-
 ### Bug Fixes
 
-* fixed pie-lib/icons import [PD-5126] ([dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f))
-
+- fixed pie-lib/icons import [PD-5126](<[dcb506c](https://github.com/pie-framework/pie-lib/commit/dcb506c914a177f6d88bf73247a023bfe71dac1f)>)
 
 ### Features
 
-* split pie-toolbox into multiple packages [PD-5126] ([7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2))
-
-
-
-
+- split pie-toolbox into multiple packages [PD-5126](<[7d55a25](https://github.com/pie-framework/pie-lib/commit/7d55a2552d084cd3d0d5c00dc77411b2ced2f5e2)>)
 
 # [2.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/drag@2.2.9...@pie-lib/drag@2.11.0) (2025-08-07)
 

package/lib/drag-in-the-blank-dp.js

@@ -1,35 +1,66 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.spec = exports["default"] = void 0;
-
-var _reactDnd = require("react-dnd");
-
-var _droppablePlaceholder = require("./droppable-placeholder");
+exports.DragInTheBlankDroppable = DragInTheBlankDroppable;
+exports["default"] = void 0;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _placeholder = _interopRequireDefault(require("./placeholder"));
+var _core = require("@dnd-kit/core");
+var _styles = require("@mui/material/styles");
+var _excluded = ["children", "disabled", "classes", "isVerticalPool", "minHeight", "instanceId"];
+// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback
+// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic
 
-var _dragType = _interopRequireDefault(require("./drag-type"));
-
-var spec = {
-  canDrop: function canDrop(props) {
-    return !props.disabled;
-  },
-  drop: function drop() {
-    return {
-      dropped: true
-    };
-  }
+var DroppablePlaceholderContainer = (0, _styles.styled)('div')({
+  minHeight: '100px'
+});
+function DragInTheBlankDroppable(_ref) {
+  var children = _ref.children,
+    disabled = _ref.disabled,
+    classes = _ref.classes,
+    isVerticalPool = _ref.isVerticalPool,
+    minHeight = _ref.minHeight,
+    instanceId = _ref.instanceId,
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  // The actual drop handling will be managed by the parent component
+  // through the DragProvider's onDragEnd callback
+  var _useDroppable = (0, _core.useDroppable)({
+      id: 'drag-in-the-blank-droppable',
+      data: {
+        type: 'MaskBlank',
+        accepts: ['MaskBlank'],
+        id: 'drag-in-the-blank-droppable',
+        toChoiceBoard: true,
+        instanceId: instanceId
+      }
+    }),
+    setNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: setNodeRef
+  }, /*#__PURE__*/_react["default"].createElement(DroppablePlaceholderContainer, null, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    isOver: isOver,
+    choiceBoard: true,
+    className: classes,
+    isVerticalPool: isVerticalPool,
+    extraStyles: {
+      width: '100%',
+      minHeight: minHeight || 100,
+      height: 'auto'
+    }
+  }, children)));
+}
+DragInTheBlankDroppable.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  children: _propTypes["default"].node,
+  disabled: _propTypes["default"].bool,
+  onDrop: _propTypes["default"].func,
+  instanceId: _propTypes["default"].string
 };
-exports.spec = spec;
-var WithTarget = (0, _reactDnd.DropTarget)(_dragType["default"].types.db, spec, function (connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver()
-  };
-})(_droppablePlaceholder.DroppablePlaceholder);
-var _default = WithTarget;
-exports["default"] = _default;
+var _default = exports["default"] = DragInTheBlankDroppable;
 //# sourceMappingURL=drag-in-the-blank-dp.js.map

package/lib/drag-in-the-blank-dp.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-in-the-blank-dp.jsx"],"names":["spec","canDrop","props","disabled","drop","dropped","WithTarget","dragType","types","db","connect","monitor","connectDropTarget","dropTarget","isOver","DroppablePlaceholder"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEO,IAAMA,IAAI,GAAG;AAClBC,EAAAA,OAAO,EAAE,iBAACC,KAAD,EAAW;AAClB,WAAO,CAACA,KAAK,CAACC,QAAd;AACD,GAHiB;AAIlBC,EAAAA,IAAI,EAAE;AAAA,WAAO;AACXC,MAAAA,OAAO,EAAE;AADE,KAAP;AAAA;AAJY,CAAb;;AASP,IAAMC,UAAU,GAAG,0BAAWC,qBAASC,KAAT,CAAeC,EAA1B,EAA8BT,IAA9B,EAAoC,UAACU,OAAD,EAAUC,OAAV;AAAA,SAAuB;AAC5EC,IAAAA,iBAAiB,EAAEF,OAAO,CAACG,UAAR,EADyD;AAE5EC,IAAAA,MAAM,EAAEH,OAAO,CAACG,MAAR;AAFoE,GAAvB;AAAA,CAApC,EAGfC,0CAHe,CAAnB;eAKeT,U","sourcesContent":["import { DropTarget } from 'react-dnd';\nimport { DroppablePlaceholder } from './droppable-placeholder';\nimport dragType from './drag-type';\n\nexport const spec = {\n  canDrop: (props) => {\n    return !props.disabled;\n  },\n  drop: () => ({\n    dropped: true,\n  }),\n};\n\nconst WithTarget = DropTarget(dragType.types.db, spec, (connect, monitor) => ({\n  connectDropTarget: connect.dropTarget(),\n  isOver: monitor.isOver(),\n}))(DroppablePlaceholder);\n\nexport default WithTarget;\n"],"file":"drag-in-the-blank-dp.js"}
+{"version":3,"file":"drag-in-the-blank-dp.js","names":["_react","_interopRequireDefault","require","_propTypes","_placeholder","_core","_styles","_excluded","DroppablePlaceholderContainer","styled","minHeight","DragInTheBlankDroppable","_ref","children","disabled","classes","isVerticalPool","instanceId","rest","_objectWithoutProperties2","_useDroppable","useDroppable","id","data","type","accepts","toChoiceBoard","setNodeRef","isOver","createElement","ref","choiceBoard","className","extraStyles","width","height","propTypes","PropTypes","oneOfType","string","number","isRequired","node","bool","onDrop","func","_default","exports"],"sources":["../src/drag-in-the-blank-dp.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport PlaceHolder from './placeholder';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\n\n// With @dnd-kit, the drop logic is handled in the DragProvider's onDragEnd callback\n// This component now just wraps DroppablePlaceholder with drag-in-the-blank specific logic\n\nconst DroppablePlaceholderContainer = styled('div')({\n  minHeight: '100px',\n});\n\nexport function DragInTheBlankDroppable({\n  children,\n  disabled,\n  classes,\n  isVerticalPool,\n  minHeight,\n  instanceId,\n  ...rest\n}) {\n  // The actual drop handling will be managed by the parent component\n  // through the DragProvider's onDragEnd callback\n  const { setNodeRef, isOver } = useDroppable({\n     id: 'drag-in-the-blank-droppable',\n    data: {\n      type: 'MaskBlank',\n      accepts: ['MaskBlank'],\n      id: 'drag-in-the-blank-droppable',\n      toChoiceBoard: true,\n      instanceId\n    }\n  });\n\n  return (\n    <div ref={setNodeRef} >\n      <DroppablePlaceholderContainer>\n        <PlaceHolder\n          isOver={isOver}\n          choiceBoard={true}\n          className={classes}\n          isVerticalPool={isVerticalPool}\n          extraStyles={{\n            width: '100%',\n            minHeight: minHeight || 100,\n            height: 'auto',\n          }}\n        >\n          {children}\n        </PlaceHolder>\n      </DroppablePlaceholderContainer>\n    </div>\n  );\n}\n\nDragInTheBlankDroppable.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  onDrop: PropTypes.func,\n  instanceId: PropTypes.string,\n};\n\nexport default DragInTheBlankDroppable;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,YAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAA8C,IAAAK,SAAA;AAE9C;AACA;;AAEA,IAAMC,6BAA6B,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EAClDC,SAAS,EAAE;AACb,CAAC,CAAC;AAEK,SAASC,uBAAuBA,CAAAC,IAAA,EAQpC;EAAA,IAPDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,OAAO,GAAAH,IAAA,CAAPG,OAAO;IACPC,cAAc,GAAAJ,IAAA,CAAdI,cAAc;IACdN,SAAS,GAAAE,IAAA,CAATF,SAAS;IACTO,UAAU,GAAAL,IAAA,CAAVK,UAAU;IACPC,IAAI,OAAAC,yBAAA,aAAAP,IAAA,EAAAL,SAAA;EAEP;EACA;EACA,IAAAa,aAAA,GAA+B,IAAAC,kBAAY,EAAC;MACzCC,EAAE,EAAE,6BAA6B;MAClCC,IAAI,EAAE;QACJC,IAAI,EAAE,WAAW;QACjBC,OAAO,EAAE,CAAC,WAAW,CAAC;QACtBH,EAAE,EAAE,6BAA6B;QACjCI,aAAa,EAAE,IAAI;QACnBT,UAAU,EAAVA;MACF;IACF,CAAC,CAAC;IATMU,UAAU,GAAAP,aAAA,CAAVO,UAAU;IAAEC,MAAM,GAAAR,aAAA,CAANQ,MAAM;EAW1B,oBACE5B,MAAA,YAAA6B,aAAA;IAAKC,GAAG,EAAEH;EAAW,gBACnB3B,MAAA,YAAA6B,aAAA,CAACrB,6BAA6B,qBAC5BR,MAAA,YAAA6B,aAAA,CAACzB,YAAA,WAAW;IACVwB,MAAM,EAAEA,MAAO;IACfG,WAAW,EAAE,IAAK;IAClBC,SAAS,EAAEjB,OAAQ;IACnBC,cAAc,EAAEA,cAAe;IAC/BiB,WAAW,EAAE;MACXC,KAAK,EAAE,MAAM;MACbxB,SAAS,EAAEA,SAAS,IAAI,GAAG;MAC3ByB,MAAM,EAAE;IACV;EAAE,GAEDtB,QACU,CACgB,CAC5B,CAAC;AAEV;AAEAF,uBAAuB,CAACyB,SAAS,GAAG;EAClCd,EAAE,EAAEe,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxE5B,QAAQ,EAAEwB,qBAAS,CAACK,IAAI;EACxB5B,QAAQ,EAAEuB,qBAAS,CAACM,IAAI;EACxBC,MAAM,EAAEP,qBAAS,CAACQ,IAAI;EACtB5B,UAAU,EAAEoB,qBAAS,CAACE;AACxB,CAAC;AAAC,IAAAO,QAAA,GAAAC,OAAA,cAEapC,uBAAuB","ignoreList":[]}

package/lib/drag-provider.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragProvider = DragProvider;
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _core = require("@dnd-kit/core");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function DragProvider(_ref) {
+  var children = _ref.children,
+    onDragEnd = _ref.onDragEnd,
+    onDragStart = _ref.onDragStart,
+    collisionDetection = _ref.collisionDetection,
+    modifiers = _ref.modifiers,
+    autoScroll = _ref.autoScroll;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeId = _useState2[0],
+    setActiveId = _useState2[1];
+  var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor, {
+    activationConstraint: {
+      distance: 8
+    }
+  }), (0, _core.useSensor)(_core.KeyboardSensor));
+  var handleDragStart = function handleDragStart(event) {
+    setActiveId(event.active.id);
+    if (onDragStart) {
+      onDragStart(event);
+    }
+  };
+  var handleDragEnd = function handleDragEnd(event) {
+    setActiveId(null);
+    if (onDragEnd) {
+      onDragEnd(event);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
+    sensors: sensors,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    collisionDetection: collisionDetection,
+    modifiers: modifiers,
+    autoScroll: autoScroll
+  }, children);
+}
+DragProvider.propTypes = {
+  children: _propTypes["default"].node.isRequired,
+  onDragEnd: _propTypes["default"].func,
+  onDragStart: _propTypes["default"].func,
+  collisionDetection: _propTypes["default"].func,
+  modifiers: _propTypes["default"].arrayOf(_propTypes["default"].func),
+  autoScroll: _propTypes["default"].object
+};
+var _default = exports["default"] = DragProvider;
+//# sourceMappingURL=drag-provider.js.map

package/lib/drag-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-provider.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","_typeof","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DragProvider","_ref","children","onDragEnd","onDragStart","collisionDetection","modifiers","autoScroll","_useState","useState","_useState2","_slicedToArray2","activeId","setActiveId","sensors","useSensors","useSensor","PointerSensor","activationConstraint","distance","KeyboardSensor","handleDragStart","event","active","id","handleDragEnd","createElement","DndContext","propTypes","PropTypes","node","isRequired","func","arrayOf","object","_default","exports"],"sources":["../src/drag-provider.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\n\nexport function DragProvider({ children, onDragEnd, onDragStart, collisionDetection, modifiers, autoScroll }) {\n  const [activeId, setActiveId] = useState(null);\n  \n  const sensors = useSensors(\n    useSensor(PointerSensor, { activationConstraint: { distance: 8 }}),\n    useSensor(KeyboardSensor)\n  );\n\n  const handleDragStart = (event) => {\n    setActiveId(event.active.id);\n    if (onDragStart) {\n      onDragStart(event);\n    }\n  };\n\n  const handleDragEnd = (event) => {\n    setActiveId(null);\n    if (onDragEnd) {\n      onDragEnd(event);\n    }\n  };\n\n  return (\n    <DndContext \n      sensors={sensors} \n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      collisionDetection={collisionDetection}\n      modifiers={modifiers}\n      autoScroll={autoScroll}\n    >\n      {children}\n    </DndContext>\n  );\n}\n\nDragProvider.propTypes = {\n  children: PropTypes.node.isRequired,\n  onDragEnd: PropTypes.func,\n  onDragStart: PropTypes.func,\n  collisionDetection: PropTypes.func,\n  modifiers: PropTypes.arrayOf(PropTypes.func),\n  autoScroll: PropTypes.object,\n};\n\nexport default DragProvider;"],"mappings":"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","ignoreList":[]}

package/lib/drag-type.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _default = {
+var _default = exports["default"] = {
   types: {
-    ica: 'react-dnd-response',
+    ica: 'dnd-kit-response',
     ml: 'Answer',
     db: 'MaskBlank'
   }
 };
-exports["default"] = _default;
 //# sourceMappingURL=drag-type.js.map

package/lib/drag-type.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/drag-type.js"],"names":["types","ica","ml","db"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE,oBADA;AAELC,IAAAA,EAAE,EAAE,QAFC;AAGLC,IAAAA,EAAE,EAAE;AAHC;AADM,C","sourcesContent":["export default {\n  types: {\n    ica: 'react-dnd-response',\n    ml: 'Answer',\n    db: 'MaskBlank',\n  },\n};\n"],"file":"drag-type.js"}
+{"version":3,"file":"drag-type.js","names":["types","ica","ml","db"],"sources":["../src/drag-type.js"],"sourcesContent":["export default {\n  types: {\n    ica: 'dnd-kit-response',\n    ml: 'Answer',\n    db: 'MaskBlank',\n  },\n};\n"],"mappings":";;;;;;oCAAe;EACbA,KAAK,EAAE;IACLC,GAAG,EAAE,kBAAkB;IACvBC,EAAE,EAAE,QAAQ;IACZC,EAAE,EAAE;EACN;AACF,CAAC","ignoreList":[]}

package/lib/draggable-choice.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_TYPE = void 0;
+exports.DraggableChoice = DraggableChoice;
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _core = require("@dnd-kit/core");
+var _colors = require("@mui/material/colors");
+var DRAG_TYPE = exports.DRAG_TYPE = 'CHOICE';
+var StyledChoice = (0, _styles.styled)('div')(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background.paper,
+    border: "solid 1px ".concat(_colors.grey[400]),
+    padding: theme.spacing(1),
+    minHeight: '30px',
+    minWidth: theme.spacing(20),
+    maxWidth: theme.spacing(75),
+    cursor: 'grab',
+    '&:active': {
+      cursor: 'grabbing'
+    }
+  };
+});
+function DraggableChoice(_ref2) {
+  var choice = _ref2.choice,
+    children = _ref2.children,
+    className = _ref2.className,
+    disabled = _ref2.disabled,
+    category = _ref2.category,
+    alternateResponseIndex = _ref2.alternateResponseIndex,
+    choiceIndex = _ref2.choiceIndex,
+    onRemoveChoice = _ref2.onRemoveChoice,
+    type = _ref2.type,
+    id = _ref2.id;
+  var _useDraggable = (0, _core.useDraggable)({
+      id: id || choice.id,
+      // id to be used for dnd-kit
+      disabled: disabled,
+      categoryId: category === null || category === void 0 ? void 0 : category.id,
+      alternateResponseIndex: alternateResponseIndex,
+      data: {
+        id: choice.id,
+        value: choice.value,
+        choiceId: choice.id,
+        from: category === null || category === void 0 ? void 0 : category.id,
+        categoryId: category === null || category === void 0 ? void 0 : category.id,
+        alternateResponseIndex: alternateResponseIndex,
+        choiceIndex: choiceIndex,
+        onRemoveChoice: onRemoveChoice,
+        type: type
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    setNodeRef = _useDraggable.setNodeRef,
+    isDragging = _useDraggable.isDragging;
+  return /*#__PURE__*/_react["default"].createElement(StyledChoice, (0, _extends2["default"])({
+    ref: setNodeRef,
+    className: className,
+    isDragging: isDragging
+  }, attributes, listeners), children);
+}
+DraggableChoice.propTypes = {
+  choice: _propTypes["default"].shape({
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+    value: _propTypes["default"].any
+  }).isRequired,
+  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]),
+  className: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  category: _propTypes["default"].shape({
+    id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  }),
+  alternateResponseIndex: _propTypes["default"].number,
+  choiceIndex: _propTypes["default"].number,
+  onRemoveChoice: _propTypes["default"].func,
+  type: _propTypes["default"].string,
+  id: _propTypes["default"].string
+};
+var _default = exports["default"] = DraggableChoice;
+//# sourceMappingURL=draggable-choice.js.map

package/lib/draggable-choice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-choice.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_core","_colors","DRAG_TYPE","exports","StyledChoice","styled","_ref","theme","backgroundColor","palette","background","paper","border","concat","grey","padding","spacing","minHeight","minWidth","maxWidth","cursor","DraggableChoice","_ref2","choice","children","className","disabled","category","alternateResponseIndex","choiceIndex","onRemoveChoice","type","id","_useDraggable","useDraggable","categoryId","data","value","choiceId","from","attributes","listeners","setNodeRef","isDragging","createElement","_extends2","ref","propTypes","PropTypes","shape","oneOfType","string","number","isRequired","any","arrayOf","node","bool","func","_default"],"sources":["../src/draggable-choice.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\nimport { useDraggable } from '@dnd-kit/core';\nimport { grey } from '@mui/material/colors';\n\nexport const DRAG_TYPE = 'CHOICE';\n\nconst StyledChoice = styled('div')(({ theme }) => ({\n  backgroundColor: theme.palette.background.paper,\n  border: `solid 1px ${grey[400]}`,\n  padding: theme.spacing(1),\n  minHeight: '30px',\n  minWidth: theme.spacing(20),\n  maxWidth: theme.spacing(75),\n  cursor: 'grab',\n  '&:active': {\n    cursor: 'grabbing',\n  },\n}));\n\nexport function DraggableChoice({\n  choice,\n  children,\n  className,\n  disabled,\n  category,\n  alternateResponseIndex,\n  choiceIndex,\n  onRemoveChoice,\n  type,\n  id\n}) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    isDragging\n  } = useDraggable({\n    id: id || choice.id, // id to be used for dnd-kit\n    disabled: disabled,\n    categoryId: category?.id,\n    alternateResponseIndex,\n    data: {\n      id: choice.id,\n      value: choice.value,\n      choiceId: choice.id,\n      from: category?.id,\n      categoryId: category?.id,\n      alternateResponseIndex,\n      choiceIndex,\n      onRemoveChoice,\n      type\n    }\n  });\n\n  return (\n    <StyledChoice\n      ref={setNodeRef}\n      className={className}\n      isDragging={isDragging}\n      {...attributes}\n      {...listeners}\n    >\n      {children}\n    </StyledChoice>\n  );\n}\n\nDraggableChoice.propTypes = {\n  choice: PropTypes.shape({\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    value: PropTypes.any,\n  }).isRequired,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),\n  className: PropTypes.string,\n  disabled: PropTypes.bool,\n  category: PropTypes.shape({\n    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  }),\n  alternateResponseIndex: PropTypes.number,\n  choiceIndex: PropTypes.number,\n  onRemoveChoice: PropTypes.func,\n  type: PropTypes.string,\n  id: PropTypes.string,\n};\n\nexport default DraggableChoice;\n"],"mappings":"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","ignoreList":[]}

package/lib/droppable-placeholder.js

@@ -1,82 +1,50 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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.DroppablePlaceholder = DroppablePlaceholder;
+exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
-
 var _placeholder = _interopRequireDefault(require("./placeholder"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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 _core = require("@dnd-kit/core");
 var preventInteractionStyle = {
   flex: 1
 };
-
-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,
-          children = _this$props.children,
-          connectDropTarget = _this$props.connectDropTarget,
-          isOver = _this$props.isOver,
-          disabled = _this$props.disabled,
-          classes = _this$props.classes,
-          isVerticalPool = _this$props.isVerticalPool,
-          minHeight = _this$props.minHeight;
-      return connectDropTarget( /*#__PURE__*/_react["default"].createElement("div", {
-        style: preventInteractionStyle
-      }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
-        disabled: disabled,
-        isOver: isOver,
-        choiceBoard: true,
-        className: classes,
-        isVerticalPool: isVerticalPool,
-        minHeight: minHeight
-      }, children)));
-    }
-  }]);
-  return DroppablePlaceholder;
-}(_react["default"].Component);
-
-exports.DroppablePlaceholder = DroppablePlaceholder;
-(0, _defineProperty2["default"])(DroppablePlaceholder, "propTypes", {
-  classes: _propTypes["default"].object,
-  connectDropTarget: _propTypes["default"].func.isRequired,
-  isOver: _propTypes["default"].bool,
+function DroppablePlaceholder(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    disabled = _ref.disabled,
+    classes = _ref.classes,
+    isVerticalPool = _ref.isVerticalPool,
+    minHeight = _ref.minHeight;
+  var _useDroppable = (0, _core.useDroppable)({
+      id: id,
+      disabled: disabled
+    }),
+    setNodeRef = _useDroppable.setNodeRef,
+    isOver = _useDroppable.isOver;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: setNodeRef,
+    style: preventInteractionStyle
+  }, /*#__PURE__*/_react["default"].createElement(_placeholder["default"], {
+    disabled: disabled,
+    isOver: isOver,
+    choiceBoard: true,
+    className: classes,
+    isVerticalPool: isVerticalPool,
+    minHeight: minHeight
+  }, children));
+}
+DroppablePlaceholder.propTypes = {
+  id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
   children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node]).isRequired,
   disabled: _propTypes["default"].bool,
+  classes: _propTypes["default"].object,
   isVerticalPool: _propTypes["default"].bool,
   minHeight: _propTypes["default"].number
-});
+};
+var _default = exports["default"] = DroppablePlaceholder;
 //# sourceMappingURL=droppable-placeholder.js.map

package/lib/droppable-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/droppable-placeholder.jsx"],"names":["preventInteractionStyle","flex","DroppablePlaceholder","props","children","connectDropTarget","isOver","disabled","classes","isVerticalPool","minHeight","React","Component","PropTypes","object","func","isRequired","bool","oneOfType","arrayOf","node","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,IAAMA,uBAAuB,GAAG;AAC9BC,EAAAA,IAAI,EAAE;AADwB,CAAhC;;IAIaC,oB;;;;;;;;;;;;WAWX,kBAAS;AACP,wBAA8F,KAAKC,KAAnG;AAAA,UAAQC,QAAR,eAAQA,QAAR;AAAA,UAAkBC,iBAAlB,eAAkBA,iBAAlB;AAAA,UAAqCC,MAArC,eAAqCA,MAArC;AAAA,UAA6CC,QAA7C,eAA6CA,QAA7C;AAAA,UAAuDC,OAAvD,eAAuDA,OAAvD;AAAA,UAAgEC,cAAhE,eAAgEA,cAAhE;AAAA,UAAgFC,SAAhF,eAAgFA,SAAhF;AAEA,aAAOL,iBAAiB,eACtB;AAAK,QAAA,KAAK,EAAEL;AAAZ,sBACE,gCAAC,uBAAD;AACE,QAAA,QAAQ,EAAEO,QADZ;AAEE,QAAA,MAAM,EAAED,MAFV;AAGE,QAAA,WAAW,EAAE,IAHf;AAIE,QAAA,SAAS,EAAEE,OAJb;AAKE,QAAA,cAAc,EAAEC,cALlB;AAME,QAAA,SAAS,EAAEC;AANb,SAQGN,QARH,CADF,CADsB,CAAxB;AAcD;;;EA5BuCO,kBAAMC,S;;;iCAAnCV,oB,eACQ;AACjBM,EAAAA,OAAO,EAAEK,sBAAUC,MADF;AAEjBT,EAAAA,iBAAiB,EAAEQ,sBAAUE,IAAV,CAAeC,UAFjB;AAGjBV,EAAAA,MAAM,EAAEO,sBAAUI,IAHD;AAIjBb,EAAAA,QAAQ,EAAES,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,OAAV,CAAkBN,sBAAUO,IAA5B,CAAD,EAAoCP,sBAAUO,IAA9C,CAApB,EAAyEJ,UAJlE;AAKjBT,EAAAA,QAAQ,EAAEM,sBAAUI,IALH;AAMjBR,EAAAA,cAAc,EAAEI,sBAAUI,IANT;AAOjBP,EAAAA,SAAS,EAAEG,sBAAUQ;AAPJ,C","sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\n\nconst preventInteractionStyle = {\n  flex: 1,\n};\n\nexport class DroppablePlaceholder extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    connectDropTarget: PropTypes.func.isRequired,\n    isOver: PropTypes.bool,\n    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n    disabled: PropTypes.bool,\n    isVerticalPool: PropTypes.bool,\n    minHeight: PropTypes.number,\n  };\n\n  render() {\n    const { children, connectDropTarget, isOver, disabled, classes, isVerticalPool, minHeight } = this.props;\n\n    return connectDropTarget(\n      <div style={preventInteractionStyle}>\n        <PlaceHolder\n          disabled={disabled}\n          isOver={isOver}\n          choiceBoard={true}\n          className={classes}\n          isVerticalPool={isVerticalPool}\n          minHeight={minHeight}\n        >\n          {children}\n        </PlaceHolder>\n      </div>,\n    );\n  }\n}\n"],"file":"droppable-placeholder.js"}
+{"version":3,"file":"droppable-placeholder.js","names":["_react","_interopRequireDefault","require","_placeholder","_propTypes","_core","preventInteractionStyle","flex","DroppablePlaceholder","_ref","id","children","disabled","classes","isVerticalPool","minHeight","_useDroppable","useDroppable","setNodeRef","isOver","createElement","ref","style","choiceBoard","className","propTypes","PropTypes","oneOfType","string","number","isRequired","arrayOf","node","bool","object","_default","exports"],"sources":["../src/droppable-placeholder.jsx"],"sourcesContent":["import React from 'react';\nimport PlaceHolder from './placeholder';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\n\nconst preventInteractionStyle = {\n  flex: 1,\n};\n\nexport function DroppablePlaceholder({ \n  id,\n  children, \n  disabled, \n  classes, \n  isVerticalPool, \n  minHeight \n}) {\n  const { setNodeRef, isOver } = useDroppable({ \n    id,\n    disabled \n  });\n\n  return (\n    <div ref={setNodeRef} style={preventInteractionStyle}>\n      <PlaceHolder\n        disabled={disabled}\n        isOver={isOver}\n        choiceBoard={true}\n        className={classes}\n        isVerticalPool={isVerticalPool}\n        minHeight={minHeight}\n      >\n        {children}\n      </PlaceHolder>\n    </div>\n  );\n}\n\nDroppablePlaceholder.propTypes = {\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,\n  disabled: PropTypes.bool,\n  classes: PropTypes.object,\n  isVerticalPool: PropTypes.bool,\n  minHeight: PropTypes.number,\n};\n\nexport default DroppablePlaceholder;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAMI,uBAAuB,GAAG;EAC9BC,IAAI,EAAE;AACR,CAAC;AAEM,SAASC,oBAAoBA,CAAAC,IAAA,EAOjC;EAAA,IANDC,EAAE,GAAAD,IAAA,CAAFC,EAAE;IACFC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,OAAO,GAAAJ,IAAA,CAAPI,OAAO;IACPC,cAAc,GAAAL,IAAA,CAAdK,cAAc;IACdC,SAAS,GAAAN,IAAA,CAATM,SAAS;EAET,IAAAC,aAAA,GAA+B,IAAAC,kBAAY,EAAC;MAC1CP,EAAE,EAAFA,EAAE;MACFE,QAAQ,EAARA;IACF,CAAC,CAAC;IAHMM,UAAU,GAAAF,aAAA,CAAVE,UAAU;IAAEC,MAAM,GAAAH,aAAA,CAANG,MAAM;EAK1B,oBACEnB,MAAA,YAAAoB,aAAA;IAAKC,GAAG,EAAEH,UAAW;IAACI,KAAK,EAAEhB;EAAwB,gBACnDN,MAAA,YAAAoB,aAAA,CAACjB,YAAA,WAAW;IACVS,QAAQ,EAAEA,QAAS;IACnBO,MAAM,EAAEA,MAAO;IACfI,WAAW,EAAE,IAAK;IAClBC,SAAS,EAAEX,OAAQ;IACnBC,cAAc,EAAEA,cAAe;IAC/BC,SAAS,EAAEA;EAAU,GAEpBJ,QACU,CACV,CAAC;AAEV;AAEAH,oBAAoB,CAACiB,SAAS,GAAG;EAC/Bf,EAAE,EAAEgB,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,MAAM,EAAEF,qBAAS,CAACG,MAAM,CAAC,CAAC,CAACC,UAAU;EACxEnB,QAAQ,EAAEe,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACK,OAAO,CAACL,qBAAS,CAACM,IAAI,CAAC,EAAEN,qBAAS,CAACM,IAAI,CAAC,CAAC,CAACF,UAAU;EAC7FlB,QAAQ,EAAEc,qBAAS,CAACO,IAAI;EACxBpB,OAAO,EAAEa,qBAAS,CAACQ,MAAM;EACzBpB,cAAc,EAAEY,qBAAS,CAACO,IAAI;EAC9BlB,SAAS,EAAEW,qBAAS,CAACG;AACvB,CAAC;AAAC,IAAAM,QAAA,GAAAC,OAAA,cAEa5B,oBAAoB","ignoreList":[]}