@pie-element/image-cloze-association 0.1.0

package/dist/delivery/evaluation-icon.js

@@ -0,0 +1,38 @@
+import "react";
+import { color as e } from "@pie-lib/render-ui";
+import t from "prop-types";
+import { jsx as n } from "react/jsx-runtime";
+import { styled as r } from "@mui/material/styles";
+import i from "@mui/icons-material/Check";
+import a from "@mui/icons-material/Close";
+//#region src/delivery/evaluation-icon.tsx
+var o = r("svg")(() => ({
+	"&.correctEmpty": { color: e.correct() },
+	"&.correctFilled": {
+		color: e.background(),
+		backgroundColor: e.correct()
+	},
+	"&.incorrectEmpty": { color: e.incorrect() },
+	"&.incorrectFilled": {
+		color: e.background(),
+		backgroundColor: e.incorrect()
+	}
+})), s = (e, t) => `${e ? "correct" : "incorrect"}${t ? "Filled" : "Empty"}`, c = ({ containerStyle: e, isCorrect: t, filled: r }) => {
+	let c = t ? i : a, l = t !== void 0, u = l ? s(t, r) : "";
+	return l ? /* @__PURE__ */ n(c, {
+		component: o,
+		className: u,
+		style: e
+	}) : null;
+};
+c.propTypes = {
+	containerStyle: t.object,
+	filled: t.bool,
+	isCorrect: t.oneOfType([t.bool, t.number])
+}, c.defaultProps = {
+	containerStyle: {},
+	filled: !1,
+	isCorrect: void 0
+};
+//#endregion
+export { c as default };

package/dist/delivery/image-container.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/image-container.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React, { Component } from 'react';
+declare class ImageContainer extends Component {
+    render(): React.JSX.Element;
+}
+export default ImageContainer;
+//# sourceMappingURL=image-container.d.ts.map

package/dist/delivery/image-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-container.d.ts","sourceRoot":"","sources":["../../src/delivery/image-container.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzC,cAAM,cAAe,SAAQ,SAAS;IACpC,MAAM;CAyDP;AAmBD,eAAe,cAAc,CAAC"}

package/dist/delivery/image-container.js

@@ -0,0 +1,61 @@
+import e from "./image-drop-target.js";
+import { Component as t } from "react";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+//#region src/delivery/image-container.tsx
+var o = a("div")(({ theme: e }) => ({
+	margin: e.spacing(2),
+	position: "relative",
+	width: "fit-content"
+})), s = class extends t {
+	render() {
+		let { answers: t, canDrag: n, draggingElement: a, image: { height: s, src: c, width: l } = {}, onAnswerSelect: u, onDragAnswerBegin: d, onDragAnswerEnd: f, responseContainers: p, showDashedBorder: m, responseAreaFill: h, answerChoiceTransparency: g, responseContainerPadding: _, imageDropTargetPadding: v, maxResponsePerZone: y } = this.props;
+		return /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ r("img", {
+			src: c,
+			height: s,
+			width: l
+		}), (p || []).map((i, o) => {
+			let c = i.height.replace("%", "") / 100 * s, p = i.width.replace("%", "") / 100 * l, b = i.x / 100 * l, x = i.y / 100 * s;
+			return /* @__PURE__ */ r(e, {
+				answers: t.filter((e) => e.containerIndex === i.index),
+				canDrag: n,
+				containerStyle: {
+					height: c,
+					width: p,
+					left: b,
+					top: x
+				},
+				draggingElement: a,
+				index: i.index,
+				onDrop: (e) => u(e, i.index),
+				onDragAnswerBegin: d,
+				onDragAnswerEnd: f,
+				showDashedBorder: m,
+				responseAreaFill: h,
+				answerChoiceTransparency: g,
+				responseContainerPadding: _,
+				imageDropTargetPadding: v,
+				maxResponsePerZone: y
+			}, i.id + o);
+		})] });
+	}
+};
+s.propTypes = {
+	answers: n.array.isRequired,
+	canDrag: n.bool.isRequired,
+	draggingElement: n.shape({}).isRequired,
+	image: n.object.isRequired,
+	onAnswerSelect: n.func.isRequired,
+	onDragAnswerBegin: n.func.isRequired,
+	onDragAnswerEnd: n.func.isRequired,
+	responseContainers: n.array.isRequired,
+	showDashedBorder: n.bool,
+	answerChoiceTransparency: n.bool,
+	responseAreaFill: n.string,
+	responseContainerPadding: n.string,
+	imageDropTargetPadding: n.string,
+	maxResponsePerZone: n.number
+};
+//#endregion
+export { s as default };

package/dist/delivery/image-drop-target.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/image-drop-target.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const ImageDropTarget: {
+    ({ answers, canDrag, containerStyle, draggingElement, onDragAnswerBegin, onDragAnswerEnd, showDashedBorder, responseAreaFill, responseContainerPadding, imageDropTargetPadding, answerChoiceTransparency, maxResponsePerZone, onDrop, index, }: {
+        answers: any;
+        canDrag: any;
+        containerStyle: any;
+        draggingElement: any;
+        onDragAnswerBegin: any;
+        onDragAnswerEnd: any;
+        showDashedBorder: any;
+        responseAreaFill: any;
+        responseContainerPadding?: string | undefined;
+        imageDropTargetPadding: any;
+        answerChoiceTransparency: any;
+        maxResponsePerZone: any;
+        onDrop: any;
+        index: any;
+    }): React.JSX.Element;
+    propTypes: {
+        answer: PropTypes.Requireable<object>;
+        answers: PropTypes.Requireable<any[]>;
+        canDrag: PropTypes.Validator<boolean>;
+        containerStyle: PropTypes.Validator<object>;
+        draggingElement: PropTypes.Validator<object>;
+        onDragAnswerBegin: PropTypes.Validator<(...args: any[]) => any>;
+        onDragAnswerEnd: PropTypes.Validator<(...args: any[]) => any>;
+        onDrop: PropTypes.Validator<(...args: any[]) => any>;
+        showDashedBorder: PropTypes.Requireable<boolean>;
+        responseAreaFill: PropTypes.Requireable<string>;
+        answerChoiceTransparency: PropTypes.Requireable<boolean>;
+        responseContainerPadding: PropTypes.Requireable<string>;
+        imageDropTargetPadding: PropTypes.Requireable<string>;
+        maxResponsePerZone: PropTypes.Requireable<number>;
+    };
+};
+export default ImageDropTarget;
+//# sourceMappingURL=image-drop-target.d.ts.map

package/dist/delivery/image-drop-target.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-drop-target.d.ts","sourceRoot":"","sources":["../../src/delivery/image-drop-target.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,SAAS,MAAM,YAAY,CAAC;AA6BnC,QAAA,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FpB,CAAC;AAmBF,eAAe,eAAe,CAAC"}

package/dist/delivery/image-drop-target.js

@@ -0,0 +1,90 @@
+import e from "./possible-response.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { color as i } from "@pie-lib/render-ui";
+import a from "prop-types";
+import { useDroppable as o } from "@dnd-kit/core";
+import { jsx as s } from "react/jsx-runtime";
+import { styled as c } from "@mui/material/styles";
+import l from "classnames";
+//#region src/delivery/image-drop-target.tsx
+var u = c("div")(() => ({
+	display: "flex",
+	flexWrap: "wrap"
+})), d = c("div")(() => ({
+	position: "absolute",
+	boxSizing: "border-box",
+	"&.active": {
+		border: `2px solid ${i.text()}`,
+		backgroundColor: "rgba(230, 242, 252, .8)"
+	},
+	"&.dashed": { border: `2px dashed ${i.text()}` },
+	"&.is-over": {
+		border: "1px solid rgb(158, 158, 158)",
+		backgroundColor: "rgb(224, 224, 224)"
+	}
+})), f = ({ answers: i, canDrag: a, containerStyle: c, draggingElement: f, onDragAnswerBegin: p, onDragAnswerEnd: m, showDashedBorder: h, responseAreaFill: g, responseContainerPadding: _ = "10px", imageDropTargetPadding: v, answerChoiceTransparency: y, maxResponsePerZone: b, onDrop: x, index: S }) => {
+	let [C, w] = r(!1), T = n(null), E = n(null), { setNodeRef: D, isOver: O } = o({
+		id: `response-container-${S}`,
+		data: {
+			containerIndex: S,
+			onDrop: x
+		}
+	});
+	t(() => {
+		let e = T.current;
+		if (!e) return;
+		let t = (e) => {
+			e.preventDefault();
+		};
+		return e.addEventListener("touchstart", t, { passive: !1 }), () => {
+			e.removeEventListener("touchstart", t);
+		};
+	}, []);
+	let k = !!f.id;
+	return /* @__PURE__ */ s(d, {
+		ref: (e) => {
+			T.current = e, D(e);
+		},
+		className: l({
+			"is-over": O,
+			dashed: h && !k,
+			active: k
+		}),
+		style: {
+			padding: b === 1 ? "0" : _,
+			...c,
+			...g && !k && { backgroundColor: g }
+		},
+		children: i.length ? /* @__PURE__ */ s(u, {
+			ref: (e) => {
+				E.current = e?.getBoundingClientRect().height;
+			},
+			children: i.map((t) => /* @__PURE__ */ s(e, {
+				data: t,
+				canDrag: a,
+				onDragBegin: () => p(t),
+				onDragEnd: m,
+				answerChoiceTransparency: y,
+				containerStyle: { padding: v || (C ? "2px" : "6px 10px") }
+			}, t.id))
+		}) : null
+	});
+};
+f.propTypes = {
+	answer: a.object,
+	answers: a.array,
+	canDrag: a.bool.isRequired,
+	containerStyle: a.object.isRequired,
+	draggingElement: a.object.isRequired,
+	onDragAnswerBegin: a.func.isRequired,
+	onDragAnswerEnd: a.func.isRequired,
+	onDrop: a.func.isRequired,
+	showDashedBorder: a.bool,
+	responseAreaFill: a.string,
+	answerChoiceTransparency: a.bool,
+	responseContainerPadding: a.string,
+	imageDropTargetPadding: a.string,
+	maxResponsePerZone: a.number
+};
+//#endregion
+export { f as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export default class ImageClozeAssociation extends HTMLElement {
+    constructor();
+    set model(m: any);
+    isComplete(): any;
+    set session(s: any);
+    get session(): any;
+    updateAnswer(data: any): void;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    _render(): void;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/delivery/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/delivery/index.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAsCH,MAAM,CAAC,OAAO,OAAO,qBAAsB,SAAQ,WAAW;;IAM5D,IAAI,KAAK,CAAC,CAAC,KAAA,EAKV;IAED,UAAU;IAkEV,IAAI,OAAO,CAAC,CAAC,KAAA,EAOZ;IAED,IAAI,OAAO,QAEV;IAED,YAAY,CAAC,IAAI,KAAA;IASjB,qBAAqB;IA2BrB,iBAAiB;IA6EjB,oBAAoB;IAcpB,OAAO;CAiBR"}

package/dist/delivery/index.js

@@ -0,0 +1,110 @@
+import e from "./root.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { renderMath as r } from "@pie-element/shared-math-rendering-mathjax";
+import * as i from "@pie-lib/render-ui";
+import { EnableAudioAutoplayImage as a } from "@pie-lib/render-ui";
+import { ModelSetEvent as o, SessionChangedEvent as s } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+function c(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function l(e, t) {
+	return !e || c(e) ? e : c(e.default) ? e.default : t && c(e[t]) ? e[t] : t && c(e[t]?.default) ? e[t].default : e;
+}
+var u = l(a, "EnableAudioAutoplayImage") || l(p.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), d = i, f = d.default, p = f && typeof f == "object" ? f : d, m = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null;
+	}
+	set model(e) {
+		this._model = e, this.dispatchEvent(new o(this.tagName.toLowerCase(), this.isComplete(), !!this._model)), this._render();
+	}
+	isComplete() {
+		let { autoplayAudioEnabled: e, completeAudioEnabled: t, completeResponses: n, duplicateResponses: r, hasUnplacedChoices: i, maxResponsePerZone: a, responseAreasToBeFilled: o } = this._model || {}, s = this;
+		if (e && t && !this.audioComplete && s) {
+			let e = s.querySelector("audio"), t = e && e.closest("#preview-prompt");
+			if (e && t) return !1;
+		}
+		if (!this._session || !this._session.answers) return !1;
+		let { answers: c } = this._session;
+		if (!Array.isArray(c)) return !1;
+		let l = [...new Map(c.map((e) => [e.containerIndex, e])).values()].length >= o;
+		if (a > 1) {
+			if (r || i) return l;
+			let e = c.map((e) => e.value);
+			return n.some((t) => t.every((t) => e.includes(t)));
+		}
+		return l;
+	}
+	set session(e) {
+		e && !e.answers && (e.answers = []), this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	updateAnswer(e) {
+		this._session.answers = e, this._session.selector = "Mouse", this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), this._render();
+	}
+	_createAudioInfoToast() {
+		let e = document.createElement("div");
+		e.id = "play-audio-info", Object.assign(e.style, {
+			position: "absolute",
+			top: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			background: "white",
+			zIndex: "1000",
+			cursor: "pointer"
+		});
+		let t = document.createElement("img");
+		return t.src = u, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
+	}
+	connectedCallback() {
+		this._render(), new MutationObserver((e, t) => {
+			e.forEach((e) => {
+				if (e.type === "childList") {
+					let e = this.querySelector("audio"), n = e && e.closest("#preview-prompt");
+					if (!this._model || !this._model.autoplayAudioEnabled || e && !n || !e) return;
+					let r = this._createAudioInfoToast(), i = this.querySelector("#main-container"), a = () => {
+						this.querySelector("#play-audio-info") && (e.play(), i.removeChild(r)), document.removeEventListener("click", a);
+					};
+					setTimeout(() => {
+						e.paused && !this.querySelector("#play-audio-info") ? (i.appendChild(r), document.addEventListener("click", a)) : document.removeEventListener("click", a);
+					}, 500);
+					let o = () => {
+						let t = this.querySelector("#play-audio-info");
+						t && i.removeChild(t), e.removeEventListener("playing", o);
+					};
+					e.addEventListener("playing", o);
+					let c = () => {
+						this.audioComplete = !0, this.dispatchEvent(new s(this.tagName.toLowerCase(), this.isComplete())), e.removeEventListener("ended", c);
+					};
+					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = o, this._handleEnded = c, this._enableAudio = a, t.disconnect();
+				}
+			});
+		}).observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	disconnectedCallback() {
+		document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root && this._root.unmount();
+	}
+	_render() {
+		if (this._model && this._session) {
+			let i = t.createElement(e, {
+				model: this._model,
+				session: this._session,
+				updateAnswer: this.updateAnswer.bind(this)
+			});
+			this._root ||= n(this), this._root.render(i), queueMicrotask(() => {
+				r(this);
+			});
+		}
+	}
+};
+//#endregion
+export { m as default };

package/dist/delivery/interactive-section.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/interactive-section.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+declare class InteractiveSection extends React.Component {
+    getClassname(): string;
+    getPositionDirection(choicePosition: any): string;
+    render(): React.JSX.Element;
+}
+export default InteractiveSection;
+//# sourceMappingURL=interactive-section.d.ts.map

package/dist/delivery/interactive-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactive-section.d.ts","sourceRoot":"","sources":["../../src/delivery/interactive-section.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,cAAM,kBAAmB,SAAQ,KAAK,CAAC,SAAS;IAC9C,YAAY;IAkBZ,oBAAoB,CAAC,cAAc,KAAA;IAsBnC,MAAM;CAkBP;AAYD,eAAe,kBAAkB,CAAC"}

package/dist/delivery/interactive-section.js

@@ -0,0 +1,72 @@
+import e from "./evaluation-icon.js";
+import t from "react";
+import { color as n } from "@pie-lib/render-ui";
+import r from "prop-types";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o } from "@mui/material/styles";
+//#region src/delivery/interactive-section.tsx
+var s = o("div")(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	display: "flex",
+	width: "fit-content",
+	"&.default": { border: `1px solid ${n.disabled()}` },
+	"&.correct": { border: `2px solid ${n.correct()}` },
+	"&.incorrect": { border: `2px solid ${n.incorrect()}` }
+})), c = class extends t.Component {
+	getClassname() {
+		let { responseCorrect: e } = this.props, t;
+		switch (e) {
+			case void 0:
+				t = "default";
+				break;
+			case !0:
+				t = "correct";
+				break;
+			default:
+				t = "incorrect";
+				break;
+		}
+		return t;
+	}
+	getPositionDirection(e) {
+		let t;
+		switch (e) {
+			case "left":
+				t = "row-reverse";
+				break;
+			case "right":
+				t = "row";
+				break;
+			case "top":
+				t = "column-reverse";
+				break;
+			default:
+				t = "column";
+				break;
+		}
+		return t;
+	}
+	render() {
+		let { children: t, responseCorrect: n, uiStyle: r } = this.props, o = this.getClassname(), { possibilityListPosition: c = "bottom" } = r || {};
+		return /* @__PURE__ */ a(s, {
+			className: o,
+			style: { flexDirection: this.getPositionDirection(c) },
+			children: [/* @__PURE__ */ i(e, {
+				containerStyle: {
+					display: "flex",
+					margin: "0 auto",
+					marginTop: -14
+				},
+				filled: !0,
+				isCorrect: n
+			}), t]
+		});
+	}
+};
+c.propTypes = {
+	children: r.oneOfType([r.element, r.array]).isRequired,
+	responseCorrect: r.oneOfType([r.bool, r.number]),
+	uiStyle: r.object
+}, c.defaultProps = { responseCorrect: void 0 };
+//#endregion
+export { c as default };

package/dist/delivery/possible-response.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/possible-response.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const PossibleResponse: {
+    ({ canDrag, containerStyle, data, onDragBegin, answerChoiceTransparency, isOverlay }: {
+        canDrag: any;
+        containerStyle: any;
+        data: any;
+        onDragBegin: any;
+        answerChoiceTransparency: any;
+        isOverlay: any;
+    }): React.JSX.Element;
+    propTypes: {
+        canDrag: PropTypes.Validator<boolean>;
+        containerStyle: PropTypes.Requireable<object>;
+        data: PropTypes.Validator<object>;
+        onDragBegin: PropTypes.Validator<(...args: any[]) => any>;
+        answerChoiceTransparency: PropTypes.Requireable<boolean>;
+        isOverlay: PropTypes.Requireable<boolean>;
+    };
+    defaultProps: {
+        containerStyle: {};
+        answerChoiceTransparency: boolean;
+        isOverlay: boolean;
+    };
+};
+export default PossibleResponse;
+//# sourceMappingURL=possible-response.d.ts.map

package/dist/delivery/possible-response.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"possible-response.d.ts","sourceRoot":"","sources":["../../src/delivery/possible-response.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,SAAS,MAAM,YAAY,CAAC;AAmDnC,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;CAkFrB,CAAC;AAiBF,eAAe,gBAAgB,CAAC"}

package/dist/delivery/possible-response.js

@@ -0,0 +1,100 @@
+import e from "./evaluation-icon.js";
+import t from "./static-html-span.js";
+import { useEffect as n, useRef as r } from "react";
+import { color as i } from "@pie-lib/render-ui";
+import a from "prop-types";
+import { useDraggable as o } from "@dnd-kit/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { styled as l } from "@mui/material/styles";
+import u from "classnames";
+//#region src/delivery/possible-response.tsx
+var d = l("div")(() => ({
+	position: "relative",
+	backgroundColor: i.white(),
+	border: `1px solid ${i.borderDark()}`,
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	minHeight: "28px",
+	width: "fit-content",
+	"& span img": { pointerEvents: "none" },
+	"&.textAnswerChoiceStyle": {
+		padding: "0 10px",
+		margin: "4px 6px !important"
+	},
+	"&.answerChoiceTransparency": {
+		border: "none",
+		backgroundColor: `${i.transparent()}`,
+		"&:hover": { border: `1px solid ${i.borderDark()}` }
+	},
+	"&.baseCorrect": { border: `2px solid ${i.correct()} !important` },
+	"&.baseIncorrect": { border: `2px solid ${i.incorrect()} !important` }
+})), f = l(t)(() => ({
+	cursor: "grab",
+	backgroundColor: i.background(),
+	"&.hiddenSpan": { visibility: "hidden" }
+})), p = ({ canDrag: t, containerStyle: i, data: a, onDragBegin: l, answerChoiceTransparency: p, isOverlay: m }) => {
+	let h = r(null), g = r(null), { setNodeRef: _, attributes: v, listeners: y, isDragging: b } = o({
+		id: `possible-response-${a.id}`,
+		data: {
+			id: a.id,
+			value: a.value,
+			containerIndex: a.containerIndex
+		},
+		disabled: !t
+	}), x = () => {
+		clearTimeout(g.current);
+	}, S = () => {
+		clearTimeout(g.current);
+	}, C = (e) => {
+		e.preventDefault(), g.current = setTimeout(() => {
+			t && h.current && l(a);
+		}, 500);
+	};
+	n(() => {
+		let e = h.current;
+		if (e) return e.addEventListener("touchstart", C, { passive: !1 }), e.addEventListener("touchend", x), e.addEventListener("touchmove", S, { passive: !1 }), () => {
+			e.removeEventListener("touchstart", C), e.removeEventListener("touchend", x), e.removeEventListener("touchmove", S);
+		};
+	}, [t, a]);
+	let { isCorrect: w } = a || {}, T = {
+		fontSize: 14,
+		position: "absolute",
+		bottom: "3px",
+		right: "3px"
+	}, E = w === !0 ? "baseCorrect" : w === !1 ? "baseIncorrect" : void 0, D = /<img[^>]+src="([^">]+)"/.test(a.value), O = u({
+		answerChoiceTransparency: p && !b,
+		[E]: !!E,
+		textAnswerChoiceStyle: !D && !m
+	}), k = u({ hiddenSpan: a.hidden });
+	return /* @__PURE__ */ c(d, {
+		className: O,
+		style: i,
+		ref: (e) => {
+			h.current = e, _(e);
+		},
+		...y,
+		...v,
+		children: [/* @__PURE__ */ s(f, {
+			html: a.value,
+			className: k
+		}), /* @__PURE__ */ s(e, {
+			isCorrect: a.isCorrect,
+			containerStyle: T
+		})]
+	});
+};
+p.propTypes = {
+	canDrag: a.bool.isRequired,
+	containerStyle: a.object,
+	data: a.object.isRequired,
+	onDragBegin: a.func.isRequired,
+	answerChoiceTransparency: a.bool,
+	isOverlay: a.bool
+}, p.defaultProps = {
+	containerStyle: {},
+	answerChoiceTransparency: !1,
+	isOverlay: !1
+};
+//#endregion
+export { p as default };

package/dist/delivery/possible-responses.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/src/possible-responses.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const PossibleResponses: {
+    ({ canDrag, data, onDragBegin, answerChoiceTransparency, customStyle, isVertical, minHeight, }: {
+        canDrag: any;
+        data: any;
+        onDragBegin: any;
+        answerChoiceTransparency: any;
+        customStyle: any;
+        isVertical: any;
+        minHeight: any;
+    }): React.JSX.Element;
+    propTypes: {
+        canDrag: PropTypes.Validator<boolean>;
+        data: PropTypes.Validator<any[]>;
+        onDragBegin: PropTypes.Validator<(...args: any[]) => any>;
+        answerChoiceTransparency: PropTypes.Requireable<boolean>;
+        customStyle: PropTypes.Requireable<object>;
+        isVertical: PropTypes.Requireable<boolean>;
+        minHeight: PropTypes.Requireable<number>;
+    };
+};
+export default PossibleResponses;
+//# sourceMappingURL=possible-responses.d.ts.map

package/dist/delivery/possible-responses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"possible-responses.d.ts","sourceRoot":"","sources":["../../src/delivery/possible-responses.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAenC,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAuBtB,CAAC;AAYF,eAAe,iBAAiB,CAAC"}