@pie-element/multiple-choice 13.4.0-beta.0 → 13.4.0-next.13

package/dist/delivery/choice.js

@@ -0,0 +1,106 @@
+import { ChoiceInput as e } from "./choice-input.js";
+import t from "react";
+import n from "prop-types";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import o from "@mui/material/Box";
+//#region src/delivery/choice.tsx
+var s = a(o, { shouldForwardProp: (e) => e !== "noBorder" && e !== "horizontalLayout" })(({ theme: e, noBorder: t, horizontalLayout: n }) => ({
+	paddingTop: e.spacing(2.5),
+	paddingBottom: `calc(${e.spacing(1)} + 2px)`,
+	paddingLeft: `calc(${e.spacing(1)} + 2px)`,
+	paddingRight: `calc(${e.spacing(1)} + 2px)`,
+	borderBottom: t ? "none" : `1px solid ${r.border()}`,
+	...n && {
+		paddingRight: e.spacing(2.5),
+		"& label": { marginRight: e.spacing(1) }
+	}
+})), c = class extends t.Component {
+	static propTypes = {};
+	state = { isHovered: !1 };
+	handleMouseEnter = () => {
+		let { disabled: e, checked: t } = this.props;
+		!e && !t && this.setState({ isHovered: !0 });
+	};
+	handleMouseLeave = () => {
+		this.setState({ isHovered: !1 });
+	};
+	onChange = (e) => {
+		let { disabled: t, onChoiceChanged: n } = this.props;
+		t || n(e);
+	};
+	render() {
+		let { choice: t, index: n, choicesLength: r, showCorrect: a, isEvaluateMode: o, choiceMode: c, disabled: l, checked: u, correctness: d, displayKey: f, choicesLayout: p, gridColumns: m, isSelectionButtonBelow: h, selectedAnswerBackgroundColor: g, selectedAnswerStrokeColor: _, selectedAnswerStrokeWidth: v, hoverAnswerBackgroundColor: y, hoverAnswerStrokeColor: b, hoverAnswerStrokeWidth: x, tagName: S } = this.props, { isHovered: C } = this.state, w = "choice" + (n === r - 1 ? " last" : ""), T = !o || a ? "" : t.feedback, E = {
+			...t,
+			checked: u,
+			choiceMode: c,
+			disabled: l,
+			feedback: T,
+			correctness: d,
+			displayKey: f,
+			index: n,
+			choicesLayout: p,
+			gridColumns: m,
+			onChange: this.onChange,
+			isEvaluateMode: o,
+			isSelectionButtonBelow: h,
+			selectedAnswerStrokeColor: _,
+			selectedAnswerStrokeWidth: v,
+			tagName: S
+		}, D = (e) => {
+			if (!e) return "2px";
+			let t = String(e).trim();
+			return /^\d+(\.\d+)?$/.test(t) ? `${t}px` : t;
+		}, O = _ && _ !== "initial", k = b && b !== "initial", A = "transparent", j = "2px", M = "initial";
+		(O || k) && (u && O ? (A = _, j = v) : C && !l && k && (A = b, j = x)), u && g && g !== "initial" ? M = g : C && !l && y && y !== "initial" && (M = y);
+		let N = O || k, P = N ? {
+			border: `${D(j)} solid ${A}`,
+			borderRadius: "8px"
+		} : {}, F = n === r - 1 || p !== "vertical" || N, I = p === "horizontal";
+		return /* @__PURE__ */ i("div", {
+			className: w,
+			style: {
+				backgroundColor: M === "initial" ? "initial" : M,
+				...P
+			},
+			onMouseEnter: this.handleMouseEnter,
+			onMouseLeave: this.handleMouseLeave,
+			children: /* @__PURE__ */ i(s, {
+				component: "div",
+				noBorder: F,
+				horizontalLayout: I,
+				children: /* @__PURE__ */ i(e, { ...E })
+			})
+		}, n);
+	}
+};
+c.propTypes = {
+	choiceMode: n.oneOf(["radio", "checkbox"]),
+	choice: n.object,
+	disabled: n.bool.isRequired,
+	onChoiceChanged: n.func,
+	index: n.number,
+	choicesLength: n.number,
+	showCorrect: n.bool,
+	isEvaluateMode: n.bool,
+	checked: n.bool,
+	correctness: n.string,
+	displayKey: n.string,
+	choicesLayout: n.oneOf([
+		"vertical",
+		"grid",
+		"horizontal"
+	]),
+	gridColumns: n.string,
+	selectedAnswerBackgroundColor: n.string,
+	selectedAnswerStrokeColor: n.string,
+	selectedAnswerStrokeWidth: n.string,
+	hoverAnswerBackgroundColor: n.string,
+	hoverAnswerStrokeColor: n.string,
+	hoverAnswerStrokeWidth: n.string,
+	tagName: n.string,
+	isSelectionButtonBelow: n.bool
+};
+//#endregion
+export { c as Choice, c as default };

package/dist/delivery/feedback-tick.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/feedback-tick.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare class FeedbackTick extends React.Component {
+    static propTypes: {
+        correctness: PropTypes.Requireable<string>;
+    };
+    constructor(props: any);
+    getIncorrectIcon: () => React.JSX.Element;
+    getCorrectIcon: () => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default FeedbackTick;

package/dist/delivery/feedback-tick.js

@@ -0,0 +1,104 @@
+import e from "react";
+import t from "prop-types";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { styled as a } from "@mui/material/styles";
+import o from "@mui/material/Box";
+import { CSSTransition as s, TransitionGroup as c } from "react-transition-group";
+//#region src/delivery/feedback-tick.tsx
+var l = a(o)({
+	width: "33px",
+	height: "33px",
+	"& svg": {
+		position: "absolute",
+		display: "inline-block",
+		width: "33px",
+		height: "33px",
+		verticalAlign: "middle",
+		"& hide": { display: "none" }
+	}
+}), u = a("svg")({
+	"& .incorrect-fill": { fill: `var(--feedback-incorrect-bg-color, ${n.incorrect()})` },
+	"& .correct-fill": { fill: `var(--feedback-correct-bg-color, ${n.correct()})` }
+}), d = a("div")({
+	position: "relative",
+	"&.feedback-tick-enter": {
+		opacity: "0",
+		left: "-50px"
+	},
+	"&.feedback-tick-enter-active": {
+		opacity: "1",
+		left: "0px",
+		transition: "left 500ms ease-in 200ms, opacity 500ms linear 200ms"
+	},
+	"&.feedback-tick-exit": {
+		opacity: "1",
+		left: "0px"
+	},
+	"&.feedback-tick-exit-active": {
+		opacity: "0",
+		left: "-50px",
+		transition: "left 300ms ease-in, opacity 300ms"
+	}
+}), f = class extends e.Component {
+	static propTypes = { correctness: t.string };
+	constructor(t) {
+		super(t), this.nodeRef = e.createRef();
+	}
+	getIncorrectIcon = () => /* @__PURE__ */ r(u, {
+		preserveAspectRatio: "xMinYMin meet",
+		x: "0px",
+		y: "0px",
+		viewBox: "0 0 44 40",
+		style: { enableBackground: "new 0 0 44 40" },
+		children: /* @__PURE__ */ i("g", { children: [/* @__PURE__ */ r("rect", {
+			x: "11",
+			y: "17.3",
+			transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
+			className: "incorrect-fill",
+			width: "16.6",
+			height: "3.7"
+		}), /* @__PURE__ */ r("rect", {
+			x: "17.4",
+			y: "10.7",
+			transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
+			className: "incorrect-fill",
+			width: "3.7",
+			height: "16.6"
+		})] })
+	}, "1");
+	getCorrectIcon = () => /* @__PURE__ */ r(u, {
+		preserveAspectRatio: "xMinYMin meet",
+		version: "1.1",
+		x: "0px",
+		y: "0px",
+		viewBox: "0 0 44 40",
+		style: { enableBackground: "new 0 0 44 40" },
+		children: /* @__PURE__ */ r("polygon", {
+			className: "correct-fill",
+			points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+		})
+	}, "2");
+	render() {
+		let { correctness: e } = this.props, t = e === "incorrect" ? this.getIncorrectIcon() : e === "correct" ? this.getCorrectIcon() : null;
+		return /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(c, { children: e && /* @__PURE__ */ r(s, {
+			nodeRef: this.nodeRef,
+			classNames: {
+				enter: "feedback-tick-enter",
+				enterActive: "feedback-tick-enter-active",
+				exit: "feedback-tick-exit",
+				exitActive: "feedback-tick-exit-active"
+			},
+			timeout: {
+				enter: 700,
+				exit: 300
+			},
+			children: /* @__PURE__ */ r(d, {
+				ref: this.nodeRef,
+				children: t
+			})
+		}) }) });
+	}
+};
+//#endregion
+export { f as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const isComplete: (session: any, model: any, audioComplete: any, elementContext: any) => boolean;
+export default class MultipleChoice extends HTMLElement {
+    constructor();
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    onShowCorrectToggle(): void;
+    setLangAttribute(): void;
+    set model(s: any);
+    get session(): any;
+    get options(): any;
+    set options(o: any);
+    set baseHeadingLevel(level: any);
+    set includeSrHeading(value: any);
+    set session(s: any);
+    _onChange(data: any): void;
+    _createAudioInfoToast(): HTMLDivElement;
+    connectedCallback(): void;
+    enableKeyboardEvents(): void;
+    _initPlayerObserver(): void;
+    _disconnectPlayerObserver(): void;
+    disconnectedCallback(): void;
+    /**
+     * Handles global keyboard events for selecting or toggling multiple-choice answers.
+     * Maps keys (1-9, 0, a-j, A-J) to choices and updates the session state accordingly.
+     * Ensures valid key presses toggle or select the appropriate choice based on the model.
+     */
+    handleKeyDown(event: any): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,217 @@
+import { exceedsMaxSelections as e } from "./utils.js";
+import t from "./main.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 { debounce as c } from "@pie-element/shared-lodash";
+import l from "debug";
+import { ModelSetEvent as u, SessionChangedEvent as d, createSessionNotifier as f, flushSessionNotifiers as p } from "@pie-element/shared-player-events";
+import { renderMath as m } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+function h(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+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(o, "EnableAudioAutoplayImage") || g(b.EnableAudioAutoplayImage, "EnableAudioAutoplayImage"), v = a, y = v.default, b = y && typeof y == "object" ? y : v, x = l("pie-ui:multiple-choice"), S = (t, n, r, i) => {
+	let { completeAudioEnabled: a } = n || {};
+	if (a && !r && i) {
+		let e = i.querySelector("audio"), t = e && e.closest(".preview-prompt");
+		if (e && t) return !1;
+	}
+	if (!t || !t.value) return !1;
+	let { choiceMode: o, minSelections: s = 1, maxSelections: c } = n || {}, l = t.value.length || 0;
+	return o === "radio" ? !!l : !(l < s || e(l, c));
+};
+function C(e) {
+	let t = e.closest("pie-player") || e.closest("pie-item-player");
+	if (!t) return {
+		baseHeadingLevel: void 0,
+		includeSrHeading: !0
+	};
+	let n = (e, n, r) => {
+		let i = t[e];
+		return i ??= t.getAttribute(n) ?? t.getAttribute(r), i;
+	}, r = n("baseHeadingLevel", "base-heading-level", "baseheadinglevel"), i = parseInt(r, 10), a = Number.isFinite(i) && i >= 1 && i <= 6 ? i : void 0, o = n("includeSrHeading", "include-sr-heading", "includesrheading");
+	return {
+		baseHeadingLevel: a,
+		includeSrHeading: o == null || o !== !1 && o !== "false"
+	};
+}
+function w(e) {
+	let t = C(e);
+	return {
+		baseHeadingLevel: e._baseHeadingLevel === void 0 ? t.baseHeadingLevel : e._baseHeadingLevel,
+		includeSrHeading: e._includeSrHeading === void 0 ? t.includeSrHeading : e._includeSrHeading
+	};
+}
+var T = 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 = c(() => {
+			if (this._model && this._session) {
+				var e = i.createElement(t, {
+					model: this._model,
+					session: this._session,
+					options: this._options,
+					onChoiceChanged: this._onChange.bind(this),
+					onShowCorrectToggle: this.onShowCorrectToggle.bind(this),
+					...w(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(e), this._model.keyboardEventsEnabled === !0 && !this._keyboardEventsEnabled && this.enableKeyboardEvents();
+			} else x("skip");
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		}), this._sessionNotifier = f(this, () => {
+			this.dispatchEvent(new d(this.tagName.toLowerCase(), S(this._session, this._model, this.audioComplete, this)));
+		}), this._dispatchResponseChanged = () => this._sessionNotifier.notify(), this._dispatchModelSet = c(() => {
+			this.dispatchEvent(new u(this.tagName.toLowerCase(), S(this._session, this._model, this.audioComplete, this), this._model !== void 0));
+		}, 50, {
+			leading: !1,
+			trailing: !0
+		});
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), x("render complete - render math"), m(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	onShowCorrectToggle() {
+		m(this);
+	}
+	setLangAttribute() {
+		let e = this._model && typeof this._model.language ? this._model.language : "", t = e ? e.slice(0, 2) : "en";
+		this.setAttribute("lang", t);
+	}
+	set model(e) {
+		this._model = e, this._rerender(), this._audioInitialized = !1, this._dispatchModelSet();
+	}
+	get session() {
+		return this._session;
+	}
+	get options() {
+		return this._options;
+	}
+	set options(e) {
+		this._options = e, this._rerender();
+	}
+	set baseHeadingLevel(e) {
+		this._baseHeadingLevel = e, this._rerender();
+	}
+	set includeSrHeading(e) {
+		this._includeSrHeading = e, this._rerender();
+	}
+	set session(e) {
+		this._session = e, this._rerender(), this._dispatchResponseChanged();
+	}
+	_onChange(e) {
+		r(this._session, this._model.choiceMode, e), this._dispatchResponseChanged(), this._rerender();
+	}
+	_createAudioInfoToast() {
+		let e = document.createElement("div");
+		e.id = "play-audio-info", Object.assign(e.style, {
+			position: "absolute",
+			top: 0,
+			width: "100%",
+			height: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			background: "white",
+			zIndex: "1000",
+			cursor: "pointer"
+		});
+		let t = document.createElement("img");
+		return t.src = _, 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) => {
+			e.forEach((e) => {
+				if (e.type === "childList") {
+					if (this._audioInitialized) return;
+					let e = this.querySelector("audio"), r = e && e.closest(".preview-prompt");
+					if (!this._model) return;
+					let { autoplayAudioEnabled: i, completeAudioEnabled: a } = this._model;
+					if (!i && !a || e && !r || !e) return;
+					let o = this._createAudioInfoToast(), s = this.querySelector("#main-container"), c = () => {
+						this.querySelector("#play-audio-info") && (e.play(), s.removeChild(o)), document.removeEventListener("click", c);
+					};
+					i && setTimeout(() => {
+						e.paused && !this.querySelector("#play-audio-info") ? (s.appendChild(o), document.addEventListener("click", c)) : document.removeEventListener("click", c);
+					}, 500);
+					let l = () => {
+						n(this._session, { audioStartTime: (/* @__PURE__ */ new Date()).getTime() });
+						let t = this.querySelector("#play-audio-info");
+						t && s.removeChild(t), e.removeEventListener("playing", l);
+					};
+					e.addEventListener("playing", l);
+					let u = () => {
+						n(this._session, { audioEndTime: (/* @__PURE__ */ new Date()).getTime() }), this.audioComplete = !0, this._dispatchResponseChanged(), e.removeEventListener("ended", u);
+					};
+					e.addEventListener("ended", u), this._audio = e, this._handlePlaying = l, this._handleEnded = u, this._enableAudio = c, this._audioInitialized = !0, t.disconnect();
+				}
+			});
+		}).observe(this, {
+			childList: !0,
+			subtree: !0
+		});
+	}
+	enableKeyboardEvents() {
+		this._keyboardEventsEnabled ||= (window.addEventListener("keydown", this._boundHandleKeyDown), !0);
+	}
+	_initPlayerObserver() {
+		let e = this.closest("pie-player") || this.closest("pie-item-player");
+		e && (this._playerObserver = new MutationObserver(() => {
+			this._rerender();
+		}), this._playerObserver.observe(e, {
+			attributes: !0,
+			attributeFilter: [
+				"base-heading-level",
+				"baseheadinglevel",
+				"include-sr-heading",
+				"includesrheading"
+			]
+		}));
+	}
+	_disconnectPlayerObserver() {
+		this._playerObserver &&= (this._playerObserver.disconnect(), null);
+	}
+	disconnectedCallback() {
+		p(this), this._disconnectMathObserver(), this._disconnectPlayerObserver(), this._keyboardEventsEnabled &&= (window.removeEventListener("keydown", this._boundHandleKeyDown), !1), document.removeEventListener("click", this._enableAudio), this._audio &&= (this._audio.removeEventListener("playing", this._handlePlaying), this._audio.removeEventListener("ended", this._handleEnded), null), this._root &&= (this._root.unmount(), null);
+	}
+	handleKeyDown(e) {
+		if (!this._model || !this._session) return;
+		let { mode: t } = this._model;
+		if (t !== "gather") return;
+		let n = ((e) => {
+			let t = e >= "1" && e <= "9" ? e - "1" : e === "0" ? 9 : -1, n = /^[a-jA-J]$/.test(e) ? e.toLowerCase().charCodeAt(0) - 97 : -1;
+			return t >= 0 ? t : n;
+		})(e.key);
+		if (n === void 0 || n <= -1 || n >= this._model.choices?.length) return;
+		let r = this._session.value || [], i = this._model.choices[n].value, a = r.includes(i), o = {
+			value: i,
+			selected: this._model.choiceMode === "radio" || !a,
+			selector: "Keyboard"
+		};
+		this._onChange(o);
+	}
+};
+//#endregion
+export { T as default, S as isComplete };

package/dist/delivery/main.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/main.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Requireable<object>;
+        session: PropTypes.Requireable<object>;
+        options: PropTypes.Requireable<object>;
+        onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        extraCSSRules: PropTypes.Requireable<PropTypes.InferProps<{
+            names: PropTypes.Requireable<(string | null | undefined)[]>;
+            rules: PropTypes.Requireable<string>;
+        }>>;
+        baseHeadingLevel: PropTypes.Requireable<number>;
+        includeSrHeading: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {
+        model: {};
+        session: {};
+    };
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,51 @@
+import { MultipleChoice as e } from "./multiple-choice.js";
+import t from "react";
+import n from "prop-types";
+import * as r from "@pie-lib/render-ui";
+import { PreviewLayout as i } from "@pie-lib/render-ui";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/delivery/main.tsx
+function o(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function s(e, t) {
+	return !e || o(e) ? e : o(e.default) ? e.default : t && o(e[t]) ? e[t] : t && o(e[t]?.default) ? e[t].default : e;
+}
+var c = s(i, "PreviewLayout") || s(d.PreviewLayout, "PreviewLayout"), l = r, u = l.default, d = u && typeof u == "object" ? u : l, f = class extends t.Component {
+	static propTypes = {
+		model: n.object,
+		session: n.object,
+		options: n.object,
+		onChoiceChanged: n.func,
+		onShowCorrectToggle: n.func,
+		extraCSSRules: n.shape({
+			names: n.arrayOf(n.string),
+			rules: n.string
+		}),
+		baseHeadingLevel: n.number,
+		includeSrHeading: n.bool
+	};
+	static defaultProps = {
+		model: {},
+		session: {}
+	};
+	render() {
+		let { model: t, onChoiceChanged: n, session: r, onShowCorrectToggle: i, options: o, baseHeadingLevel: s, includeSrHeading: l } = this.props, { extraCSSRules: u, fontSizeFactor: d } = t;
+		return /* @__PURE__ */ a(c, {
+			extraCSSRules: u,
+			fontSizeFactor: d,
+			classes: {},
+			children: /* @__PURE__ */ a(e, {
+				...t,
+				options: o,
+				session: r,
+				onChoiceChanged: n,
+				onShowCorrectToggle: i,
+				baseHeadingLevel: s,
+				includeSrHeading: l
+			})
+		});
+	}
+};
+//#endregion
+export { f as default };

package/dist/delivery/multiple-choice.d.ts

@@ -0,0 +1,61 @@
+/**
+ * @synced-from pie-elements/packages/multiple-choice/src/multiple-choice.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class MultipleChoice extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        choiceMode: PropTypes.Requireable<string>;
+        keyMode: PropTypes.Requireable<string>;
+        choices: PropTypes.Requireable<any[]>;
+        partLabel: PropTypes.Requireable<string>;
+        prompt: PropTypes.Requireable<string>;
+        teacherInstructions: PropTypes.Requireable<string>;
+        session: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        onChoiceChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        responseCorrect: PropTypes.Requireable<boolean>;
+        correctResponse: PropTypes.Requireable<any[]>;
+        choicesLayout: PropTypes.Requireable<string>;
+        gridColumns: PropTypes.Requireable<string>;
+        alwaysShowCorrect: PropTypes.Requireable<boolean>;
+        animationsDisabled: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        selectedAnswerBackgroundColor: PropTypes.Requireable<string>;
+        selectedAnswerStrokeColor: PropTypes.Requireable<string>;
+        selectedAnswerStrokeWidth: PropTypes.Requireable<string>;
+        hoverAnswerBackgroundColor: PropTypes.Requireable<string>;
+        hoverAnswerStrokeColor: PropTypes.Requireable<string>;
+        hoverAnswerStrokeWidth: PropTypes.Requireable<string>;
+        onShowCorrectToggle: PropTypes.Requireable<(...args: any[]) => any>;
+        isSelectionButtonBelow: PropTypes.Requireable<boolean>;
+        minSelections: PropTypes.Requireable<number>;
+        maxSelections: PropTypes.Requireable<number>;
+        autoplayAudioEnabled: PropTypes.Requireable<boolean>;
+        customAudioButton: {
+            playImage: PropTypes.Requireable<string>;
+            pauseImage: PropTypes.Requireable<string>;
+        };
+        options: PropTypes.Requireable<object>;
+        baseHeadingLevel: PropTypes.Requireable<number>;
+        includeSrHeading: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    isSelected(value: any): any;
+    handleChange: any;
+    onToggle: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    indexToSymbol(index: any): string;
+    getCorrectness: any;
+    getChecked(choice: any): any;
+    renderHeading(): React.JSX.Element | null;
+    render(): React.JSX.Element;
+}
+export default MultipleChoice;