@pie-element/hotspot 11.1.0-next.28 → 11.1.1-next.0

package/dist/author/upload-control.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/upload-control.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 UploadControl: {
+    ({ label, onInputClick, onUploadImage, setRef }: {
+        label: any;
+        onInputClick: any;
+        onUploadImage: any;
+        setRef: any;
+    }): React.JSX.Element;
+    propTypes: {
+        label: PropTypes.Validator<string>;
+        onInputClick: PropTypes.Validator<(...args: any[]) => any>;
+        onUploadImage: PropTypes.Validator<(...args: any[]) => any>;
+        setRef: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        classNameButton: string;
+        classNameSection: string;
+    };
+};
+export default UploadControl;

package/dist/author/upload-control.js

@@ -0,0 +1,28 @@
+import e from "./button.js";
+import "react";
+import t from "prop-types";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/author/upload-control.tsx
+var a = ({ label: t, onInputClick: a, onUploadImage: o, setRef: s }) => /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r(e, {
+	label: t,
+	onClick: a
+}), /* @__PURE__ */ r("input", {
+	accept: "image/*",
+	style: { display: "none" },
+	onChange: o,
+	ref: (e) => {
+		s(e);
+	},
+	type: "file"
+})] });
+a.propTypes = {
+	label: t.string.isRequired,
+	onInputClick: t.func.isRequired,
+	onUploadImage: t.func.isRequired,
+	setRef: t.func.isRequired
+}, a.defaultProps = {
+	classNameButton: "",
+	classNameSection: ""
+};
+//#endregion
+export { a as default };

package/dist/author/utils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/configure/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const updateImageDimensions: (initialDim: any, nextDim: any, keepAspectRatio: any, resizeType: any) => {
+    width: any;
+    height: any;
+};
+declare const getUpdatedRectangle: (initialDim: any, nextDim: any, shape: any) => any;
+declare const getUpdatedPolygon: (initialDim: any, nextDim: any, shape: any) => any;
+declare const getUpdatedShapes: (initialDim: any, nextDim: any, shapes: any) => any;
+declare const getAllShapes: (shapesMap: any) => any[];
+declare const groupShapes: (shapesArray: any) => any;
+declare const isPointInsidePolygon: (polygon: any, x: any, y: any) => boolean;
+declare const calculate: (polygonPoints: any) => {
+    x: number | undefined;
+    y: number | undefined;
+};
+declare const generateValidationMessage: (config: any) => string;
+export { calculate, isPointInsidePolygon, updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes, getUpdatedRectangle, getUpdatedPolygon, };

package/dist/author/utils.js

@@ -0,0 +1,83 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/cloneDeep.js";
+import { SHAPE_GROUPS as t } from "./shapes/utils.js";
+//#region src/author/utils.ts
+var n = (e, t, n, r) => {
+	if (n) {
+		let n = e.width / e.height;
+		return r === "height" ? {
+			width: t.height * n,
+			height: t.height
+		} : {
+			width: t.width,
+			height: t.width / n
+		};
+	}
+	return {
+		width: t.width,
+		height: t.height
+	};
+}, r = (e, t, n) => t / e * n, i = (e, t, n) => ({
+	...n,
+	width: r(e.width, t.width, n.width),
+	height: r(e.height, t.height, n.height),
+	x: r(e.width, t.width, n.x),
+	y: r(e.height, t.height, n.y)
+}), a = (e, t, n) => ({
+	...n,
+	radius: r(e.width, t.width, n.radius),
+	x: r(e.width, t.width, n.x),
+	y: r(e.height, t.height, n.y)
+}), o = (e, t, n) => ({
+	...n,
+	points: n.points.map((n) => ({
+		x: r(e.width, t.width, n.x),
+		y: r(e.height, t.height, n.y)
+	}))
+}), s = (e, n, r) => r.map((r) => {
+	if (r.group === t.RECTANGLES) return i(e, n, r);
+	if (r.group === t.POLYGONS) return o(e, n, r);
+	if (r.group === t.CIRCLES) return a(e, n, r);
+}), c = (e) => {
+	e ||= {};
+	let t = [], n = Object.keys(e);
+	return n.length ? n.reduce((t, n) => t.concat(e[n] ? e[n].map((e, r) => ({
+		...e,
+		group: n,
+		index: e.index || t.length + r
+	})) : []), t) : t;
+}, l = (t) => {
+	t ||= [];
+	let n = {
+		rectangles: [],
+		polygons: [],
+		circles: []
+	};
+	return t.length ? t.reduce((e, { group: t, ...n }) => (e[t] = [...e[t] || [], n], e), n) : e(n);
+}, u = (e, t, n) => {
+	let r = !1;
+	if (!e || e.length <= 0) return r;
+	for (let i = 0, a = e.length - 1; i < e.length; a = i++) {
+		let o = e[i].x, s = e[i].y, c = e[a].x, l = e[a].y;
+		s > n != l > n && t < (c - o) * (n - s) / (l - s) + o && (r = !r);
+	}
+	return r;
+}, d = (e) => {
+	if (!e || e.length <= 0) return {
+		x: 0,
+		y: 0
+	};
+	let t = e.map((e) => e.x), n = e.map((e) => e.y), r = Math.min(...t), i = Math.min(...n), a = Math.max(...t), o = Math.max(...n), s, c;
+	for (let t = r; t <= a - 20; t++) for (let n = o - 20; n > i; n--) if (u(e, t, n)) {
+		s = t - 10, c = n;
+		break;
+	}
+	return {
+		x: s,
+		y: c
+	};
+}, f = (e) => {
+	let { minShapes: t, maxShapes: n, maxSelections: r } = e, i = `\nThere should be at least ${t} ` + (n ? `and at most ${n} ` : "") + "shapes defined.", a = "\nThere should be at least 1 " + (r ? `and at most ${r} ` : "") + "shape" + (r ? "s" : "") + " selected.";
+	return "Validation requirements:" + i + a;
+};
+//#endregion
+export { d as calculate, f as generateValidationMessage, c as getAllShapes, s as getUpdatedShapes, l as groupShapes, n as updateImageDimensions };

package/dist/controller/defaults.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/src/defaults.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const _default: {
+    dimensions: {
+        height: number;
+        width: number;
+    };
+    hotspotColor: string;
+    hotspotList: string[];
+    imageUrl: string;
+    multipleCorrect: boolean;
+    outlineColor: string;
+    outlineList: string[];
+    partialScoring: boolean;
+    prompt: string;
+    promptEnabled: boolean;
+    rationaleEnabled: boolean;
+    shapes: {
+        rectangles: never[];
+        polygons: never[];
+        circles: never[];
+    };
+    strokeWidth: number;
+    studentInstructionsEnabled: boolean;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    toolbarEditorPosition: string;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,29 @@
+//#region src/controller/defaults.ts
+var e = {
+	dimensions: {
+		height: 0,
+		width: 0
+	},
+	hotspotColor: "rgba(137, 183, 244, 0.25)",
+	hotspotList: ["rgba(137, 183, 244, 0.25)"],
+	imageUrl: "",
+	multipleCorrect: !0,
+	outlineColor: "blue",
+	outlineList: ["blue"],
+	partialScoring: !1,
+	prompt: "",
+	promptEnabled: !0,
+	rationaleEnabled: !0,
+	shapes: {
+		rectangles: [],
+		polygons: [],
+		circles: []
+	},
+	strokeWidth: 5,
+	studentInstructionsEnabled: !0,
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	toolbarEditorPosition: "bottom"
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/src/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const normalize: (question: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<unknown>;
+export declare const createDefaultModel: (model?: {}) => Promise<unknown>;
+/**
+* Generates detailed trace log for scoring evaluation
+* @param {Object} model - the question model
+* @param {Object} session - the student session
+* @param {Object} env - the environment
+* @returns {Array} traceLog - array of trace messages
+*/
+export declare const getLogTrace: (model: any, session: any, env: any) => string[];
+export declare function outcome(config: any, session: any, env?: {}): Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,154 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import { isResponseCorrect as t } from "./utils.js";
+import n from "./defaults.js";
+import r from "debug";
+import { partialScoring as i } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var a = r("pie-elements:hotspot:controller"), o = (e) => ({
+	...n,
+	...e
+});
+function s(e, n, r) {
+	let i = o(e), { imageUrl: a, dimensions: s, hotspotColor: c, hoverOutlineColor: l, selectedHotspotColor: u, multipleCorrect: d, outlineColor: f, partialScoring: p, prompt: m, shapes: h, language: g, fontSizeFactor: _, autoplayAudioEnabled: v, completeAudioEnabled: y, customAudioButton: b } = i, { rectangles: x, polygons: S, circles: C } = h || {}, w = r.mode === "evaluate" || r.role === "instructor" && r.mode === "view";
+	return new Promise((e) => {
+		let o = {
+			disabled: r.mode !== "gather",
+			mode: r.mode,
+			dimensions: s,
+			imageUrl: a,
+			outlineColor: f,
+			hotspotColor: c,
+			hoverOutlineColor: l,
+			selectedHotspotColor: u,
+			multipleCorrect: d,
+			partialScoring: p,
+			language: g,
+			fontSizeFactor: _,
+			autoplayAudioEnabled: v,
+			completeAudioEnabled: y,
+			customAudioButton: b,
+			shapes: {
+				...h,
+				rectangles: (x || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n }),
+				polygons: (S || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n }),
+				circles: (C || []).map(({ index: e, correct: t, ...n }) => w ? {
+					correct: t,
+					...n
+				} : { ...n })
+			},
+			responseCorrect: r.mode === "evaluate" ? t(i, n) : void 0,
+			extraCSSRules: i.extraCSSRules
+		};
+		r.role === "instructor" && (r.mode === "view" || r.mode === "evaluate") ? (o.rationale = i.rationaleEnabled ? i.rationale : null, o.teacherInstructions = i.teacherInstructionsEnabled ? i.teacherInstructions : null) : (o.rationale = null, o.teacherInstructions = null), o.prompt = i.promptEnabled ? m : null, o.strokeWidth = i.strokeWidth, e(o);
+	});
+}
+var c = (e = {}) => new Promise((t) => {
+	t({
+		...n,
+		...e
+	});
+}), l = (e, n, r = {}) => {
+	let { answers: a } = n || {};
+	if (!e.shapes || !e.shapes.rectangles && !e.shapes.polygons && !e.shapes.circles) return 0;
+	let { shapes: { rectangles: o = [], polygons: s = [], circles: c = [] } = {} } = e;
+	if (!i.enabled(e, r)) return +!!t(e, n);
+	let l = 0, u = 0, d = [
+		...o,
+		...s,
+		...c
+	], f = d.filter((e) => e.correct);
+	d.forEach((e) => {
+		let t = a && a.filter((t) => t.id === e.id)[0], n = e.correct && t;
+		t && (u += 1), n && (l += 1);
+	});
+	let p = u > f.length ? u - f.length : 0, m = f.length === 0 ? 1 : f.length, h = ((l - p) / m).toFixed(2);
+	return h < 0 ? 0 : parseFloat(h);
+}, u = (e, t, n) => {
+	let r = [], { answers: a } = t || {}, { shapes: o } = e || {}, s = [];
+	o && (o.rectangles && s.push(...o.rectangles), o.polygons && s.push(...o.polygons), o.circles && s.push(...o.circles));
+	let c = s.filter((e) => e.correct), u = s.length;
+	if (r.push(`Total of ${u} hotspot(s) defined, ${c.length} correct.`), a && a.length > 0) {
+		r.push(`Student selected ${a.length} hotspot(s).`);
+		let e = 0, t = 0;
+		a.forEach((n) => {
+			let r = s.find((e) => e.id === n.id);
+			r && r.correct ? e++ : t++;
+		});
+		let n = c.filter((e) => !a.some((t) => t.id === e.id)).length;
+		e > 0 && r.push(`${e} correct hotspot(s) selected.`), t > 0 && r.push(`${t} incorrect hotspot(s) selected.`), n > 0 && r.push(`${n} correct hotspot(s) missed.`);
+	} else r.push("No hotspots selected.");
+	if (i.enabled(e, n)) {
+		if (r.push("Score calculated using partial scoring."), a && a.length > 0) {
+			let e = 0, t = 0;
+			a.forEach((n) => {
+				let r = s.find((e) => e.id === n.id);
+				r && r.correct ? e++ : t++;
+			});
+			let n = c.length;
+			if (r.push(`Partial scoring calculation: ${e} correct selections out of ${n} available.`), t > n) {
+				let i = t - (n - e);
+				r.push(`${i} extra incorrect selection(s) beyond required amount are deducted from score.`);
+			}
+		}
+	} else r.push("Score calculated using all-or-nothing scoring.");
+	let d = l(e, t, n);
+	return r.push(`Score: ${d}.`), r;
+};
+function d(t, n, r = {}) {
+	return new Promise((i) => {
+		if (a("outcome..."), (!n || e(n)) && i({
+			score: 0,
+			empty: !0,
+			traceLog: ["No hotspots selected. Score: 0."]
+		}), n.answers) {
+			let e = u(t, n, r);
+			i({
+				score: l(t, n, r),
+				empty: !1,
+				traceLog: e
+			});
+		} else i({
+			score: 0,
+			empty: !0,
+			traceLog: ["No hotspots selected. Score: 0."]
+		});
+	});
+}
+var f = (e) => {
+	let t = [];
+	return e.forEach((e) => {
+		let { correct: n, id: r } = e;
+		n && t.push({ id: r });
+	}), t;
+}, p = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { shapes: { rectangles: t = [], circles: r = [], polygons: i = {} } = {} } = e, a = f(t), o = f(i), s = f(r);
+		n({
+			answers: [
+				...a,
+				...o,
+				...s
+			],
+			id: "1"
+		});
+	} else n(null);
+}), m = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), h = (e = {}, t = {}) => {
+	let { shapes: n } = e, { minShapes: r = 2, maxShapes: i, maxSelections: a } = t, o = {};
+	[
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((n) => {
+		t[n]?.required && !m(e[n]) && (o[n] = "This field is required.");
+	});
+	let s = Object.values(n || {}).reduce((e, t) => [...e, ...t], []), c = (s || []).reduce((e, t) => t.correct ? e + 1 : e, 0), l = (s || []).length;
+	return l < r ? o.shapes = `There should be at least ${r} shapes defined.` : l > i && (o.shapes = `No more than ${i} shapes should be defined.`), c < 1 ? o.selections = "There should be at least 1 shape selected." : c > a && (o.selections = `No more than ${a} shapes should be selected.`), o;
+};
+//#endregion
+export { p as createCorrectResponseSession, c as createDefaultModel, u as getLogTrace, s as model, o as normalize, d as outcome, h as validate };

package/dist/controller/utils.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/controller/src/utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const getCorrectResponse: (choices: any) => any;
+export declare const isResponseCorrect: (question: any, session: any) => any;

package/dist/controller/utils.js

@@ -0,0 +1,13 @@
+import e from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEmpty.js";
+import t from "../node_modules/.bun/lodash-es@4.18.1/node_modules/lodash-es/isEqual.js";
+//#region src/controller/utils.ts
+var n = (e) => e.filter((e) => e.correct).map((e) => e.id).sort(), r = (r, i) => {
+	let { shapes: { rectangles: a = [], polygons: o = [], circles: s = [] } } = r, c = n([
+		...a,
+		...o,
+		...s
+	]);
+	return !i || e(i) ? !1 : i.answers && i.answers.length ? t((i.answers || []).map((e) => e.id).sort(), c) : !(c && c.length);
+};
+//#endregion
+export { r as isResponseCorrect };

package/dist/delivery/hotspot/circle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/src/hotspot/circle.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 CircleComponent extends React.Component {
+    constructor(props: any);
+    handleClick: any;
+    handleMouseEnter: any;
+    handleMouseLeave: any;
+    getEvaluateOutlineColor: (isCorrect: any, markAsCorrect: any, outlineColor: any) => any;
+    getOutlineWidth: (showCorrectEnabled: any, selected: any, markAsCorrect: any, strokeWidth: any) => any;
+    render(): React.JSX.Element;
+}
+export default CircleComponent;

package/dist/delivery/hotspot/circle.js

@@ -0,0 +1,100 @@
+import e from "./image-konva-tooltip.js";
+import { faCorrect as t, faWrong as n } from "./icons.js";
+import r from "react";
+import i from "prop-types";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Circle as s, Group as c, Rect as l } from "react-konva";
+//#region src/delivery/hotspot/circle.tsx
+function u(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function d(e, t) {
+	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
+}
+var f = d(l, "Rect"), p = d(c, "Group"), m = d(s, "Circle"), h = class extends r.Component {
+	constructor(e) {
+		super(e), this.state = { hovered: !1 };
+	}
+	handleClick = (e) => {
+		let { onClick: t, id: n, selected: r, disabled: i } = this.props;
+		i || (e.cancelBubble = !0, t({
+			id: n,
+			selected: !r,
+			selector: "Mouse"
+		}));
+	};
+	handleMouseEnter = () => {
+		let { disabled: e } = this.props;
+		e || (document.body.style.cursor = "pointer"), this.setState({ hovered: !0 });
+	};
+	handleMouseLeave = () => {
+		document.body.style.cursor = "default", this.setState({ hovered: !1 });
+	};
+	getEvaluateOutlineColor = (e, t, n) => t ? "green" : e ? n : "red";
+	getOutlineWidth = (e, t, n, r) => n || !n && !e && t ? r : 0;
+	render() {
+		let { radius: r, hotspotColor: i, isCorrect: s, isEvaluateMode: c, hoverOutlineColor: l, outlineColor: u, selected: d, x: h, y: g, evaluateText: _, strokeWidth: v, scale: y, markAsCorrect: b, selectedHotspotColor: x, showCorrectEnabled: S } = this.props, { hovered: C } = this.state, w = c ? this.getEvaluateOutlineColor(s, b, u) : u, T = this.getOutlineWidth(S, d, b, v), E = h - 10, D = g - 10, O;
+		S ? (d && s || !d && !s) && (O = t) : d ? O = s ? t : n : s || (O = n);
+		let k = C && l;
+		return /* @__PURE__ */ o(p, {
+			scaleX: y,
+			scaleY: y,
+			children: [
+				k && /* @__PURE__ */ a(f, {
+					x: h - r,
+					y: g - r,
+					width: r * 2,
+					height: r * 2,
+					stroke: d ? "transparent" : l,
+					strokeWidth: v
+				}),
+				/* @__PURE__ */ a(m, {
+					radius: r,
+					fill: d && x ? x : i,
+					onClick: this.handleClick,
+					onTap: this.handleClick,
+					draggable: !1,
+					stroke: k && !d ? "transparent" : w,
+					strokeWidth: k && !d ? 0 : T,
+					onMouseLeave: this.handleMouseLeave,
+					onMouseEnter: this.handleMouseEnter,
+					x: h,
+					y: g
+				}),
+				c && O ? /* @__PURE__ */ a(e, {
+					src: O,
+					x: E,
+					y: D,
+					tooltip: _
+				}) : null
+			]
+		});
+	}
+};
+h.propTypes = {
+	radius: i.number.isRequired,
+	hotspotColor: i.string.isRequired,
+	id: i.string.isRequired,
+	isCorrect: i.oneOfType([i.bool, i.string]),
+	isEvaluateMode: i.bool.isRequired,
+	disabled: i.bool.isRequired,
+	hoverOutlineColor: i.string,
+	onClick: i.func.isRequired,
+	outlineColor: i.string.isRequired,
+	selected: i.bool.isRequired,
+	x: i.number.isRequired,
+	y: i.number.isRequired,
+	evaluateText: i.string,
+	strokeWidth: i.number,
+	scale: i.number,
+	selectedHotspotColor: i.string,
+	markAsCorrect: i.bool.isRequired,
+	showCorrectEnabled: i.bool.isRequired
+}, h.defaultProps = {
+	isCorrect: !1,
+	evaluateText: null,
+	strokeWidth: 5,
+	scale: 1
+};
+//#endregion
+export { h as default };

package/dist/delivery/hotspot/container.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @synced-from pie-elements/packages/hotspot/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 from 'react';
+export declare class Container extends React.Component {
+    isSelected(shape: any): boolean;
+    correctness: (isCorrect: any, isChecked: any) => any;
+    getEvaluateText: any;
+    render(): React.JSX.Element;
+}
+export default Container;