@pie-element/hotspot 4.8.3 → 4.8.4-next.1016

package/module/configure.js

@@ -1,2340 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core, _dll_material_ui__core_styles, _dll_lodash, _dll_react_dom} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-import {_dll_pie_lib__config_ui, _dll_pie_lib__editable_html, _dll_pie_framework__pie_configure_events} from "../../shared-config@^1.8.13/module/index.js";
-import {_dll_react_konva} from "../../../@pie-ui/shared-konva@^2.5.17/module/index.js";
-function unwrapExports(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var w = d * 7;
-var y = d * 365.25;
-var ms = function (val, options) {
-  options = options || ({});
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isFinite(val)) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val));
-};
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = (/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i).exec(str);
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'weeks':
-    case 'week':
-    case 'w':
-      return n * w;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-function fmtShort(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (msAbs >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (msAbs >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (msAbs >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-function fmtLong(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return plural(ms, msAbs, d, 'day');
-  }
-  if (msAbs >= h) {
-    return plural(ms, msAbs, h, 'hour');
-  }
-  if (msAbs >= m) {
-    return plural(ms, msAbs, m, 'minute');
-  }
-  if (msAbs >= s) {
-    return plural(ms, msAbs, s, 'second');
-  }
-  return ms + ' ms';
-}
-function plural(ms, msAbs, n, name) {
-  var isPlural = msAbs >= n * 1.5;
-  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
-}
-function setup(env) {
-  createDebug.debug = createDebug;
-  createDebug.default = createDebug;
-  createDebug.coerce = coerce;
-  createDebug.disable = disable;
-  createDebug.enable = enable;
-  createDebug.enabled = enabled;
-  createDebug.humanize = ms;
-  Object.keys(env).forEach(function (key) {
-    createDebug[key] = env[key];
-  });
-  createDebug.instances = [];
-  createDebug.names = [];
-  createDebug.skips = [];
-  createDebug.formatters = {};
-  function selectColor(namespace) {
-    var hash = 0;
-    for (var i = 0; i < namespace.length; i++) {
-      hash = (hash << 5) - hash + namespace.charCodeAt(i);
-      hash |= 0;
-    }
-    return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
-  }
-  createDebug.selectColor = selectColor;
-  function createDebug(namespace) {
-    var prevTime;
-    function debug() {
-      if (!debug.enabled) {
-        return;
-      }
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var self = debug;
-      var curr = Number(new Date());
-      var ms = curr - (prevTime || curr);
-      self.diff = ms;
-      self.prev = prevTime;
-      self.curr = curr;
-      prevTime = curr;
-      args[0] = createDebug.coerce(args[0]);
-      if (typeof args[0] !== 'string') {
-        args.unshift('%O');
-      }
-      var index = 0;
-      args[0] = args[0].replace(/%([a-zA-Z%])/g, function (match, format) {
-        if (match === '%%') {
-          return match;
-        }
-        index++;
-        var formatter = createDebug.formatters[format];
-        if (typeof formatter === 'function') {
-          var val = args[index];
-          match = formatter.call(self, val);
-          args.splice(index, 1);
-          index--;
-        }
-        return match;
-      });
-      createDebug.formatArgs.call(self, args);
-      var logFn = self.log || createDebug.log;
-      logFn.apply(self, args);
-    }
-    debug.namespace = namespace;
-    debug.enabled = createDebug.enabled(namespace);
-    debug.useColors = createDebug.useColors();
-    debug.color = selectColor(namespace);
-    debug.destroy = destroy;
-    debug.extend = extend;
-    if (typeof createDebug.init === 'function') {
-      createDebug.init(debug);
-    }
-    createDebug.instances.push(debug);
-    return debug;
-  }
-  function destroy() {
-    var index = createDebug.instances.indexOf(this);
-    if (index !== -1) {
-      createDebug.instances.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-  function extend(namespace, delimiter) {
-    return createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
-  }
-  function enable(namespaces) {
-    createDebug.save(namespaces);
-    createDebug.names = [];
-    createDebug.skips = [];
-    var i;
-    var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-    var len = split.length;
-    for (i = 0; i < len; i++) {
-      if (!split[i]) {
-        continue;
-      }
-      namespaces = split[i].replace(/\*/g, '.*?');
-      if (namespaces[0] === '-') {
-        createDebug.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-      } else {
-        createDebug.names.push(new RegExp('^' + namespaces + '$'));
-      }
-    }
-    for (i = 0; i < createDebug.instances.length; i++) {
-      var instance = createDebug.instances[i];
-      instance.enabled = createDebug.enabled(instance.namespace);
-    }
-  }
-  function disable() {
-    createDebug.enable('');
-  }
-  function enabled(name) {
-    if (name[name.length - 1] === '*') {
-      return true;
-    }
-    var i;
-    var len;
-    for ((i = 0, len = createDebug.skips.length); i < len; i++) {
-      if (createDebug.skips[i].test(name)) {
-        return false;
-      }
-    }
-    for ((i = 0, len = createDebug.names.length); i < len; i++) {
-      if (createDebug.names[i].test(name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function coerce(val) {
-    if (val instanceof Error) {
-      return val.stack || val.message;
-    }
-    return val;
-  }
-  createDebug.enable(createDebug.load());
-  return createDebug;
-}
-var common = setup;
-var browser = createCommonjsModule(function (module, exports) {
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-    return _typeof(obj);
-  }
-  exports.log = log;
-  exports.formatArgs = formatArgs;
-  exports.save = save;
-  exports.load = load;
-  exports.useColors = useColors;
-  exports.storage = localstorage();
-  exports.colors = ['#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC', '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF', '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC', '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF', '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC', '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033', '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366', '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933', '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC', '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF', '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'];
-  function useColors() {
-    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
-      return true;
-    }
-    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-      return false;
-    }
-    return typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || typeof window !== 'undefined' && window.console && (window.console.firebug || window.console.exception && window.console.table) || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
-  }
-  function formatArgs(args) {
-    args[0] = (this.useColors ? '%c' : '') + this.namespace + (this.useColors ? ' %c' : ' ') + args[0] + (this.useColors ? '%c ' : ' ') + '+' + module.exports.humanize(this.diff);
-    if (!this.useColors) {
-      return;
-    }
-    var c = 'color: ' + this.color;
-    args.splice(1, 0, c, 'color: inherit');
-    var index = 0;
-    var lastC = 0;
-    args[0].replace(/%[a-zA-Z%]/g, function (match) {
-      if (match === '%%') {
-        return;
-      }
-      index++;
-      if (match === '%c') {
-        lastC = index;
-      }
-    });
-    args.splice(lastC, 0, c);
-  }
-  function log() {
-    var _console;
-    return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
-  }
-  function save(namespaces) {
-    try {
-      if (namespaces) {
-        exports.storage.setItem('debug', namespaces);
-      } else {
-        exports.storage.removeItem('debug');
-      }
-    } catch (error) {}
-  }
-  function load() {
-    var r;
-    try {
-      r = exports.storage.getItem('debug');
-    } catch (error) {}
-    if (!r && typeof process !== 'undefined' && ('env' in process)) {
-      r = process.env.DEBUG;
-    }
-    return r;
-  }
-  function localstorage() {
-    try {
-      return localStorage;
-    } catch (error) {}
-  }
-  module.exports = common(exports);
-  var formatters = module.exports.formatters;
-  formatters.j = function (v) {
-    try {
-      return JSON.stringify(v);
-    } catch (error) {
-      return '[UnexpectedJSONParseError]: ' + error.message;
-    }
-  };
-});
-browser.log;
-browser.formatArgs;
-browser.save;
-browser.load;
-browser.useColors;
-browser.storage;
-browser.colors;
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {Select: Select} = _dll_material_ui__core;
-const {MenuItem: MenuItem} = _dll_material_ui__core;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/hotspot-palette.jsx";
-class Palette extends React.Component {
-  constructor(...args) {
-    super(...args);
-    Palette.prototype.__init.call(this);
-  }
-  __init() {
-    this.onChange = name => event => {
-      const {value} = event.target;
-      const {onHotspotColorChange, onOutlineColorChange} = this.props;
-      if (name === 'hotspot') {
-        onHotspotColorChange(value);
-      } else {
-        onOutlineColorChange(value);
-      }
-    };
-  }
-  render() {
-    const {classes, hotspotColor, outlineColor, hotspotList, outlineList} = this.props;
-    return React.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 24
-      }
-    }, React.createElement(InputContainer, {
-      label: "Hot Spot",
-      className: classes.input,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 25
-      }
-    }, React.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('hotspot'),
-      value: hotspotColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 26
-      }
-    }, hotspotList.map(hotspot => React.createElement(MenuItem, {
-      key: hotspot,
-      value: hotspot,
-      className: classes.item,
-      style: {
-        backgroundColor: hotspot
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 32
-      }
-    }, hotspot)))), React.createElement(InputContainer, {
-      label: "Response Outline",
-      className: classes.input,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 44
-      }
-    }, React.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('outline'),
-      value: outlineColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 45
-      }
-    }, outlineList.map(outline => React.createElement(MenuItem, {
-      key: outline,
-      value: outline,
-      className: classes.item,
-      style: {
-        border: `2px solid ${outline}`
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 51
-      }
-    }, outline)))));
-  }
-}
-const styles = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 2,
-    display: 'flex'
-  },
-  input: {
-    flex: 1,
-    width: '90%'
-  },
-  item: {
-    borderRadius: '2px',
-    height: '22px',
-    marginLeft: theme.spacing.unit * 2,
-    marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2
-  }
-});
-Palette.propTypes = {
-  classes: PropTypes.object.isRequired,
-  hotspotColor: PropTypes.string.isRequired,
-  hotspotList: PropTypes.array.isRequired,
-  onHotspotColorChange: PropTypes.func.isRequired,
-  onOutlineColorChange: PropTypes.func.isRequired,
-  outlineColor: PropTypes.string.isRequired,
-  outlineList: PropTypes.array.isRequired
-};
-var HotspotPalette = withStyles(styles)(Palette);
-var interopRequireDefault = createCommonjsModule(function (module) {
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      "default": obj
-    };
-  }
-  module.exports = _interopRequireDefault;
-});
-unwrapExports(interopRequireDefault);
-var setPrototypeOf = createCommonjsModule(function (module) {
-  function _setPrototypeOf(o, p) {
-    module.exports = _setPrototypeOf = Object.setPrototypeOf || (function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    });
-    return _setPrototypeOf(o, p);
-  }
-  module.exports = _setPrototypeOf;
-});
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  setPrototypeOf(subClass, superClass);
-}
-var inheritsLoose = _inheritsLoose;
-var setStatic_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var setStatic = function setStatic(key, value) {
-    return function (BaseComponent) {
-      BaseComponent[key] = value;
-      return BaseComponent;
-    };
-  };
-  var _default = setStatic;
-  exports.default = _default;
-});
-unwrapExports(setStatic_1);
-var setDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _setStatic = interopRequireDefault(setStatic_1);
-  var setDisplayName = function setDisplayName(displayName) {
-    return (0, _setStatic.default)('displayName', displayName);
-  };
-  var _default = setDisplayName;
-  exports.default = _default;
-});
-unwrapExports(setDisplayName_1);
-var getDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var getDisplayName = function getDisplayName(Component) {
-    if (typeof Component === 'string') {
-      return Component;
-    }
-    if (!Component) {
-      return undefined;
-    }
-    return Component.displayName || Component.name || 'Component';
-  };
-  var _default = getDisplayName;
-  exports.default = _default;
-});
-unwrapExports(getDisplayName_1);
-var wrapDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _getDisplayName = interopRequireDefault(getDisplayName_1);
-  var wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {
-    return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
-  };
-  var _default = wrapDisplayName;
-  exports.default = _default;
-});
-unwrapExports(wrapDisplayName_1);
-const _react = _dll_react;
-var shouldUpdate_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _inheritsLoose2 = interopRequireDefault(inheritsLoose);
-  var _setDisplayName = interopRequireDefault(setDisplayName_1);
-  var _wrapDisplayName = interopRequireDefault(wrapDisplayName_1);
-  var shouldUpdate = function shouldUpdate(test) {
-    return function (BaseComponent) {
-      var factory = (0, _react.createFactory)(BaseComponent);
-      var ShouldUpdate = (function (_Component) {
-        (0, _inheritsLoose2.default)(ShouldUpdate, _Component);
-        function ShouldUpdate() {
-          return _Component.apply(this, arguments) || this;
-        }
-        var _proto = ShouldUpdate.prototype;
-        _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-          return test(this.props, nextProps);
-        };
-        _proto.render = function render() {
-          return factory(this.props);
-        };
-        return ShouldUpdate;
-      })(_react.Component);
-      {
-        return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
-      }
-    };
-  };
-  var _default = shouldUpdate;
-  exports.default = _default;
-});
-unwrapExports(shouldUpdate_1);
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  var keysA = Object.keys(objA);
-  var keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (var i = 0; i < keysA.length; i++) {
-    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-var shallowEqual_1 = shallowEqual;
-var shallowEqual$1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _shallowEqual = interopRequireDefault(shallowEqual_1);
-  var _default = _shallowEqual.default;
-  exports.default = _default;
-});
-unwrapExports(shallowEqual$1);
-var pure_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _shouldUpdate = interopRequireDefault(shouldUpdate_1);
-  var _shallowEqual = interopRequireDefault(shallowEqual$1);
-  var _setDisplayName = interopRequireDefault(setDisplayName_1);
-  var _wrapDisplayName = interopRequireDefault(wrapDisplayName_1);
-  var pure = function pure(BaseComponent) {
-    var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
-      return !(0, _shallowEqual.default)(props, nextProps);
-    });
-    {
-      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
-    }
-  };
-  var _default = pure;
-  exports.default = _default;
-});
-unwrapExports(pure_1);
-const require$$0 = _dll_react;
-const {SvgIcon: require$$2} = _dll_material_ui__core;
-var createSvgIcon_1 = createCommonjsModule(function (module, exports) {
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = void 0;
-  var _react = interopRequireDefault(require$$0);
-  var _pure = interopRequireDefault(pure_1);
-  var _SvgIcon = interopRequireDefault(require$$2);
-  function createSvgIcon(path, displayName) {
-    var Icon = function Icon(props) {
-      return _react.default.createElement(_SvgIcon.default, props, path);
-    };
-    Icon.displayName = ("").concat(displayName, "Icon");
-    Icon = (0, _pure.default)(Icon);
-    Icon.muiName = 'SvgIcon';
-    return Icon;
-  }
-  var _default = createSvgIcon;
-  exports.default = _default;
-});
-unwrapExports(createSvgIcon_1);
-const require$$0$1 = _dll_react;
-var Help = createCommonjsModule(function (module, exports) {
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = void 0;
-  var _react = interopRequireDefault(require$$0$1);
-  var _createSvgIcon = interopRequireDefault(createSvgIcon_1);
-  var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  }), _react.default.createElement("path", {
-    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
-  })), 'Help');
-  exports.default = _default;
-});
-var Help$1 = unwrapExports(Help);
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const {Rect: Rect} = _dll_react_konva;
-const {Group: Group} = _dll_react_konva;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/hotspot-rectangle.jsx";
-class RectComponent extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    RectComponent.prototype.__init.call(this);
-    RectComponent.prototype.__init2.call(this);
-    RectComponent.prototype.__init3.call(this);
-    RectComponent.prototype.__init4.call(this);
-  }
-  __init() {
-    this.handleClick = e => {
-      const {width, height, isDrawing, onClick, id} = this.props;
-      if (width < 0 && height < 0 && isDrawing) {
-        return;
-      }
-      e.cancelBubble = true;
-      onClick(id);
-    };
-  }
-  __init2() {
-    this.handleMouseEnter = () => {
-      document.body.style.cursor = 'pointer';
-    };
-  }
-  __init3() {
-    this.handleMouseLeave = () => {
-      document.body.style.cursor = 'default';
-    };
-  }
-  __init4() {
-    this.handleOnDragEnd = e => {
-      const {onDragEnd, id} = this.props;
-      onDragEnd(id, {
-        x: e.target.x(),
-        y: e.target.y()
-      });
-    };
-  }
-  render() {
-    const {classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5} = this.props;
-    return React$1.createElement(Group, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 47
-      }
-    }, React$1.createElement(Rect, {
-      classes: classes.base,
-      width: width,
-      height: height,
-      fill: hotspotColor,
-      onClick: this.handleClick,
-      onTap: this.handleClick,
-      draggable: true,
-      stroke: outlineColor,
-      strokeWidth: correct ? strokeWidth : 0,
-      onMouseLeave: this.handleMouseLeave,
-      onMouseEnter: this.handleMouseEnter,
-      onDragEnd: this.handleOnDragEnd,
-      x: x,
-      y: y,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 48
-      }
-    }));
-  }
-}
-const styles$1 = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5
-  }
-});
-RectComponent.propTypes = {
-  classes: PropTypes$1.object.isRequired,
-  correct: PropTypes$1.bool,
-  isDrawing: PropTypes$1.bool.isRequired,
-  id: PropTypes$1.string.isRequired,
-  height: PropTypes$1.number.isRequired,
-  hotspotColor: PropTypes$1.string.isRequired,
-  onClick: PropTypes$1.func.isRequired,
-  onDragEnd: PropTypes$1.func.isRequired,
-  outlineColor: PropTypes$1.string.isRequired,
-  width: PropTypes$1.number.isRequired,
-  x: PropTypes$1.number.isRequired,
-  y: PropTypes$1.number.isRequired,
-  strokeWidth: PropTypes$1.number
-};
-RectComponent.defaultProps = {
-  correct: false
-};
-var Rectangle = withStyles$1(styles$1)(RectComponent);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const {Group: Group$1} = _dll_react_konva;
-const {Line: Line} = _dll_react_konva;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/hotspot-polygon.jsx";
-class PolComponent extends React$2.Component {
-  constructor(...args) {
-    super(...args);
-    PolComponent.prototype.__init.call(this);
-    PolComponent.prototype.__init2.call(this);
-    PolComponent.prototype.__init3.call(this);
-    PolComponent.prototype.__init4.call(this);
-    PolComponent.prototype.__init5.call(this);
-  }
-  static getDerivedStateFromProps(nextProps) {
-    const {points} = nextProps;
-    const xList = points.map(p => p.x);
-    const yList = points.map(p => p.y);
-    const xOffset = Math.min(...xList);
-    const yOffset = Math.max(...yList);
-    if (points.length) {
-      return {
-        x: xOffset,
-        y: yOffset,
-        points: points.reduce((acc, point) => {
-          return acc.concat([point.x - xOffset, point.y - yOffset]);
-        }, [])
-      };
-    }
-    return {
-      x: 0,
-      y: 0,
-      points: []
-    };
-  }
-  __init() {
-    this.state = {};
-  }
-  __init2() {
-    this.handleClick = e => {
-      const {points} = this.props;
-      const xList = points.map(p => p.x);
-      const yList = points.map(p => p.y);
-      const width = Math.max(...xList) - Math.min(...xList);
-      const height = Math.max(...yList) - Math.min(...yList);
-      const {isDrawing, onClick, id} = this.props;
-      if (width < 0 && height < 0 && isDrawing) {
-        return;
-      }
-      e.cancelBubble = true;
-      onClick(id);
-    };
-  }
-  __init3() {
-    this.handleMouseEnter = () => {
-      document.body.style.cursor = 'pointer';
-    };
-  }
-  __init4() {
-    this.handleMouseLeave = () => {
-      document.body.style.cursor = 'default';
-    };
-  }
-  __init5() {
-    this.handleOnDragEnd = e => {
-      const {onDragEnd, id} = this.props;
-      const points = e.target.points() || this.state.points;
-      const newPoints = points.reduce((acc, currentPointCoordinate, index) => {
-        if (index % 2 === 0 && index + 1 < points.length) {
-          acc.push({
-            x: currentPointCoordinate + e.target.x(),
-            y: points[index + 1] + e.target.y()
-          });
-          return acc;
-        } else {
-          return acc;
-        }
-      }, []);
-      onDragEnd(id, {
-        points: newPoints
-      });
-    };
-  }
-  render() {
-    const {classes, correct, hotspotColor, outlineColor, strokeWidth = 5} = this.props;
-    const {points, x, y} = this.state;
-    return React$2.createElement(Group$1, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 91
-      }
-    }, React$2.createElement(Line, {
-      classes: classes.base,
-      points: points,
-      closed: true,
-      fill: hotspotColor,
-      onClick: this.handleClick,
-      onTap: this.handleClick,
-      draggable: true,
-      stroke: outlineColor,
-      strokeWidth: correct ? strokeWidth : 0,
-      onMouseLeave: this.handleMouseLeave,
-      onMouseEnter: this.handleMouseEnter,
-      onDragEnd: this.handleOnDragEnd,
-      x: x,
-      y: y,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 92
-      }
-    }));
-  }
-}
-const styles$2 = () => ({
-  base: {
-    cursor: 'pointer',
-    opacity: 0.5
-  }
-});
-PolComponent.propTypes = {
-  classes: PropTypes$2.object.isRequired,
-  correct: PropTypes$2.bool,
-  isDrawing: PropTypes$2.bool.isRequired,
-  id: PropTypes$2.string.isRequired,
-  hotspotColor: PropTypes$2.string.isRequired,
-  onClick: PropTypes$2.func.isRequired,
-  onDragEnd: PropTypes$2.func.isRequired,
-  outlineColor: PropTypes$2.string.isRequired,
-  points: PropTypes$2.arrayOf(PropTypes$2.shape({
-    x: PropTypes$2.number,
-    y: PropTypes$2.number
-  })).isRequired,
-  strokeWidth: PropTypes$2.number
-};
-PolComponent.defaultProps = {
-  correct: false
-};
-var Polygon = withStyles$2(styles$2)(PolComponent);
-const {cloneDeep: cloneDeep} = _dll_lodash;
-const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {
-  if (keepAspectRatio) {
-    const imageAspectRatio = initialDim.width / initialDim.height;
-    if (resizeType === 'height') {
-      return {
-        width: nextDim.height * imageAspectRatio,
-        height: nextDim.height
-      };
-    }
-    return {
-      width: nextDim.width,
-      height: nextDim.width / imageAspectRatio
-    };
-  }
-  return {
-    width: nextDim.width,
-    height: nextDim.height
-  };
-};
-const getDelta = (referenceInitialValue, referenceNextValue, currentValue) => referenceNextValue / referenceInitialValue * currentValue;
-const getUpdatedRectangle = (initialDim, nextDim, shape) => ({
-  ...shape,
-  width: getDelta(initialDim.width, nextDim.width, shape.width),
-  height: getDelta(initialDim.height, nextDim.height, shape.height),
-  x: getDelta(initialDim.width, nextDim.width, shape.x),
-  y: getDelta(initialDim.height, nextDim.height, shape.y)
-});
-const getUpdatedPlygon = (initialDim, nextDim, shape) => ({
-  ...shape,
-  points: shape.points.map(point => ({
-    x: getDelta(initialDim.width, nextDim.width, point.x),
-    y: getDelta(initialDim.height, nextDim.height, point.y)
-  }))
-});
-const getUpdatedShapes = (initialDim, nextDim, shapes) => {
-  return shapes.map(shape => {
-    if (shape.group === 'rectangles') {
-      return getUpdatedRectangle(initialDim, nextDim, shape);
-    }
-    if (shape.group === 'polygons') {
-      return getUpdatedPlygon(initialDim, nextDim, shape);
-    }
-  });
-};
-const getAllShapes = shapesMap => {
-  shapesMap = shapesMap || ({});
-  const shapesArray = [];
-  const shapesKeys = Object.keys(shapesMap);
-  return shapesKeys.length ? shapesKeys.reduce((acc, currentShapeKey) => acc.concat(shapesMap[currentShapeKey] ? shapesMap[currentShapeKey].map((shape, index) => ({
-    ...shape,
-    group: currentShapeKey,
-    index: shape.index || acc.length + index
-  })) : []), shapesArray) : shapesArray;
-};
-const groupShapes = shapesArray => {
-  shapesArray = shapesArray || [];
-  const shapesMap = {
-    rectangles: [],
-    polygons: []
-  };
-  if (shapesArray.length) {
-    return shapesArray.reduce((acc, {group, ...shapeProps}) => {
-      acc[group] = [...acc[group] || [], shapeProps];
-      return acc;
-    }, shapesMap);
-  }
-  return cloneDeep(shapesMap);
-};
-const React$3 = _dll_react;
-const PropTypes$3 = _dll_prop_types;
-const {max: max} = _dll_lodash;
-const {cloneDeep: cloneDeep$1} = _dll_lodash;
-const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
-const {Layer: Layer} = _dll_react_konva;
-const {Stage: Stage} = _dll_react_konva;
-const _jsxFileName$3 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/hotspot-drawable.jsx";
-class Drawable extends React$3.Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    let dimensions = nextProps.dimensions;
-    if (prevState && prevState.resizing) {
-      dimensions = prevState.dimensions;
-    }
-    return {
-      ...prevState,
-      dimensions: dimensions
-    };
-  }
-  constructor(props) {
-    super(props);
-    Drawable.prototype.__init.call(this);
-    Drawable.prototype.__init2.call(this);
-    Drawable.prototype.__init3.call(this);
-    Drawable.prototype.__init4.call(this);
-    Drawable.prototype.__init5.call(this);
-    Drawable.prototype.__init6.call(this);
-    Drawable.prototype.__init7.call(this);
-    Drawable.prototype.__init8.call(this);
-    Drawable.prototype.__init9.call(this);
-    this.state = {
-      isDrawing: false,
-      stateShapes: false,
-      resizing: false,
-      dimensions: {
-        height: 0,
-        width: 0
-      }
-    };
-  }
-  __init() {
-    this.handleOnMouseDown = e => {
-      if (e.target === e.currentTarget) {
-        const {onUpdateShapes, shapes} = this.props;
-        const newShapes = shapes.slice();
-        const value = max(newShapes.map(c => parseInt(c.id)).filter(id => !isNaN(id))) || 0;
-        newShapes.push({
-          id: `${value + 1}`,
-          height: 0,
-          width: 0,
-          x: e.evt.layerX,
-          y: e.evt.layerY,
-          group: 'rectangles',
-          index: shapes.length
-        });
-        this.setState({
-          isDrawing: true,
-          isDrawingShapeId: `${value + 1}`
-        });
-        onUpdateShapes(newShapes);
-      }
-    };
-  }
-  __init2() {
-    this.handleOnMouseUp = () => {
-      const {isDrawing, stateShapes} = this.state;
-      const {onUpdateShapes} = this.props;
-      if (isDrawing) {
-        this.setState({
-          isDrawing: !isDrawing,
-          stateShapes: false,
-          isDrawingShapeId: undefined
-        });
-        if (stateShapes) {
-          onUpdateShapes(stateShapes);
-        }
-      }
-    };
-  }
-  __init3() {
-    this.handleMouseMove = e => {
-      const {isDrawing, isDrawingShapeId} = this.state;
-      const {shapes} = this.props;
-      if (isDrawing && isDrawingShapeId) {
-        const mouseX = e.evt.layerX;
-        const mouseY = e.evt.layerY;
-        const currShapeIndex = shapes.findIndex(shape => shape.id === isDrawingShapeId);
-        const currShape = shapes[currShapeIndex];
-        if (currShape) {
-          const newWidth = mouseX - currShape.x;
-          const newHeight = mouseY - currShape.y;
-          const newShapesList = shapes.slice();
-          newShapesList[currShapeIndex] = {
-            ...newShapesList[currShapeIndex],
-            height: newHeight,
-            width: newWidth,
-            x: currShape.x,
-            y: currShape.y
-          };
-          this.setState({
-            stateShapes: newShapesList
-          });
-        }
-      }
-    };
-  }
-  __init4() {
-    this.handleOnDragEnd = (id, updatedProps) => {
-      const {shapes, onUpdateShapes} = this.props;
-      const newShapes = shapes.map(shape => {
-        if (shape.id === id) {
-          return {
-            ...shape,
-            ...updatedProps
-          };
-        }
-        return shape;
-      });
-      onUpdateShapes(cloneDeep$1(newShapes));
-    };
-  }
-  __init5() {
-    this.handleOnSetAsCorrect = shape => {
-      const {id} = shape;
-      const {multipleCorrect, shapes, onUpdateShapes} = this.props;
-      let newShapes = [];
-      if (multipleCorrect) {
-        newShapes = shapes.map(shape => {
-          if (shape.id === id) {
-            shape.correct = !shape.correct;
-          }
-          return shape;
-        });
-      } else {
-        newShapes = shapes.map(shape => {
-          shape.correct = shape.id === id;
-          return shape;
-        });
-      }
-      onUpdateShapes(cloneDeep$1(newShapes));
-    };
-  }
-  __init6() {
-    this.handleOnImageLoad = ({target}) => {
-      const {onUpdateImageDimension} = this.props;
-      const resizeHandle = this.resize;
-      const elementStyle = getComputedStyle(target);
-      const newHeight = parseFloat(elementStyle.height);
-      const newWidth = parseFloat(elementStyle.width);
-      const dimensions = {
-        height: newHeight,
-        width: newWidth
-      };
-      this.setState({
-        dimensions
-      }, () => onUpdateImageDimension(dimensions));
-      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
-    };
-  }
-  __init7() {
-    this.initialiseResize = () => {
-      window.addEventListener('mousemove', this.startResizing, false);
-      window.addEventListener('mouseup', this.stopResizing, false);
-    };
-  }
-  checkIfResizeValid(x, y) {
-    const {shapes} = this.state;
-    let drawable = true;
-    shapes && shapes.forEach(shape => {
-      const right = shape.x + shape.width + 5;
-      const bottom = shape.y + shape.height + 5;
-      if (x <= right || y <= bottom) {
-        drawable = false;
-      }
-    });
-    return drawable;
-  }
-  __init8() {
-    this.startResizing = e => {
-      const bounds = e.target.getBoundingClientRect();
-      const box = this.image;
-      const {disableDrag, preserveAspectRatioEnabled, dimensions, shapes} = this.props;
-      const {width, height} = updateImageDimensions(dimensions, {
-        width: e.clientX - bounds.left,
-        height: e.clientY - bounds.top
-      }, preserveAspectRatioEnabled);
-      const resizeValid = this.checkIfResizeValid(width, height);
-      const hasMinimumWidth = width > 150 && height > 150;
-      if (resizeValid && hasMinimumWidth) {
-        box.style.width = `${width}px`;
-        box.style.height = `${height}px`;
-        this.setState({
-          resizing: true,
-          dimensions: {
-            height: height,
-            width: width
-          },
-          stateShapes: getUpdatedShapes(dimensions, {
-            width,
-            height
-          }, shapes)
-        });
-      }
-      disableDrag();
-    };
-  }
-  __init9() {
-    this.stopResizing = () => {
-      const {enableDrag, onUpdateImageDimension, onUpdateShapes} = this.props;
-      const {dimensions, stateShapes} = this.state;
-      enableDrag();
-      if (stateShapes) {
-        onUpdateShapes(cloneDeep$1(stateShapes));
-      }
-      onUpdateImageDimension(dimensions);
-      window.removeEventListener('mousemove', this.startResizing, false);
-      window.removeEventListener('mouseup', this.stopResizing, false);
-      this.setState({
-        resizing: false,
-        stateShapes: false
-      });
-    };
-  }
-  render() {
-    const {classes, imageUrl, dimensions: {height, width}, hotspotColor, outlineColor, shapes, strokeWidth} = this.props;
-    const {stateShapes, isDrawing, dimensions: {height: heightFromState, width: widthFromState}} = this.state;
-    const shapesToUse = stateShapes || shapes;
-    return React$3.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 263
-      }
-    }, imageUrl && React$3.createElement('div', {
-      className: classes.imageContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 265
-      }
-    }, React$3.createElement('img', {
-      className: classes.image,
-      onLoad: this.handleOnImageLoad,
-      ref: ref => {
-        this.image = ref;
-      },
-      src: imageUrl,
-      ...height && width ? {
-        style: {
-          height,
-          width
-        }
-      } : {},
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 266
-      }
-    }), React$3.createElement('div', {
-      ref: ref => {
-        this.resize = ref;
-      },
-      className: classes.resize,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 275
-      }
-    })), React$3.createElement(Stage, {
-      className: classes.stage,
-      height: heightFromState || height,
-      width: widthFromState || width,
-      onMouseDown: this.handleOnMouseDown,
-      onMouseUp: this.handleOnMouseUp,
-      onMouseMove: this.handleMouseMove,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 281
-      }
-    }, React$3.createElement(Layer, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 289
-      }
-    }, shapesToUse.map((shape, index) => {
-      const Tag = shape.group === 'polygons' ? Polygon : Rectangle;
-      return React$3.createElement(Tag, {
-        correct: shape.correct,
-        isDrawing: isDrawing,
-        height: shape.height,
-        hotspotColor: hotspotColor,
-        id: shape.id,
-        key: index,
-        onClick: () => this.handleOnSetAsCorrect(shape),
-        onDragEnd: this.handleOnDragEnd,
-        outlineColor: outlineColor,
-        width: shape.width,
-        x: shape.x,
-        y: shape.y,
-        points: shape.points,
-        strokeWidth: strokeWidth,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 294
-        }
-      });
-    }))));
-  }
-}
-const styles$3 = () => ({
-  base: {
-    position: 'relative'
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content'
-  },
-  resize: {
-    borderBottom: '1px solid #727272',
-    borderRight: '1px solid #727272',
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px'
-  },
-  stage: {
-    left: 0,
-    top: 0,
-    position: 'absolute'
-  }
-});
-Drawable.propTypes = {
-  classes: PropTypes$3.object.isRequired,
-  disableDrag: PropTypes$3.func.isRequired,
-  dimensions: PropTypes$3.object.isRequired,
-  enableDrag: PropTypes$3.func.isRequired,
-  imageUrl: PropTypes$3.string.isRequired,
-  hotspotColor: PropTypes$3.string.isRequired,
-  multipleCorrect: PropTypes$3.bool.isRequired,
-  onUpdateImageDimension: PropTypes$3.func.isRequired,
-  onUpdateShapes: PropTypes$3.func.isRequired,
-  outlineColor: PropTypes$3.string.isRequired,
-  shapes: PropTypes$3.array.isRequired,
-  strokeWidth: PropTypes$3.number,
-  preserveAspectRatioEnabled: PropTypes$3.bool
-};
-var Drawable$1 = withStyles$3(styles$3)(Drawable);
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-const React$4 = _dll_react;
-const PropTypes$4 = _dll_prop_types;
-const {withStyles: withStyles$4} = _dll_material_ui__core_styles;
-const {Button: Button} = _dll_material_ui__core;
-const _jsxFileName$4 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/button.jsx";
-const RawButton = ({classes, className, label, onClick, disabled}) => React$4.createElement(Button, {
-  onClick: onClick,
-  disabled: disabled,
-  className: classnames(classes.addButton, className),
-  size: "small",
-  variant: "contained",
-  color: "default",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$4,
-    lineNumber: 8
-  }
-}, label);
-RawButton.propTypes = {
-  classes: PropTypes$4.object.isRequired,
-  className: PropTypes$4.string,
-  disabled: PropTypes$4.bool,
-  label: PropTypes$4.string,
-  onClick: PropTypes$4.func
-};
-RawButton.defaultProps = {
-  className: '',
-  disabled: false,
-  label: 'Add',
-  onClick: () => {}
-};
-const styles$4 = () => ({
-  addButton: {
-    marginLeft: 8
-  }
-});
-const ButtonStyled = withStyles$4(styles$4)(RawButton);
-const React$5 = _dll_react;
-const PropTypes$5 = _dll_prop_types;
-const {withStyles: withStyles$5} = _dll_material_ui__core_styles;
-const _jsxFileName$5 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/upload-control.jsx";
-const UploadControl = ({classNameButton, classNameSection, classes, label, onInputClick, onUploadImage, setRef}) => React$5.createElement('div', {
-  className: classNameSection,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$5,
-    lineNumber: 16
-  }
-}, React$5.createElement(ButtonStyled, {
-  className: classNameButton,
-  label: label,
-  onClick: onInputClick,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$5,
-    lineNumber: 17
-  }
-}), React$5.createElement('input', {
-  accept: "image/*",
-  className: classes.input,
-  onChange: onUploadImage,
-  ref: ref => {
-    setRef(ref);
-  },
-  type: "file",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$5,
-    lineNumber: 22
-  }
-}));
-const styles$5 = () => ({
-  input: {
-    display: 'none'
-  }
-});
-UploadControl.propTypes = {
-  classes: PropTypes$5.object.isRequired,
-  classNameButton: PropTypes$5.string,
-  classNameSection: PropTypes$5.string,
-  label: PropTypes$5.string.isRequired,
-  onInputClick: PropTypes$5.func.isRequired,
-  onUploadImage: PropTypes$5.func.isRequired,
-  setRef: PropTypes$5.func.isRequired
-};
-UploadControl.defaultProps = {
-  classNameButton: '',
-  classNameSection: ''
-};
-var UploadControl$1 = withStyles$5(styles$5)(UploadControl);
-const React$6 = _dll_react;
-const {Component: Component} = _dll_react;
-const PropTypes$6 = _dll_prop_types;
-const {withStyles: withStyles$6} = _dll_material_ui__core_styles;
-const _jsxFileName$6 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/hotspot-container.jsx";
-const isImage = file => {
-  const imageType = /image.*/;
-  return file.type.match(imageType);
-};
-class Container extends Component {
-  static getDerivedStateFromProps(nextProps, prevState) {
-    return {
-      ...prevState,
-      shapes: getAllShapes(nextProps.shapes)
-    };
-  }
-  constructor(props) {
-    super(props);
-    Container.prototype.__init.call(this);
-    Container.prototype.__init2.call(this);
-    Container.prototype.__init3.call(this);
-    Container.prototype.__init4.call(this);
-    Container.prototype.__init5.call(this);
-    Container.prototype.__init6.call(this);
-    Container.prototype.__init7.call(this);
-    Container.prototype.__init8.call(this);
-    Container.prototype.__init9.call(this);
-    Container.prototype.__init10.call(this);
-    Container.prototype.__init11.call(this);
-    Container.prototype.__init12.call(this);
-    Container.prototype.__init13.call(this);
-    Container.prototype.__init14.call(this);
-    this.state = {
-      dragEnabled: true,
-      shapes: getAllShapes(props.shapes)
-    };
-  }
-  __init() {
-    this.handleFileRead = file => {
-      const {onImageUpload} = this.props;
-      const reader = new FileReader();
-      reader.onloadend = () => onImageUpload(reader.result);
-      reader.readAsDataURL(file);
-    };
-  }
-  __init2() {
-    this.handleUploadImage = e => {
-      e.preventDefault();
-      this.handleFileRead(e.target.files[0]);
-    };
-  }
-  __init3() {
-    this.enableDropzone = () => this.setState({
-      dropzoneActive: true
-    });
-  }
-  __init4() {
-    this.disableDropzone = () => this.setState({
-      dropzoneActive: false
-    });
-  }
-  __init5() {
-    this.handleOnDrop = e => {
-      e.preventDefault();
-      const {items, files} = e.dataTransfer;
-      if (items && items[0].kind === 'file') {
-        const file = items[0].getAsFile();
-        if (isImage(file)) {
-          this.handleFileRead(file);
-        }
-      } else if (isImage(files[0])) {
-        this.handleFileRead(files[0]);
-      }
-      this.disableDropzone();
-    };
-  }
-  __init6() {
-    this.handleOnDragOver = e => {
-      e.preventDefault();
-      const {dropzoneActive} = this.state;
-      if (!dropzoneActive) {
-        this.enableDropzone();
-      }
-    };
-  }
-  __init7() {
-    this.handleOnDragExit = e => {
-      e.preventDefault();
-      this.disableDropzone();
-    };
-  }
-  __init8() {
-    this.onUpdateShapes = newShapes => {
-      const {onUpdateShapes} = this.props;
-      this.setState({
-        shapes: newShapes
-      }, () => onUpdateShapes(groupShapes(newShapes)));
-    };
-  }
-  __init9() {
-    this.handleUndo = () => {
-      const {shapes} = this.state;
-      if (shapes && shapes.length) {
-        let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));
-        newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
-        this.onUpdateShapes(newShapes);
-      }
-    };
-  }
-  __init10() {
-    this.handleClearAll = () => this.onUpdateShapes([]);
-  }
-  __init11() {
-    this.handleEnableDrag = () => this.setState({
-      dragEnabled: true
-    });
-  }
-  __init12() {
-    this.handleDisableDrag = () => this.setState({
-      dragEnabled: false
-    });
-  }
-  __init13() {
-    this.handleInputClick = () => this.input.click();
-  }
-  __init14() {
-    this.toggleTooltip = () => this.setState({
-      showTooltip: !this.state.showTooltip
-    });
-  }
-  render() {
-    const {classes, dimensions, hotspotColor, imageUrl, multipleCorrect, onUpdateImageDimension, outlineColor, strokeWidth, preserveAspectRatioEnabled} = this.props;
-    const {dropzoneActive, dragEnabled, showTooltip} = this.state;
-    const {shapes} = this.state;
-    return React$6.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 136
-      }
-    }, React$6.createElement('div', {
-      className: `${classes.box} ${dropzoneActive ? classes.boxActive : ''}`,
-      ...dragEnabled ? {
-        onDragExit: this.handleOnDragExit,
-        onDragLeave: this.handleOnDragExit,
-        onDragOver: this.handleOnDragOver,
-        onDrop: this.handleOnDrop
-      } : {},
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 137
-      }
-    }, React$6.createElement('div', {
-      className: classes.toolbar,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 145
-      }
-    }, imageUrl && React$6.createElement(UploadControl$1, {
-      classNameButton: classes.replaceButton,
-      classNameSection: classes.replaceSection,
-      label: "Replace Image",
-      onInputClick: this.handleInputClick,
-      onUploadImage: this.handleUploadImage,
-      setRef: ref => {
-        this.input = ref;
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 147
-      }
-    }), React$6.createElement(ButtonStyled, {
-      disabled: !(shapes && shapes.length),
-      onClick: this.handleUndo,
-      label: "Undo",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 158
-      }
-    }), React$6.createElement(ButtonStyled, {
-      disabled: !(shapes && shapes.length),
-      onClick: this.handleClearAll,
-      label: "Clear all",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 163
-      }
-    })), React$6.createElement('div', {
-      ref: ref => {
-        this.imageSection = ref;
-      },
-      className: classes.drawableHeight,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 170
-      }
-    }, imageUrl ? React$6.createElement(Drawable$1, {
-      dimensions: dimensions,
-      disableDrag: this.handleDisableDrag,
-      enableDrag: this.handleEnableDrag,
-      imageUrl: imageUrl,
-      hotspotColor: hotspotColor,
-      multipleCorrect: multipleCorrect,
-      onUpdateImageDimension: onUpdateImageDimension,
-      onUpdateShapes: this.onUpdateShapes,
-      outlineColor: outlineColor,
-      shapes: shapes,
-      strokeWidth: strokeWidth,
-      preserveAspectRatioEnabled: preserveAspectRatioEnabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 177
-      }
-    }) : React$6.createElement('div', {
-      className: `${classes.drawableHeight} ${classes.centered}`,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 193
-      }
-    }, React$6.createElement('label', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 194
-      }
-    }, "Drag and drop or upload image from computer"), React$6.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 195
-      }
-    }), React$6.createElement(UploadControl$1, {
-      label: "Upload Image",
-      onInputClick: this.handleInputClick,
-      onUploadImage: this.handleUploadImage,
-      setRef: ref => {
-        this.input = ref;
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 196
-      }
-    }))), imageUrl && React$6.createElement('div', {
-      className: classes.tooltip,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 209
-      }
-    }, showTooltip && React$6.createElement('div', {
-      className: classes.tooltipContent,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 211
-      }
-    }, React$6.createElement('label', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 212
-      }
-    }, "Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark."), React$6.createElement('div', {
-      className: classes.tooltipArrow,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 216
-      }
-    })), React$6.createElement(Help$1, {
-      className: classes.icon,
-      onMouseOut: this.toggleTooltip,
-      onMouseOver: this.toggleTooltip,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 219
-      }
-    }))));
-  }
-}
-const styles$6 = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 2
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px'
-  },
-  boxActive: {
-    border: '1px solid #0032C2'
-  },
-  centered: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  drawableHeight: {
-    minHeight: 350,
-    paddingBottom: '40px',
-    paddingRight: '40px'
-  },
-  icon: {
-    '&:hover': {
-      color: '#333131',
-      cursor: 'help'
-    },
-    color: '#C1C1C1'
-  },
-  replaceButton: {
-    marginLeft: 0
-  },
-  replaceSection: {
-    marginRight: 'auto'
-  },
-  toolbar: {
-    backgroundColor: '#ECEDF1',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    padding: '12px 8px'
-  },
-  tooltip: {
-    position: 'relative',
-    textAlign: 'right',
-    padding: '5px 9px'
-  },
-  tooltipContent: {
-    background: '#333131',
-    borderRadius: '4px',
-    color: '#FFFFFF',
-    fontSize: '14px',
-    lineHeight: '18px',
-    marginTop: '-70px',
-    padding: '7px 16px',
-    position: 'absolute',
-    right: '5px',
-    textAlign: 'left',
-    width: '300px'
-  },
-  tooltipArrow: {
-    width: 0,
-    height: 0,
-    borderLeft: '10px solid transparent',
-    borderRight: '10px solid transparent',
-    borderTop: '10px solid #333131',
-    marginBottom: -10,
-    marginTop: '2px',
-    position: 'absolute',
-    right: '5px'
-  }
-});
-Container.propTypes = {
-  classes: PropTypes$6.object.isRequired,
-  dimensions: PropTypes$6.object.isRequired,
-  imageUrl: PropTypes$6.string.isRequired,
-  hotspotColor: PropTypes$6.string.isRequired,
-  multipleCorrect: PropTypes$6.bool.isRequired,
-  onImageUpload: PropTypes$6.func.isRequired,
-  onUpdateImageDimension: PropTypes$6.func.isRequired,
-  onUpdateShapes: PropTypes$6.func.isRequired,
-  outlineColor: PropTypes$6.string.isRequired,
-  shapes: PropTypes$6.shape({
-    rectangles: PropTypes$6.array,
-    polygons: PropTypes$6.array
-  }).isRequired,
-  strokeWidth: PropTypes$6.number,
-  preserveAspectRatioEnabled: PropTypes$6.bool
-};
-Container.defaultProps = {
-  strokeWidth: 5
-};
-var HotspotContainer = withStyles$6(styles$6)(Container);
-const React$7 = _dll_react;
-const PropTypes$7 = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles$7} = _dll_material_ui__core_styles;
-const {settings: settings} = _dll_pie_lib__config_ui;
-const {layout: layout} = _dll_pie_lib__config_ui;
-const {InputContainer: InputContainer$1} = _dll_pie_lib__config_ui;
-const {NumberTextField: NumberTextField} = _dll_pie_lib__config_ui;
-const EditableHtml = _dll_pie_lib__editable_html;
-const _jsxFileName$7 = "/home/ede/dev/github/pie-framework/pie-elements/packages/hotspot/configure/src/root.jsx";
-const {Panel, toggle} = settings;
-class Root extends React$7.Component {
-  constructor(...args) {
-    super(...args);
-    Root.prototype.__init.call(this);
-    Root.prototype.__init2.call(this);
-  }
-  __init() {
-    this.handleColorChange = (fieldType, color) => {
-      const {onColorChanged} = this.props;
-      const cType = `${fieldType}Color`;
-      onColorChanged(cType, color);
-    };
-  }
-  __init2() {
-    this.handleOnUpdateImageDimensions = (value, resizeType) => {
-      const {model: {dimensions, shapes}, configuration: {preserveAspectRatio = {}}, onUpdateImageDimension, onUpdateShapes} = this.props;
-      const nextImageDimensions = {
-        ...dimensions,
-        [resizeType]: value
-      };
-      const updatedDimensions = updateImageDimensions(dimensions, nextImageDimensions, preserveAspectRatio.enabled, resizeType);
-      const shapesArray = getAllShapes(shapes);
-      const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);
-      onUpdateShapes(groupShapes(updatedShapes));
-      onUpdateImageDimension(updatedDimensions);
-    };
-  }
-  render() {
-    const {classes, configuration, model, imageSupport, onConfigurationChanged, onImageUpload, onModelChangedByConfig, onPromptChanged, onRationaleChanged, onUpdateImageDimension, onTeacherInstructionsChanged, onUpdateShapes} = this.props;
-    const {multipleCorrect = {}, partialScoring = {}, prompt = {}, teacherInstructions = {}, rationale = {}, preserveAspectRatio = {}} = configuration || ({});
-    const {teacherInstructionsEnabled, promptEnabled, rationaleEnabled} = model || ({});
-    return React$7.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 80
-      }
-    }, React$7.createElement(layout.ConfigLayout, {
-      settings: React$7.createElement(Panel, {
-        model: model,
-        onChangeModel: onModelChangedByConfig,
-        configuration: configuration,
-        onChangeConfiguration: onConfigurationChanged,
-        groups: {
-          'Settings': {
-            multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
-            partialScoring: partialScoring.settings && toggle(partialScoring.label),
-            promptEnabled: prompt.settings && toggle(prompt.label)
-          },
-          Properties: {
-            teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-            rationaleEnabled: rationale.settings && toggle(rationale.label)
-          }
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$7,
-          lineNumber: 83
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 81
-      }
-    }, React$7.createElement('div', {
-      className: classes.regular,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 106
-      }
-    }, teacherInstructionsEnabled && React$7.createElement(InputContainer$1, {
-      label: teacherInstructions.label,
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 108
-      }
-    }, React$7.createElement(EditableHtml, {
-      markup: model.teacherInstructions || '',
-      onChange: onTeacherInstructionsChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 109
-      }
-    })), promptEnabled && React$7.createElement(InputContainer$1, {
-      label: prompt.label,
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 118
-      }
-    }, React$7.createElement(EditableHtml, {
-      markup: model.prompt || '',
-      onChange: onPromptChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 119
-      }
-    })), rationaleEnabled && React$7.createElement(InputContainer$1, {
-      label: rationale.label,
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 129
-      }
-    }, React$7.createElement(EditableHtml, {
-      markup: model.rationale || '',
-      onChange: onRationaleChanged,
-      imageSupport: imageSupport,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 133
-      }
-    })), React$7.createElement(Typography, {
-      className: classes.label,
-      variant: "subheading",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 141
-      }
-    }, "Define Hotspot"), React$7.createElement(HotspotPalette, {
-      hotspotColor: model.hotspotColor,
-      hotspotList: model.hotspotList,
-      outlineColor: model.outlineColor,
-      outlineList: model.outlineList,
-      onHotspotColorChange: color => this.handleColorChange('hotspot', color),
-      onOutlineColorChange: color => this.handleColorChange('outline', color),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 145
-      }
-    }), React$7.createElement(HotspotContainer, {
-      dimensions: model.dimensions,
-      imageUrl: model.imageUrl,
-      multipleCorrect: model.multipleCorrect,
-      hotspotColor: model.hotspotColor,
-      outlineColor: model.outlineColor,
-      onUpdateImageDimension: onUpdateImageDimension,
-      onUpdateShapes: onUpdateShapes,
-      onImageUpload: onImageUpload,
-      shapes: model.shapes,
-      strokeWidth: model.strokeWidth,
-      preserveAspectRatioEnabled: preserveAspectRatio.enabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 158
-      }
-    }), model.imageUrl && React$7.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 173
-      }
-    }, React$7.createElement(Typography, {
-      className: classes.label,
-      variant: "subheading",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 174
-      }
-    }, "Image Dimensions"), React$7.createElement('div', {
-      className: classes.dimensions,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 178
-      }
-    }, React$7.createElement(NumberTextField, {
-      key: "hotspot-manual-width",
-      label: "Width",
-      value: model.dimensions.width,
-      min: 0,
-      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'width'),
-      showErrorWhenOutsideRange: true,
-      className: classes.field,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 179
-      }
-    }), React$7.createElement(NumberTextField, {
-      key: "hotspot-manual-height",
-      label: "Height",
-      value: model.dimensions.height,
-      min: 0,
-      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'height'),
-      showErrorWhenOutsideRange: true,
-      className: classes.field,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 188
-      }
-    }))))));
-  }
-}
-const styles$7 = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 3
-  },
-  container: {
-    display: 'flex',
-    marginTop: theme.spacing.unit
-  },
-  dimensions: {
-    display: 'flex'
-  },
-  field: {
-    flex: 1,
-    width: '90%'
-  },
-  label: {
-    marginTop: theme.spacing.unit * 4
-  },
-  prompt: {
-    paddingTop: theme.spacing.unit * 2,
-    width: '100%'
-  },
-  regular: {
-    marginBottom: theme.spacing.unit * 3
-  },
-  switchElement: {
-    justifyContent: 'space-between',
-    margin: 0
-  }
-});
-Root.propTypes = {
-  classes: PropTypes$7.object.isRequired,
-  configuration: PropTypes$7.object,
-  model: PropTypes$7.object.isRequired,
-  imageSupport: PropTypes$7.shape({
-    add: PropTypes$7.func,
-    delete: PropTypes$7.func
-  }),
-  onImageUpload: PropTypes$7.func.isRequired,
-  onColorChanged: PropTypes$7.func.isRequired,
-  onPromptChanged: PropTypes$7.func.isRequired,
-  onUpdateImageDimension: PropTypes$7.func.isRequired,
-  onUpdateShapes: PropTypes$7.func.isRequired,
-  onModelChangedByConfig: PropTypes$7.func.isRequired,
-  onRationaleChanged: PropTypes$7.func.isRequired,
-  onConfigurationChanged: PropTypes$7.func.isRequired,
-  onTeacherInstructionsChanged: PropTypes$7.func.isRequired
-};
-var Root$1 = withStyles$7(styles$7)(Root);
-var sensibleDefaults = {
-  model: {
-    prompt: 'This is the question prompt',
-    promptEnabled: true,
-    imageUrl: '',
-    shapes: {
-      rectangles: [],
-      polygons: []
-    },
-    multipleCorrect: true,
-    partialScoring: false,
-    dimensions: {
-      height: 0,
-      width: 0
-    },
-    hotspotColor: 'rgba(137, 183, 244, 0.65)',
-    hotspotList: ['rgba(137, 183, 244, 0.65)'],
-    outlineColor: 'blue',
-    outlineList: ['blue'],
-    rationaleEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true,
-    strokeWidth: 5
-  },
-  configuration: {
-    multipleCorrect: {
-      settings: true,
-      label: 'Multiple Correct Responses'
-    },
-    partialScoring: {
-      settings: false,
-      label: 'Allow Partial Scoring'
-    },
-    rationale: {
-      settings: true,
-      label: 'Rationale'
-    },
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    },
-    preserveAspectRatio: {
-      settings: false,
-      enabled: true,
-      label: 'Preserve aspect ratio'
-    }
-  }
-};
-const React$8 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {ModelUpdatedEvent: ModelUpdatedEvent} = _dll_pie_framework__pie_configure_events;
-const {DeleteImageEvent: DeleteImageEvent} = _dll_pie_framework__pie_configure_events;
-const {InsertImageEvent: InsertImageEvent} = _dll_pie_framework__pie_configure_events;
-const log = browser('hotspot:configure');
-class HotspotConfigure extends HTMLElement {
-  static __initStatic() {
-    this.createDefaultModel = (model = {}) => ({
-      ...sensibleDefaults.model,
-      ...model,
-      hotspotList: model.hotspotList || [model.hotspotColor] || sensibleDefaults.model.hotspotList,
-      outlineList: model.outlineList || [model.outlineColor] || sensibleDefaults.model.outlineList,
-      shapes: model.shapes || sensibleDefaults.model.shapes || ({})
-    });
-  }
-  constructor() {
-    super();
-    HotspotConfigure.prototype.__init.call(this);
-    HotspotConfigure.prototype.__init2.call(this);
-    HotspotConfigure.prototype.__init3.call(this);
-    HotspotConfigure.prototype.__init4.call(this);
-    HotspotConfigure.prototype.__init5.call(this);
-    HotspotConfigure.prototype.__init6.call(this);
-    HotspotConfigure.prototype.__init7.call(this);
-    HotspotConfigure.prototype.__init8.call(this);
-    HotspotConfigure.prototype.__init9.call(this);
-    HotspotConfigure.prototype.__init10.call(this);
-    HotspotConfigure.prototype.__init11.call(this);
-    this._model = HotspotConfigure.createDefaultModel();
-    this._configuration = sensibleDefaults.configuration;
-    this.onModelChanged = this.onModelChanged.bind(this);
-  }
-  set model(s) {
-    this._model = HotspotConfigure.createDefaultModel(s);
-    this._render();
-  }
-  set configuration(c) {
-    this._configuration = c;
-    this._render();
-  }
-  dispatchModelUpdated(reset) {
-    const resetValue = !!reset;
-    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
-  }
-  onModelChanged(m, reset) {
-    this._model = m;
-    this.dispatchModelUpdated(reset);
-    this._render();
-  }
-  __init() {
-    this.onConfigurationChanged = c => {
-      this._configuration = c;
-      this._render();
-    };
-  }
-  __init2() {
-    this.onModelChangedByConfig = (m, propertyType) => {
-      const _model = m;
-      if (propertyType === 'multipleCorrect') {
-        const {rectangles = [], polygons = []} = _model.shapes || ({});
-        _model.shapes.rectangles = rectangles.map(shape => ({
-          ...shape,
-          correct: false
-        }));
-        _model.shapes.polygons = polygons.map(shape => ({
-          ...shape,
-          correct: false
-        }));
-      }
-      this.onModelChanged(_model);
-    };
-  }
-  __init3() {
-    this.onColorChanged = (colorType, color) => {
-      this.onModelChanged({
-        ...this._model,
-        [colorType]: color
-      });
-    };
-  }
-  __init4() {
-    this.onPromptChanged = prompt => {
-      this.onModelChanged({
-        ...this._model,
-        prompt
-      });
-    };
-  }
-  __init5() {
-    this.onRationaleChanged = rationale => {
-      this.onModelChanged({
-        ...this._model,
-        rationale
-      });
-    };
-  }
-  __init6() {
-    this.onTeacherInstructionsChanged = teacherInstructions => {
-      this.onModelChanged({
-        ...this._model,
-        teacherInstructions
-      });
-    };
-  }
-  __init7() {
-    this.onUpdateImageDimension = dimensions => {
-      this.onModelChanged({
-        ...this._model,
-        dimensions
-      });
-    };
-  }
-  __init8() {
-    this.onUpdateShapes = shapes => {
-      this.onModelChanged({
-        ...this._model,
-        shapes
-      });
-    };
-  }
-  __init9() {
-    this.onImageUpload = imageUrl => {
-      this.onModelChanged({
-        ...this._model,
-        imageUrl
-      });
-    };
-  }
-  __init10() {
-    this.insertImage = handler => {
-      this.dispatchEvent(new InsertImageEvent(handler));
-    };
-  }
-  __init11() {
-    this.onDeleteImage = (src, done) => {
-      this.dispatchEvent(new DeleteImageEvent(src, done));
-    };
-  }
-  _render() {
-    log('_render');
-    let element = React$8.createElement(Root$1, {
-      configuration: this._configuration,
-      model: this._model,
-      onColorChanged: this.onColorChanged,
-      onImageUpload: this.onImageUpload,
-      onRationaleChanged: this.onRationaleChanged,
-      onConfigurationChanged: this.onConfigurationChanged,
-      onPromptChanged: this.onPromptChanged,
-      onUpdateImageDimension: this.onUpdateImageDimension,
-      imageSupport: {
-        add: this.insertImage,
-        delete: this.onDeleteImage
-      },
-      onUpdateShapes: this.onUpdateShapes,
-      onModelChangedByConfig: this.onModelChangedByConfig,
-      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
-    });
-    ReactDOM.render(element, this);
-  }
-}
-HotspotConfigure.__initStatic();
-export default HotspotConfigure;