@pie-lib/editable-html-tip-tap 2.2.0-beta.9 → 3.0.0-next.36

package/dist/components/media/MediaWrapper.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/media/MediaWrapper.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';
+declare class MediaWrapper extends React.Component {
+    static propTypes: {
+        children: PropTypes.Requireable<any[]>;
+        editor: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+    render(): React.JSX.Element;
+}
+export default MediaWrapper;

package/dist/components/respArea/DragInTheBlank/DragInTheBlank.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/DragInTheBlank.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 const onValueChange: (editor: any, node: any, pos: any, choice: any) => void;
+export declare const onRemoveResponse: (editor: any, node: any, choice: any) => void;
+declare const DragDrop: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        data: PropTypes.Requireable<object>;
+        n: PropTypes.Requireable<object>;
+        nodeProps: PropTypes.Requireable<object>;
+        opts: PropTypes.Requireable<object>;
+    };
+};
+export default DragDrop;

package/dist/components/respArea/DragInTheBlank/DragInTheBlank.js

@@ -0,0 +1,58 @@
+import e from "./choice.js";
+import "react";
+import { omit as t } from "@pie-element/shared-lodash";
+import { NodeViewWrapper as n } from "@tiptap/react";
+import r from "prop-types";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/respArea/DragInTheBlank/DragInTheBlank.tsx
+var a = (e, t, n, r) => {
+	let { tr: i } = e.state;
+	i.setNodeMarkup(n, void 0, {
+		...t.attrs,
+		...r.value
+	}), i.isDone = !0, e.view.dispatch(i);
+}, o = (e, n, r) => {
+	let { tr: i } = e.state;
+	i.setNodeMarkup(r.pos, void 0, t(n.attrs, ["value", "id"])), i.isDone = !0, e.view.dispatch(i);
+}, s = (t) => {
+	let { editor: r, node: s, getPos: c, options: l, selected: u } = t, { attrs: d } = s, { inTable: f } = d, p = c();
+	return /* @__PURE__ */ i(n, {
+		className: "drag-in-the-blank",
+		"data-selected": u,
+		style: {
+			display: "inline",
+			whiteSpace: "normal"
+		},
+		children: /* @__PURE__ */ i("span", {
+			...d,
+			style: {
+				display: "inline-flex",
+				minHeight: "50px",
+				minWidth: "178px",
+				position: "relative",
+				margin: f ? "10px" : "0 10px",
+				cursor: "pointer"
+			},
+			children: /* @__PURE__ */ i(e, {
+				n: d,
+				dragKey: d.id,
+				targetId: "0",
+				pos: p,
+				value: d,
+				duplicates: l.duplicates,
+				selected: u,
+				onChange: (e) => a(r, s, p, e),
+				removeResponse: (e) => o(r, s, e)
+			})
+		})
+	});
+};
+s.propTypes = {
+	attributes: r.object,
+	data: r.object,
+	n: r.object,
+	nodeProps: r.object,
+	opts: r.object
+};
+//#endregion
+export { s as default, o as onRemoveResponse, a as onValueChange };

package/dist/components/respArea/DragInTheBlank/choice.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/DragInTheBlank/choice.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 function BlankContent({ n, children, isDragging, isOver, dragItem, value, selected }: {
+    n: any;
+    children: any;
+    isDragging: any;
+    isOver: any;
+    dragItem: any;
+    value: any;
+    selected: any;
+}): React.JSX.Element;
+export declare namespace BlankContent {
+    var propTypes: {
+        n: PropTypes.Requireable<object>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        isDragging: PropTypes.Requireable<boolean>;
+        isOver: PropTypes.Requireable<boolean>;
+        dragItem: PropTypes.Requireable<object>;
+        value: PropTypes.Requireable<object>;
+        selected: PropTypes.Requireable<boolean>;
+    };
+}
+declare function DragDropChoice({ value, disabled, instanceId, children, n, onChange, removeResponse, duplicates, pos, selected, }: {
+    value: any;
+    disabled: any;
+    instanceId: any;
+    children: any;
+    n: any;
+    onChange: any;
+    removeResponse: any;
+    duplicates: any;
+    pos: any;
+    selected: any;
+}): React.JSX.Element;
+declare namespace DragDropChoice {
+    var propTypes: {
+        value: PropTypes.Requireable<object>;
+        disabled: PropTypes.Requireable<boolean>;
+        instanceId: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        n: PropTypes.Validator<object>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        removeResponse: PropTypes.Validator<(...args: any[]) => any>;
+        duplicates: PropTypes.Requireable<boolean>;
+        selected: PropTypes.Requireable<boolean>;
+    };
+}
+export default DragDropChoice;

package/dist/components/respArea/DragInTheBlank/choice.js

@@ -0,0 +1,157 @@
+import { clsx as e } from "../../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { GripIcon as t } from "../../icons/RespArea.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { styled as a } from "@mui/material/styles";
+import o from "prop-types";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useDraggable as l, useDroppable as u } from "@dnd-kit/core";
+import { color as d } from "@pie-lib/render-ui";
+import { renderMath as f } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/components/respArea/DragInTheBlank/choice.tsx
+var p = a("span")(({ theme: e }) => ({
+	border: `solid 0px ${e.palette.primary.main}`,
+	"& mjx-mn:has(~ mjx-mfrac), mjx-mfrac ~ mjx-mn": { fontSize: "120% !important" },
+	"& mjx-frac": { fontSize: "120% !important" }
+}));
+function m({ n: e, children: a, isDragging: o, isOver: l, dragItem: u, value: p, selected: m }) {
+	let [h, g] = i(null), _ = r(null), v = (e) => {
+		_.current && (_.current.contains(e.target) ? _.current.classList.add("selected") : _.current.classList.remove("selected"));
+	};
+	n(() => (document.addEventListener("click", v), () => {
+		document.removeEventListener("click", v);
+	}), []), n(() => {
+		_.current && typeof f == "function" && f(_.current);
+	}, [
+		p?.value,
+		l,
+		u?.value?.value
+	]), n(() => {
+		if (l && _.current && !h) {
+			let e = _.current;
+			g({
+				width: e.offsetWidth,
+				height: e.offsetHeight
+			});
+		} else !l && h && g(null);
+	}, [l, h]);
+	let y = u && l ? u.value.value : p.value || "\xA0", b = o ? "\xA0" : y, x = b !== "\xA0", S = u && l, C = m ? `2px solid ${d.primaryDark()}` : S ? `1px solid ${d.defaults.BORDER_DARK}` : `1px solid ${d.defaults.BORDER_LIGHT}`;
+	return /* @__PURE__ */ c("div", {
+		ref: _,
+		className: m ? "selected" : void 0,
+		style: {
+			display: "inline-flex",
+			minWidth: "178px",
+			minHeight: "36px",
+			background: S ? `${d.defaults.BORDER_LIGHT}` : `${d.defaults.WHITE}`,
+			border: C,
+			boxSizing: "border-box",
+			borderRadius: "3px",
+			overflow: "hidden",
+			position: "relative",
+			padding: "8px 8px 8px 35px",
+			width: h ? h.width : void 0,
+			height: h ? h.height : void 0,
+			touchAction: "none"
+		},
+		"data-key": e.index,
+		contentEditable: !1,
+		children: [
+			x && /* @__PURE__ */ s(t, {
+				style: {
+					position: "absolute",
+					top: "6px",
+					left: "15px",
+					color: "#9B9B9B"
+				},
+				contentEditable: !1
+			}),
+			/* @__PURE__ */ s("span", { dangerouslySetInnerHTML: { __html: b } }),
+			a
+		]
+	});
+}
+m.propTypes = {
+	n: o.object,
+	children: o.node,
+	isDragging: o.bool,
+	isOver: o.bool,
+	dragItem: o.object,
+	value: o.object,
+	selected: o.bool
+};
+function h({ value: t, disabled: n, instanceId: r, children: i, n: a, onChange: o, removeResponse: c, duplicates: d, pos: f, selected: h }) {
+	let { attributes: g, listeners: _, setNodeRef: v, isDragging: y } = l({
+		id: `drag-${a.index}`,
+		disabled: n || !t?.value,
+		data: {
+			id: `drag-${a.index}`,
+			value: t,
+			instanceId: r,
+			n: a,
+			pos: f,
+			opts: { duplicates: d },
+			type: "drag-in-the-blank-placed-choice",
+			fromChoice: !t,
+			onRemove: (e) => c(e),
+			onDrop: (e, t) => {
+				t?.type === "drag-in-the-blank-drop-choice" && (o(e), !d && e.fromChoice && c(e));
+			}
+		}
+	}), { setNodeRef: b, isOver: x, active: S } = u({
+		id: `drop-${a.index}`,
+		data: {
+			type: "drag-in-the-blank-drop-choice",
+			accepts: ["drag-in-the-blank-choice", "drag-in-the-blank-placed-choice"],
+			instanceId: r,
+			value: t,
+			id: `drop-${a.index}`,
+			pos: f,
+			n: a,
+			opts: { duplicates: d },
+			onDrop: (e, t) => {
+				if (t?.type === "drag-in-the-blank-drop-choice" && e.value.id !== t.value.id) {
+					if (e.type === "drag-in-the-blank-choice") {
+						o(e), !d && e.fromChoice && c(e);
+						return;
+					}
+					e.type === "drag-in-the-blank-placed-choice" && (c(t), o(e), setTimeout(() => c(e), 10));
+				}
+			}
+		}
+	}), C = (e) => {
+		v(e), b(e);
+	}, w = /* @__PURE__ */ s(m, {
+		n: a,
+		isDragging: y,
+		isOver: x,
+		dragItem: S?.data?.current,
+		value: t,
+		selected: h,
+		children: i
+	}), T = t ? /* @__PURE__ */ s("span", {
+		ref: C,
+		...g,
+		..._,
+		children: w
+	}) : /* @__PURE__ */ s("span", {
+		ref: b,
+		children: w
+	});
+	return /* @__PURE__ */ s(p, {
+		className: e(x && "over"),
+		children: T
+	});
+}
+h.propTypes = {
+	value: o.object,
+	disabled: o.bool,
+	instanceId: o.string,
+	children: o.node,
+	n: o.object.isRequired,
+	onChange: o.func.isRequired,
+	removeResponse: o.func.isRequired,
+	duplicates: o.bool,
+	selected: o.bool
+};
+//#endregion
+export { m as BlankContent, h as default };

package/dist/components/respArea/ExplicitConstructedResponse.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/ExplicitConstructedResponse.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';
+declare const ExplicitConstructedResponse: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        error: PropTypes.Requireable<any>;
+        value: PropTypes.Requireable<string>;
+        isFocused: PropTypes.Requireable<boolean>;
+    };
+};
+export default ExplicitConstructedResponse;

package/dist/components/respArea/ExplicitConstructedResponse.js

@@ -0,0 +1,84 @@
+import e from "../../extensions/custom-toolbar-wrapper.js";
+import { setToolbarOpened as t } from "../../utils/toolbar.js";
+import n, { useEffect as r, useRef as i, useState as a } from "react";
+import { NodeViewWrapper as o } from "@tiptap/react";
+import s from "react-dom";
+import c from "prop-types";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/respArea/ExplicitConstructedResponse.tsx
+var d = (c) => {
+	let { editor: d, node: f, getPos: p, options: m, selected: h } = c, { attrs: g } = f, { value: _ } = g, { respAreaToolbar: v, error: y } = m, b = p(), [x, S] = a(!1), C = v([f, b], d, () => {}), w = i(null), T;
+	if (y) {
+		let e = y(), t = parseInt(g.index, 10);
+		T = !!e?.[t]?.[0];
+	}
+	return r(() => {
+		let { selection: e } = d.state, t = e.from + f.nodeSize === e.to;
+		h ? t && S(h) : S(h);
+	}, [
+		d,
+		f,
+		h
+	]), r(() => {
+		let e = (e) => {
+			!(e.target.closest(".insert-character-dialog") || e.target.closest("[data-toolbar-for]")) && w.current && !w.current.contains(e.target) && !e.target.closest("[data-inline-node]") && S(!1);
+		};
+		return x ? document.addEventListener("mousedown", e) : document.removeEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [x]), /* @__PURE__ */ u(o, {
+		className: "drag-in-the-blank",
+		"data-selected": h,
+		style: {
+			display: "inline-flex",
+			minHeight: "55px",
+			position: "relative",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ l("div", {
+			...g,
+			style: {
+				display: "inline-flex",
+				width: "100%",
+				minHeight: "46px",
+				height: "46px",
+				backgroundColor: "#FFF",
+				border: `1px solid ${T ? "red" : "#C0C3CF"}`,
+				boxSizing: "border-box",
+				borderRadius: "4px",
+				overflow: "hidden",
+				padding: "12px 21px",
+				margin: "0 4px",
+				minWidth: "178px",
+				visibility: x ? "hidden" : "visible"
+			},
+			onClick: () => S(!0),
+			dangerouslySetInnerHTML: { __html: _ || "<div>&nbsp;</div>" }
+		}), x && /* @__PURE__ */ u(n.Fragment, { children: [/* @__PURE__ */ l("div", {
+			ref: w,
+			className: "absolute z-50 bg-white shadow-lg rounded p-2",
+			style: { zIndex: 1 },
+			children: /* @__PURE__ */ l(C, {})
+		}), d._tiptapContainerEl && s.createPortal(/* @__PURE__ */ l(e, {
+			deletable: !0,
+			toolbarOpts: { minWidth: "auto" },
+			autoWidth: !0,
+			style: {
+				top: -40,
+				left: 0,
+				right: 0
+			},
+			onDelete: () => {
+				let { tr: e } = d.state;
+				e.delete(b, b + f.nodeSize), t(d, !1), d.view.dispatch(e), S(!1), d.commands.focus();
+			},
+			showDone: !1
+		}), d._tiptapContainerEl)] })]
+	});
+};
+d.propTypes = {
+	attributes: c.object,
+	error: c.any,
+	value: c.string,
+	isFocused: c.bool
+};
+//#endregion
+export { d as default };

package/dist/components/respArea/InlineDropdown.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/InlineDropdown.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';
+declare const InlineDropdown: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        selectedItem: PropTypes.Requireable<NonNullable<string | object | null | undefined>>;
+    };
+};
+export default InlineDropdown;

package/dist/components/respArea/InlineDropdown.js

@@ -0,0 +1,126 @@
+import e from "../../extensions/custom-toolbar-wrapper.js";
+import { setToolbarOpened as t } from "../../utils/toolbar.js";
+import { Chevron as n } from "../icons/RespArea.js";
+import r, { useEffect as i, useRef as a, useState as o } from "react";
+import { NodeViewWrapper as s } from "@tiptap/react";
+import { NodeSelection as c } from "prosemirror-state";
+import l from "react-dom";
+import u from "prop-types";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { renderMath as p } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/components/respArea/InlineDropdown.tsx
+var m = (u) => {
+	let { editor: m, node: h, getPos: g, options: _, selected: v } = u, { attrs: y } = h, { value: b, error: x } = y, S = b || "<div>&nbsp</div>", C = g(), w = a(null), T = a(null), E = a(!1), D = a(null), O = () => m._holdInlineDropdownToolbarIndex != null && String(m._holdInlineDropdownToolbarIndex) === String(h.attrs.index), [k, A] = o(!1), [j, M] = o({
+		top: 0,
+		left: 0
+	}), N = () => {
+		O() || (A(!1), _.onInlineDropdownToolbarClose?.(m));
+	}, P = _.respAreaToolbar([h, C], m, N), F = () => {
+		let { tr: e } = m.state, t = e.doc.nodeAt(C);
+		if (!t) return;
+		let { selection: n } = e;
+		n.from === C && n.to === C + t.nodeSize || (e.setSelection(c.create(e.doc, C)), m.view.dispatch(e));
+	}, I = () => {
+		E.current || (_.onToolbarCloseRequest ? (E.current = !0, _.onToolbarCloseRequest([h, C], m, () => {
+			E.current = !1, delete m._holdInlineDropdownToolbarIndex, N();
+		}, () => {
+			E.current = !1, delete m._holdInlineDropdownToolbarIndex, A(!0), setTimeout(F, 0);
+		})) : N());
+	};
+	i(() => {
+		let { selection: e } = m.state, t = e.from + h.nodeSize === e.to;
+		v ? t && A(!0) : k && I();
+	}, [
+		m,
+		h,
+		v
+	]);
+	let L = (e) => e.clientX > document.documentElement.clientWidth || e.clientY > document.documentElement.clientHeight || e.target === document.documentElement;
+	return i(() => {
+		D.current && typeof p == "function" && p(D.current);
+	}, [b]), i(() => {
+		let e = document.body.getBoundingClientRect(), { from: t } = m.state.selection, n = m.view.coordsAtPos(t);
+		M({
+			top: n.top + Math.abs(e.top) + 40,
+			left: n.left
+		});
+		let r = (e) => {
+			if (L(e)) return;
+			let t = e.target.closest("[data-toolbar-for]");
+			!e.target.closest("[data-inline-dropdown-toolbar]") && (!t || t.dataset.toolbarFor !== T.current?.instanceId) && !m._toolbarOpened && w.current && !w.current.contains(e.target) && !e.target.closest("[data-inline-node]") && I();
+		};
+		return k ? document.addEventListener("mousedown", r) : document.removeEventListener("mousedown", r), () => document.removeEventListener("mousedown", r);
+	}, [k, h]), /* @__PURE__ */ f(s, {
+		className: "inline-dropdown",
+		"data-selected": v,
+		style: {
+			display: "inline-flex",
+			height: "50px",
+			cursor: "pointer"
+		},
+		children: [/* @__PURE__ */ f("div", {
+			ref: D,
+			style: {
+				display: "inline-flex",
+				minWidth: "178px",
+				height: "36px",
+				background: "#FFF",
+				border: "1px solid #C0C3CF",
+				boxSizing: "border-box",
+				borderRadius: "3px",
+				margin: "0 2px",
+				position: "relative",
+				alignItems: "center"
+			},
+			onClick: () => A(!0),
+			children: [/* @__PURE__ */ d("div", {
+				style: {
+					flex: 1,
+					overflow: "hidden",
+					padding: "0 25px 0 8px",
+					whiteSpace: "nowrap",
+					textOverflow: "ellipsis"
+				},
+				children: /* @__PURE__ */ d("span", {
+					style: {
+						display: "inline-block",
+						verticalAlign: "middle"
+					},
+					dangerouslySetInnerHTML: { __html: S }
+				})
+			}), /* @__PURE__ */ d(n, {
+				direction: "down",
+				style: {
+					position: "absolute",
+					top: "5px",
+					right: "5px"
+				}
+			})]
+		}), k && /* @__PURE__ */ f(r.Fragment, { children: [l.createPortal(/* @__PURE__ */ d("div", {
+			ref: w,
+			children: /* @__PURE__ */ d(P, { editorCallback: (e) => {
+				T.current = e;
+			} })
+		}), m?._tiptapContainerEl || document.body), m._tiptapContainerEl && l.createPortal(/* @__PURE__ */ d(e, {
+			deletable: !0,
+			toolbarOpts: { minWidth: "auto" },
+			autoWidth: !0,
+			style: {
+				top: -40,
+				left: 0,
+				right: 0
+			},
+			onDelete: () => {
+				let { tr: e } = m.state;
+				e.delete(C, C + h.nodeSize), t(m, !1), delete m._holdInlineDropdownToolbarIndex, m.view.dispatch(e), A(!1), m.commands.focus();
+			},
+			showDone: !1
+		}), m._tiptapContainerEl)] })]
+	});
+};
+m.propTypes = {
+	attributes: u.object,
+	selectedItem: u.oneOfType([u.string, u.object])
+};
+//#endregion
+export { m as default };

package/dist/components/respArea/MathTemplated.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/respArea/MathTemplated.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';
+declare const MathTemplated: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        attributes: PropTypes.Requireable<object>;
+        value: PropTypes.Requireable<string>;
+        keyToDisplay: PropTypes.Requireable<string>;
+    };
+};
+export default MathTemplated;

package/dist/components/respArea/MathTemplated.js

@@ -0,0 +1,98 @@
+import "react";
+import { NodeViewWrapper as e } from "@tiptap/react";
+import { styled as t } from "@mui/material/styles";
+import n from "prop-types";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { color as a } from "@pie-lib/render-ui";
+import { mq as o } from "@pie-lib/math-input";
+//#region src/components/respArea/MathTemplated.tsx
+var s = t("span")(() => ({
+	display: "inline-flex",
+	border: `1px solid ${a.border()}`,
+	margin: "1px 5px",
+	cursor: "pointer",
+	alignItems: "center",
+	justifyContent: "center",
+	minWidth: "50px",
+	minHeight: "36px",
+	height: "fit-content"
+})), c = t("div")(() => ({
+	background: a.backgroundDark(),
+	color: a.text(),
+	display: "inline-flex",
+	borderRight: `2px solid ${a.border()}`,
+	boxSizing: "border-box",
+	overflow: "hidden",
+	fontSize: "12px",
+	minHeight: "36px",
+	height: "100%",
+	alignItems: "center",
+	fontFamily: "Symbola, Times New Roman, serif",
+	padding: "0 2px"
+})), l = t("div")(() => ({
+	flex: 8,
+	color: "var(--pie-text, black)",
+	padding: "4px !important",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	backgroundColor: "var(--pie-background, rgba(255, 255, 255, 0))",
+	"& > .mq-math-mode sup.mq-nthroot": {
+		fontSize: "70% !important",
+		verticalAlign: "1em !important"
+	},
+	"& > .mq-math-mode .mq-sqrt-stem": {
+		borderTop: "0.07em solid",
+		marginLeft: "-1.5px",
+		marginTop: "-2px !important",
+		paddingTop: "5px !important"
+	},
+	"& .mq-overarrow-inner": {
+		paddingTop: "0 !important",
+		border: "none !important"
+	},
+	"& .mq-overarrow.mq-arrow-both": {
+		marginTop: "0px",
+		minWidth: "1.23em",
+		"& *": { lineHeight: "1 !important" },
+		"&:before": {
+			top: "-0.4em",
+			left: "-1px"
+		},
+		"&:after": {
+			top: "0px !important",
+			position: "absolute !important",
+			right: "-2px"
+		},
+		"&.mq-empty:after": { top: "-0.45em" }
+	},
+	"& .mq-overarrow.mq-arrow-right": { "&:before": {
+		top: "-0.4em",
+		right: "-1px"
+	} },
+	"& .mq-overarrow-inner-right": { display: "none !important" },
+	"& .mq-overarrow-inner-left": { display: "none !important" }
+})), u = (t) => {
+	let { node: n, options: a, selected: u } = t, { attrs: d } = n, { value: f, index: p } = d, m = `R ${parseInt(p) + 1}`;
+	return /* @__PURE__ */ r(e, {
+		className: "math-templated",
+		"data-selected": u,
+		style: {
+			display: "inline-flex",
+			minHeight: "36px",
+			minWidth: "50px",
+			cursor: "pointer"
+		},
+		children: /* @__PURE__ */ i(s, {
+			...d,
+			children: [/* @__PURE__ */ r(c, { children: m }), /* @__PURE__ */ r(l, { children: /* @__PURE__ */ r(o.Static, { latex: f }) })]
+		})
+	});
+};
+u.propTypes = {
+	attributes: n.object,
+	value: n.string,
+	keyToDisplay: n.string
+};
+//#endregion
+export { u as default };