@pie-element/hotspot 11.1.2-next.2 → 11.1.2

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

@@ -1,29 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-container.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, { Component } from 'react';
-export declare class Container extends Component {
-    static getDerivedStateFromProps(nextProps: any, prevState: any): any;
-    constructor(props: any);
-    handleFileRead: any;
-    enableDropzone: () => void;
-    disableDropzone: () => void;
-    handleOnPaste: any;
-    handleOnDrop: any;
-    handleOnDragOver: any;
-    handleOnDragExit: any;
-    onUpdateShapes: any;
-    onDeleteShape: any;
-    handleClearAll: () => any;
-    handleEnableDrag: () => void;
-    handleDisableDrag: () => void;
-    handleInputClick: any;
-    handleFinishDrawing: any;
-    render(): React.JSX.Element;
-}
-export default Container;

package/dist/author/hotspot-container.js

@@ -1,210 +0,0 @@
-import e from "./button.js";
-import { CircleButton as t } from "./buttons/circle.js";
-import { PolygonButton as n } from "./buttons/polygon.js";
-import { RectangleButton as r } from "./buttons/rectangle.js";
-import { SUPPORTED_SHAPES as i } from "./shapes/utils.js";
-import { getAllShapes as a, groupShapes as o } from "./utils.js";
-import s from "./hotspot-drawable.js";
-import c from "./upload-control.js";
-import { Component as l } from "react";
-import u from "prop-types";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
-import { styled as p } from "@mui/material/styles";
-//#region src/author/hotspot-container.tsx
-var m = p("div")(({ theme: e }) => ({
-	marginTop: e.spacing(1.5),
-	marginBottom: e.spacing(2.5)
-})), h = p("div")(({ theme: e, hasErrors: t, dropzoneActive: n }) => ({
-	border: "1px solid #E0E1E6",
-	borderRadius: "5px",
-	...n && { border: "1px solid #0032C2" },
-	...t && !n && { border: `1px solid ${e.palette.error.main}` }
-})), g = p("div")({
-	marginRight: "5px",
-	"&:hover": { cursor: "pointer" }
-}), _ = p("div")({
-	alignItems: "center",
-	display: "flex",
-	flexDirection: "column",
-	justifyContent: "center"
-}), v = p("div")(({ theme: e }) => ({
-	minHeight: 350,
-	paddingBottom: e.spacing(5),
-	paddingRight: e.spacing(5)
-})), y = p("div")(({ theme: e }) => ({
-	backgroundColor: "#FFF",
-	borderBottom: "1px solid #E0E1E6",
-	borderTopLeftRadius: "5px",
-	borderTopRightRadius: "5px",
-	display: "flex",
-	justifyContent: "flex-end",
-	padding: e.spacing(1)
-})), b = p("div")({ marginRight: "auto" }), x = (e) => e.type.match(/image.*/), S = class extends l {
-	static getDerivedStateFromProps(e, t) {
-		return {
-			...t,
-			shapes: a(e.shapes)
-		};
-	}
-	constructor(e) {
-		super(e), this.state = {
-			dragEnabled: !0,
-			shapes: a(e.shapes),
-			selectedShape: i.NONE
-		}, this.fakeImageHandler = {
-			cancel: () => {},
-			done: (e, t) => this.props.onImageUpload(t),
-			fileChosen: () => {},
-			progress: () => {}
-		};
-	}
-	handleFileRead = (e) => {
-		if (e instanceof Blob) {
-			let { onImageUpload: t, insertImage: n } = this.props, r = new FileReader();
-			r.onloadend = () => t(r.result), r.readAsDataURL(e), n && n({
-				...this.fakeImageHandler,
-				getChosenFile: () => e,
-				isPasted: !0
-			});
-		}
-	};
-	enableDropzone = () => this.setState({ dropzoneActive: !0 });
-	disableDropzone = () => this.setState({ dropzoneActive: !1 });
-	handleOnPaste = (e) => {
-		let { files: t } = e.clipboardData;
-		t && x(t[0]) && this.handleFileRead(t[0]);
-	};
-	handleOnDrop = (e) => {
-		e.preventDefault();
-		let { items: t, files: n } = e.dataTransfer;
-		if (t && t[0].kind === "file") {
-			let e = t[0].getAsFile();
-			x(e) && this.handleFileRead(e);
-		} else x(n[0]) && this.handleFileRead(n[0]);
-		this.disableDropzone();
-	};
-	handleOnDragOver = (e) => {
-		e.preventDefault();
-		let { dropzoneActive: t } = this.state;
-		t || this.enableDropzone();
-	};
-	handleOnDragExit = (e) => {
-		e.preventDefault(), this.disableDropzone();
-	};
-	onUpdateShapes = (e) => {
-		let { onUpdateShapes: t } = this.props;
-		this.setState({ shapes: e }, () => t(o(e)));
-	};
-	onDeleteShape = (e) => {
-		let { shapes: t } = this.state;
-		if (t && t.length) {
-			let n = t.filter((t) => t.id !== e);
-			this.onUpdateShapes(n);
-		}
-	};
-	handleClearAll = () => this.onUpdateShapes([]);
-	handleEnableDrag = () => this.setState({ dragEnabled: !0 });
-	handleDisableDrag = () => this.setState({ dragEnabled: !1 });
-	handleInputClick = () => {
-		let { insertImage: e } = this.props;
-		e && e(this.fakeImageHandler);
-	};
-	handleFinishDrawing = () => {
-		this.setState({ selectedShape: i.NONE });
-	};
-	render() {
-		let { dimensions: a, hasErrors: o, hotspotColor: l, imageUrl: u, multipleCorrect: p, onUpdateImageDimension: x, outlineColor: S, strokeWidth: C, preserveAspectRatioEnabled: w, hoverOutlineColor: T, selectedHotspotColor: E } = this.props, { dropzoneActive: D, dragEnabled: O } = this.state, { shapes: k, selectedShape: A } = this.state;
-		return /* @__PURE__ */ d(m, { children: /* @__PURE__ */ f(h, {
-			hasErrors: o,
-			dropzoneActive: D,
-			...O ? {
-				onDragExit: this.handleOnDragExit,
-				onDragLeave: this.handleOnDragExit,
-				onDragOver: this.handleOnDragOver,
-				onDrop: this.handleOnDrop,
-				onPaste: this.handleOnPaste
-			} : {},
-			children: [/* @__PURE__ */ f(y, { children: [
-				/* @__PURE__ */ d(g, {
-					onClick: () => this.setState({ selectedShape: A === i.RECTANGLE ? i.NONE : i.RECTANGLE }),
-					children: /* @__PURE__ */ d(r, { isActive: A === i.RECTANGLE })
-				}),
-				/* @__PURE__ */ d(g, {
-					onClick: () => this.setState({ selectedShape: A === i.POLYGON ? i.NONE : i.POLYGON }),
-					children: /* @__PURE__ */ d(n, { isActive: A === i.POLYGON })
-				}),
-				/* @__PURE__ */ d(g, {
-					onClick: () => this.setState({ selectedShape: A === i.CIRCLE ? i.NONE : i.CIRCLE }),
-					children: /* @__PURE__ */ d(t, { isActive: A === i.CIRCLE })
-				}),
-				u && /* @__PURE__ */ d(b, { children: /* @__PURE__ */ d(c, {
-					label: "Replace Image",
-					onInputClick: this.handleInputClick,
-					setRef: (e) => {
-						this.input = e;
-					}
-				}) }),
-				/* @__PURE__ */ d(e, {
-					disabled: !(k && k.length),
-					onClick: this.handleClearAll,
-					label: "Clear all"
-				})
-			] }), /* @__PURE__ */ d(v, {
-				ref: (e) => {
-					this.imageSection = e;
-				},
-				children: u ? /* @__PURE__ */ d(s, {
-					dimensions: a,
-					disableDrag: this.handleDisableDrag,
-					enableDrag: this.handleEnableDrag,
-					shapeType: this.state.selectedShape,
-					handleFinishDrawing: this.handleFinishDrawing,
-					imageUrl: u,
-					hotspotColor: l,
-					selectedHotspotColor: E,
-					hoverOutlineColor: T,
-					multipleCorrect: p,
-					onUpdateImageDimension: x,
-					onUpdateShapes: this.onUpdateShapes,
-					onDeleteShape: this.onDeleteShape,
-					outlineColor: S,
-					shapes: k,
-					strokeWidth: C,
-					preserveAspectRatioEnabled: w
-				}) : /* @__PURE__ */ f(_, { children: [
-					/* @__PURE__ */ d("label", { children: "Drag and drop or upload image from computer" }),
-					/* @__PURE__ */ d("br", {}),
-					/* @__PURE__ */ d(c, {
-						label: "Upload Image",
-						onInputClick: this.handleInputClick,
-						setRef: (e) => {
-							this.input = e;
-						}
-					})
-				] })
-			})]
-		}) });
-	}
-};
-S.propTypes = {
-	dimensions: u.object.isRequired,
-	imageUrl: u.string.isRequired,
-	hotspotColor: u.string.isRequired,
-	selectedHotspotColor: u.string,
-	hoverOutlineColor: u.string,
-	multipleCorrect: u.bool.isRequired,
-	onImageUpload: u.func.isRequired,
-	onUpdateImageDimension: u.func.isRequired,
-	insertImage: u.func,
-	onUpdateShapes: u.func.isRequired,
-	outlineColor: u.string.isRequired,
-	shapes: u.shape({
-		rectangles: u.array,
-		polygons: u.array
-	}).isRequired,
-	strokeWidth: u.number,
-	preserveAspectRatioEnabled: u.bool,
-	hasErrors: u.bool
-}, S.defaultProps = { strokeWidth: 5 };
-//#endregion
-export { S as default };

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

@@ -1,31 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-drawable.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';
-export declare class Drawable extends React.Component {
-    static getDerivedStateFromProps(nextProps: any, prevState: any): {
-        shapes: any;
-    } | null;
-    constructor(props: any);
-    handleOnMouseDown: any;
-    addPolygonPoint(e: any): any;
-    handleOnMouseUp: any;
-    handleMouseMove: any;
-    handleOnMouseOutOrLeave: any;
-    handleOnDragEnd: any;
-    closeInProgressPolygons: any;
-    handleOnSetAsCorrect: any;
-    handleOnImageLoad: any;
-    initialiseResize: any;
-    checkIfResizeValid(x: any, y: any): boolean;
-    startResizing: any;
-    stopResizing: any;
-    deleteShape: any;
-    render(): React.JSX.Element;
-}
-export default Drawable;

package/dist/author/hotspot-drawable.js

@@ -1,312 +0,0 @@
-import { CircleShape as e } from "./shapes/circle.js";
-import { RectangleShape as t } from "./shapes/rectagle.js";
-import { PolygonShape as n } from "./shapes/polygon.js";
-import { SHAPE_GROUPS as r, SUPPORTED_SHAPES as i } from "./shapes/utils.js";
-import { getUpdatedShapes as a, updateImageDimensions as o } from "./utils.js";
-import s from "./hotspot-rectangle.js";
-import c from "./hotspot-polygon.js";
-import l from "./hotspot-circle.js";
-import u, { createElement as d } from "react";
-import f from "prop-types";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { styled as h } from "@mui/material/styles";
-import { Layer as g, Stage as _ } from "react-konva";
-import { cloneDeep as v } from "@pie-element/shared-lodash";
-//#region src/author/hotspot-drawable.tsx
-function y(e) {
-	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
-}
-function b(e, t) {
-	return !e || y(e) ? e : y(e.default) ? e.default : t && y(e[t]) ? e[t] : t && y(e[t]?.default) ? e[t].default : e;
-}
-var x = b(_, "Stage"), S = b(g, "Layer"), C = h("div")({ position: "relative" }), w = h("div")({
-	position: "relative",
-	width: "fit-content"
-}), T = h("img")({
-	alignItems: "center",
-	display: "flex",
-	justifyContent: "center"
-}), E = h("div")({
-	borderBottom: "1px solid #727272",
-	borderRight: "1px solid #727272",
-	bottom: "-10px",
-	cursor: "se-resize",
-	height: "10px",
-	position: "absolute",
-	right: "-10px",
-	width: "10px"
-}), D = h(x)({
-	left: 0,
-	top: 0,
-	position: "absolute"
-}), O = 800, k = class extends u.Component {
-	static getDerivedStateFromProps(e, t) {
-		return e.shapes === t.shapes ? null : { shapes: e.shapes };
-	}
-	constructor(e) {
-		super(e), this.state = {
-			isDrawing: !1,
-			stateShapes: !1,
-			resizing: !1,
-			temporaryPolygon: null,
-			shapes: [],
-			dimensions: {
-				height: 0,
-				width: 0
-			}
-		};
-	}
-	handleOnMouseDown = (r) => {
-		let { shapeType: a, onUpdateShapes: o, shapes: s } = this.props, c, l;
-		if (r.target === r.currentTarget && Object.values(i).includes(a)) {
-			switch (a) {
-				case i.RECTANGLE:
-					c = t.create(s, r);
-					break;
-				case i.CIRCLE:
-					c = e.create(s, r);
-					break;
-				case i.POLYGON:
-					if (l = this.state.isDrawingShapeId, l) {
-						let e = this.addPolygonPoint(r);
-						c = {
-							isDrawing: !0,
-							isDrawingShapeId: l,
-							shapes: e
-						};
-					} else c = n.create(s, r);
-					break;
-				default: return;
-			}
-			this.setState({ ...c }), o(c.shapes);
-		}
-	};
-	addPolygonPoint(e) {
-		let { shapes: t } = n.addPoint(this.state, e, (e) => {
-			this.setState({
-				isDrawing: !1,
-				shapes: e,
-				isDrawingShapeId: void 0
-			}), this.props.onUpdateShapes(e);
-		});
-		return t;
-	}
-	handleOnMouseUp = () => {
-		let { shapeType: n, onUpdateShapes: r } = this.props, a;
-		if (n !== i.POLYGON) {
-			switch (n) {
-				case i.RECTANGLE:
-					a = t.finalizeCreation(this.state, this.props);
-					break;
-				case i.CIRCLE:
-					a = e.finalizeCreation(this.state, this.props);
-					break;
-				default: return;
-			}
-			this.setState({
-				...a,
-				isDrawing: !1
-			}), r(a.shapes);
-		}
-	};
-	handleMouseMove = (r) => {
-		let { shapeType: a, onUpdateShapes: o } = this.props, s;
-		if (!(!this.state.isDrawing || !Object.values(i).includes(a))) {
-			switch (a) {
-				case i.RECTANGLE:
-					s = t.handleMouseMove(this.state, r);
-					break;
-				case i.CIRCLE:
-					s = e.handleMouseMove(this.state, r);
-					break;
-				case i.POLYGON:
-					s = n.handleMouseMove(this.state, r);
-					break;
-				default: return;
-			}
-			this.setState(s), o(s.shapes);
-		}
-	};
-	handleOnMouseOutOrLeave = (e) => {
-		this.state.isDrawing && this.handleOnMouseUp(e);
-	};
-	handleOnDragEnd = (e, t) => {
-		let { shapes: n, onUpdateShapes: r, dimensions: i } = this.props, { width: a, height: o } = i;
-		r(v(n.map((n) => {
-			if (n.id !== e) return n;
-			let r = t.x, i = t.y;
-			if (n.group === "rectangles") return r + n.width < 0 || r > a || i + n.height < 0 || i > o ? null : {
-				...n,
-				...t
-			};
-			if (n.group === "circles") {
-				let e = n.radius;
-				return r + e < 0 || r - e > a || i + e < 0 || i - e > o ? null : {
-					...n,
-					...t
-				};
-			}
-			if (n.group === "polygons") {
-				let e = n.points, r = e.map((e) => e.x), i = e.map((e) => e.y), s = Math.min(...r), c = Math.min(...i), l = Math.max(...r), u = Math.max(...i), d = t.points[0].x - e[0].x, f = t.points[0].y - e[0].y;
-				return s += d, l += d, c += f, u += f, l < 0 || s > a || u < 0 || c > o ? null : {
-					...n,
-					...t
-				};
-			}
-			return n;
-		}).filter((e) => e !== null)));
-	};
-	closeInProgressPolygons = (e) => {
-		let { shapes: t, onUpdateShapes: r } = this.props, i = (t || []).find((e) => e.id === "newPolygon");
-		(e === "newPolygon" || i && this.state.isDrawing) && n.finalizeCreation(this.state, (e) => {
-			this.setState({
-				isDrawing: !1,
-				shapes: e,
-				isDrawingShapeId: void 0
-			}), r(v(e));
-		});
-	};
-	handleOnSetAsCorrect = (e) => {
-		let { id: t } = e, { multipleCorrect: n, shapes: r, onUpdateShapes: i } = this.props, a;
-		a = n ? r.map((e) => (e.id === t && (e.correct = !e.correct), e)) : r.map((e) => (e.correct = e.id === t, e)), i(v(a)), this.closeInProgressPolygons(t);
-	};
-	handleOnImageLoad = ({ target: e }) => {
-		let { onUpdateImageDimension: t } = this.props, n = this.resize, r = getComputedStyle(e), i = parseFloat(r.height), a = parseFloat(r.width), o = a / O, s = a > O ? {
-			height: i / o,
-			width: O
-		} : {
-			height: i,
-			width: a
-		};
-		this.setState({ dimensions: s }, () => t(s)), n.addEventListener("mousedown", this.initialiseResize, !1);
-	};
-	initialiseResize = () => {
-		window.addEventListener("mousemove", this.startResizing, !1), window.addEventListener("mouseup", this.stopResizing, !1);
-	};
-	checkIfResizeValid(e, t) {
-		let { shapes: n } = this.state, r = !0;
-		return n && n.forEach((n) => {
-			let i = n.x + n.width + 5, a = n.y + n.height + 5;
-			(e <= i || t <= a) && (r = !1);
-		}), r;
-	}
-	startResizing = (e) => {
-		let t = e.target.getBoundingClientRect(), n = this.image, { disableDrag: r, preserveAspectRatioEnabled: i, dimensions: s, shapes: c } = this.props, { width: l, height: u } = o(s, {
-			width: e.clientX - t.left,
-			height: e.clientY - t.top
-		}, i);
-		this.checkIfResizeValid(l, u) && l > 150 && u > 150 && n && (n.style.width = `${l}px`, n.style.height = `${u}px`, this.setState({
-			resizing: !0,
-			dimensions: {
-				height: u,
-				width: l
-			},
-			stateShapes: a(s, {
-				width: l,
-				height: u
-			}, c)
-		})), r();
-	};
-	stopResizing = () => {
-		let { enableDrag: e, onUpdateImageDimension: t, onUpdateShapes: n } = this.props, { dimensions: r, stateShapes: i } = this.state;
-		e(), i && n(v(i)), t(r), window.removeEventListener("mousemove", this.startResizing, !1), window.removeEventListener("mouseup", this.stopResizing, !1), this.setState({
-			resizing: !1,
-			stateShapes: !1
-		});
-	};
-	deleteShape = (e) => {
-		this.setState({
-			isDrawing: !1,
-			isDrawingShapeId: void 0
-		}), this.props.onDeleteShape(e);
-	};
-	render() {
-		let { imageUrl: e, dimensions: { height: t, width: n }, hotspotColor: i, outlineColor: a, shapes: o, strokeWidth: u, hoverOutlineColor: f, selectedHotspotColor: h } = this.props, { stateShapes: g, isDrawing: _, dimensions: { height: v, width: y } } = this.state, b = g || o;
-		return /* @__PURE__ */ m(C, { children: [e && /* @__PURE__ */ m(w, { children: [/* @__PURE__ */ p(T, {
-			onLoad: this.handleOnImageLoad,
-			ref: (e) => {
-				this.image = e;
-			},
-			src: e,
-			...t && n ? { style: {
-				height: t,
-				width: n
-			} } : {}
-		}), /* @__PURE__ */ p(E, { ref: (e) => {
-			this.resize = e;
-		} })] }), /* @__PURE__ */ p(D, {
-			height: v || t,
-			width: y || n,
-			onMouseDown: this.handleOnMouseDown,
-			onMouseUp: this.handleOnMouseUp,
-			onMouseMove: this.handleMouseMove,
-			onContentMouseOut: this.handleOnMouseOutOrLeave,
-			onContentMouseLeave: this.handleOnMouseOutOrLeave,
-			children: /* @__PURE__ */ p(S, { children: b.map((e, o) => {
-				let p;
-				switch (e.group) {
-					case r.RECTANGLES:
-						p = s;
-						break;
-					case r.CIRCLES:
-						p = l;
-						break;
-					case r.POLYGONS:
-						p = c;
-						break;
-					default: return null;
-				}
-				return /* @__PURE__ */ d(p, {
-					...e.group === r.CIRCLES ? { radius: e.radius } : {},
-					...e.group === r.RECTANGLES ? {
-						height: e.height,
-						width: e.width
-					} : {},
-					...e.group === r.POLYGONS ? {
-						points: e.points,
-						addPolygonPoint: (e) => this.addPolygonPoint(e)
-					} : {},
-					correct: e.correct,
-					isDrawing: _,
-					hotspotColor: i,
-					hoverOutlineColor: f,
-					selectedHotspotColor: h,
-					id: e.id,
-					key: o,
-					onClick: () => this.handleOnSetAsCorrect(e),
-					onDragEnd: this.handleOnDragEnd,
-					onDeleteShape: this.deleteShape,
-					outlineColor: a,
-					width: e.width,
-					x: e.x,
-					y: e.y,
-					strokeWidth: u,
-					imageHeight: v || t,
-					imageWidth: y || n,
-					...e.group === "polygons" ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {}
-				});
-			}) })
-		})] });
-	}
-};
-k.propTypes = {
-	disableDrag: f.func.isRequired,
-	dimensions: f.object.isRequired,
-	enableDrag: f.func.isRequired,
-	shapeType: f.oneOf(Object.values(i)),
-	imageUrl: f.string.isRequired,
-	handleFinishDrawing: f.func.isRequired,
-	hotspotColor: f.string.isRequired,
-	selectedHotspotColor: f.string,
-	hoverOutlineColor: f.string,
-	multipleCorrect: f.bool.isRequired,
-	onUpdateImageDimension: f.func.isRequired,
-	onUpdateShapes: f.func.isRequired,
-	onDeleteShape: f.func.isRequired,
-	outlineColor: f.string.isRequired,
-	shapes: f.array.isRequired,
-	strokeWidth: f.number,
-	preserveAspectRatioEnabled: f.bool
-};
-//#endregion
-export { k as default };

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

@@ -1,14 +0,0 @@
-/**
- * @synced-from pie-elements/packages/hotspot/configure/src/hotspot-palette.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 class Palette extends React.Component {
-    onChange: (name: any) => (event: any) => void;
-    render(): React.JSX.Element;
-}
-export default Palette;

package/dist/author/hotspot-palette.js

@@ -1,72 +0,0 @@
-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 { InputContainer as a } from "@pie-lib/config-ui";
-import o from "@mui/material/Select";
-import s from "@mui/material/MenuItem";
-//#region src/author/hotspot-palette.tsx
-var c = i("div")(({ theme: e }) => ({
-	marginTop: e.spacing(2),
-	display: "flex"
-})), l = i(a)({
-	flex: 1,
-	width: "90%"
-}), u = i(s)(({ theme: e }) => ({
-	borderRadius: "2px",
-	height: "22px",
-	marginLeft: e.spacing(2),
-	marginRight: e.spacing(2),
-	marginTop: e.spacing(2)
-})), d = class extends e.Component {
-	onChange = (e) => (t) => {
-		let { value: n } = t.target, { onHotspotColorChange: r, onOutlineColorChange: i } = this.props;
-		e === "hotspot" ? r(n) : i(n);
-	};
-	render() {
-		let { hotspotColor: e, outlineColor: t, hotspotList: i, outlineList: a } = this.props;
-		return /* @__PURE__ */ r(c, { children: [/* @__PURE__ */ n(l, {
-			label: "Hot Spot",
-			children: /* @__PURE__ */ n(o, {
-				onChange: this.onChange("hotspot"),
-				value: e,
-				variant: "standard",
-				MenuProps: { transitionDuration: {
-					enter: 225,
-					exit: 195
-				} },
-				children: i.map((e) => /* @__PURE__ */ n(u, {
-					value: e,
-					style: { backgroundColor: e },
-					children: e
-				}, e))
-			})
-		}), /* @__PURE__ */ n(l, {
-			label: "Response Outline",
-			children: /* @__PURE__ */ n(o, {
-				onChange: this.onChange("outline"),
-				value: t,
-				variant: "standard",
-				MenuProps: { transitionDuration: {
-					enter: 225,
-					exit: 195
-				} },
-				children: a.map((e) => /* @__PURE__ */ n(u, {
-					value: e,
-					style: { border: `2px solid ${e}` },
-					children: e
-				}, e))
-			})
-		})] });
-	}
-};
-d.propTypes = {
-	hotspotColor: t.string.isRequired,
-	hotspotList: t.array.isRequired,
-	onHotspotColorChange: t.func.isRequired,
-	onOutlineColorChange: t.func.isRequired,
-	outlineColor: t.string.isRequired,
-	outlineList: t.array.isRequired
-};
-//#endregion
-export { d as default };