@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/config-ui/esm/index.js

@@ -1,3808 +0,0 @@
-import * as React from 'react';
-import React__default from 'react';
-import PropTypes from 'prop-types';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, withStyles as withStyles$1 } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import EditableHTML from '@pie-lib/editable-html';
-import { color, InputContainer, AppendCSSRules } from '@pie-lib/render-ui';
-export { InputContainer } from '@pie-lib/render-ui';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Radio$1 from '@material-ui/core/Radio';
-import classNames from 'classnames';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import require$$3 from '@material-ui/core/SvgIcon';
-import merge from 'lodash/merge';
-import Checkbox$2 from '@material-ui/core/Checkbox';
-import Switch from '@material-ui/core/Switch';
-import MaterialInput from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import debug from 'debug';
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
-import grey from '@material-ui/core/colors/grey';
-import Dialog$1 from '@material-ui/core/Dialog';
-import DialogTitle$1 from '@material-ui/core/DialogTitle';
-import DialogContentText$1 from '@material-ui/core/DialogContentText';
-import DialogContent$1 from '@material-ui/core/DialogContent';
-import DialogActions$1 from '@material-ui/core/DialogActions';
-import Button$1 from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import TextField$1 from '@material-ui/core/TextField';
-import isFinite from 'lodash/isFinite';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import * as math from 'mathjs';
-import uniq from 'lodash/uniq';
-import Chip from '@material-ui/core/Chip';
-import Menu from '@material-ui/core/Menu';
-import Measure, { withContentRect } from 'react-measure';
-import includes from 'lodash/includes';
-import get from 'lodash/get';
-import set from 'lodash/set';
-
-const AlertDialog = ({
-  text,
-  title,
-  onClose,
-  onConfirm,
-  open,
-  onCloseText,
-  onConfirmText,
-  classes
-}) => /*#__PURE__*/React__default.createElement(Dialog, {
-  open: open,
-  onClose: onClose
-}, title && /*#__PURE__*/React__default.createElement(DialogTitle, {
-  className: classes.heading
-}, title), text && /*#__PURE__*/React__default.createElement(DialogContent, null, /*#__PURE__*/React__default.createElement(DialogContentText, {
-  className: classes.subheading
-}, text)), /*#__PURE__*/React__default.createElement(DialogActions, null, onClose && /*#__PURE__*/React__default.createElement(Button, {
-  onClick: onClose,
-  color: "primary"
-}, onCloseText), onConfirm && /*#__PURE__*/React__default.createElement(Button, {
-  autoFocus: true,
-  onClick: onConfirm,
-  color: "primary"
-}, onConfirmText)));
-
-AlertDialog.defaultProps = {
-  onCloseText: 'CANCEL',
-  onConfirmText: 'OK'
-};
-AlertDialog.propTypes = {
-  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  title: PropTypes.string,
-  onClose: PropTypes.func,
-  onConfirm: PropTypes.func,
-  open: PropTypes.bool,
-  onConfirmText: PropTypes.string,
-  onCloseText: PropTypes.string,
-  classes: PropTypes.object
-};
-
-const styles$b = () => ({
-  heading: {
-    '& h2': {
-      fontSize: 'max(1.25rem, 18px)'
-    }
-  },
-  subheading: {
-    fontSize: 'max(1rem, 14px)'
-  }
-});
-
-var alertDialog = withStyles(styles$b)(AlertDialog);
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var RadioWithLabel = withStyles({
-  label: {
-    left: '-5px',
-    position: 'relative'
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-})(({
-  label,
-  value,
-  checked,
-  onChange,
-  classes
-}) => /*#__PURE__*/React__default.createElement(FormControlLabel, {
-  value: value,
-  classes: {
-    label: classes.label
-  },
-  control: /*#__PURE__*/React__default.createElement(Radio$1, {
-    className: classes.customColor,
-    checked: checked,
-    onChange: onChange
-  }),
-  label: label
-}));
-
-const styles$a = theme => ({
-  radioLabel: {
-    fontSize: theme.typography.fontSize - 2
-  },
-  choice: {
-    display: 'flex',
-    alignItems: 'center'
-  },
-  choiceHolder: {
-    display: 'flex',
-    alignItems: 'center'
-  }
-});
-
-const Group$1 = props => {
-  const {
-    feedbackLabels,
-    value,
-    classes,
-    className,
-    onChange,
-    keys
-  } = props;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(classes.choiceHolder, className)
-  }, keys.map(key => {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.choice,
-      key: key
-    }, /*#__PURE__*/React__default.createElement(RadioWithLabel, {
-      value: key,
-      checked: value === key,
-      classes: {
-        label: classes.radioLabel
-      },
-      onChange: e => onChange(e.currentTarget.value),
-      label: feedbackLabels[key]
-    }));
-  }));
-};
-
-Group$1.propTypes = {
-  className: PropTypes.string,
-  feedbackLabels: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
-};
-var Group$2 = withStyles(styles$a)(Group$1);
-
-const feedbackLabels = {
-  default: 'Simple Feedback',
-  none: 'No Feedback',
-  custom: 'Customized Feedback'
-};
-
-const holder = (theme, extras) => _extends({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing.unit,
-  marginBottom: theme.spacing.unit * 2,
-  borderRadius: '4px'
-}, extras);
-
-const style$1 = theme => ({
-  feedbackSelector: {
-    marginBottom: theme.spacing.unit
-  },
-  label: {
-    cursor: 'pointer'
-  },
-  inputContainerLabel: {
-    transform: 'translateY(-20%)'
-  },
-  feedbackInputContainer: {
-    paddingBottom: 0
-  },
-  customHolder: holder(theme, {
-    background: theme.palette.grey[300],
-    padding: 0
-  }),
-  defaultHolder: holder(theme, {
-    fontFamily: theme.typography.fontFamily,
-    padding: theme.spacing.unit * 2,
-    cursor: 'default'
-  }),
-  editor: {
-    fontFamily: theme.typography.fontFamily
-  },
-  group: {
-    paddingTop: theme.spacing.unit
-  }
-});
-
-const FeedbackType = {
-  type: PropTypes.oneOf(['default', 'custom', 'none']),
-  default: PropTypes.string,
-  custom: PropTypes.string
-};
-class FeedbackSelector extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.changeType = type => {
-      const {
-        onChange,
-        feedback
-      } = this.props;
-      onChange(_extends({}, feedback, {
-        type
-      }));
-    };
-
-    this.changeCustom = custom => {
-      const {
-        onChange,
-        feedback
-      } = this.props;
-      onChange(_extends({}, feedback, {
-        type: 'custom',
-        custom
-      }));
-    };
-  }
-
-  render() {
-    const {
-      keys,
-      classes,
-      label,
-      feedback,
-      toolbarOpts,
-      mathMlOptions = {}
-    } = this.props;
-    const feedbackKeys = keys || Object.keys(feedbackLabels);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.feedbackSelector
-    }, /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: label,
-      className: classes.feedbackInputContainer,
-      extraClasses: {
-        label: classes.inputContainerLabel
-      }
-    }, /*#__PURE__*/React__default.createElement(Group$2, {
-      className: classes.group,
-      keys: feedbackKeys,
-      label: label,
-      value: feedback.type,
-      onChange: this.changeType,
-      feedbackLabels: feedbackLabels
-    })), feedback.type === 'custom' && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.customHolder
-    }, /*#__PURE__*/React__default.createElement(EditableHTML, {
-      className: classes.editor,
-      onChange: this.changeCustom,
-      markup: feedback.custom || '',
-      toolbarOpts: toolbarOpts,
-      languageCharactersProps: [{
-        language: 'spanish'
-      }, {
-        language: 'special'
-      }],
-      mathMlOptions: mathMlOptions
-    })), feedback.type === 'default' && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.defaultHolder
-    }, " ", feedback.default));
-  }
-
-}
-FeedbackSelector.propTypes = {
-  keys: PropTypes.arrayOf(PropTypes.string),
-  classes: PropTypes.object.isRequired,
-  label: PropTypes.string.isRequired,
-  feedback: PropTypes.shape(FeedbackType).isRequired,
-  onChange: PropTypes.func.isRequired,
-  toolbarOpts: PropTypes.object
-};
-var FeedbackSelector$1 = withStyles(style$1)(FeedbackSelector);
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var ExpandMore = {};
-
-var interopRequireDefault = {exports: {}};
-
-var hasRequiredInteropRequireDefault;
-
-function requireInteropRequireDefault () {
-	if (hasRequiredInteropRequireDefault) return interopRequireDefault.exports;
-	hasRequiredInteropRequireDefault = 1;
-	(function (module) {
-		function _interopRequireDefault(obj) {
-		  return obj && obj.__esModule ? obj : {
-		    "default": obj
-		  };
-		}
-
-		module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (interopRequireDefault));
-	return interopRequireDefault.exports;
-}
-
-var createSvgIcon = {};
-
-var pure = {};
-
-var shouldUpdate = {};
-
-var inheritsLoose = {exports: {}};
-
-var setPrototypeOf = {exports: {}};
-
-var hasRequiredSetPrototypeOf;
-
-function requireSetPrototypeOf () {
-	if (hasRequiredSetPrototypeOf) return setPrototypeOf.exports;
-	hasRequiredSetPrototypeOf = 1;
-	(function (module) {
-		function _setPrototypeOf(o, p) {
-		  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
-		    o.__proto__ = p;
-		    return o;
-		  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
-		  return _setPrototypeOf(o, p);
-		}
-
-		module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (setPrototypeOf));
-	return setPrototypeOf.exports;
-}
-
-var hasRequiredInheritsLoose;
-
-function requireInheritsLoose () {
-	if (hasRequiredInheritsLoose) return inheritsLoose.exports;
-	hasRequiredInheritsLoose = 1;
-	(function (module) {
-		var setPrototypeOf = requireSetPrototypeOf();
-
-		function _inheritsLoose(subClass, superClass) {
-		  subClass.prototype = Object.create(superClass.prototype);
-		  subClass.prototype.constructor = subClass;
-		  setPrototypeOf(subClass, superClass);
-		}
-
-		module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-	} (inheritsLoose));
-	return inheritsLoose.exports;
-}
-
-var setDisplayName = {};
-
-var setStatic = {};
-
-var hasRequiredSetStatic;
-
-function requireSetStatic () {
-	if (hasRequiredSetStatic) return setStatic;
-	hasRequiredSetStatic = 1;
-
-	setStatic.__esModule = true;
-	setStatic.default = void 0;
-
-	var setStatic$1 = function setStatic(key, value) {
-	  return function (BaseComponent) {
-	    /* eslint-disable no-param-reassign */
-	    BaseComponent[key] = value;
-	    /* eslint-enable no-param-reassign */
-
-	    return BaseComponent;
-	  };
-	};
-
-	var _default = setStatic$1;
-	setStatic.default = _default;
-	return setStatic;
-}
-
-var hasRequiredSetDisplayName;
-
-function requireSetDisplayName () {
-	if (hasRequiredSetDisplayName) return setDisplayName;
-	hasRequiredSetDisplayName = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	setDisplayName.__esModule = true;
-	setDisplayName.default = void 0;
-
-	var _setStatic = _interopRequireDefault(requireSetStatic());
-
-	var setDisplayName$1 = function setDisplayName(displayName) {
-	  return (0, _setStatic.default)('displayName', displayName);
-	};
-
-	var _default = setDisplayName$1;
-	setDisplayName.default = _default;
-	return setDisplayName;
-}
-
-var wrapDisplayName = {};
-
-var getDisplayName = {};
-
-var hasRequiredGetDisplayName;
-
-function requireGetDisplayName () {
-	if (hasRequiredGetDisplayName) return getDisplayName;
-	hasRequiredGetDisplayName = 1;
-
-	getDisplayName.__esModule = true;
-	getDisplayName.default = void 0;
-
-	var getDisplayName$1 = function getDisplayName(Component) {
-	  if (typeof Component === 'string') {
-	    return Component;
-	  }
-
-	  if (!Component) {
-	    return undefined;
-	  }
-
-	  return Component.displayName || Component.name || 'Component';
-	};
-
-	var _default = getDisplayName$1;
-	getDisplayName.default = _default;
-	return getDisplayName;
-}
-
-var hasRequiredWrapDisplayName;
-
-function requireWrapDisplayName () {
-	if (hasRequiredWrapDisplayName) return wrapDisplayName;
-	hasRequiredWrapDisplayName = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	wrapDisplayName.__esModule = true;
-	wrapDisplayName.default = void 0;
-
-	var _getDisplayName = _interopRequireDefault(requireGetDisplayName());
-
-	var wrapDisplayName$1 = function wrapDisplayName(BaseComponent, hocName) {
-	  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
-	};
-
-	var _default = wrapDisplayName$1;
-	wrapDisplayName.default = _default;
-	return wrapDisplayName;
-}
-
-var hasRequiredShouldUpdate;
-
-function requireShouldUpdate () {
-	if (hasRequiredShouldUpdate) return shouldUpdate;
-	hasRequiredShouldUpdate = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	shouldUpdate.__esModule = true;
-	shouldUpdate.default = void 0;
-
-	var _inheritsLoose2 = _interopRequireDefault(requireInheritsLoose());
-
-	var _react = React__default;
-
-	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
-
-	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
-
-	var shouldUpdate$1 = function shouldUpdate(test) {
-	  return function (BaseComponent) {
-	    var factory = (0, _react.createFactory)(BaseComponent);
-
-	    var ShouldUpdate =
-	    /*#__PURE__*/
-	    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);
-
-	    if (process.env.NODE_ENV !== 'production') {
-	      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
-	    }
-
-	    return ShouldUpdate;
-	  };
-	};
-
-	var _default = shouldUpdate$1;
-	shouldUpdate.default = _default;
-	return shouldUpdate;
-}
-
-var shallowEqual = {};
-
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @typechecks
- * 
- */
-
-var shallowEqual_1;
-var hasRequiredShallowEqual$1;
-
-function requireShallowEqual$1 () {
-	if (hasRequiredShallowEqual$1) return shallowEqual_1;
-	hasRequiredShallowEqual$1 = 1;
-
-	var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-	/**
-	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-	 */
-	function is(x, y) {
-	  // SameValue algorithm
-	  if (x === y) {
-	    // Steps 1-5, 7-10
-	    // Steps 6.b-6.e: +0 != -0
-	    // Added the nonzero y check to make Flow happy, but it is redundant
-	    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-	  } else {
-	    // Step 6.a: NaN == NaN
-	    return x !== x && y !== y;
-	  }
-	}
-
-	/**
-	 * Performs equality by iterating through keys on an object and returning false
-	 * when any key has values which are not strictly equal between the arguments.
-	 * Returns true when the values of all keys are strictly equal.
-	 */
-	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;
-	  }
-
-	  // Test for A's keys different from B.
-	  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;
-	}
-
-	shallowEqual_1 = shallowEqual;
-	return shallowEqual_1;
-}
-
-var hasRequiredShallowEqual;
-
-function requireShallowEqual () {
-	if (hasRequiredShallowEqual) return shallowEqual;
-	hasRequiredShallowEqual = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	shallowEqual.__esModule = true;
-	shallowEqual.default = void 0;
-
-	var _shallowEqual = _interopRequireDefault(requireShallowEqual$1());
-
-	var _default = _shallowEqual.default;
-	shallowEqual.default = _default;
-	return shallowEqual;
-}
-
-var hasRequiredPure;
-
-function requirePure () {
-	if (hasRequiredPure) return pure;
-	hasRequiredPure = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	pure.__esModule = true;
-	pure.default = void 0;
-
-	var _shouldUpdate = _interopRequireDefault(requireShouldUpdate());
-
-	var _shallowEqual = _interopRequireDefault(requireShallowEqual());
-
-	var _setDisplayName = _interopRequireDefault(requireSetDisplayName());
-
-	var _wrapDisplayName = _interopRequireDefault(requireWrapDisplayName());
-
-	var pure$1 = function pure(BaseComponent) {
-	  var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
-	    return !(0, _shallowEqual.default)(props, nextProps);
-	  });
-
-	  if (process.env.NODE_ENV !== 'production') {
-	    return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
-	  }
-
-	  return hoc(BaseComponent);
-	};
-
-	var _default = pure$1;
-	pure.default = _default;
-	return pure;
-}
-
-var hasRequiredCreateSvgIcon;
-
-function requireCreateSvgIcon () {
-	if (hasRequiredCreateSvgIcon) return createSvgIcon;
-	hasRequiredCreateSvgIcon = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(createSvgIcon, "__esModule", {
-	  value: true
-	});
-	createSvgIcon.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _pure = _interopRequireDefault(requirePure());
-
-	var _SvgIcon = _interopRequireDefault(require$$3);
-
-	function createSvgIcon$1(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$1;
-	createSvgIcon.default = _default;
-	return createSvgIcon;
-}
-
-var hasRequiredExpandMore;
-
-function requireExpandMore () {
-	if (hasRequiredExpandMore) return ExpandMore;
-	hasRequiredExpandMore = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(ExpandMore, "__esModule", {
-	  value: true
-	});
-	ExpandMore.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
-	}), _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0z"
-	})), 'ExpandMore');
-
-	ExpandMore.default = _default;
-	return ExpandMore;
-}
-
-var ExpandMoreExports = /*@__PURE__*/ requireExpandMore();
-var ExpandMoreIcon = /*@__PURE__*/getDefaultExportFromCjs(ExpandMoreExports);
-
-const style = {
-  feedbackContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column'
-  },
-  panelDetails: {
-    paddingTop: 0,
-    paddingBottom: 0
-  }
-};
-const buildDefaults = input => {
-  return merge({}, {
-    correct: {
-      type: 'default',
-      default: 'Correct'
-    },
-    incorrect: {
-      type: 'default',
-      default: 'Incorrect'
-    },
-    partial: {
-      type: 'default',
-      default: 'Nearly'
-    }
-  }, input);
-};
-class FeedbackConfig extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-    this.onCorrectChange = this.onChange.bind(this, 'correct');
-    this.onIncorrectChange = this.onChange.bind(this, 'incorrect');
-    this.onPartialChange = this.onChange.bind(this, 'partial');
-  }
-
-  onChange(key, config) {
-    const {
-      feedback,
-      onChange
-    } = this.props;
-
-    const update = _extends({}, feedback, {
-      [key]: config
-    });
-
-    onChange(update);
-  }
-
-  render() {
-    const {
-      classes,
-      className,
-      allowPartial,
-      feedback,
-      toolbarOpts
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React__default.createElement(ExpansionPanel, null, /*#__PURE__*/React__default.createElement(ExpansionPanelSummary, {
-      expandIcon: /*#__PURE__*/React__default.createElement(ExpandMoreIcon, null)
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: classes.heading
-    }, "Feedback")), /*#__PURE__*/React__default.createElement(ExpansionPanelDetails, {
-      className: classes.panelDetails
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classes.feedbackContainer
-    }, /*#__PURE__*/React__default.createElement(FeedbackSelector$1, {
-      label: "If correct, show",
-      feedback: feedback.correct,
-      onChange: this.onCorrectChange,
-      toolbarOpts: toolbarOpts
-    }), allowPartial && /*#__PURE__*/React__default.createElement(FeedbackSelector$1, {
-      label: "If partially correct, show",
-      feedback: feedback.partial,
-      onChange: this.onPartialChange,
-      toolbarOpts: toolbarOpts
-    }), /*#__PURE__*/React__default.createElement(FeedbackSelector$1, {
-      label: "If incorrect, show",
-      feedback: feedback.incorrect,
-      onChange: this.onIncorrectChange,
-      toolbarOpts: toolbarOpts
-    })))));
-  }
-
-}
-FeedbackConfig.propTypes = {
-  allowPartial: PropTypes.bool,
-  className: PropTypes.string,
-  feedback: PropTypes.shape({
-    correct: PropTypes.shape(FeedbackType),
-    incorrect: PropTypes.shape(FeedbackType),
-    partial: PropTypes.shape(FeedbackType)
-  }),
-  onChange: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired,
-  toolbarOpts: PropTypes.object
-};
-FeedbackConfig.defaultProps = {
-  allowPartial: true,
-  feedback: buildDefaults()
-};
-var index$4 = withStyles(style)(FeedbackConfig);
-
-const InputTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  error: PropTypes.string
-};
-
-const RawInputSwitch = ({
-  classes,
-  className,
-  label,
-  checked,
-  onChange
-}) => {
-  return /*#__PURE__*/React__default.createElement(InputContainer, {
-    className: className,
-    label: label
-  }, /*#__PURE__*/React__default.createElement(Switch, {
-    className: classes.switchRoot,
-    checked: checked,
-    onChange: onChange,
-    "aria-label": label
-  }));
-};
-
-RawInputSwitch.propTypes = _extends({}, InputTypes);
-const InputSwitch = withStyles({
-  switchRoot: {
-    justifyContent: 'inherit',
-    transform: 'translate(-20%, 20%)'
-  }
-})(RawInputSwitch);
-
-const RawInputCheckbox = props => {
-  const {
-    classes,
-    className,
-    label,
-    checked,
-    onChange,
-    disabled,
-    error
-  } = props;
-  return /*#__PURE__*/React__default.createElement(InputContainer, {
-    className: className,
-    label: label
-  }, /*#__PURE__*/React__default.createElement(Checkbox$2, {
-    className: classNames(classes.checkboxRoot, classes.customColor, error && classes.error),
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange,
-    "aria-label": label
-  }));
-};
-
-RawInputCheckbox.propTypes = _extends({}, InputTypes);
-
-const RawInputRadio = props => {
-  const {
-    classes,
-    className,
-    label,
-    checked,
-    onChange,
-    disabled,
-    error
-  } = props;
-  return /*#__PURE__*/React__default.createElement(InputContainer, {
-    className: className,
-    label: label
-  }, /*#__PURE__*/React__default.createElement(Radio$1, {
-    className: classNames(classes.radioRoot, classes.customColor, error && classes.error),
-    disabled: disabled,
-    checked: checked,
-    onChange: onChange,
-    "aria-label": label
-  }));
-};
-
-RawInputRadio.propTypes = _extends({}, InputTypes);
-const InputCheckbox = withStyles(theme => ({
-  checkboxRoot: {
-    transform: 'translate(-25%, 20%)'
-  },
-  error: {
-    color: theme.palette.error.main
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-}))(RawInputCheckbox);
-const InputRadio = withStyles(theme => ({
-  radioRoot: {
-    transform: 'translate(-20%, 20%)'
-  },
-  error: {
-    color: theme.palette.error.main
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-}))(RawInputRadio);
-
-const log$3 = debug('pie-elements:config-ui:langs');
-
-const styles$9 = theme => ({
-  root: {
-    flexDirection: 'column',
-    alignItems: 'start',
-    display: 'flex',
-    position: 'relative',
-    paddingTop: '0px',
-    paddingRight: '0px'
-  },
-  formControl: {
-    position: 'initial'
-  },
-  inputLabel: {
-    paddingBottom: theme.spacing.unit
-  }
-});
-
-class RawLangs extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.choose = event => {
-      log$3('[choose] event: ', event);
-
-      if (this.props.onChange) {
-        this.props.onChange(event.target.value);
-      }
-    };
-
-    this.uid = props.uid || (Math.random() * 10000).toFixed();
-  }
-
-  render() {
-    let {
-      langs,
-      selected,
-      label,
-      classes
-    } = this.props;
-    log$3('[render] selected:', selected);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.root
-    }, /*#__PURE__*/React__default.createElement(FormControl, {
-      className: classes.formControl
-    }, /*#__PURE__*/React__default.createElement(InputLabel, {
-      className: classes.inputLabel,
-      htmlFor: this.uid
-    }, label), /*#__PURE__*/React__default.createElement(Select, {
-      value: selected,
-      onChange: this.choose,
-      input: /*#__PURE__*/React__default.createElement(MaterialInput, {
-        id: this.uid
-      })
-    }, langs.map((l, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: index,
-      value: l
-    }, l)))));
-  }
-
-}
-RawLangs.propTypes = {
-  onChange: PropTypes.func,
-  langs: PropTypes.array,
-  selected: PropTypes.string,
-  label: PropTypes.string,
-  classes: PropTypes.object.isRequired,
-  uid: PropTypes.string
-};
-const Langs = withStyles(styles$9, {
-  name: 'Langs'
-})(RawLangs);
-const LanguageControls = withStyles({
-  languageControls: {
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridAutoColumns: '1fr',
-    gridGap: '8px'
-  }
-})(({
-  classes,
-  langs,
-  activeLang,
-  defaultLang,
-  onActiveLangChange,
-  onDefaultLangChange,
-  className
-}) => {
-  const names = classNames(classes.languageControls, className);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: names
-  }, /*#__PURE__*/React__default.createElement(Langs, {
-    label: "Choose language to edit",
-    langs: langs,
-    selected: activeLang,
-    onChange: l => onActiveLangChange(l)
-  }), /*#__PURE__*/React__default.createElement(Langs, {
-    label: "Default language",
-    langs: langs,
-    selected: defaultLang,
-    onChange: l => onDefaultLangChange(l)
-  }));
-});
-LanguageControls.propTypes = {
-  langs: PropTypes.array,
-  activeLang: PropTypes.string.isRequired,
-  defaultLang: PropTypes.string.isRequired,
-  onActiveLangChange: PropTypes.func.isRequired,
-  onDefaultLangChange: PropTypes.func.isRequired
-};
-
-class Tabs extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleChange = (event, value) => {
-      this.setState({
-        value
-      });
-    };
-
-    this.state = {
-      value: 0
-    };
-  }
-
-  render() {
-    const {
-      value
-    } = this.state;
-    const {
-      children,
-      className,
-      contentClassName,
-      contentStyle = {},
-      classes
-    } = this.props;
-    const tabClasses = {
-      root: classes.tabRoot
-    };
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: className
-    }, /*#__PURE__*/React__default.createElement(MuiTabs, {
-      indicatorColor: "primary",
-      value: value,
-      onChange: this.handleChange
-    }, React__default.Children.map(children, (c, index) => c && c.props.title ? /*#__PURE__*/React__default.createElement(MuiTab, {
-      classes: tabClasses,
-      key: index,
-      label: c.props.title
-    }) : null)), /*#__PURE__*/React__default.createElement("div", {
-      className: contentClassName,
-      style: contentStyle
-    }, children[value]));
-  }
-
-}
-Tabs.propTypes = {
-  classes: PropTypes.object,
-  className: PropTypes.string,
-  contentClassName: PropTypes.string,
-  contentStyle: PropTypes.object,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
-var Tabs$1 = withStyles$1(() => ({
-  tabRoot: {}
-}))(Tabs);
-
-const Checkbox = ({
-  mini,
-  checked,
-  onChange,
-  value,
-  label,
-  classes,
-  error
-}) => /*#__PURE__*/React__default.createElement(FormControlLabel, {
-  className: classNames(classes.mini),
-  classes: {
-    label: classNames(classes.label, {
-      [classes.miniLabel]: mini
-    })
-  },
-  control: /*#__PURE__*/React__default.createElement(Checkbox$2, {
-    checked: checked,
-    onChange: onChange,
-    value: value,
-    className: classNames(classes.customColor, {
-      [classes.miniCheckbox]: mini,
-      [classes.error]: error
-    })
-  }),
-  label: label
-});
-
-Checkbox.propTypes = {
-  mini: PropTypes.bool,
-  classes: PropTypes.object.isRequired,
-  checked: PropTypes.bool.isRequired,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.string,
-  label: PropTypes.string.isRequired
-};
-Checkbox.defaultProps = {
-  value: '',
-  mini: false
-};
-var Checkbox$1 = withStyles(theme => ({
-  label: {
-    fontSize: theme.typography.fontSize - 1,
-    transform: 'translate(-4%, 2%)',
-    color: 'rgba(0,0,0,1.0)'
-  },
-  miniCheckbox: {
-    margin: 0,
-    padding: 0,
-    width: theme.spacing.unit * 3,
-    height: theme.spacing.unit * 3
-  },
-  miniLabel: {
-    marginLeft: theme.spacing.unit,
-    color: grey[700],
-    fontSize: theme.typography.fontSize - 3
-  },
-  mini: {
-    margin: 0,
-    marginLeft: 0,
-    padding: 0
-  },
-  error: {
-    color: theme.palette.error.main
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-}))(Checkbox);
-
-const styles$8 = theme => ({
-  formSection: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2
-  },
-  label: {
-    marginBottom: theme.spacing.unit
-  }
-});
-
-var formSection = withStyles(styles$8)(({
-  className,
-  classes,
-  label,
-  children,
-  labelExtraStyle
-}) => /*#__PURE__*/React__default.createElement("div", {
-  className: classNames(classes.formSection, className)
-}, /*#__PURE__*/React__default.createElement(Typography, {
-  className: classes.label,
-  type: "subheading",
-  style: labelExtraStyle
-}, label), children));
-
-var Help$1 = {};
-
-var hasRequiredHelp;
-
-function requireHelp () {
-	if (hasRequiredHelp) return Help$1;
-	hasRequiredHelp = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Help$1, "__esModule", {
-	  value: true
-	});
-	Help$1.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	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');
-
-	Help$1.default = _default;
-	return Help$1;
-}
-
-var HelpExports = /*@__PURE__*/ requireHelp();
-var HelpIcon = /*@__PURE__*/getDefaultExportFromCjs(HelpExports);
-
-const RawHelpButton = ({
-  onClick,
-  classes
-}) => /*#__PURE__*/React__default.createElement(IconButton, {
-  classes: {
-    label: classes.icon
-  },
-  onClick: onClick
-}, /*#__PURE__*/React__default.createElement(HelpIcon, null));
-
-RawHelpButton.propTypes = {
-  onClick: PropTypes.func,
-  classes: PropTypes.object.isRequired
-};
-const HelpButton = withStyles(theme => ({
-  icon: {
-    '&:hover': {
-      color: theme.palette.grey[300]
-    }
-  }
-}))(RawHelpButton);
-const HelpDialog = ({
-  open,
-  onClose,
-  children,
-  title
-}) => /*#__PURE__*/React__default.createElement(Dialog$1, {
-  open: open,
-  onRequestClose: onClose
-}, /*#__PURE__*/React__default.createElement(DialogTitle$1, null, title), /*#__PURE__*/React__default.createElement(DialogContent$1, null, /*#__PURE__*/React__default.createElement(DialogContentText$1, null, children)), /*#__PURE__*/React__default.createElement(DialogActions$1, null, /*#__PURE__*/React__default.createElement(Button$1, {
-  onClick: onClose,
-  color: "primary"
-}, "OK")));
-HelpDialog.propTypes = {
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  title: PropTypes.string.isRequired
-};
-
-class Help extends React__default.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false
-    };
-  }
-
-  render() {
-    const {
-      children,
-      title
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(HelpButton, {
-      color: "accent",
-      onClick: () => this.setState({
-        open: true
-      })
-    }), /*#__PURE__*/React__default.createElement(HelpDialog, {
-      open: this.state.open,
-      title: title,
-      onClose: () => this.setState({
-        open: false
-      })
-    }, children));
-  }
-
-}
-
-Help.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  title: PropTypes.string
-};
-
-const _excluded$1 = ["label", "type", "noModelUpdateOnError"];
-class Input extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.onChange = event => {
-      const {
-        type,
-        onChange,
-        error
-      } = this.props;
-      const value = event.target.value;
-
-      if (error(value, type)) {
-        this.setState({
-          error: true,
-          value: event.target.value
-        });
-      } else {
-        this.setState({
-          error: false,
-          value: event.target.value
-        });
-        onChange(event);
-      }
-    };
-
-    this.state = {
-      value: props.value
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState({
-      value: newProps.value
-    });
-  }
-
-  render() {
-    const _this$props = this.props,
-          {
-      label,
-      type
-    } = _this$props,
-          rest = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-
-    const {
-      value,
-      error
-    } = this.state;
-    return label ? /*#__PURE__*/React.createElement(InputContainer, {
-      label: label
-    }, /*#__PURE__*/React.createElement(MaterialInput, _extends({
-      type: type
-    }, rest, {
-      value: value,
-      onChange: this.onChange,
-      error: error
-    }))) : /*#__PURE__*/React.createElement(MaterialInput, _extends({
-      type: type
-    }, rest, {
-      value: value,
-      onChange: this.onChange,
-      error: error
-    }));
-  }
-
-}
-Input.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  onChange: PropTypes.func.isRequired,
-  label: PropTypes.string,
-  type: PropTypes.string.isRequired,
-  error: PropTypes.func,
-  noModelUpdateOnError: PropTypes.bool
-};
-Input.defaultProps = {
-  type: 'text',
-  error: (value, type) => type === 'number' ? !value || isNaN(value) : !value,
-  noModelUpdateOnError: false
-};
-
-const log$2 = debug('@pie-lib:config-ui:number-text-field');
-
-const styles$7 = theme => ({
-  root: {
-    marginRight: theme.spacing.unit,
-    '& label': {
-      width: 'max-content'
-    }
-  }
-});
-
-const fallbackNumber$1 = (min, max) => {
-  if (!isFinite(min) && !isFinite(max)) {
-    return 0;
-  }
-
-  if (!isFinite(min) && isFinite(max)) {
-    return max;
-  }
-
-  if (isFinite(min)) {
-    return min;
-  }
-};
-
-class NumberTextField extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.onBlur = event => {
-      const value = event.target.value;
-      const rawNumber = parseFloat(value);
-      log$2('rawNumber: ', rawNumber);
-      const number = this.clamp(rawNumber);
-      log$2('number: ', number);
-
-      if (number !== this.state.value) {
-        log$2('trigger update...');
-        this.setState({
-          value: number.toString()
-        }, () => {
-          this.props.onChange(event, number);
-        });
-      }
-    };
-
-    this.errorMessage = () => {
-      const {
-        min,
-        max
-      } = this.props;
-
-      if (min && max) {
-        return `The value must be between ${min} and ${max}`;
-      }
-
-      if (min) {
-        return `The value must be greater than ${min}`;
-      }
-
-      if (max) {
-        return `The value must be less than ${max}`;
-      }
-    };
-
-    this.getError = () => {
-      const {
-        value
-      } = this.state;
-      const float = parseFloat(value);
-      const clamped = this.clamp(float);
-
-      if (clamped !== float) {
-        return this.errorMessage();
-      }
-    };
-
-    const _value = this.clamp(props.value);
-
-    this.state = {
-      value: _value
-    };
-
-    if (_value !== props.value) {
-      this.props.onChange({}, _value);
-    }
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(props) {
-    const value = this.clamp(props.value, props.min, props.max);
-    this.setState({
-      value
-    });
-  }
-
-  clamp(value, min = this.props.min, max = this.props.max) {
-    if (!isFinite(value)) {
-      return fallbackNumber$1(min, max);
-    }
-
-    if (isFinite(max)) {
-      value = Math.min(value, max);
-    }
-
-    if (isFinite(min)) {
-      value = Math.max(value, min);
-    }
-
-    return value;
-  }
-  /**
-   * on Blur (this can be triggered by pressing Enter, see below)
-   * we check the entered value and reset it if needed
-   */
-
-
-  onChange(event) {
-    const value = event.target.value;
-    this.setState({
-      value
-    });
-  }
-
-  render() {
-    const {
-      className,
-      classes,
-      label,
-      disabled,
-      suffix,
-      min,
-      max,
-      inputClassName,
-      disableUnderline,
-      showErrorWhenOutsideRange,
-      variant
-    } = this.props;
-    const names = classNames(classes.root, className);
-    const error = showErrorWhenOutsideRange && this.getError();
-    return /*#__PURE__*/React__default.createElement(TextField$1, {
-      variant: variant || 'standard',
-      inputRef: ref => {
-        this.inputRef = ref;
-      },
-      disabled: disabled,
-      label: label,
-      value: this.state.value,
-      error: !!error,
-      helperText: error,
-      onChange: this.onChange,
-      onBlur: this.onBlur,
-      onKeyPress: e => {
-        // once the Enter key is pressed, we force input blur
-        if (e.key === 'Enter' && this.inputRef) {
-          this.inputRef.blur();
-        }
-      },
-      type: "number",
-      className: names,
-      InputLabelProps: {
-        shrink: true
-      },
-      InputProps: {
-        endAdornment: suffix && /*#__PURE__*/React__default.createElement(InputAdornment, {
-          position: "end"
-        }, suffix),
-        className: inputClassName,
-        disableUnderline: disableUnderline
-      },
-      inputProps: {
-        min,
-        max
-      },
-      margin: "normal"
-    });
-  }
-
-}
-NumberTextField.propTypes = {
-  disabled: PropTypes.bool,
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  inputClassName: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  value: PropTypes.number,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  label: PropTypes.string,
-  suffix: PropTypes.string,
-  showErrorWhenOutsideRange: PropTypes.bool,
-  disableUnderline: PropTypes.bool,
-  variant: PropTypes.string
-};
-NumberTextField.defaultProps = {
-  showErrorWhenOutsideRange: false
-};
-var NumberTextField$1 = withStyles(styles$7)(NumberTextField);
-
-var Remove$1 = {};
-
-var hasRequiredRemove;
-
-function requireRemove () {
-	if (hasRequiredRemove) return Remove$1;
-	hasRequiredRemove = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Remove$1, "__esModule", {
-	  value: true
-	});
-	Remove$1.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  d: "M19 13H5v-2h14v2z"
-	}), _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0z"
-	})), 'Remove');
-
-	Remove$1.default = _default;
-	return Remove$1;
-}
-
-var RemoveExports = /*@__PURE__*/ requireRemove();
-var Remove = /*@__PURE__*/getDefaultExportFromCjs(RemoveExports);
-
-var Add$1 = {};
-
-var hasRequiredAdd;
-
-function requireAdd () {
-	if (hasRequiredAdd) return Add$1;
-	hasRequiredAdd = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Add$1, "__esModule", {
-	  value: true
-	});
-	Add$1.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-	}), _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0z"
-	})), 'Add');
-
-	Add$1.default = _default;
-	return Add$1;
-}
-
-var AddExports = /*@__PURE__*/ requireAdd();
-var Add = /*@__PURE__*/getDefaultExportFromCjs(AddExports);
-
-const styles$6 = () => ({
-  input: {
-    '& input[type=number]': {
-      '-moz-appearance': 'textfield'
-    },
-    '& input[type=number]::-webkit-outer-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    },
-    '& input[type=number]::-webkit-inner-spin-button': {
-      '-webkit-appearance': 'none',
-      margin: 0
-    }
-  },
-  iconButton: {
-    padding: '2px'
-  }
-});
-
-const fallbackNumber = (min, max) => {
-  if (!isFinite(min) && !isFinite(max)) {
-    return 0;
-  }
-
-  if (!isFinite(min) && isFinite(max)) {
-    return max;
-  }
-
-  if (isFinite(min)) {
-    return min;
-  }
-};
-
-class NumberTextFieldCustom extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.normalizeValueAndIndex = (customValues, number, min, max) => {
-      const {
-        type
-      } = this.props;
-      const value = this.clamp(number, min, max);
-      const currentIndex = (customValues || []).findIndex(val => val === value);
-
-      if ((customValues || []).length > 0 && currentIndex === -1) {
-        const closestValue = type === 'text' ? this.getClosestFractionValue(customValues, value) : this.getClosestValue(customValues, value);
-        return {
-          value: closestValue.value,
-          currentIndex: closestValue.index
-        };
-      }
-
-      return {
-        value,
-        currentIndex
-      };
-    };
-
-    this.getClosestValue = (customValues, number) => customValues.reduce((closest, value, index) => Math.abs(value - number) < Math.abs(closest.value - number) ? {
-      value,
-      index
-    } : closest, {
-      value: customValues[0],
-      index: 0
-    });
-
-    this.getClosestFractionValue = (customValues, number) => customValues.reduce((closest, value, index) => Math.abs(math.number(math.fraction(value)) - math.number(math.fraction(number))) < Math.abs(math.number(math.fraction(closest.value)) - math.number(math.fraction(number))) ? {
-      value,
-      index
-    } : closest, {
-      value: customValues[0],
-      index: 0
-    });
-
-    this.getValidFraction = value => {
-      if (this.isPositiveInteger(value.trim())) {
-        return value.trim();
-      }
-
-      if (value.trim() === '' || value.trim().split('/').length !== 2) {
-        return false;
-      }
-
-      let [numerator, denominator] = value.trim().split('/');
-
-      if (isNaN(numerator) || isNaN(denominator)) {
-        return false;
-      }
-
-      numerator = parseFloat(numerator);
-      denominator = parseFloat(denominator);
-
-      if (!Number.isInteger(numerator) || !Number.isInteger(denominator)) {
-        return false;
-      }
-
-      if (numerator < 0 || denominator < 1) {
-        return false;
-      }
-
-      return numerator + '/' + denominator;
-    };
-
-    this.isPositiveInteger = n => {
-      return n >>> 0 === parseFloat(n);
-    };
-
-    this.onBlur = event => {
-      const {
-        customValues,
-        onlyIntegersAllowed,
-        type
-      } = this.props;
-      let {
-        value
-      } = event.target;
-
-      if (type === 'text') {
-        let tempValue = this.getValidFraction(value);
-
-        if (tempValue) {
-          value = tempValue;
-        } else {
-          value = this.props.value;
-        }
-      }
-
-      let rawNumber = onlyIntegersAllowed ? Math.round(parseFloat(value)) : parseFloat(value);
-
-      if (type === 'text') {
-        rawNumber = value.trim();
-      }
-
-      const {
-        value: number,
-        currentIndex
-      } = this.normalizeValueAndIndex(customValues, rawNumber);
-      this.setState({
-        value: number.toString(),
-        currentIndex
-      }, () => this.props.onChange(event, number));
-    };
-
-    const {
-      value: _value,
-      currentIndex: _currentIndex
-    } = this.normalizeValueAndIndex(props.customValues, props.value);
-    this.state = {
-      value: _value,
-      currentIndex: _currentIndex
-    };
-
-    if (_value !== props.value) {
-      this.props.onChange({}, _value);
-    }
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  UNSAFE_componentWillReceiveProps(props) {
-    const {
-      value,
-      currentIndex
-    } = this.normalizeValueAndIndex(props.customValues, props.value, props.min, props.max);
-    this.setState({
-      value,
-      currentIndex
-    });
-  }
-
-  clamp(value, min = this.props.min, max = this.props.max) {
-    const {
-      customValues
-    } = this.props;
-
-    if ((customValues || []).length > 0) {
-      return value;
-    }
-
-    if (!isFinite(value)) {
-      return fallbackNumber(min, max);
-    }
-
-    if (isFinite(max)) {
-      value = Math.min(value, max);
-    }
-
-    if (isFinite(min)) {
-      value = Math.max(value, min);
-    }
-
-    return value;
-  }
-
-  onChange(event) {
-    const {
-      type
-    } = this.props;
-    const {
-      value
-    } = event.target;
-
-    if (type !== 'text' && typeof value === 'string' && value.trim() === '') {
-      return;
-    }
-
-    this.setState({
-      value
-    });
-  }
-
-  changeValue(event, sign = 1, shouldUpdate = false) {
-    event.preventDefault();
-    const {
-      customValues,
-      step,
-      onlyIntegersAllowed,
-      onChange
-    } = this.props;
-    const {
-      currentIndex,
-      value
-    } = this.state;
-    const updatedIndex = currentIndex + sign * 1;
-    let number;
-
-    if (customValues.length > 0) {
-      if (updatedIndex < 0 || updatedIndex >= customValues.length) {
-        return;
-      }
-
-      number = customValues[updatedIndex];
-    } else {
-      const rawNumber = onlyIntegersAllowed ? parseInt(value) : parseFloat(value);
-      const updatedValue = (rawNumber * 10000 + step * sign * 10000) / 10000;
-      number = this.clamp(updatedValue);
-    }
-
-    this.setState({
-      value: number.toString(),
-      currentIndex: updatedIndex
-    }, () => {
-      if (shouldUpdate) {
-        onChange(event, number);
-      }
-    });
-  }
-
-  render() {
-    const {
-      className,
-      classes,
-      label,
-      disabled,
-      error,
-      min,
-      max,
-      customValues,
-      inputClassName,
-      disableUnderline,
-      helperText,
-      variant,
-      textAlign,
-      type = 'number'
-    } = this.props;
-    const {
-      value
-    } = this.state;
-    const names = classNames(className, classes.input); //Logic to disable the increment and decrement buttons
-
-    let disabledStart = false;
-    let disabledEnd = false;
-
-    if (customValues.length > 0) {
-      disabledStart = value === customValues[0];
-      disabledEnd = value === customValues[customValues.length - 1];
-    } else if (isFinite(min) && isFinite(max)) {
-      disabledStart = value === min;
-      disabledEnd = value === max;
-    }
-
-    return /*#__PURE__*/React__default.createElement(TextField$1, {
-      variant: variant,
-      inputRef: ref => this.inputRef = ref,
-      disabled: disabled,
-      label: label,
-      value: value,
-      error: error,
-      helperText: helperText,
-      onChange: this.onChange,
-      onBlur: this.onBlur,
-      onKeyPress: e => {
-        // once the Enter key is pressed, we force input blur
-        if (e.key === 'Enter' && this.inputRef) {
-          this.inputRef.blur();
-        }
-      },
-      onKeyDown: e => {
-        if (e.key === 'ArrowUp') {
-          this.changeValue(e);
-        }
-
-        if (e.key === 'ArrowDown') {
-          this.changeValue(e, -1);
-        }
-      },
-      title: '',
-      type: type,
-      className: names,
-      InputProps: {
-        className: inputClassName,
-        disableUnderline: disableUnderline,
-        startAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
-          position: "start"
-        }, /*#__PURE__*/React__default.createElement(IconButton, {
-          className: classes.iconButton,
-          disabled: disabled ? disabled : disabledStart,
-          onClick: e => this.changeValue(e, -1, true)
-        }, /*#__PURE__*/React__default.createElement(Remove, {
-          fontSize: "small"
-        }))),
-        endAdornment: /*#__PURE__*/React__default.createElement(InputAdornment, {
-          position: "end"
-        }, /*#__PURE__*/React__default.createElement(IconButton, {
-          className: classes.iconButton,
-          disabled: disabled ? disabled : disabledEnd,
-          onClick: e => this.changeValue(e, 1, true)
-        }, /*#__PURE__*/React__default.createElement(Add, {
-          fontSize: "small"
-        })))
-      },
-      inputProps: {
-        style: {
-          textAlign
-        },
-        min,
-        max
-      }
-    });
-  }
-
-}
-NumberTextFieldCustom.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  customValues: PropTypes.array,
-  disabled: PropTypes.bool,
-  error: PropTypes.bool,
-  inputClassName: PropTypes.string,
-  helperText: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onlyIntegersAllowed: PropTypes.bool,
-  value: PropTypes.any,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  step: PropTypes.number,
-  label: PropTypes.string,
-  disableUnderline: PropTypes.bool,
-  textAlign: PropTypes.string,
-  variant: PropTypes.string,
-  type: PropTypes.string
-};
-NumberTextFieldCustom.defaultProps = {
-  step: 1,
-  customValues: [],
-  textAlign: 'center',
-  variant: 'standard',
-  onlyIntegersAllowed: false
-};
-var numberTextFieldCustom = withStyles(styles$6)(NumberTextFieldCustom);
-
-const styles$5 = theme => ({
-  group: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    paddingLeft: 0,
-    marginTop: theme.spacing.unit
-  },
-  vertical: {
-    flexDirection: 'column'
-  }
-});
-
-class RawNChoice extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.handleChange = event => {
-      this.props.onChange(event.currentTarget.value);
-    };
-  }
-
-  render() {
-    const {
-      header,
-      className,
-      classes,
-      customLabel,
-      opts,
-      value,
-      direction
-    } = this.props;
-    const preppedOpts = opts.map(o => {
-      return typeof o === 'string' ? {
-        label: o,
-        value: o
-      } : o;
-    });
-    const LabelComponent = customLabel || RadioWithLabel;
-    return /*#__PURE__*/React__default.createElement(InputContainer, {
-      label: header,
-      className: className
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.group, classes[direction])
-    }, preppedOpts.map((o, index) => /*#__PURE__*/React__default.createElement(LabelComponent, {
-      value: o.value,
-      key: index,
-      checked: o.value === value,
-      onChange: this.handleChange,
-      label: o.label
-    }))));
-  }
-
-}
-
-RawNChoice.propTypes = {
-  header: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  customLabel: PropTypes.func,
-  opts: PropTypes.array.isRequired,
-  value: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
-  classes: PropTypes.object.isRequired
-};
-const NChoice = withStyles(styles$5)(RawNChoice);
-const labelValue$1 = PropTypes.shape({
-  label: PropTypes.string,
-  value: PropTypes.string
-});
-
-class TwoChoice extends React__default.Component {
-  render() {
-    const {
-      one,
-      two,
-      header,
-      className,
-      customLabel,
-      value,
-      onChange
-    } = this.props;
-    const opts = [one, two];
-    return /*#__PURE__*/React__default.createElement(NChoice, {
-      customLabel: customLabel,
-      header: header,
-      className: className,
-      opts: opts,
-      value: value,
-      onChange: onChange
-    });
-  }
-
-}
-
-TwoChoice.propTypes = {
-  header: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  one: PropTypes.oneOfType([labelValue$1, PropTypes.string]),
-  two: PropTypes.oneOfType([labelValue$1, PropTypes.string]),
-  className: PropTypes.string,
-  customLabel: PropTypes.func
-};
-var twoChoice = withStyles(styles$5)(TwoChoice);
-
-const log$1 = debug('pie-elements:config-ui:mui-box');
-const MuiBox = withStyles(theme => {
-  const light = theme.palette.type === 'light';
-  const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
-  log$1(theme.palette.primary[theme.palette.type || 'light']);
-  return {
-    muiBox: {
-      paddingTop: theme.spacing.unit,
-      paddingBottom: theme.spacing.unit,
-      position: 'relative',
-      '&:before': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '1px',
-        content: '""',
-        position: 'absolute',
-        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: bottomLineColor
-      },
-      '&:hover:before': {
-        height: '2px'
-      },
-      '&:after': {
-        left: 0,
-        right: 0,
-        bottom: 0,
-        height: '2px',
-        content: '""',
-        position: 'absolute',
-        transform: 'scaleX(0)',
-        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-        pointerEvents: 'none',
-        backgroundColor: theme.palette.primary[theme.palette.type] //'#304ffe'
-
-      }
-    },
-    focused: {
-      '&:after': {
-        transform: 'scaleX(1)'
-      }
-    }
-  };
-})(({
-  children,
-  classes,
-  focused
-}) => {
-  const names = classNames(classes.muiBox, focused && classes.focused);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: names
-  }, children);
-});
-MuiBox.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  focused: PropTypes.bool.isRequired
-};
-
-const ENTER = 13;
-const Tag = withStyles(() => ({
-  tag: {
-    padding: '0px',
-    margin: '1px'
-  }
-}))(({
-  classes,
-  label,
-  onDelete
-}) => /*#__PURE__*/React__default.createElement(Chip, {
-  className: classes.tag,
-  label: label,
-  onDelete: onDelete
-}));
-Tag.propTypes = {
-  label: PropTypes.string.isRequired,
-  onDelete: PropTypes.func.isRequired
-};
-class TagsInput extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.onFocus = () => {
-      this.setState({
-        focused: true
-      });
-    };
-
-    this.onBlur = () => {
-      this.setState({
-        focused: false
-      });
-    };
-
-    this.state = {
-      value: '',
-      focused: false
-    };
-
-    this.onKeyDown = event => {
-      if (event.keyCode === ENTER && this.state.value !== '') {
-        const tag = this.state.value.trim();
-        const newTags = uniq(this.props.tags.concat([tag]));
-
-        if (newTags.length !== this.props.tags.length) {
-          this.props.onChange(newTags);
-          this.setState({
-            value: ''
-          });
-        }
-      }
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: event.target.value
-      });
-    };
-
-    this.deleteTag = tag => {
-      const {
-        tags
-      } = this.props;
-      const tagIndex = tags.indexOf(tag);
-
-      if (tagIndex !== -1) {
-        tags.splice(tagIndex, 1);
-        this.props.onChange(tags);
-        this.input.focus();
-      }
-    };
-  }
-
-  render() {
-    const {
-      classes,
-      tags
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement(MuiBox, {
-      focused: this.state.focused
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classes.tagsInput
-    }, (tags || []).map((t, index) => /*#__PURE__*/React__default.createElement(Tag, {
-      key: index,
-      label: t,
-      onDelete: () => this.deleteTag(t)
-    })), /*#__PURE__*/React__default.createElement("input", {
-      ref: r => this.input = r,
-      onKeyDown: this.onKeyDown,
-      onChange: this.onChange,
-      className: classes.input,
-      value: this.state.value,
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      type: "text"
-    })));
-  }
-
-}
-TagsInput.propTypes = {
-  classes: PropTypes.object.isRequired,
-  tags: PropTypes.arrayOf(PropTypes.string).isRequired,
-  onChange: PropTypes.func.isRequired
-};
-
-const styles$4 = theme => ({
-  tagsInput: {
-    border: `0px solid ${theme.palette.background.paper}`,
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: `0px solid ${theme.palette.background.paper}`,
-    height: '28px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: theme.typography.fontFamily,
-    outline: 'none',
-    '&:focus': {
-      outline: 'none'
-    }
-  }
-});
-
-var index$3 = withStyles(styles$4)(TagsInput);
-
-var Delete = {};
-
-var hasRequiredDelete;
-
-function requireDelete () {
-	if (hasRequiredDelete) return Delete;
-	hasRequiredDelete = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Delete, "__esModule", {
-	  value: true
-	});
-	Delete.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-	}), _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0z"
-	})), 'Delete');
-
-	Delete.default = _default;
-	return Delete;
-}
-
-var DeleteExports = /*@__PURE__*/ requireDelete();
-var ActionDelete = /*@__PURE__*/getDefaultExportFromCjs(DeleteExports);
-
-var SubdirectoryArrowRight = {};
-
-var hasRequiredSubdirectoryArrowRight;
-
-function requireSubdirectoryArrowRight () {
-	if (hasRequiredSubdirectoryArrowRight) return SubdirectoryArrowRight;
-	hasRequiredSubdirectoryArrowRight = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(SubdirectoryArrowRight, "__esModule", {
-	  value: true
-	});
-	SubdirectoryArrowRight.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-	  fill: "none",
-	  d: "M0 0h24v24H0V0z"
-	}), _react.default.createElement("path", {
-	  d: "M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z"
-	})), 'SubdirectoryArrowRight');
-
-	SubdirectoryArrowRight.default = _default;
-	return SubdirectoryArrowRight;
-}
-
-var SubdirectoryArrowRightExports = /*@__PURE__*/ requireSubdirectoryArrowRight();
-var ArrowRight = /*@__PURE__*/getDefaultExportFromCjs(SubdirectoryArrowRightExports);
-
-var Feedback$1 = {};
-
-var hasRequiredFeedback;
-
-function requireFeedback () {
-	if (hasRequiredFeedback) return Feedback$1;
-	hasRequiredFeedback = 1;
-
-	var _interopRequireDefault = requireInteropRequireDefault();
-
-	Object.defineProperty(Feedback$1, "__esModule", {
-	  value: true
-	});
-	Feedback$1.default = void 0;
-
-	var _react = _interopRequireDefault(React__default);
-
-	var _createSvgIcon = _interopRequireDefault(/*@__PURE__*/ requireCreateSvgIcon());
-
-	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: "M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 12h-2v-2h2v2zm0-4h-2V6h2v4z"
-	})), 'Feedback');
-
-	Feedback$1.default = _default;
-	return Feedback$1;
-}
-
-var FeedbackExports = /*@__PURE__*/ requireFeedback();
-var ActionFeedback = /*@__PURE__*/getDefaultExportFromCjs(FeedbackExports);
-
-class IconMenu extends React__default.Component {
-  constructor(props) {
-    super(props);
-
-    this.handleClick = event => {
-      this.setState({
-        open: true,
-        anchorEl: event.currentTarget
-      });
-    };
-
-    this.handleRequestClose = () => {
-      this.setState({
-        open: false
-      });
-    };
-
-    this.state = {
-      anchorEl: undefined,
-      open: false
-    };
-  }
-
-  render() {
-    const {
-      opts,
-      onClick
-    } = this.props;
-    const keys = Object.keys(opts);
-
-    const handleMenuClick = key => () => {
-      onClick(key);
-      this.handleRequestClose();
-    };
-
-    return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-      onClick: this.handleClick
-    }, this.props.iconButtonElement), /*#__PURE__*/React__default.createElement(Menu, {
-      id: "simple-menu",
-      anchorEl: this.state.anchorEl,
-      open: this.state.open,
-      onClose: this.handleRequestClose
-    }, keys.map((k, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
-      key: index,
-      onClick: handleMenuClick(k)
-    }, opts[k]))));
-  }
-
-}
-IconMenu.propTypes = {
-  opts: PropTypes.object,
-  onClick: PropTypes.func.isRequired,
-  iconButtonElement: PropTypes.any
-};
-class FeedbackMenu extends React__default.Component {
-  render() {
-    const {
-      value,
-      onChange,
-      classes
-    } = this.props;
-    const t = value && value.type;
-    const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
-    const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
-    const icon = /*#__PURE__*/React__default.createElement(IconButton, {
-      className: classes.icon,
-      "aria-label": tooltip
-    }, /*#__PURE__*/React__default.createElement(ActionFeedback, {
-      color: iconColor
-    }));
-    return /*#__PURE__*/React__default.createElement(IconMenu, {
-      iconButtonElement: icon,
-      onClick: key => onChange(key),
-      opts: {
-        none: 'No Feedback',
-        default: 'Default',
-        custom: 'Custom'
-      }
-    });
-  }
-
-}
-FeedbackMenu.propTypes = {
-  value: PropTypes.object,
-  onChange: PropTypes.func.isRequired,
-  classes: PropTypes.object.isRequired
-};
-FeedbackMenu.defaultProps = {
-  classes: {}
-};
-
-const EditableHtmlContainer = withStyles(theme => ({
-  labelContainer: {},
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  }
-}))(({
-  label,
-  classes,
-  onChange,
-  value,
-  className,
-  imageSupport,
-  disableImageAlignmentButtons,
-  disabled,
-  spellCheck,
-  nonEmpty,
-  pluginOpts,
-  toolbarOpts,
-  error,
-  maxImageWidth,
-  maxImageHeight,
-  uploadSoundSupport,
-  mathMlOptions: _mathMlOptions = {}
-}) => {
-  const names = classNames(classes.labelContainer, className);
-  return /*#__PURE__*/React__default.createElement(InputContainer, {
-    label: label,
-    className: names
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.editorHolder
-  }, /*#__PURE__*/React__default.createElement(EditableHTML, {
-    markup: value || '',
-    disabled: disabled,
-    spellCheck: spellCheck,
-    nonEmpty: nonEmpty,
-    onChange: onChange,
-    imageSupport: imageSupport,
-    disableImageAlignmentButtons: disableImageAlignmentButtons,
-    className: classes.editor,
-    pluginProps: pluginOpts || {},
-    toolbarOpts: toolbarOpts,
-    error: error,
-    maxImageWidth: maxImageWidth,
-    maxImageHeight: maxImageHeight,
-    uploadSoundSupport: uploadSoundSupport,
-    languageCharactersProps: [{
-      language: 'spanish'
-    }, {
-      language: 'special'
-    }],
-    mathMlOptions: _mathMlOptions
-  })));
-});
-const Feedback = withStyles(theme => ({
-  text: {
-    width: '100%'
-  },
-  feedbackContainer: {
-    position: 'relative'
-  },
-  arrowIcon: {
-    fill: theme.palette.grey[400],
-    left: -56,
-    position: 'absolute',
-    top: 20
-  }
-}))(({
-  value,
-  onChange,
-  type,
-  correct,
-  classes,
-  defaults,
-  toolbarOpts,
-  mathMlOptions: _mathMlOptions2 = {}
-}) => {
-  if (!type || type === 'none') {
-    return null;
-  } else if (type === 'default') {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.feedbackContainer
-    }, /*#__PURE__*/React__default.createElement(ArrowRight, {
-      className: classes.arrowIcon
-    }), /*#__PURE__*/React__default.createElement(TextField$1, {
-      className: classes.text,
-      label: "Feedback Text",
-      value: correct ? defaults.correct : defaults.incorrect
-    }));
-  } else {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.feedbackContainer
-    }, /*#__PURE__*/React__default.createElement(ArrowRight, {
-      className: classes.arrowIcon
-    }), /*#__PURE__*/React__default.createElement(EditableHtmlContainer, {
-      className: classes.text,
-      label: "Feedback Text",
-      value: value,
-      onChange: onChange,
-      toolbarOpts: toolbarOpts,
-      mathMlOptions: _mathMlOptions2
-    }));
-  }
-});
-class ChoiceConfiguration extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this._changeFn = key => update => {
-      const {
-        data,
-        onChange
-      } = this.props;
-
-      if (onChange) {
-        onChange(_extends({}, data, {
-          [key]: update
-        }));
-      }
-    };
-
-    this.onLabelChange = this._changeFn('label');
-
-    this.onCheckedChange = event => {
-      const correct = event.target.checked;
-      const {
-        data,
-        onChange
-      } = this.props;
-
-      if (onChange) {
-        onChange(_extends({}, data, {
-          correct
-        }));
-      }
-    };
-
-    this.onFeedbackValueChange = v => {
-      const {
-        data,
-        onChange
-      } = this.props;
-
-      if (data.feedback.type !== 'custom') {
-        return;
-      }
-
-      const fb = _extends({}, data.feedback, {
-        value: v
-      });
-
-      if (onChange) onChange(_extends({}, data, {
-        feedback: fb
-      }));
-    };
-
-    this.onFeedbackTypeChange = t => {
-      const {
-        data,
-        onChange
-      } = this.props;
-
-      const fb = _extends({}, data.feedback, {
-        type: t
-      });
-
-      if (fb.type !== 'custom') {
-        fb.value = undefined;
-      }
-
-      if (onChange) onChange(_extends({}, data, {
-        feedback: fb
-      }));
-    };
-  }
-
-  render() {
-    const {
-      data,
-      classes,
-      mode,
-      onDelete,
-      defaultFeedback,
-      index,
-      className,
-      noLabels,
-      useLetterOrdering,
-      imageSupport,
-      disableImageAlignmentButtons,
-      disabled,
-      spellCheck,
-      nonEmpty,
-      allowFeedBack,
-      allowDelete,
-      pluginOpts,
-      toolbarOpts,
-      error,
-      noCorrectAnswerError,
-      uploadSoundSupport,
-      maxImageWidth,
-      maxImageHeight,
-      mathMlOptions = {}
-    } = this.props;
-    const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
-    const names = classNames(classes.choiceConfiguration, className);
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: names
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classes.topRow
-    }, index > 0 && /*#__PURE__*/React__default.createElement("span", {
-      className: classes.index,
-      type: "title"
-    }, useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index), /*#__PURE__*/React__default.createElement(InputToggle, {
-      className: classes.toggle,
-      onChange: this.onCheckedChange,
-      label: !noLabels ? 'Correct' : '',
-      checked: !!data.correct,
-      error: noCorrectAnswerError
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: classes.middleColumn
-    }, /*#__PURE__*/React__default.createElement(EditableHtmlContainer, {
-      className: classes.input,
-      label: !noLabels ? 'Label' : '',
-      value: data.label,
-      onChange: this.onLabelChange,
-      imageSupport: imageSupport,
-      disableImageAlignmentButtons: disableImageAlignmentButtons,
-      disabled: disabled,
-      spellCheck: spellCheck,
-      nonEmpty: nonEmpty,
-      pluginOpts: pluginOpts,
-      toolbarOpts: toolbarOpts,
-      error: error,
-      uploadSoundSupport: uploadSoundSupport,
-      mathMlOptions: mathMlOptions,
-      maxImageWidth: maxImageWidth,
-      maxImageHeight: maxImageHeight
-    }), error && /*#__PURE__*/React__default.createElement("div", {
-      className: classes.errorText
-    }, error), allowFeedBack && /*#__PURE__*/React__default.createElement(Feedback, _extends({}, data.feedback, {
-      correct: data.correct,
-      defaults: defaultFeedback,
-      onChange: this.onFeedbackValueChange,
-      toolbarOpts: toolbarOpts
-    }))), allowFeedBack && /*#__PURE__*/React__default.createElement(InputContainer, {
-      className: classes.feedback,
-      label: !noLabels ? 'Feedback' : ''
-    }, /*#__PURE__*/React__default.createElement(FeedbackMenu, {
-      onChange: this.onFeedbackTypeChange,
-      value: data.feedback,
-      classes: {
-        icon: classes.feedbackIcon
-      }
-    })), allowDelete && /*#__PURE__*/React__default.createElement(InputContainer, {
-      className: classes.delete,
-      label: !noLabels ? 'Delete' : ''
-    }, /*#__PURE__*/React__default.createElement(IconButton, {
-      "aria-label": "delete",
-      className: classes.deleteIcon,
-      onClick: onDelete
-    }, /*#__PURE__*/React__default.createElement(ActionDelete, null)))));
-  }
-
-}
-ChoiceConfiguration.propTypes = {
-  classes: PropTypes.object.isRequired,
-  noLabels: PropTypes.bool,
-  useLetterOrdering: PropTypes.bool,
-  className: PropTypes.string,
-  error: PropTypes.string,
-  mode: PropTypes.oneOf(['checkbox', 'radio']),
-  defaultFeedback: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  nonEmpty: PropTypes.bool,
-  data: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-    correct: PropTypes.bool,
-    feedback: PropTypes.shape({
-      type: PropTypes.string,
-      value: PropTypes.string
-    })
-  }),
-  onDelete: PropTypes.func,
-  onChange: PropTypes.func,
-  index: PropTypes.number,
-  imageSupport: PropTypes.shape({
-    add: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired
-  }),
-  disableImageAlignmentButtons: PropTypes.bool,
-  allowFeedBack: PropTypes.bool,
-  allowDelete: PropTypes.bool,
-  noCorrectAnswerError: PropTypes.string,
-  spellCheck: PropTypes.bool,
-  pluginOpts: PropTypes.object,
-  toolbarOpts: PropTypes.object,
-  uploadSoundSupport: PropTypes.object,
-  maxImageWidth: PropTypes.number,
-  maxImageHeight: PropTypes.number
-};
-ChoiceConfiguration.defaultProps = {
-  index: -1,
-  noLabels: false,
-  useLetterOrdering: false,
-  allowFeedBack: true,
-  allowDelete: true
-};
-
-const styles$3 = theme => ({
-  index: {
-    paddingRight: theme.spacing.unit,
-    paddingTop: theme.spacing.unit * 3.5
-  },
-  choiceConfiguration: {},
-  topRow: {
-    display: 'flex'
-  },
-  value: {
-    flex: '0.5',
-    paddingRight: theme.spacing.unit
-  },
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  },
-  toggle: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit / 2,
-    paddingBottom: 0,
-    marginRight: 0,
-    marginLeft: theme.spacing.unit
-  },
-  feedback: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit * 2,
-    paddingLeft: 0,
-    marginLeft: 0,
-    marginRight: theme.spacing.unit
-  },
-  feedbackIcon: {
-    margin: 0,
-    width: 'inherit'
-  },
-  deleteIcon: {
-    margin: 0,
-    width: 'inherit'
-  },
-  delete: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit * 2,
-    paddingLeft: 0,
-    marginLeft: 0
-  },
-  middleColumn: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    marginRight: theme.spacing.unit
-  },
-  input: {
-    marginRight: 0
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main
-  }
-});
-
-var index$2 = withStyles(styles$3)(ChoiceConfiguration);
-
-class RawLayoutContents extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.getConfiguration = () => {
-      var _secondary$props, _secondary$props2, _secondary$props2$chi, _secondary$props2$chi2;
-
-      const {
-        secondary
-      } = this.props; // in config-layout, secondary can be: <SettingsBox>{settings}</SettingsBox>, settings, null
-
-      return (secondary == null ? void 0 : (_secondary$props = secondary.props) == null ? void 0 : _secondary$props.configuration) || (secondary == null ? void 0 : (_secondary$props2 = secondary.props) == null ? void 0 : (_secondary$props2$chi = _secondary$props2.children) == null ? void 0 : (_secondary$props2$chi2 = _secondary$props2$chi.props) == null ? void 0 : _secondary$props2$chi2.configuration) || undefined;
-    };
-  }
-
-  // // eslint-disable-next-line no-unused-vars
-  // componentDidUpdate(prevProps, prevState, snapshot) {
-  //   const configuration = this.getConfiguration();
-  //   const { mode } = this.props;
-  //
-  //   // promptHolder class is used to wrap up inputs:
-  //   // we don't want inputs to fill the entire scrollable container,
-  //   // but instead we want inputs to fit in the first view,
-  //   // so we calculate the maximum space inputs need
-  //   try {
-  //     if (
-  //       configuration?.maxWidth &&
-  //       getComputedStyle(document.documentElement).getPropertyValue('--pie-prompt-holder-max-width') !==
-  //         configuration?.maxWidth
-  //     ) {
-  //       document.documentElement.style.setProperty(
-  //         '--pie-prompt-holder-max-width',
-  //         mode === 'inline' ? `calc(${configuration.maxWidth} - 340px)` : configuration.maxWidth,
-  //       );
-  //     }
-  //   } catch (e) {
-  //     console.log(e.toString());
-  //   }
-  // }
-  render() {
-    const {
-      mode,
-      secondary,
-      children,
-      classes,
-      dimensions
-    } = this.props;
-    const {
-      minHeight,
-      minWidth,
-      maxHeight,
-      maxWidth
-    } = dimensions || {};
-    const configuration = this.getConfiguration();
-    let hasSettingsPanel = Object.entries(configuration || {}).some(([, obj]) => !!(obj != null && obj.settings)); // ebsr has configuration.partA and configuration.partB
-    // because we might have nested configuration for other item types as well, let's add this simple regex to check values for settings
-
-    if (!hasSettingsPanel) {
-      try {
-        var _JSON$stringify, _JSON$stringify$match;
-
-        hasSettingsPanel = (_JSON$stringify = JSON.stringify(configuration)) == null ? void 0 : (_JSON$stringify$match = _JSON$stringify.match(/settings":true/)) == null ? void 0 : _JSON$stringify$match.length;
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e.toString());
-      }
-    }
-
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classes.container,
-      style: {
-        minHeight,
-        minWidth,
-        maxHeight,
-        maxWidth
-      }
-    }, mode === 'inline' && /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.flow, classes.contentContainer)
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.configContainer, 'design-container')
-    }, children), hasSettingsPanel && /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.settingsContainer, 'settings-container')
-    }, secondary)), mode === 'tabbed' && hasSettingsPanel && /*#__PURE__*/React__default.createElement(Tabs$1, {
-      onChange: this.onTabsChange,
-      contentClassName: classes.contentContainer,
-      indicatorColor: "primary"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      title: "Design",
-      className: "design-container"
-    }, children), /*#__PURE__*/React__default.createElement("div", {
-      title: "Settings",
-      className: "settings-container"
-    }, secondary)), mode === 'tabbed' && !hasSettingsPanel && /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.contentContainer, 'design-container')
-    }, children));
-  }
-
-}
-
-RawLayoutContents.propTypes = {
-  mode: PropTypes.oneOf(['tabbed', 'inline']),
-  secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  classes: PropTypes.object,
-  dimensions: PropTypes.object
-};
-
-const styles$2 = theme => ({
-  flow: {
-    display: 'flex',
-    justifyContent: 'space-between'
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative'
-  },
-  contentContainer: {
-    padding: `${theme.spacing.unit * 2}px 0`
-  },
-  configContainer: {
-    flex: '1'
-  },
-  settingsContainer: {
-    marginLeft: theme.spacing.unit * 2
-  }
-});
-
-var LayoutContents = withStyles$1(styles$2)(RawLayoutContents);
-
-class SettingsBox extends React__default.Component {
-  render() {
-    const {
-      classes,
-      className,
-      children
-    } = this.props;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: classNames(classes.settingsBox, className)
-    }, children);
-  }
-
-}
-SettingsBox.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
-};
-SettingsBox.defaultProps = {};
-
-const styles$1 = theme => ({
-  settingsBox: {
-    backgroundColor: theme.palette.background.paper,
-    border: `2px solid ${theme.palette.grey[200]}`,
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-    minWidth: '275px',
-    maxWidth: '300px',
-    padding: '20px 4px 4px 20px',
-    zIndex: 99
-  }
-});
-
-var SettingsBox$1 = withStyles(styles$1)(SettingsBox);
-
-const styles = {
-  extraCSSRules: {}
-};
-
-class MeasuredConfigLayout extends AppendCSSRules {
-  constructor(...props) {
-    super(...props);
-
-    this.onResize = contentRect => {
-      const {
-        bounds
-      } = contentRect;
-      const {
-        sidePanelMinWidth,
-        dimensions
-      } = this.props;
-      const {
-        maxWidth
-      } = dimensions || {};
-      const layoutMode = bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
-      this.setState({
-        layoutMode
-      });
-    };
-
-    this.state = {
-      layoutMode: undefined
-    };
-  }
-
-  render() {
-    return /*#__PURE__*/React__default.createElement(Measure, {
-      bounds: true,
-      onResize: this.onResize
-    }, ({
-      measureRef
-    }) => {
-      const {
-        children,
-        settings,
-        hideSettings,
-        dimensions,
-        classes
-      } = this.props;
-      const {
-        layoutMode
-      } = this.state;
-      const settingsPanel = layoutMode === 'inline' ? /*#__PURE__*/React__default.createElement(SettingsBox$1, {
-        className: "settings-box"
-      }, settings) : settings;
-      const secondaryContent = hideSettings ? null : settingsPanel;
-      const finalClass = classNames('main-container', classes.extraCSSRules);
-      return /*#__PURE__*/React__default.createElement("div", {
-        ref: measureRef,
-        className: finalClass
-      }, /*#__PURE__*/React__default.createElement(LayoutContents, {
-        mode: layoutMode,
-        secondary: secondaryContent,
-        dimensions: dimensions
-      }, children));
-    });
-  }
-
-}
-
-MeasuredConfigLayout.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
-  className: PropTypes.string,
-  classes: PropTypes.object,
-  dimensions: PropTypes.object,
-  settings: PropTypes.element,
-  sidePanelMinWidth: PropTypes.number,
-  hideSettings: PropTypes.bool
-};
-MeasuredConfigLayout.defaultProps = {
-  sidePanelMinWidth: 1135,
-  hideSettings: false,
-  dimensions: {}
-};
-const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ConfigLayout: ConfigLayout,
-  LayoutContents: LayoutContents
-});
-
-/**
- * Add value to every model.choices.
- * @param {Object} model the model to normalize
- * @return {Object} the updated model
- */
-
-const normalizeChoices = model => {
-  const choices = model.choices.map((c, index) => {
-    if (!c.value) {
-      c.value = `${index}`;
-    }
-
-    return c;
-  });
-  return _extends({}, model, {
-    choices
-  });
-};
-/**
- * Find the first available index.
- * @param {string[]} values
- * @param {number} index
- * @return {string}
- */
-
-const firstAvailableIndex = (values, index) => {
-  if (includes(values, `${index}`)) {
-    return firstAvailableIndex(values, index + 1);
-  } else {
-    return `${index}`;
-  }
-};
-
-var choiceUtils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  firstAvailableIndex: firstAvailableIndex,
-  normalizeChoices: normalizeChoices
-});
-
-const withStatefulModel = Component => {
-  class Stateful extends React__default.Component {
-    constructor(props) {
-      super(props);
-
-      this.onChange = model => {
-        this.setState({
-          model
-        }, () => {
-          this.props.onChange(this.state.model);
-        });
-      };
-
-      this.state = {
-        model: props.model
-      };
-    }
-
-    UNSAFE_componentWillReceiveProps(props) {
-      this.setState({
-        model: props.model
-      });
-    }
-
-    render() {
-      return /*#__PURE__*/React__default.createElement(Component, {
-        model: this.state.model,
-        onChange: this.onChange
-      });
-    }
-
-  }
-
-  Stateful.propTypes = {
-    model: PropTypes.object.isRequired,
-    onChange: PropTypes.func.isRequired
-  };
-  return Stateful;
-};
-
-const Toggle = withStyles(theme => ({
-  toggle: {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between'
-  },
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: theme.typography.fontSize,
-    paddingTop: theme.spacing.unit * 2
-  },
-  checkedThumb: {
-    color: `${color.tertiary()} !important`
-  },
-  checkedBar: {
-    backgroundColor: `${color.tertiaryLight()} !important`
-  }
-}))(({
-  checked,
-  disabled,
-  label,
-  toggle,
-  classes
-}) => /*#__PURE__*/React__default.createElement("div", {
-  className: classes.toggle
-}, /*#__PURE__*/React__default.createElement(InputLabel, {
-  className: classes.label
-}, label), /*#__PURE__*/React__default.createElement(Switch, {
-  classes: {
-    checked: classNames(classes.checkedThumb),
-    bar: classNames({
-      [classes.checkedBar]: checked
-    })
-  },
-  checked: checked,
-  disabled: disabled,
-  onChange: e => toggle(e.target.checked)
-})));
-Toggle.propTypes = {
-  checked: PropTypes.bool,
-  label: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired
-};
-
-const DisplaySize = withStyles(theme => ({
-  displaySize: {
-    display: 'flex',
-    paddingTop: theme.spacing.unit
-  }
-}))(({
-  size,
-  label,
-  classes,
-  onChange
-}) => {
-  const updateSize = (key, v) => {
-    onChange(_extends({}, size, {
-      [key]: v
-    }));
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Typography, null, label), /*#__PURE__*/React__default.createElement("div", {
-    className: classes.displaySize
-  }, /*#__PURE__*/React__default.createElement(NumberTextField$1, {
-    label: "Width",
-    type: "number",
-    variant: "outlined",
-    value: size.width,
-    min: 150,
-    max: 1000,
-    onChange: (e, v) => updateSize('width', v)
-  }), /*#__PURE__*/React__default.createElement(NumberTextField$1, {
-    label: "Height",
-    type: "number",
-    variant: "outlined",
-    min: 150,
-    max: 1000,
-    value: size.height,
-    onChange: (e, v) => updateSize('height', v)
-  })));
-});
-DisplaySize.propTypes = {
-  size: PropTypes.shape({
-    width: PropTypes.number.isRequired,
-    height: PropTypes.number.isRequired
-  }).isRequired,
-  label: PropTypes.string.isRequired,
-  onChange: PropTypes.func
-};
-
-var SettingsRadioLabel = withStyles(theme => ({
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: theme.typography.fontSize - 2,
-    left: '-5px',
-    position: 'relative'
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`
-  }
-}))(({
-  label,
-  value,
-  checked,
-  onChange,
-  classes
-}) => /*#__PURE__*/React__default.createElement(FormControlLabel, {
-  value: value,
-  classes: {
-    label: classes.label
-  },
-  control: /*#__PURE__*/React__default.createElement(Radio$1, {
-    className: classes.customColor,
-    checked: checked,
-    onChange: onChange
-  }),
-  label: label
-}));
-
-const _excluded = ["isConfigProperty"];
-const log = debug('pie-lib:config-ui:settings:panel');
-const labelValue = {
-  label: PropTypes.string,
-  value: PropTypes.string
-};
-const baseTypes = {
-  label: PropTypes.string,
-  value: PropTypes.string,
-  onChange: PropTypes.func
-};
-
-const CheckboxChoice = ({
-  label,
-  value,
-  onChange
-}) => {
-  return /*#__PURE__*/React__default.createElement(Checkbox$1, {
-    checked: value,
-    label: label,
-    onChange: event => {
-      onChange(event.target.checked);
-    }
-  });
-};
-
-CheckboxChoice.propTypes = {
-  label: PropTypes.string,
-  value: PropTypes.bool,
-  onChange: PropTypes.func
-};
-
-const Radio = ({
-  classes,
-  label,
-  value,
-  onChange,
-  choices
-}) => {
-  return /*#__PURE__*/React__default.createElement(NChoice, {
-    className: classes.radioSettings,
-    direction: "horizontal",
-    customLabel: SettingsRadioLabel,
-    value: value,
-    header: label,
-    opts: choices,
-    onChange: onChange
-  });
-};
-
-Radio.propTypes = _extends({}, baseTypes, {
-  choices: PropTypes.arrayOf(PropTypes.shape(labelValue))
-});
-const StyledRadio = withStyles(theme => ({
-  radioSettings: {
-    marginTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
-    width: '100%',
-    '& > label': {
-      color: 'rgba(0, 0, 0, 0.89)',
-      transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px'
-    },
-    '& > div': {
-      marginTop: theme.spacing.unit * 2.5
-    }
-  },
-  label: {
-    display: 'none'
-  }
-}))(Radio);
-const Dropdown = withStyles(theme => ({
-  label: {
-    margin: 0,
-    fontSize: theme.typography.fontSize
-  },
-  wrapper: {
-    marginTop: theme.spacing.unit / 2,
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`
-  }
-}))(({
-  classes,
-  label,
-  value,
-  onChange,
-  choices: _choices = []
-}) => {
-  const getItemLabel = l => typeof l === 'string' ? l : l.label;
-
-  const getItemValue = l => typeof l === 'string' ? l : l.value;
-
-  return /*#__PURE__*/React__default.createElement("div", null, label && /*#__PURE__*/React__default.createElement("p", {
-    className: classes.label
-  }, label), /*#__PURE__*/React__default.createElement(Select, {
-    className: classes.wrapper,
-    value: value || _choices && _choices[0],
-    onChange: ({
-      target
-    }) => onChange(target.value),
-    input: /*#__PURE__*/React__default.createElement(MaterialInput, {
-      id: `dropdown-${label}`
-    }),
-    disableUnderline: true
-  }, _choices.map((l, index) => /*#__PURE__*/React__default.createElement(MenuItem, {
-    key: index,
-    value: getItemValue(l)
-  }, getItemLabel(l)))));
-});
-Dropdown.propTypes = _extends({}, baseTypes, {
-  choices: PropTypes.arrayOf(PropTypes.string)
-});
-const TextField = withStyles(theme => ({
-  field: {
-    marginRight: theme.spacing.unit * 3,
-    marginTop: theme.spacing.unit
-  }
-}))(({
-  classes,
-  label
-}) => {
-  return /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.field
-  }, label);
-});
-const NumberField = withStyles(theme => ({
-  field: {
-    width: '35%',
-    marginRight: theme.spacing.unit * 3,
-    marginTop: theme.spacing.unit
-  },
-  wrapper: {
-    marginTop: theme.spacing.unit / 2,
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`
-  }
-}))(({
-  classes,
-  label,
-  value,
-  onChange: _onChange = () => {},
-  suffix,
-  min,
-  max
-}) => {
-  return /*#__PURE__*/React__default.createElement(NumberTextField$1, {
-    label: label || 'Label',
-    value: value,
-    max: max,
-    min: min,
-    onChange: (ev, value) => _onChange(value),
-    suffix: suffix,
-    className: classes.field,
-    showErrorWhenOutsideRange: true,
-    inputClassName: classes.wrapper,
-    disableUnderline: true,
-    classes: classes
-  });
-});
-NumberField.propTypes = _extends({}, baseTypes, {
-  classes: PropTypes.object,
-  suffix: PropTypes.string,
-  min: PropTypes.number,
-  max: PropTypes.number,
-  value: PropTypes.number
-});
-TextField.propTypes = _extends({}, baseTypes);
-
-const ToggleWrapper = ({
-  disabled,
-  label,
-  value,
-  onChange
-}) => /*#__PURE__*/React__default.createElement(Toggle, {
-  label: label,
-  checked: !!value,
-  disabled: !!disabled,
-  toggle: onChange
-});
-
-ToggleWrapper.propTypes = _extends({}, baseTypes, {
-  value: PropTypes.bool
-});
-const tagMap = {
-  toggle: ToggleWrapper,
-  radio: StyledRadio,
-  dropdown: Dropdown,
-  numberField: NumberField,
-  checkbox: CheckboxChoice,
-  textField: TextField
-};
-const Group = withStyles(theme => ({
-  group: {
-    margin: `0 0 ${theme.spacing.unit * 2}px 0`
-  },
-  groupHeader: {
-    color: '#495B8F',
-    fontSize: theme.typography.fontSize + 2,
-    fontWeight: 600,
-    marginBottom: theme.spacing.unit
-  },
-  numberFields: {
-    fontSize: theme.typography.fontSize,
-    marginBottom: 0
-  }
-}))(props => {
-  const {
-    classes,
-    model,
-    label,
-    group,
-    configuration,
-    onChange
-  } = props;
-  /**
-   * @param group - the group of settings
-   * @param key - the key(or path) to be used to set or get from model or configuration
-   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
-   * @returns tag that corresponds to element type */
-
-  const getTag = (group, key, innerKey) => {
-    const _get = get(group, innerKey || key),
-          {
-      isConfigProperty
-    } = _get,
-          properties = _objectWithoutPropertiesLoose(_get, _excluded);
-
-    const value = isConfigProperty ? get(configuration, key) : get(model, key);
-
-    const tagProps = _extends({}, properties, {
-      key,
-      value
-    });
-
-    const Tag = tagMap[tagProps.type];
-    return /*#__PURE__*/React__default.createElement(Tag, _extends({
-      key: key
-    }, tagProps, {
-      onChange: v => onChange(key, v, isConfigProperty)
-    }));
-  };
-
-  const content = (group, key) => {
-    const currentGroup = group[key];
-
-    if (!currentGroup) {
-      return null;
-    }
-
-    const {
-      type,
-      label,
-      fields,
-      choices
-    } = currentGroup;
-
-    if (type === 'numberFields') {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: `numberField-${label}`
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: classes.numberFields
-      }, label), Object.keys(fields).map(fieldKey => {
-        return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
-      }));
-    }
-
-    if (type === 'checkboxes') {
-      return /*#__PURE__*/React__default.createElement("div", {
-        key: `checkbox-${label}`
-      }, /*#__PURE__*/React__default.createElement("p", null, label), Object.keys(choices).map(choiceKey => {
-        return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
-      }));
-    } // if type is toggle, radio, dropdown, numberField or numberText
-
-
-    return getTag(group, key);
-  };
-
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.group
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classes.groupHeader
-  }, label), Object.keys(group).map(key => {
-    return content(group, key);
-  }));
-});
-class Panel extends React__default.Component {
-  constructor(...args) {
-    super(...args);
-
-    this.change = (key, value, isConfigProperty = false) => {
-      log('[changeModel]', key, value);
-      const {
-        onChangeModel,
-        onChangeConfiguration
-      } = this.props;
-
-      const model = _extends({}, this.props.model);
-
-      const configuration = _extends({}, this.props.configuration);
-
-      if (isConfigProperty) {
-        set(configuration, key, value);
-        onChangeConfiguration(configuration, key);
-      } else {
-        set(model, key, value);
-        onChangeModel(model, key);
-      }
-    };
-  }
-
-  render() {
-    const {
-      groups,
-      model,
-      configuration,
-      modal
-    } = this.props;
-    log('render:', model);
-    const renderedGroups = Object.keys(groups || {}).map(group => {
-      const showGroup = Object.entries(groups[group]).some(([, propVal]) => !!propVal);
-
-      if (showGroup) {
-        return /*#__PURE__*/React__default.createElement(Group, {
-          label: group,
-          key: group,
-          model: model,
-          configuration: configuration,
-          group: groups[group],
-          onChange: this.change
-        });
-      }
-
-      return null;
-    });
-    return /*#__PURE__*/React__default.createElement("div", null, renderedGroups, modal);
-  }
-
-}
-Panel.propTypes = {
-  model: PropTypes.object,
-  configuration: PropTypes.object,
-  groups: PropTypes.object,
-  onChangeModel: PropTypes.func,
-  onChangeConfiguration: PropTypes.func,
-  modal: PropTypes.object
-};
-Panel.defaultProps = {
-  onChangeModel: () => {},
-  onChangeConfiguration: () => {}
-};
-
-const textField = (label, isConfigProperty = true) => ({
-  label,
-  type: 'textField',
-  isConfigProperty
-});
-const toggle = (label, isConfigProperty = false, disabled = false) => ({
-  type: 'toggle',
-  label,
-  isConfigProperty,
-  disabled
-});
-
-const toChoice = opt => {
-  if (typeof opt === 'string') {
-    return {
-      label: opt,
-      value: opt
-    };
-  } else {
-    return opt;
-  }
-};
-
-const radio = function radio() {
-  const args = Array.prototype.slice.call(arguments);
-  const [label, choices, isConfigProperty = false] = args;
-  return {
-    type: 'radio',
-    label,
-    choices: choices && choices.map(o => toChoice(o)),
-    isConfigProperty
-  };
-};
-const dropdown = (label, choices, isConfigProperty = false) => {
-  return {
-    type: 'dropdown',
-    label,
-    choices,
-    isConfigProperty
-  };
-};
-const numberField = (label, options, isConfigProperty = false) => _extends({}, options, {
-  label,
-  type: 'numberField',
-  isConfigProperty
-});
-const numberFields = (label, fields, isConfigProperty = false) => {
-  Object.keys(fields).map(key => {
-    fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
-  });
-  return {
-    type: 'numberFields',
-    label,
-    fields
-  };
-};
-const checkbox = (label, settings, isConfigProperty = false) => _extends({}, settings, {
-  label,
-  type: 'checkbox',
-  isConfigProperty
-});
-const checkboxes = (label, choices, isConfigProperty = false) => {
-  Object.keys(choices).map(key => {
-    choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
-  });
-  return {
-    type: 'checkboxes',
-    label,
-    choices
-  };
-};
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Panel: Panel,
-  checkbox: checkbox,
-  checkboxes: checkboxes,
-  dropdown: dropdown,
-  numberField: numberField,
-  numberFields: numberFields,
-  radio: radio,
-  textField: textField,
-  toggle: toggle
-});
-
-export { alertDialog as AlertDialog, Checkbox$1 as Checkbox, index$2 as ChoiceConfiguration, DisplaySize, index$4 as FeedbackConfig, FeedbackSelector$1 as FeedbackSelector, formSection as FormSection, Help, Input, InputCheckbox, InputRadio, InputSwitch, Langs, LanguageControls, MuiBox, NChoice, NumberTextField$1 as NumberTextField, numberTextFieldCustom as NumberTextFieldCustom, Tabs$1 as Tabs, index$3 as TagsInput, Toggle, twoChoice as TwoChoice, choiceUtils, buildDefaults as feedbackConfigDefaults, index$1 as layout, index as settings, withStatefulModel };
-//# sourceMappingURL=index.js.map