@pie-element/math-inline 12.1.1-next.39 → 12.1.1-next.42

package/dist/delivery/main.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/math-inline/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';
+export declare class Main extends React.Component {
+    static propTypes: {
+        session: PropTypes.Validator<object>;
+        onSessionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    UNSAFE_componentWillMount(): void;
+    handleAnswerBlockDomUpdate: any;
+    countResponseOccurrences(expression: any): any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    updateAria: any;
+    focusFirstKeypadElement: any;
+    handleKeyDown: any;
+    onSubFieldFocus: any;
+    cleanupKeyDownListener: any;
+    componentWillUnmount(): void;
+    onDone: any;
+    onSimpleResponseChange: any;
+    toNodeData: any;
+    setInput: any;
+    onClick: any;
+    callOnSessionChange: any;
+    toggleShowCorrect: any;
+    subFieldChanged: any;
+    getFieldName: any;
+    onBlur: any;
+    setTooltipRef(ref: any): void;
+    render(): React.JSX.Element | null;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,606 @@
+import { ResponseTypes as e } from "./utils.js";
+import { SimpleQuestionBlock as t } from "./simple-question-block.js";
+import n from "react";
+import r from "prop-types";
+import i from "@pie-lib/correct-answer-toggle";
+import { HorizontalKeypad as a, applyStaticMath as o, mq as s, registerEmbed as c, updateSpans as l } from "@pie-lib/math-input";
+import * as u from "@pie-lib/render-ui";
+import { Collapsible as d, Feedback as f, PreviewPrompt as p, Readable as m, UiLayout as h, color as g, hasMedia as _, hasText as v } from "@pie-lib/render-ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { renderMath as x } from "@pie-element/shared-math-rendering-mathjax";
+import { styled as S } from "@mui/material/styles";
+import C from "@mui/material/Tooltip";
+import { isEmpty as ee, isEqual as w } from "@pie-element/shared-lodash";
+import T from "@pie-lib/translator";
+import E from "react-dom";
+//#region src/delivery/main.tsx
+function D(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function O(e, t) {
+	return !e || D(e) ? e : D(e.default) ? e.default : t && D(e[t]) ? e[t] : t && D(e[t]?.default) ? e[t].default : e;
+}
+var k = O(h, "UiLayout") || O(P.UiLayout, "UiLayout"), A = O(p, "PreviewPrompt") || O(P.PreviewPrompt, "PreviewPrompt"), te = O(m, "Readable") || O(P.Readable, "Readable"), j = O(d, "Collapsible") || O(P.Collapsible, "Collapsible"), ne = O(f, "Feedback") || O(P.Feedback, "Feedback"), M = u, N = M.default, P = N && typeof N == "object" ? N : M, { translator: F } = T, I = !1, L = /\\newline/g, R = /{{response}}/gm, re = 6, z = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function ie(e = []) {
+	return e.map((e) => ({
+		name: e,
+		latex: e,
+		write: e,
+		label: e
+	}));
+}
+function B(e, t) {
+	let n = e;
+	for (; n !== null;) {
+		if (t && n === t) return !0;
+		n = n.parentNode;
+	}
+	return !1;
+}
+function ae(e = [], t) {
+	return Math.floor(e.length / 5) * 30 + (t === "miscellaneous" ? 600 : 500);
+}
+function oe(e, t) {
+	let { config: n, disabled: r } = e || {}, { expression: i, responses: a, printMode: o, alwaysShowCorrect: s } = n || {};
+	if (n && i) {
+		let e = i;
+		if (t.showCorrect) return a && a.length && a[0].answer;
+		let n = 1;
+		return (e || "").replace(R, function() {
+			let e = t.session.answers[`r${n}`];
+			if (o && !s) {
+				let e = "\\ \\ ".repeat(30) + "\\newline ";
+				return `\\MathQuillMathField[r${n++}]{${e.repeat(3)}}`;
+			}
+			return r ? `\\embed{answerBlock}[r${n++}]` : `\\MathQuillMathField[r${n++}]{${e && e.value || ""}}`;
+		}).replace(L, "\\embed{newLine}[]");
+	}
+}
+function V(e, t) {
+	let n = {};
+	if (t.config && t.config.expression) {
+		let r = 1;
+		(t.config.expression || "").replace(R, () => {
+			n[`r${r}`] = { value: e && e.answers && e.answers[`r${r}`] && e.answers[`r${r}`].value || "" }, r += 1;
+		});
+	}
+	return n;
+}
+var H = class extends n.Component {
+	static propTypes = {
+		session: r.object.isRequired,
+		onSessionChange: r.func,
+		model: r.object.isRequired
+	};
+	constructor(e) {
+		super(e);
+		let { model: t, session: r } = e, i = V(r, t);
+		this.state = {
+			session: {
+				...e.session,
+				answers: i
+			},
+			activeAnswerBlock: "",
+			showCorrect: this.props.model.config.alwaysShowCorrect || !1,
+			tooltipContainerRef: n.createRef()
+		};
+	}
+	UNSAFE_componentWillMount() {
+		typeof window < "u" && (I ||= (c("answerBlock", (e) => {
+			let t = U();
+			return {
+				htmlString: `<div class="${t.blockContainer}">
+                <div class="${t.blockResponse}" id="${e}Index">R</div>
+                <div class="${t.blockMath}">
+                  <span id="${e}"></span>
+                </div>
+              </div>`,
+				text: () => "text",
+				latex: () => `\\embed{answerBlock}[${e}]`
+			};
+		}), !0));
+	}
+	handleAnswerBlockDomUpdate = () => {
+		let { model: e } = this.props, { session: t, showCorrect: n } = this.state, r = t.answers;
+		this.root && e.disabled && !n && Object.keys(r).forEach((t) => {
+			let n = this.root.querySelector(`#${t}`), i = this.root.querySelector(`#${t}Index`);
+			if (n) {
+				let a = r[t];
+				o(n, a && a.value || ""), e.view && (n.parentElement.parentElement.classList.remove("correct"), n.parentElement.parentElement.classList.remove("incorrect")), i.textContent = "R";
+			}
+		}), x(this.root);
+	};
+	countResponseOccurrences(e) {
+		let t = e?.match(/\{\{response\}\}/g);
+		return t ? t.length : 0;
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		let { config: t } = this.props.model, { config: n = {} } = e.model || {}, { session: r } = this.props, { session: i = {} } = e || {};
+		if (r && i && !w(r.answers, i.answers) && this.setState({ session: {
+			...i,
+			answers: V(i, this.props.model)
+		} }), t.note && t.language && t.language !== n.language && t.note === F.t("mathInline.primaryCorrectWithAlternates", { lng: t.language }) && (t.note = F.t("mathInline.primaryCorrectWithAlternates", { lng: n.language })), (t.env && t.env.mode !== "evaluate" || n.env && n.env.mode !== "evaluate") && this.setState({
+			...this.state.session,
+			showCorrect: !1
+		}), n.alwaysShowCorrect && this.setState({ showCorrect: !0 }), this.countResponseOccurrences(t.expression) < this.countResponseOccurrences(n.expression) && setTimeout(() => this.updateAria(), 100), t && t.responses && t.responses.length !== n.responses.length || !t && n && n.responses || t && n && t.expression !== n.expression) {
+			let e = {}, t = this.state.session.answers, r = 1;
+			(n.expression || "").replace(R, () => {
+				e[`r${r}`] = { value: t && t[`r${r}`] && t[`r${r}`].value || "" }, r++;
+			}), this.setState((t) => ({ session: {
+				...t.session,
+				completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+				answers: e
+			} }), this.handleAnswerBlockDomUpdate);
+		}
+	}
+	shouldComponentUpdate(e, t) {
+		let n = w(this.props.model, e.model), r = w(this.state, t);
+		return !n || !r;
+	}
+	componentDidMount() {
+		this.handleAnswerBlockDomUpdate(), this.updateAria(), setTimeout(() => x(this.root), 100);
+	}
+	componentDidUpdate(e, t) {
+		this.handleAnswerBlockDomUpdate(), e.model?.config?.responseType !== this.props.model?.config?.responseType && this.updateAria();
+	}
+	updateAria = () => {
+		this.root && (this.root.querySelectorAll(".mq-selectable").forEach((e) => e.setAttribute("aria-hidden", "true")), this.root.querySelectorAll("textarea").forEach((e, t) => {
+			e.setAttribute("aria-label", "Enter answer.");
+			let n = `instructions-${t}`, r = e.closest(".mq-textarea");
+			if (r) {
+				let t = r.querySelector(`#${n}`);
+				t || (t = document.createElement("span"), t.id = n, t.className = "sr-only", t.textContent = "This field supports both keypad and keyboard input. Use the keyboard to access and interact with the on-screen math keypad, which accepts LaTeX markup. Use the down arrow key to open the keypad and navigate its buttons. Use the escape key to close the keypad and return to the input field.", r.insertBefore(t, e)), e.setAttribute("aria-describedby", n);
+			}
+		}));
+	};
+	focusFirstKeypadElement = () => {
+		setTimeout(() => {
+			let e = document.querySelector("[data-keypad]");
+			if (e) {
+				let t = e.querySelector("button, [role='button']");
+				t && t.focus();
+			}
+		}, 0);
+	};
+	handleKeyDown = (e, t) => {
+		let n = B(e.target, this.root), r = this.mqStatic && this.mqStatic.inputRef?.current ? this.mqStatic.inputRef?.current.contains(document.activeElement) : document.activeElement?.getAttribute("aria-label") === "Enter answer.", { key: i, type: a } = e;
+		r && (i === "ArrowDown" || a === "click" || a === "touchstart") ? this.state.activeAnswerBlock !== t && n && (this.cleanupKeyDownListener(), this.setState({ activeAnswerBlock: t }, () => {
+			this.onSubFieldFocus(t), i === "ArrowDown" && this.focusFirstKeypadElement();
+		})) : e.key === "Escape" && this.setState({ activeAnswerBlock: "" });
+	};
+	onSubFieldFocus = (e) => {
+		this.handleEvent || (this.handleEvent = (t) => {
+			this.handleKeyDown(t, e);
+		}, document.addEventListener("keydown", this.handleEvent), document.addEventListener("click", this.handleEvent), document.addEventListener("touchstart", this.handleEvent));
+	};
+	cleanupKeyDownListener = () => {
+		this.handleEvent &&= (document.removeEventListener("keydown", this.handleEvent), document.removeEventListener("click", this.handleEvent), document.removeEventListener("touchstart", this.handleEvent), null);
+	};
+	componentWillUnmount() {
+		this.cleanupKeyDownListener && this.cleanupKeyDownListener();
+	}
+	onDone = () => {};
+	onSimpleResponseChange = (e) => {
+		this.setState((t) => ({ session: {
+			...t.session,
+			response: e
+		} }), this.callOnSessionChange);
+	};
+	toNodeData = (e) => {
+		if (!e) return;
+		let { type: t, value: n } = e;
+		return t === "command" || t === "cursor" ? e : t === "answer" ? {
+			type: "answer",
+			...e
+		} : n === "clear" ? { type: "clear" } : {
+			type: "write",
+			value: n
+		};
+	};
+	setInput = (e) => {
+		this.input = e;
+	};
+	onClick = (e) => {
+		let t = window.scrollX, n = window.scrollY, r = this.toNodeData(e);
+		r.type === "clear" ? this.input.clear() : r.type === "command" ? Array.isArray(r.value) ? r.value.forEach((e) => {
+			this.input.cmd(e);
+		}) : this.input.cmd(r.value) : r.type === "cursor" ? this.input.keystroke(r.value) : this.input.write(r.value), this.input.focus(), requestAnimationFrame(() => {
+			window.scrollTo(t, n), requestAnimationFrame(() => window.scrollTo(t, n));
+		});
+	};
+	callOnSessionChange = () => {
+		let { onSessionChange: e } = this.props;
+		e && e(this.state.session);
+	};
+	toggleShowCorrect = (e) => {
+		this.setState({ showCorrect: e }, this.handleAnswerBlockDomUpdate);
+	};
+	subFieldChanged = (e, t) => {
+		if (l(), e) {
+			let n = window.scrollX, r = window.scrollY;
+			this.setState((n) => ({ session: {
+				...n.session,
+				completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+				answers: {
+					...n.session.answers,
+					[e]: { value: t }
+				}
+			} }), () => {
+				this.callOnSessionChange(), requestAnimationFrame(() => {
+					window.scrollTo(n, r);
+				});
+			});
+		}
+	};
+	getFieldName = (e, t) => {
+		let { answers: n } = this.state.session;
+		if (Object.keys(n || {}).length) return Object.keys(n).find((n) => {
+			let r = t[n];
+			return r && r.id == e.id;
+		});
+	};
+	onBlur = (e) => {
+		let { relatedTarget: t, currentTarget: n } = e || {}, r = n && n.closest("[role=tooltip]");
+		function i(e, t = 0) {
+			if (!e || t >= 16) return null;
+			let n = e.offsetParent;
+			return n ? n.getAttribute("role") === "tooltip" ? n : i(n, t + 1) : null;
+		}
+		function a(e, t = 0) {
+			if (!e || t >= 4) return null;
+			let n = e?.children?.[0];
+			return n ? n.attributes && n.attributes["data-keypad"] ? n : a(n, t + 1) : null;
+		}
+		let o = i(t), s = o ? a(o) : null;
+		(!t || !n || !s?.attributes["data-keypad"]) && (r || this.setState({ activeAnswerBlock: "" }));
+	};
+	setTooltipRef(e) {
+		setTimeout(() => {
+			if (e && z) {
+				let e = document.querySelector("[role='tooltip']");
+				e && e.firstChild.setAttribute("tabindex", "-1");
+			}
+		}, 1);
+	}
+	render() {
+		let { model: n } = this.props, { activeAnswerBlock: r, showCorrect: i, session: o, tooltipContainerRef: c } = this.state, { config: l, correctness: u, disabled: d, extraCSSRules: f, view: p, teacherInstructions: m, rationale: h, feedback: x, animationsDisabled: S, printMode: w, alwaysShowCorrect: T, language: D } = n || {};
+		if (!l) return null;
+		let { showNote: O, note: k, prompt: M, responses: N, responseType: P, equationEditor: I, customKeys: L, id: R, env: { mode: z, role: B } = {} } = l || {}, V = (i || z === "view" && B === "instructor") && O && k, H = ee(N), U = !H && u && u.correctness !== "correct", ge = d && u, q = ie(L), J = u && u.correct, Y = oe(n, this.state) || "", X = d && !u, _e = w && !T, Z = h && (v(h) || _(h)), Q = m && (v(m) || _(m)), ve = /* @__PURE__ */ y(pe, { children: /* @__PURE__ */ y(s.Static, {
+			className: "static-math",
+			ref: (e) => {
+				e && (this.mqStatic = e);
+			},
+			latex: Y,
+			onSubFieldChange: this.subFieldChanged,
+			getFieldName: this.getFieldName,
+			setInput: this.setInput,
+			onSubFieldFocus: this.onSubFieldFocus,
+			onBlur: this.onBlur
+		}) }), $ = /* @__PURE__ */ b(G, { children: [
+			z === "gather" && /* @__PURE__ */ y(me, { children: "Math Equation Response Question" }),
+			X && Q && (S ? /* @__PURE__ */ y("div", { dangerouslySetInnerHTML: { __html: m } }) : /* @__PURE__ */ y(K, {
+				labels: {
+					hidden: "Show Teacher Instructions",
+					visible: "Hide Teacher Instructions"
+				},
+				children: /* @__PURE__ */ y("div", { dangerouslySetInnerHTML: { __html: m } })
+			})),
+			M && /* @__PURE__ */ y(ce, { children: /* @__PURE__ */ y(A, { prompt: M }) }),
+			_e ? ve : /* @__PURE__ */ y(te, {
+				false: !0,
+				children: /* @__PURE__ */ b(fe, {
+					tabIndex: 0,
+					children: [P === e.simple && /* @__PURE__ */ y(t, {
+						onSimpleResponseChange: this.onSimpleResponseChange,
+						showCorrect: i,
+						emptyResponse: H,
+						model: n,
+						session: o,
+						onSubFieldFocus: this.onSubFieldFocus,
+						showKeypad: !!r
+					}), P === e.advanced && /* @__PURE__ */ y(de, {
+						ref: c,
+						isIncorrect: !H && !J && !i,
+						isCorrect: !H && (J || i),
+						showCorrectness: !H && d && u && !p,
+						correctAnswerShown: i,
+						printCorrect: w && T,
+						children: /* @__PURE__ */ y(C, {
+							ref: (e) => this.setTooltipRef(e),
+							enterTouchDelay: 0,
+							interactive: !0,
+							open: !!r,
+							slotProps: {
+								popper: {
+									container: c?.current || void 0,
+									placement: "bottom-start",
+									sx: {
+										backgroundColor: "transparent",
+										width: "650px",
+										opacity: 1,
+										"& .MuiTooltip-arrow": { display: "none" }
+									},
+									modifiers: [
+										{
+											name: "offset",
+											options: { offset: [0, 8] }
+										},
+										{
+											name: "preventOverflow",
+											enabled: !0,
+											options: {
+												boundary: "viewport",
+												padding: 8
+											}
+										},
+										{
+											name: "computeStyles",
+											options: {
+												adaptive: !0,
+												gpuAcceleration: !0
+											}
+										},
+										{
+											name: "flip",
+											enabled: !1
+										}
+									]
+								},
+								tooltip: { sx: {
+									fontSize: "initial",
+									backgroundColor: "transparent",
+									width: "600px",
+									marginTop: 0,
+									paddingTop: 0,
+									boxShadow: "none"
+								} }
+							},
+							title: Object.keys(o.answers).map((e) => e === r && !(i || d) && /* @__PURE__ */ y(ue, {
+								"data-keypad": !0,
+								style: { width: ae(q, I) },
+								children: /* @__PURE__ */ y(a, {
+									additionalKeys: q,
+									mode: I || re,
+									onClick: this.onClick
+								})
+							}, e) || null),
+							children: /* @__PURE__ */ y("div", { children: /* @__PURE__ */ y(s.Static, {
+								className: "static-math",
+								ref: (e) => {
+									e && (this.mqStatic = e);
+								},
+								latex: Y,
+								onSubFieldChange: this.subFieldChanged,
+								getFieldName: this.getFieldName,
+								setInput: this.setInput,
+								onSubFieldFocus: this.onSubFieldFocus,
+								onBlur: this.onBlur
+							}) })
+						})
+					})]
+				})
+			}),
+			X && V && /* @__PURE__ */ y(le, { dangerouslySetInnerHTML: { __html: `<strong>Note:</strong> ${k}` } }),
+			X && Z && (S ? /* @__PURE__ */ y("div", { dangerouslySetInnerHTML: { __html: h } }) : /* @__PURE__ */ y(j, {
+				labels: {
+					hidden: "Show Rationale",
+					visible: "Hide Rationale"
+				},
+				children: /* @__PURE__ */ y("div", { dangerouslySetInnerHTML: { __html: h } })
+			}))
+		] });
+		return ge && (U || Q || Z || x) ? /* @__PURE__ */ y(W, {
+			extraCSSRules: f,
+			ref: (e) => {
+				let t = E.findDOMNode(e);
+				this.root = t || this.root;
+			},
+			children: /* @__PURE__ */ y(se, {
+				interactive: !0,
+				enterTouchDelay: 0,
+				placement: "bottom-start",
+				slotProps: {
+					tooltip: { sx: (e) => ({
+						background: `${g.primaryLight()} !important`,
+						color: g.text(),
+						padding: e.spacing(2),
+						border: `1px solid ${g.secondary()}`,
+						fontSize: "16px",
+						"& :not(.MathJax) > table tr": { "&:nth-child(2n)": { backgroundColor: "unset !important" } }
+					}) },
+					popper: {
+						sx: { opacity: 1 },
+						modifiers: [{
+							name: "offset",
+							options: { offset: [0, 2] }
+						}]
+					}
+				},
+				title: /* @__PURE__ */ b("div", { children: [
+					/* @__PURE__ */ y(G, { children: U && /* @__PURE__ */ y(he, {
+						language: D,
+						show: !0,
+						toggled: i,
+						onToggle: this.toggleShowCorrect
+					}) }),
+					Q && /* @__PURE__ */ y(K, {
+						labels: {
+							hidden: "Show Teacher Instructions",
+							visible: "Hide Teacher Instructions"
+						},
+						children: /* @__PURE__ */ y(A, { prompt: m })
+					}, "collapsible-teacher-instructions"),
+					V && v(k) && /* @__PURE__ */ y(K, {
+						labels: {
+							hidden: F.t("common:showNote", { lng: D }),
+							visible: F.t("common:hideNote", { lng: D })
+						},
+						children: /* @__PURE__ */ y(A, { prompt: k })
+					}, "collapsible-note"),
+					Z && /* @__PURE__ */ y(K, {
+						labels: {
+							hidden: "Show Rationale",
+							visible: "Hide Rationale"
+						},
+						children: /* @__PURE__ */ y(A, { prompt: h })
+					}, "collapsible-rationale"),
+					x && /* @__PURE__ */ y(ne, {
+						correctness: u.correctness,
+						feedback: x
+					})
+				] }),
+				children: $
+			})
+		}) : /* @__PURE__ */ y(W, {
+			id: R,
+			extraCSSRules: f,
+			ref: (e) => {
+				let t = E.findDOMNode(e);
+				this.root = t || this.root;
+			},
+			children: $
+		});
+	}
+}, U = () => ({
+	blockContainer: "block-container",
+	blockResponse: "block-response",
+	blockMath: "block-math"
+});
+if (typeof document < "u") {
+	let e = "math-inline-block-styles";
+	if (!document.getElementById(e)) {
+		let t = document.createElement("style");
+		t.id = e, t.textContent = `
+      .block-container {
+        margin: 8px !important;
+        display: inline-flex;
+        border: 2px solid grey !important;
+      }
+      .block-response {
+        color: grey;
+        background: #f5f5f5;
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: auto;
+      }
+      .block-math {
+        color: ${g.text()};
+        background-color: ${g.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .sr-only {
+        position: absolute;
+        left: -10000px;
+        top: auto;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+      .static-math > .mq-root-block > .mq-editable-field {
+        border-color: ${g.text()};
+      }
+    `, document.head.appendChild(t);
+	}
+}
+var W = S(k)(() => ({
+	color: g.text(),
+	backgroundColor: g.background(),
+	display: "inline-block"
+})), se = S(C)({}), ce = S("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), G = S("div")({
+	width: "100%",
+	position: "relative",
+	backgroundColor: g.background(),
+	color: g.text()
+}), le = S("div")(({ theme: e }) => ({ paddingBottom: e.spacing(2) })), K = S(j)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), ue = S("div")(({ theme: e }) => ({
+	zIndex: 10,
+	minWidth: "400px",
+	marginTop: e.spacing(2)
+})), de = S("div", { shouldForwardProp: (e) => ![
+	"isIncorrect",
+	"isCorrect",
+	"showCorrectness",
+	"correctAnswerShown",
+	"printCorrect"
+].includes(e) })(({ theme: e, isIncorrect: t, isCorrect: n, showCorrectness: r, correctAnswerShown: i, printCorrect: a }) => {
+	let o = t ? g.incorrect() : n ? g.correct() : void 0;
+	return {
+		maxWidth: "fit-content",
+		padding: e.spacing(.25),
+		...r && { border: o ? `2px solid ${o} !important` : "2px solid" },
+		...!r && o && { borderColor: `${o} !important` },
+		...i && {
+			padding: e.spacing(1),
+			letterSpacing: "0.5px"
+		},
+		...a && { border: `2px solid ${g.correct()} !important` },
+		"& .mq-math-mode": {
+			"& .mq-root-block": {
+				paddingRight: "0 !important",
+				paddingLeft: "0 !important",
+				"& .mq-editable-field": {
+					minWidth: "10px",
+					padding: e.spacing(.4)
+				}
+			},
+			"& sup": { top: 0 }
+		}
+	};
+}), fe = S("div")({
+	position: "relative",
+	"& .mq-overarrow-inner": {
+		border: "none !important",
+		padding: "0 !important"
+	},
+	"& .mq-overarrow-inner-right": { display: "none !important" },
+	"& .mq-overarrow-inner-left": { display: "none !important" },
+	"& .mq-overarrow.mq-arrow-both": {
+		minWidth: "1.23em",
+		"& *": { lineHeight: "1 !important" },
+		"&:before": {
+			top: "-0.4em",
+			left: "-1px"
+		},
+		"&:after": {
+			top: "-2.4em",
+			right: "-1px"
+		},
+		"&.mq-empty:after": { top: "-0.45em" }
+	},
+	"& .mq-overarrow.mq-arrow-right": { "&:before": {
+		top: "-0.4em",
+		right: "-1px"
+	} },
+	"& .mq-longdiv-inner": {
+		borderTop: "1px solid !important",
+		paddingTop: "1.5px !important"
+	},
+	"& .mq-parallelogram": { lineHeight: .85 }
+}), pe = S("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	pointerEvents: "none"
+})), me = S("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), he = S(i)(({ theme: e }) => ({
+	color: g.text(),
+	marginBottom: e.spacing(2)
+}));
+//#endregion
+export { H as Main, H as default };

package/dist/delivery/simple-question-block.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/math-inline/src/simple-question-block.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 SimpleQuestionBlock extends React.Component {
+    static propTypes: {
+        onSimpleResponseChange: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+        emptyResponse: PropTypes.Requireable<boolean>;
+        session: PropTypes.Validator<object>;
+        showCorrect: PropTypes.Requireable<boolean>;
+        onSubFieldFocus: PropTypes.Validator<(...args: any[]) => any>;
+        showKeypad: PropTypes.Validator<boolean>;
+    };
+    constructor(props: any);
+    mathToolBarContainsTarget: (e: any) => boolean;
+    handleClick: any;
+    onFocus: any;
+    render(): React.JSX.Element | undefined;
+}
+export default SimpleQuestionBlock;