@pie-lib/config-ui 11.25.1-next.0 → 11.26.1

package/esm/index.js

@@ -0,0 +1,3191 @@
+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 ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+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 HelpIcon from '@material-ui/icons/Help';
+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 Remove from '@material-ui/icons/Remove';
+import Add from '@material-ui/icons/Add';
+import * as math from 'mathjs';
+import uniq from 'lodash/uniq';
+import Chip from '@material-ui/core/Chip';
+import ActionDelete from '@material-ui/icons/Delete';
+import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
+import Menu from '@material-ui/core/Menu';
+import ActionFeedback from '@material-ui/icons/Feedback';
+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);
+
+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));
+
+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);
+
+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);
+
+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