@pie-element/categorize 13.2.0-beta.0 → 13.2.0-next.9

package/dist/author/design/categories/category.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/category.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 Category extends React.Component {
+    static propTypes: {
+        alternateResponseIndex: PropTypes.Requireable<number>;
+        category: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        defaultImageMaxHeight: PropTypes.Requireable<number>;
+        defaultImageMaxWidth: PropTypes.Requireable<number>;
+        deleteFocusedEl: PropTypes.Requireable<(...args: any[]) => any>;
+        focusedEl: PropTypes.Requireable<number>;
+        index: PropTypes.Requireable<number>;
+        error: PropTypes.Requireable<string>;
+        isDuplicated: PropTypes.Requireable<boolean>;
+        maxImageWidth: PropTypes.Requireable<object>;
+        maxImageHeight: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+        onDeleteChoice: PropTypes.Requireable<(...args: any[]) => any>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        spellCheck: PropTypes.Requireable<boolean>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        isAlternate: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {};
+    changeLabel: any;
+    render(): React.JSX.Element;
+}
+export default Category;

package/dist/author/design/categories/category.js

@@ -0,0 +1,98 @@
+import { InputHeader as e } from "../input-header.js";
+import { DeleteButton as t } from "../buttons.js";
+import n from "./droppable-placeholder.js";
+import r from "react";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import c from "@mui/material/Card";
+import l from "@mui/material/CardActions";
+//#region src/author/design/categories/category.tsx
+var u = a(c, { shouldForwardProp: (e) => e !== "isDuplicated" })(({ theme: e, isDuplicated: t }) => ({
+	minWidth: "196px",
+	padding: e.spacing(1),
+	overflow: "visible",
+	...t && { border: "1px solid red" }
+})), d = a(l)(({ theme: e }) => ({ padding: `${e.spacing(1)} 0 0` })), f = a("div")(({ theme: e }) => ({
+	padding: e.spacing(2),
+	"& p": { margin: 0 }
+})), p = a("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingBottom: e.spacing(1)
+})), m = class extends r.Component {
+	static propTypes = {
+		alternateResponseIndex: i.number,
+		category: i.object.isRequired,
+		configuration: i.object.isRequired,
+		defaultImageMaxHeight: i.number,
+		defaultImageMaxWidth: i.number,
+		deleteFocusedEl: i.func,
+		focusedEl: i.number,
+		index: i.number,
+		error: i.string,
+		isDuplicated: i.bool,
+		maxImageWidth: i.object,
+		maxImageHeight: i.object,
+		onChange: i.func,
+		onDelete: i.func,
+		onDeleteChoice: i.func,
+		imageSupport: i.shape({
+			add: i.func.isRequired,
+			delete: i.func.isRequired
+		}),
+		toolbarOpts: i.object,
+		spellCheck: i.bool,
+		uploadSoundSupport: i.shape({
+			add: i.func.isRequired,
+			delete: i.func.isRequired
+		}),
+		isAlternate: i.bool
+	};
+	static defaultProps = {};
+	changeLabel = (e) => {
+		let { category: t, onChange: n } = this.props;
+		t.label = e, n(t);
+	};
+	render() {
+		let { alternateResponseIndex: r, category: i, configuration: a, deleteFocusedEl: c, focusedEl: l, index: m, error: h, isDuplicated: g, onDelete: _, onDeleteChoice: v, imageSupport: y, spellCheck: b, toolbarOpts: x, maxImageWidth: S, maxImageHeight: C, uploadSoundSupport: w, mathMlOptions: T = {} } = this.props;
+		return /* @__PURE__ */ s(u, {
+			isDuplicated: g,
+			children: [
+				/* @__PURE__ */ s("span", { children: [r || r === 0 ? /* @__PURE__ */ o(f, { dangerouslySetInnerHTML: { __html: i.label } }) : /* @__PURE__ */ o(e, {
+					label: i.label,
+					focusedEl: l,
+					deleteFocusedEl: c,
+					index: m,
+					disabled: !!r || r === 0,
+					error: h,
+					onChange: this.changeLabel,
+					onDelete: _,
+					imageSupport: y,
+					toolbarOpts: x,
+					spellCheck: b,
+					maxImageWidth: S,
+					maxImageHeight: C,
+					uploadSoundSupport: w,
+					mathMlOptions: T,
+					configuration: a
+				}), h && /* @__PURE__ */ o(p, { children: h })] }),
+				/* @__PURE__ */ o(n, {
+					alternateResponseIndex: r,
+					category: i,
+					choices: i.choices,
+					onDeleteChoice: v,
+					categoryId: i.id,
+					extraStyles: { minHeight: "100px" },
+					isAlternate: this.props.isAlternate
+				}),
+				_ && /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(t, {
+					label: "delete",
+					onClick: _
+				}) })
+			]
+		});
+	}
+};
+//#endregion
+export { m as Category, m as default };

package/dist/author/design/categories/choice-preview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/choice-preview.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 ChoicePreview extends React.Component {
+    static propTypes: {
+        alternateResponseIndex: PropTypes.Requireable<number>;
+        category: PropTypes.Requireable<object>;
+        choice: PropTypes.Validator<object>;
+        choiceIndex: PropTypes.Requireable<number>;
+        onDelete: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {
+        onDelete: () => void;
+    };
+    delete: any;
+    render(): React.JSX.Element;
+}
+export default ChoicePreview;

package/dist/author/design/categories/choice-preview.js

@@ -0,0 +1,60 @@
+import e from "react";
+import * as t from "@pie-lib/render-ui";
+import { HtmlAndMath as n, color as r } from "@pie-lib/render-ui";
+import i from "prop-types";
+import { styled as a } from "@mui/material/styles";
+import { DraggableChoice as o } from "@pie-lib/drag";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/IconButton";
+import u from "@mui/icons-material/RemoveCircleOutline";
+//#region src/author/design/categories/choice-preview.tsx
+function d(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function f(e, t) {
+	return !e || d(e) ? e : d(e.default) ? e.default : t && d(e[t]) ? e[t] : t && d(e[t]?.default) ? e[t].default : e;
+}
+var p = f(n, "HtmlAndMath") || f(g.HtmlAndMath, "HtmlAndMath"), m = t, h = m.default, g = h && typeof h == "object" ? h : m, _ = a("div")({
+	position: "relative",
+	overflow: "auto",
+	touchAction: "none"
+}), v = a(l)({
+	position: "absolute",
+	right: 0,
+	top: 0,
+	color: `${r.tertiary()} !important`
+}), y = class extends e.Component {
+	static propTypes = {
+		alternateResponseIndex: i.number,
+		category: i.object,
+		choice: i.object.isRequired,
+		choiceIndex: i.number,
+		onDelete: i.func
+	};
+	static defaultProps = { onDelete: () => {} };
+	delete = () => {
+		let { onDelete: e, choice: t } = this.props;
+		e(t);
+	};
+	render() {
+		let { alternateResponseIndex: e, category: t, choice: n, choiceIndex: r } = this.props, i = t && t.id, a = e === void 0 ? `${n.id}-${i}-${r}` : `${n.id}-${i}-${r}-alt-${e}`;
+		return /* @__PURE__ */ c(_, { children: [n ? /* @__PURE__ */ s(o, {
+			alternateResponseIndex: e,
+			category: t,
+			choice: n,
+			choiceIndex: r,
+			onRemoveChoice: this.delete,
+			type: "choice-preview",
+			id: a,
+			categoryId: i,
+			children: /* @__PURE__ */ s(p, { html: n?.content })
+		}) : null, /* @__PURE__ */ s(v, {
+			"aria-label": "delete",
+			onClick: this.delete,
+			size: "large",
+			children: /* @__PURE__ */ s(u, {})
+		})] });
+	}
+};
+//#endregion
+export { y as ChoicePreview, y as default };

package/dist/author/design/categories/droppable-placeholder.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/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';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/dist/author/design/categories/droppable-placeholder.js

@@ -0,0 +1,71 @@
+import { ChoicePreview as e } from "./choice-preview.js";
+import t from "react";
+import n from "prop-types";
+import r from "debug";
+import { styled as i } from "@mui/material/styles";
+import { useDroppable as a } from "@dnd-kit/core";
+import { PlaceHolder as o, uid as s } from "@pie-lib/drag";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/author/design/categories/droppable-placeholder.tsx
+r("@pie-element:categorize:configure");
+var l = i("div")(({ theme: e }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	fontSize: e.typography.fontSize - 2,
+	color: `rgba(${e.palette.common.black}, 0.4)`,
+	width: "100%",
+	height: "100%"
+})), u = () => /* @__PURE__ */ c(l, { children: "Drag your correct answers here" }), d = ({ alternateResponseIndex: n, category: r, choices: i, onDeleteChoice: a }) => /* @__PURE__ */ c(t.Fragment, { children: (i || []).map((t, i) => t && /* @__PURE__ */ c(e, {
+	alternateResponseIndex: n,
+	category: r,
+	choice: t,
+	choiceIndex: i,
+	onDelete: (e) => a(e, i)
+}, i)) });
+d.propTypes = {
+	alternateResponseIndex: n.number,
+	category: n.object,
+	choices: n.array,
+	onDeleteChoice: n.func
+};
+var f = ({ alternateResponseIndex: e, category: t, choices: n, onDeleteChoice: r, categoryId: i, isAlternate: s }) => {
+	let { setNodeRef: l, isOver: f } = a({
+		id: `${i}-${s ? "alternate" : "standard"}`,
+		data: {
+			accepts: ["choice", "choice-preview"],
+			alternateResponseIndex: e,
+			categoryId: i,
+			type: s ? "category-alternate" : "category",
+			id: i
+		}
+	});
+	return /* @__PURE__ */ c("div", {
+		ref: l,
+		children: /* @__PURE__ */ c(o, {
+			isOver: f,
+			extraStyles: {
+				width: "100%",
+				minHeight: "100px",
+				height: "auto"
+			},
+			children: (n || []).length === 0 ? /* @__PURE__ */ c(u, {}) : /* @__PURE__ */ c(d, {
+				alternateResponseIndex: e,
+				category: t,
+				choices: n,
+				onDeleteChoice: r
+			})
+		})
+	});
+};
+f.propTypes = {
+	alternateResponseIndex: n.number,
+	category: n.object,
+	choices: n.array,
+	onDeleteChoice: n.func,
+	categoryId: n.string.isRequired,
+	isAlternate: n.bool
+};
+var p = s.withUid(f);
+//#endregion
+export { p as default };

package/dist/author/design/categories/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/index.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 Categories extends React.Component {
+    static propTypes: {
+        defaultImageMaxHeight: PropTypes.Requireable<number>;
+        defaultImageMaxWidth: PropTypes.Requireable<number>;
+        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        uploadSoundSupport: PropTypes.Requireable<PropTypes.InferProps<{
+            add: PropTypes.Validator<(...args: any[]) => any>;
+            delete: PropTypes.Validator<(...args: any[]) => any>;
+        }>>;
+        categories: PropTypes.Requireable<any[]>;
+        onModelChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        toolbarOpts: PropTypes.Requireable<object>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    state: {
+        focusedEl: null;
+    };
+    add: any;
+    deleteFocusedEl: any;
+    delete: any;
+    change: any;
+    deleteChoiceFromCategory: any;
+    changeRowLabel: any;
+    render(): React.JSX.Element;
+}
+export default Categories;

package/dist/author/design/categories/index.js

@@ -0,0 +1,146 @@
+import { Category as e } from "./category.js";
+import { Header as t } from "../header.js";
+import { generateValidationMessage as n } from "../../utils.js";
+import { RowLabel as r } from "./RowLabel.js";
+import i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { removeCategory as s, removeChoiceFromCategory as c } from "@pie-lib/categorize";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { choiceUtils as d } from "@pie-lib/config-ui";
+import f from "@mui/icons-material/Info";
+import p from "@mui/material/Tooltip";
+//#region src/author/design/categories/index.tsx
+var m = o("div")(({ theme: e }) => ({ marginBottom: e.spacing(3) })), h = o("div")(({ theme: e }) => ({
+	display: "grid",
+	gridRowGap: e.spacing(1),
+	gridColumnGap: e.spacing(1)
+})), g = o(p)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+	fontSize: e.typography.fontSize - 2,
+	whiteSpace: "pre",
+	maxWidth: "500px"
+} })), _ = o("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(.5)
+})), v = class extends i.Component {
+	static propTypes = {
+		defaultImageMaxHeight: a.number,
+		defaultImageMaxWidth: a.number,
+		imageSupport: a.shape({
+			add: a.func.isRequired,
+			delete: a.func.isRequired
+		}),
+		uploadSoundSupport: a.shape({
+			add: a.func.isRequired,
+			delete: a.func.isRequired
+		}),
+		categories: a.array,
+		onModelChanged: a.func,
+		model: a.object.isRequired,
+		configuration: a.object.isRequired,
+		toolbarOpts: a.object,
+		spellCheck: a.bool
+	};
+	state = { focusedEl: null };
+	add = () => {
+		let { model: e, categories: t } = this.props, { categoriesPerRow: n, correctResponse: r, allowAlternateEnabled: i } = e, a = d.firstAvailableIndex(e.categories.map((e) => e.id), 1), o = {
+			id: a,
+			label: "Category " + a
+		}, s = e.categories.length % n === 0, c = [...e.rowLabels];
+		s && c.push(""), this.setState({ focusedEl: t.length }, () => {
+			this.props.onModelChanged({
+				rowLabels: c,
+				categories: e.categories.concat([o]),
+				correctResponse: i ? [...r, {
+					category: a,
+					choices: [],
+					alternateResponses: []
+				}] : r
+			});
+		});
+	};
+	deleteFocusedEl = () => {
+		this.setState({ focusedEl: null });
+	};
+	delete = (e) => {
+		let { model: t, onModelChanged: n } = this.props, r = t.categories.findIndex((t) => t.id === e.id);
+		r !== -1 && (t.categories.splice(r, 1), t.correctResponse = s(e.id, t.correctResponse), n(t));
+	};
+	change = (e) => {
+		let { categories: t } = this.props, n = t.findIndex((t) => t.id === e.id);
+		n !== -1 && (t.splice(n, 1, e), this.props.onModelChanged({ categories: t }));
+	};
+	deleteChoiceFromCategory = (e, t, n) => {
+		let { model: r, onModelChanged: i } = this.props;
+		i({ correctResponse: c(t.id, e.id, n, r.correctResponse) });
+	};
+	changeRowLabel = (e, t) => {
+		let { model: n } = this.props, { rowLabels: r } = n, i = [...r];
+		i.length < t ? i.push(e) : i[t] = e, this.props.onModelChanged({ rowLabels: i });
+	};
+	render() {
+		let { model: a, categories: o, imageSupport: s, uploadSoundSupport: c, toolbarOpts: d, spellCheck: p, configuration: v, defaultImageMaxHeight: y, defaultImageMaxWidth: b, mathMlOptions: x = {} } = this.props, { categoriesPerRow: S, rowLabels: C, errors: w } = a, { associationError: T, categoriesError: E, categoriesErrors: D } = w || {}, { maxCategories: O, maxImageWidth: k = {}, maxImageHeight: A = {} } = v || {}, j = { gridTemplateColumns: `repeat(${S}, 1fr)` }, M = n(v);
+		return /* @__PURE__ */ u(m, { children: [
+			/* @__PURE__ */ l(t, {
+				label: "Categories",
+				buttonLabel: "ADD A CATEGORY",
+				onAdd: this.add,
+				info: /* @__PURE__ */ l(g, {
+					disableFocusListener: !0,
+					disableTouchListener: !0,
+					placement: "right",
+					title: M,
+					children: /* @__PURE__ */ l(f, {
+						fontSize: "small",
+						color: "primary",
+						style: { marginLeft: "5px" }
+					})
+				}),
+				buttonDisabled: O && o && O === o.length
+			}),
+			/* @__PURE__ */ l(h, {
+				style: j,
+				children: o.map((t, n) => {
+					let a = n % S === 0, o = n / S;
+					return /* @__PURE__ */ u(i.Fragment, { children: [a && /* @__PURE__ */ l(r, {
+						categoriesPerRow: S,
+						disabled: !1,
+						rowIndex: o,
+						markup: C[o] || "",
+						onChange: (e) => this.changeRowLabel(e, o),
+						imageSupport: s,
+						toolbarOpts: d,
+						spellCheck: p,
+						maxImageWidth: k && k.rowLabel || b,
+						maxImageHeight: A && A.rowLabel || y,
+						uploadSoundSupport: c,
+						mathMlOptions: x,
+						configuration: v
+					}), /* @__PURE__ */ l(e, {
+						imageSupport: s,
+						focusedEl: this.state.focusedEl,
+						deleteFocusedEl: this.deleteFocusedEl,
+						index: n,
+						category: t,
+						error: D && D[t.id],
+						onChange: this.change,
+						onDelete: () => this.delete(t),
+						toolbarOpts: d,
+						spellCheck: p,
+						onDeleteChoice: (e, n) => this.deleteChoiceFromCategory(t, e, n),
+						maxImageWidth: k && k.categoryLabel || b,
+						maxImageHeight: A && A.categoryLabel || y,
+						uploadSoundSupport: c,
+						configuration: v,
+						alternateResponseIndex: void 0
+					})] }, n);
+				})
+			}),
+			T && /* @__PURE__ */ l(_, { children: T }),
+			E && /* @__PURE__ */ l(_, { children: E })
+		] });
+	}
+};
+//#endregion
+export { v as Categories, v as default };

package/dist/author/design/choices/choice.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/choices/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';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

package/dist/author/design/choices/choice.js

@@ -0,0 +1,129 @@
+import { InputHeader as e } from "../input-header.js";
+import { DeleteButton as t } from "../buttons.js";
+import { multiplePlacements as n } from "../../utils.js";
+import "react";
+import r from "prop-types";
+import i from "debug";
+import { styled as a } from "@mui/material/styles";
+import { useDraggable as o, useDroppable as s } from "@dnd-kit/core";
+import { uid as c } from "@pie-lib/drag";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Checkbox as d } from "@pie-lib/config-ui";
+import f from "@mui/material/Card";
+import p from "@mui/material/CardActions";
+import m from "@mui/icons-material/DragHandle";
+//#region src/author/design/choices/choice.tsx
+i("@pie-element:categorize:configure:choice");
+var h = (e) => {
+	if (e.lockChoiceOrder) return !0;
+	let t = e.choice.categoryCount || 0;
+	return t === 0 || e.correctResponseCount < t;
+}, g = a(f)(({ theme: e }) => ({
+	minWidth: "196px",
+	padding: e.spacing(1),
+	overflow: "visible"
+})), _ = a(p)({
+	padding: 0,
+	justifyContent: "space-between"
+}), v = a("span", { shouldForwardProp: (e) => e !== "draggable" })(({ draggable: e }) => ({
+	cursor: e ? "move" : "inherit",
+	touchAction: "none"
+})), y = a("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingBottom: e.spacing(1)
+})), b = ({ allowMultiplePlacements: r, configuration: i, choice: a, deleteFocusedEl: c, focusedEl: f, index: p, onDelete: b, onChange: x, correctResponseCount: S, lockChoiceOrder: C, imageSupport: w, spellCheck: T, toolbarOpts: E, error: D, maxImageWidth: O, maxImageHeight: k, uploadSoundSupport: A }) => {
+	let j = h({
+		choice: a,
+		correctResponseCount: S,
+		lockChoiceOrder: C
+	}), { attributes: M, listeners: N, setNodeRef: P, isDragging: F } = o({
+		id: `choice-${a.id}`,
+		data: {
+			id: a.id,
+			index: p,
+			type: "choice"
+		},
+		disabled: !j
+	}), { setNodeRef: I } = s({
+		id: `choice-drop-${a.id}`,
+		data: {
+			id: a.id,
+			index: p,
+			type: "choice"
+		}
+	}), L = (e) => {
+		a.content = e, x(a);
+	}, R = () => {
+		a.categoryCount === 1 ? a.categoryCount = 0 : a.categoryCount = 1, x(a);
+	}, z = ((e) => e === n.perChoice)(r);
+	return /* @__PURE__ */ u(g, {
+		ref: (e) => {
+			P(e), I(e);
+		},
+		style: { opacity: F ? .5 : 1 },
+		children: [
+			/* @__PURE__ */ l(_, { children: /* @__PURE__ */ l(v, {
+				draggable: j,
+				...M,
+				...N,
+				children: /* @__PURE__ */ l(m, { color: j ? "primary" : "disabled" })
+			}) }),
+			/* @__PURE__ */ l(e, {
+				imageSupport: w,
+				focusedEl: f,
+				deleteFocusedEl: c,
+				index: p,
+				label: a.content,
+				onChange: L,
+				onDelete: b,
+				toolbarOpts: E,
+				spellCheck: T,
+				error: D,
+				maxImageWidth: O,
+				maxImageHeight: k,
+				uploadSoundSupport: A,
+				configuration: i
+			}),
+			D && /* @__PURE__ */ l(y, { children: D }),
+			/* @__PURE__ */ u(_, { children: [/* @__PURE__ */ l(t, {
+				label: "delete",
+				onClick: b
+			}), z && /* @__PURE__ */ l(d, {
+				mini: !0,
+				label: "Remove after placing",
+				checked: a.categoryCount === 1,
+				onChange: R
+			})] })
+		]
+	});
+};
+b.propTypes = {
+	allowMultiplePlacements: r.string,
+	configuration: r.object.isRequired,
+	choice: r.object.isRequired,
+	deleteFocusedEl: r.func,
+	focusedEl: r.number,
+	index: r.number,
+	lockChoiceOrder: r.bool,
+	maxImageHeight: r.object,
+	maxImageWidth: r.object,
+	onChange: r.func.isRequired,
+	onDelete: r.func.isRequired,
+	correctResponseCount: r.number.isRequired,
+	imageSupport: r.shape({
+		add: r.func.isRequired,
+		delete: r.func.isRequired
+	}),
+	toolbarOpts: r.object,
+	error: r.string,
+	uploadSoundSupport: r.shape({
+		add: r.func.isRequired,
+		delete: r.func.isRequired
+	}),
+	spellCheck: r.bool,
+	rearrangeChoices: r.func
+};
+var x = c.withUid(b);
+//#endregion
+export { x as default };

package/dist/author/design/choices/config.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/choices/config.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 Config extends React.Component {
+    static propTypes: {
+        config: PropTypes.Requireable<object>;
+        onModelChanged: PropTypes.Requireable<(...args: any[]) => any>;
+        spellCheck: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: {};
+    changeLabel: any;
+    render(): React.JSX.Element;
+}
+export default Config;