@pie-element/placement-ordering 14.1.2-next.8 → 14.1.2-next.9

package/dist/browser/delivery/index.js

@@ -1,12 +1,12 @@
 import { C as e, _ as t, b as n, g as r, k as i, l as a, r as o, t as s, u as c, v as l } from "../browser-Bd36Xf5z.js";
-import { Lt as u, Rt as d, T as f, at as p, bt as m, c as h, ct as g, dt as _, ft as ee, l as v, lt as y, mt as b, n as x, ot as S, s as C, st as w, t as te, u as T, ut as E, v as D } from "../drag-provider-BdfhGCEU.js";
+import { Lt as u, Rt as d, T as f, at as p, c as m, ct as h, dt as g, ft as _, l as v, lt as y, mt as b, n as x, ot as S, s as C, st as w, t as ee, u as T, ut as E, v as D } from "../drag-provider-B5wazJHM.js";
 import { t as O } from "../dist-DiGNNRzu.js";
 import k, { createElement as A, useRef as j } from "react";
 import { createRoot as M } from "react-dom/client";
-import ne from "react-dom";
-import { jsx as N, jsxs as P } from "react/jsx-runtime";
+import N from "react-dom";
+import { jsx as P, jsxs as F } from "react/jsx-runtime";
 //#region ../../shared/player-events/dist/index.js
-var F = /* @__PURE__ */ i(s(), 1);
+var I = /* @__PURE__ */ i(s(), 1);
 (class e extends CustomEvent {
 	static {
 		this.TYPE = "model-set";
@@ -23,7 +23,7 @@ var F = /* @__PURE__ */ i(s(), 1);
 		}), this.component = t, this.complete = n;
 	}
 });
-var re = class e extends CustomEvent {
+var te = class e extends CustomEvent {
 	static {
 		this.TYPE = "session-changed";
 	}
@@ -37,47 +37,47 @@ var re = class e extends CustomEvent {
 			}
 		}), this.component = t, this.complete = n;
 	}
-}, I = /* @__PURE__ */ i(u(), 1);
-function ie(e, t, n) {
+}, L = /* @__PURE__ */ i(u(), 1);
+function ne(e, t, n) {
 	let r = { ...e };
 	return t.top + e.y <= n.top ? r.y = n.top - t.top : t.bottom + e.y >= n.top + n.height && (r.y = n.top + n.height - t.bottom), t.left + e.x <= n.left ? r.x = n.left - t.left : t.right + e.x >= n.left + n.width && (r.x = n.left + n.width - t.right), r;
 }
-var ae = (e) => {
+var re = (e) => {
 	let { containerNodeRect: t, draggingNodeRect: n, transform: r } = e;
-	return !n || !t ? r : ie(r, n, t);
-}, oe = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ P("svg", {
+	return !n || !t ? r : ne(r, n, t);
+}, R = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ F("svg", {
 	preserveAspectRatio: "xMinYMin meet",
 	version: "1.1",
 	viewBox: "-283 359 34 35",
 	style: { enableBackground: "new -283 359 34 35" },
 	children: [
-		/* @__PURE__ */ N("circle", {
+		/* @__PURE__ */ P("circle", {
 			cx: "-266",
 			cy: "375.9",
 			r: "14",
 			fill: e
 		}),
-		/* @__PURE__ */ N("path", {
+		/* @__PURE__ */ P("path", {
 			d: "M-280.5,375.9c0-8,6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5S-280.5,383.9-280.5,375.9z\n         M-279.5,375.9c0,7.4,6.1,13.5,13.5,13.5c7.4,0,13.5-6.1,13.5-13.5s-6.1-13.5-13.5-13.5C-273.4,362.4-279.5,368.5-279.5,375.9z",
 			fill: e
 		}),
-		/* @__PURE__ */ N("polygon", {
+		/* @__PURE__ */ P("polygon", {
 			points: "-265.4,383.1 -258.6,377.2 -261.2,374.2 -264.3,376.9 -268.9,368.7 -272.4,370.6",
 			fill: t
 		})
 	]
 });
-oe.propTypes = {
-	bgFill: I.default.string.isRequired,
-	fgFill: I.default.string.isRequired
+R.propTypes = {
+	bgFill: L.default.string.isRequired,
+	fgFill: L.default.string.isRequired
 };
-var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ P("svg", {
+var ie = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
 	preserveAspectRatio: "xMinYMin meet",
 	version: "1.1",
 	viewBox: "-129.5 127 34 35",
 	style: { enableBackground: "new -129.5 127 34 35" },
 	children: [
-		/* @__PURE__ */ N("path", {
+		/* @__PURE__ */ P("path", {
 			style: {
 				fill: "#D0CAC5",
 				stroke: "#E6E3E0",
@@ -86,7 +86,7 @@ var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ P("svg", {
 			},
 			d: "M-112.9,160.4c-8.5,0-15.5-6.9-15.5-15.5c0-8.5,6.9-15.5,15.5-15.5s15.5,6.9,15.5,15.5\n         C-97.4,153.5-104.3,160.4-112.9,160.4z"
 		}),
-		/* @__PURE__ */ N("path", {
+		/* @__PURE__ */ P("path", {
 			style: {
 				fill: "#B3ABA4",
 				stroke: "#CDC7C2",
@@ -95,48 +95,48 @@ var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ P("svg", {
 			},
 			d: "M-113.2,159c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-105.2,159-113.2,159z"
 		}),
-		/* @__PURE__ */ N("circle", {
+		/* @__PURE__ */ P("circle", {
 			cx: "-114.2",
 			cy: "143.5",
 			r: "14",
 			fill: e
 		}),
-		/* @__PURE__ */ N("path", {
+		/* @__PURE__ */ P("path", {
 			d: "M-114.2,158c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5s14.5,6.5,14.5,14.5S-106.2,158-114.2,158z\n         M-114.2,130c-7.4,0-13.5,6.1-13.5,13.5s6.1,13.5,13.5,13.5s13.5-6.1,13.5-13.5S-106.8,130-114.2,130z",
 			fill: n
 		}),
-		/* @__PURE__ */ N("polygon", {
+		/* @__PURE__ */ P("polygon", {
 			points: "-114.8,150.7 -121.6,144.8 -119,141.8 -115.9,144.5 -111.3,136.3 -107.8,138.2",
 			fill: t
 		})
 	]
 });
-se.propTypes = {
-	bgFill: I.default.string.isRequired,
-	fgFill: I.default.string.isRequired,
-	borderFill: I.default.string.isRequired
+ie.propTypes = {
+	bgFill: L.default.string.isRequired,
+	fgFill: L.default.string.isRequired,
+	borderFill: L.default.string.isRequired
 };
-var ce = b("div")(({ size: e }) => ({
+var ae = b("div")(({ size: e }) => ({
 	width: e || "25px",
 	height: e || "25px"
-})), L = ({ open: e, size: t }) => /* @__PURE__ */ N(ce, {
+})), z = ({ open: e, size: t }) => /* @__PURE__ */ P(ae, {
 	size: t,
-	children: e ? /* @__PURE__ */ N(oe, {
+	children: e ? /* @__PURE__ */ P(R, {
 		bgFill: "#bce2ff",
 		fgFill: "#1a9cff"
-	}) : /* @__PURE__ */ N(se, {
+	}) : /* @__PURE__ */ P(ie, {
 		bgFill: "white",
 		fgFill: "#1a9cff",
 		borderFill: "#bce2ff"
 	})
 });
-L.propTypes = {
-	open: I.default.bool,
-	size: I.default.string
-}, L.defaultProps = { open: !1 };
+z.propTypes = {
+	open: L.default.bool,
+	size: L.default.string
+}, z.defaultProps = { open: !1 };
 //#endregion
 //#region ../../lib-react/correct-answer-toggle/dist/expander.js
-var le = "height ease-in 300ms, opacity ease-in 300ms", ue = b("div")(() => ({
+var oe = "height ease-in 300ms, opacity ease-in 300ms", se = b("div")(() => ({
 	position: "relative",
 	height: 0,
 	overflow: "hidden",
@@ -144,7 +144,7 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = b("div")(() => ({
 	visibility: "hidden",
 	width: 0,
 	"&.enter": {
-		transition: le,
+		transition: oe,
 		opacity: 1,
 		height: "auto",
 		width: "auto",
@@ -158,7 +158,7 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = b("div")(() => ({
 		minHeight: "25px"
 	},
 	"&.exit": {
-		transition: le,
+		transition: oe,
 		opacity: 0,
 		height: 0,
 		visibility: "visible",
@@ -170,9 +170,9 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = b("div")(() => ({
 		height: 0,
 		width: 0
 	}
-})), de = (e) => {
+})), ce = (e) => {
 	let { show: t, children: n, className: r } = e, i = j(null);
-	return /* @__PURE__ */ N(S, {
+	return /* @__PURE__ */ P(S, {
 		nodeRef: i,
 		in: t,
 		appear: !0,
@@ -184,48 +184,48 @@ var le = "height ease-in 300ms, opacity ease-in 300ms", ue = b("div")(() => ({
 			exit: "exit",
 			exitDone: "exit-done"
 		},
-		children: /* @__PURE__ */ N(ue, {
+		children: /* @__PURE__ */ P(se, {
 			ref: i,
 			className: r,
 			children: n
 		})
 	});
 };
-de.propTypes = {
-	show: I.default.bool.isRequired,
-	className: I.default.string,
-	children: I.default.oneOfType([I.default.arrayOf(I.default.node), I.default.node]).isRequired
+ce.propTypes = {
+	show: L.default.bool.isRequired,
+	className: L.default.string,
+	children: L.default.oneOfType([L.default.arrayOf(L.default.node), L.default.node]).isRequired
 };
 //#endregion
 //#region ../../lib-react/correct-answer-toggle/dist/index.js
-function R(e) {
+function B(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function z(e, t) {
-	return !e || R(e) ? e : R(e.default) ? e.default : t && R(e[t]) ? e[t] : t && R(e[t]?.default) ? e[t].default : e;
+function le(e, t) {
+	return !e || B(e) ? e : B(e.default) ? e.default : t && B(e[t]) ? e[t] : t && B(e[t]?.default) ? e[t].default : e;
 }
-var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, pe = V && typeof V == "object" ? V : B, { translator: H } = O, me = {
+var ue = le(v, "Readable") || le(fe.Readable, "Readable"), de = x, V = de.default, fe = V && typeof V == "object" ? V : de, { translator: H } = O, pe = {
 	WebkitTouchCallout: "none",
 	WebkitUserSelect: "none",
 	KhtmlUserSelect: "none",
 	MozUserSelect: "none",
 	msUserSelect: "none",
 	userSelect: "none"
-}, he = b("div")(() => ({
+}, me = b("div")(() => ({
 	width: "100%",
 	cursor: "pointer"
-})), ge = b("div")(() => ({
+})), he = b("div")(() => ({
 	margin: "0 auto",
 	textAlign: "center",
 	display: "flex"
-})), _e = b("div")(() => ({
+})), ge = b("div")(() => ({
 	width: "fit-content",
 	minWidth: "140px",
 	alignSelf: "center",
 	verticalAlign: "middle",
 	color: `var(--correct-answer-toggle-label-color, ${w.text()})`,
 	fontWeight: "normal",
-	...me
+	...pe
 })), U = b("div")(() => ({
 	position: "absolute",
 	width: "25px",
@@ -239,20 +239,20 @@ var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, p
 		opacity: "0",
 		transition: "opacity 0.3s ease-in"
 	}
-})), ve = b("div")(() => ({
+})), _e = b("div")(() => ({
 	width: "25px",
 	marginRight: "5px",
 	display: "flex",
 	alignItems: "center"
-})), ye = class e extends k.Component {
+})), ve = class e extends k.Component {
 	static propTypes = {
-		onToggle: I.default.func,
-		toggled: I.default.bool,
-		show: I.default.bool,
-		hideMessage: I.default.string,
-		showMessage: I.default.string,
-		className: I.default.string,
-		language: I.default.string
+		onToggle: L.default.func,
+		toggled: L.default.bool,
+		show: L.default.bool,
+		hideMessage: L.default.string,
+		showMessage: L.default.string,
+		className: L.default.string,
+		language: L.default.string
 	};
 	static defaultProps = {
 		showMessage: "Show correct answer",
@@ -282,14 +282,14 @@ var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, p
 	}
 	render() {
 		let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
-		return /* @__PURE__ */ N(he, {
+		return /* @__PURE__ */ P(me, {
 			className: e,
-			children: /* @__PURE__ */ N(de, {
+			children: /* @__PURE__ */ P(ce, {
 				show: this.state.show,
-				children: /* @__PURE__ */ P(ge, {
+				children: /* @__PURE__ */ F(he, {
 					onClick: this.onClick.bind(this),
 					onTouchEnd: this.onTouch.bind(this),
-					children: [/* @__PURE__ */ P(ve, { children: [/* @__PURE__ */ N(S, {
+					children: [/* @__PURE__ */ F(_e, { children: [/* @__PURE__ */ P(S, {
 						nodeRef: this.openIconRef,
 						timeout: 400,
 						in: t,
@@ -300,11 +300,11 @@ var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, p
 							exit: "exit",
 							exitActive: "exit-active"
 						},
-						children: /* @__PURE__ */ N(U, {
+						children: /* @__PURE__ */ P(U, {
 							ref: this.openIconRef,
-							children: /* @__PURE__ */ N(L, { open: t }, "correct-open")
+							children: /* @__PURE__ */ P(z, { open: t }, "correct-open")
 						})
-					}), /* @__PURE__ */ N(S, {
+					}), /* @__PURE__ */ P(S, {
 						nodeRef: this.closedIconRef,
 						timeout: 5e3,
 						in: !t,
@@ -315,13 +315,13 @@ var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, p
 							exit: "exit",
 							exitActive: "exit-active"
 						},
-						children: /* @__PURE__ */ N(U, {
+						children: /* @__PURE__ */ P(U, {
 							ref: this.closedIconRef,
-							children: /* @__PURE__ */ N(L, { open: t }, "correct-closed")
+							children: /* @__PURE__ */ P(z, { open: t }, "correct-closed")
 						})
-					})] }), /* @__PURE__ */ N(fe, {
+					})] }), /* @__PURE__ */ P(ue, {
 						false: !0,
-						children: /* @__PURE__ */ N(_e, {
+						children: /* @__PURE__ */ P(ge, {
 							"aria-hidden": !this.state.show,
 							children: t ? n : r
 						})
@@ -333,17 +333,17 @@ var fe = z(v, "Readable") || z(pe.Readable, "Readable"), B = x, V = B.default, p
 };
 //#endregion
 //#region ../../lib-react/drag/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js
-function W(e) {
+function ye(e) {
 	var t, n, r = "";
 	if (typeof e == "string" || typeof e == "number") r += e;
 	else if (typeof e == "object") if (Array.isArray(e)) {
 		var i = e.length;
-		for (t = 0; t < i; t++) e[t] && (n = W(e[t])) && (r && (r += " "), r += n);
+		for (t = 0; t < i; t++) e[t] && (n = ye(e[t])) && (r && (r += " "), r += n);
 	} else for (n in e) e[n] && (r && (r += " "), r += n);
 	return r;
 }
 function be() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = W(e)) && (r && (r += " "), r += t);
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = ye(e)) && (r && (r += " "), r += t);
 	return r;
 }
 //#endregion
@@ -369,11 +369,11 @@ var xe = b("div")(({ theme: e }) => ({
 	},
 	"&.placeholderDisabled": {
 		boxShadow: "none",
-		background: e.palette.background.paper
+		background: w.white()
 	},
 	"&.over": {
-		border: `1px solid ${m[500]}`,
-		backgroundColor: `${m[300]}`
+		border: `1px solid ${w.border()}`,
+		backgroundColor: w.backgroundDark()
 	},
 	"&.board": {
 		padding: e.spacing(1),
@@ -384,7 +384,7 @@ var xe = b("div")(({ theme: e }) => ({
 		justifyContent: "center",
 		overflow: "hidden",
 		touchAction: "none",
-		backgroundColor: w.backgroundDark()
+		backgroundColor: w.surface()
 	},
 	"&.categorizeBoard": {
 		padding: e.spacing(.5),
@@ -395,7 +395,7 @@ var xe = b("div")(({ theme: e }) => ({
 		justifyContent: "center",
 		overflow: "hidden",
 		touchAction: "none",
-		backgroundColor: w.backgroundDark()
+		backgroundColor: w.surface()
 	},
 	"&.verticalPool": {
 		display: "flex",
@@ -409,7 +409,7 @@ var xe = b("div")(({ theme: e }) => ({
 	}
 	i === "choice" && (p.border = `1px solid ${w.borderLight()}`, p.background = w.backgroundDark());
 	let m = c ? "categorizeBoard" : "board";
-	return /* @__PURE__ */ N(xe, {
+	return /* @__PURE__ */ P(xe, {
 		style: {
 			...p,
 			minHeight: u,
@@ -420,40 +420,40 @@ var xe = b("div")(({ theme: e }) => ({
 	});
 };
 Se.propTypes = {
-	choiceBoard: I.default.bool,
-	grid: I.default.shape({
-		columns: I.default.number,
-		rows: I.default.number,
-		rowsRepeatValue: I.default.string
+	choiceBoard: L.default.bool,
+	grid: L.default.shape({
+		columns: L.default.number,
+		rows: L.default.number,
+		rowsRepeatValue: L.default.string
 	}),
-	children: I.default.oneOfType([I.default.arrayOf(I.default.node), I.default.node]).isRequired,
-	className: I.default.string,
-	isOver: I.default.bool,
-	index: I.default.number,
-	type: I.default.string,
-	disabled: I.default.bool,
-	isCategorize: I.default.bool,
-	isVerticalPool: I.default.bool,
-	minHeight: I.default.number
+	children: L.default.oneOfType([L.default.arrayOf(L.default.node), L.default.node]).isRequired,
+	className: L.default.string,
+	isOver: L.default.bool,
+	index: L.default.number,
+	type: L.default.string,
+	disabled: L.default.bool,
+	isCategorize: L.default.bool,
+	isVerticalPool: L.default.bool,
+	minHeight: L.default.number
 };
 //#endregion
 //#region src/delivery/tile.tsx
-var Ce = (0, F.default)("pie-elements:placement-ordering:tile"), we = b("div")(({ theme: e }) => ({
+var Ce = (0, I.default)("pie-elements:placement-ordering:tile"), we = b("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: e.typography.fontSize + 4,
 	textAlign: "center",
 	color: `rgba(${e.palette.common.black}, 0.6)`
-})), Te = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ N(Se, {
+})), Te = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ P(Se, {
 	type: e,
 	isOver: n,
 	disabled: r,
-	children: e === "target" && t !== void 0 && /* @__PURE__ */ N(we, { children: t })
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ P(we, { children: t })
 });
 Te.propTypes = {
-	type: I.default.string,
-	index: I.default.number,
-	isOver: I.default.bool,
-	disabled: I.default.bool
+	type: L.default.string,
+	index: L.default.number,
+	isOver: L.default.bool,
+	disabled: L.default.bool
 };
 var Ee = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: o, type: s }) => ({
 	cursor: i ? "not-allowed" : "grab",
@@ -501,12 +501,12 @@ var Ee = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 	}
 })), De = (e) => {
 	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: o, disabled: s, outcome: c, guideIndex: l } = e;
-	return i ? /* @__PURE__ */ N(Te, {
+	return i ? /* @__PURE__ */ P(Te, {
 		type: t,
 		index: l,
 		isOver: a,
 		disabled: s
-	}) : /* @__PURE__ */ N(Ee, {
+	}) : /* @__PURE__ */ P(Ee, {
 		type: t,
 		isDragging: n,
 		isSelected: r,
@@ -516,117 +516,117 @@ var Ee = b("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 		label: o,
 		dangerouslySetInnerHTML: { __html: o }
 	});
-}, G = (e) => {
-	let { label: t, type: n, id: r, empty: i, disabled: a, outcome: o, index: s, guideIndex: c, instanceId: l, draggable: u, tileIndex: d, selectedChoice: f, onChoiceClick: p, onPlacementClick: m } = e, h = `tile-${n}-${r ?? "empty"}-${d}-${l}`, g = `drop-${n}-${r ?? "empty"}-${d}-${l}`, v = {
+}, W = (e) => {
+	let { label: t, type: n, id: r, empty: i, disabled: a, outcome: o, index: s, guideIndex: c, instanceId: l, draggable: u, tileIndex: d, selectedChoice: f, onChoiceClick: p, onPlacementClick: m } = e, h = `tile-${n}-${r ?? "empty"}-${d}-${l}`, v = `drop-${n}-${r ?? "empty"}-${d}-${l}`, y = {
 		id: r,
 		type: n,
 		instanceId: l,
 		value: t,
 		index: s
-	}, { attributes: y, listeners: b, setNodeRef: x, transform: S, isDragging: C } = _({
+	}, { attributes: b, listeners: x, setNodeRef: S, transform: C, isDragging: w } = g({
 		id: h,
-		data: v,
+		data: y,
 		disabled: !u || a
-	}), { setNodeRef: w, isOver: te } = ee({
-		id: g,
-		data: v,
-		disabled: C
-	}), T = !!f && f.type === v.type && f.id === v.id && f.index === v.index, [E, D] = k.useState(!1), O = !!f && !a, A = te || n === "target" && O && E, j = () => {
-		a || (n === "choice" ? f?.type === "target" ? m?.(v) : u && p?.(v) : n === "target" && (T ? p?.(v) : f ? m?.(v) : u && p?.(v)));
-	}, M = !(u && !a) && !a, ne = (e) => {
-		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), j());
-	}, P = k.useRef(null);
+	}), { setNodeRef: ee, isOver: T } = _({
+		id: v,
+		data: y,
+		disabled: w
+	}), E = !!f && f.type === y.type && f.id === y.id && f.index === y.index, [D, O] = k.useState(!1), A = !!f && !a, j = T || n === "target" && A && D, M = () => {
+		a || (n === "choice" ? f?.type === "target" ? m?.(y) : u && p?.(y) : n === "target" && (E ? p?.(y) : f ? m?.(y) : u && p?.(y)));
+	}, N = !(u && !a) && !a, F = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), M());
+	}, I = k.useRef(null);
 	return k.useEffect(() => {
-		let e = P.current, t = (e) => {
+		let e = I.current, t = (e) => {
 			e.preventDefault();
 		};
 		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
 			e && e.removeEventListener("touchstart", t);
 		};
-	}, []), Ce("[render], props: ", e), /* @__PURE__ */ N("div", {
+	}, []), Ce("[render], props: ", e), /* @__PURE__ */ P("div", {
 		ref: (e) => {
-			P.current = e, x(e), w(e);
+			I.current = e, S(e), ee(e);
 		},
 		style: {
-			transform: S ? `translate3d(${S.x}px, ${S.y}px, 0)` : void 0,
+			transform: C ? `translate3d(${C.x}px, ${C.y}px, 0)` : void 0,
 			boxSizing: "border-box",
 			overflow: "visible",
 			padding: 0,
 			margin: 0,
 			textAlign: "center",
 			pointerEvents: "auto",
-			cursor: a ? "not-allowed" : n === "target" && O ? "pointer" : C ? "grabbing" : "grab",
-			zIndex: C ? 1e3 : "auto",
-			willChange: C ? "transform" : "auto"
+			cursor: a ? "not-allowed" : n === "target" && A ? "pointer" : w ? "grabbing" : "grab",
+			zIndex: w ? 1e3 : "auto",
+			willChange: w ? "transform" : "auto"
 		},
-		role: M ? "button" : void 0,
-		tabIndex: M ? 0 : void 0,
-		onKeyDown: M ? ne : void 0,
-		onClick: j,
-		onMouseEnter: () => D(!0),
-		onMouseLeave: () => D(!1),
+		role: N ? "button" : void 0,
+		tabIndex: N ? 0 : void 0,
+		onKeyDown: N ? F : void 0,
+		onClick: M,
+		onMouseEnter: () => O(!0),
+		onMouseLeave: () => O(!1),
 		...u && !a ? {
-			...b,
-			...y
+			...x,
+			...b
 		} : {},
-		children: /* @__PURE__ */ N(De, {
+		children: /* @__PURE__ */ P(De, {
 			label: t,
 			id: r,
 			empty: i,
 			index: s,
 			guideIndex: c,
-			isOver: A,
-			isDragging: C,
-			isSelected: T,
+			isOver: j,
+			isDragging: w,
+			isSelected: E,
 			disabled: a,
 			outcome: o,
 			type: n
 		})
 	});
 };
-G.propTypes = {
-	id: I.default.any,
-	label: I.default.string,
-	isOver: I.default.bool,
-	type: I.default.string,
-	empty: I.default.bool,
-	disabled: I.default.bool,
-	outcome: I.default.string,
-	index: I.default.number,
-	guideIndex: I.default.number,
-	instanceId: I.default.any,
-	draggable: I.default.bool,
-	tileIndex: I.default.number,
-	selectedChoice: I.default.object,
-	onChoiceClick: I.default.func,
-	onPlacementClick: I.default.func
+W.propTypes = {
+	id: L.default.any,
+	label: L.default.string,
+	isOver: L.default.bool,
+	type: L.default.string,
+	empty: L.default.bool,
+	disabled: L.default.bool,
+	outcome: L.default.string,
+	index: L.default.number,
+	guideIndex: L.default.number,
+	instanceId: L.default.any,
+	draggable: L.default.bool,
+	tileIndex: L.default.number,
+	selectedChoice: L.default.object,
+	onChoiceClick: L.default.func,
+	onPlacementClick: L.default.func
 };
 //#endregion
 //#region src/delivery/tiler.tsx
-var K = {
-	choiceLabel: I.default.string,
-	targetLabel: I.default.string,
-	disabled: I.default.bool,
-	tiles: I.default.array.isRequired,
-	tileSize: I.default.string,
-	addGuide: I.default.bool,
-	selectedChoice: I.default.object,
-	onChoiceClick: I.default.func,
-	onPlacementClick: I.default.func
+var G = {
+	choiceLabel: L.default.string,
+	targetLabel: L.default.string,
+	disabled: L.default.bool,
+	tiles: L.default.array.isRequired,
+	tileSize: L.default.string,
+	addGuide: L.default.bool,
+	selectedChoice: L.default.object,
+	onChoiceClick: L.default.func,
+	onPlacementClick: L.default.func
 }, Oe = {
 	tileSize: "1fr",
 	disabled: !1,
 	addGuide: !1
 }, ke = (e) => {
-	let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, t.selectedChoice = e.selectedChoice, t.onChoiceClick = e.onChoiceClick, t.onPlacementClick = e.onPlacementClick, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ A(G, {
+	let t = (t, n) => (t.instanceId = e.instanceId, t.disabled = e.disabled, t.guideIndex = e.addGuide ? t.index + 1 : void 0, t.tileIndex = n, t.selectedChoice = e.selectedChoice, t.onChoiceClick = e.onChoiceClick, t.onPlacementClick = e.onPlacementClick, e.includeTargets || t.type === "choice" ? /* @__PURE__ */ A(W, {
 		...t,
 		key: n
-	}) : /* @__PURE__ */ A(G, {
+	}) : /* @__PURE__ */ A(W, {
 		...t,
 		label: "",
 		key: n
 	}));
-	return t.propTypes = { ...K }, t;
+	return t.propTypes = { ...G }, t;
 }, Ae = b("div")(({ theme: e, includeTargets: t }) => ({
 	display: "grid",
 	paddingBottom: e.spacing(2),
@@ -645,22 +645,22 @@ var K = {
 	gridColumn: "2/3",
 	textAlign: "center"
 }), Ie = class extends k.Component {
-	static propTypes = { ...K };
+	static propTypes = { ...G };
 	static defaultProps = { ...Oe };
 	render() {
 		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? `auto ${a} auto ${a}` : `auto ${a} auto`, s = e ? i.length / 2 : i.length, c = {
 			gridTemplateColumns: e ? `repeat(${s}, ${a})` : `auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`,
 			gridTemplateRows: o
 		}, l = { gridColumn: `1/${s + 1}` };
-		return /* @__PURE__ */ P(Ae, {
+		return /* @__PURE__ */ F(Ae, {
 			includeTargets: e,
 			style: c,
 			children: [
-				/* @__PURE__ */ N(je, {
+				/* @__PURE__ */ P(je, {
 					style: l,
 					dangerouslySetInnerHTML: { __html: t ? n : "" }
 				}),
-				e && /* @__PURE__ */ N(Me, {
+				e && /* @__PURE__ */ P(Me, {
 					style: l,
 					dangerouslySetInnerHTML: { __html: r }
 				}),
@@ -669,24 +669,24 @@ var K = {
 		});
 	}
 }, Le = class extends k.Component {
-	static propTypes = { ...K };
+	static propTypes = { ...G };
 	static defaultProps = { ...Oe };
 	render() {
 		let { includeTargets: e, choiceLabelEnabled: t, choiceLabel: n, targetLabel: r, tiles: i, tileSize: a } = this.props, o = e ? 2 : 1, s = e ? i.length / 2 : i.length;
-		return /* @__PURE__ */ P(Ne, {
+		return /* @__PURE__ */ F(Ne, {
 			includeTargets: e,
 			style: {
 				gridTemplateColumns: `repeat(${o}, ${a})`,
 				gridTemplateRows: e ? `auto repeat(${s}, ${a})` : `auto auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`
 			},
 			children: [
-				/* @__PURE__ */ N(Pe, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
-				e && /* @__PURE__ */ N(Fe, { dangerouslySetInnerHTML: { __html: r } }),
+				/* @__PURE__ */ P(Pe, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
+				e && /* @__PURE__ */ P(Fe, { dangerouslySetInnerHTML: { __html: r } }),
 				i.map(ke(this.props))
 			]
 		});
 	}
-}, q = (0, F.default)("pie-elements:placement-ordering:ordering"), Re = (e, t, n) => {
+}, K = (0, I.default)("pie-elements:placement-ordering:ordering"), Re = (e, t, n) => {
 	let r = e.find((e, n) => n === t), i = e.filter((e, n) => n !== t);
 	return [
 		...i.slice(0, n),
@@ -694,7 +694,7 @@ var K = {
 		...i.slice(n)
 	];
 }, ze = (e, n, r) => {
-	if (q("[swap]", e, n, r), !e || e.length <= 1 || n === void 0 || r === void 0) throw Error(`swap requires a non-empty array, fromIndex, toIndex: ${e}, ${n} ${r}`);
+	if (K("[swap]", e, n, r), !e || e.length <= 1 || n === void 0 || r === void 0) throw Error(`swap requires a non-empty array, fromIndex, toIndex: ${e}, ${n} ${r}`);
 	let i = t(e), a = e[r];
 	return i[r] = i[n], i[n] = a, i;
 };
@@ -706,13 +706,13 @@ function Be(e, n) {
 }
 function Ve(e, n, r) {
 	let { response: i, opts: a } = e, o = t(i);
-	if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ? ze(i, n.index, r.index) : (q("do nothing to the response"), i);
+	if (a.includeTargets) return n.type === "choice" && r.type === "target" ? (o[r.index] = n.id, o) : n.type === "target" && r.type === "choice" ? (o[n.index] = void 0, o) : n.type === "target" && r.type === "target" ? ze(i, n.index, r.index) : (K("do nothing to the response"), i);
 	{
 		let t = e.response.findIndex((e) => e !== void 0 && e === n.id), i = e.response.findIndex((e) => e !== void 0 && e === r.id);
-		return q("fromIndex: ", t, "toIndex:", i), Re(e.response, t, i);
+		return K("fromIndex: ", t, "toIndex:", i), Re(e.response, t, i);
 	}
 }
-function J(e, t, n, r) {
+function q(e, t, n, r) {
 	if (r.includeTargets) {
 		let i = [];
 		for (let r = 0; r < t.length; r++) {
@@ -725,6 +725,7 @@ function J(e, t, n, r) {
 		}
 		return e.map((e) => t.indexOf(e.id) !== -1 && !r.allowSameChoiceInTargets ? {
 			type: "choice",
+			id: e.id,
 			empty: !0,
 			droppable: !0,
 			draggable: !1
@@ -752,20 +753,20 @@ function He(e, t, r, i) {
 		response: t,
 		opts: i,
 		outcomes: r,
-		tiles: J(e, t, r, i)
+		tiles: q(e, t, r, i)
 	};
 }
 function Ue(e, t) {
 	switch (e.type) {
 		case "move": {
-			let { from: n, to: r } = e, i = Ve(t, n, r), a = J(t.choices, i, t.outcomes, t.opts);
+			let { from: n, to: r } = e, i = Ve(t, n, r), a = q(t.choices, i, t.outcomes, t.opts);
 			return Object.assign({}, t, {
 				response: i,
 				tiles: a
 			});
 		}
 		case "remove": {
-			let { target: n } = e, r = Be(t, n), i = J(t.choices, r, t.outcomes, t.opts);
+			let { target: n } = e, r = Be(t, n), i = q(t.choices, r, t.outcomes, t.opts);
 			return Object.assign({}, t, {
 				response: r,
 				tiles: i
@@ -781,58 +782,65 @@ var We = (e, t) => {
 	let n = (e) => e.map((e) => JSON.stringify(e)).sort(), r = n(e), i = n(t), a = r.every((e, t) => e === i[t]), o = e.every((e, n) => JSON.stringify(e) === JSON.stringify(t[n]));
 	return a && !o;
 }, Ge = (e, { active: t, context: n, currentCoordinates: r }) => {
-	let { code: i } = e, a = i === "Tab", o = i === g.Down || i === g.Up || i === g.Left || i === g.Right;
+	let { code: i } = e, a = i === "Tab", o = i === h.Down || i === h.Up || i === h.Left || i === h.Right;
 	if (!a && !o) return;
 	if (o) return y(e, {
 		context: n,
 		currentCoordinates: r
 	});
 	e.preventDefault();
-	let { droppableRects: s, droppableContainers: c, collisionRect: l } = n;
+	let { droppableRects: s, droppableContainers: c, collisionRect: l, draggableNodes: u, active: d } = n;
 	if (!s || s.size === 0) return r;
-	let u = {
+	let f = {
 		x: (l?.width || 0) / 2,
 		y: (l?.height || 0) / 2
-	}, d = {
-		x: r.x + u.x,
-		y: r.y + u.y
-	}, f = t?.data?.current?.type === "choice", p = [];
+	}, p = {
+		x: r.x + f.x,
+		y: r.y + f.y
+	}, m = u?.get(t)?.data?.current?.id, g = d?.rect?.current?.initial, _ = typeof t == "string" ? t.replace(/^tile-/, "drop-") : void 0, v = [], b;
 	for (let [e, t] of c) {
-		if (t?.disabled || f && t?.data?.current?.type === "choice") continue;
-		let n = s.get(e);
-		if (!n) continue;
-		let r = {
-			x: n.left + n.width / 2,
-			y: n.top + n.height / 2
-		}, i = {
-			x: n.left,
-			y: n.top + n.height / 2
-		};
-		p.push({
+		let n = t?.data?.current, r = e === _;
+		if (t?.disabled && !r) continue;
+		let i = n?.type === "choice" && n?.id === m;
+		if (n?.type === "choice" && !i) continue;
+		let a = (r ? g : null) || s.get(e);
+		if (!a) continue;
+		let o = {
+			x: a.left + a.width / 2,
+			y: a.top + a.height / 2
+		}, c = {
 			id: e,
-			dropPosition: i,
-			center: r
-		});
+			dropPosition: {
+				x: a.left,
+				y: a.top + a.height / 2 - f.y
+			},
+			center: o
+		};
+		i ? b = c : v.push(c);
 	}
-	if (p.length === 0) return r;
-	let m = e.shiftKey;
-	p.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x);
-	let h = 0, _ = Infinity;
-	for (let e = 0; e < p.length; e++) {
-		let t = Ke(d, p[e].center);
-		t < _ && (_ = t, h = e);
+	if (v.length === 0 && !b) return r;
+	let x = e.shiftKey;
+	v.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), b && v.push(b);
+	let S = 0, C = Infinity;
+	for (let e = 0; e < v.length; e++) {
+		let t = Ke(p, v[e].center);
+		t < C && (C = t, S = e);
 	}
-	return p[m ? (h - 1 + p.length) % p.length : (h + 1) % p.length].dropPosition;
+	return v[x ? (S - 1 + v.length) % v.length : (S + 1) % v.length].dropPosition;
 }, Ke = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
 //#endregion
 //#region src/delivery/placement-ordering.tsx
-function Y(e) {
+function J(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function X(e, t) {
-	return !e || Y(e) ? e : Y(e.default) ? e.default : t && Y(e[t]) ? e[t] : t && Y(e[t]?.default) ? e[t].default : e;
+function Y(e, t) {
+	return !e || J(e) ? e : J(e.default) ? e.default : t && J(e[t]) ? e[t] : t && J(e[t]?.default) ? e[t].default : e;
 }
-var qe = X(D, "UiLayout") || X($.UiLayout, "UiLayout"), Z = X(T, "PreviewPrompt") || X($.PreviewPrompt, "PreviewPrompt"), Je = X(p, "Feedback") || X($.Feedback, "Feedback"), Ye = X(f, "Collapsible") || X($.Collapsible, "Collapsible"), Xe = x, Q = Xe.default, $ = Q && typeof Q == "object" ? Q : Xe, Ze = 250, Qe = (e) => e ? {
+var qe = Y(D, "UiLayout") || Y(Q.UiLayout, "UiLayout"), X = Y(T, "PreviewPrompt") || Y(Q.PreviewPrompt, "PreviewPrompt"), Je = Y(p, "Feedback") || Y(Q.Feedback, "Feedback"), Ye = Y(f, "Collapsible") || Y(Q.Collapsible, "Collapsible"), Xe = x, Z = Xe.default, Q = Z && typeof Z == "object" ? Z : Xe, Ze = 250, Qe = (e, t) => {
+	if (!e || !t) return !1;
+	let n = t.left + t.width / 2, r = t.top + t.height / 2;
+	return n >= e.left && n <= e.right && r >= e.top && r <= e.bottom;
+}, $e = (e) => e ? {
 	keyboardCoordinateGetter: Ge,
 	keyboardCodes: {
 		start: ["Space", "Enter"],
@@ -840,45 +848,45 @@ var qe = X(D, "UiLayout") || X($.UiLayout, "UiLayout"), Z = X(T, "PreviewPrompt"
 		end: ["Space", "Enter"]
 	},
 	accessibility: { screenReaderInstructions: { draggable: "Press Space or Enter to pick up this answer choice. Once picked up, use Tab or Shift+Tab to cycle through response areas, or use arrow keys to move it freely. Press Space or Enter to drop, or Escape to cancel." } }
-} : {}, { translator: $e } = O, et = (0, F.default)("pie-elements:placement-ordering"), tt = b("div")({
+} : {}, { translator: et } = O, tt = (0, I.default)("pie-elements:placement-ordering"), nt = b("div")({
 	color: w.text(),
 	backgroundColor: w.background(),
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
 	boxSizing: "border-box"
-}), nt = b("div")({
+}), rt = b("div")({
 	alignSelf: "stretch",
 	maxWidth: "100%",
 	overflowX: "auto",
 	overflowY: "hidden"
-}), rt = b("div")({
+}), it = b("div")({
 	display: "flex",
 	justifyContent: "center",
 	minWidth: "min-content"
-}), it = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), at = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), ot = b(ye)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), st = b(Ye)(({ theme: e }) => ({
+}), at = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), ot = b("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), st = b(ve)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), ct = b(Ye)(({ theme: e }) => ({
 	marginBottom: e.spacing(2),
 	alignSelf: "flex-start"
-})), ct = (e) => {
+})), lt = (e) => {
 	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
-	return /* @__PURE__ */ N(t, {
+	return /* @__PURE__ */ P(t, {
 		...a,
 		tiles: n.tiles,
 		onDropChoice: (e, t) => r(e, t, n),
 		onRemoveChoice: (e) => i(e, n)
 	});
 };
-ct.propTypes = {
-	tiler: I.default.func,
-	ordering: I.default.any,
-	onDropChoice: I.default.func,
-	onRemoveChoice: I.default.func
+lt.propTypes = {
+	tiler: L.default.func,
+	ordering: L.default.any,
+	onDropChoice: L.default.func,
+	onRemoveChoice: L.default.func
 };
-var lt = class extends k.Component {
+var ut = class extends k.Component {
 	static propTypes = {
-		onSessionChange: I.default.func.isRequired,
-		model: I.default.object.isRequired,
-		session: I.default.oneOfType([I.default.array.isRequired, I.default.object.isRequired])
+		onSessionChange: L.default.func.isRequired,
+		model: L.default.object.isRequired,
+		session: L.default.oneOfType([L.default.array.isRequired, L.default.object.isRequired])
 	};
 	constructor(e) {
 		super(e), this.instanceId = r();
@@ -895,7 +903,7 @@ var lt = class extends k.Component {
 	}
 	toggleCorrect = (e) => this.setState({ showingCorrect: e });
 	componentDidUpdate() {
-		d(ne.findDOMNode(this));
+		d(N.findDOMNode(this));
 	}
 	validateSession = ({ model: e, session: t }, n = !1) => {
 		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, s = i.map((e) => e.id), { value: c } = t || {}, u;
@@ -914,8 +922,8 @@ var lt = class extends k.Component {
 		};
 	};
 	UNSAFE_componentWillReceiveProps(e) {
-		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note === $e.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
-		l && u && (n.note = $e.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (c.showingCorrect = !1);
+		let { model: t = {} } = e || {}, { model: n = {} } = this.props || {}, { correctResponse: r, config: i, choices: a = [], env: o } = t, { includeTargets: s } = i || {}, c = {}, l = n.language && n.language !== t.language, u = n.note && n.note === et.t("common:commonCorrectAnswerWithAlternates", { lng: n.language });
+		l && u && (n.note = et.t("common:commonCorrectAnswerWithAlternates", { lng: t.language })), r || (c.showingCorrect = !1);
 		let d = We(a, n.choices), { value: f, needsReset: p } = this.validateSession(e, d), m = {
 			...e.session,
 			value: f
@@ -927,7 +935,7 @@ var lt = class extends k.Component {
 	}
 	onDropChoice = (e, t, n) => {
 		let { onSessionChange: r, session: i } = this.props, a = n.tiles.find((e) => e.id === t.id && e.type === t.type && e.index === t.index), o = e;
-		et("[onDropChoice] ", a, o);
+		tt("[onDropChoice] ", a, o);
 		let s = Ue({
 			type: "move",
 			from: a,
@@ -937,7 +945,7 @@ var lt = class extends k.Component {
 	};
 	onRemoveChoice = (e, t) => {
 		let { onSessionChange: n, session: r } = this.props;
-		et("[onRemoveChoice]", e);
+		tt("[onRemoveChoice]", e);
 		let i = Ue({
 			type: "remove",
 			target: e
@@ -970,8 +978,8 @@ var lt = class extends k.Component {
 			}
 			e && i && this.onDropChoice(i, e, r);
 		} else if (!t && n) {
-			let e = n.data.current;
-			e && e.type === "target" && this.onRemoveChoice(e, r);
+			let e = n.data.current, t = Qe(n.rect?.current?.initial, n.rect?.current?.translated);
+			e && e.type === "target" && !t && this.onRemoveChoice(e, r);
 		}
 	};
 	onDragStart = (e) => {
@@ -1012,10 +1020,10 @@ var lt = class extends k.Component {
 		this.isClickSoonAfterDragEnd() || this.placeSelectedChoice(e);
 	};
 	render() {
-		let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: r, prompt: i, rationale: a, feedback: o, config: s, note: c, showNote: l, env: u, disabled: d, teacherInstructions: f, language: p } = e, m = t && t.length > 0, { showingCorrect: g } = this.state, _ = s || {
+		let { model: e } = this.props, { correctResponse: t, correctness: n, extraCSSRules: r, prompt: i, rationale: a, feedback: o, config: s, note: c, showNote: l, env: u, disabled: d, teacherInstructions: f, language: p } = e, h = t && t.length > 0, { showingCorrect: g } = this.state, _ = s || {
 			orientation: "vertical",
 			includeTargets: !0
-		}, { orientation: ee, includeTargets: v } = _, y = ee === "vertical", b = this.createOrdering(), { mode: x, role: S } = u || {}, T = y ? Le : Ie, D = (g || x === "view" && S === "instructor") && l && c, O = a && (h(a) || C(a)), k = f && (h(f) || C(f)), A = {
+		}, { orientation: v, includeTargets: y } = _, b = v === "vertical", x = this.createOrdering(), { mode: S, role: T } = u || {}, D = b ? Le : Ie, O = (g || S === "view" && T === "instructor") && l && c, k = a && (m(a) || C(a)), A = f && (m(f) || C(f)), j = {
 			color: w.text(),
 			backgroundColor: w.background(),
 			display: "flex",
@@ -1023,60 +1031,60 @@ var lt = class extends k.Component {
 			alignItems: "center",
 			boxSizing: "border-box",
 			width: "100%"
-		}, j = v ? {
+		}, M = y ? {
 			selectedChoice: this.state.selectedChoice,
 			onChoiceClick: this.onChoiceClick,
 			onPlacementClick: this.onPlacementClick
 		} : {};
-		return /* @__PURE__ */ N(te, {
+		return /* @__PURE__ */ P(ee, {
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onDragEnd,
 			onDragCancel: this.onDragCancel,
 			collisionDetection: E,
-			modifiers: [ae],
-			...Qe(v),
-			children: /* @__PURE__ */ N(tt, { children: /* @__PURE__ */ P(qe, {
+			modifiers: [re],
+			...$e(y),
+			children: /* @__PURE__ */ P(nt, { children: /* @__PURE__ */ F(qe, {
 				extraCSSRules: r,
-				style: A,
+				style: j,
 				children: [
-					k && /* @__PURE__ */ N(st, {
+					A && /* @__PURE__ */ P(ct, {
 						labels: {
 							hidden: "Show Teacher Instructions",
 							visible: "Hide Teacher Instructions"
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ N(Z, { prompt: f })
+						children: /* @__PURE__ */ P(X, { prompt: f })
 					}),
-					/* @__PURE__ */ N(it, { children: /* @__PURE__ */ N(Z, { prompt: i }) }),
-					/* @__PURE__ */ N(ot, {
-						show: m,
+					/* @__PURE__ */ P(at, { children: /* @__PURE__ */ P(X, { prompt: i }) }),
+					/* @__PURE__ */ P(st, {
+						show: h,
 						toggled: g,
 						onToggle: this.toggleCorrect,
 						language: p
 					}),
-					/* @__PURE__ */ N(nt, { children: /* @__PURE__ */ N(rt, { children: /* @__PURE__ */ N(ct, {
+					/* @__PURE__ */ P(rt, { children: /* @__PURE__ */ P(it, { children: /* @__PURE__ */ P(lt, {
 						instanceId: this.instanceId,
 						choiceLabel: _.choiceLabel,
 						targetLabel: _.targetLabel,
-						ordering: b,
-						tiler: T,
+						ordering: x,
+						tiler: D,
 						disabled: d,
 						addGuide: _.showOrdering,
 						tileSize: _.tileSize,
-						includeTargets: v,
+						includeTargets: y,
 						choiceLabelEnabled: e.config && e.config.choiceLabelEnabled,
-						...j
+						...M
 					}) }) }),
-					D && /* @__PURE__ */ N(at, { dangerouslySetInnerHTML: { __html: c } }),
-					O && /* @__PURE__ */ N(st, {
+					O && /* @__PURE__ */ P(ot, { dangerouslySetInnerHTML: { __html: c } }),
+					k && /* @__PURE__ */ P(ct, {
 						labels: {
 							hidden: "Show Rationale",
 							visible: "Hide Rationale"
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ N(Z, { prompt: a })
+						children: /* @__PURE__ */ P(X, { prompt: a })
 					}),
-					!g && /* @__PURE__ */ N(Je, {
+					!g && /* @__PURE__ */ P(Je, {
 						correctness: n,
 						feedback: o
 					})
@@ -1084,21 +1092,21 @@ var lt = class extends k.Component {
 			}) })
 		});
 	}
-}, ut = class extends k.Component {
+}, dt = class extends k.Component {
 	static propTypes = {
-		model: I.default.object.isRequired,
-		session: I.default.oneOfType([I.default.array.isRequired, I.default.object.isRequired]),
-		onSessionChange: I.default.func.isRequired
+		model: L.default.object.isRequired,
+		session: L.default.oneOfType([L.default.array.isRequired, L.default.object.isRequired]),
+		onSessionChange: L.default.func.isRequired
 	};
 	render() {
 		let { model: e, session: t, onSessionChange: n } = this.props;
-		return /* @__PURE__ */ N(lt, {
+		return /* @__PURE__ */ P(ut, {
 			model: e,
 			session: t,
 			onSessionChange: n
 		});
 	}
-}, dt = (0, F.default)("pie-elements:placement-ordering"), ft = ({ model: t, session: n }) => {
+}, $ = (0, I.default)("pie-elements:placement-ordering"), ft = ({ model: t, session: n }) => {
 	let { config: r } = t, i = (n && e(n.value) || []).length === t.choices.length;
 	return r.includeTargets || i;
 }, pt = class extends HTMLElement {
@@ -1126,7 +1134,7 @@ var lt = class extends k.Component {
 	}
 	isComplete = (t) => t && e(t).length === this._model.completeLength;
 	sessionChange = (e) => {
-		this._session.value = e.value, this.render(), this.dispatchEvent(new re(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
+		this._session.value = e.value, this.render(), this.dispatchEvent(new te(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
 	};
 	set model(e) {
 		this._model = e, this.render(), this.dispatchEvent(new CustomEvent("model-set", {
@@ -1142,8 +1150,8 @@ var lt = class extends k.Component {
 	}
 	render() {
 		if (this._model && this._session) {
-			dt("[render] session: ", this._session.value), dt("[render] model: ", this._model), this._initMathObserver();
-			let e = k.createElement(ut, {
+			$("[render] session: ", this._session.value), $("[render] model: ", this._model), this._initMathObserver();
+			let e = k.createElement(dt, {
 				model: this._model,
 				session: this._session,
 				onSessionChange: this.sessionChange