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
