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

package/dist/delivery/multiple-choice.js

@@ -1,11 +1,11 @@
-import e from "./choice.js";
-import t from "react";
-import n from "prop-types";
-import * as r from "@pie-lib/render-ui";
-import { Collapsible as i, PreviewPrompt as a, color as o, transformDataHeadings as s } from "@pie-lib/render-ui";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "@pie-lib/correct-answer-toggle";
-import d from "classnames";
+import e from "../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import t from "./choice.js";
+import n from "react";
+import r from "prop-types";
+import * as i from "@pie-lib/render-ui";
+import { Collapsible as a, PreviewPrompt as o, color as s, transformDataHeadings as c } from "@pie-lib/render-ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import d from "@pie-lib/correct-answer-toggle";
 import { styled as f } from "@mui/material/styles";
 import p from "@mui/material/Box";
 import m from "@pie-lib/translator";
@@ -16,9 +16,9 @@ function h(e) {
 function g(e, t) {
 	return !e || h(e) ? e : h(e.default) ? e.default : t && h(e[t]) ? e[t] : t && h(e[t]?.default) ? e[t].default : e;
 }
-var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "Collapsible") || g(x.Collapsible, "Collapsible"), y = r, b = y.default, x = b && typeof b == "object" ? b : y, { translator: S } = m, C = f(p)({
-	color: o.text(),
-	backgroundColor: o.background(),
+var _ = g(o, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(a, "Collapsible") || g(x.Collapsible, "Collapsible"), y = i, b = y.default, x = b && typeof b == "object" ? b : y, { translator: S } = m, C = f(p)({
+	color: s.text(),
+	backgroundColor: s.background(),
 	"& *": { "-webkit-font-smoothing": "antialiased" },
 	position: "relative",
 	"& legend": { border: "none !important" }
@@ -48,56 +48,56 @@ var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), j = class extends t.Component {
+})), j = class extends n.Component {
 	static propTypes = {
-		className: n.string,
-		mode: n.oneOf([
+		className: r.string,
+		mode: r.oneOf([
 			"gather",
 			"view",
 			"evaluate"
 		]),
-		choiceMode: n.oneOf(["radio", "checkbox"]),
-		keyMode: n.oneOf([
+		choiceMode: r.oneOf(["radio", "checkbox"]),
+		keyMode: r.oneOf([
 			"numbers",
 			"letters",
 			"none"
 		]),
-		choices: n.array,
-		partLabel: n.string,
-		prompt: n.string,
-		teacherInstructions: n.string,
-		session: n.object,
-		disabled: n.bool,
-		onChoiceChanged: n.func,
-		responseCorrect: n.bool,
-		correctResponse: n.array,
-		choicesLayout: n.oneOf([
+		choices: r.array,
+		partLabel: r.string,
+		prompt: r.string,
+		teacherInstructions: r.string,
+		session: r.object,
+		disabled: r.bool,
+		onChoiceChanged: r.func,
+		responseCorrect: r.bool,
+		correctResponse: r.array,
+		choicesLayout: r.oneOf([
 			"vertical",
 			"grid",
 			"horizontal"
 		]),
-		gridColumns: n.string,
-		alwaysShowCorrect: n.bool,
-		animationsDisabled: n.bool,
-		language: n.string,
-		selectedAnswerBackgroundColor: n.string,
-		selectedAnswerStrokeColor: n.string,
-		selectedAnswerStrokeWidth: n.string,
-		hoverAnswerBackgroundColor: n.string,
-		hoverAnswerStrokeColor: n.string,
-		hoverAnswerStrokeWidth: n.string,
-		onShowCorrectToggle: n.func,
-		isSelectionButtonBelow: n.bool,
-		minSelections: n.number,
-		maxSelections: n.number,
-		autoplayAudioEnabled: n.bool,
+		gridColumns: r.string,
+		alwaysShowCorrect: r.bool,
+		animationsDisabled: r.bool,
+		language: r.string,
+		selectedAnswerBackgroundColor: r.string,
+		selectedAnswerStrokeColor: r.string,
+		selectedAnswerStrokeWidth: r.string,
+		hoverAnswerBackgroundColor: r.string,
+		hoverAnswerStrokeColor: r.string,
+		hoverAnswerStrokeWidth: r.string,
+		onShowCorrectToggle: r.func,
+		isSelectionButtonBelow: r.bool,
+		minSelections: r.number,
+		maxSelections: r.number,
+		autoplayAudioEnabled: r.bool,
 		customAudioButton: {
-			playImage: n.string,
-			pauseImage: n.string
+			playImage: r.string,
+			pauseImage: r.string
 		},
-		options: n.object,
-		baseHeadingLevel: n.number,
-		includeSrHeading: n.bool
+		options: r.object,
+		baseHeadingLevel: r.number,
+		includeSrHeading: r.bool
 	};
 	constructor(e) {
 		super(e), this.state = {
@@ -145,14 +145,14 @@ var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "
 		let { mode: e, choiceMode: t, includeSrHeading: n, baseHeadingLevel: r, partLabel: i } = this.props;
 		if (!(!i && n !== !1) || e !== "gather") return null;
 		let a = r ? Math.min(6, r) : 2;
-		return /* @__PURE__ */ c(k.withComponent(`h${a}`), { children: t === "radio" ? "Multiple Choice Question" : "Multiple Select Question" });
+		return /* @__PURE__ */ l(k.withComponent(`h${a}`), { children: t === "radio" ? "Multiple Choice Question" : "Multiple Select Question" });
 	}
 	render() {
-		let { mode: t, disabled: n, className: r, choices: i = [], choiceMode: a, gridColumns: o, partLabel: f, prompt: m, responseCorrect: h, teacherInstructions: g, alwaysShowCorrect: y, animationsDisabled: b, language: x, isSelectionButtonBelow: k, minSelections: j, maxSelections: M, autoplayAudioEnabled: N, session: P, customAudioButton: F, options: I, baseHeadingLevel: L } = this.props, { showCorrect: R, maxSelectionsErrorState: z } = this.state, B = t === "evaluate", V = B && !h, H = o > 1 ? { gridTemplateColumns: `repeat(${o}, 1fr)` } : void 0, U = P.value && P.value.length || 0, W = (() => {
+		let { mode: n, disabled: r, className: i, choices: a = [], choiceMode: o, gridColumns: s, partLabel: f, prompt: m, responseCorrect: h, teacherInstructions: g, alwaysShowCorrect: y, animationsDisabled: b, language: x, isSelectionButtonBelow: k, minSelections: j, maxSelections: M, autoplayAudioEnabled: N, session: P, customAudioButton: F, options: I, baseHeadingLevel: L } = this.props, { showCorrect: R, maxSelectionsErrorState: z } = this.state, B = n === "evaluate", V = B && !h, H = s > 1 ? { gridTemplateColumns: `repeat(${s}, 1fr)` } : void 0, U = P.value && P.value.length || 0, W = (() => {
 			if (!L) return;
 			let e = 1;
 			return f && (e += 1), Math.min(6, L + e);
-		})(), G = (e) => e && W ? s(e, W) : e, K = /* @__PURE__ */ c(_, {
+		})(), G = (e) => e && W ? c(e, W) : e, K = /* @__PURE__ */ l(_, {
 			tagName: "div",
 			className: "prompt",
 			defaultClassName: "teacher-instructions",
@@ -168,26 +168,26 @@ var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "
 			lng: x,
 			minSelections: j
 		}) : "", J = this.props.choicesLayout === "grid" ? D : this.props.choicesLayout === "horizontal" ? E : p;
-		return /* @__PURE__ */ l(C, {
+		return /* @__PURE__ */ u(C, {
 			id: "main-container",
-			className: d(r, "multiple-choice"),
+			className: e(i, "multiple-choice"),
 			children: [
-				f && /* @__PURE__ */ c(w, {
+				f && /* @__PURE__ */ l(w, {
 					as: L ? `h${Math.min(6, L + 1)}` : "h2",
 					children: f
 				}),
 				this.renderHeading(),
-				g && /* @__PURE__ */ c(T, { children: b ? K : /* @__PURE__ */ c(v, {
+				g && /* @__PURE__ */ l(T, { children: b ? K : /* @__PURE__ */ l(v, {
 					labels: {
 						hidden: "Show Teacher Instructions",
 						visible: "Hide Teacher Instructions"
 					},
 					children: K
 				}) }),
-				/* @__PURE__ */ l(O, {
-					role: a === "radio" ? "radiogroup" : "group",
+				/* @__PURE__ */ u(O, {
+					role: o === "radio" ? "radiogroup" : "group",
 					children: [
-						/* @__PURE__ */ c(_, {
+						/* @__PURE__ */ l(_, {
 							className: "prompt",
 							defaultClassName: "prompt",
 							prompt: G(m),
@@ -195,15 +195,15 @@ var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "
 							autoplayAudioEnabled: N,
 							customAudioButton: F
 						}),
-						!(I && y) && /* @__PURE__ */ c(u, {
+						!(I && y) && /* @__PURE__ */ l(d, {
 							show: V,
 							toggled: R,
 							onToggle: this.onToggle.bind(this),
 							language: x
 						}),
-						/* @__PURE__ */ c(J, {
+						/* @__PURE__ */ l(J, {
 							style: H,
-							children: i.map((t, r) => /* @__PURE__ */ c(e, {
+							children: a.map((e, n) => /* @__PURE__ */ l(t, {
 								choicesLayout: this.props.choicesLayout,
 								selectedAnswerBackgroundColor: this.props.selectedAnswerBackgroundColor,
 								selectedAnswerStrokeColor: this.props.selectedAnswerStrokeColor,
@@ -211,27 +211,27 @@ var _ = g(a, "PreviewPrompt") || g(x.PreviewPrompt, "PreviewPrompt"), v = g(i, "
 								hoverAnswerBackgroundColor: this.props.hoverAnswerBackgroundColor,
 								hoverAnswerStrokeColor: this.props.hoverAnswerStrokeColor,
 								hoverAnswerStrokeWidth: this.props.hoverAnswerStrokeWidth,
-								gridColumns: o,
-								choice: t,
-								index: r,
-								choicesLength: i.length,
+								gridColumns: s,
+								choice: e,
+								index: n,
+								choicesLength: a.length,
 								showCorrect: R,
 								isEvaluateMode: B,
-								choiceMode: a,
-								disabled: n,
+								choiceMode: o,
+								disabled: r,
 								tagName: this.groupName,
 								onChoiceChanged: this.handleChange,
-								hideTick: t.hideTick,
-								checked: this.getChecked(t),
-								correctness: B ? this.getCorrectness(t) : void 0,
-								displayKey: this.indexToSymbol(r),
+								hideTick: e.hideTick,
+								checked: this.getChecked(e),
+								correctness: B ? this.getCorrectness(e) : void 0,
+								displayKey: this.indexToSymbol(n),
 								isSelectionButtonBelow: k
-							}, `choice-${r}`))
+							}, `choice-${n}`))
 						})
 					]
 				}),
-				a === "checkbox" && U < j && /* @__PURE__ */ c(A, { children: q() }),
-				a === "checkbox" && z && /* @__PURE__ */ c(A, { children: S.t(`translation:multipleChoice:maxSelections_${M === 1 ? "one" : "other"}`, {
+				o === "checkbox" && U < j && /* @__PURE__ */ l(A, { children: q() }),
+				o === "checkbox" && z && /* @__PURE__ */ l(A, { children: S.t(`translation:multipleChoice:maxSelections_${M === 1 ? "one" : "other"}`, {
 					lng: x,
 					maxSelections: M
 				}) })