@pie-element/number-line 13.1.0-next.28 → 13.1.1-next.1

package/dist/author/main.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/main.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 toPointType: (response: any) => string;
+export declare class Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        configuration: PropTypes.Validator<object>;
+        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        imageSupport: PropTypes.Validator<object>;
+        uploadSoundSupport: PropTypes.Validator<object>;
+    };
+    constructor(props: any);
+    componentDidMount(): void;
+    graphChange: any;
+    changeSize: ({ width, height }: {
+        width: any;
+        height: any;
+    }) => any;
+    getAdjustedHeight: any;
+    changeMaxNoOfPoints: any;
+    changeGraphTitle: (title: any) => any;
+    changeTicks: any;
+    reloadTicksData: any;
+    updateMajorValue: any;
+    changeArrows: (arrows: any) => any;
+    setDefaults: any;
+    moveCorrectResponse: any;
+    availableTypesChange: any;
+    deleteCorrectResponse: any;
+    addCorrectResponse: any;
+    clearCorrectResponse: any;
+    undoCorrectResponse: any;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/author/main.js

@@ -0,0 +1,485 @@
+import { data_converter_exports as e } from "../delivery/data-converter.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import { generateMajorValuesForMinor as n, generateMinorValues as r, getMinorLimits as i, snapElements as a } from "../delivery/number-line/graph/tick-utils.js";
+import o from "../delivery/number-line/index.js";
+import s from "./number-text-field.js";
+import c from "./card-bar.js";
+import ee from "./size.js";
+import l from "./domain.js";
+import te from "./arrows.js";
+import ne from "./point-config.js";
+import re from "./ticks.js";
+import { model as u } from "./defaults.js";
+import { generateValidationMessage as ie } from "./utils.js";
+import d from "react";
+import { styled as f } from "@mui/material/styles";
+import p from "prop-types";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import * as g from "mathjs";
+import { AlertDialog as _, FormSection as v, InputContainer as y, layout as ae, settings as b } from "@pie-lib/config-ui";
+import x from "@pie-lib/editable-html-tip-tap";
+import oe from "@mui/material/Tooltip";
+import S from "@mui/material/Typography";
+import se from "@mui/icons-material/Info";
+//#region src/author/main.tsx
+var C = (e) => ({
+	...e,
+	feedback: void 0,
+	prompt: void 0,
+	teacherInstructions: void 0,
+	graph: {
+		...e.graph,
+		title: void 0,
+		disabled: !0
+	},
+	correctResponse: void 0
+}), { lineIsSwitched: w, switchGraphLine: T, toGraphFormat: ce, toSessionFormat: E } = e, { Panel: le, toggle: D } = b, O = {}, k = {}, A = {}, ue = f(s)({
+	width: "150px",
+	".MuiInputBase-input": { padding: "16.5px 14px" }
+}), de = f("div")(({ theme: e }) => ({
+	display: "flex",
+	flexWrap: "wrap",
+	"& > *": { paddingRight: e.spacing(2) }
+})), fe = f("div")(({ theme: e }) => ({ margin: `${e.spacing(2.5)} 0` })), j = f(y)(({ theme: e }) => ({
+	paddingTop: e.spacing(2),
+	marginBottom: e.spacing(2),
+	width: "100%"
+})), pe = f(v)(({ theme: e }) => ({ marginBottom: e.spacing(4) })), M = f("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingTop: e.spacing(1)
+})), me = f("div")({
+	display: "flex",
+	alignItems: "center",
+	gap: "10px"
+}), he = f(v)({
+	display: "flex",
+	alignItems: "center",
+	gap: "10px"
+}), ge = f(S)(({ theme: e }) => ({ marginBottom: e.spacing(2.5) })), N = (e) => {
+	function t(e) {
+		return e.pointType ? e.direction ? `${e.pointType[0]}${e.direction[0]}` : e.pointType[0] : `${e.leftPoint[0]}${e.rightPoint[0]}`;
+	}
+	return `${e.type[0]}${t(e)}`.toUpperCase();
+}, P = class extends d.Component {
+	static propTypes = {
+		model: p.object.isRequired,
+		configuration: p.object.isRequired,
+		onConfigurationChanged: p.func.isRequired,
+		onChange: p.func.isRequired,
+		imageSupport: p.object.isRequired,
+		uploadSoundSupport: p.object.isRequired
+	};
+	constructor(e) {
+		super(e);
+		let { model: { graph: { availableTypes: t, maxNumberOfPoints: n } } } = e, r = this.getAdjustedHeight(t, n);
+		this.state = {
+			dialog: {
+				open: !1,
+				text: ""
+			},
+			correctAnswerDialog: {
+				open: !1,
+				text: ""
+			}
+		}, this.graphChange({ height: r });
+	}
+	componentDidMount() {
+		let { configuration: e, model: t, onChange: n } = this.props, { title: r } = e || {}, { titleEnabled: i } = t || {}, a = i ?? r.enabled;
+		n && n({
+			...t,
+			titleEnabled: a
+		});
+	}
+	graphChange = (e) => {
+		let { model: t, onChange: n } = this.props, r = {
+			...t.graph,
+			...e
+		}, i = [];
+		t.correctResponse.forEach((e, t) => {
+			(e.domainPosition < r.domain.min || e.domainPosition > r.domain.max || e.size && (e.domainPosition + e.size < r.domain.min || e.domainPosition + e.size > r.domain.max)) && i.push(t);
+		}), i.length > 0 && this.setState({ correctAnswerDialog: {
+			open: !0,
+			text: "This\nchange would make it impossible for students to plot one or more elements in the current\ncorrect answer. If you proceed, all such elements will be removed from the correct\nanswer.",
+			indices: i,
+			graph: t.graph
+		} }), r = this.reloadTicksData(r), n({ graph: r });
+	};
+	changeSize = ({ width: e, height: t }) => this.graphChange({
+		width: e,
+		height: t
+	});
+	getAdjustedHeight = (e, t) => {
+		let n = !0;
+		return Object.entries(e || {}).forEach(([e, t]) => {
+			if (e !== "PF" && t) {
+				n = !1;
+				return;
+			}
+		}), t && (t === 1 || n) ? 100 : 50 + (t || 20) * 25;
+	};
+	changeMaxNoOfPoints = (e, t) => {
+		if (t = Math.floor(t), this.props.model.correctResponse.length > t) {
+			this.setState({ dialog: {
+				open: !0,
+				text: "To use this value, you must first remove one or more elements from the correct answers."
+			} });
+			return;
+		}
+		let { model: { graph: { availableTypes: n } } } = this.props, r = this.getAdjustedHeight(n, t);
+		this.graphChange({
+			maxNumberOfPoints: t,
+			height: r
+		});
+	};
+	changeGraphTitle = (e) => this.graphChange({ title: e });
+	changeTicks = (e) => {
+		let { model: t, onChange: n } = this.props, { ticks: r } = e, i = a(t.graph.domain, r, t.correctResponse), o = t.graph.initialElements ? a(t.graph.domain, r, t.graph.initialElements) : [];
+		n({
+			graph: {
+				...this.updateMajorValue({
+					...t.graph,
+					ticks: r
+				}),
+				initialElements: o
+			},
+			correctResponse: i
+		});
+	};
+	reloadTicksData = (e) => {
+		let { domain: t, ticks: n, width: a } = e;
+		if (n.tickIntervalType || (n.minor > .5 ? n.tickIntervalType = "Integer" : n.tickIntervalType = "Decimal"), O = i(t, a), O.min >= 1) n.tickIntervalType = "Integer", n.minor = n.minor < 1 ? g.number(g.ceil(O.min)) : n.minor >= g.number(g.ceil(O.min)) && n.minor <= g.number(g.floor(O.max)) ? n.minor : g.number(g.ceil(O.min)), n.integerTick = n.minor, k = {
+			decimal: [],
+			fraction: []
+		}, n.fractionTick = "0", n.decimalTick = 0;
+		else if (O.min >= 0 && O.max < 1) {
+			n.tickIntervalType === "Integer" && (n.tickIntervalType = "Fraction"), k = r(O);
+			let e = g.number(g.fraction(k.fraction[0])), t = g.number(g.fraction(k.fraction[k.fraction.length - 1]));
+			if (n.minor < e || n.minor > t) switch (n.tickIntervalType) {
+				case "Fraction":
+					n.minor = g.number(g.fraction(k.fraction[k.fraction.length - 1])), n.fractionTick = k.fraction[k.fraction.length - 1], n.decimalTick = k.decimal[0];
+					break;
+				case "Decimal":
+				case "Integer": n.minor = k.decimal[k.decimal.length - 1], n.decimalTick = k.decimal[k.decimal.length - 1], n.fractionTick = k.fraction[0];
+			}
+			else switch (n.tickIntervalType) {
+				case "Fraction":
+					let e = g.fraction(g.number(n.minor));
+					n.fractionTick = e.n + "/" + e.d, n.decimalTick = n.decimalTick ? n.decimalTick : k.decimal[0];
+					break;
+				case "Decimal":
+				case "Integer": n.decimalTick = n.minor, n.fractionTick = n.fractionTick ? n.fractionTick : k.fraction[0];
+			}
+			n.integerTick = 1;
+		} else if (O.min < 1 && O.max >= 1) if (k = r(O), n.minor >= O.min && n.minor <= O.max) switch (n.tickIntervalType) {
+			case "Integer":
+				n.integerTick = n.minor, n.decimalTick = O.min > .5 ? 0 : k.decimal[0], n.fractionTick = O.min > .5 ? "0" : k.fraction[0];
+				break;
+			case "Decimal":
+				n.integerTick = 1, n.decimalTick = n.minor, n.fractionTick = k.fraction[0];
+				break;
+			case "Fraction":
+				n.integerTick = 1, n.decimalTick = k.decimal[0];
+				let e = g.fraction(g.number(n.minor));
+				n.fractionTick = e.n + "/" + e.d;
+		}
+		else switch (O.min > .5 && (n.tickIntervalType = "Integer"), n.tickIntervalType) {
+			case "Integer":
+				n.minor = g.number(g.ceil(O.min)), n.integerTick = n.minor, n.decimalTick = O.min > .5 ? 0 : k.decimal[0], n.fractionTick = O.min > .5 ? "0" : k.fraction[0];
+				break;
+			case "Decimal":
+				n.minor = k.decimal[0], n.integerTick = 1, n.decimalTick = n.minor, n.fractionTick = k.fraction[0];
+				break;
+			case "Fraction": n.minor = g.number(g.fraction(k.fraction[0])), n.integerTick = 1, n.decimalTick = k.decimal[0], n.fractionTick = k.fraction[0];
+		}
+		return this.updateMajorValue({
+			...e,
+			ticks: n
+		});
+	};
+	updateMajorValue = (e) => {
+		let { domain: t, ticks: r, width: i } = e;
+		if (A = n(r.minor, t, i), A.decimal.indexOf(r.major) === -1) {
+			let e = 0;
+			e = r.tickIntervalType === "Integer" && A.decimal.length > 4 ? 4 : A.decimal.length - 1, r.major = A.decimal[e];
+		}
+		return e.fraction = r.tickIntervalType === "Fraction" && r.major < 1, {
+			...e,
+			ticks: r
+		};
+	};
+	changeArrows = (e) => this.graphChange({ arrows: e });
+	setDefaults = () => {
+		let { graph: { availableTypes: e, maxNumberOfPoints: n } } = u, r = this.getAdjustedHeight(e, n), i = {
+			...t(u.graph),
+			height: r
+		};
+		this.props.onChange({ graph: i });
+	};
+	moveCorrectResponse = (e, t, n) => {
+		t.position = n;
+		let { onChange: r, model: i } = this.props, a = E(t.type === "line" && w(t) ? T(t) : t), o = [...i.correctResponse];
+		o[e] = a, r({ correctResponse: o });
+	};
+	availableTypesChange = (e) => {
+		let { model: t, onChange: n } = this.props, { correctResponse: r, graph: { maxNumberOfPoints: i } } = t;
+		new Set(r.map(N)).forEach((t) => {
+			e[t] = !0;
+		});
+		let a = this.getAdjustedHeight(e, i);
+		n({ graph: {
+			...t.graph,
+			availableTypes: e,
+			height: a
+		} });
+	};
+	deleteCorrectResponse = (e) => {
+		let { model: t, onChange: n } = this.props;
+		n({ correctResponse: t.correctResponse.filter((t, n) => !e.some((e) => e === n)) });
+	};
+	addCorrectResponse = (e) => {
+		let { model: t, onChange: n } = this.props, r = [...t.correctResponse];
+		r.push(E(e)), n({ correctResponse: r });
+	};
+	clearCorrectResponse = () => {
+		let { onChange: e } = this.props;
+		e({ correctResponse: [] });
+	};
+	undoCorrectResponse = () => {
+		let { model: e, onChange: t } = this.props, n = [...e.correctResponse];
+		n.pop(), t({ correctResponse: n });
+	};
+	render() {
+		let { model: e, onChange: n, configuration: r, onConfigurationChanged: i, uploadSoundSupport: a, imageSupport: s } = this.props, { baseInputConfiguration: u = {}, contentDimensions: f = {}, instruction: p = {}, teacherInstructions: g = {}, title: y = {}, prompt: b = {}, rationale: S = {}, spellCheck: w = {}, mathMlOptions: T = {}, numberLineDimensions: E = {}, maxMaxElements: N = 20, hidePointConfigButtons: P = !1, availableTools: F = ["PF"], settingsPanelDisabled: I = !1 } = r || {}, { errors: L = {}, extraCSSRules: _e, spellCheckEnabled: R, toolbarEditorPosition: z, teacherInstructionsEnabled: ve, titleEnabled: ye, promptEnabled: be, rationaleEnabled: xe } = e || {}, { graph: B } = e;
+		B = this.reloadTicksData(B);
+		let { dialog: V, correctAnswerDialog: H } = this.state, { correctResponseError: U, domainError: W, maxError: G, pointsError: K, prompt: q, rationale: J, teacherInstructions: Y, widthError: X } = L || {}, Se = ie(), Ce = t(e.correctResponse || []).map(ce), Z = t(e);
+		Z.disabled = !0;
+		let Q = { position: z === "top" ? "top" : "bottom" }, we = {
+			teacherInstructionsEnabled: g.settings && D(g.label),
+			titleEnabled: y.settings && D(y.label),
+			promptEnabled: b.settings && D(b.label),
+			rationaleEnabled: S.settings && D(S.label),
+			spellCheckEnabled: w.settings && D(w.label)
+		}, $ = (e = {}) => ({
+			...u,
+			...e
+		});
+		return /* @__PURE__ */ h(ae.ConfigLayout, {
+			extraCSSRules: _e,
+			dimensions: f,
+			hideSettings: I,
+			settings: /* @__PURE__ */ m(le, {
+				model: e,
+				configuration: r,
+				onChangeModel: n,
+				onChangeConfiguration: i,
+				groups: { Properties: we }
+			}),
+			children: [
+				/* @__PURE__ */ m(ge, {
+					component: "div",
+					type: "body1",
+					children: p.label
+				}),
+				ve && /* @__PURE__ */ h(j, {
+					label: g.label,
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.teacherInstructions || "",
+						onChange: (e) => n({ teacherInstructions: e }),
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: Y,
+						toolbarOpts: Q,
+						pluginProps: $(g?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), Y && /* @__PURE__ */ m(M, { children: Y })]
+				}),
+				be && /* @__PURE__ */ h(j, {
+					label: b.label,
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.prompt || "",
+						onChange: (e) => n({ prompt: e }),
+						nonEmpty: !1,
+						disableUnderline: !0,
+						error: q,
+						toolbarOpts: Q,
+						pluginProps: $(b?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), q && /* @__PURE__ */ m(M, { children: q })]
+				}),
+				/* @__PURE__ */ m(c, {
+					header: "Set Up Number Line",
+					info: /* @__PURE__ */ m(oe, {
+						disableFocusListener: !0,
+						disableTouchListener: !0,
+						placement: "right",
+						title: Se,
+						slotProps: { tooltip: { sx: (e) => ({
+							fontSize: e.typography.fontSize - 2,
+							whiteSpace: "pre",
+							maxWidth: "500px"
+						}) } },
+						children: /* @__PURE__ */ m(se, {
+							fontSize: "small",
+							color: "primary",
+							style: { marginLeft: "8px" }
+						})
+					}),
+					children: "Set up the number line by entering the domain and number of tick marks to display. Labels on the number line can be edited or removed by clicking on the label."
+				}),
+				/* @__PURE__ */ m(de, { children: /* @__PURE__ */ m(l, {
+					domain: B.domain,
+					errors: L,
+					onChange: (e) => this.graphChange({ domain: e })
+				}) }),
+				G && /* @__PURE__ */ m(M, { children: G }),
+				W && /* @__PURE__ */ m(M, { children: W }),
+				/* @__PURE__ */ m("div", { children: /* @__PURE__ */ m(v, { children: /* @__PURE__ */ m(re, {
+					ticks: B.ticks,
+					minorLimits: O,
+					minorValues: k,
+					majorValues: A,
+					onChange: this.changeTicks
+				}) }) }),
+				/* @__PURE__ */ h(me, { children: [
+					e.widthEnabled && /* @__PURE__ */ m(ee, {
+						size: B,
+						min: E.min,
+						max: E.max,
+						step: E.step,
+						onChange: this.changeSize
+					}),
+					/* @__PURE__ */ m("div", {}),
+					/* @__PURE__ */ m(te, {
+						arrows: B.arrows,
+						onChange: this.changeArrows
+					})
+				] }),
+				X && /* @__PURE__ */ m(M, { children: X }),
+				/* @__PURE__ */ m(o, {
+					onMoveElement: () => {},
+					onDeleteElements: () => {},
+					onAddElement: () => {},
+					onClearElements: () => {},
+					onUndoElement: () => {},
+					minWidth: E.min,
+					maxWidth: E.max,
+					maxHeight: 70,
+					model: C(Z)
+				}),
+				ye && /* @__PURE__ */ m(pe, {
+					label: y?.label || "Title",
+					children: /* @__PURE__ */ m(x, {
+						markup: B.title || "",
+						onChange: this.changeGraphTitle,
+						toolbarOpts: Q,
+						activePlugins: [
+							"bold",
+							"html",
+							"italic",
+							"underline",
+							"strikethrough",
+							"image",
+							"math",
+							"languageCharacters",
+							"responseArea"
+						],
+						pluginProps: $(y?.inputConfiguration),
+						spellCheck: R,
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					})
+				}),
+				!B.exhibitOnly && /* @__PURE__ */ h(d.Fragment, { children: [
+					/* @__PURE__ */ h(c, {
+						header: "Define Tool Set and Correct Response",
+						children: ["Select answer type and place it on the number line. Intersecting points, line segments and/or rays will appear above the number line. ", /* @__PURE__ */ m("i", { children: "Note: A maximum of 20 points, line segments or rays may be plotted." })]
+					}),
+					/* @__PURE__ */ m(c, {
+						header: "Available Tools",
+						mini: !0,
+						children: "Click on the input options to be displayed to the students. All inputs will display by default."
+					}),
+					/* @__PURE__ */ m(fe, { children: /* @__PURE__ */ m(ne, {
+						onSelectionChange: this.availableTypesChange,
+						selection: B.availableTypes,
+						availableTools: F,
+						hideButtons: P
+					}) }),
+					/* @__PURE__ */ h(he, { children: [
+						/* @__PURE__ */ m("label", { children: "Max No of Elements" }),
+						/* @__PURE__ */ m(ue, {
+							min: 1,
+							max: N,
+							onlyIntegersAllowed: !0,
+							value: B.maxNumberOfPoints,
+							onChange: this.changeMaxNoOfPoints
+						}),
+						K && /* @__PURE__ */ m(M, { children: K })
+					] }),
+					/* @__PURE__ */ m("label", { children: "Correct Answer" }),
+					/* @__PURE__ */ m(o, {
+						onMoveElement: this.moveCorrectResponse,
+						onDeleteElements: this.deleteCorrectResponse,
+						onAddElement: this.addCorrectResponse,
+						onClearElements: this.clearCorrectResponse,
+						onUndoElement: this.undoCorrectResponse,
+						minWidth: E.min,
+						maxWidth: E.max,
+						answer: Ce,
+						model: C(e)
+					}),
+					U && /* @__PURE__ */ m(M, { children: U })
+				] }),
+				/* @__PURE__ */ m(_, {
+					open: V.open,
+					title: "Warning",
+					text: V.text,
+					onConfirm: () => this.setState({ dialog: { open: !1 } })
+				}),
+				/* @__PURE__ */ m(_, {
+					open: H.open,
+					title: "Warning",
+					text: H.text,
+					onConfirm: () => {
+						let e = this.state.correctAnswerDialog.indices;
+						e && e.length > 0 && this.deleteCorrectResponse(e), this.setState({ correctAnswerDialog: { open: !1 } });
+					},
+					onClose: () => {
+						let e = this.state.correctAnswerDialog.graph;
+						n({ graph: e }), this.setState({ correctAnswerDialog: { open: !1 } });
+					},
+					onConfirmText: "OK",
+					onCloseText: "Cancel"
+				}),
+				xe && /* @__PURE__ */ h(j, {
+					label: S.label || "Rationale",
+					children: [/* @__PURE__ */ m(x, {
+						markup: e.rationale || "",
+						onChange: (e) => n({ rationale: e }),
+						error: J,
+						toolbarOpts: Q,
+						spellCheck: R,
+						pluginProps: $(S?.inputConfiguration),
+						imageSupport: s,
+						uploadSoundSupport: a,
+						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+						mathMlOptions: T
+					}), J && /* @__PURE__ */ m(M, { children: J })]
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { P as default };

package/dist/author/number-text-field.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/number-text-field.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 MiniField: any;
+declare const NumberTextField: (props: any) => React.JSX.Element;
+export { MiniField };
+export default NumberTextField;

package/dist/author/number-text-field.js

@@ -0,0 +1,13 @@
+import "react";
+import { styled as e } from "@mui/material/styles";
+import { jsx as t } from "react/jsx-runtime";
+import { NumberTextField as n } from "@pie-lib/config-ui";
+//#region src/author/number-text-field.tsx
+var r = e(n)(({ theme: e }) => ({ marginLeft: e.spacing(1) }));
+e(n)({ maxWidth: "100px" });
+var i = (e) => /* @__PURE__ */ t(r, {
+	...e,
+	variant: "outlined"
+});
+//#endregion
+export { i as default };

package/dist/author/point-config.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/point-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';
+declare class PointConfig extends React.Component {
+    static propTypes: {
+        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
+        selection: PropTypes.Requireable<object>;
+        availableTools: PropTypes.Requireable<any[]>;
+        hideButtons: PropTypes.Requireable<boolean>;
+    };
+    constructor(props: any);
+    toggle(point: any): void;
+    toggleAll(value: any): void;
+    _propsUpdate(selection: any): void;
+    active(point: any): boolean;
+    render(): React.JSX.Element;
+}
+export default PointConfig;

package/dist/author/point-config.js

@@ -0,0 +1,69 @@
+import { point_chooser_exports as e } from "../delivery/number-line/point-chooser/index.js";
+import t from "react";
+import { styled as n } from "@mui/material/styles";
+import r from "prop-types";
+import i from "@mui/material/Button";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/author/point-config.tsx
+var { Point: s } = e, c = n("div")(({ theme: e }) => ({
+	paddingTop: e.spacing(2.5),
+	"& > :first-child": { marginRight: e.spacing(1) }
+})), l = class e extends t.Component {
+	static propTypes = {
+		onSelectionChange: r.func,
+		selection: r.object,
+		availableTools: r.array,
+		hideButtons: r.bool
+	};
+	constructor(e) {
+		super(e);
+	}
+	toggle(e) {
+		let t = { ...this.props.selection };
+		t[e] = !t[e], this._propsUpdate(t);
+	}
+	toggleAll(t) {
+		let n = [...e.types].reduce((e, n) => (e[n] = t, e), {});
+		this._propsUpdate(n);
+	}
+	_propsUpdate(e) {
+		this.props.onSelectionChange(e);
+	}
+	active(e) {
+		return this.props.selection[e] === !0;
+	}
+	render() {
+		let { availableTools: e, hideButtons: t = !1 } = this.props;
+		return /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", { children: (e || []).map((e) => /* @__PURE__ */ a(s, {
+			iconKey: e.toLowerCase(),
+			onClick: this.toggle.bind(this, e),
+			active: this.active(e)
+		}, e.toLowerCase())) }), /* @__PURE__ */ o(c, {
+			hidden: t,
+			children: [/* @__PURE__ */ a(i, {
+				variant: "outlined",
+				size: "small",
+				onClick: this.toggleAll.bind(this, !0),
+				children: "Select All"
+			}), /* @__PURE__ */ a(i, {
+				variant: "outlined",
+				size: "small",
+				onClick: this.toggleAll.bind(this, !1),
+				children: "None"
+			})]
+		})] });
+	}
+};
+l.types = [
+	"PF",
+	"LFF",
+	"LEF",
+	"LFE",
+	"LEE",
+	"RFN",
+	"RFP",
+	"REN",
+	"REP"
+];
+//#endregion
+export { l as default };

package/dist/author/size.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/number-line/configure/src/size.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 Size: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        size: PropTypes.Requireable<PropTypes.InferProps<{
+            width: PropTypes.Requireable<number>;
+            height: PropTypes.Requireable<number>;
+        }>>;
+        min: PropTypes.Requireable<number>;
+        max: PropTypes.Requireable<number>;
+        step: PropTypes.Requireable<number>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};
+export default Size;