@pie-lib/render-ui 8.0.1-next.20261005000911 → 8.0.1-next.20261005005201

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;
 };
@@ -108,6 +109,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,
+	blueGrey600: () => ie,
+	blueGrey900: () => ae,
 	border: () => F,
 	borderDark: () => L,
 	borderGray: () => R,
 	borderLight: () => I,
-	buttonBorder: () => ue,
+	buttonBorder: () => pe,
 	buttonFocusOutline: () => Y,
-	buttonHoverBg: () => de,
+	buttonHoverBg: () => me,
 	correct: () => d,
 	correctSecondary: () => f,
 	correctTertiary: () => p,
@@ -24,7 +24,8 @@ var ne = /* @__PURE__ */ ee({
 	disabled: () => c,
 	disabledSecondary: () => l,
 	disabledText: () => u,
-	dropdownBackground: () => re,
+	dropdownBackground: () => M,
+	editorToolbar: () => de,
 	fadedPrimary: () => w,
 	focusChecked: () => G,
 	focusCheckedBorder: () => K,
@@ -33,12 +34,12 @@ var ne = /* @__PURE__ */ ee({
 	incorrect: () => h,
 	incorrectSecondary: () => _,
 	incorrectWithIcon: () => g,
-	keyBoardFocusIndicator: () => le,
-	keypadButton: () => ae,
-	keypadButtonHover: () => se,
-	keypadButtonOperator: () => oe,
-	keypadButtonOperatorHover: () => ce,
-	keypadEmptyPlaceholder: () => $,
+	keyBoardFocusIndicator: () => fe,
+	keypadButton: () => $,
+	keypadButtonHover: () => le,
+	keypadButtonOperator: () => se,
+	keypadButtonOperatorHover: () => ue,
+	keypadEmptyPlaceholder: () => ce,
 	missing: () => v,
 	missingWithIcon: () => y,
 	primary: () => b,
@@ -50,37 +51,37 @@ var ne = /* @__PURE__ */ ee({
 	secondaryDark: () => D,
 	secondaryLight: () => E,
 	secondaryText: () => O,
-	surface: () => M,
+	surface: () => N,
 	tableGrid: () => z,
 	tableGridLight: () => B,
 	tableStripe: () => V,
-	tertiary: () => N,
-	tertiaryLight: () => P,
+	tertiary: () => P,
+	tertiaryLight: () => re,
 	text: () => s,
 	transparent: () => W,
 	v: () => a,
-	visualElementsColors: () => fe,
+	visualElementsColors: () => he,
 	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 +115,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), P = () => o("tertiary", i.TERTIARY), re = () => 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), ie = () => o("blue-grey-600", i.BLUE_GREY600), ae = () => o("blue-grey-900", i.BLUE_GREY900), oe = (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(${oe(e).map((e) => (e - 255 * (1 - t)) / t).join(" ")}) ${t * 100}%, ${o("background", i.WHITE)})`, $ = () => o("keypad-button", Q(i.KEYPAD_BUTTON, .5)), se = () => o("keypad-button-operator", Q(i.KEYPAD_BUTTON_OPERATOR, .5)), ce = () => o("keypad-empty-placeholder", i.KEYPAD_EMPTY_PLACEHOLDER), le = () => o("keypad-button-hover", Q(i.KEYPAD_BUTTON_HOVER, .25)), ue = () => o("keypad-button-operator-hover", Q(i.KEYPAD_BUTTON_OPERATOR_HOVER, .25)), de = () => Q(i.EDITOR_TOOLBAR, .125), fe = () => o("keyboard-focus-indicator", i.KEY_BOARD_FOCUS_INDICATOR), pe = () => o("button-border", i.BUTTON_BORDER), me = () => o("button-hover-bg", i.BUTTON_HOVER_BG), he = {
 	AXIS_LINE_COLOR: "#5A53C9",
 	ROLLOVER_FILL_BAR_COLOR: "#050F2D",
 	GRIDLINES_COLOR: "#8E88EA",
@@ -129,4 +134,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, X as blueGrey100, Z as blueGrey300, ie as blueGrey600, ae as blueGrey900, F as border, L as borderDark, R as borderGray, I as borderLight, pe as buttonBorder, Y as buttonFocusOutline, me 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, de as editorToolbar, w as fadedPrimary, G as focusChecked, K as focusCheckedBorder, q as focusUnchecked, J as focusUncheckedBorder, h as incorrect, _ as incorrectSecondary, g as incorrectWithIcon, fe as keyBoardFocusIndicator, $ as keypadButton, le as keypadButtonHover, se as keypadButtonOperator, ue as keypadButtonOperatorHover, ce 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, P as tertiary, re as tertiaryLight, s as text, W as transparent, a as v, he as visualElementsColors, U as white };

package/dist/preview-prompt.d.ts

@@ -17,6 +17,8 @@ export declare class PreviewPrompt extends Component {
         onClick: () => void;
     };
     promptRef: React.RefObject<unknown>;
+    audioId: string;
+    playButtonId: string;
     parsedText: any;
     addCustomAudioButtonControls(): void;
     removeCustomAudioButtonListeners(): void;

package/dist/preview-prompt.js

@@ -1,11 +1,12 @@
 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 { createUniqueId as r } from "./unique-id.js";
+import i, { Component as a } from "react";
+import o from "prop-types";
+import { styled as s } from "@mui/material/styles";
+import { jsx as c } from "react/jsx-runtime";
+import { renderMath as l } from "@pie-element/shared-math-rendering-mathjax";
 //#region src/preview-prompt.tsx
-var l = o("div")(({ theme: r, tagName: i }) => ({
+var u = s("div")(({ theme: r, tagName: i }) => ({
 	"&: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",
@@ -38,31 +39,33 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 		cursor: "pointer",
 		"& > p": { margin: "0 0 0 0 !important" }
 	}
-})), u = /\\embed\{newLine\}\[\]/g, d = "\\newline ", f = "preview-prompt", p = class extends i {
+})), d = /\\embed\{newLine\}\[\]/g, f = "\\newline ", p = "preview-prompt", m = "pie-prompt-audio-player", h = "play-audio-button", g = class extends a {
 	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: o.string,
+		tagName: o.string,
+		className: o.string,
+		onClick: o.func,
+		defaultClassName: o.string,
+		autoplayAudioEnabled: o.bool,
+		customAudioButton: o.shape({
+			playImage: o.string,
+			pauseImage: o.string
 		})
 	};
 	static defaultProps = { onClick: () => {} };
-	promptRef = r.createRef();
+	promptRef = i.createRef();
+	audioId = r(m);
+	playButtonId = r(h);
 	parsedText = (e) => {
 		let { autoplayAudioEnabled: t, customAudioButton: n } = this.props, r = document.createElement("div");
 		r.innerHTML = e;
 		let i = r.querySelector("audio");
 		if (i) {
 			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) {
+			if (e.setAttribute("type", "audio/mp3"), e.setAttribute("src", i.getAttribute("src")), i.removeAttribute("src"), i.id = this.audioId, i.classList.add(m), i.appendChild(e), n) {
 				i.style.display = "none";
 				let e = document.createElement("div");
-				e.id = "play-audio-button", Object.assign(e.style, {
+				e.id = this.playButtonId, e.className = h, Object.assign(e.style, {
 					cursor: "pointer",
 					display: "block",
 					width: "128px",
@@ -77,31 +80,31 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 		return r.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(`.${h}`), i = n?.querySelector(`.${m}`);
+		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 +121,7 @@ var l = o("div")(({ theme: r, tagName: i }) => ({
 	}
 	renderMathContent() {
 		let e = this.promptRef.current;
-		e && typeof c == "function" && c(e);
+		e && typeof l == "function" && l(e);
 	}
 	alignImages() {
 		let e = this.promptRef.current;
@@ -138,16 +141,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" : ""} ${p}`.trim();
+		return /* @__PURE__ */ c(u, {
 			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(d, f) }
 		});
 	}
 };
 //#endregion
-export { p as PreviewPrompt, p as default };
+export { g as PreviewPrompt, g as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "8.0.1-next.20261005000911",
+  "version": "8.0.1-next.20261005005201",
   "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.20261005000911",
+    "@pie-lib/translator": "5.0.1-next.20261005003301",
     "debug": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^4.4.5",