@pie-element/hotspot 9.0.2-esm.0 → 9.2.0-mui-update.0

package/lib/session-updater.js

@@ -5,39 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.updateSessionMetadata = updateSessionMetadata;
 exports.updateSessionValue = updateSessionValue;
-
 function updateSessionValue(session, model, data) {
-  var id = data.id,
-      selected = data.selected;
-
-  var _ref = model || {},
-      multipleCorrect = _ref.multipleCorrect;
-
+  const {
+    id,
+    selected
+  } = data;
+  const {
+    multipleCorrect
+  } = model || {};
   session.answers = session.answers || [];
-
   if (!selected) {
-    session.answers = session.answers.filter(function (answer) {
-      return answer.id !== id;
-    });
+    session.answers = session.answers.filter(answer => answer.id !== id);
   } else {
-    var item = {
-      id: id
+    const item = {
+      id
     };
-
     if (multipleCorrect) {
       session.answers.push(item);
     } else {
       session.answers = [item];
-    } //update session metadata
-
+    }
 
+    //update session metadata
     session.selector = data.selector;
   }
 }
-
 function updateSessionMetadata(session, metadata) {
   session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing
-
   session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing
 
   if (!session.waitTime && session.audioStartTime && session.audioEndTime) {
@@ -45,4 +39,4 @@ function updateSessionMetadata(session, metadata) {
     session.waitTime = session.audioEndTime - session.audioStartTime;
   }
 }
-//# sourceMappingURL=session-updater.js.map
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJ1cGRhdGVTZXNzaW9uVmFsdWUiLCJzZXNzaW9uIiwibW9kZWwiLCJkYXRhIiwiaWQiLCJzZWxlY3RlZCIsIm11bHRpcGxlQ29ycmVjdCIsImFuc3dlcnMiLCJmaWx0ZXIiLCJhbnN3ZXIiLCJpdGVtIiwicHVzaCIsInNlbGVjdG9yIiwidXBkYXRlU2Vzc2lvbk1ldGFkYXRhIiwibWV0YWRhdGEiLCJhdWRpb1N0YXJ0VGltZSIsImF1ZGlvRW5kVGltZSIsIndhaXRUaW1lIl0sInNvdXJjZXMiOlsiLi4vc3JjL3Nlc3Npb24tdXBkYXRlci5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgZnVuY3Rpb24gdXBkYXRlU2Vzc2lvblZhbHVlKHNlc3Npb24sIG1vZGVsLCBkYXRhKSB7XG4gIGNvbnN0IHsgaWQsIHNlbGVjdGVkIH0gPSBkYXRhO1xuICBjb25zdCB7IG11bHRpcGxlQ29ycmVjdCB9ID0gbW9kZWwgfHwge307XG4gIHNlc3Npb24uYW5zd2VycyA9IHNlc3Npb24uYW5zd2VycyB8fCBbXTtcblxuICBpZiAoIXNlbGVjdGVkKSB7XG4gICAgc2Vzc2lvbi5hbnN3ZXJzID0gc2Vzc2lvbi5hbnN3ZXJzLmZpbHRlcigoYW5zd2VyKSA9PiBhbnN3ZXIuaWQgIT09IGlkKTtcbiAgfSBlbHNlIHtcbiAgICBjb25zdCBpdGVtID0geyBpZCB9O1xuICAgIGlmIChtdWx0aXBsZUNvcnJlY3QpIHtcbiAgICAgIHNlc3Npb24uYW5zd2Vycy5wdXNoKGl0ZW0pO1xuICAgIH0gZWxzZSB7XG4gICAgICBzZXNzaW9uLmFuc3dlcnMgPSBbaXRlbV07XG4gICAgfVxuXG4gICAgLy91cGRhdGUgc2Vzc2lvbiBtZXRhZGF0YVxuICAgIHNlc3Npb24uc2VsZWN0b3IgPSBkYXRhLnNlbGVjdG9yO1xuICB9XG59XG5cbmV4cG9ydCBmdW5jdGlvbiB1cGRhdGVTZXNzaW9uTWV0YWRhdGEoc2Vzc2lvbiwgbWV0YWRhdGEpIHtcbiAgc2Vzc2lvbi5hdWRpb1N0YXJ0VGltZSA9IHNlc3Npb24uYXVkaW9TdGFydFRpbWUgfHwgbWV0YWRhdGEuYXVkaW9TdGFydFRpbWU7IC8vdGltZXN0YW1wIHdoZW4gYXV0by1wbGF5ZWQgYXVkaW8gc3RhcnRlZCBwbGF5aW5nXG4gIHNlc3Npb24uYXVkaW9FbmRUaW1lID0gc2Vzc2lvbi5hdWRpb0VuZFRpbWUgfHwgbWV0YWRhdGEuYXVkaW9FbmRUaW1lOyAvL3RpbWVzdGFtcCB3aGVuIGF1dG8tcGxheWVkIGF1ZGlvIGNvbXBsZXRlZCBwbGF5aW5nXG5cbiAgaWYgKCFzZXNzaW9uLndhaXRUaW1lICYmIHNlc3Npb24uYXVkaW9TdGFydFRpbWUgJiYgc2Vzc2lvbi5hdWRpb0VuZFRpbWUpIHtcbiAgICAvLyB3YWl0VGltZSBpcyBlbGFwc2VkIHRpbWUgdGhlIHVzZXIgd2FpdGVkIGZvciBhdXRvLXBsYXllZCBhdWRpbyB0byBmaW5pc2hcbiAgICBzZXNzaW9uLndhaXRUaW1lID0gc2Vzc2lvbi5hdWRpb0VuZFRpbWUgLSBzZXNzaW9uLmF1ZGlvU3RhcnRUaW1lO1xuICB9XG59XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBTyxTQUFTQSxrQkFBa0JBLENBQUNDLE9BQU8sRUFBRUMsS0FBSyxFQUFFQyxJQUFJLEVBQUU7RUFDdkQsTUFBTTtJQUFFQyxFQUFFO0lBQUVDO0VBQVMsQ0FBQyxHQUFHRixJQUFJO0VBQzdCLE1BQU07SUFBRUc7RUFBZ0IsQ0FBQyxHQUFHSixLQUFLLElBQUksQ0FBQyxDQUFDO0VBQ3ZDRCxPQUFPLENBQUNNLE9BQU8sR0FBR04sT0FBTyxDQUFDTSxPQUFPLElBQUksRUFBRTtFQUV2QyxJQUFJLENBQUNGLFFBQVEsRUFBRTtJQUNiSixPQUFPLENBQUNNLE9BQU8sR0FBR04sT0FBTyxDQUFDTSxPQUFPLENBQUNDLE1BQU0sQ0FBRUMsTUFBTSxJQUFLQSxNQUFNLENBQUNMLEVBQUUsS0FBS0EsRUFBRSxDQUFDO0VBQ3hFLENBQUMsTUFBTTtJQUNMLE1BQU1NLElBQUksR0FBRztNQUFFTjtJQUFHLENBQUM7SUFDbkIsSUFBSUUsZUFBZSxFQUFFO01BQ25CTCxPQUFPLENBQUNNLE9BQU8sQ0FBQ0ksSUFBSSxDQUFDRCxJQUFJLENBQUM7SUFDNUIsQ0FBQyxNQUFNO01BQ0xULE9BQU8sQ0FBQ00sT0FBTyxHQUFHLENBQUNHLElBQUksQ0FBQztJQUMxQjs7SUFFQTtJQUNBVCxPQUFPLENBQUNXLFFBQVEsR0FBR1QsSUFBSSxDQUFDUyxRQUFRO0VBQ2xDO0FBQ0Y7QUFFTyxTQUFTQyxxQkFBcUJBLENBQUNaLE9BQU8sRUFBRWEsUUFBUSxFQUFFO0VBQ3ZEYixPQUFPLENBQUNjLGNBQWMsR0FBR2QsT0FBTyxDQUFDYyxjQUFjLElBQUlELFFBQVEsQ0FBQ0MsY0FBYyxDQUFDLENBQUM7RUFDNUVkLE9BQU8sQ0FBQ2UsWUFBWSxHQUFHZixPQUFPLENBQUNlLFlBQVksSUFBSUYsUUFBUSxDQUFDRSxZQUFZLENBQUMsQ0FBQzs7RUFFdEUsSUFBSSxDQUFDZixPQUFPLENBQUNnQixRQUFRLElBQUloQixPQUFPLENBQUNjLGNBQWMsSUFBSWQsT0FBTyxDQUFDZSxZQUFZLEVBQUU7SUFDdkU7SUFDQWYsT0FBTyxDQUFDZ0IsUUFBUSxHQUFHaEIsT0FBTyxDQUFDZSxZQUFZLEdBQUdmLE9BQU8sQ0FBQ2MsY0FBYztFQUNsRTtBQUNGIiwiaWdub3JlTGlzdCI6W119

package/lib/session-updater.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/session-updater.js"],"names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"mappings":";;;;;;;;AAAO,SAASA,kBAAT,CAA4BC,OAA5B,EAAqCC,KAArC,EAA4CC,IAA5C,EAAkD;AACvD,MAAQC,EAAR,GAAyBD,IAAzB,CAAQC,EAAR;AAAA,MAAYC,QAAZ,GAAyBF,IAAzB,CAAYE,QAAZ;;AACA,aAA4BH,KAAK,IAAI,EAArC;AAAA,MAAQI,eAAR,QAAQA,eAAR;;AACAL,EAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,IAAmB,EAArC;;AAEA,MAAI,CAACF,QAAL,EAAe;AACbJ,IAAAA,OAAO,CAACM,OAAR,GAAkBN,OAAO,CAACM,OAAR,CAAgBC,MAAhB,CAAuB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACL,EAAP,KAAcA,EAA1B;AAAA,KAAvB,CAAlB;AACD,GAFD,MAEO;AACL,QAAMM,IAAI,GAAG;AAAEN,MAAAA,EAAE,EAAFA;AAAF,KAAb;;AACA,QAAIE,eAAJ,EAAqB;AACnBL,MAAAA,OAAO,CAACM,OAAR,CAAgBI,IAAhB,CAAqBD,IAArB;AACD,KAFD,MAEO;AACLT,MAAAA,OAAO,CAACM,OAAR,GAAkB,CAACG,IAAD,CAAlB;AACD,KANI,CAQL;;;AACAT,IAAAA,OAAO,CAACW,QAAR,GAAmBT,IAAI,CAACS,QAAxB;AACD;AACF;;AAEM,SAASC,qBAAT,CAA+BZ,OAA/B,EAAwCa,QAAxC,EAAkD;AACvDb,EAAAA,OAAO,CAACc,cAAR,GAAyBd,OAAO,CAACc,cAAR,IAA0BD,QAAQ,CAACC,cAA5D,CADuD,CACqB;;AAC5Ed,EAAAA,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACe,YAAR,IAAwBF,QAAQ,CAACE,YAAxD,CAFuD,CAEe;;AAEtE,MAAI,CAACf,OAAO,CAACgB,QAAT,IAAqBhB,OAAO,CAACc,cAA7B,IAA+Cd,OAAO,CAACe,YAA3D,EAAyE;AACvE;AACAf,IAAAA,OAAO,CAACgB,QAAR,GAAmBhB,OAAO,CAACe,YAAR,GAAuBf,OAAO,CAACc,cAAlD;AACD;AACF","sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n\n  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = session.audioEndTime - session.audioStartTime;\n  }\n}\n"],"file":"session-updater.js"}
+{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","model","data","id","selected","multipleCorrect","answers","filter","answer","item","push","selector","updateSessionMetadata","metadata","audioStartTime","audioEndTime","waitTime"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, model, data) {\n  const { id, selected } = data;\n  const { multipleCorrect } = model || {};\n  session.answers = session.answers || [];\n\n  if (!selected) {\n    session.answers = session.answers.filter((answer) => answer.id !== id);\n  } else {\n    const item = { id };\n    if (multipleCorrect) {\n      session.answers.push(item);\n    } else {\n      session.answers = [item];\n    }\n\n    //update session metadata\n    session.selector = data.selector;\n  }\n}\n\nexport function updateSessionMetadata(session, metadata) {\n  session.audioStartTime = session.audioStartTime || metadata.audioStartTime; //timestamp when auto-played audio started playing\n  session.audioEndTime = session.audioEndTime || metadata.audioEndTime; //timestamp when auto-played audio completed playing\n\n  if (!session.waitTime && session.audioStartTime && session.audioEndTime) {\n    // waitTime is elapsed time the user waited for auto-played audio to finish\n    session.waitTime = session.audioEndTime - session.audioStartTime;\n  }\n}\n"],"mappings":";;;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,KAAK,EAAEC,IAAI,EAAE;EACvD,MAAM;IAAEC,EAAE;IAAEC;EAAS,CAAC,GAAGF,IAAI;EAC7B,MAAM;IAAEG;EAAgB,CAAC,GAAGJ,KAAK,IAAI,CAAC,CAAC;EACvCD,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,IAAI,EAAE;EAEvC,IAAI,CAACF,QAAQ,EAAE;IACbJ,OAAO,CAACM,OAAO,GAAGN,OAAO,CAACM,OAAO,CAACC,MAAM,CAAEC,MAAM,IAAKA,MAAM,CAACL,EAAE,KAAKA,EAAE,CAAC;EACxE,CAAC,MAAM;IACL,MAAMM,IAAI,GAAG;MAAEN;IAAG,CAAC;IACnB,IAAIE,eAAe,EAAE;MACnBL,OAAO,CAACM,OAAO,CAACI,IAAI,CAACD,IAAI,CAAC;IAC5B,CAAC,MAAM;MACLT,OAAO,CAACM,OAAO,GAAG,CAACG,IAAI,CAAC;IAC1B;;IAEA;IACAT,OAAO,CAACW,QAAQ,GAAGT,IAAI,CAACS,QAAQ;EAClC;AACF;AAEO,SAASC,qBAAqBA,CAACZ,OAAO,EAAEa,QAAQ,EAAE;EACvDb,OAAO,CAACc,cAAc,GAAGd,OAAO,CAACc,cAAc,IAAID,QAAQ,CAACC,cAAc,CAAC,CAAC;EAC5Ed,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACe,YAAY,IAAIF,QAAQ,CAACE,YAAY,CAAC,CAAC;;EAEtE,IAAI,CAACf,OAAO,CAACgB,QAAQ,IAAIhB,OAAO,CAACc,cAAc,IAAId,OAAO,CAACe,YAAY,EAAE;IACvE;IACAf,OAAO,CAACgB,QAAQ,GAAGhB,OAAO,CAACe,YAAY,GAAGf,OAAO,CAACc,cAAc;EAClE;AACF","ignoreList":[]}

package/package.json

@@ -1,47 +1,33 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "9.0.2-esm.0",
+  "version": "9.2.0-mui-update.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.22.1",
-    "@pie-lib/math-rendering": "^3.19.0",
-    "@pie-lib/render-ui": "^4.32.1",
-    "@pie-lib/test-utils": "^0.19.1",
-    "konva": "^3.2.5",
+    "@pie-lib/correct-answer-toggle": "2.37.0-mui-update.0",
+    "@pie-lib/math-rendering": "3.38.0-mui-update.0",
+    "@pie-lib/render-ui": "4.47.0-mui-update.0",
+    "@pie-lib/test-utils": "0.34.0-mui-update.0",
+    "konva": "8.3.0",
     "prop-types": "^15.6.1",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1",
-    "react-konva": "^16.9.0-0"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-konva": "18.1.0"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "007ac5f6be719f57eccb8af3c08e7014c2797f1e",
+  "gitHead": "0e14ff981bcdc8a89a0e58484026496701bfdbc3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },
   "main": "lib/index.js",
-  "module": "src/index.js",
-  "exports": {
-    ".": {
-      "import": "./esm/element.js",
-      "require": "./lib/index.js",
-      "default": "./esm/element.js"
-    },
-    "./configure": {
-      "import": "./esm/configure.js",
-      "require": "./configure/lib/index.js",
-      "default": "./esm/configure.js"
-    },
-    "./controller": {
-      "import": "./esm/controller.js",
-      "require": "./controller/lib/index.js",
-      "default": "./esm/controller.js"
-    }
-  }
+  "module": "src/index.js"
 }

package/src/hotspot/circle.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Circle, Group, Rect } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
 import ImageComponent from './image-konva-tooltip';
 import { faCorrect, faWrong } from './icons';
 
@@ -44,7 +43,6 @@ class CircleComponent extends React.Component {
 
   render() {
     const {
-      classes,
       radius,
       hotspotColor,
       isCorrect,
@@ -105,7 +103,6 @@ class CircleComponent extends React.Component {
           />
         )}
         <Circle
-          classes={classes.base}
           radius={radius}
           fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
@@ -117,6 +114,7 @@ class CircleComponent extends React.Component {
           onMouseEnter={this.handleMouseEnter}
           x={x}
           y={y}
+          opacity={0.5}
         />
         {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
       </Group>
@@ -124,16 +122,7 @@ class CircleComponent extends React.Component {
   }
 }
 
-const styles = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5,
-    position: 'relative',
-  },
-});
-
 CircleComponent.propTypes = {
-  classes: PropTypes.object.isRequired,
   radius: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -161,4 +150,4 @@ CircleComponent.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(CircleComponent);
+export default CircleComponent;

package/src/hotspot/container.jsx

@@ -1,13 +1,38 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layer, Stage } from 'react-konva';
-import { withStyles } from '@material-ui/core/styles';
-import { color } from '@pie-lib/render-ui';
+import { styled } from '@mui/material/styles';
 
 import Rectangle from './rectangle';
 import Polygon from './polygon';
 import Circle from './circle';
 
+const BaseContainer = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  position: 'relative',
+  background: theme.palette.common.white,
+  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
+  width: 'fit-content',
+}));
+
+const ImageContainer = styled('div')({
+  position: 'relative',
+  width: 'fit-content',
+});
+
+const Image = styled('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+const StyledStage = styled(Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute',
+});
+
 export class Container extends React.Component {
   isSelected(shape) {
     const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];
@@ -34,7 +59,6 @@ export class Container extends React.Component {
 
   render() {
     const {
-      classes,
       dimensions: { width: withProp, height: heightProp },
       disabled,
       hotspotColor,
@@ -54,21 +78,19 @@ export class Container extends React.Component {
     const height = heightProp * SCALE;
 
     return (
-      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>
+      <BaseContainer style={{ padding: strokeWidth / 2 }}>
         {imageUrl ? (
-          <div className={classes.imageContainer}>
-            <img
+          <ImageContainer>
+            <Image
               alt="hotspot-image"
-              className={classes.image}
               height="auto"
               src={imageUrl}
               style={{ width, height, maxWidth: width, maxHeight: height }}
             />
-          </div>
+          </ImageContainer>
         ) : null}
 
-        <Stage
-          className={classes.stage}
+        <StyledStage
           height={height + strokeWidth}
           width={width + strokeWidth}
           x={strokeWidth / 2}
@@ -142,7 +164,6 @@ export class Container extends React.Component {
 
               return (
                 <Circle
-                  classes={classes}
                   scale={SCALE}
                   isEvaluateMode={isEvaluateMode}
                   isCorrect={isCorrect}
@@ -166,49 +187,13 @@ export class Container extends React.Component {
               );
             })}
           </Layer>
-        </Stage>
-      </div>
+        </StyledStage>
+      </BaseContainer>
     );
   }
 }
 
-const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-    position: 'relative',
-    background: theme.palette.common.white,
-    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,
-    width: 'fit-content',
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center',
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content',
-  },
-  stage: {
-    left: 0,
-    top: 0,
-    position: 'absolute',
-  },
-  resize: {
-    borderBottom: `1px solid ${color.disabled()}`,
-    borderRight: `1px solid ${color.disabled()}`,
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px',
-  },
-});
-
 Container.propTypes = {
-  classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
   disabled: PropTypes.bool.isRequired,
   hotspotColor: PropTypes.string.isRequired,
@@ -229,4 +214,4 @@ Container.defaultProps = {
   scale: 1,
 };
 
-export default withStyles(styles)(Container);
+export default Container;