@pie-element/match-list 7.1.1-next.11 → 7.1.2-next.0

package/dist/controller/index.js

@@ -0,0 +1,105 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "./defaults.js";
+import n from "debug";
+import { getFeedbackForCorrectness as r } from "@pie-element/shared-feedback";
+import { getShuffledChoices as i, lockChoices as a, partialScoring as o } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var s = n("@pie-element:match-list:controller"), c = (e, t, n) => {
+	let r = o.enabled(e, n), i = e.prompts;
+	if (!t || Object.keys(t).length === 0) return "unanswered";
+	let a = d(e), s = u(i, t);
+	return a === s ? "correct" : s === 0 ? "incorrect" : r ? "partial" : "incorrect";
+}, l = (e, t, n) => {
+	if (t.mode === "evaluate") return c(e, n, t);
+}, u = (e = [], t) => {
+	let n = 0;
+	return e.forEach((e) => {
+		e.relatedAnswer === t[e.id] && (n += 1);
+	}), n;
+}, d = (e) => e && e.prompts ? e.prompts.length : 0, f = (e, t) => {
+	let n = u(e && e.prompts, t), r = d(e);
+	return parseFloat((n / r).toFixed(2));
+}, p = (e, t, n) => {
+	let r = l(e, t, n);
+	return r === "correct" ? 1 : r === "partial" ? f(e, n) : 0;
+}, m = (e, t, n) => {
+	let r = [], i = e?.prompts || [], a = t?.value || {};
+	if (!a || Object.keys(a).length === 0) return r.push("Student did not provide any answer."), r;
+	let s = i.length;
+	r.push(`Match-list item contains ${s} question(s).`);
+	let c = 0, l = 0;
+	i.forEach((e) => {
+		let t = e.relatedAnswer, n = a[e.id];
+		n === void 0 ? r.push(`Question ${e.id}: no answer provided.`) : (l += 1, n === t ? (c += 1, r.push(`Question ${e.id}: correctly matched.`)) : r.push(`Question ${e.id}: incorrectly matched (selected '${n}', expected '${t}').`));
+	}), r.push(`Student correctly matched ${c} out of ${s} question(s).`);
+	let u = o.enabled(e, n);
+	u ? (r.push("Score calculated using partial scoring."), r.push("Score is the number of correct matches divided by the total number of questions.")) : (r.push("Score calculated using all-or-nothing scoring."), r.push("Student must match all questions correctly to receive full credit."));
+	let d = p(e, n, a), f = u ? d : +(d === 1);
+	return r.push(`Final score: ${f}.`), r;
+}, h = (t, n, r) => new Promise((i) => {
+	r.mode === "evaluate" ? !n || e(n) ? i({
+		score: 0,
+		empty: !0,
+		logTrace: ["Student did not provide any answer."]
+	}) : i({
+		score: p(t, r, n.value),
+		empty: !1,
+		logTrace: m(t, n, r)
+	}) : i({
+		score: void 0,
+		completed: void 0,
+		logTrace: []
+	});
+});
+function g(e = {}) {
+	return new Promise((n) => {
+		n({
+			...t,
+			...e
+		});
+	});
+}
+var _ = (e) => ({
+	...t,
+	...e
+});
+async function v(t, n, o, c) {
+	t = _(t);
+	let u = l(t, o, n && n.value), d = {}, f = {
+		score: `${p(t, o, n && n.value) * 100}%`,
+		correctness: u
+	}, m = {}, h = t.prompts, g = t.answers, v = (e) => (t, n, r) => new Promise((t) => {
+		m[e] = r.shuffledValues, t();
+	});
+	a(t, n, o) || (h = await i(h, { shuffledValues: (n && n.shuffledValues || {}).prompts }, v("prompts"), "id"), g = await i(g, { shuffledValues: (n && n.shuffledValues || {}).answers }, v("answers"), "id")), e(m) || c && typeof c == "function" && c(n.id, n.element, { shuffledValues: m }).catch((e) => {
+		console.error("update session failed", e);
+	}), t && h && h.forEach((e) => {
+		d[e.id] = e.relatedAnswer;
+	});
+	let y = o.mode === "evaluate" ? await r(f.correctness, t.feedback) : void 0, b = {
+		config: {
+			...t,
+			prompts: h,
+			answers: g
+		},
+		correctness: f,
+		feedback: y,
+		mode: o.mode
+	};
+	o.role === "instructor" && (o.mode === "view" || o.mode === "evaluate") ? b.rationale = t.rationale : b.rationale = null;
+	let x = Object.assign(b, { correctResponse: d });
+	return s("out: ", x), x;
+}
+var y = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { prompts: t, answers: r } = e, i = {};
+		t.forEach((e) => {
+			r.filter((t) => t.id === e.relatedAnswer).length && (i[e.id] = e.relatedAnswer);
+		}), n({
+			value: i,
+			id: "1"
+		});
+	} else n(null);
+});
+//#endregion
+export { y as createCorrectResponseSession, g as createDefaultModel, m as getLogTrace, v as model, _ as normalize, h as outcome };

package/dist/delivery/answer-area.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/answer-area.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 AnswerArea extends React.Component {
+    static propTypes: {
+        session: PropTypes.Validator<object>;
+        showCorrect: PropTypes.Validator<boolean>;
+        disabled: PropTypes.Validator<boolean>;
+        onSessionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemoveAnswer: PropTypes.Requireable<(...args: any[]) => any>;
+        instanceId: PropTypes.Validator<string>;
+        model: PropTypes.Validator<object>;
+        prompt: PropTypes.Requireable<string>;
+    };
+    getAnswerFromSession: any;
+    getCorrectOrIncorrectMap: any;
+    buildRows: any;
+    render(): React.JSX.Element;
+}
+export default AnswerArea;

package/dist/delivery/answer-area.js

@@ -0,0 +1,94 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/reduce.js";
+import r from "./arrow.js";
+import i from "./answer.js";
+import a from "react";
+import o from "prop-types";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { styled as l } from "@mui/material/styles";
+//#region src/delivery/answer-area.tsx
+var u = l("div")({
+	alignItems: "normal",
+	display: "flex",
+	height: 40,
+	margin: "10px 20px"
+}), d = l("div")(({ theme: e }) => ({
+	alignItems: "flex-start",
+	display: "flex",
+	flex: 1,
+	flexDirection: "column",
+	justifyContent: "space-between",
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), f = l("div")(({ theme: e }) => ({
+	border: `1px solid ${e.palette.grey[400]}`,
+	boxSizing: "border-box",
+	flex: 1,
+	margin: "10px 0",
+	minHeight: 40,
+	overflow: "hidden",
+	padding: 10,
+	textAlign: "center",
+	width: "100%",
+	wordBreak: "break-word"
+})), p = l("div")({
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "space-between",
+	width: "100%"
+}), m = class extends a.Component {
+	static propTypes = {
+		session: o.object.isRequired,
+		showCorrect: o.bool.isRequired,
+		disabled: o.bool.isRequired,
+		onSessionChange: o.func,
+		onRemoveAnswer: o.func,
+		instanceId: o.string.isRequired,
+		model: o.object.isRequired,
+		prompt: o.string
+	};
+	getAnswerFromSession = (e) => {
+		let { model: t, session: n, showCorrect: r } = this.props, { config: i } = t, a = r ? i.prompts.find((t) => t.id === e).relatedAnswer : n.value && n.value[e];
+		return i.answers.find((e) => e.id === a) || {};
+	};
+	getCorrectOrIncorrectMap = () => {
+		let { model: e, session: r, showCorrect: i } = this.props, { config: a } = e, o = r.value || a.prompts.reduce((e, t) => (e[t.id] = void 0, e), {});
+		if (e.mode !== "evaluate") return {};
+		if (i) return a.prompts.reduce((e, t) => (e[t.id] = !0, e), {});
+		let s = a.prompts.reduce((e, n) => (t(n.relatedAnswer) || (e[n.id] = n.relatedAnswer), e), {});
+		return n(o, (e, t, n) => (e[n] = s[n] === o[n], e), {});
+	};
+	buildRows = () => {
+		let { model: e } = this.props, { config: t } = e;
+		return (t.prompts || []).map((e) => {
+			let t = this.getAnswerFromSession(e.id);
+			return {
+				...e,
+				sessionAnswer: t
+			};
+		});
+	};
+	render() {
+		let { disabled: t, instanceId: n, onRemoveAnswer: a } = this.props, o = this.buildRows(), l = this.getCorrectOrIncorrectMap();
+		return /* @__PURE__ */ s(d, { children: o.map(({ sessionAnswer: o, title: d, id: m }, h) => /* @__PURE__ */ c(p, { children: [
+			/* @__PURE__ */ s(f, { dangerouslySetInnerHTML: { __html: d } }),
+			/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ s(r, { direction: "left" }), /* @__PURE__ */ s(r, {})] }),
+			/* @__PURE__ */ s(i, {
+				className: "answer",
+				index: h,
+				promptId: m,
+				correct: l[m],
+				draggable: !e(o),
+				disabled: t,
+				instanceId: n,
+				id: o.id,
+				title: o.title,
+				type: "target",
+				onRemoveChoice: () => a(m)
+			}, h)
+		] }, h)) });
+	}
+};
+//#endregion
+export { m as default };

package/dist/delivery/answer.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/answer.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 PropTypes from 'prop-types';
+import React from 'react';
+export declare class Answer extends React.Component {
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        isDragging: PropTypes.Requireable<boolean>;
+        id: PropTypes.Requireable<any>;
+        title: PropTypes.Requireable<string>;
+        isOver: PropTypes.Requireable<boolean>;
+        empty: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        correct: PropTypes.Requireable<boolean>;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    handleTouchStart: any;
+    render(): React.JSX.Element;
+}
+declare function DragAndDropAnswer(props: any): React.JSX.Element;
+declare namespace DragAndDropAnswer {
+    var propTypes: {
+        id: PropTypes.Requireable<any>;
+        instanceId: PropTypes.Requireable<string>;
+        promptId: PropTypes.Requireable<any>;
+        title: PropTypes.Requireable<string>;
+        draggable: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        type: PropTypes.Requireable<string>;
+    };
+}
+export default DragAndDropAnswer;

package/dist/delivery/answer.js

@@ -0,0 +1,176 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "react";
+import n from "debug";
+import r from "prop-types";
+import { PlaceHolder as i } from "@pie-lib/drag";
+import { useDraggable as a, useDroppable as o } from "@dnd-kit/core";
+import { color as s } from "@pie-lib/render-ui";
+import { jsx as c } from "react/jsx-runtime";
+import { styled as l } from "@mui/material/styles";
+//#region src/delivery/answer.tsx
+var u = n("pie-elements:match-title:answer"), d = l("div")(({ theme: e }) => ({
+	width: "100%",
+	fontSize: "18px",
+	textAlign: "center",
+	color: `rgba(${e.palette.common.black}, 0.6)`
+})), f = ({ index: e, isOver: t, disabled: n, type: r }) => /* @__PURE__ */ c(i, {
+	extraStyles: {
+		display: "flex",
+		padding: "0",
+		alignItems: "center",
+		justifyContent: "center",
+		height: "40px"
+	},
+	disabled: n,
+	isOver: t,
+	type: r,
+	children: e !== void 0 && /* @__PURE__ */ c(d, { children: e })
+});
+f.propTypes = {
+	index: r.number,
+	isOver: r.bool,
+	disabled: r.bool,
+	type: r.string
+};
+var p = l("div")(({ theme: e, isDragging: t, isOver: n, disabled: r, outcome: i }) => ({
+	color: s.text(),
+	backgroundColor: s.white(),
+	border: `1px solid ${i === "correct" ? s.correct() : i === "incorrect" ? s.incorrect() : e.palette.grey[400]}`,
+	cursor: r ? "not-allowed" : "pointer",
+	width: "100%",
+	padding: "10px",
+	boxSizing: "border-box",
+	overflow: "hidden",
+	transition: "opacity 200ms linear",
+	wordBreak: "break-word",
+	opacity: t && !r ? .5 : n && !r ? .2 : 1,
+	touchAction: "none"
+})), m = (e) => {
+	let { isDragging: t, isOver: n, title: r, disabled: i, empty: a, outcome: o, guideIndex: s, type: l } = e;
+	return a ? /* @__PURE__ */ c(f, {
+		index: s,
+		isOver: n,
+		disabled: i,
+		type: l
+	}) : /* @__PURE__ */ c(p, {
+		isDragging: t,
+		isOver: n,
+		disabled: i,
+		outcome: o,
+		dangerouslySetInnerHTML: { __html: r }
+	});
+}, h = l("div")(({ correct: e, theme: t }) => ({
+	boxSizing: "border-box",
+	minHeight: 40,
+	minWidth: "200px",
+	overflow: "hidden",
+	margin: t.spacing(.5),
+	padding: "0px",
+	textAlign: "center",
+	height: "initial",
+	border: e === !0 ? `1px solid var(--feedback-correct-bg-color, ${s.correct()})` : e === !1 ? `1px solid var(--feedback-incorrect-bg-color, ${s.incorrect()})` : "none"
+})), g = class extends t.Component {
+	static propTypes = {
+		className: r.string,
+		isDragging: r.bool,
+		id: r.any,
+		title: r.string,
+		isOver: r.bool,
+		empty: r.bool,
+		type: r.string,
+		disabled: r.bool,
+		correct: r.bool
+	};
+	componentDidMount() {
+		this.ref && this.ref.addEventListener("touchstart", this.handleTouchStart, { passive: !0 });
+	}
+	componentWillUnmount() {
+		this.ref && this.ref.removeEventListener("touchstart", this.handleTouchStart);
+	}
+	handleTouchStart = (e) => {};
+	render() {
+		let { id: t, title: n, isDragging: r = !1, className: i, disabled: a, isOver: o = !1, type: s, correct: l } = this.props;
+		return u("[render], props: ", this.props), /* @__PURE__ */ c(h, {
+			correct: l,
+			className: i,
+			ref: (e) => this.ref = e,
+			children: /* @__PURE__ */ c(m, {
+				title: n,
+				id: t,
+				isOver: o,
+				empty: e(n),
+				isDragging: r,
+				disabled: a,
+				type: s
+			})
+		});
+	}
+};
+function _(e) {
+	let { id: t, instanceId: n, promptId: r, draggable: i = !0, disabled: s = !1, type: l } = e, u = `${l || "answer"}-${t}`, d = r == null ? void 0 : `drop-${r}`, { attributes: f, listeners: p, setNodeRef: m, transform: h, transition: _, isDragging: v } = a({
+		id: u,
+		data: {
+			type: l || "answer",
+			id: t,
+			instanceId: n,
+			value: e.title,
+			promptId: r
+		},
+		disabled: !i || s
+	}), y = o({
+		id: d,
+		data: d ? {
+			type: "drop-zone",
+			promptId: r,
+			instanceId: n
+		} : void 0,
+		disabled: s || !d
+	}), b = y.setNodeRef, x = y.isOver, S = h ? `translate3d(${h.x}px, ${h.y}px, 0)` : void 0;
+	return d ? /* @__PURE__ */ c("div", {
+		ref: b,
+		style: {
+			flex: 1,
+			transform: S,
+			transition: _,
+			opacity: v ? .5 : 1,
+			backgroundColor: x ? "rgba(0,0,0,0.05)" : "transparent"
+		},
+		children: /* @__PURE__ */ c("div", {
+			ref: m,
+			...p,
+			...f,
+			children: /* @__PURE__ */ c(g, {
+				...e,
+				isDragging: v,
+				isOver: x
+			})
+		})
+	}) : /* @__PURE__ */ c("div", {
+		ref: m,
+		...p,
+		...f,
+		style: {
+			transform: S,
+			transition: _,
+			cursor: s ? "not-allowed" : "grab",
+			opacity: v ? .5 : 1,
+			touchAction: i && !s ? "none" : "auto"
+		},
+		children: /* @__PURE__ */ c(g, {
+			...e,
+			isDragging: v,
+			isOver: !1
+		})
+	});
+}
+_.propTypes = {
+	id: r.any,
+	instanceId: r.string,
+	promptId: r.any,
+	title: r.string,
+	draggable: r.bool,
+	disabled: r.bool,
+	type: r.string
+};
+//#endregion
+export { g as Answer, _ as default };

package/dist/delivery/arrow.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/arrow.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 Arrow extends React.Component {
+    static propTypes: {
+        direction: PropTypes.Requireable<string>;
+    };
+    render(): React.JSX.Element;
+}
+export default Arrow;

package/dist/delivery/arrow.js

@@ -0,0 +1,35 @@
+import e from "react";
+import t from "prop-types";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { styled as i } from "@mui/material/styles";
+import a from "@mui/icons-material/ArrowDropDown";
+//#region src/delivery/arrow.tsx
+var o = i("div")({
+	display: "inline-block",
+	position: "relative",
+	width: "100%"
+}), s = i("span")(({ theme: e, isRight: t }) => ({
+	backgroundColor: e.palette.grey[500],
+	bottom: t ? 20 : 19,
+	content: "\"\"",
+	display: "block",
+	height: 1,
+	left: 20,
+	position: "absolute",
+	width: "100%"
+})), c = class extends e.Component {
+	static propTypes = { direction: t.string };
+	render() {
+		let { direction: e } = this.props;
+		return /* @__PURE__ */ r(o, {
+			style: e === "left" ? {} : { transform: "rotate(180deg)" },
+			children: [/* @__PURE__ */ n(a, { style: {
+				transform: "rotate(90deg)",
+				color: "#979797",
+				fontSize: 40
+			} }), /* @__PURE__ */ n(s, { isRight: e !== "left" })]
+		});
+	}
+};
+//#endregion
+export { c as default };

package/dist/delivery/choices-list.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/choices-list.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 ChoicesList extends React.Component {
+    static propTypes: {
+        session: PropTypes.Validator<object>;
+        instanceId: PropTypes.Validator<string>;
+        model: PropTypes.Validator<object>;
+        disabled: PropTypes.Validator<boolean>;
+        onRemoveAnswer: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    render(): React.JSX.Element;
+}
+export default ChoicesList;

package/dist/delivery/choices-list.js

@@ -0,0 +1,37 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/find.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import n from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isUndefined.js";
+import r from "./answer.js";
+import i from "./droppable-placeholder.js";
+import a from "react";
+import o from "prop-types";
+import { jsx as s } from "react/jsx-runtime";
+import { styled as c } from "@mui/material/styles";
+//#region src/delivery/choices-list.tsx
+var l = c("div")(({ theme: e }) => ({ marginBottom: e.spacing(2) })), u = class extends a.Component {
+	static propTypes = {
+		session: o.object.isRequired,
+		instanceId: o.string.isRequired,
+		model: o.object.isRequired,
+		disabled: o.bool.isRequired,
+		onRemoveAnswer: o.func
+	};
+	render() {
+		let { model: a, disabled: o, session: c, instanceId: u, onRemoveAnswer: d } = this.props, { config: f } = a, { duplicates: p } = f;
+		return /* @__PURE__ */ s(l, { children: /* @__PURE__ */ s(i, {
+			id: "choices-pool",
+			disabled: o,
+			onRemoveAnswer: d,
+			children: f.answers.filter((r) => p || t(c) || !c.value || n(e(c.value, (e) => e === r.id))).map((e) => /* @__PURE__ */ s(r, {
+				instanceId: u,
+				draggable: !0,
+				disabled: o,
+				session: c,
+				type: "choice",
+				...e
+			}, e.id))
+		}) });
+	}
+};
+//#endregion
+export { u as default };

package/dist/delivery/droppable-placeholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/droppable-placeholder.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 DroppablePlaceholder({ id, disabled, children, ...rest }: {
+    [x: string]: any;
+    id: any;
+    disabled: any;
+    children: any;
+}): React.JSX.Element;
+export declare namespace DroppablePlaceholder {
+    var propTypes: {
+        id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        disabled: PropTypes.Requireable<boolean>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+}
+export default DroppablePlaceholder;

package/dist/delivery/droppable-placeholder.js

@@ -0,0 +1,42 @@
+import "react";
+import e from "prop-types";
+import { MatchDroppablePlaceholder as t } from "@pie-lib/drag";
+import { useDroppable as n } from "@dnd-kit/core";
+import { jsx as r } from "react/jsx-runtime";
+import { styled as i } from "@mui/material/styles";
+//#region src/delivery/droppable-placeholder.tsx
+var a = i("div")(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexDirection: "row",
+	flexWrap: "wrap",
+	justifyContent: "space-between",
+	marginTop: e.spacing(1),
+	marginBottom: e.spacing(1),
+	minHeight: 50,
+	transition: "background-color 200ms ease"
+}));
+function o({ id: e, disabled: i, children: o, ...s }) {
+	let { setNodeRef: c, isOver: l } = n({
+		id: e || "choices-pool",
+		data: { type: "choices-pool" },
+		disabled: i
+	});
+	return /* @__PURE__ */ r(a, {
+		ref: c,
+		style: { backgroundColor: l ? "rgba(0,0,0,0.05)" : "transparent" },
+		...s,
+		children: /* @__PURE__ */ r(t, {
+			id: e,
+			disabled: i,
+			children: o
+		})
+	});
+}
+o.propTypes = {
+	id: e.oneOfType([e.string, e.number]),
+	disabled: e.bool,
+	children: e.node
+};
+//#endregion
+export { o as default };

package/dist/delivery/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/match-list/src/index.js
+ * @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 Main from './main.js';
+export { Main as Component };
+export declare const isComplete: (session: any, model: any) => boolean;
+export default class MatchList extends HTMLElement {
+    constructor();
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    sessionChanged(s: any): void;
+    connectedCallback(): void;
+    _render(): void;
+    disconnectedCallback(): void;
+}