@pie-lib/render-ui 8.0.1-next.20261005003301 → 8.0.1-next.20261005075357

package/dist/color.d.ts

@@ -51,6 +51,7 @@ export declare const defaults: {
     KEYPAD_BUTTON_HOVER: string;
     KEYPAD_BUTTON_OPERATOR_HOVER: string;
     KEY_BOARD_FOCUS_INDICATOR: string;
+    EDITOR_TOOLBAR: string;
     BUTTON_BORDER: string;
     BUTTON_HOVER_BG: string;
 };
@@ -99,6 +100,7 @@ export declare const focusCheckedBorder: () => any;
 export declare const focusUnchecked: () => any;
 export declare const focusUncheckedBorder: () => any;
 export declare const buttonFocusOutline: () => any;
+export declare const focusOutline: () => any;
 export declare const blueGrey100: () => any;
 export declare const blueGrey300: () => any;
 export declare const blueGrey600: () => any;
@@ -108,6 +110,7 @@ export declare const keypadButtonOperator: () => any;
 export declare const keypadEmptyPlaceholder: () => any;
 export declare const keypadButtonHover: () => any;
 export declare const keypadButtonOperatorHover: () => any;
+export declare const editorToolbar: () => string;
 export declare const keyBoardFocusIndicator: () => any;
 export declare const buttonBorder: () => any;
 export declare const buttonHoverBg: () => any;

package/dist/color.js

@@ -1,21 +1,21 @@
-import { __exportAll as ee } from "./_virtual/_rolldown/runtime.js";
-import { green as e, indigo as t, orange as te, pink as n, red as r } from "@mui/material/colors";
+import { __exportAll as e } from "./_virtual/_rolldown/runtime.js";
+import { green as t, indigo as n, orange as ee, pink as r, red as te } from "@mui/material/colors";
 //#region src/color.ts
-var ne = /* @__PURE__ */ ee({
+var ne = /* @__PURE__ */ e({
 	background: () => k,
 	backgroundDark: () => A,
 	black: () => H,
-	blueGrey100: () => X,
-	blueGrey300: () => Z,
-	blueGrey600: () => Q,
-	blueGrey900: () => ie,
+	blueGrey100: () => Z,
+	blueGrey300: () => ie,
+	blueGrey600: () => ae,
+	blueGrey900: () => oe,
 	border: () => F,
 	borderDark: () => L,
 	borderGray: () => R,
 	borderLight: () => I,
-	buttonBorder: () => ue,
+	buttonBorder: () => me,
 	buttonFocusOutline: () => Y,
-	buttonHoverBg: () => de,
+	buttonHoverBg: () => he,
 	correct: () => d,
 	correctSecondary: () => f,
 	correctTertiary: () => p,
@@ -24,20 +24,22 @@ var ne = /* @__PURE__ */ ee({
 	disabled: () => c,
 	disabledSecondary: () => l,
 	disabledText: () => u,
-	dropdownBackground: () => re,
+	dropdownBackground: () => M,
+	editorToolbar: () => fe,
 	fadedPrimary: () => w,
 	focusChecked: () => G,
 	focusCheckedBorder: () => K,
+	focusOutline: () => X,
 	focusUnchecked: () => q,
 	focusUncheckedBorder: () => J,
 	incorrect: () => h,
 	incorrectSecondary: () => _,
 	incorrectWithIcon: () => g,
-	keyBoardFocusIndicator: () => le,
-	keypadButton: () => ae,
-	keypadButtonHover: () => se,
-	keypadButtonOperator: () => oe,
-	keypadButtonOperatorHover: () => ce,
+	keyBoardFocusIndicator: () => pe,
+	keypadButton: () => ce,
+	keypadButtonHover: () => ue,
+	keypadButtonOperator: () => le,
+	keypadButtonOperatorHover: () => de,
 	keypadEmptyPlaceholder: () => $,
 	missing: () => v,
 	missingWithIcon: () => y,
@@ -50,37 +52,37 @@ var ne = /* @__PURE__ */ ee({
 	secondaryDark: () => D,
 	secondaryLight: () => E,
 	secondaryText: () => O,
-	surface: () => M,
+	surface: () => N,
 	tableGrid: () => z,
 	tableGridLight: () => B,
 	tableStripe: () => V,
-	tertiary: () => N,
+	tertiary: () => re,
 	tertiaryLight: () => P,
 	text: () => s,
 	transparent: () => W,
 	v: () => a,
-	visualElementsColors: () => fe,
+	visualElementsColors: () => ge,
 	white: () => U
 }), i = {
 	TEXT: "black",
 	DISABLED: "grey",
 	DISABLED_SECONDARY: "#ABABAB",
 	DISABLED_TEXT: "#545454",
-	CORRECT: e[500],
-	CORRECT_SECONDARY: e[50],
+	CORRECT: t[500],
+	CORRECT_SECONDARY: t[50],
 	CORRECT_TERTIARY: "#0EA449",
 	CORRECT_WITH_ICON: "#087D38",
-	INCORRECT: te[500],
-	INCORRECT_SECONDARY: r[50],
+	INCORRECT: ee[500],
+	INCORRECT_SECONDARY: te[50],
 	INCORRECT_WITH_ICON: "#BF0D00",
-	MISSING: r[700],
+	MISSING: te[700],
 	MISSING_WITH_ICON: "#6A78A1",
-	PRIMARY: t[500],
-	PRIMARY_LIGHT: t[200],
-	PRIMARY_DARK: t[800],
-	SECONDARY: n.A400,
-	SECONDARY_LIGHT: n[200],
-	SECONDARY_DARK: n[900],
+	PRIMARY: n[500],
+	PRIMARY_LIGHT: n[200],
+	PRIMARY_DARK: n[800],
+	SECONDARY: r.A400,
+	SECONDARY_LIGHT: r[200],
+	SECONDARY_DARK: r[900],
 	TERTIARY: "#146EB3",
 	TERTIARY_LIGHT: "#D0E2F0",
 	BACKGROUND: "rgba(255,255,255,0)",
@@ -114,14 +116,18 @@ var ne = /* @__PURE__ */ ee({
 	KEYPAD_BUTTON_HOVER: "rgb(214, 218, 239)",
 	KEYPAD_BUTTON_OPERATOR_HOVER: "rgb(255, 197, 217)",
 	KEY_BOARD_FOCUS_INDICATOR: "#2B87FF",
+	EDITOR_TOOLBAR: "#efefef",
 	BUTTON_BORDER: "rgba(0, 0, 0, 0.23)",
 	BUTTON_HOVER_BG: "rgba(0, 0, 0, 0.08)"
 };
 Object.freeze(i);
-var a = (ee) => (...e) => {
-	let t = e.pop();
-	return e.reduceRight((e, t) => `var(--${ee}-${t}, ${e})`, t);
-}, o = a("pie"), s = () => o("text", i.TEXT), c = () => o("disabled", i.DISABLED), l = () => o("disabled-secondary", i.DISABLED_SECONDARY), u = () => o("disabled-text", "text", i.DISABLED_TEXT), d = () => o("correct", i.CORRECT), f = () => o("correct-secondary", i.CORRECT_SECONDARY), p = () => o("correct-tertiary", i.CORRECT_TERTIARY), m = () => o("correct-icon", i.CORRECT_WITH_ICON), h = () => o("incorrect", i.INCORRECT), g = () => o("incorrect-icon", i.INCORRECT_WITH_ICON), _ = () => o("incorrect-secondary", i.INCORRECT_SECONDARY), v = () => o("missing", i.MISSING), y = () => o("missing-icon", i.MISSING_WITH_ICON), b = () => o("primary", i.PRIMARY), x = () => o("primary-light", i.PRIMARY_LIGHT), S = () => o("primary-dark", i.PRIMARY_DARK), C = () => o("primary-text", "text", i.TEXT), w = () => o("faded-primary", i.FADED_PRIMARY), T = () => o("secondary", i.SECONDARY), E = () => o("secondary-light", i.SECONDARY_LIGHT), D = () => o("secondary-dark", i.SECONDARY_DARK), O = () => o("secondary-text", "text", i.TEXT), k = () => o("background", i.BACKGROUND), A = () => o("background-dark", i.BACKGROUND_DARK), j = () => o("secondary-background", i.SECONDARY_BACKGROUND), re = () => o("dropdown-background", i.DROPDOWN_BACKGROUND), M = () => o("surface", i.SURFACE), N = () => o("tertiary", i.TERTIARY), P = () => o("tertiary-light", i.TERTIARY_LIGHT), F = () => o("border", i.BORDER), I = () => o("border-light", i.BORDER_LIGHT), L = () => o("border-dark", i.BORDER_DARK), R = () => o("border-gray", i.BORDER_GRAY), z = () => o("table-grid", "text", i.TABLE_GRID), B = () => o("table-grid-light", "border-light", i.TABLE_GRID_LIGHT), V = () => o("table-stripe", "background-dark", i.TABLE_STRIPE), H = () => o("black", i.BLACK), U = () => o("white", i.WHITE), W = () => i.TRANSPARENT, G = () => o("focus-checked", i.FOCUS_CHECKED), K = () => o("focus-checked-border", i.FOCUS_CHECKED_BORDER), q = () => o("focus-unchecked", i.FOCUS_UNCHECKED), J = () => o("focus-unchecked-border", i.FOCUS_UNCHECKED_BORDER), Y = () => o("button-focus-outline", i.BUTTON_FOCUS_OUTLINE), X = () => o("blue-grey-100", i.BLUE_GREY100), Z = () => o("blue-grey-300", i.BLUE_GREY300), Q = () => o("blue-grey-600", i.BLUE_GREY600), ie = () => o("blue-grey-900", i.BLUE_GREY900), ae = () => o("keypad-button", i.KEYPAD_BUTTON), oe = () => o("keypad-button-operator", i.KEYPAD_BUTTON_OPERATOR), $ = () => o("keypad-empty-placeholder", i.KEYPAD_EMPTY_PLACEHOLDER), se = () => o("keypad-button-hover", i.KEYPAD_BUTTON_HOVER), ce = () => o("keypad-button-operator-hover", i.KEYPAD_BUTTON_OPERATOR_HOVER), le = () => o("keyboard-focus-indicator", i.KEY_BOARD_FOCUS_INDICATOR), ue = () => o("button-border", i.BUTTON_BORDER), de = () => o("button-hover-bg", i.BUTTON_HOVER_BG), fe = {
+var a = (e) => (...t) => {
+	let n = t.pop();
+	return t.reduceRight((t, n) => `var(--${e}-${n}, ${t})`, n);
+}, o = a("pie"), s = () => o("text", i.TEXT), c = () => o("disabled", i.DISABLED), l = () => o("disabled-secondary", i.DISABLED_SECONDARY), u = () => o("disabled-text", "text", i.DISABLED_TEXT), d = () => o("correct", i.CORRECT), f = () => o("correct-secondary", i.CORRECT_SECONDARY), p = () => o("correct-tertiary", i.CORRECT_TERTIARY), m = () => o("correct-icon", i.CORRECT_WITH_ICON), h = () => o("incorrect", i.INCORRECT), g = () => o("incorrect-icon", i.INCORRECT_WITH_ICON), _ = () => o("incorrect-secondary", i.INCORRECT_SECONDARY), v = () => o("missing", i.MISSING), y = () => o("missing-icon", i.MISSING_WITH_ICON), b = () => o("primary", i.PRIMARY), x = () => o("primary-light", i.PRIMARY_LIGHT), S = () => o("primary-dark", i.PRIMARY_DARK), C = () => o("primary-text", "text", i.TEXT), w = () => o("faded-primary", i.FADED_PRIMARY), T = () => o("secondary", i.SECONDARY), E = () => o("secondary-light", i.SECONDARY_LIGHT), D = () => o("secondary-dark", i.SECONDARY_DARK), O = () => o("secondary-text", "text", i.TEXT), k = () => o("background", i.BACKGROUND), A = () => o("background-dark", i.BACKGROUND_DARK), j = () => o("secondary-background", i.SECONDARY_BACKGROUND), M = () => o("dropdown-background", i.DROPDOWN_BACKGROUND), N = () => o("surface", i.SURFACE), re = () => o("tertiary", i.TERTIARY), P = () => o("tertiary-light", i.TERTIARY_LIGHT), F = () => o("border", i.BORDER), I = () => o("border-light", i.BORDER_LIGHT), L = () => o("border-dark", i.BORDER_DARK), R = () => o("border-gray", i.BORDER_GRAY), z = () => o("table-grid", "text", i.TABLE_GRID), B = () => o("table-grid-light", "border-light", i.TABLE_GRID_LIGHT), V = () => o("table-stripe", "background-dark", i.TABLE_STRIPE), H = () => o("black", i.BLACK), U = () => o("white", i.WHITE), W = () => i.TRANSPARENT, G = () => o("focus-checked", i.FOCUS_CHECKED), K = () => o("focus-checked-border", i.FOCUS_CHECKED_BORDER), q = () => o("focus-unchecked", i.FOCUS_UNCHECKED), J = () => o("focus-unchecked-border", i.FOCUS_UNCHECKED_BORDER), Y = () => o("button-focus-outline", i.BUTTON_FOCUS_OUTLINE), X = () => o("focus-outline", "button-focus-outline", "focus-checked-border", i.FOCUS_CHECKED_BORDER), Z = () => o("blue-grey-100", i.BLUE_GREY100), ie = () => o("blue-grey-300", i.BLUE_GREY300), ae = () => o("blue-grey-600", i.BLUE_GREY600), oe = () => o("blue-grey-900", i.BLUE_GREY900), se = (e) => {
+	let t = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(e);
+	return t ? t.slice(1).map((e) => parseInt(e, 16)) : e.match(/\d+/g).slice(0, 3).map(Number);
+}, Q = (e, t) => `color-mix(in srgb, rgb(${se(e).map((e) => (e - 255 * (1 - t)) / t).join(" ")}) ${t * 100}%, ${o("background", i.WHITE)})`, ce = () => o("keypad-button", Q(i.KEYPAD_BUTTON, .5)), le = () => o("keypad-button-operator", Q(i.KEYPAD_BUTTON_OPERATOR, .5)), $ = () => o("keypad-empty-placeholder", i.KEYPAD_EMPTY_PLACEHOLDER), ue = () => o("keypad-button-hover", Q(i.KEYPAD_BUTTON_HOVER, .25)), de = () => o("keypad-button-operator-hover", Q(i.KEYPAD_BUTTON_OPERATOR_HOVER, .25)), fe = () => Q(i.EDITOR_TOOLBAR, .125), pe = () => o("keyboard-focus-indicator", i.KEY_BOARD_FOCUS_INDICATOR), me = () => o("button-border", i.BUTTON_BORDER), he = () => o("button-hover-bg", i.BUTTON_HOVER_BG), ge = {
 	AXIS_LINE_COLOR: "#5A53C9",
 	ROLLOVER_FILL_BAR_COLOR: "#050F2D",
 	GRIDLINES_COLOR: "#8E88EA",
@@ -129,4 +135,4 @@ var a = (ee) => (...e) => {
 	SHAPES_FILL_COLOR: "#7986cb"
 };
 //#endregion
-export { k as background, A as backgroundDark, H as black, X as blueGrey100, Z as blueGrey300, Q as blueGrey600, ie as blueGrey900, F as border, L as borderDark, R as borderGray, I as borderLight, ue as buttonBorder, Y as buttonFocusOutline, de as buttonHoverBg, ne as color_exports, d as correct, f as correctSecondary, p as correctTertiary, m as correctWithIcon, i as defaults, c as disabled, l as disabledSecondary, u as disabledText, re as dropdownBackground, w as fadedPrimary, G as focusChecked, K as focusCheckedBorder, q as focusUnchecked, J as focusUncheckedBorder, h as incorrect, _ as incorrectSecondary, g as incorrectWithIcon, le as keyBoardFocusIndicator, ae as keypadButton, se as keypadButtonHover, oe as keypadButtonOperator, ce as keypadButtonOperatorHover, $ as keypadEmptyPlaceholder, v as missing, y as missingWithIcon, b as primary, S as primaryDark, x as primaryLight, C as primaryText, T as secondary, j as secondaryBackground, D as secondaryDark, E as secondaryLight, O as secondaryText, M as surface, z as tableGrid, B as tableGridLight, V as tableStripe, N as tertiary, P as tertiaryLight, s as text, W as transparent, a as v, fe as visualElementsColors, U as white };
+export { k as background, A as backgroundDark, H as black, Z as blueGrey100, ie as blueGrey300, ae as blueGrey600, oe as blueGrey900, F as border, L as borderDark, R as borderGray, I as borderLight, me as buttonBorder, Y as buttonFocusOutline, he as buttonHoverBg, ne as color_exports, d as correct, f as correctSecondary, p as correctTertiary, m as correctWithIcon, i as defaults, c as disabled, l as disabledSecondary, u as disabledText, M as dropdownBackground, fe as editorToolbar, w as fadedPrimary, G as focusChecked, K as focusCheckedBorder, X as focusOutline, q as focusUnchecked, J as focusUncheckedBorder, h as incorrect, _ as incorrectSecondary, g as incorrectWithIcon, pe as keyBoardFocusIndicator, ce as keypadButton, ue as keypadButtonHover, le as keypadButtonOperator, de as keypadButtonOperatorHover, $ as keypadEmptyPlaceholder, v as missing, y as missingWithIcon, b as primary, S as primaryDark, x as primaryLight, C as primaryText, T as secondary, j as secondaryBackground, D as secondaryDark, E as secondaryLight, O as secondaryText, N as surface, z as tableGrid, B as tableGridLight, V as tableStripe, re as tertiary, P as tertiaryLight, s as text, W as transparent, a as v, ge as visualElementsColors, U as white };

package/dist/preview-prompt.d.ts

@@ -12,11 +12,15 @@ export declare class PreviewPrompt extends Component {
             playImage: PropTypes.Requireable<string>;
             pauseImage: PropTypes.Requireable<string>;
         }>>;
+        /** The item language, which the custom audio button's accessible name follows. */
+        language: PropTypes.Requireable<string>;
     };
     static defaultProps: {
         onClick: () => void;
     };
     promptRef: React.RefObject<unknown>;
+    audioId: string;
+    playButtonId: string;
     parsedText: any;
     addCustomAudioButtonControls(): void;
     removeCustomAudioButtonListeners(): void;

package/dist/preview-prompt.js

@@ -1,18 +1,24 @@
-import { tableGrid as e, tableStripe as t, text as n } from "./color.js";
-import r, { Component as i } from "react";
-import a from "prop-types";
-import { styled as o } from "@mui/material/styles";
-import { jsx as s } from "react/jsx-runtime";
-import { renderMath as c } from "@pie-element/shared-math-rendering-mathjax";
+import { focusOutline as e, tableGrid as t, tableStripe as n, text as r } from "./color.js";
+import { createUniqueId as i } from "./unique-id.js";
+import a, { Component as o } from "react";
+import s from "prop-types";
+import { styled as c } from "@mui/material/styles";
+import { jsx as l } from "react/jsx-runtime";
+import { renderMath as u } from "@pie-element/shared-math-rendering-mathjax";
+import d from "@pie-lib/translator";
 //#region src/preview-prompt.tsx
-var l = o("div")(({ theme: r, tagName: i }) => ({
+var { translator: f } = d, p = "pie-prompt-audio-player", m = "play-audio-button", h = c("div")(({ theme: i, tagName: a }) => ({
+	[`& .${m}:focus-visible`]: {
+		outline: `2px solid ${e()}`,
+		outlineOffset: "2px"
+	},
 	"&:not(.MathJax) > table:not([role=\"presentation\"])": { borderCollapse: "collapse" },
 	"&:not(.MathJax) table[border]:not([role=\"presentation\"]), &:not(.MathJax) table[border]:not([role=\"presentation\"]) td, &:not(.MathJax) table[border]:not([role=\"presentation\"]) th": {
 		borderStyle: "solid",
-		borderColor: e()
+		borderColor: t()
 	},
-	"&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)": { backgroundColor: t() },
-	"&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td": { backgroundColor: t() },
+	"&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)": { backgroundColor: n() },
+	"&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td": { backgroundColor: n() },
 	"&:not(.MathJax) table:not([role=\"presentation\"]) td, &:not(.MathJax) table:not([role=\"presentation\"]) th": {
 		padding: ".6em 1em",
 		textAlign: "left"
@@ -20,88 +26,95 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 	"&:not(.MathJax) > table td > p.kds-indent": { textAlign: "initial" },
 	"&.prompt": {
 		verticalAlign: "middle",
-		color: n()
+		color: r()
 	},
 	"&.legend": {
 		width: "100%",
 		fontSize: "inherit !important"
 	},
 	"&.rationale": {
-		paddingLeft: r.spacing(4),
-		paddingBottom: r.spacing(1)
+		paddingLeft: i.spacing(4),
+		paddingBottom: i.spacing(1)
 	},
 	"&.prompt-label": {
-		color: `${n()} !important`,
+		color: `${r()} !important`,
 		display: "flex",
 		flexDirection: "column",
 		verticalAlign: "middle",
 		cursor: "pointer",
 		"& > p": { margin: "0 0 0 0 !important" }
 	}
-})), u = /\\embed\{newLine\}\[\]/g, d = "\\newline ", f = "preview-prompt", p = class extends i {
+})), g = /\\embed\{newLine\}\[\]/g, _ = "\\newline ", v = "preview-prompt", y = class extends o {
 	static propTypes = {
-		prompt: a.string,
-		tagName: a.string,
-		className: a.string,
-		onClick: a.func,
-		defaultClassName: a.string,
-		autoplayAudioEnabled: a.bool,
-		customAudioButton: a.shape({
-			playImage: a.string,
-			pauseImage: a.string
-		})
+		prompt: s.string,
+		tagName: s.string,
+		className: s.string,
+		onClick: s.func,
+		defaultClassName: s.string,
+		autoplayAudioEnabled: s.bool,
+		customAudioButton: s.shape({
+			playImage: s.string,
+			pauseImage: s.string
+		}),
+		language: s.string
 	};
 	static defaultProps = { onClick: () => {} };
-	promptRef = r.createRef();
+	promptRef = a.createRef();
+	audioId = i(p);
+	playButtonId = i(m);
 	parsedText = (e) => {
-		let { autoplayAudioEnabled: t, customAudioButton: n } = this.props, r = document.createElement("div");
-		r.innerHTML = e;
-		let i = r.querySelector("audio");
-		if (i) {
+		let { autoplayAudioEnabled: t, customAudioButton: n, language: r } = this.props, i = document.createElement("div");
+		i.innerHTML = e;
+		let a = i.querySelector("audio");
+		if (a) {
 			let e = document.createElement("source");
-			if (e.setAttribute("type", "audio/mp3"), e.setAttribute("src", i.getAttribute("src")), i.removeAttribute("src"), i.setAttribute("id", "pie-prompt-audio-player"), i.appendChild(e), n) {
-				i.style.display = "none";
-				let e = document.createElement("div");
-				e.id = "play-audio-button", Object.assign(e.style, {
+			if (e.setAttribute("type", "audio/mp3"), e.setAttribute("src", a.getAttribute("src")), a.removeAttribute("src"), a.id = this.audioId, a.classList.add(p), a.appendChild(e), n) {
+				a.style.display = "none";
+				let e = document.createElement("button");
+				e.setAttribute("type", "button"), e.setAttribute("aria-label", f.t("common:playAudio", { lng: r })), e.id = this.playButtonId, e.className = m, Object.assign(e.style, {
 					cursor: "pointer",
 					display: "block",
 					width: "128px",
 					height: "128px",
+					margin: "0",
+					padding: "0",
+					font: "inherit",
+					backgroundColor: "transparent",
 					backgroundImage: `url(${t ? n.pauseImage : n.playImage})`,
 					backgroundSize: "cover",
 					borderRadius: "50%",
 					border: "1px solid #326295"
-				}), i.parentNode.insertBefore(e, i);
+				}), a.parentNode.insertBefore(e, a);
 			}
 		}
-		return r.innerHTML;
+		return i.innerHTML;
 	};
 	addCustomAudioButtonControls() {
-		let { autoplayAudioEnabled: e, customAudioButton: t } = this.props, n = document.getElementById("play-audio-button"), r = document.getElementById("pie-prompt-audio-player");
-		if (e && r && r.play().then(() => {
-			n && t && r.addEventListener("ended", a);
+		let { autoplayAudioEnabled: e, customAudioButton: t } = this.props, n = this.promptRef.current, r = n?.querySelector(`.${m}`), i = n?.querySelector(`.${p}`);
+		if (e && i && i.play().then(() => {
+			r && t && i.addEventListener("ended", o);
 		}).catch((e) => {
-			n && t && (n.style.backgroundImage = `url(${t.playImage})`), console.error("Error playing audio", e);
-		}), !n || !r || !t) return;
-		let i = () => {
-			r.paused && r.play();
-		}, a = () => {
-			n.style.backgroundImage = `url(${t.playImage})`;
+			r && t && (r.style.backgroundImage = `url(${t.playImage})`), console.error("Error playing audio", e);
+		}), !r || !i || !t) return;
+		let a = () => {
+			i.paused && i.play();
 		}, o = () => {
-			Object.assign(n.style, {
+			r.style.backgroundImage = `url(${t.playImage})`;
+		}, s = () => {
+			Object.assign(r.style, {
 				backgroundImage: `url(${t.pauseImage})`,
 				border: "1px solid #ccc"
 			});
-		}, s = () => {
-			Object.assign(n.style, {
+		}, c = () => {
+			Object.assign(r.style, {
 				backgroundImage: `url(${t.playImage})`,
 				border: "1px solid #326295"
 			});
 		};
-		n.addEventListener("click", i), r.addEventListener("play", o), r.addEventListener("pause", s), r.addEventListener("ended", a), this._handlePlayClick = i, this._handleAudioPlay = o, this._handleAudioPause = s, this._handleAudioEnded = a;
+		r.addEventListener("click", a), i.addEventListener("play", s), i.addEventListener("pause", c), i.addEventListener("ended", o), this._playButton = r, this._audio = i, this._handlePlayClick = a, this._handleAudioPlay = s, this._handleAudioPause = c, this._handleAudioEnded = o;
 	}
 	removeCustomAudioButtonListeners() {
-		let e = document.getElementById("play-audio-button"), t = document.querySelector("audio");
+		let e = this._playButton, t = this._audio;
 		!e || !t || (e.removeEventListener("click", this._handlePlayClick), t.removeEventListener("play", this._handleAudioPlay), t.removeEventListener("pause", this._handleAudioPause), t.removeEventListener("ended", this._handleAudioEnded));
 	}
 	componentDidMount() {
@@ -118,7 +131,7 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 	}
 	renderMathContent() {
 		let e = this.promptRef.current;
-		e && typeof c == "function" && c(e);
+		e && typeof u == "function" && u(e);
 	}
 	alignImages() {
 		let e = this.promptRef.current;
@@ -138,16 +151,16 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 		}
 	}
 	render() {
-		let { prompt: e, tagName: t, className: n, onClick: r, defaultClassName: i } = this.props, a = `${n || ""} ${i || ""} ${t === "legend" ? "legend" : ""} ${f}`.trim();
-		return /* @__PURE__ */ s(l, {
+		let { prompt: e, tagName: t, className: n, onClick: r, defaultClassName: i } = this.props, a = `${n || ""} ${i || ""} ${t === "legend" ? "legend" : ""} ${v}`.trim();
+		return /* @__PURE__ */ l(h, {
 			as: t || "div",
 			ref: this.promptRef,
 			onClick: r,
 			className: a,
 			tagName: t,
-			dangerouslySetInnerHTML: { __html: this.parsedText(e || "").replace(u, d) }
+			dangerouslySetInnerHTML: { __html: this.parsedText(e || "").replace(g, _) }
 		});
 	}
 };
 //#endregion
-export { p as PreviewPrompt, p as default };
+export { y as PreviewPrompt, y as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "8.0.1-next.20261005003301",
+  "version": "8.0.1-next.20261005075357",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
   "repository": {
     "type": "git",
@@ -13,7 +13,7 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-lib/icons": "5.0.1-next.20261004165705",
-    "@pie-lib/translator": "5.0.1-next.20261005003301",
+    "@pie-lib/translator": "5.0.1-next.20261005075357",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^4.4.5",