@pie-element/math-templated 0.1.0

package/dist/delivery/index.js

@@ -0,0 +1,51 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/debounce.js";
+import t from "./main.js";
+import n from "react";
+import { createRoot as r } from "react-dom/client";
+import { ModelSetEvent as i, SessionChangedEvent as a } from "@pie-element/shared-player-events";
+//#region src/delivery/index.ts
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this.sessionChangedEventCaller = e(() => {
+			this.dispatchEvent(new a(this.tagName.toLowerCase(), !0));
+		}, 1e3);
+	}
+	set model(e) {
+		this._model = e, this.render(), this.dispatchEvent(new i(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== void 0));
+	}
+	get model() {
+		return this._model;
+	}
+	set session(e) {
+		this._session = e, this.render();
+	}
+	get session() {
+		return this._session;
+	}
+	isSessionComplete() {
+		return !0;
+	}
+	onSessionChange(e) {
+		Object.keys(e).map((t) => {
+			this._session[t] = e[t];
+		}), this.sessionChangedEventCaller(), this.render();
+	}
+	connectedCallback() {
+		this.render();
+	}
+	render() {
+		if (!(!this._model || !this._session) && this._model && this._session) {
+			let e = n.createElement(t, {
+				model: this._model,
+				session: this._session,
+				onSessionChange: this.onSessionChange.bind(this)
+			});
+			this._root ||= r(this), this._root.render(e);
+		}
+	}
+	disconnectedCallback() {
+		this._root && this._root.unmount();
+	}
+};
+//#endregion
+export { o as default };

package/dist/delivery/main.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @synced-from pie-elements/packages/math-templated/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 getResponseKey: (response: any) => any;
+    static propTypes: {
+        session: PropTypes.Validator<object>;
+        onSessionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    handleAnswerBlockDomUpdate: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    shouldComponentUpdate(nextProps: any, nextState: any): boolean;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    onSubFieldFocus: any;
+    toNodeData: any;
+    setInput: any;
+    onClick: any;
+    callOnSessionChange: any;
+    toggleShowCorrect: any;
+    subFieldChanged: any;
+    getFieldName: any;
+    onBlur: any;
+    setTooltipRef(ref: any): void;
+    renderTeacherInstructions: any;
+    renderRationale: any;
+    renderPlayerContent: any;
+    render(): React.JSX.Element;
+}
+export default Main;
+//# sourceMappingURL=main.d.ts.map

package/dist/delivery/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/delivery/main.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAmRnC,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS;IAEvC,MAAM,CAAC,cAAc,GAAI,aAAQ,SAAgE;IAEjG,MAAM,CAAC,SAAS;;;;MAId;gBAEU,KAAK,KAAA;IAyCjB,0BAA0B,EAAE,GAAG,CA8B7B;IAEF,gCAAgC,CAAC,SAAS,KAAA;IA+C1C,qBAAqB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA;IAO1C,iBAAiB;IAKjB,kBAAkB;IAIlB,eAAe,EAAE,GAAG,CAElB;IAEF,UAAU,EAAE,GAAG,CAcb;IAEF,QAAQ,EAAE,GAAG,CAEX;IAEF,OAAO,EAAE,GAAG,CAoBV;IAEF,mBAAmB,EAAE,GAAG,CAMtB;IAEF,iBAAiB,EAAE,GAAG,CAEpB;IAEF,eAAe,EAAE,GAAG,CAiBlB;IAEF,YAAY,EAAE,GAAG,CAYf;IAEF,MAAM,EAAE,GAAG,CAuCT;IAGF,aAAa,CAAC,GAAG,KAAA;IAcjB,yBAAyB,EAAE,GAAG,CAuB5B;IAEF,eAAe,EAAE,GAAG,CAiBlB;IAEF,mBAAmB,EAAE,GAAG,CAsHtB;IAEF,MAAM;CAsDP;AAED,eAAe,IAAI,CAAC"}

package/dist/delivery/main.js

@@ -0,0 +1,538 @@
+import e from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isEmpty.js";
+import t from "../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isEqual.js";
+import n from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import a from "@mui/material/Tooltip";
+import { HorizontalKeypad as o, mq as s, updateSpans as c } from "@pie-lib/math-input";
+import { Collapsible as l, PreviewPrompt as u, Readable as d, UiLayout as f, color as p, hasMedia as m, hasText as h } from "@pie-lib/render-ui";
+import { renderMath as g } from "@pie-element/shared-math-rendering-mathjax";
+import { Customizable as _ } from "@pie-lib/mask-markup";
+import v from "@pie-lib/correct-answer-toggle";
+import y from "react-dom";
+import b from "@pie-framework/mathquill";
+import { jsxDEV as x } from "react/jsx-dev-runtime";
+//#region src/delivery/main.tsx
+var S = "/Users/eelco.hillenius/dev/prj/pie/pie-elements-ng/packages/elements-react/math-templated/src/delivery/main.tsx", C = i(f)({
+	color: p.text(),
+	backgroundColor: p.background(),
+	display: "inline-block"
+}), w = i("div")({
+	width: "100%",
+	position: "relative",
+	backgroundColor: p.background(),
+	color: p.text()
+}), T = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), E = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), D = i("div")({
+	position: "relative",
+	"& > div > div": {
+		display: "flex",
+		alignItems: "baseline",
+		flexWrap: "wrap"
+	},
+	"& .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 }
+}), O = i("div")(({ theme: e, $incorrect: t, $correct: n, $showCorrectness: r, $correctAnswerShown: i }) => ({
+	maxWidth: "fit-content",
+	...t && { borderColor: `${p.incorrect()} !important` },
+	...n && { borderColor: `${p.correct()} !important` },
+	...r && { border: "2px solid" },
+	...i && {
+		padding: e.spacing(1),
+		letterSpacing: "0.5px"
+	},
+	"& > .mq-math-mode": {
+		"& > .mq-root-block": { "& > .mq-editable-field": {
+			minWidth: "10px",
+			padding: e.spacing(.25)
+		} },
+		"& sup": { top: 0 }
+	}
+})), k = i(s.Static)({ "& > .mq-root-block": { "& > .mq-editable-field": { borderColor: p.text() } } }), A = i("div")(({ theme: e }) => ({
+	zIndex: 10,
+	minWidth: "400px",
+	marginTop: e.spacing(2)
+})), j = i("div")(({ theme: e }) => ({
+	marginBottom: e.spacing(1),
+	pointerEvents: "none"
+})), M = i("h2")({
+	position: "absolute",
+	left: "-10000px",
+	top: "auto",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden"
+}), N = i("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), P = i(v)(({ theme: e }) => ({
+	color: p.text(),
+	marginBottom: e.spacing(2)
+}));
+if (typeof document < "u") {
+	let e = "math-templated-main-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 {
+        flex: 2;
+        color: grey;
+        background: rgba(0, 0, 0, 0.04);
+        font-size: 0.8rem !important;
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-right: 2px solid #bdbdbd !important;
+      }
+      .block-math {
+        color: ${p.text()};
+        background-color: ${p.background()};
+        padding: 4px !important;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 8;
+      }
+      .block-math > .mq-math-mode > .mq-hasCursor > .mq-cursor {
+        display: none;
+      }
+      .correct {
+        border-color: ${p.correct()} !important;
+      }
+      .incorrect {
+        border-color: ${p.incorrect()} !important;
+      }
+    `, document.head.appendChild(t);
+	}
+}
+var F = /(\{\{\d+\}\})/gm, I = 6, L = !1, R = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+function z(e = []) {
+	let t = (e = "") => e.replace(/\$\$/g, "").replace(/^\$|\$$/g, "").trim();
+	return e.map((e) => ({
+		name: e,
+		latex: t(e),
+		write: t(e),
+		label: t(e)
+	}));
+}
+function B(e = [], t) {
+	return Math.floor(e.length / 5) * 30 + (t === "miscellaneous" ? 600 : 500);
+}
+function V(e) {
+	return e.split(F).filter((e) => e);
+}
+function H(e, t) {
+	let { responses: n, disabled: r, markup: i, printMode: a, alwaysShowCorrect: o } = e || {};
+	if (i) return t.showCorrect ? Object.keys(n || {}).reduce((e, t) => (e[t] = n?.[t]?.answer, e), {}) : V(i).reduce((e, n) => {
+		if (n.match(F)) {
+			let i = U.getResponseKey(n), s = t.session.answers[`r${i}`];
+			if (a && !o) {
+				let t = "\\ \\ ".repeat(30) + "\\embed{newLine}[] ";
+				return {
+					...e,
+					[i]: `\\MathQuillMathField[r${i}]{${t.repeat(3)}}`
+				};
+			}
+			return r ? {
+				...e,
+				[i]: `\\embed{answerBlock}[r${i}]`
+			} : {
+				...e,
+				[i]: `\\MathQuillMathField[r${i}]{${s && s.value || ""}}`
+			};
+		}
+		return e;
+	}, {});
+}
+var U = class i extends n.Component {
+	static getResponseKey = (e) => (e || "").replaceAll("{{", "").replaceAll("}}", "");
+	static propTypes = {
+		session: r.object.isRequired,
+		onSessionChange: r.func,
+		model: r.object.isRequired
+	};
+	constructor(e) {
+		super(e);
+		let t = {}, { model: r, session: a } = e || {}, { markup: o, alwaysShowCorrect: s } = r || {}, { answers: c } = a || {};
+		o && (o || "").replace(F, (e) => {
+			let n = i.getResponseKey(e), r = c && c[`r${n}`];
+			t[`r${n}`] = { value: r?.value || "" };
+		}), this.state = {
+			session: {
+				...e.session,
+				answers: t
+			},
+			activeAnswerBlock: "",
+			showCorrect: s || !1,
+			tooltipContainerRef: n.createRef()
+		}, typeof window < "u" && !L && (b.getInterface(2).registerEmbed("answerBlock", (e) => ({
+			htmlString: `<div class="block-container">
+              <div class="block-response" id="${e}Index">R</div>
+              <div class="block-math">
+                <span id="${e}"></span>
+              </div>
+            </div>`,
+			text: () => "text",
+			latex: () => `\\embed{answerBlock}[${e}]`
+		})), L = !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 = b.getInterface(2), o = r[t];
+				n.textContent = o && o.value || "", e.view && (n.parentElement.parentElement.classList.remove("correct"), n.parentElement.parentElement.classList.remove("incorrect")), a.StaticMath(n), i.textContent = "R";
+			}
+		}), this.root && g(this.root);
+	};
+	UNSAFE_componentWillReceiveProps(e) {
+		let { model: n } = this.props, { model: r = {} } = e || {}, { markup: a = "", env: o = {} } = n || {}, { markup: s = "", env: c = {}, alwaysShowCorrect: l = !1 } = r, u = (e) => e && e.mode === "evaluate";
+		(!u(o) || !u(c)) && this.setState((e) => ({
+			...e.session,
+			showCorrect: !1
+		})), l && this.setState({ showCorrect: !0 });
+		let d = a.match(F), f = s.match(F);
+		if (!t(d, f)) {
+			let e = {}, t = this.state.session.answers;
+			(f || []).forEach((n) => {
+				let r = i.getResponseKey(n), a = t && t[`r${r}`];
+				e[`r${r}`] = { value: a?.value || "" };
+			}), this.setState((t) => ({ session: {
+				...t.session,
+				answers: e
+			} }), () => {
+				this.props.onSessionChange(this.state.session), this.handleAnswerBlockDomUpdate();
+			});
+		}
+	}
+	shouldComponentUpdate(e, n) {
+		let r = t(this.props.model, e.model), i = t(this.state, n);
+		return !r || !i;
+	}
+	componentDidMount() {
+		this.handleAnswerBlockDomUpdate(), setTimeout(() => g(this.root), 100);
+	}
+	componentDidUpdate() {
+		this.handleAnswerBlockDomUpdate();
+	}
+	onSubFieldFocus = (e) => {
+		this.setState({ activeAnswerBlock: e });
+	};
+	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 = this.toNodeData(e);
+		t.type === "clear" ? this.input.clear() : t.type === "command" ? Array.isArray(t.value) ? t.value.forEach((e) => {
+			this.input.cmd(e);
+		}) : this.input.cmd(t.value) : t.type === "cursor" ? this.input.keystroke(t.value) : this.input.write(t.value), this.input.focus();
+	};
+	callOnSessionChange = () => {
+		let { onSessionChange: e } = this.props;
+		e && e(this.state.session);
+	};
+	toggleShowCorrect = (e) => {
+		this.setState({ showCorrect: e }, this.handleAnswerBlockDomUpdate);
+	};
+	subFieldChanged = (e, t) => {
+		c(), e && this.setState((n) => ({ session: {
+			...n.session,
+			answers: {
+				...n.session.answers,
+				[e]: { value: t }
+			}
+		} }), this.callOnSessionChange);
+	};
+	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 || {};
+		function r(e, t = 0) {
+			if (!e || t >= 16) return null;
+			let n = e.offsetParent;
+			return n ? n.getAttribute("role") === "tooltip" ? n : r(n, t + 1) : null;
+		}
+		function i(e, t = 0) {
+			if (!e || t >= 4) return null;
+			let n = e?.children?.[0];
+			return n ? n.attributes && n.attributes["data-keypad"] ? n : i(n, t + 1) : null;
+		}
+		let a = r(t), o = a ? i(a) : null;
+		(!t || !n || !o?.attributes["data-keypad"]) && this.setState({ activeAnswerBlock: "" });
+	};
+	setTooltipRef(e) {
+		setTimeout(() => {
+			if (e && R) {
+				let e = document.querySelector("[role='tooltip']");
+				e && e.firstChild.setAttribute("tabindex", "-1");
+			}
+		}, 1);
+	}
+	renderTeacherInstructions = () => {
+		let { model: e } = this.props, { teacherInstructions: t, animationsDisabled: n } = e || {}, r = t && (h(t) || m(t)), i = /* @__PURE__ */ x(u, {
+			defaultClassName: "teacher-instructions",
+			prompt: t
+		}, void 0, !1, {
+			fileName: S,
+			lineNumber: 587,
+			columnNumber: 7
+		}, this);
+		return r && /* @__PURE__ */ x(E, { children: n ? i : /* @__PURE__ */ x(l, {
+			labels: {
+				hidden: "Show Teacher Instructions",
+				visible: "Hide Teacher Instructions"
+			},
+			children: i
+		}, void 0, !1, {
+			fileName: S,
+			lineNumber: 594,
+			columnNumber: 13
+		}, this) }, void 0, !1, {
+			fileName: S,
+			lineNumber: 592,
+			columnNumber: 9
+		}, this);
+	};
+	renderRationale = () => {
+		let { model: e } = this.props, { rationale: t, animationsDisabled: n } = e || {}, r = /* @__PURE__ */ x(u, { prompt: t }, void 0, !1, {
+			fileName: S,
+			lineNumber: 608,
+			columnNumber: 26
+		}, this);
+		return t && (h(t) || m(t)) && /* @__PURE__ */ x(E, { children: n ? r : /* @__PURE__ */ x(l, {
+			labels: {
+				hidden: "Show Rationale",
+				visible: "Hide Rationale"
+			},
+			children: r
+		}, void 0, !1, {
+			fileName: S,
+			lineNumber: 615,
+			columnNumber: 13
+		}, this) }, void 0, !1, {
+			fileName: S,
+			lineNumber: 613,
+			columnNumber: 9
+		}, this);
+	};
+	renderPlayerContent = () => {
+		let { model: t } = this.props, { activeAnswerBlock: n, showCorrect: r, session: i, tooltipContainerRef: s } = this.state, { correctness: c, disabled: l, view: u, responses: d, equationEditor: f, customKeys: p, feedback: m, env: { mode: h } = {}, printMode: g, alwaysShowCorrect: v } = t || {}, y = e(d), b = z(p), C = H(t, this.state) || "", w = g && !v;
+		return /* @__PURE__ */ x(D, { children: /* @__PURE__ */ x(_, {
+			disabled: l,
+			markup: t.markup,
+			value: {},
+			customMarkMarkupComponent: (e) => {
+				let t = h === "evaluate" && m && m[e], d = /* @__PURE__ */ x(k, {
+					ref: (e) => {
+						this.mqStatic = e || this.mqStatic;
+					},
+					latex: C[e],
+					onSubFieldChange: this.subFieldChanged,
+					getFieldName: this.getFieldName,
+					setInput: this.setInput,
+					onSubFieldFocus: this.onSubFieldFocus,
+					onBlur: this.onBlur
+				}, void 0, !1, {
+					fileName: S,
+					lineNumber: 656,
+					columnNumber: 15
+				}, this);
+				return /* @__PURE__ */ x(O, {
+					ref: s,
+					$incorrect: !y && !t && !r,
+					$correct: !y && (t || r),
+					$showCorrectness: !y && l && c && !u,
+					$correctAnswerShown: r,
+					children: /* @__PURE__ */ x(a, {
+						ref: (e) => this.setTooltipRef(e),
+						enterTouchDelay: 0,
+						interactive: !0,
+						open: n === `r${e}`,
+						slotProps: {
+							popper: {
+								container: s?.current || void 0,
+								placement: "bottom-end",
+								sx: {
+									backgroundColor: "transparent",
+									width: "650px",
+									opacity: 1,
+									"& .MuiTooltip-arrow": { display: "none" }
+								},
+								modifiers: {
+									preventOverflow: {
+										enabled: !0,
+										boundariesElement: "body"
+									},
+									flip: { enabled: !1 }
+								}
+							},
+							tooltip: { sx: {
+								fontSize: "initial",
+								backgroundColor: "transparent",
+								width: "600px",
+								marginTop: 0,
+								paddingTop: 0,
+								boxShadow: "none"
+							} }
+						},
+						title: Object.keys(i.answers).map((e) => e === n && !(r || l) && /* @__PURE__ */ x(A, {
+							"data-keypad": !0,
+							style: { width: B(b, f) },
+							children: /* @__PURE__ */ x(o, {
+								additionalKeys: b,
+								mode: f || I,
+								onClick: this.onClick,
+								onRequestClose: () => this.setState({ activeAnswerBlock: "" })
+							}, void 0, !1, {
+								fileName: S,
+								lineNumber: 723,
+								columnNumber: 27
+							}, this)
+						}, e, !1, {
+							fileName: S,
+							lineNumber: 718,
+							columnNumber: 25
+						}, this) || null),
+						children: w ? /* @__PURE__ */ x(j, { children: d }, void 0, !1, {
+							fileName: S,
+							lineNumber: 734,
+							columnNumber: 39
+						}, this) : /* @__PURE__ */ x("div", { children: d }, void 0, !1, {
+							fileName: S,
+							lineNumber: 734,
+							columnNumber: 85
+						}, this)
+					}, void 0, !1, {
+						fileName: S,
+						lineNumber: 677,
+						columnNumber: 17
+					}, this)
+				}, void 0, !1, {
+					fileName: S,
+					lineNumber: 670,
+					columnNumber: 15
+				}, this);
+			}
+		}, void 0, !1, {
+			fileName: S,
+			lineNumber: 647,
+			columnNumber: 9
+		}, this) }, void 0, !1, {
+			fileName: S,
+			lineNumber: 646,
+			columnNumber: 7
+		}, this);
+	};
+	render() {
+		let { model: t } = this.props, { showCorrect: n } = this.state, { prompt: r, env: { mode: i, role: a } = {}, extraCSSRules: o, correctness: s, responses: c, language: l, showNote: f, note: p } = t || {}, m = !e(c) && s && s.correctness !== "correct", h = (n || i === "view" && a === "instructor") && f && p;
+		return /* @__PURE__ */ x(C, {
+			extraCSSRules: o,
+			ref: (e) => {
+				this.root = y.findDOMNode(e) || this.root;
+			},
+			children: /* @__PURE__ */ x(w, { children: [
+				i === "gather" && /* @__PURE__ */ x(M, { children: "Math Equation Response Question" }, void 0, !1, {
+					fileName: S,
+					lineNumber: 773,
+					columnNumber: 33
+				}, this),
+				/* @__PURE__ */ x(w, { children: m && /* @__PURE__ */ x(P, {
+					language: l,
+					show: !0,
+					toggled: n,
+					onToggle: this.toggleShowCorrect
+				}, void 0, !1, {
+					fileName: S,
+					lineNumber: 777,
+					columnNumber: 15
+				}, this) }, void 0, !1, {
+					fileName: S,
+					lineNumber: 775,
+					columnNumber: 11
+				}, this),
+				this.renderTeacherInstructions(),
+				r && /* @__PURE__ */ x(T, { children: /* @__PURE__ */ x(u, { prompt: r }, void 0, !1, {
+					fileName: S,
+					lineNumber: 785,
+					columnNumber: 15
+				}, this) }, void 0, !1, {
+					fileName: S,
+					lineNumber: 784,
+					columnNumber: 13
+				}, this),
+				/* @__PURE__ */ x(d, {
+					false: !0,
+					children: this.renderPlayerContent()
+				}, void 0, !1, {
+					fileName: S,
+					lineNumber: 789,
+					columnNumber: 11
+				}, this),
+				h && /* @__PURE__ */ x(N, {
+					className: "note",
+					dangerouslySetInnerHTML: { __html: p }
+				}, void 0, !1, {
+					fileName: S,
+					lineNumber: 791,
+					columnNumber: 27
+				}, this),
+				this.renderRationale()
+			] }, void 0, !0, {
+				fileName: S,
+				lineNumber: 771,
+				columnNumber: 9
+			}, this)
+		}, void 0, !1, {
+			fileName: S,
+			lineNumber: 762,
+			columnNumber: 7
+		}, this);
+	}
+};
+//#endregion
+export { U as default };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './delivery/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/index.iife.d.ts

@@ -0,0 +1,9 @@
+/**
+ * IIFE entry point for math-templated element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index';
+export default Element;
+//# sourceMappingURL=index.iife.d.ts.map

package/dist/index.iife.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.iife.d.ts","sourceRoot":"","sources":["../src/index.iife.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,OAAO,MAAM,SAAS,CAAC;AAQ9B,eAAe,OAAO,CAAC"}