@pie-element/multiple-choice 13.2.2-next.0 → 13.2.2-next.2

package/dist/browser/print/index.js

@@ -1,31 +1,26 @@
-import { Gt as e, I as t, t as n, z as r } from "../debounce-PkR6OuzU.js";
-import { t as i } from "../main-CmP4Uwst.js";
-import { t as a } from "../_baseClone-fFvdZAu5.js";
+import { F as e, N as t, Vt as n } from "../Radio-DADh6qUM.js";
+import { t as r } from "../main-C4I_9OBk.js";
+import { c as i, l as a } from "../dist-nl5urzAW.js";
 import o from "react";
 import { createRoot as s } from "react-dom/client";
-//#region ../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js
-var c = 1, l = 4;
-function u(e) {
-	return a(e, c | l);
-}
-var d = (0, (/* @__PURE__ */ e(r(), 1)).default)("pie-element:multiple-choice:print"), f = (e, t) => {
+var c = (0, (/* @__PURE__ */ n(e(), 1)).default)("pie-element:multiple-choice:print"), l = (e, t) => {
 	let n = t.role === "instructor";
-	return e.prompt = e.promptEnabled === !1 ? void 0 : e.prompt, e.teacherInstructions = n && e.teacherInstructionsEnabled !== !1 ? e.teacherInstructions : void 0, e.showTeacherInstructions = n, e.alwaysShowCorrect = n, e.mode = n ? "evaluate" : e.mode, e.disabled = !0, e.animationsDisabled = !0, e.lockChoiceOrder = !0, e.choicesLayout = e.choicesLayout || "vertical", e.choices = u(e.choices).map((t) => (t.rationale = n && e.rationaleEnabled !== !1 ? t.rationale : void 0, t.hideTick = n, t.feedback = void 0, t)), e.keyMode = e.choicePrefix || "letters", e;
-}, p = class extends HTMLElement {
+	return e.prompt = e.promptEnabled === !1 ? void 0 : e.prompt, e.teacherInstructions = n && e.teacherInstructionsEnabled !== !1 ? e.teacherInstructions : void 0, e.showTeacherInstructions = n, e.alwaysShowCorrect = n, e.mode = n ? "evaluate" : e.mode, e.disabled = !0, e.animationsDisabled = !0, e.lockChoiceOrder = !0, e.choicesLayout = e.choicesLayout || "vertical", e.choices = a(e.choices).map((t) => (t.rationale = n && e.rationaleEnabled !== !1 ? t.rationale : void 0, t.hideTick = n, t.feedback = void 0, t)), e.keyMode = e.choicePrefix || "letters", e;
+}, u = class extends HTMLElement {
 	constructor() {
-		super(), this._options = null, this._model = null, this._session = [], this._root = null, this._rerender = n(() => {
+		super(), this._options = null, this._model = null, this._session = [], this._root = null, this._rerender = i(() => {
 			if (this._model && this._session) {
-				let e = f(this._model, this._options), n = this._options && o.createElement(i, {
+				let e = l(this._model, this._options), n = this._options && o.createElement(r, {
 					model: e,
 					session: {},
 					options: this._options
 				});
 				this._root ||= s(this), this._root.render(n), requestAnimationFrame(() => {
 					requestAnimationFrame(() => {
-						d("render complete - render math"), t(this);
+						c("render complete - render math"), t(this);
 					});
 				});
-			} else d("skip");
+			} else c("skip");
 		}, 50, {
 			leading: !1,
 			trailing: !0
@@ -43,6 +38,6 @@ var d = (0, (/* @__PURE__ */ e(r(), 1)).default)("pie-element:multiple-choice:pr
 	}
 };
 //#endregion
-export { p as default };
+export { u as default };
 
 //# sourceMappingURL=index.js.map

package/dist/browser/print/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../../../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js","../../../src/print/index.tsx"],"sourcesContent":["import baseClone from './_baseClone.js';\n\n/** Used to compose bitmasks for cloning. */\nvar CLONE_DEEP_FLAG = 1,\n    CLONE_SYMBOLS_FLAG = 4;\n\n/**\n * This method is like `_.clone` except that it recursively clones `value`.\n *\n * @static\n * @memberOf _\n * @since 1.0.0\n * @category Lang\n * @param {*} value The value to recursively clone.\n * @returns {*} Returns the deep cloned value.\n * @see _.clone\n * @example\n *\n * var objects = [{ 'a': 1 }, { 'b': 2 }];\n *\n * var deep = _.cloneDeep(objects);\n * console.log(deep[0] === objects[0]);\n * // => false\n */\nfunction cloneDeep(value) {\n  return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);\n}\n\nexport default cloneDeep;\n","// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/multiple-choice/src/print.js\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { cloneDeep, debounce } from 'lodash-es';\nimport Main from '../delivery/main.js';\nimport { renderMath } from '@pie-element/shared-math-rendering-mathjax';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.showTeacherInstructions = instr;\n  model.alwaysShowCorrect = instr;\n  model.mode = instr ? 'evaluate' : model.mode;\n\n  model.disabled = true;\n  model.animationsDisabled = true;\n  model.lockChoiceOrder = true;\n  model.choicesLayout = model.choicesLayout || 'vertical';\n\n  const choices = cloneDeep(model.choices);\n\n  model.choices = choices.map((c) => {\n    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n    c.hideTick = instr;\n    c.feedback = undefined;\n    return c;\n  });\n\n  model.keyMode = model.choicePrefix || 'letters';\n\n  return model;\n};\n\nexport default class MultipleChoicePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n              options: this._options,\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          // Use double requestAnimationFrame so React has committed to the DOM before we render math\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              log('render complete - render math');\n              renderMath(this);\n            });\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"x_google_ignoreList":[0],"mappings":";;;;;;AAGA,IAAI,IAAkB,GAClB,IAAqB;AAoBzB,SAAS,EAAU,GAAO;CACxB,OAAO,EAAU,GAAO,IAAkB,CAAkB;AAC9D;ACTA,IAAM,KAAA,IAAA,wBAAA,GAAA,SAAY,mCAAmC,GAU/C,KAAqB,GAAO,MAAS;CACzC,IAAM,IAAQ,EAAK,SAAS;CAyB5B,OAvBA,EAAM,SAAS,EAAM,kBAAkB,KAAuB,KAAA,IAAf,EAAM,QACrD,EAAM,sBACJ,KAAS,EAAM,+BAA+B,KAAQ,EAAM,sBAAsB,KAAA,GACpF,EAAM,0BAA0B,GAChC,EAAM,oBAAoB,GAC1B,EAAM,OAAO,IAAQ,aAAa,EAAM,MAExC,EAAM,WAAW,IACjB,EAAM,qBAAqB,IAC3B,EAAM,kBAAkB,IACxB,EAAM,gBAAgB,EAAM,iBAAiB,YAI7C,EAAM,UAFU,EAAU,EAAM,OAEhB,EAAQ,KAAK,OAC3B,EAAE,YAAY,KAAS,EAAM,qBAAqB,KAAQ,EAAE,YAAY,KAAA,GACxE,EAAE,WAAW,GACb,EAAE,WAAW,KAAA,GACN,EACR,GAED,EAAM,UAAU,EAAM,gBAAgB,WAE/B;AACT,GAEqB,IAArB,cAAiD,YAAY;CAC3D,cAAc;EAMZ,AALA,MAAM,GACN,KAAK,WAAW,MAChB,KAAK,SAAS,MACd,KAAK,WAAW,CAAC,GACjB,KAAK,QAAQ,MACb,KAAK,YAAY,QACT;GACJ,IAAI,KAAK,UAAU,KAAK,UAAU;IAChC,IAAM,IAAa,EAAkB,KAAK,QAAQ,KAAK,QAAQ,GAEzD,IACJ,KAAK,YACL,EAAM,cAAc,GAAM;KACxB,OAAO;KACP,SAAS,CAAC;KACV,SAAS,KAAK;IAChB,CAAC;IAOH,AALA,AACE,KAAK,UAAQ,EAAW,IAAI,GAE9B,KAAK,MAAM,OAAO,CAAO,GAEzB,4BAA4B;KAC1B,4BAA4B;MAE1B,AADA,EAAI,+BAA+B,GACnC,EAAW,IAAI;KACjB,CAAC;IACH,CAAC;GACH,OACE,EAAI,MAAM;EAEd,GACA,IACA;GAAE,SAAS;GAAO,UAAU;EAAK,CACnC;CACF;CACA,IAAI,QAAQ,GAAG;EACb,KAAK,WAAW;CAClB;CAEA,IAAI,MAAM,GAAG;EAEX,AADA,KAAK,SAAS,GACd,KAAK,UAAU;CACjB;CAEA,oBAAoB,CAAC;CAErB,uBAAuB;EACrB,AAAI,KAAK,SACP,KAAK,MAAM,QAAQ;CAEvB;AACF"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/print/index.tsx"],"sourcesContent":["// @ts-nocheck\n/**\n * @synced-from pie-elements/packages/multiple-choice/src/print.js\n * @auto-generated\n *\n * This file is automatically synced from pie-elements and converted to TypeScript.\n * Manual edits will be overwritten on next sync.\n * To make changes, edit the upstream JavaScript file and run sync again.\n */\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { cloneDeep, debounce } from '@pie-element/shared-lodash';\nimport Main from '../delivery/main.js';\nimport { renderMath } from '@pie-element/shared-math-rendering-mathjax';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  const instr = opts.role === 'instructor';\n\n  model.prompt = model.promptEnabled !== false ? model.prompt : undefined;\n  model.teacherInstructions =\n    instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;\n  model.showTeacherInstructions = instr;\n  model.alwaysShowCorrect = instr;\n  model.mode = instr ? 'evaluate' : model.mode;\n\n  model.disabled = true;\n  model.animationsDisabled = true;\n  model.lockChoiceOrder = true;\n  model.choicesLayout = model.choicesLayout || 'vertical';\n\n  const choices = cloneDeep(model.choices);\n\n  model.choices = choices.map((c) => {\n    c.rationale = instr && model.rationaleEnabled !== false ? c.rationale : undefined;\n    c.hideTick = instr;\n    c.feedback = undefined;\n    return c;\n  });\n\n  model.keyMode = model.choicePrefix || 'letters';\n\n  return model;\n};\n\nexport default class MultipleChoicePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n              options: this._options,\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          // Use double requestAnimationFrame so React has committed to the DOM before we render math\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              log('render complete - render math');\n              renderMath(this);\n            });\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;AAiBA,IAAM,KAAA,IAAA,wBAAA,GAAA,SAAY,mCAAmC,GAU/C,KAAqB,GAAO,MAAS;CACzC,IAAM,IAAQ,EAAK,SAAS;CAyB5B,OAvBA,EAAM,SAAS,EAAM,kBAAkB,KAAuB,KAAA,IAAf,EAAM,QACrD,EAAM,sBACJ,KAAS,EAAM,+BAA+B,KAAQ,EAAM,sBAAsB,KAAA,GACpF,EAAM,0BAA0B,GAChC,EAAM,oBAAoB,GAC1B,EAAM,OAAO,IAAQ,aAAa,EAAM,MAExC,EAAM,WAAW,IACjB,EAAM,qBAAqB,IAC3B,EAAM,kBAAkB,IACxB,EAAM,gBAAgB,EAAM,iBAAiB,YAI7C,EAAM,UAFU,EAAU,EAAM,OAEhB,EAAQ,KAAK,OAC3B,EAAE,YAAY,KAAS,EAAM,qBAAqB,KAAQ,EAAE,YAAY,KAAA,GACxE,EAAE,WAAW,GACb,EAAE,WAAW,KAAA,GACN,EACR,GAED,EAAM,UAAU,EAAM,gBAAgB,WAE/B;AACT,GAEqB,IAArB,cAAiD,YAAY;CAC3D,cAAc;EAMZ,AALA,MAAM,GACN,KAAK,WAAW,MAChB,KAAK,SAAS,MACd,KAAK,WAAW,CAAC,GACjB,KAAK,QAAQ,MACb,KAAK,YAAY,QACT;GACJ,IAAI,KAAK,UAAU,KAAK,UAAU;IAChC,IAAM,IAAa,EAAkB,KAAK,QAAQ,KAAK,QAAQ,GAEzD,IACJ,KAAK,YACL,EAAM,cAAc,GAAM;KACxB,OAAO;KACP,SAAS,CAAC;KACV,SAAS,KAAK;IAChB,CAAC;IAOH,AALA,AACE,KAAK,UAAQ,EAAW,IAAI,GAE9B,KAAK,MAAM,OAAO,CAAO,GAEzB,4BAA4B;KAC1B,4BAA4B;MAE1B,AADA,EAAI,+BAA+B,GACnC,EAAW,IAAI;KACjB,CAAC;IACH,CAAC;GACH,OACE,EAAI,MAAM;EAEd,GACA,IACA;GAAE,SAAS;GAAO,UAAU;EAAK,CACnC;CACF;CACA,IAAI,QAAQ,GAAG;EACb,KAAK,WAAW;CAClB;CAEA,IAAI,MAAM,GAAG;EAEX,AADA,KAAK,SAAS,GACd,KAAK,UAAU;CACjB;CAEA,oBAAoB,CAAC;CAErB,uBAAuB;EACrB,AAAI,KAAK,SACP,KAAK,MAAM,QAAQ;CAEvB;AACF"}

package/dist/controller/index.js

@@ -1,6 +1,6 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
-import { isResponseCorrect as t } from "./utils.js";
-import n from "./defaults.js";
+import { isResponseCorrect as e } from "./utils.js";
+import t from "./defaults.js";
+import { isEmpty as n } from "@pie-element/shared-lodash";
 import { getShuffledChoices as r, lockChoices as i, partialScoring as a } from "@pie-element/shared-controller-utils";
 //#region src/controller/index.ts
 var o = (e, t, n) => (r) => {
@@ -15,21 +15,21 @@ var o = (e, t, n) => (r) => {
 	return o;
 };
 function s(e = {}) {
-	return new Promise((t) => t({
-		...n,
+	return new Promise((n) => n({
+		...t,
 		...e
 	}));
 }
 var c = (e) => {
-	let { verticalMode: t, choicesLayout: r, ...i } = e || {};
+	let { verticalMode: n, choicesLayout: r, ...i } = e || {};
 	return {
-		...n,
+		...t,
 		...i,
-		choicesLayout: r || t === !1 && "horizontal" || n.choicesLayout
+		choicesLayout: r || n === !1 && "horizontal" || t.choicesLayout
 	};
 };
-async function l(e, n, a, s) {
-	let l = c(e), u = Object.assign({
+async function l(t, n, a, s) {
+	let l = c(t), u = Object.assign({
 		correct: "Correct",
 		incorrect: "Incorrect"
 	}, l.defaultFeedback), d = (l.choices || []).map(o(l, a, u));
@@ -43,7 +43,7 @@ async function l(e, n, a, s) {
 		choiceMode: l.choiceMode,
 		keyMode: l.choicePrefix,
 		choices: d,
-		responseCorrect: a.mode === "evaluate" ? t(l, n) : void 0,
+		responseCorrect: a.mode === "evaluate" ? e(l, n) : void 0,
 		language: l.language,
 		extraCSSRules: l.extraCSSRules,
 		fontSizeFactor: l.fontSizeFactor,
@@ -63,9 +63,9 @@ async function l(e, n, a, s) {
 	}, { role: p, mode: m } = a || {};
 	return p === "instructor" && (m === "view" || m === "evaluate") ? f.teacherInstructions = l.teacherInstructionsEnabled ? l.teacherInstructions : null : f.teacherInstructions = null, f;
 }
-var u = (t, n) => {
-	if (!n || e(n)) return 0;
-	let r = n.value || [], i = (t.choices || []).filter((e) => e.correct), a = r.reduce((e, t) => e + +!!i.find((e) => e.value === t), 0);
+var u = (e, t) => {
+	if (!t || n(t)) return 0;
+	let r = t.value || [], i = (e.choices || []).filter((e) => e.correct), a = r.reduce((e, t) => e + +!!i.find((e) => e.value === t), 0);
 	i.length < r.length && (a -= r.length - i.length, a < 0 && (a = 0));
 	let o = i.length ? a / i.length : 0;
 	return parseFloat(o.toFixed(2));
@@ -82,19 +82,19 @@ var u = (t, n) => {
 	let d = u(e, t);
 	return r.push(`Final score: ${d}.`), r;
 };
-function f(t, n, r) {
+function f(e, t, r) {
 	return new Promise((i) => {
-		if (!n || e(n)) i({
+		if (!t || n(t)) i({
 			score: 0,
 			empty: !0,
 			traceLog: ["Student did not select any answers. Score is 0."]
 		});
 		else {
-			let e = d(t, n, r), o = u(t, n);
+			let n = d(e, t, r), o = u(e, t);
 			i({
-				score: a.enabled(t, r) && t.choiceMode !== "radio" ? o : +(o === 1),
+				score: a.enabled(e, r) && e.choiceMode !== "radio" ? o : +(o === 1),
 				empty: !1,
-				traceLog: e
+				traceLog: n
 			});
 		}
 	});
@@ -107,18 +107,18 @@ var p = (e, t) => new Promise((n) => {
 			value: t.filter((e) => e.correct).map((e) => e.value)
 		});
 	} else n(null);
-}), m = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), h = (t = {}, n = {}) => {
-	let { choices: r } = t, { minAnswerChoices: i = 2, maxAnswerChoices: a } = n, o = [...r || []].reverse(), s = {}, c = {}, l = {};
-	["teacherInstructions", "prompt"].forEach((e) => {
-		n[e]?.required && !m(t[e]) && (l[e] = "This field is required.");
+}), m = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), h = (e = {}, t = {}) => {
+	let { choices: r } = e, { minAnswerChoices: i = 2, maxAnswerChoices: a } = t, o = [...r || []].reverse(), s = {}, c = {}, l = {};
+	["teacherInstructions", "prompt"].forEach((n) => {
+		t[n]?.required && !m(e[n]) && (l[n] = "This field is required.");
 	});
 	let u = !1;
-	o.forEach((e, t) => {
+	o.forEach((e, n) => {
 		let { correct: r, value: i, label: a, rationale: l } = e;
-		r && (u = !0), m(a) ? o.slice(t + 1).some((e) => e.label === a) && (s[i] = "Content should be unique.") : s[i] = "Content should not be empty.", n.rationale?.required && !m(l) && (c[i] = "This field is required.");
+		r && (u = !0), m(a) ? o.slice(n + 1).some((e) => e.label === a) && (s[i] = "Content should be unique.") : s[i] = "Content should not be empty.", t.rationale?.required && !m(l) && (c[i] = "This field is required.");
 	});
 	let d = (r || []).length;
-	return d < i ? l.answerChoices = `There should be at least ${i} choices defined.` : d > a && (l.answerChoices = `No more than ${a} choices should be defined.`), u || (l.correctResponse = "No correct response defined."), e(s) || (l.choices = s), e(c) || (l.rationale = c), l;
+	return d < i ? l.answerChoices = `There should be at least ${i} choices defined.` : d > a && (l.answerChoices = `No more than ${a} choices should be defined.`), u || (l.correctResponse = "No correct response defined."), n(s) || (l.choices = s), n(c) || (l.rationale = c), l;
 };
 //#endregion
 export { p as createCorrectResponseSession, s as createDefaultModel, d as getLogTrace, u as getScore, l as model, c as normalize, f as outcome, h as validate };

package/dist/controller/utils.js

@@ -1,4 +1,4 @@
-import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+import { isEqual as e } from "@pie-element/shared-lodash";
 //#region src/controller/utils.ts
 var t = (e) => e.filter((e) => e.correct).map((e) => e.value).sort(), n = (n, r) => {
 	let i = t(n.choices);

package/dist/delivery/choice-input.js

@@ -1,10 +1,10 @@
-import e from "./feedback-tick.js";
-import t from "react";
-import n from "prop-types";
-import * as r from "@pie-lib/render-ui";
-import { Feedback as i, PreviewPrompt as a, color as o } from "@pie-lib/render-ui";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "classnames";
+import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import t from "./feedback-tick.js";
+import n from "react";
+import r from "prop-types";
+import * as i from "@pie-lib/render-ui";
+import { Feedback as a, PreviewPrompt as o, color as s } from "@pie-lib/render-ui";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 import { styled as d } from "@mui/material/styles";
 import f from "@mui/material/Box";
 import p from "@mui/material/FormControlLabel";
@@ -17,18 +17,18 @@ function g(e) {
 function _(e, t) {
 	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
 }
-var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "Feedback") || _(S.Feedback, "Feedback"), b = r, x = b.default, S = x && typeof x == "object" ? x : b, C = "multiple-choice-component", w = d(f)({
+var v = _(o, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(a, "Feedback") || _(S.Feedback, "Feedback"), b = i, x = b.default, S = x && typeof x == "object" ? x : b, C = "multiple-choice-component", w = d(f)({
 	display: "flex",
 	alignItems: "center",
-	backgroundColor: o.background()
+	backgroundColor: s.background()
 }), T = d(f)({
 	display: "flex",
 	alignItems: "center",
-	backgroundColor: o.background(),
+	backgroundColor: s.background(),
 	flex: 1,
 	"& .MuiFormControlLabel-root": { marginLeft: "-14px" },
 	"& label": {
-		color: o.text(),
+		color: s.text(),
 		"& > span": { fontSize: "inherit" },
 		"& > .MuiButtonBase-root": { padding: "12px" }
 	}
@@ -45,8 +45,8 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 	overflow: "hidden"
 }), O = d(p)({
 	"& .MuiFormControlLabel-label": {
-		color: `${o.text()} !important`,
-		backgroundColor: o.background(),
+		color: `${s.text()} !important`,
+		backgroundColor: s.background(),
 		letterSpacing: "normal"
 	},
 	"&.Mui-disabled *": { cursor: "not-allowed !important" }
@@ -54,30 +54,30 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 	let t = (t) => e ? `${e}-${t}` : t;
 	return {
 		[t("root")]: {
-			...k("color", o.text()),
-			...e ? {} : { "&:hover": { color: `${o.primaryLight()} !important` } },
-			...e === "correct" ? k("correct-color", o.text()) : {},
-			...e === "incorrect" ? k("incorrect-color", o.incorrect()) : {}
+			...k("color", s.text()),
+			...e ? {} : { "&:hover": { color: `${s.primaryLight()} !important` } },
+			...e === "correct" ? k("correct-color", s.text()) : {},
+			...e === "incorrect" ? k("incorrect-color", s.incorrect()) : {}
 		},
 		[t("checked")]: {
-			...e === "correct" ? k("correct-selected-color", o.correct()) : {},
-			...e === "incorrect" ? k("incorrect-checked", o.incorrect()) : {},
-			...e ? {} : k("selected-color", o.primary())
+			...e === "correct" ? k("correct-selected-color", s.correct()) : {},
+			...e === "incorrect" ? k("incorrect-checked", s.incorrect()) : {},
+			...e ? {} : k("selected-color", s.primary())
 		},
 		[t("disabled")]: {
-			...k("disabled-color", o.text()),
-			...e === "correct" ? k("correct-disabled-color", o.disabled()) : {},
-			...e === "incorrect" ? k("incorrect-disabled-color", o.disabled()) : {},
+			...k("disabled-color", s.text()),
+			...e === "correct" ? k("correct-disabled-color", s.disabled()) : {},
+			...e === "incorrect" ? k("incorrect-disabled-color", s.disabled()) : {},
 			opacity: .6,
 			cursor: "not-allowed !important",
 			pointerEvents: "initial !important"
 		},
 		focusVisibleUnchecked: {
-			outline: `2px solid ${o.keyBoardFocusIndicator()}`,
+			outline: `2px solid ${s.keyBoardFocusIndicator()}`,
 			backgroundColor: "transparent"
 		},
 		focusVisibleChecked: {
-			outline: `2px solid ${o.keyBoardFocusIndicator()}`,
+			outline: `2px solid ${s.keyBoardFocusIndicator()}`,
 			backgroundColor: "transparent"
 		}
 	};
@@ -95,10 +95,10 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 		}
 	};
 }), M = (e) => {
-	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, onKeyDown: s, inputRef: l } = e;
-	return /* @__PURE__ */ c(j, {
+	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, onKeyDown: s, inputRef: c } = e;
+	return /* @__PURE__ */ l(j, {
 		id: o,
-		slotProps: { input: { ref: l } },
+		slotProps: { input: { ref: c } },
 		onKeyDown: s,
 		disableRipple: !0,
 		checked: n,
@@ -123,10 +123,10 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 		}
 	};
 }), P = (e) => {
-	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, tagName: s, inputRef: l } = e;
-	return /* @__PURE__ */ c(N, {
+	let { correctness: t, checked: n, onChange: r, disabled: i, value: a, id: o, tagName: s, inputRef: c } = e;
+	return /* @__PURE__ */ l(N, {
 		id: o,
-		slotProps: { input: { ref: l } },
+		slotProps: { input: { ref: c } },
 		disableRipple: !0,
 		checked: n,
 		onChange: r,
@@ -136,28 +136,28 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 		className: C,
 		name: s
 	});
-}, F = class extends t.Component {
+}, F = class extends n.Component {
 	static propTypes = {
-		choiceMode: n.oneOf(["radio", "checkbox"]),
-		displayKey: n.string,
-		checked: n.bool.isRequired,
-		correctness: n.string,
-		disabled: n.bool.isRequired,
-		feedback: n.string,
-		label: n.string.isRequired,
-		rationale: n.string,
-		onChange: n.func.isRequired,
-		value: n.string.isRequired,
-		className: n.string,
-		tagName: n.string,
-		hideTick: n.bool,
-		isEvaluateMode: n.bool,
-		choicesLayout: n.oneOf([
+		choiceMode: r.oneOf(["radio", "checkbox"]),
+		displayKey: r.string,
+		checked: r.bool.isRequired,
+		correctness: r.string,
+		disabled: r.bool.isRequired,
+		feedback: r.string,
+		label: r.string.isRequired,
+		rationale: r.string,
+		onChange: r.func.isRequired,
+		value: r.string.isRequired,
+		className: r.string,
+		tagName: r.string,
+		hideTick: r.bool,
+		isEvaluateMode: r.bool,
+		choicesLayout: r.oneOf([
 			"vertical",
 			"grid",
 			"horizontal"
 		]),
-		isSelectionButtonBelow: n.bool
+		isSelectionButtonBelow: r.bool
 	};
 	static defaultProps = {
 		rationale: null,
@@ -189,7 +189,7 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 		c && c.focus();
 	};
 	render() {
-		let { choiceMode: t, disabled: n, displayKey: r, feedback: i, label: a, correctness: o, className: d, rationale: f, hideTick: p, isEvaluateMode: m, choicesLayout: h, value: g, checked: _, tagName: b, isSelectionButtonBelow: x } = this.props, S = t === "checkbox" ? M : P, k = t === "checkbox" ? "checkbox" : "radio-button", A = {
+		let { choiceMode: n, disabled: r, displayKey: i, feedback: a, label: o, correctness: s, className: d, rationale: f, hideTick: p, isEvaluateMode: m, choicesLayout: h, value: g, checked: _, tagName: b, isSelectionButtonBelow: x } = this.props, S = n === "checkbox" ? M : P, k = n === "checkbox" ? "checkbox" : "radio-button", A = {
 			...h === "horizontal" && { [`& .${C}`]: {
 				padding: "8px",
 				margin: "4px 0 4px 4px"
@@ -199,55 +199,55 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 				justifyContent: "center",
 				"& > label": { alignItems: "center" }
 			}
-		}, j = typeof a == "string" && (a.includes("<math") || a.includes("\\(") || a.includes("\\[") || a.includes("<img") || a.includes("data-latex") || a.includes("data-raw") || a.includes("<mjx-container")), N = r ? /* @__PURE__ */ c(D, {
+		}, j = typeof o == "string" && (o.includes("<math") || o.includes("\\(") || o.includes("\\[") || o.includes("<img") || o.includes("data-latex") || o.includes("data-raw") || o.includes("<mjx-container")), N = i ? /* @__PURE__ */ l(D, {
 			id: this.descId,
-			children: j ? `Pick the answer below, ${r}` : r
-		}) : null, F = /* @__PURE__ */ c(s, { children: r && !x ? /* @__PURE__ */ l(w, {
+			children: j ? `Pick the answer below, ${i}` : i
+		}) : null, F = /* @__PURE__ */ l(c, { children: i && !x ? /* @__PURE__ */ u(w, {
 			component: "span",
-			children: [/* @__PURE__ */ l("span", {
+			children: [/* @__PURE__ */ u("span", {
 				"aria-hidden": "true",
 				children: [
-					r,
+					i,
 					".",
 					"\xA0"
 				]
-			}), /* @__PURE__ */ c(v, {
+			}), /* @__PURE__ */ l(v, {
 				className: "prompt-label",
-				prompt: a,
+				prompt: o,
 				tagName: "span"
 			})]
-		}) : /* @__PURE__ */ c(v, {
+		}) : /* @__PURE__ */ l(v, {
 			className: "prompt-label",
-			prompt: a,
+			prompt: o,
 			tagName: "span"
 		}) }), I = {
-			disabled: n,
+			disabled: r,
 			checked: _,
-			correctness: o,
+			correctness: s,
 			tagName: b,
 			value: g,
 			id: this.choiceId,
 			onChange: this.onToggleChoice,
 			onKeyDown: this.handleKeyDown,
 			...N ? { "aria-describedby": this.descId } : {}
-		}, L = x ? /* @__PURE__ */ l(E, { children: [
+		}, L = x ? /* @__PURE__ */ u(E, { children: [
 			N,
-			/* @__PURE__ */ c(S, {
+			/* @__PURE__ */ l(S, {
 				...I,
 				style: { padding: 0 }
 			}),
-			/* @__PURE__ */ c("span", {
+			/* @__PURE__ */ l("span", {
 				"aria-hidden": "true",
-				children: r ? `${r}.` : ""
+				children: i ? `${i}.` : ""
 			})
-		] }) : /* @__PURE__ */ l(s, { children: [N, /* @__PURE__ */ c(S, { ...I })] });
-		return /* @__PURE__ */ l("div", {
-			className: u(d, "corespring-" + k, "choice-input"),
+		] }) : /* @__PURE__ */ u(c, { children: [N, /* @__PURE__ */ l(S, { ...I })] });
+		return /* @__PURE__ */ u("div", {
+			className: e(d, "corespring-" + k, "choice-input"),
 			children: [
-				/* @__PURE__ */ l(w, { children: [!p && m && /* @__PURE__ */ c(e, { correctness: o }), /* @__PURE__ */ c(T, {
+				/* @__PURE__ */ u(w, { children: [!p && m && /* @__PURE__ */ l(t, { correctness: s }), /* @__PURE__ */ l(T, {
 					className: "checkbox-holder",
 					sx: A,
-					children: /* @__PURE__ */ c(O, {
+					children: /* @__PURE__ */ l(O, {
 						label: F,
 						value: g,
 						htmlFor: this.choiceId,
@@ -255,14 +255,14 @@ var v = _(a, "PreviewPrompt") || _(S.PreviewPrompt, "PreviewPrompt"), y = _(i, "
 						control: L
 					})
 				})] }),
-				f && /* @__PURE__ */ c(v, {
+				f && /* @__PURE__ */ l(v, {
 					className: "rationale",
 					defaultClassName: "rationale",
 					prompt: f
 				}),
-				/* @__PURE__ */ c(y, {
-					feedback: i,
-					correctness: o
+				/* @__PURE__ */ l(y, {
+					feedback: a,
+					correctness: s
 				})
 			]
 		});

package/dist/delivery/index.js

@@ -1,10 +1,10 @@
 import e from "./main.js";
-import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/debounce.js";
-import { updateSessionMetadata as n, updateSessionValue as r } from "./session-updater.js";
-import i from "react";
-import * as a from "@pie-lib/render-ui";
-import { EnableAudioAutoplayImage as o } from "@pie-lib/render-ui";
-import { createRoot as s } from "react-dom/client";
+import { updateSessionMetadata as t, updateSessionValue as n } from "./session-updater.js";
+import r from "react";
+import * as i from "@pie-lib/render-ui";
+import { EnableAudioAutoplayImage as a } from "@pie-lib/render-ui";
+import { createRoot as o } from "react-dom/client";
+import { debounce as s } from "@pie-element/shared-lodash";
 import c from "debug";
 import { ModelSetEvent as l, SessionChangedEvent as u } from "@pie-element/shared-player-events";
 import { renderMath as d } from "@pie-element/shared-math-rendering-mathjax";
@@ -15,7 +15,7 @@ function f(e) {
 function p(e, t) {
 	return !e || f(e) ? e : f(e.default) ? e.default : t && f(e[t]) ? e[t] : t && f(e[t]?.default) ? e[t].default : e;
 }
-var m = p(o, "EnableAudioAutoplayImage") || p(_.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), h = a, g = h.default, _ = g && typeof g == "object" ? g : h, v = c("pie-ui:multiple-choice"), y = (e, t, n, r) => {
+var m = p(a, "EnableAudioAutoplayImage") || p(_.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), h = i, g = h.default, _ = g && typeof g == "object" ? g : h, v = c("pie-ui:multiple-choice"), y = (e, t, n, r) => {
 	let { autoplayAudioEnabled: i, completeAudioEnabled: a } = t || {};
 	if (i && a && !n && r) {
 		let e = r.querySelector("audio"), t = e && e.closest("#preview-prompt");
@@ -49,9 +49,9 @@ function x(e) {
 }
 var S = class extends HTMLElement {
 	constructor() {
-		super(), this._model = null, this._session = null, this._options = null, this.audioComplete = !1, this._boundHandleKeyDown = this.handleKeyDown.bind(this), this._keyboardEventsEnabled = !1, this._audioInitialized = !1, this._root = null, this._mathObserver = null, this._mathRenderPending = !1, this._rerender = t(() => {
+		super(), this._model = null, this._session = null, this._options = null, this.audioComplete = !1, this._boundHandleKeyDown = this.handleKeyDown.bind(this), this._keyboardEventsEnabled = !1, this._audioInitialized = !1, this._root = null, this._mathObserver = null, this._mathRenderPending = !1, this._rerender = s(() => {
 			if (this._model && this._session) {
-				var t = i.createElement(e, {
+				var t = r.createElement(e, {
 					model: this._model,
 					session: this._session,
 					options: this._options,
@@ -59,14 +59,14 @@ var S = class extends HTMLElement {
 					onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
 					...x(this)
 				});
-				this.setAttribute("aria-label", this._model.choiceMode === "radio" ? "Multiple Choice Question" : "Multiple Correct Answer Question"), this.setAttribute("role", "region"), this.setLangAttribute(), this._initMathObserver(), this._root ||= s(this), this._root.render(t), this._model.keyboardEventsEnabled === !0 && !this._keyboardEventsEnabled && this.enableKeyboardEvents();
+				this.setAttribute("aria-label", this._model.choiceMode === "radio" ? "Multiple Choice Question" : "Multiple Correct Answer Question"), this.setAttribute("role", "region"), this.setLangAttribute(), this._initMathObserver(), this._root ||= o(this), this._root.render(t), this._model.keyboardEventsEnabled === !0 && !this._keyboardEventsEnabled && this.enableKeyboardEvents();
 			} else v("skip");
 		}, 50, {
 			leading: !1,
 			trailing: !0
-		}), this._dispatchResponseChanged = t(() => {
+		}), this._dispatchResponseChanged = s(() => {
 			this.dispatchEvent(new u(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this)));
-		}), this._dispatchModelSet = t(() => {
+		}), this._dispatchModelSet = s(() => {
 			this.dispatchEvent(new l(this.tagName.toLowerCase(), y(this._session, this._model, this.audioComplete, this), this._model !== void 0));
 		}, 50, {
 			leading: !1,
@@ -121,7 +121,7 @@ var S = class extends HTMLElement {
 		this._session = e, this._rerender(), this._dispatchResponseChanged();
 	}
 	_onChange(e) {
-		r(this._session, this._model.choiceMode, e), this._dispatchResponseChanged(), this._rerender();
+		n(this._session, this._model.choiceMode, e), this._dispatchResponseChanged(), this._rerender();
 	}
 	_createAudioInfoToast() {
 		let e = document.createElement("div");
@@ -141,7 +141,7 @@ var S = class extends HTMLElement {
 		return t.src = m, t.alt = "Click anywhere to enable audio autoplay", t.width = 500, t.height = 300, e.appendChild(t), e;
 	}
 	connectedCallback() {
-		this._initMathObserver(), this._initPlayerObserver(), this._rerender(), new MutationObserver((e, t) => {
+		this._initMathObserver(), this._initPlayerObserver(), this._rerender(), new MutationObserver((e, n) => {
 			e.forEach((e) => {
 				if (e.type === "childList") {
 					if (this._audioInitialized) return;
@@ -154,15 +154,15 @@ var S = class extends HTMLElement {
 						e.paused && !this.querySelector("#play-audio-info") ? (a.appendChild(i), document.addEventListener("click", o)) : document.removeEventListener("click", o);
 					}, 500);
 					let s = () => {
-						n(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
-						let t = this.querySelector("#play-audio-info");
-						t && a.removeChild(t), e.removeEventListener("playing", s);
+						t(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
+						let n = this.querySelector("#play-audio-info");
+						n && a.removeChild(n), e.removeEventListener("playing", s);
 					};
 					e.addEventListener("playing", s);
 					let c = () => {
-						n(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() }), this.audioComplete = !0, this._dispatchResponseChanged(), e.removeEventListener("ended", c);
+						t(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() }), this.audioComplete = !0, this._dispatchResponseChanged(), e.removeEventListener("ended", c);
 					};
-					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = s, this._handleEnded = c, this._enableAudio = o, this._audioInitialized = !0, t.disconnect();
+					e.addEventListener("ended", c), this._audio = e, this._handlePlaying = s, this._handleEnded = c, this._enableAudio = o, this._audioInitialized = !0, n.disconnect();
 				}
 			});
 		}).observe(this, {