@pie-element/hotspot 12.0.4-next.20261011174919 → 12.0.4

package/dist/author/defaults.d.ts

@@ -1,3 +1,5 @@
+import type { ConfigureLanguageOptionsProp } from '@pie-element/shared-types';
+import type { Circle, Polygon, Rectangle } from '../types.js';
 declare const _default: {
     model: {
         dimensions: {
@@ -7,113 +9,113 @@ declare const _default: {
         hotspotColor: string;
         hotspotList: string[];
         imageUrl: string;
-        multipleCorrect: boolean;
+        multipleCorrect: true;
         outlineColor: string;
         outlineList: string[];
-        partialScoring: boolean;
+        partialScoring: false;
         prompt: string;
-        promptEnabled: boolean;
-        rationaleEnabled: boolean;
+        promptEnabled: true;
+        rationaleEnabled: true;
         shapes: {
-            rectangles: never[];
-            polygons: never[];
-            circles: never[];
+            rectangles: Rectangle[];
+            polygons: Polygon[];
+            circles: Circle[];
         };
         strokeWidth: number;
-        studentInstructionsEnabled: boolean;
+        studentInstructionsEnabled: true;
         teacherInstructions: string;
-        teacherInstructionsEnabled: boolean;
-        toolbarEditorPosition: string;
+        teacherInstructionsEnabled: true;
+        toolbarEditorPosition: "bottom";
     };
     configuration: {
         baseInputConfiguration: {
             h3: {
-                disabled: boolean;
+                disabled: true;
             };
             audio: {
-                disabled: boolean;
+                disabled: false;
             };
             video: {
-                disabled: boolean;
+                disabled: false;
             };
             image: {
-                disabled: boolean;
+                disabled: false;
             };
             textAlign: {
-                disabled: boolean;
+                disabled: true;
             };
             showParagraphs: {
-                disabled: boolean;
+                disabled: false;
             };
             separateParagraphs: {
-                disabled: boolean;
+                disabled: true;
             };
         };
         multipleCorrect: {
-            settings: boolean;
+            settings: true;
             label: string;
         };
         partialScoring: {
-            settings: boolean;
+            settings: false;
             label: string;
         };
         rationale: {
-            settings: boolean;
+            settings: true;
             label: string;
             inputConfiguration: {
                 audio: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 video: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 image: {
-                    disabled: boolean;
+                    disabled: false;
                 };
             };
-            required: boolean;
+            required: false;
         };
         prompt: {
-            settings: boolean;
+            settings: true;
             label: string;
             inputConfiguration: {
                 audio: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 video: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 image: {
-                    disabled: boolean;
+                    disabled: false;
                 };
             };
-            required: boolean;
+            required: false;
         };
-        settingsPanelDisabled: boolean;
+        settingsPanelDisabled: false;
         spellCheck: {
             label: string;
-            settings: boolean;
-            enabled: boolean;
+            settings: false;
+            enabled: true;
         };
         teacherInstructions: {
-            settings: boolean;
+            settings: true;
             label: string;
             inputConfiguration: {
                 audio: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 video: {
-                    disabled: boolean;
+                    disabled: false;
                 };
                 image: {
-                    disabled: boolean;
+                    disabled: false;
                 };
             };
-            required: boolean;
+            required: false;
         };
         preserveAspectRatio: {
-            settings: boolean;
-            enabled: boolean;
+            settings: false;
+            enabled: true;
             label: string;
         };
         minShapes: number;
@@ -128,21 +130,21 @@ declare const _default: {
             rationale: number;
         };
         withRubric: {
-            settings: boolean;
+            settings: false;
             label: string;
         };
         mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
+            mmlOutput: false;
+            mmlEditing: false;
         };
         language: {
-            settings: boolean;
+            settings: false;
             label: string;
-            enabled: boolean;
+            enabled: false;
         };
         languageChoices: {
             label: string;
-            options: never[];
+            options: ConfigureLanguageOptionsProp[];
         };
     };
 };

package/dist/author/hotspot-container.d.ts

@@ -1,5 +1,24 @@
 import React, { Component } from 'react';
-export declare class Container extends Component {
+import type { ImageHandler } from '@pie-element/shared-configure-events';
+import type { Dimensions, Shapes } from '../types.js';
+type ContainerProps = {
+    dimensions?: Dimensions;
+    imageUrl?: string;
+    hotspotColor?: string;
+    selectedHotspotColor?: string;
+    hoverOutlineColor?: string;
+    multipleCorrect?: boolean;
+    onImageUpload: (imageUrl: string) => void;
+    onUpdateImageDimension: (dimensions: Dimensions) => void;
+    insertImage?: (handler: ImageHandler) => void;
+    onUpdateShapes: (shapes: Shapes) => void;
+    outlineColor?: string;
+    shapes: Shapes;
+    strokeWidth?: number;
+    preserveAspectRatioEnabled?: boolean;
+    hasErrors?: boolean;
+};
+export declare class Container extends Component<ContainerProps> {
     static getDerivedStateFromProps(nextProps: any, prevState: any): any;
     constructor(props: any);
     handleFileRead: any;

package/dist/author/hotspot-palette.d.ts

@@ -1,5 +1,13 @@
 import React from 'react';
-declare class Palette extends React.Component {
+type PaletteProps = {
+    hotspotColor?: string;
+    hotspotList?: string[];
+    onHotspotColorChange: (color: string) => void;
+    onOutlineColorChange: (color: string) => void;
+    outlineColor?: string;
+    outlineList?: string[];
+};
+declare class Palette extends React.Component<PaletteProps> {
     onChange: (name: any) => (event: any) => void;
     render(): React.JSX.Element;
 }

package/dist/author/index.d.ts

@@ -1,44 +1,29 @@
+import { type DeleteDone, type ImageHandler, type SoundHandler } from '@pie-element/shared-configure-events';
+import { type AuthorModel } from './root.js';
+import type { Dimensions, HotspotConfiguration, HotspotModel, Shapes } from '../types.js';
 export default class HotspotConfigure extends HTMLElement {
-    static createDefaultModel: (model?: {}) => {
-        hotspotList: any;
-        outlineList: any;
-        shapes: any;
-        dimensions: {
-            height: number;
-            width: number;
-        };
-        hotspotColor: string;
-        imageUrl: string;
-        multipleCorrect: boolean;
-        outlineColor: string;
-        partialScoring: boolean;
-        prompt: string;
-        promptEnabled: boolean;
-        rationaleEnabled: boolean;
-        strokeWidth: number;
-        studentInstructionsEnabled: boolean;
-        teacherInstructions: string;
-        teacherInstructionsEnabled: boolean;
-        toolbarEditorPosition: string;
-    };
+    private _root;
+    private _model;
+    private _configuration;
+    static createDefaultModel: (model?: Partial<HotspotModel>) => AuthorModel;
     constructor();
-    set model(s: any);
-    set configuration(c: any);
-    dispatchModelUpdated(reset: any): void;
-    onModelChanged(m: any, reset: any): void;
-    onConfigurationChanged: any;
-    onModelChangedByConfig: any;
-    onColorChanged: any;
-    onPromptChanged: any;
-    onRationaleChanged: any;
-    onTeacherInstructionsChanged: any;
-    onUpdateImageDimension: any;
-    onUpdateShapes: any;
-    onImageUpload: any;
-    insertImage: any;
-    onDeleteImage: any;
-    insertSound(handler: any): void;
-    onDeleteSound(src: any, done: any): void;
+    set model(s: Partial<HotspotModel>);
+    set configuration(c: HotspotConfiguration);
+    dispatchModelUpdated(reset?: boolean): void;
+    onModelChanged(m: AuthorModel, reset?: boolean): void;
+    onConfigurationChanged: (c: HotspotConfiguration) => void;
+    onModelChangedByConfig: (m: AuthorModel, propertyType?: string) => void;
+    onColorChanged: (colorType: "hotspotColor" | "outlineColor", color: string) => void;
+    onPromptChanged: (prompt: string) => void;
+    onRationaleChanged: (rationale: string) => void;
+    onTeacherInstructionsChanged: (teacherInstructions: string) => void;
+    onUpdateImageDimension: (dimensions: Dimensions) => void;
+    onUpdateShapes: (shapes: Shapes) => void;
+    onImageUpload: (imageUrl: string) => void;
+    insertImage: (handler: ImageHandler) => void;
+    onDeleteImage: (src: string, done: DeleteDone) => void;
+    insertSound(handler: SoundHandler): void;
+    onDeleteSound(src: string, done: DeleteDone): void;
     _render(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/author/index.js

@@ -6,12 +6,15 @@ import i from "debug";
 import { DeleteImageEvent as a, DeleteSoundEvent as o, InsertImageEvent as s, InsertSoundEvent as c, ModelUpdatedEvent as l } from "@pie-element/shared-configure-events";
 //#region src/author/index.ts
 var u = i("hotspot:configure"), d = class i extends HTMLElement {
+	_root;
+	_model;
+	_configuration;
 	static createDefaultModel = (e = {}) => ({
 		...t.model,
 		...e,
 		hotspotList: e.hotspotList || [e.hotspotColor],
 		outlineList: e.outlineList || [e.outlineColor],
-		shapes: e.shapes || t.model.shapes || {}
+		shapes: e.shapes || t.model.shapes
 	});
 	constructor() {
 		super(), this._root = null, this._model = i.createDefaultModel(), this._configuration = t.configuration, this.onModelChanged = this.onModelChanged.bind(this);
@@ -24,7 +27,7 @@ var u = i("hotspot:configure"), d = class i extends HTMLElement {
 			...t.configuration,
 			...e
 		};
-		this._configuration = n, n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (this._configuration.language.enabled = !0, (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) && (this._configuration.languageChoices.options = []), this._configuration.languageChoices.options.find((e) => e.value === this._model.language) || this._configuration.languageChoices.options.push({
+		this._configuration = n, n?.language?.enabled ? n?.languageChoices?.options?.length && (this._model.language = n?.languageChoices.options[0].value) : n.language.settings && this._model.language ? (n.language.enabled = !0, (!n.languageChoices.options || !n.languageChoices.options.length) && (n.languageChoices.options = []), n.languageChoices.options.find((e) => e.value === this._model.language) || n.languageChoices.options.push({
 			value: this._model.language,
 			label: this._model.language
 		})) : delete this._model.language, this._render();

package/dist/author/root.d.ts

@@ -1,7 +1,35 @@
 import React from 'react';
-export declare class Root extends React.Component {
-    handleColorChange: any;
-    handleOnUpdateImageDimensions: any;
+import type { DeleteDone, ImageHandler, SoundHandler } from '@pie-element/shared-configure-events';
+import type { HotspotValidationErrors } from '../controller/index.js';
+import type { Dimensions, HotspotConfiguration, HotspotModel, Shapes } from '../types.js';
+/** The model the author edits; the host sets `errors` from the controller's `validate()`. */
+export type AuthorModel = Partial<HotspotModel> & {
+    shapes: Shapes;
+    dimensions: Dimensions;
+    errors?: HotspotValidationErrors;
+};
+type MediaSupport<Handler> = {
+    add: (handler: Handler) => void;
+    delete: (src: string, done: DeleteDone) => void;
+};
+export type RootProps = {
+    configuration: HotspotConfiguration;
+    model: AuthorModel;
+    imageSupport?: MediaSupport<ImageHandler>;
+    uploadSoundSupport?: MediaSupport<SoundHandler>;
+    onImageUpload: (imageUrl: string) => void;
+    onColorChanged: (colorType: 'hotspotColor' | 'outlineColor', color: string) => void;
+    onPromptChanged: (prompt: string) => void;
+    onUpdateImageDimension: (dimensions: Dimensions) => void;
+    onUpdateShapes: (shapes: Shapes) => void;
+    onModelChangedByConfig: (model: AuthorModel, propertyType?: string) => void;
+    onRationaleChanged: (rationale: string) => void;
+    onConfigurationChanged: (configuration: HotspotConfiguration) => void;
+    onTeacherInstructionsChanged: (teacherInstructions: string) => void;
+};
+export declare class Root extends React.Component<RootProps> {
+    handleColorChange: (fieldType: "hotspot" | "outline", color: string) => void;
+    handleOnUpdateImageDimensions: (value: number, resizeType: "width" | "height") => void;
     render(): React.JSX.Element;
 }
 export default Root;

package/dist/author/root.js

@@ -2,38 +2,37 @@ import e from "./hotspot-palette.js";
 import { generateValidationMessage as t, getAllShapes as n, getUpdatedShapes as r, groupShapes as i, updateImageDimensions as a } from "./utils.js";
 import { Container as o } from "./hotspot-container.js";
 import s from "react";
-import c from "prop-types";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { styled as d } from "@mui/material/styles";
-import { InputContainer as f, NumberTextField as p, layout as m, settings as h } from "@pie-lib/config-ui";
-import g from "@pie-lib/editable-html-tip-tap";
-import _ from "@mui/material/Typography";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { styled as u } from "@mui/material/styles";
+import { InputContainer as d, NumberTextField as f, layout as p, settings as m } from "@pie-lib/config-ui";
+import h from "@pie-lib/editable-html-tip-tap";
+import g from "@mui/material/Typography";
 import ee from "@mui/icons-material/Info";
-import v from "@mui/material/Tooltip";
+import _ from "@mui/material/Tooltip";
 //#region src/author/root.tsx
-var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("div")(({ theme: e }) => ({
+var { Panel: te, toggle: v, dropdown: y } = m, b = (e) => e != null, ne = u("div")(({ theme: e }) => ({
 	display: "flex",
 	marginBottom: e.spacing(1.5)
-})), x = d("div")({
+})), x = u("div")({
 	flex: 1,
 	width: "90%"
-}), S = d(f)(({ theme: e }) => ({
+}), S = u(d)(({ theme: e }) => ({
 	paddingTop: e.spacing(1),
 	marginTop: e.spacing(2),
 	marginBottom: e.spacing(2),
 	width: "100%"
-})), ie = d(_)(({ theme: e }) => ({ marginRight: e.spacing(1) })), ae = d("div")({
+})), C = u(g)(({ theme: e }) => ({ marginRight: e.spacing(1) })), re = u("div")({
 	display: "flex",
 	alignItems: "center"
-}), oe = d(v)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
+}), ie = u(_)(({ theme: e }) => ({ "& .MuiTooltip-tooltip": {
 	fontSize: e.typography.fontSize - 2,
 	whiteSpace: "pre",
 	maxWidth: "500px"
-} })), C = d("div")(({ theme: e }) => ({
+} })), w = u("div")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	color: e.palette.error.main,
 	paddingTop: e.spacing(1)
-})), w = class extends s.Component {
+})), T = class extends s.Component {
 	handleColorChange = (e, t) => {
 		let { onColorChanged: n } = this.props;
 		n(`${e}Color`, t);
@@ -46,41 +45,41 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 		u(i(r(o, d, n(s)))), l(d);
 	};
 	render() {
-		let { configuration: n, model: r, imageSupport: i, uploadSoundSupport: a, onConfigurationChanged: c, onImageUpload: d, onModelChangedByConfig: f, onPromptChanged: h, onRationaleChanged: v, onUpdateImageDimension: w, onTeacherInstructionsChanged: se, onUpdateShapes: ce } = this.props, { baseInputConfiguration: le = {}, contentDimensions: T = {}, maxImageWidth: E = {}, maxImageHeight: D = {}, multipleCorrect: O = {}, partialScoring: k = {}, preserveAspectRatio: A = {}, prompt: j = {}, rationale: M = {}, settingsPanelDisabled: N, spellCheck: P = {}, teacherInstructions: F = {}, withRubric: I = {}, mathMlOptions: L = {}, language: R = {}, languageChoices: z = {} } = n || {}, { errors: B, extraCSSRules: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: ue, toolbarEditorPosition: de } = r || {}, { prompt: G, rationale: K, shapes: q, selections: J, teacherInstructions: Y } = B || {}, fe = t(n), X = E && E.prompt, Z = D && D.prompt, Q = { position: de === "top" ? "top" : "bottom" }, pe = {
-			multipleCorrect: O.settings && y(O.label),
-			partialScoring: k.settings && y(k.label),
-			promptEnabled: j.settings && y(j.label),
-			"language.enabled": R.settings && y(R.label, !0),
-			language: R.settings && R.enabled && b(z.label, z.options)
+		let { configuration: n, model: r, imageSupport: i, uploadSoundSupport: a, onConfigurationChanged: u, onImageUpload: d, onModelChangedByConfig: m, onPromptChanged: _, onRationaleChanged: T, onUpdateImageDimension: ae, onTeacherInstructionsChanged: oe, onUpdateShapes: se } = this.props, { baseInputConfiguration: ce = {}, contentDimensions: le = {}, maxImageWidth: E = {}, maxImageHeight: D = {}, multipleCorrect: O = {}, partialScoring: k = {}, preserveAspectRatio: A = {}, prompt: j = {}, rationale: M = {}, settingsPanelDisabled: N, spellCheck: P = {}, teacherInstructions: F = {}, withRubric: I = {}, mathMlOptions: L = {}, language: R = {}, languageChoices: z = {} } = n || {}, { errors: B, extraCSSRules: V, promptEnabled: H, rationaleEnabled: U, spellCheckEnabled: W, teacherInstructionsEnabled: ue, toolbarEditorPosition: de } = r || {}, { prompt: G, rationale: K, shapes: q, selections: J, teacherInstructions: Y } = B || {}, fe = t(n), X = E && E.prompt, Z = D && D.prompt, Q = { position: de === "top" ? "top" : "bottom" }, pe = {
+			multipleCorrect: O.settings && v(O.label),
+			partialScoring: k.settings && v(k.label),
+			promptEnabled: j.settings && v(j.label),
+			"language.enabled": R.settings && v(R.label, !0),
+			language: R.settings && R.enabled && y(z.label, z.options)
 		}, me = {
-			teacherInstructionsEnabled: F.settings && y(F.label),
-			rationaleEnabled: M.settings && y(M.label),
-			spellCheckEnabled: P.settings && y(P.label),
-			rubricEnabled: I?.settings && y(I?.label)
+			teacherInstructionsEnabled: F.settings && v(F.label),
+			rationaleEnabled: M.settings && v(M.label),
+			spellCheckEnabled: P.settings && v(P.label),
+			rubricEnabled: I?.settings && v(I?.label)
 		}, $ = (e = {}) => ({
-			...le,
+			...ce,
 			...e
 		});
-		return /* @__PURE__ */ u(m.ConfigLayout, {
+		return /* @__PURE__ */ l(p.ConfigLayout, {
 			extraCSSRules: V,
-			dimensions: T,
+			dimensions: le,
 			hideSettings: N,
-			settings: /* @__PURE__ */ l(te, {
+			settings: /* @__PURE__ */ c(te, {
 				model: r,
-				onChangeModel: f,
+				onChangeModel: m,
 				configuration: n,
-				onChangeConfiguration: c,
+				onChangeConfiguration: u,
 				groups: {
 					Settings: pe,
 					Properties: me
 				}
 			}),
 			children: [
-				ue && /* @__PURE__ */ u(S, {
+				ue && /* @__PURE__ */ l(S, {
 					label: F.label,
-					children: [/* @__PURE__ */ l(g, {
+					children: [/* @__PURE__ */ c(h, {
 						markup: r.teacherInstructions || "",
-						onChange: se,
+						onChange: oe,
 						imageSupport: i,
 						nonEmpty: !1,
 						error: Y,
@@ -92,13 +91,13 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), Y && /* @__PURE__ */ l(C, { children: Y })]
+					}), Y && /* @__PURE__ */ c(w, { children: Y })]
 				}),
-				H && /* @__PURE__ */ u(S, {
+				H && /* @__PURE__ */ l(S, {
 					label: j.label,
-					children: [/* @__PURE__ */ l(g, {
+					children: [/* @__PURE__ */ c(h, {
 						markup: r.prompt || "",
-						onChange: h,
+						onChange: _,
 						imageSupport: i,
 						nonEmpty: !1,
 						error: G,
@@ -110,23 +109,23 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), G && /* @__PURE__ */ l(C, { children: G })]
+					}), G && /* @__PURE__ */ c(w, { children: G })]
 				}),
-				/* @__PURE__ */ u(ae, { children: [/* @__PURE__ */ l(ie, {
+				/* @__PURE__ */ l(re, { children: [/* @__PURE__ */ c(C, {
 					variant: "h6",
 					children: "Define Hotspot"
-				}), /* @__PURE__ */ l(oe, {
+				}), /* @__PURE__ */ c(ie, {
 					disableFocusListener: !0,
 					disableTouchListener: !0,
 					placement: "left",
 					title: fe,
-					children: /* @__PURE__ */ l(ee, {
+					children: /* @__PURE__ */ c(ee, {
 						fontSize: "small",
 						color: "primary",
 						style: { float: "right" }
 					})
 				})] }),
-				/* @__PURE__ */ l(e, {
+				/* @__PURE__ */ c(e, {
 					hotspotColor: r.hotspotColor,
 					hotspotList: r.hotspotList,
 					outlineColor: r.outlineColor,
@@ -134,7 +133,7 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 					onHotspotColorChange: (e) => this.handleColorChange("hotspot", e),
 					onOutlineColorChange: (e) => this.handleColorChange("outline", e)
 				}),
-				/* @__PURE__ */ l(o, {
+				/* @__PURE__ */ c(o, {
 					dimensions: r.dimensions,
 					imageUrl: r.imageUrl,
 					multipleCorrect: r.multipleCorrect,
@@ -142,38 +141,38 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 					hotspotColor: r.hotspotColor,
 					outlineColor: r.outlineColor,
 					selectedHotspotColor: r.selectedHotspotColor,
-					hoverOutlineColor: ne(r.hoverOutlineColor) ? r.hoverOutlineColor : "black",
-					onUpdateImageDimension: w,
-					onUpdateShapes: ce,
+					hoverOutlineColor: b(r.hoverOutlineColor) ? r.hoverOutlineColor : "black",
+					onUpdateImageDimension: ae,
+					onUpdateShapes: se,
 					onImageUpload: d,
 					shapes: r.shapes,
 					strokeWidth: r.strokeWidth,
 					preserveAspectRatioEnabled: A.enabled,
 					insertImage: i && i.add
 				}),
-				q && /* @__PURE__ */ l(C, { children: q }),
-				J && /* @__PURE__ */ l(C, { children: J }),
-				r.imageUrl && /* @__PURE__ */ u(s.Fragment, { children: [/* @__PURE__ */ l(_, {
+				q && /* @__PURE__ */ c(w, { children: q }),
+				J && /* @__PURE__ */ c(w, { children: J }),
+				r.imageUrl && /* @__PURE__ */ l(s.Fragment, { children: [/* @__PURE__ */ c(g, {
 					variant: "h6",
 					children: "Image Dimensions"
-				}), /* @__PURE__ */ u(re, { children: [/* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
+				}), /* @__PURE__ */ l(ne, { children: [/* @__PURE__ */ c(x, { children: /* @__PURE__ */ c(f, {
 					label: "Width",
 					value: r.dimensions.width,
 					min: 0,
 					onChange: (e, t) => this.handleOnUpdateImageDimensions(t, "width"),
 					showErrorWhenOutsideRange: !0
-				}, "hotspot-manual-width") }), /* @__PURE__ */ l(x, { children: /* @__PURE__ */ l(p, {
+				}, "hotspot-manual-width") }), /* @__PURE__ */ c(x, { children: /* @__PURE__ */ c(f, {
 					label: "Height",
 					value: r.dimensions.height,
 					min: 0,
 					onChange: (e, t) => this.handleOnUpdateImageDimensions(t, "height"),
 					showErrorWhenOutsideRange: !0
 				}, "hotspot-manual-height") })] })] }),
-				U && /* @__PURE__ */ u(S, {
+				U && /* @__PURE__ */ l(S, {
 					label: M.label,
-					children: [/* @__PURE__ */ l(g, {
+					children: [/* @__PURE__ */ c(h, {
 						markup: r.rationale || "",
-						onChange: v,
+						onChange: T,
 						imageSupport: i,
 						error: K,
 						toolbarOpts: Q,
@@ -184,32 +183,11 @@ var { Panel: te, toggle: y, dropdown: b } = h, ne = (e) => e != null, re = d("di
 						uploadSoundSupport: a,
 						languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
 						mathMlOptions: L
-					}), K && /* @__PURE__ */ l(C, { children: K })]
+					}), K && /* @__PURE__ */ c(w, { children: K })]
 				})
 			]
 		});
 	}
 };
-w.propTypes = {
-	configuration: c.object,
-	model: c.object.isRequired,
-	imageSupport: c.shape({
-		add: c.func,
-		delete: c.func
-	}),
-	uploadSoundSupport: c.shape({
-		add: c.func,
-		delete: c.func
-	}),
-	onImageUpload: c.func.isRequired,
-	onColorChanged: c.func.isRequired,
-	onPromptChanged: c.func.isRequired,
-	onUpdateImageDimension: c.func.isRequired,
-	onUpdateShapes: c.func.isRequired,
-	onModelChangedByConfig: c.func.isRequired,
-	onRationaleChanged: c.func.isRequired,
-	onConfigurationChanged: c.func.isRequired,
-	onTeacherInstructionsChanged: c.func.isRequired
-};
 //#endregion
-export { w as Root, w as default };
+export { T as Root, T as default };