@pie-element/placement-ordering 15.0.2-next.20261007003844 → 15.0.2

package/dist/browser/delivery/index.js

@@ -1,9 +1,9 @@
 import { i as e } from "../rolldown-runtime-CWhphoD1.js";
 import { S as t, g as n, i as r, l as i, n as a, r as o, t as s, w as c, x as l } from "../dist-CwKUcf7l.js";
-import { Bt as u, N as d, a as f, c as p, ft as m, g as h, gt as g, h as _, i as v, j as y, m as b, mt as x, n as S, o as C, p as w, pt as T, r as E, s as ee, t as D, w as O, zt as k } from "../drag-provider-BKqqYjQM.js";
+import { Bt as u, N as d, Vt as f, _t as p, a as m, c as h, ft as g, g as _, h as v, ht as y, i as b, j as x, m as S, mt as C, n as w, o as ee, p as T, pt as E, r as D, s as te, t as O, w as k } from "../drag-provider-D5oUStBV.js";
 import A, { createElement as j, useRef as M } from "react";
-import { createRoot as N } from "react-dom/client";
-import te from "react-dom";
+import { createRoot as ne } from "react-dom/client";
+import N from "react-dom";
 import { jsx as P, jsxs as F } from "react/jsx-runtime";
 //#region ../../shared/player-events/dist/index.js
 var I = /* @__PURE__ */ e(a(), 1);
@@ -23,7 +23,7 @@ var I = /* @__PURE__ */ e(a(), 1);
 		}), this.component = t, this.complete = n;
 	}
 });
-var L = class e extends CustomEvent {
+var re = class e extends CustomEvent {
 	static {
 		this.TYPE = "session-changed";
 	}
@@ -37,15 +37,15 @@ var L = class e extends CustomEvent {
 			}
 		}), this.component = t, this.complete = n;
 	}
-}, R = /* @__PURE__ */ e(k(), 1);
-function ne(e, t, n) {
+}, L = /* @__PURE__ */ e(u(), 1);
+function ie(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 re = (e) => {
+var ae = (e) => {
 	let { containerNodeRect: t, draggingNodeRect: n, transform: r } = e;
-	return !n || !t ? r : ne(r, n, t);
-}, ie = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ F("svg", {
+	return !n || !t ? r : ie(r, n, t);
+}, oe = ({ bgFill: e, fgFill: t }) => /* @__PURE__ */ F("svg", {
 	"aria-hidden": "true",
 	focusable: "false",
 	preserveAspectRatio: "xMinYMin meet",
@@ -69,11 +69,11 @@ var re = (e) => {
 		})
 	]
 });
-ie.propTypes = {
-	bgFill: R.default.string.isRequired,
-	fgFill: R.default.string.isRequired
+oe.propTypes = {
+	bgFill: L.default.string.isRequired,
+	fgFill: L.default.string.isRequired
 };
-var ae = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
+var se = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
 	"aria-hidden": "true",
 	focusable: "false",
 	preserveAspectRatio: "xMinYMin meet",
@@ -115,32 +115,32 @@ var ae = ({ bgFill: e, fgFill: t, borderFill: n }) => /* @__PURE__ */ F("svg", {
 		})
 	]
 });
-ae.propTypes = {
-	bgFill: R.default.string.isRequired,
-	fgFill: R.default.string.isRequired,
-	borderFill: R.default.string.isRequired
+se.propTypes = {
+	bgFill: L.default.string.isRequired,
+	fgFill: L.default.string.isRequired,
+	borderFill: L.default.string.isRequired
 };
-var oe = g("div")(({ size: e }) => ({
+var ce = p("div")(({ size: e }) => ({
 	width: e || "25px",
 	height: e || "25px"
-})), z = ({ open: e, size: t }) => /* @__PURE__ */ P(oe, {
+})), R = ({ open: e, size: t }) => /* @__PURE__ */ P(ce, {
 	size: t,
-	children: e ? /* @__PURE__ */ P(ie, {
+	children: e ? /* @__PURE__ */ P(oe, {
 		bgFill: "#bce2ff",
 		fgFill: "#1a9cff"
-	}) : /* @__PURE__ */ P(ae, {
+	}) : /* @__PURE__ */ P(se, {
 		bgFill: "white",
 		fgFill: "#1a9cff",
 		borderFill: "#bce2ff"
 	})
 });
-z.propTypes = {
-	open: R.default.bool,
-	size: R.default.string
-}, z.defaultProps = { open: !1 };
+R.propTypes = {
+	open: L.default.bool,
+	size: L.default.string
+}, R.defaultProps = { open: !1 };
 //#endregion
 //#region ../../lib-react/correct-answer-toggle/dist/expander.js
-var se = "height ease-in 300ms, opacity ease-in 300ms", ce = g("div")(() => ({
+var z = "height ease-in 300ms, opacity ease-in 300ms", le = p("div")(() => ({
 	position: "relative",
 	height: 0,
 	overflow: "hidden",
@@ -148,7 +148,7 @@ var se = "height ease-in 300ms, opacity ease-in 300ms", ce = g("div")(() => ({
 	visibility: "hidden",
 	width: 0,
 	"&.enter": {
-		transition: se,
+		transition: z,
 		opacity: 1,
 		height: "auto",
 		width: "auto",
@@ -162,7 +162,7 @@ var se = "height ease-in 300ms, opacity ease-in 300ms", ce = g("div")(() => ({
 		minHeight: "25px"
 	},
 	"&.exit": {
-		transition: se,
+		transition: z,
 		opacity: 0,
 		height: 0,
 		visibility: "visible",
@@ -174,9 +174,9 @@ var se = "height ease-in 300ms, opacity ease-in 300ms", ce = g("div")(() => ({
 		height: 0,
 		width: 0
 	}
-})), le = (e) => {
+})), ue = (e) => {
 	let { show: t, children: n, className: r } = e, i = M(null);
-	return /* @__PURE__ */ P(T, {
+	return /* @__PURE__ */ P(C, {
 		nodeRef: i,
 		in: t,
 		appear: !0,
@@ -188,37 +188,37 @@ var se = "height ease-in 300ms, opacity ease-in 300ms", ce = g("div")(() => ({
 			exit: "exit",
 			exitDone: "exit-done"
 		},
-		children: /* @__PURE__ */ P(ce, {
+		children: /* @__PURE__ */ P(le, {
 			ref: i,
 			className: r,
 			children: n
 		})
 	});
 };
-le.propTypes = {
-	show: R.default.bool.isRequired,
-	className: R.default.string,
-	children: R.default.oneOfType([R.default.arrayOf(R.default.node), R.default.node]).isRequired
+ue.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 B(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function ue(e, t) {
+function de(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 de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default, fe = H && typeof H == "object" ? H : V, { translator: U } = s, pe = {
+var fe = de(v, "Readable") || de(me.Readable, "Readable"), pe = h, V = pe.default, me = V && typeof V == "object" ? V : pe, { translator: H } = s, he = {
 	WebkitTouchCallout: "none",
 	WebkitUserSelect: "none",
 	KhtmlUserSelect: "none",
 	MozUserSelect: "none",
 	msUserSelect: "none",
 	userSelect: "none"
-}, me = g("div")(() => ({
+}, ge = p("div")(() => ({
 	width: "100%",
 	cursor: "pointer"
-})), he = g("button")(() => ({
+})), _e = p("button")(() => ({
 	margin: "0 auto",
 	textAlign: "center",
 	display: "flex",
@@ -231,18 +231,18 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 	font: "inherit",
 	cursor: "pointer",
 	"&:focus-visible": {
-		outline: `2px solid ${x.buttonFocusOutline()}`,
+		outline: `2px solid ${y.buttonFocusOutline()}`,
 		outlineOffset: "-2px"
 	}
-})), ge = g("div")(() => ({
+})), ve = p("div")(() => ({
 	width: "fit-content",
 	minWidth: "140px",
 	alignSelf: "center",
 	verticalAlign: "middle",
-	color: `var(--correct-answer-toggle-label-color, ${x.text()})`,
+	color: `var(--correct-answer-toggle-label-color, ${y.text()})`,
 	fontWeight: "normal",
-	...pe
-})), _e = g("div")(() => ({
+	...he
+})), ye = p("div")(() => ({
 	position: "absolute",
 	width: "25px",
 	"&.enter": { opacity: "0" },
@@ -255,20 +255,20 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 		opacity: "0",
 		transition: "opacity 0.3s ease-in"
 	}
-})), ve = g("div")(() => ({
+})), be = p("div")(() => ({
 	width: "25px",
 	marginRight: "5px",
 	display: "flex",
 	alignItems: "center"
-})), ye = class e extends A.Component {
+})), xe = class e extends A.Component {
 	static propTypes = {
-		onToggle: R.default.func,
-		toggled: R.default.bool,
-		show: R.default.bool,
-		hideMessage: R.default.string,
-		showMessage: R.default.string,
-		className: R.default.string,
-		language: R.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",
@@ -279,8 +279,8 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 	constructor(t) {
 		super(t), this.state = { show: t.show }, this.openIconRef = A.createRef(), this.closedIconRef = A.createRef(), e.defaultProps = {
 			...e.defaultProps,
-			showMessage: U.t("common:showCorrectAnswer", { lng: t.language }),
-			hideMessage: U.t("common:hideCorrectAnswer", { lng: t.language })
+			showMessage: H.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: H.t("common:hideCorrectAnswer", { lng: t.language })
 		};
 	}
 	onClick() {
@@ -292,22 +292,22 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 	UNSAFE_componentWillReceiveProps(t) {
 		this.setState({ show: t.show }), t.language !== this.props?.language && (e.defaultProps = {
 			...e.defaultProps,
-			showMessage: U.t("common:showCorrectAnswer", { lng: t.language }),
-			hideMessage: U.t("common:hideCorrectAnswer", { lng: t.language })
+			showMessage: H.t("common:showCorrectAnswer", { lng: t.language }),
+			hideMessage: H.t("common:hideCorrectAnswer", { lng: t.language })
 		});
 	}
 	render() {
 		let { className: e, toggled: t, hideMessage: n, showMessage: r } = this.props;
-		return /* @__PURE__ */ P(me, {
+		return /* @__PURE__ */ P(ge, {
 			className: e,
-			children: /* @__PURE__ */ P(le, {
+			children: /* @__PURE__ */ P(ue, {
 				show: this.state.show,
-				children: /* @__PURE__ */ F(he, {
+				children: /* @__PURE__ */ F(_e, {
 					type: "button",
 					"aria-pressed": !!t,
 					onClick: this.onClick.bind(this),
 					onTouchEnd: this.onTouch.bind(this),
-					children: [/* @__PURE__ */ F(ve, { children: [/* @__PURE__ */ P(T, {
+					children: [/* @__PURE__ */ F(be, { children: [/* @__PURE__ */ P(C, {
 						nodeRef: this.openIconRef,
 						timeout: 400,
 						in: t,
@@ -318,11 +318,11 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 							exit: "exit",
 							exitActive: "exit-active"
 						},
-						children: /* @__PURE__ */ P(_e, {
+						children: /* @__PURE__ */ P(ye, {
 							ref: this.openIconRef,
-							children: /* @__PURE__ */ P(z, { open: t }, "correct-open")
+							children: /* @__PURE__ */ P(R, { open: t }, "correct-open")
 						})
-					}), /* @__PURE__ */ P(T, {
+					}), /* @__PURE__ */ P(C, {
 						nodeRef: this.closedIconRef,
 						timeout: 5e3,
 						in: !t,
@@ -333,13 +333,13 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 							exit: "exit",
 							exitActive: "exit-active"
 						},
-						children: /* @__PURE__ */ P(_e, {
+						children: /* @__PURE__ */ P(ye, {
 							ref: this.closedIconRef,
-							children: /* @__PURE__ */ P(z, { open: t }, "correct-closed")
+							children: /* @__PURE__ */ P(R, { open: t }, "correct-closed")
 						})
-					})] }), /* @__PURE__ */ P(de, {
+					})] }), /* @__PURE__ */ P(fe, {
 						false: !0,
-						children: /* @__PURE__ */ P(ge, {
+						children: /* @__PURE__ */ P(ve, {
 							"aria-hidden": !this.state.show,
 							children: t ? n : r
 						})
@@ -351,22 +351,22 @@ var de = ue(_, "Readable") || ue(fe.Readable, "Readable"), V = p, H = V.default,
 };
 //#endregion
 //#region ../../lib-react/drag/dist/node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js
-function be(e) {
+function Se(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 = be(e[t])) && (r && (r += " "), r += n);
+		for (t = 0; t < i; t++) e[t] && (n = Se(e[t])) && (r && (r += " "), r += n);
 	} else for (n in e) e[n] && (r && (r += " "), r += n);
 	return r;
 }
-function xe() {
-	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = be(e)) && (r && (r += " "), r += t);
+function U() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = Se(e)) && (r && (r += " "), r += t);
 	return r;
 }
 //#endregion
 //#region ../../lib-react/drag/dist/placeholder.js
-var Se = x.v("pie")("background", x.defaults.WHITE), Ce = g("div")(({ theme: e }) => ({
+var Ce = y.v("pie")("background", y.defaults.WHITE), we = p("div")(({ theme: e }) => ({
 	"&.placeholder": {
 		WebkitTouchCallout: "none",
 		WebkitUserSelect: "none",
@@ -376,22 +376,22 @@ var Se = x.v("pie")("background", x.defaults.WHITE), Ce = g("div")(({ theme: e }
 		userSelect: "none",
 		width: "100%",
 		height: "100%",
-		background: Se,
+		background: Ce,
 		transition: "background-color 200ms linear, border-color 200ms linear",
 		boxSizing: "border-box",
 		display: "grid",
 		gridRowGap: e.spacing(1),
 		gridColumnGap: e.spacing(1),
 		padding: e.spacing(1),
-		border: `2px dashed ${x.borderDark()}`
+		border: `2px dashed ${y.borderDark()}`
 	},
 	"&.placeholderDisabled": {
 		boxShadow: "none",
-		background: Se
+		background: Ce
 	},
 	"&.over": {
-		border: `1px solid ${x.border()}`,
-		backgroundColor: x.backgroundDark()
+		border: `1px solid ${y.border()}`,
+		backgroundColor: y.backgroundDark()
 	},
 	"&.board": {
 		padding: e.spacing(1),
@@ -402,7 +402,7 @@ var Se = x.v("pie")("background", x.defaults.WHITE), Ce = g("div")(({ theme: e }
 		justifyContent: "center",
 		overflow: "hidden",
 		touchAction: "none",
-		backgroundColor: x.surface()
+		backgroundColor: y.surface()
 	},
 	"&.categorizeBoard": {
 		padding: e.spacing(.5),
@@ -413,56 +413,56 @@ var Se = x.v("pie")("background", x.defaults.WHITE), Ce = g("div")(({ theme: e }
 		justifyContent: "center",
 		overflow: "hidden",
 		touchAction: "none",
-		backgroundColor: x.surface()
+		backgroundColor: y.surface()
 	},
 	"&.verticalPool": {
 		display: "flex",
 		flexFlow: "column wrap"
 	}
-})), we = (e) => {
-	let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f = xe("placeholder", o && "placeholderDisabled", r && "over", i, n), p = {};
+})), Te = (e) => {
+	let { children: t, className: n, isOver: r, type: i, grid: a, disabled: o, choiceBoard: s, isCategorize: c, isVerticalPool: l, minHeight: u, extraStyles: d } = e, f = U("placeholder", o && "placeholderDisabled", r && "over", i, n), p = {};
 	if (a && a.columns && (p.gridTemplateColumns = `repeat(${a.columns}, 1fr)`), a && a.rows) {
 		let e = a.rowsRepeatValue || "1fr";
 		p.gridTemplateRows = `repeat(${a.rows}, ${e})`;
 	}
-	i === "choice" && (p.border = `1px solid ${x.borderDark()}`, p.background = x.surface());
+	i === "choice" && (p.border = `1px solid ${y.borderDark()}`, p.background = y.surface());
 	let m = c ? "categorizeBoard" : "board";
-	return /* @__PURE__ */ P(Ce, {
+	return /* @__PURE__ */ P(we, {
 		style: {
 			...p,
 			minHeight: u,
 			...d
 		},
-		className: xe(s ? m : f, l && "verticalPool"),
+		className: U(s ? m : f, l && "verticalPool"),
 		children: t
 	});
 };
-we.propTypes = {
-	choiceBoard: R.default.bool,
-	grid: R.default.shape({
-		columns: R.default.number,
-		rows: R.default.number,
-		rowsRepeatValue: R.default.string
+Te.propTypes = {
+	choiceBoard: L.default.bool,
+	grid: L.default.shape({
+		columns: L.default.number,
+		rows: L.default.number,
+		rowsRepeatValue: L.default.string
 	}),
-	children: R.default.oneOfType([R.default.arrayOf(R.default.node), R.default.node]).isRequired,
-	className: R.default.string,
-	isOver: R.default.bool,
-	index: R.default.number,
-	type: R.default.string,
-	disabled: R.default.bool,
-	isCategorize: R.default.bool,
-	isVerticalPool: R.default.bool,
-	minHeight: R.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 ../../lib-react/drag/dist/collision.js
-var Te = (e, t, n) => ({
+var Ee = (e, t, n) => ({
 	...e,
 	left: e.left + t,
 	right: e.right + t,
 	top: e.top + n,
 	bottom: e.bottom + n
-}), Ee = (e, t) => {
+}), De = (e, t) => {
 	let n = /* @__PURE__ */ new Map();
 	return e.forEach((e, r) => {
 		let i = Math.max(e.left, t.left), a = Math.max(e.top, t.top), o = Math.min(e.right, t.right), s = Math.min(e.bottom, t.bottom);
@@ -476,7 +476,7 @@ var Te = (e, t, n) => ({
 		});
 	}), n;
 };
-function De({ detect: e = f, modifiers: t } = {}) {
+function Oe({ detect: e = m, modifiers: t } = {}) {
 	let n = null, r = {
 		x: 0,
 		y: 0
@@ -484,11 +484,11 @@ function De({ detect: e = f, modifiers: t } = {}) {
 	return {
 		collisionDetection: (a) => (n = a.pointerCoordinates, e(!t || !n ? a : {
 			...a,
-			collisionRect: Te(a.collisionRect, -r.x, -r.y),
-			droppableRects: i ? Ee(a.droppableRects, i) : a.droppableRects
+			collisionRect: Ee(a.collisionRect, -r.x, -r.y),
+			droppableRects: i ? De(a.droppableRects, i) : a.droppableRects
 		})),
 		...t && { modifiers: [(e) => {
-			let n = E(t, e);
+			let n = D(t, e);
 			return r = {
 				x: n.x - e.transform.x,
 				y: n.y - e.transform.y
@@ -502,50 +502,50 @@ function De({ detect: e = f, modifiers: t } = {}) {
 }
 //#endregion
 //#region src/delivery/tile.tsx
-var Oe = (0, I.default)("pie-elements:placement-ordering:tile"), ke = g("div")(({ theme: e }) => ({
+var ke = (0, I.default)("pie-elements:placement-ordering:tile"), Ae = p("div")(({ theme: e }) => ({
 	width: "100%",
 	fontSize: e.typography.fontSize + 4,
 	textAlign: "center",
 	color: "inherit"
-})), Ae = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ P(we, {
+})), je = ({ type: e, index: t, isOver: n, disabled: r }) => /* @__PURE__ */ P(Te, {
 	type: e,
 	isOver: n,
 	disabled: r,
-	children: e === "target" && t !== void 0 && /* @__PURE__ */ P(ke, { children: t })
+	children: e === "target" && t !== void 0 && /* @__PURE__ */ P(Ae, { children: t })
 });
-Ae.propTypes = {
-	type: R.default.string,
-	index: R.default.number,
-	isOver: R.default.bool,
-	disabled: R.default.bool
+je.propTypes = {
+	type: L.default.string,
+	index: L.default.number,
+	isOver: L.default.bool,
+	disabled: L.default.bool
 };
-var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: o, type: s }) => ({
+var Me = p("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled: i, outcome: a, label: o, type: s }) => ({
 	cursor: i ? "not-allowed" : "grab",
 	width: "100%",
 	height: "100%",
 	padding: "10px",
 	boxSizing: "border-box",
 	overflow: "hidden",
-	border: s === "choice" || s === "target" ? `1px solid ${x.borderDark()}` : "1px solid transparent",
-	backgroundColor: s === "choice" || s === "target" ? x.background() : "transparent",
+	border: s === "choice" || s === "target" ? `1px solid ${y.borderDark()}` : "1px solid transparent",
+	backgroundColor: s === "choice" || s === "target" ? y.background() : "transparent",
 	transition: s === "choice" || s === "target" ? "background-color 150ms ease, border-color 150ms ease, opacity 150ms ease" : "none",
 	pointerEvents: "none",
 	userSelect: "none",
 	...(s === "choice" || s === "target") && { "&:hover": {
-		backgroundColor: i ? x.background() : x.secondary(),
-		borderColor: i ? x.disabled() : e.palette.primary.main,
+		backgroundColor: i ? y.background() : y.secondary(),
+		borderColor: i ? y.disabled() : e.palette.primary.main,
 		transform: i ? "none" : "scale(1.02)"
 	} },
 	...(s === "choice" || s === "target") && r && !i && {
 		opacity: .4,
-		backgroundColor: x.primaryLight(),
+		backgroundColor: y.primaryLight(),
 		borderColor: e.palette.primary.main,
 		borderStyle: "dashed",
 		transform: "scale(1.05)"
 	},
 	...(s === "choice" || s === "target") && (t || n) && !i && {
 		opacity: .6,
-		backgroundColor: x.secondaryLight(),
+		backgroundColor: y.secondaryLight(),
 		transform: "scale(1.05) rotate(2deg)",
 		boxShadow: "0 8px 16px rgba(0,0,0,0.2)",
 		cursor: "grabbing"
@@ -553,24 +553,24 @@ var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 	...(s === "choice" || s === "target") && i && {
 		cursor: "not-allowed",
 		"&:hover": {
-			backgroundColor: x.background(),
+			backgroundColor: y.background(),
 			transform: "none"
 		}
 	},
-	...(s === "choice" || s === "target") && a === "incorrect" && { border: `1px solid ${x.incorrect()}` },
-	...(s === "choice" || s === "target") && a === "correct" && { border: `1px solid ${x.correct()}` },
+	...(s === "choice" || s === "target") && a === "incorrect" && { border: `1px solid ${y.incorrect()}` },
+	...(s === "choice" || s === "target") && a === "correct" && { border: `1px solid ${y.correct()}` },
 	...!o && {
 		border: "none",
 		"&:hover": { backgroundColor: "unset" }
 	}
-})), Me = (e) => {
+})), Ne = (e) => {
 	let { type: t, isDragging: n, isSelected: r, empty: i, isOver: a, label: o, disabled: s, outcome: c, guideIndex: l } = e;
-	return i ? /* @__PURE__ */ P(Ae, {
+	return i ? /* @__PURE__ */ P(je, {
 		type: t,
 		index: l,
 		isOver: a,
 		disabled: s
-	}) : /* @__PURE__ */ P(je, {
+	}) : /* @__PURE__ */ P(Me, {
 		type: t,
 		isDragging: n,
 		isSelected: r,
@@ -578,7 +578,7 @@ var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 		disabled: s,
 		outcome: c,
 		label: o,
-		dangerouslySetInnerHTML: { __html: o }
+		dangerouslySetInnerHTML: { __html: E(o) }
 	});
 }, 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}`, g = `drop-${n}-${r ?? "empty"}-${d}-${l}`, _ = {
@@ -587,34 +587,34 @@ var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 		instanceId: l,
 		value: t,
 		index: s
-	}, { attributes: v, listeners: y, setNodeRef: b, transform: x, isDragging: S } = C({
+	}, { attributes: v, listeners: y, setNodeRef: b, transform: x, isDragging: S } = ee({
 		id: h,
 		data: _,
 		disabled: !u || a
-	}), { setNodeRef: w, isOver: T } = ee({
+	}), { setNodeRef: C, isOver: w } = te({
 		id: g,
 		data: _,
 		disabled: S
-	}), E = !!f && f.type === _.type && f.id === _.id && f.index === _.index, [D, O] = A.useState(!1), k = !!f && !a, j = T || n === "target" && k && D, M = () => {
-		a || (n === "choice" ? f?.type === "target" ? m?.(_) : u && p?.(_) : n === "target" && (E ? p?.(_) : f ? m?.(_) : u && p?.(_)));
-	}, N = !(u && !a) && !a && k, te = (e) => {
-		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), M());
-	}, F = A.useRef(null);
+	}), T = !!f && f.type === _.type && f.id === _.id && f.index === _.index, [E, D] = A.useState(!1), O = !!f && !a, k = w || n === "target" && O && E, j = () => {
+		a || (n === "choice" ? f?.type === "target" ? m?.(_) : u && p?.(_) : n === "target" && (T ? p?.(_) : f ? m?.(_) : u && p?.(_)));
+	}, M = !(u && !a) && !a && O, ne = (e) => {
+		(e.code === "Space" || e.code === "Enter") && (e.preventDefault(), j());
+	}, N = A.useRef(null);
 	A.useEffect(() => {
-		let e = F.current, t = (e) => {
+		let e = N.current, t = (e) => {
 			e.preventDefault();
 		};
 		return e && e.addEventListener("touchstart", t, { passive: !1 }), () => {
 			e && e.removeEventListener("touchstart", t);
 		};
 	}, []);
-	let I = (e) => {
-		F.current = e, b(e), w(e);
+	let F = (e) => {
+		N.current = e, b(e), C(e);
 	};
-	Oe("[render], props: ", e);
-	let L = n === "target" ? `target-${s}` : n === "choice" ? `choice-${r}` : null, R = L ? `${l}:${L}` : void 0;
+	ke("[render], props: ", e);
+	let I = n === "target" ? `target-${s}` : n === "choice" ? `choice-${r}` : null, re = I ? `${l}:${I}` : void 0;
 	return /* @__PURE__ */ P("div", {
-		ref: I,
+		ref: F,
 		style: {
 			transform: x ? `translate3d(${x.x}px, ${x.y}px, 0)` : void 0,
 			boxSizing: "border-box",
@@ -623,30 +623,30 @@ var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 			margin: 0,
 			textAlign: "center",
 			pointerEvents: "auto",
-			cursor: a ? "not-allowed" : n === "target" && k ? "pointer" : S ? "grabbing" : "grab",
+			cursor: a ? "not-allowed" : n === "target" && O ? "pointer" : S ? "grabbing" : "grab",
 			zIndex: S ? 1e3 : "auto",
 			willChange: S ? "transform" : "auto"
 		},
-		role: N ? "button" : void 0,
-		tabIndex: N ? 0 : void 0,
-		onKeyDown: N ? te : void 0,
-		onClick: M,
-		onMouseEnter: () => O(!0),
-		onMouseLeave: () => O(!1),
-		"data-tile-id": R,
+		role: M ? "button" : void 0,
+		tabIndex: M ? 0 : void 0,
+		onKeyDown: M ? ne : void 0,
+		onClick: j,
+		onMouseEnter: () => D(!0),
+		onMouseLeave: () => D(!1),
+		"data-tile-id": re,
 		...u && !a ? {
 			...y,
 			...v
 		} : {},
-		children: /* @__PURE__ */ P(Me, {
+		children: /* @__PURE__ */ P(Ne, {
 			label: t,
 			id: r,
 			empty: i,
 			index: s,
 			guideIndex: c,
-			isOver: j,
+			isOver: k,
 			isDragging: S,
-			isSelected: E,
+			isSelected: T,
 			disabled: a,
 			outcome: o,
 			type: n
@@ -654,35 +654,35 @@ var je = g("div")(({ theme: e, isDragging: t, isSelected: n, isOver: r, disabled
 	});
 };
 W.propTypes = {
-	id: R.default.any,
-	label: R.default.string,
-	isOver: R.default.bool,
-	type: R.default.string,
-	empty: R.default.bool,
-	disabled: R.default.bool,
-	outcome: R.default.string,
-	index: R.default.number,
-	guideIndex: R.default.number,
-	instanceId: R.default.any,
-	draggable: R.default.bool,
-	tileIndex: R.default.number,
-	selectedChoice: R.default.object,
-	onChoiceClick: R.default.func,
-	onPlacementClick: R.default.func
+	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 G = {
-	choiceLabel: R.default.string,
-	targetLabel: R.default.string,
-	disabled: R.default.bool,
-	tiles: R.default.array.isRequired,
-	tileSize: R.default.string,
-	addGuide: R.default.bool,
-	selectedChoice: R.default.object,
-	onChoiceClick: R.default.func,
-	onPlacementClick: R.default.func
-}, Ne = {
+	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
+}, K = {
 	tileSize: "1fr",
 	disabled: !1,
 	addGuide: !1
@@ -696,26 +696,26 @@ var G = {
 		key: n
 	}));
 	return t.propTypes = { ...G }, t;
-}, Fe = g("div")(({ theme: e, includeTargets: t }) => ({
+}, Fe = p("div")(({ theme: e, includeTargets: t }) => ({
 	display: "grid",
 	paddingBottom: e.spacing(2),
 	...t && { gridGap: "10px" }
-})), Ie = g("div")({ textAlign: "center" }), Le = g("div")({
+})), Ie = p("div")({ textAlign: "center" }), Le = p("div")({
 	textAlign: "center",
 	gridRow: "3/4"
-}), Re = g("div")(({ includeTargets: e }) => ({
+}), Re = p("div")(({ includeTargets: e }) => ({
 	gridAutoFlow: "column",
 	display: "grid",
 	...e && { gridGap: "10px" }
-})), ze = g("div")({
+})), ze = p("div")({
 	gridColumn: "1/2",
 	textAlign: "center"
-}), Be = g("div")({
+}), Be = p("div")({
 	gridColumn: "2/3",
 	textAlign: "center"
 }), Ve = class extends A.Component {
 	static propTypes = { ...G };
-	static defaultProps = { ...Ne };
+	static defaultProps = { ...K };
 	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`,
@@ -727,11 +727,11 @@ var G = {
 			children: [
 				/* @__PURE__ */ P(Ie, {
 					style: l,
-					dangerouslySetInnerHTML: { __html: t ? n : "" }
+					dangerouslySetInnerHTML: { __html: E(t ? n : "") }
 				}),
 				e && /* @__PURE__ */ P(Le, {
 					style: l,
-					dangerouslySetInnerHTML: { __html: r }
+					dangerouslySetInnerHTML: { __html: E(r) }
 				}),
 				i.map(Pe(this.props))
 			]
@@ -739,7 +739,7 @@ var G = {
 	}
 }, He = class extends A.Component {
 	static propTypes = { ...G };
-	static defaultProps = { ...Ne };
+	static defaultProps = { ...K };
 	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__ */ F(Re, {
@@ -749,8 +749,8 @@ var G = {
 				gridTemplateRows: e ? `auto repeat(${s}, ${a})` : `auto auto repeat(${Math.floor(s / 2) - 1}, ${a} 10px) ${a} auto`
 			},
 			children: [
-				/* @__PURE__ */ P(ze, { dangerouslySetInnerHTML: { __html: t ? n : "" } }),
-				e && /* @__PURE__ */ P(Be, { dangerouslySetInnerHTML: { __html: r } }),
+				/* @__PURE__ */ P(ze, { dangerouslySetInnerHTML: { __html: E(t ? n : "") } }),
+				e && /* @__PURE__ */ P(Be, { dangerouslySetInnerHTML: { __html: E(r) } }),
 				i.map(Pe(this.props))
 			]
 		});
@@ -775,7 +775,7 @@ function Ke(e, n, r) {
 	let s = e.response.findIndex((e) => e !== void 0 && e === n.id), c = e.response.findIndex((e) => e !== void 0 && e === r.id);
 	return Ue("fromIndex: ", s, "toIndex:", c), We(e.response, s, c);
 }
-function K(e, t, n, r) {
+function q(e, t, n, r) {
 	if (r.includeTargets) {
 		let i = [];
 		for (let r = 0; r < t.length; r++) {
@@ -816,20 +816,20 @@ function qe(e, t, n, a) {
 		response: t,
 		opts: a,
 		outcomes: n,
-		tiles: K(e, t, n, a)
+		tiles: q(e, t, n, a)
 	};
 }
 function Je(e, t) {
 	switch (e.type) {
 		case "move": {
-			let { from: n, to: r } = e, i = Ke(t, n, r), a = K(t.choices, i, t.outcomes, t.opts);
+			let { from: n, to: r } = e, i = Ke(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 = Ge(t, n), i = K(t.choices, r, t.outcomes, t.opts);
+			let { target: n } = e, r = Ge(t, n), i = q(t.choices, r, t.outcomes, t.opts);
 			return Object.assign({}, t, {
 				response: r,
 				tiles: i
@@ -845,9 +845,9 @@ var Ye = (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;
 }, Xe = (e, { active: t, context: n, currentCoordinates: r }) => {
-	let { code: i } = e, a = i === "Tab", o = i === S.Down || i === S.Up || i === S.Left || i === S.Right;
+	let { code: i } = e, a = i === "Tab", o = i === w.Down || i === w.Up || i === w.Left || i === w.Right;
 	if (!a && !o) return;
-	if (o) return v(e, {
+	if (o) return b(e, {
 		context: n,
 		currentCoordinates: r
 	});
@@ -860,7 +860,7 @@ var Ye = (e, t) => {
 	}, p = {
 		x: r.x + f.x,
 		y: r.y + f.y
-	}, m = u?.get(t)?.data?.current?.id, h = d?.rect?.current?.initial, g = typeof t == "string" ? t.replace(/^tile-/, "drop-") : void 0, _ = [], y;
+	}, m = u?.get(t)?.data?.current?.id, h = d?.rect?.current?.initial, g = typeof t == "string" ? t.replace(/^tile-/, "drop-") : void 0, _ = [], v;
 	for (let [e, t] of c) {
 		let n = t?.data?.current, r = e === g;
 		if (t?.disabled && !r) continue;
@@ -879,31 +879,31 @@ var Ye = (e, t) => {
 			},
 			center: o
 		};
-		i ? y = c : _.push(c);
+		i ? v = c : _.push(c);
 	}
-	if (_.length === 0 && !y) return r;
-	let b = e.shiftKey;
-	_.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), y && _.push(y);
-	let x = 0, C = Infinity;
+	if (_.length === 0 && !v) return r;
+	let y = e.shiftKey;
+	_.sort((e, t) => Math.abs(e.center.y - t.center.y) > 10 ? e.center.y - t.center.y : e.center.x - t.center.x), v && _.push(v);
+	let x = 0, S = Infinity;
 	for (let e = 0; e < _.length; e++) {
 		let t = Ze(p, _[e].center);
-		t < C && (C = t, x = e);
+		t < S && (S = t, x = e);
 	}
-	return _[b ? (x - 1 + _.length) % _.length : (x + 1) % _.length].dropPosition;
+	return _[y ? (x - 1 + _.length) % _.length : (x + 1) % _.length].dropPosition;
 }, Ze = (e, t) => Math.sqrt((e.x - t.x) ** 2 + (e.y - t.y) ** 2);
 //#endregion
 //#region src/delivery/placement-ordering.tsx
-function q(e) {
+function J(e) {
 	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
 }
-function J(e, t) {
-	return !e || q(e) ? e : q(e.default) ? e.default : t && q(e[t]) ? e[t] : t && q(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 = J(O, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "PreviewPrompt") || J(Q.PreviewPrompt, "PreviewPrompt"), $e = J(m, "Feedback") || J(Q.Feedback, "Feedback"), et = J(y, "Collapsible") || J(Q.Collapsible, "Collapsible"), X = p, Z = X.default, Q = Z && typeof Z == "object" ? Z : X, tt = 250, nt = (e, t) => {
+var Qe = Y(k, "UiLayout") || Y(Q.UiLayout, "UiLayout"), X = Y(_, "PreviewPrompt") || Y(Q.PreviewPrompt, "PreviewPrompt"), $e = Y(g, "Feedback") || Y(Q.Feedback, "Feedback"), et = Y(x, "Collapsible") || Y(Q.Collapsible, "Collapsible"), tt = h, Z = tt.default, Q = Z && typeof Z == "object" ? Z : tt, nt = 250, rt = (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;
-}, rt = (e, t, n) => {
+}, it = (e, t, n) => {
 	let { initial: r, translated: i } = e || {};
 	if (!r || !t || typeof n?.clientX != "number") return i;
 	let a = t.x - n.clientX, o = t.y - n.clientY;
@@ -914,7 +914,7 @@ var Qe = J(O, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "PreviewPrompt"
 		top: r.top + o,
 		bottom: r.bottom + o
 	};
-}, it = (e) => e ? {
+}, at = (e) => e ? {
 	keyboardCoordinateGetter: Xe,
 	keyboardCodes: {
 		start: ["Space", "Enter"],
@@ -922,26 +922,26 @@ var Qe = J(O, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "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: $ } = s, at = (0, I.default)("pie-elements:placement-ordering"), ot = g("div")({
-	color: x.text(),
-	backgroundColor: x.background(),
+} : {}, { translator: $ } = s, ot = (0, I.default)("pie-elements:placement-ordering"), st = p("div")({
+	color: y.text(),
+	backgroundColor: y.background(),
 	display: "flex",
 	flexDirection: "column",
 	alignItems: "center",
 	boxSizing: "border-box"
-}), st = g("div")({
+}), ct = p("div")({
 	alignSelf: "stretch",
 	maxWidth: "100%",
 	overflowX: "auto",
 	overflowY: "hidden"
-}), ct = g("div")({
+}), lt = p("div")({
 	display: "flex",
 	justifyContent: "center",
 	minWidth: "min-content"
-}), lt = g("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), ut = g("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), dt = g(ye)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), ft = g(et)(({ theme: e }) => ({
+}), ut = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), dt = p("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), ft = p(xe)(({ theme: e }) => ({ paddingBottom: e.spacing(1) })), pt = p(et)(({ theme: e }) => ({
 	marginBottom: e.spacing(2),
 	alignSelf: "flex-start"
-})), pt = (e) => {
+})), mt = (e) => {
 	let { tiler: t, ordering: n, onDropChoice: r, onRemoveChoice: i, ...a } = e;
 	return /* @__PURE__ */ P(t, {
 		...a,
@@ -950,17 +950,17 @@ var Qe = J(O, "UiLayout") || J(Q.UiLayout, "UiLayout"), Y = J(h, "PreviewPrompt"
 		onRemoveChoice: (e) => i(e, n)
 	});
 };
-pt.propTypes = {
-	tiler: R.default.func,
-	ordering: R.default.any,
-	onDropChoice: R.default.func,
-	onRemoveChoice: R.default.func
+mt.propTypes = {
+	tiler: L.default.func,
+	ordering: L.default.any,
+	onDropChoice: L.default.func,
+	onRemoveChoice: L.default.func
 };
-var mt = class extends A.Component {
+var ht = class extends A.Component {
 	static propTypes = {
-		onSessionChange: R.default.func.isRequired,
-		model: R.default.object.isRequired,
-		session: R.default.oneOfType([R.default.array.isRequired, R.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 = d("placement-ordering");
@@ -968,7 +968,7 @@ var mt = class extends A.Component {
 		this.state = {
 			showingCorrect: !1,
 			selectedChoice: null
-		}, this.lastDragEndAt = 0, this.dragCollision = De();
+		}, this.lastDragEndAt = 0, this.dragCollision = Oe();
 		let { model: r } = e || {}, { env: i } = r || {}, { mode: a } = i || {};
 		n && a === "gather" && this.props.onSessionChange({
 			...e.session,
@@ -977,7 +977,7 @@ var mt = class extends A.Component {
 	}
 	toggleCorrect = (e) => this.setState({ showingCorrect: e });
 	componentDidUpdate() {
-		u(te.findDOMNode(this));
+		f(N.findDOMNode(this));
 	}
 	validateSession = ({ model: e, session: t }, n = !1) => {
 		let { config: r, choices: i } = e || {}, { includeTargets: a } = r || {}, o = i.map((e) => e.id), { value: s } = t || {}, u;
@@ -1009,7 +1009,7 @@ var mt = class extends A.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;
-		at("[onDropChoice] ", a, o);
+		ot("[onDropChoice] ", a, o);
 		let s = Je({
 			type: "move",
 			from: a,
@@ -1019,7 +1019,7 @@ var mt = class extends A.Component {
 	};
 	onRemoveChoice = (e, t) => {
 		let { onSessionChange: n, session: r } = this.props;
-		at("[onRemoveChoice]", e);
+		ot("[onRemoveChoice]", e);
 		let i = Je({
 			type: "remove",
 			target: e
@@ -1052,7 +1052,7 @@ var mt = class extends A.Component {
 			}
 			e && r && (this.onDropChoice(r, e, i), this.focusTile(this.getDestinationSlotId(r)));
 		} else if (!t && n) {
-			let e = n.data.current, t = n.rect?.current, a = rt(t, this.dragCollision.lastPointer(), r), o = nt(t?.initial, a);
+			let e = n.data.current, t = n.rect?.current, a = it(t, this.dragCollision.lastPointer(), r), o = rt(t?.initial, a);
 			e && e.type === "target" && !o && (this.onRemoveChoice(e, i), this.focusTile(this.getDestinationSlotId({
 				type: "choice",
 				id: e.id
@@ -1099,7 +1099,7 @@ var mt = class extends A.Component {
 			});
 		});
 	};
-	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < tt;
+	isClickSoonAfterDragEnd = () => Date.now() - this.lastDragEndAt < nt;
 	onChoiceClick = (e) => {
 		this.isClickSoonAfterDragEnd() || this.toggleChoiceSelection(e);
 	};
@@ -1110,9 +1110,9 @@ var mt = class extends A.Component {
 		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: h } = this.state, g = s || {
 			orientation: "vertical",
 			includeTargets: !0
-		}, { orientation: _, includeTargets: v } = g, y = _ === "vertical", S = this.createOrdering(), { mode: C, role: T } = u || {}, E = y ? He : Ve, ee = (h || C === "view" && T === "instructor") && l && c, O = a && (b(a) || w(a)), k = f && (b(f) || w(f)), A = {
-			color: x.text(),
-			backgroundColor: x.background(),
+		}, { orientation: _, includeTargets: v } = g, b = _ === "vertical", x = this.createOrdering(), { mode: C, role: w } = u || {}, ee = b ? He : Ve, D = (h || C === "view" && w === "instructor") && l && c, te = a && (S(a) || T(a)), k = f && (S(f) || T(f)), A = {
+			color: y.text(),
+			backgroundColor: y.background(),
 			display: "flex",
 			flexDirection: "column",
 			alignItems: "center",
@@ -1123,38 +1123,38 @@ var mt = class extends A.Component {
 			onChoiceClick: this.onChoiceClick,
 			onPlacementClick: this.onPlacementClick
 		} : {};
-		return /* @__PURE__ */ P(D, {
+		return /* @__PURE__ */ P(O, {
 			onDragStart: this.onDragStart,
 			onDragEnd: this.onDragEnd,
 			onDragCancel: this.onDragCancel,
 			collisionDetection: this.dragCollision.collisionDetection,
-			modifiers: [re],
-			...it(v),
-			children: /* @__PURE__ */ P(ot, { children: /* @__PURE__ */ F(Qe, {
+			modifiers: [ae],
+			...at(v),
+			children: /* @__PURE__ */ P(st, { children: /* @__PURE__ */ F(Qe, {
 				extraCSSRules: r,
 				style: A,
 				children: [
-					k && /* @__PURE__ */ P(ft, {
+					k && /* @__PURE__ */ P(pt, {
 						labels: {
 							hidden: $.t("common:showTeacherInstructions", { lng: p }),
 							visible: $.t("common:hideTeacherInstructions", { lng: p })
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ P(Y, { prompt: f })
+						children: /* @__PURE__ */ P(X, { prompt: f })
 					}),
-					/* @__PURE__ */ P(lt, { children: /* @__PURE__ */ P(Y, { prompt: i }) }),
-					/* @__PURE__ */ P(dt, {
+					/* @__PURE__ */ P(ut, { children: /* @__PURE__ */ P(X, { prompt: i }) }),
+					/* @__PURE__ */ P(ft, {
 						show: m,
 						toggled: h,
 						onToggle: this.toggleCorrect,
 						language: p
 					}),
-					/* @__PURE__ */ P(st, { children: /* @__PURE__ */ P(ct, { children: /* @__PURE__ */ P(pt, {
+					/* @__PURE__ */ P(ct, { children: /* @__PURE__ */ P(lt, { children: /* @__PURE__ */ P(mt, {
 						instanceId: this.instanceId,
 						choiceLabel: g.choiceLabel,
 						targetLabel: g.targetLabel,
-						ordering: S,
-						tiler: E,
+						ordering: x,
+						tiler: ee,
 						disabled: d,
 						addGuide: g.showOrdering,
 						tileSize: g.tileSize,
@@ -1162,14 +1162,14 @@ var mt = class extends A.Component {
 						choiceLabelEnabled: e.config && e.config.choiceLabelEnabled,
 						...j
 					}) }) }),
-					ee && /* @__PURE__ */ P(ut, { dangerouslySetInnerHTML: { __html: c } }),
-					O && /* @__PURE__ */ P(ft, {
+					D && /* @__PURE__ */ P(dt, { dangerouslySetInnerHTML: { __html: E(c) } }),
+					te && /* @__PURE__ */ P(pt, {
 						labels: {
 							hidden: $.t("common:showRationale", { lng: p }),
 							visible: $.t("common:hideRationale", { lng: p })
 						},
 						className: "collapsible",
-						children: /* @__PURE__ */ P(Y, { prompt: a })
+						children: /* @__PURE__ */ P(X, { prompt: a })
 					}),
 					!h && /* @__PURE__ */ P($e, {
 						correctness: n,
@@ -1179,30 +1179,30 @@ var mt = class extends A.Component {
 			}) })
 		});
 	}
-}, ht = class extends A.Component {
+}, gt = class extends A.Component {
 	static propTypes = {
-		model: R.default.object.isRequired,
-		session: R.default.oneOfType([R.default.array.isRequired, R.default.object.isRequired]),
-		onSessionChange: R.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__ */ P(mt, {
+		return /* @__PURE__ */ P(ht, {
 			model: e,
 			session: t,
 			onSessionChange: n
 		});
 	}
-}, gt = (0, I.default)("pie-elements:placement-ordering"), _t = ({ model: e, session: t }) => {
+}, _t = (0, I.default)("pie-elements:placement-ordering"), vt = ({ model: e, session: t }) => {
 	let { config: r } = e, i = (t && n(t.value) || []).length === e.choices.length;
 	return r.includeTargets || i;
-}, vt = class extends HTMLElement {
+}, yt = class extends HTMLElement {
 	constructor() {
 		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
 	}
 	_scheduleMathRender = () => {
 		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
-			this._mathObserver && this._mathObserver.disconnect(), u(this), this._mathRenderPending = !1, setTimeout(() => {
+			this._mathObserver && this._mathObserver.disconnect(), f(this), this._mathRenderPending = !1, setTimeout(() => {
 				this._mathObserver && this._mathObserver.observe(this, {
 					childList: !0,
 					subtree: !0
@@ -1221,7 +1221,7 @@ var mt = class extends A.Component {
 	}
 	isComplete = (e) => e && n(e).length === this._model.completeLength;
 	sessionChange = (e) => {
-		this._session.value = e.value, this.render(), this.dispatchEvent(new L(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
+		this._session.value = e.value, this.render(), this.dispatchEvent(new re(this.tagName.toLowerCase(), this._session && this.isComplete(this._session.value)));
 	};
 	set model(e) {
 		this._model = e, this.render(), this.dispatchEvent(new CustomEvent("model-set", {
@@ -1237,13 +1237,13 @@ var mt = class extends A.Component {
 	}
 	render() {
 		if (this._model && this._session) {
-			gt("[render] session: ", this._session.value), gt("[render] model: ", this._model), this._initMathObserver();
-			let e = A.createElement(ht, {
+			_t("[render] session: ", this._session.value), _t("[render] model: ", this._model), this._initMathObserver();
+			let e = A.createElement(gt, {
 				model: this._model,
 				session: this._session,
 				onSessionChange: this.sessionChange
 			});
-			this._root ||= N(this), this._root.render(e);
+			this._root ||= ne(this), this._root.render(e);
 		}
 	}
 	connectedCallback() {
@@ -1254,6 +1254,6 @@ var mt = class extends A.Component {
 	}
 };
 //#endregion
-export { vt as default, _t as isValidSession };
+export { yt as default, vt as isValidSession };
 
 //# sourceMappingURL=index.js.map