@pie-lib/render-ui 6.1.1-next.37 → 6.1.1-next.39

package/dist/collapsible/index.js

@@ -50,4 +50,4 @@ var s = n("span")(({ theme: e }) => ({
 	}
 };
 //#endregion
-export { l as default };
+export { l as Collapsible, l as default };

package/dist/color.d.ts

@@ -35,6 +35,9 @@ export declare const defaults: {
     BORDER_LIGHT: string;
     BORDER_DARK: string;
     BORDER_GRAY: string;
+    TABLE_GRID: string;
+    TABLE_GRID_LIGHT: string;
+    TABLE_STRIPE: string;
     BLACK: string;
     WHITE: string;
     TRANSPARENT: string;
@@ -42,6 +45,7 @@ export declare const defaults: {
     FOCUS_CHECKED_BORDER: string;
     FOCUS_UNCHECKED: string;
     FOCUS_UNCHECKED_BORDER: string;
+    BUTTON_FOCUS_OUTLINE: string;
     BLUE_GREY100: string;
     BLUE_GREY300: string;
     BLUE_GREY600: string;
@@ -88,6 +92,9 @@ export declare const border: () => any;
 export declare const borderLight: () => any;
 export declare const borderDark: () => any;
 export declare const borderGray: () => any;
+export declare const tableGrid: () => any;
+export declare const tableGridLight: () => any;
+export declare const tableStripe: () => any;
 export declare const black: () => any;
 export declare const white: () => any;
 export declare const transparent: () => string;
@@ -95,6 +102,7 @@ export declare const focusChecked: () => any;
 export declare const focusCheckedBorder: () => any;
 export declare const focusUnchecked: () => any;
 export declare const focusUncheckedBorder: () => any;
+export declare const buttonFocusOutline: () => any;
 export declare const blueGrey100: () => any;
 export declare const blueGrey300: () => any;
 export declare const blueGrey600: () => any;

package/dist/color.js

@@ -1,79 +1,83 @@
-import { __exportAll as e } from "./_virtual/_rolldown/runtime.js";
-import { green as t, indigo as n, orange as r, pink as i, red as a } from "@mui/material/colors";
+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";
 //#region src/color.ts
-var o = /* @__PURE__ */ e({
-	background: () => j,
-	backgroundDark: () => M,
+var ne = /* @__PURE__ */ ee({
+	background: () => O,
+	backgroundDark: () => k,
 	black: () => B,
-	blueGrey100: () => q,
-	blueGrey300: () => J,
-	blueGrey600: () => Y,
-	blueGrey900: () => X,
-	border: () => ee,
-	borderDark: () => R,
-	borderGray: () => z,
-	borderLight: () => L,
-	buttonBorder: () => ie,
-	buttonHoverBg: () => ae,
-	correct: () => p,
-	correctSecondary: () => m,
-	correctTertiary: () => h,
-	correctWithIcon: () => g,
-	defaults: () => s,
-	disabled: () => d,
-	disabledSecondary: () => f,
-	dropdownBackground: () => P,
-	fadedPrimary: () => E,
+	blueGrey100: () => J,
+	blueGrey300: () => Y,
+	blueGrey600: () => X,
+	blueGrey900: () => Z,
+	border: () => N,
+	borderDark: () => F,
+	borderGray: () => I,
+	borderLight: () => P,
+	buttonBorder: () => ce,
+	buttonFocusOutline: () => q,
+	buttonHoverBg: () => le,
+	correct: () => u,
+	correctSecondary: () => d,
+	correctTertiary: () => f,
+	correctWithIcon: () => p,
+	defaults: () => i,
+	disabled: () => c,
+	disabledSecondary: () => l,
+	dropdownBackground: () => j,
+	fadedPrimary: () => C,
 	focusChecked: () => U,
 	focusCheckedBorder: () => W,
 	focusUnchecked: () => G,
 	focusUncheckedBorder: () => K,
-	incorrect: () => _,
-	incorrectSecondary: () => y,
-	incorrectWithIcon: () => v,
-	keyBoardFocusIndicator: () => re,
-	keypadButton: () => Z,
-	keypadButtonHover: () => te,
-	keypadButtonOperator: () => Q,
-	keypadButtonOperatorHover: () => ne,
-	keypadEmptyPlaceholder: () => $,
-	missing: () => b,
-	missingWithIcon: () => x,
-	primary: () => S,
-	primaryDark: () => w,
-	primaryLight: () => C,
-	primaryText: () => T,
-	secondary: () => D,
-	secondaryBackground: () => N,
-	secondaryDark: () => k,
-	secondaryLight: () => O,
-	secondaryText: () => A,
-	tertiary: () => F,
-	tertiaryLight: () => I,
-	text: () => u,
+	incorrect: () => m,
+	incorrectSecondary: () => g,
+	incorrectWithIcon: () => h,
+	keyBoardFocusIndicator: () => se,
+	keypadButton: () => Q,
+	keypadButtonHover: () => oe,
+	keypadButtonOperator: () => ie,
+	keypadButtonOperatorHover: () => $,
+	keypadEmptyPlaceholder: () => ae,
+	missing: () => _,
+	missingWithIcon: () => v,
+	primary: () => y,
+	primaryDark: () => x,
+	primaryLight: () => b,
+	primaryText: () => S,
+	secondary: () => w,
+	secondaryBackground: () => A,
+	secondaryDark: () => E,
+	secondaryLight: () => T,
+	secondaryText: () => D,
+	tableGrid: () => L,
+	tableGridLight: () => R,
+	tableStripe: () => z,
+	tertiary: () => re,
+	tertiaryLight: () => M,
+	text: () => s,
 	transparent: () => H,
-	v: () => c,
-	visualElementsColors: () => oe,
+	v: () => a,
+	visualElementsColors: () => ue,
 	white: () => V
-}), s = {
+}), i = {
 	TEXT: "black",
 	DISABLED: "grey",
 	DISABLED_SECONDARY: "#ABABAB",
-	CORRECT: t[500],
-	CORRECT_SECONDARY: t[50],
+	CORRECT: e[500],
+	CORRECT_SECONDARY: e[50],
 	CORRECT_TERTIARY: "#0EA449",
 	CORRECT_WITH_ICON: "#087D38",
-	INCORRECT: r[500],
-	INCORRECT_SECONDARY: a[50],
+	INCORRECT: te[500],
+	INCORRECT_SECONDARY: r[50],
 	INCORRECT_WITH_ICON: "#BF0D00",
-	MISSING: a[700],
+	MISSING: r[700],
 	MISSING_WITH_ICON: "#6A78A1",
-	PRIMARY: n[500],
-	PRIMARY_LIGHT: n[200],
-	PRIMARY_DARK: n[800],
-	SECONDARY: i.A400,
-	SECONDARY_LIGHT: i[200],
-	SECONDARY_DARK: i[900],
+	PRIMARY: t[500],
+	PRIMARY_LIGHT: t[200],
+	PRIMARY_DARK: t[800],
+	SECONDARY: n.A400,
+	SECONDARY_LIGHT: n[200],
+	SECONDARY_DARK: n[900],
 	TERTIARY: "#146EB3",
 	TERTIARY_LIGHT: "#D0E2F0",
 	BACKGROUND: "rgba(255,255,255,0)",
@@ -84,6 +88,9 @@ var o = /* @__PURE__ */ e({
 	BORDER_LIGHT: "#D1D1D1",
 	BORDER_DARK: "#646464",
 	BORDER_GRAY: "#7E8494",
+	TABLE_GRID: "black",
+	TABLE_GRID_LIGHT: "#dfe2e5",
+	TABLE_STRIPE: "#f6f8fa",
 	BLACK: "#000000",
 	WHITE: "#ffffff",
 	TRANSPARENT: "transparent",
@@ -91,6 +98,7 @@ var o = /* @__PURE__ */ e({
 	FOCUS_CHECKED_BORDER: "#1565C0",
 	FOCUS_UNCHECKED: "#E0E0E0",
 	FOCUS_UNCHECKED_BORDER: "#757575",
+	BUTTON_FOCUS_OUTLINE: "#3B82F6",
 	BLUE_GREY100: "#F3F5F7",
 	BLUE_GREY300: "#C0C3CF",
 	BLUE_GREY600: "#7E8494",
@@ -105,11 +113,11 @@ var o = /* @__PURE__ */ e({
 	BUTTON_BORDER: "rgba(0, 0, 0, 0.23)",
 	BUTTON_HOVER_BG: "rgba(0, 0, 0, 0.08)"
 };
-Object.freeze(s);
-var c = (e) => (...t) => {
-	let n = t.pop();
-	return t.reduceRight((t, n) => `var(--${e}-${n}, ${t})`, n);
-}, l = c("pie"), u = () => l("text", s.TEXT), d = () => l("disabled", s.DISABLED), f = () => l("disabled-secondary", s.DISABLED_SECONDARY), p = () => l("correct", s.CORRECT), m = () => l("correct-secondary", s.CORRECT_SECONDARY), h = () => l("correct-tertiary", s.CORRECT_TERTIARY), g = () => l("correct-icon", s.CORRECT_WITH_ICON), _ = () => l("incorrect", s.INCORRECT), v = () => l("incorrect-icon", s.INCORRECT_WITH_ICON), y = () => l("incorrect-secondary", s.INCORRECT_SECONDARY), b = () => l("missing", s.MISSING), x = () => l("missing-icon", s.MISSING_WITH_ICON), S = () => l("primary", s.PRIMARY), C = () => l("primary-light", s.PRIMARY_LIGHT), w = () => l("primary-dark", s.PRIMARY_DARK), T = () => l("primary-text", "text", s.TEXT), E = () => l("faded-primary", s.FADED_PRIMARY), D = () => l("secondary", s.SECONDARY), O = () => l("secondary-light", s.SECONDARY_LIGHT), k = () => l("secondary-dark", s.SECONDARY_DARK), A = () => l("secondary-text", "text", s.TEXT), j = () => l("background", s.BACKGROUND), M = () => l("background-dark", s.BACKGROUND_DARK), N = () => l("secondary-background", s.SECONDARY_BACKGROUND), P = () => l("dropdown-background", s.DROPDOWN_BACKGROUND), F = () => l("tertiary", s.TERTIARY), I = () => l("tertiary-light", s.TERTIARY_LIGHT), ee = () => l("border", s.BORDER), L = () => l("border-light", s.BORDER_LIGHT), R = () => l("border-dark", s.BORDER_DARK), z = () => l("border-gray", s.BORDER_GRAY), B = () => l("black", s.BLACK), V = () => l("white", s.WHITE), H = () => s.TRANSPARENT, U = () => l("focus-checked", s.FOCUS_CHECKED), W = () => l("focus-checked-border", s.FOCUS_CHECKED_BORDER), G = () => l("focus-unchecked", s.FOCUS_UNCHECKED), K = () => l("focus-unchecked-border", s.FOCUS_UNCHECKED_BORDER), q = () => l("blue-grey-100", s.BLUE_GREY100), J = () => l("blue-grey-300", s.BLUE_GREY300), Y = () => l("blue-grey-600", s.BLUE_GREY600), X = () => l("blue-grey-900", s.BLUE_GREY900), Z = () => l("keypad-button", s.KEYPAD_BUTTON), Q = () => l("keypad-button-operator", s.KEYPAD_BUTTON_OPERATOR), $ = () => l("keypad-empty-placeholder", s.KEYPAD_EMPTY_PLACEHOLDER), te = () => l("keypad-button-hover", s.KEYPAD_BUTTON_HOVER), ne = () => l("keypad-button-operator-hover", s.KEYPAD_BUTTON_OPERATOR_HOVER), re = () => l("keyboard-focus-indicator", s.KEY_BOARD_FOCUS_INDICATOR), ie = () => l("button-border", s.BUTTON_BORDER), ae = () => l("button-hover-bg", s.BUTTON_HOVER_BG), oe = {
+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("correct", i.CORRECT), d = () => o("correct-secondary", i.CORRECT_SECONDARY), f = () => o("correct-tertiary", i.CORRECT_TERTIARY), p = () => o("correct-icon", i.CORRECT_WITH_ICON), m = () => o("incorrect", i.INCORRECT), h = () => o("incorrect-icon", i.INCORRECT_WITH_ICON), g = () => o("incorrect-secondary", i.INCORRECT_SECONDARY), _ = () => o("missing", i.MISSING), v = () => o("missing-icon", i.MISSING_WITH_ICON), y = () => o("primary", i.PRIMARY), b = () => o("primary-light", i.PRIMARY_LIGHT), x = () => o("primary-dark", i.PRIMARY_DARK), S = () => o("primary-text", "text", i.TEXT), C = () => o("faded-primary", i.FADED_PRIMARY), w = () => o("secondary", i.SECONDARY), T = () => o("secondary-light", i.SECONDARY_LIGHT), E = () => o("secondary-dark", i.SECONDARY_DARK), D = () => o("secondary-text", "text", i.TEXT), O = () => o("background", i.BACKGROUND), k = () => o("background-dark", i.BACKGROUND_DARK), A = () => o("secondary-background", i.SECONDARY_BACKGROUND), j = () => o("dropdown-background", i.DROPDOWN_BACKGROUND), re = () => o("tertiary", i.TERTIARY), M = () => o("tertiary-light", i.TERTIARY_LIGHT), N = () => o("border", i.BORDER), P = () => o("border-light", i.BORDER_LIGHT), F = () => o("border-dark", i.BORDER_DARK), I = () => o("border-gray", i.BORDER_GRAY), L = () => o("table-grid", "text", i.TABLE_GRID), R = () => o("table-grid-light", "border-light", i.TABLE_GRID_LIGHT), z = () => o("table-stripe", "background-dark", i.TABLE_STRIPE), B = () => o("black", i.BLACK), V = () => o("white", i.WHITE), H = () => i.TRANSPARENT, U = () => o("focus-checked", i.FOCUS_CHECKED), W = () => o("focus-checked-border", i.FOCUS_CHECKED_BORDER), G = () => o("focus-unchecked", i.FOCUS_UNCHECKED), K = () => o("focus-unchecked-border", i.FOCUS_UNCHECKED_BORDER), q = () => o("button-focus-outline", i.BUTTON_FOCUS_OUTLINE), J = () => o("blue-grey-100", i.BLUE_GREY100), Y = () => o("blue-grey-300", i.BLUE_GREY300), X = () => o("blue-grey-600", i.BLUE_GREY600), Z = () => o("blue-grey-900", i.BLUE_GREY900), Q = () => o("keypad-button", i.KEYPAD_BUTTON), ie = () => o("keypad-button-operator", i.KEYPAD_BUTTON_OPERATOR), ae = () => o("keypad-empty-placeholder", i.KEYPAD_EMPTY_PLACEHOLDER), oe = () => o("keypad-button-hover", i.KEYPAD_BUTTON_HOVER), $ = () => o("keypad-button-operator-hover", i.KEYPAD_BUTTON_OPERATOR_HOVER), se = () => o("keyboard-focus-indicator", i.KEY_BOARD_FOCUS_INDICATOR), ce = () => o("button-border", i.BUTTON_BORDER), le = () => o("button-hover-bg", i.BUTTON_HOVER_BG), ue = {
 	AXIS_LINE_COLOR: "#5A53C9",
 	ROLLOVER_FILL_BAR_COLOR: "#050F2D",
 	GRIDLINES_COLOR: "#8E88EA",
@@ -117,4 +125,4 @@ var c = (e) => (...t) => {
 	SHAPES_FILL_COLOR: "#7986cb"
 };
 //#endregion
-export { o as color_exports, p as correct, d as disabled, _ as incorrect, u as text };
+export { O as background, k as backgroundDark, B as black, J as blueGrey100, Y as blueGrey300, X as blueGrey600, Z as blueGrey900, N as border, F as borderDark, I as borderGray, P as borderLight, ce as buttonBorder, q as buttonFocusOutline, le as buttonHoverBg, ne as color_exports, u as correct, d as correctSecondary, f as correctTertiary, p as correctWithIcon, i as defaults, c as disabled, l as disabledSecondary, j as dropdownBackground, C as fadedPrimary, U as focusChecked, W as focusCheckedBorder, G as focusUnchecked, K as focusUncheckedBorder, m as incorrect, g as incorrectSecondary, h as incorrectWithIcon, se as keyBoardFocusIndicator, Q as keypadButton, oe as keypadButtonHover, ie as keypadButtonOperator, $ as keypadButtonOperatorHover, ae as keypadEmptyPlaceholder, _ as missing, v as missingWithIcon, y as primary, x as primaryDark, b as primaryLight, S as primaryText, w as secondary, A as secondaryBackground, E as secondaryDark, T as secondaryLight, D as secondaryText, L as tableGrid, R as tableGridLight, z as tableStripe, re as tertiary, M as tertiaryLight, s as text, H as transparent, a as v, ue as visualElementsColors, V as white };

package/dist/feedback.js

@@ -62,4 +62,4 @@ var l = a("div")({
 	}
 };
 //#endregion
-export { f as default };
+export { f as Feedback, f as default };

package/dist/index.js

@@ -1,13 +1,13 @@
 import { color_exports as e } from "./color.js";
-import t from "./feedback.js";
+import { Feedback as t } from "./feedback.js";
 import { response_indicators_exports as n } from "./response-indicators.js";
-import r from "./collapsible/index.js";
+import { Collapsible as r } from "./collapsible/index.js";
 import i from "./withUndoReset.js";
 import a from "./ui-layout.js";
 import o from "./preview-layout.js";
 import s from "./html-and-math.js";
 import c from "./input-container.js";
-import l from "./preview-prompt.js";
+import { PreviewPrompt as l } from "./preview-prompt.js";
 import u from "./readable.js";
 import d from "./purpose.js";
 import { hasText as f } from "./has-text.js";

package/dist/preview-prompt.d.ts

@@ -24,6 +24,7 @@ export declare class PreviewPrompt extends Component {
     static defaultProps: {
         onClick: () => void;
     };
+    promptRef: React.RefObject<unknown>;
     parsedText: any;
     addCustomAudioButtonControls(): void;
     removeCustomAudioButtonListeners(): void;

package/dist/preview-prompt.js

@@ -1,20 +1,18 @@
-import { text as e } from "./color.js";
-import { Component as t } from "react";
-import n from "prop-types";
-import { styled as r } from "@mui/material/styles";
-import { jsx as i } from "react/jsx-runtime";
-import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+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";
 //#region src/preview-prompt.tsx
-var o = r("div")(({ theme: t, tagName: n }) => ({
+var l = o("div")(({ theme: r, tagName: i }) => ({
 	"&:not(.MathJax) > table:not([role=\"presentation\"])": { borderCollapse: "collapse" },
-	"&: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: "#f6f8fa",
-		color: t.palette.common.black
-	},
-	"&:not(.MathJax) > table:not([role=\"presentation\"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td": {
-		backgroundColor: "#f6f8fa",
-		color: t.palette.common.black
+	"&: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()
 	},
+	"&: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\"]) td, &:not(.MathJax) table:not([role=\"presentation\"]) th": {
 		padding: ".6em 1em",
 		textAlign: "left"
@@ -22,38 +20,39 @@ var o = r("div")(({ theme: t, tagName: n }) => ({
 	"&:not(.MathJax) > table td > p.kds-indent": { textAlign: "initial" },
 	"&.prompt": {
 		verticalAlign: "middle",
-		color: e()
+		color: n()
 	},
 	"&.legend": {
 		width: "100%",
 		fontSize: "inherit !important"
 	},
 	"&.rationale": {
-		paddingLeft: t.spacing(4),
-		paddingBottom: t.spacing(1)
+		paddingLeft: r.spacing(4),
+		paddingBottom: r.spacing(1)
 	},
 	"&.prompt-label": {
-		color: `${e()} !important`,
+		color: `${n()} !important`,
 		display: "flex",
 		flexDirection: "column",
 		verticalAlign: "middle",
 		cursor: "pointer",
 		"& > p": { margin: "0 0 0 0 !important" }
 	}
-})), s = /\\embed\{newLine\}\[\]/g, c = "\\newline ", l = class extends t {
+})), u = /\\embed\{newLine\}\[\]/g, d = "\\newline ", f = "preview-prompt", p = class extends i {
 	static propTypes = {
-		prompt: n.string,
-		tagName: n.string,
-		className: n.string,
-		onClick: n.func,
-		defaultClassName: n.string,
-		autoplayAudioEnabled: n.bool,
-		customAudioButton: n.shape({
-			playImage: n.string,
-			pauseImage: n.string
+		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
 		})
 	};
 	static defaultProps = { onClick: () => {} };
+	promptRef = r.createRef();
 	parsedText = (e) => {
 		let { customAudioButton: t } = this.props, n = document.createElement("div");
 		n.innerHTML = e;
@@ -118,37 +117,37 @@ var o = r("div")(({ theme: t, tagName: n }) => ({
 		this.renderMathContent();
 	}
 	renderMathContent() {
-		let e = document.getElementById("preview-prompt");
-		e && typeof a == "function" && a(e);
+		let e = this.promptRef.current;
+		e && typeof c == "function" && c(e);
 	}
 	alignImages() {
-		document.querySelectorAll("#preview-prompt").forEach((e) => {
-			let t = e.getElementsByTagName("img");
-			if (t && t.length) {
-				for (let e of t) if (e.attributes && e.attributes.alignment && e.attributes.alignment.value) {
-					let t = e.attributes.alignment.value, n = t === "center" ? "center" : t === "right" ? "flex-end" : "flex-start", r = e.parentElement;
-					if (r.tagName === "DIV" && r.style.display === "flex" && r.style.width === "100%") r.style.justifyContent = n;
-					else {
-						let t = document.createElement("div");
-						t.style.display = "flex", t.style.width = "100%", t.style.justifyContent = n;
-						let i = e.cloneNode(!0);
-						t.appendChild(i), r.replaceChild(t, e);
-					}
+		let e = this.promptRef.current;
+		if (!e) return;
+		let t = e.getElementsByTagName("img");
+		if (t && t.length) {
+			for (let e of t) if (e.attributes && e.attributes.alignment && e.attributes.alignment.value) {
+				let t = e.attributes.alignment.value, n = t === "center" ? "center" : t === "right" ? "flex-end" : "flex-start", r = e.parentElement;
+				if (r.tagName === "DIV" && r.style.display === "flex" && r.style.width === "100%") r.style.justifyContent = n;
+				else {
+					let t = document.createElement("div");
+					t.style.display = "flex", t.style.width = "100%", t.style.justifyContent = n;
+					let i = e.cloneNode(!0);
+					t.appendChild(i), r.replaceChild(t, e);
 				}
 			}
-		});
+		}
 	}
 	render() {
-		let { prompt: e, tagName: t, className: n, onClick: r, defaultClassName: a } = this.props, l = `${n || ""} ${a || ""} ${t === "legend" ? "legend" : ""}`.trim();
-		return /* @__PURE__ */ i(o, {
+		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, {
 			as: t || "div",
-			id: "preview-prompt",
+			ref: this.promptRef,
 			onClick: r,
-			className: l,
+			className: a,
 			tagName: t,
-			dangerouslySetInnerHTML: { __html: this.parsedText(e || "").replace(s, c) }
+			dangerouslySetInnerHTML: { __html: this.parsedText(e || "").replace(u, d) }
 		});
 	}
 };
 //#endregion
-export { l as default };
+export { p as PreviewPrompt, p as default };

package/dist/response-indicators.js

@@ -1,5 +1,5 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.js";
-import t from "./feedback.js";
+import { Feedback as t } from "./feedback.js";
 import n from "react";
 import r from "prop-types";
 import * as i from "@pie-lib/icons";
@@ -59,4 +59,4 @@ var u = /* @__PURE__ */ e({
 	return a.propTypes = { feedback: r.string }, a;
 }, g = h(i.Correct, "correct"), _ = h(i.Incorrect, "incorrect"), v = h(i.PartiallyCorrect, "partially-correct"), y = h(i.NothingSubmitted, "nothing-submitted");
 //#endregion
-export { u as response_indicators_exports };
+export { g as Correct, _ as Incorrect, y as NothingSubmitted, v as PartiallyCorrect, u as response_indicators_exports };

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@pie-lib/render-ui",
-  "version": "6.1.1-next.37",
+  "version": "6.1.1-next.39",
   "description": "Some shared ui elements when rendering - but not worthy of their own package yet.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/lib-react/render-ui"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
@@ -13,7 +18,7 @@
     "prop-types": "^15.7.2",
     "react-transition-group": "^4.4.5",
     "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-element/shared-lodash": "0.1.1-next.0"
+    "@pie-element/shared-lodash": "0.1.1-next.1"
   },
   "type": "module",
   "main": "./dist/index.js",