@micromag/fields 0.3.797 → 0.3.800

package/es/index.js

@@ -20,6 +20,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { createNullableOnChange, isMessage, getFileName, getStyleFromBox, getStyleFromColor, getFontFamilyFromFont, getGridLayoutName, getShadowCoords, getColorAsString, getStyleFromLink, getStyleFromHighlight, getStyleFromText } from '@micromag/core/utils';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight';
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons/faSlidersH';
+import Switch from 'rc-switch';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faBars } from '@fortawesome/free-solid-svg-icons/faBars';
 import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
@@ -30,10 +31,10 @@ import isFunction from 'lodash/isFunction';
 import { ReactSortable } from 'react-sortablejs';
 import get from 'lodash/get';
 import MediaGallery from '@micromag/media-gallery';
+import isArray from 'lodash/isArray';
+import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
 import Fuse from 'fuse.js';
-import isEmpty from 'lodash/isEmpty';
-import isArray from 'lodash/isArray';
 import Slider from 'rc-slider';
 import tinycolor from 'tinycolor2';
 import { SketchPicker } from 'react-color';
@@ -55,7 +56,6 @@ import Select from 'react-select';
 import { CKEditor } from '@ckeditor/ckeditor5-react';
 import { getCSRFHeaders } from '@folklore/fetch';
 import { useUppyConfig } from '@panneau/uppy';
-import Switch from 'rc-switch';
 import AsyncCreatableSelect from 'react-select/async-creatable';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
@@ -172,6 +172,32 @@ var alignment = {
   fields: [alignHorizontal, alignVertical]
 };
 
+var alternative = {
+  id: 'alternative',
+  component: 'alternative'
+};
+
+var alternatives = {
+  id: 'alternatives',
+  isList: true,
+  fields: [{
+    name: 'audio',
+    type: 'audio-element',
+    withToggle: true,
+    label: defineMessage({
+      id: "hzt68m",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio"
+      }]
+    }),
+    defaultValue: {
+      autoPlay: true,
+      withControls: true
+    }
+  }]
+};
+
 var answer = {
   id: 'answer',
   component: 'field-with-form',
@@ -1301,7 +1327,7 @@ var entriesWithVisual = _objectSpread(_objectSpread({}, entries), {}, {
 var entry = {
   id: 'entry',
   component: 'field-with-form',
-  labelPath: 'title.body',
+  labelPath: ['title.body', 'description.body'],
   fields: [{
     name: 'title',
     type: 'heading-element',
@@ -2880,6 +2906,8 @@ var allFields = /*#__PURE__*/Object.freeze({
     alignHorizontal: alignHorizontal,
     alignVertical: alignVertical,
     alignment: alignment,
+    alternative: alternative,
+    alternatives: alternatives,
     answer: answer,
     answers: answers,
     audio: audio,
@@ -3000,9 +3028,9 @@ var getSelectOptions = function getSelectOptions(options) {
   });
 };
 
-var styles$J = {"container":"micromag-fields-radios-container","item":"micromag-fields-radios-item"};
+var styles$K = {"container":"micromag-fields-radios-container","item":"micromag-fields-radios-item"};
 
-var propTypes$1A = {
+var propTypes$1B = {
   name: PropTypes.string,
   value: PropTypes.string,
   options: PropTypes$1.selectOptions,
@@ -3013,7 +3041,7 @@ var propTypes$1A = {
   onChange: PropTypes.func,
   uncheckable: PropTypes.bool
 };
-var defaultProps$1A = {
+var defaultProps$1B = {
   name: null,
   value: null,
   options: [],
@@ -3038,14 +3066,14 @@ var Radios = function Radios(_ref) {
     return getSelectOptions(options);
   }, [options]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', 'btn-group-toggle', styles$J.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', 'btn-group-toggle', styles$K.container, _defineProperty({}, className, className !== null)]),
     "data-toggle": "buttons"
   }, finalOptions.map(function (_ref3, index) {
     var optionValue = _ref3.value,
       label = _ref3.label;
     return /*#__PURE__*/React.createElement("label", {
       key: "radio-".concat(optionValue, "-").concat(index + 1),
-      className: classNames(['btn', styles$J.item, withBackground ? 'btn-secondary' : 'btn-outline-secondary', _defineProperty(_defineProperty({
+      className: classNames(['btn', styles$K.item, withBackground ? 'btn-secondary' : 'btn-outline-secondary', _defineProperty(_defineProperty({
         active: optionValue === value
       }, activeClassName, activeClassName !== null && optionValue === value), buttonClassName, buttonClassName !== null)])
     }, /*#__PURE__*/React.createElement("input", {
@@ -3068,18 +3096,18 @@ var Radios = function Radios(_ref) {
     }), ' ', /*#__PURE__*/React.createElement(Label, null, label));
   }));
 };
-Radios.propTypes = propTypes$1A;
-Radios.defaultProps = defaultProps$1A;
+Radios.propTypes = propTypes$1B;
+Radios.defaultProps = defaultProps$1B;
 
-var styles$I = {"container":"micromag-fields-border-style-container","button":"micromag-fields-border-style-button","type":"micromag-fields-border-style-type","borders":"micromag-fields-border-style-borders"};
+var styles$J = {"container":"micromag-fields-border-style-container","button":"micromag-fields-border-style-button","type":"micromag-fields-border-style-type","borders":"micromag-fields-border-style-borders"};
 
-var propTypes$1z = {
+var propTypes$1A = {
   types: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1z = {
+var defaultProps$1A = {
   types: [{
     name: '300x200',
     width: 300,
@@ -3107,7 +3135,7 @@ var AdFormatField = function AdFormatField(_ref) {
       return {
         value: type,
         label: /*#__PURE__*/React.createElement("div", {
-          className: styles$I.type
+          className: styles$J.type
         }, /*#__PURE__*/React.createElement("div", {
           style: {
             width: type.width / 10,
@@ -3118,22 +3146,22 @@ var AdFormatField = function AdFormatField(_ref) {
       };
     }),
     value: value || (types ? types[0] : null),
-    className: classNames([styles$I.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$I.button,
+    className: classNames([styles$J.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$J.button,
     onChange: onChange
   });
 };
-AdFormatField.propTypes = propTypes$1z;
-AdFormatField.defaultProps = defaultProps$1z;
+AdFormatField.propTypes = propTypes$1A;
+AdFormatField.defaultProps = defaultProps$1A;
 
-var styles$H = {"icon":"micromag-fields-align-horizontal-icon","left":"micromag-fields-align-horizontal-left","middle":"micromag-fields-align-horizontal-middle","right":"micromag-fields-align-horizontal-right"};
+var styles$I = {"icon":"micromag-fields-align-horizontal-icon","left":"micromag-fields-align-horizontal-left","middle":"micromag-fields-align-horizontal-middle","right":"micromag-fields-align-horizontal-right"};
 
-var propTypes$1y = {
+var propTypes$1z = {
   value: PropTypes.oneOf(['left', 'middle', 'right']),
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1y = {
+var defaultProps$1z = {
   value: null,
   className: null,
   onChange: null
@@ -3143,7 +3171,7 @@ var AlignHorizontal = function AlignHorizontal(_ref) {
     className = _ref.className,
     onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$H.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$I.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'align-items-center'])
   }, /*#__PURE__*/React.createElement(Radios, {
@@ -3151,20 +3179,20 @@ var AlignHorizontal = function AlignHorizontal(_ref) {
       return {
         value: type,
         label: /*#__PURE__*/React.createElement("div", {
-          className: classNames([styles$H.icon, styles$H[type]])
+          className: classNames([styles$I.icon, styles$I[type]])
         }, /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null), /*#__PURE__*/React.createElement("div", null))
       };
     }),
     value: value !== null ? value : null,
-    className: classNames([styles$H.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$H.button,
+    className: classNames([styles$I.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$I.button,
     onChange: onChange
   })));
 };
-AlignHorizontal.propTypes = propTypes$1y;
-AlignHorizontal.defaultProps = defaultProps$1y;
+AlignHorizontal.propTypes = propTypes$1z;
+AlignHorizontal.defaultProps = defaultProps$1z;
 
-var styles$G = {};
+var styles$H = {};
 
 var icons$1 = {
   top: function top(props) {
@@ -3177,13 +3205,13 @@ var icons$1 = {
     return /*#__PURE__*/React.createElement("div", props, "bottom");
   }
 };
-var propTypes$1x = {
+var propTypes$1y = {
   value: PropTypes.oneOf(['top', 'bottom', 'middle']),
   defaultValue: PropTypes.oneOf(['top', 'bottom', 'middle']),
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1x = {
+var defaultProps$1y = {
   value: null,
   defaultValue: null,
   className: null,
@@ -3199,7 +3227,7 @@ var AlignVertical = function AlignVertical(_ref) {
     onChange(newVal);
   }, [finalValue]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$G.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$H.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['d-flex', 'align-items-center', 'mb-2'])
   }, /*#__PURE__*/React.createElement(Radios, {
@@ -3208,41 +3236,41 @@ var AlignVertical = function AlignVertical(_ref) {
       return {
         value: type,
         label: /*#__PURE__*/React.createElement("div", {
-          className: styles$G.type
+          className: styles$H.type
         }, /*#__PURE__*/React.createElement(Icon, {
-          className: styles$G.icon
+          className: styles$H.icon
         }))
       };
     }),
     value: finalValue !== null ? finalValue : null,
-    className: classNames([styles$G.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$G.button,
+    className: classNames([styles$H.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$H.button,
     onChange: onAlignChange
   })));
 };
-AlignVertical.propTypes = propTypes$1x;
-AlignVertical.defaultProps = defaultProps$1x;
+AlignVertical.propTypes = propTypes$1y;
+AlignVertical.defaultProps = defaultProps$1y;
 
-var styles$F = {"label":"micromag-fields-alignment-label"};
+var styles$G = {"label":"micromag-fields-alignment-label"};
 
 var icons = {
   horizontal: {
     left: function left(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowLeft,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     },
     middle: function middle(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faDotCircle,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     },
     right: function right(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowRight,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     }
   },
@@ -3250,24 +3278,24 @@ var icons = {
     top: function top(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowUp,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     },
     middle: function middle(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faDotCircle,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     },
     bottom: function bottom(props) {
       return /*#__PURE__*/React.createElement("div", props, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowDown,
-        className: styles$F.icon
+        className: styles$G.icon
       }));
     }
   }
 };
-var propTypes$1w = {
+var propTypes$1x = {
   alignment: PropTypes.shape({
     horizontal: PropTypes.oneOf(['left', 'right', 'middle']),
     vertical: PropTypes.oneOf(['top', 'bottom', 'middle'])
@@ -3279,7 +3307,7 @@ var propTypes$1w = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1w = {
+var defaultProps$1x = {
   alignment: {
     horizontal: 'middle',
     vertical: 'middle'
@@ -3318,13 +3346,13 @@ var Alignment = function Alignment(_ref) {
     onChange(nextValue);
   }, [value, onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$F.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$G.container, _defineProperty({}, className, className !== null)])
   }, Object.keys(alignment).map(function (axis) {
     return /*#__PURE__*/React.createElement("div", {
       key: axis,
       className: classNames(['d-flex', 'align-items-center', 'mb-2'])
     }, /*#__PURE__*/React.createElement("small", {
-      className: styles$F.label
+      className: styles$G.label
     }, axis === 'horizontal' ? /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "xTJlyi",
       defaultMessage: [{
@@ -3343,29 +3371,29 @@ var Alignment = function Alignment(_ref) {
         return {
           value: type,
           label: /*#__PURE__*/React.createElement("div", {
-            className: styles$F.type
+            className: styles$G.type
           }, /*#__PURE__*/React.createElement(Icon, {
-            className: styles$F.icon
+            className: styles$G.icon
           }))
         };
       }),
       value: value !== null ? value[axis] : null,
-      className: classNames([styles$F.container, _defineProperty({}, className, className !== null)]),
-      buttonClassName: styles$F.button,
+      className: classNames([styles$G.container, _defineProperty({}, className, className !== null)]),
+      buttonClassName: styles$G.button,
       onChange: axis === 'horizontal' ? onHorizontalAlignChange : onVerticalAlignChange
     }));
   }));
 };
-Alignment.propTypes = propTypes$1w;
-Alignment.defaultProps = defaultProps$1w;
+Alignment.propTypes = propTypes$1x;
+Alignment.defaultProps = defaultProps$1x;
 
-var styles$E = {"container":"micromag-fields-field-errors-container","error":"micromag-fields-field-errors-error"};
+var styles$F = {"container":"micromag-fields-field-errors-container","error":"micromag-fields-field-errors-error"};
 
-var propTypes$1v = {
+var propTypes$1w = {
   errors: PropTypes$1.errors,
   className: PropTypes.string
 };
-var defaultProps$1v = {
+var defaultProps$1w = {
   errors: null,
   className: null
 };
@@ -3373,23 +3401,23 @@ var FieldErrors$1 = function FieldErrors(_ref) {
   var errors = _ref.errors,
     className = _ref.className;
   return errors !== null && errors.length > 0 ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$E.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$F.container, _defineProperty({}, className, className !== null)])
   }, errors.map(function (error) {
     return /*#__PURE__*/React.createElement("div", {
       key: "error-".concat(error),
-      className: classNames(['invalid-feedback', styles$E.error])
+      className: classNames(['invalid-feedback', styles$F.error])
     }, error);
   })) : null;
 };
-FieldErrors$1.propTypes = propTypes$1v;
-FieldErrors$1.defaultProps = defaultProps$1v;
+FieldErrors$1.propTypes = propTypes$1w;
+FieldErrors$1.defaultProps = defaultProps$1w;
 
-var propTypes$1u = {
+var propTypes$1v = {
   children: PropTypes$1.label,
   muted: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$1u = {
+var defaultProps$1v = {
   children: null,
   muted: true,
   className: null
@@ -3405,8 +3433,39 @@ var FieldErrors = function FieldErrors(_ref) {
     }, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, children));
 };
-FieldErrors.propTypes = propTypes$1u;
-FieldErrors.defaultProps = defaultProps$1u;
+FieldErrors.propTypes = propTypes$1v;
+FieldErrors.defaultProps = defaultProps$1v;
+
+var styles$E = {"container":"micromag-fields-toggle-container"};
+
+var propTypes$1u = {
+  value: PropTypes.bool,
+  defaultValue: PropTypes.bool,
+  className: PropTypes.string,
+  onChange: PropTypes.func
+};
+var defaultProps$1u = {
+  value: null,
+  defaultValue: null,
+  className: null,
+  onChange: null
+};
+var ToggleField = function ToggleField(_ref) {
+  var value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    className = _ref.className,
+    onChange = _ref.onChange;
+  var finalValue = value === null && (defaultValue === true || defaultValue === 'true') ? true : value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$E.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(Switch, {
+    checked: finalValue !== null ? finalValue : false,
+    onChange: onChange
+  }));
+};
+ToggleField.propTypes = propTypes$1u;
+ToggleField.defaultProps = defaultProps$1u;
+ToggleField.isHorizontal = true;
 
 var styles$D = {"resetButton":"micromag-fields-field-row-resetButton","colLabel":"micromag-fields-field-row-colLabel","colValue":"micromag-fields-field-row-colValue","colButtonWidth":"micromag-fields-field-row-colButtonWidth","colMinWidth":"micromag-fields-field-row-colMinWidth","settingsButton":"micromag-fields-field-row-settingsButton"};
 
@@ -3414,6 +3473,10 @@ var propTypes$1t = {
   label: PropTypes$1.label,
   errors: PropTypes$1.errors,
   help: PropTypes$1.label,
+  value: PropTypes.any,
+  // eslint-disable-line react/forbid-prop-types
+  defaultValue: PropTypes.any,
+  // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
   isSection: PropTypes.bool,
   isHorizontal: PropTypes.bool,
@@ -3421,12 +3484,14 @@ var propTypes$1t = {
   withoutLabel: PropTypes.bool,
   withoutCaret: PropTypes.bool,
   withSettings: PropTypes.bool,
+  withToggle: PropTypes.bool,
   withForm: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   withValue: PropTypes.bool,
   buttonTheme: PropTypes$1.buttonTheme,
   buttonOutline: PropTypes.bool,
   gotoSettings: PropTypes.func,
   gotoForm: PropTypes.func,
+  onChange: PropTypes.func,
   className: PropTypes.string,
   labelClassName: PropTypes.string,
   buttonClassName: PropTypes.string
@@ -3436,18 +3501,22 @@ var defaultProps$1t = {
   errors: null,
   help: null,
   children: null,
+  value: null,
+  defaultValue: null,
   isSection: false,
   isHorizontal: false,
   isListItem: false,
   withoutLabel: false,
   withoutCaret: false,
   withSettings: false,
+  withToggle: false,
   withForm: false,
   withValue: false,
   buttonTheme: null,
   buttonOutline: false,
   gotoSettings: null,
   gotoForm: null,
+  onChange: null,
   className: null,
   labelClassName: null,
   buttonClassName: null
@@ -3457,6 +3526,8 @@ var FieldRow = function FieldRow(_ref) {
   var label = _ref.label,
     errors = _ref.errors,
     help = _ref.help,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
     children = _ref.children,
     isSection = _ref.isSection,
     isHorizontal = _ref.isHorizontal,
@@ -3464,12 +3535,14 @@ var FieldRow = function FieldRow(_ref) {
     withoutLabel = _ref.withoutLabel,
     withoutCaret = _ref.withoutCaret,
     withSettings = _ref.withSettings,
+    withToggle = _ref.withToggle,
     withForm = _ref.withForm,
     withValue = _ref.withValue,
     buttonTheme = _ref.buttonTheme,
     buttonOutline = _ref.buttonOutline,
     gotoForm = _ref.gotoForm,
     gotoSettings = _ref.gotoSettings,
+    onChange = _ref.onChange,
     className = _ref.className,
     labelClassName = _ref.labelClassName,
     buttonClassName = _ref.buttonClassName;
@@ -3494,6 +3567,7 @@ var FieldRow = function FieldRow(_ref) {
     errors: errors
   }) : null;
   var hasIndicationsUnder = helpElement !== null || errorsElement !== null;
+  var toggled = !withToggle || value !== null;
   var labelElement = label !== null ? /*#__PURE__*/React.createElement("label", {
     className: classNames((_classNames = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames, styles$D.colLabel, isHorizontal), 'col-form-label', isHorizontal || withSettings), 'form-label', !isHorizontal && !withSettings), 'col-auto', isHorizontal), "col", !isHorizontal && withSettings), 'py-0', isHorizontal), 'pt-2', isHorizontal && hasIndicationsUnder), 'me-1', isHorizontal), 'align-self-center', isHorizontal && !hasIndicationsUnder), 'fw-normal', !isSection), _defineProperty(_defineProperty(_classNames, 'fw-bold', isSection), labelClassName, labelClassName !== null)))
   }, /*#__PURE__*/React.createElement(Label, null, label)) : null;
@@ -3508,7 +3582,7 @@ var FieldRow = function FieldRow(_ref) {
     }, labelElement, /*#__PURE__*/React.createElement("span", {
       className: classNames(['col', styles$D.colValue, 'align-self-center', _defineProperty(_defineProperty({}, styles$D.colMinWidth, isListItem), styles$D.colButtonWidth, isClickable && buttonTheme !== null)])
     }, /*#__PURE__*/React.createElement("span", {
-      className: classNames(['d-flex', 'justify-content-end', 'me-1'])
+      className: classNames(['d-flex', 'justify-content-end'])
     }, children), helpElement !== null || errorsElement !== null ? /*#__PURE__*/React.createElement("span", {
       className: classNames(['d-flex', 'mt-1',
       // 'w-100',
@@ -3522,11 +3596,19 @@ var FieldRow = function FieldRow(_ref) {
       className: containerClassName
     }, rowInner);
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: containerClassName
-  }, withLabel ? withSettings ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['row', 'align-items-center', 'gx-1'])
-  }, labelElement, /*#__PURE__*/React.createElement("div", {
+  var onToggleChange = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue ? defaultValue || {} : null);
+    }
+  }, [withToggle, onChange, defaultValue]);
+  var toggleElement = withToggle ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['col-auto'])
+  }, /*#__PURE__*/React.createElement(ToggleField, {
+    value: toggled,
+    onChange: onToggleChange,
+    className: "ms-1"
+  })) : null;
+  var settingsElement = toggled && withSettings ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['col-auto'])
   }, /*#__PURE__*/React.createElement(Button, {
     className: styles$D.settingsButton,
@@ -3535,7 +3617,12 @@ var FieldRow = function FieldRow(_ref) {
     disabled: !withValue
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faSlidersH
-  })))) : labelElement : null, isClickable ? /*#__PURE__*/React.createElement(Button, {
+  }))) : null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: containerClassName
+  }, withLabel && (settingsElement !== null || toggleElement !== null) ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['row', 'align-items-center', 'gx-1'])
+  }, labelElement, settingsElement, toggleElement) : withLabel ? labelElement : null, isClickable ? /*#__PURE__*/React.createElement(Button, {
     className: classNames([styles$D.arrow, 'd-block', 'w-100', 'px-2', _defineProperty({
       'bg-dark': buttonTheme === null
     }, buttonClassName, buttonClassName !== null)]),
@@ -3551,8 +3638,8 @@ var FieldRow = function FieldRow(_ref) {
 FieldRow.propTypes = propTypes$1t;
 FieldRow.defaultProps = defaultProps$1t;
 
-var _excluded$B = ["name", "type", "component", "label", "help", "errors", "fields", "isHorizontal", "isSection", "isListItem", "withForm", "withModal", "value", "onChange", "gotoFieldForm", "closeFieldForm", "className", "labelClassName", "fieldClassName"],
-  _excluded2$3 = ["component", "fields", "settings", "withoutLabel", "withoutFieldRow", "withForm", "withModal", "isList", "canClear"];
+var _excluded$C = ["name", "type", "component", "label", "help", "errors", "fields", "isHorizontal", "isSection", "isListItem", "withForm", "withModal", "withToggle", "value", "onChange", "gotoFieldForm", "closeFieldForm", "className", "labelClassName", "fieldClassName"],
+  _excluded2$3 = ["component", "fields", "settings", "withoutLabel", "withoutFieldRow", "withForm", "withModal", "isList", "canClear", "withToggle"];
 var propTypes$1s = {
   name: PropTypes.string,
   // .isRequired,
@@ -3610,6 +3697,7 @@ var Field = function Field(_ref) {
     isListItem = _ref.isListItem,
     providedWithForm = _ref.withForm,
     providedWithModal = _ref.withModal,
+    providedWithToggle = _ref.withToggle,
     value = _ref.value,
     onChange = _ref.onChange,
     gotoFieldForm = _ref.gotoFieldForm,
@@ -3617,7 +3705,7 @@ var Field = function Field(_ref) {
     className = _ref.className,
     labelClassName = _ref.labelClassName,
     fieldClassName = _ref.fieldClassName,
-    props = _objectWithoutProperties(_ref, _excluded$B);
+    props = _objectWithoutProperties(_ref, _excluded$C);
   var fieldsManager = useFieldsManager();
   var FieldsComponent = fieldsManager.getComponent('fields');
   var _ref2 = (type !== null ? fieldsManager.getDefinition(type) || null : null) || {
@@ -3641,6 +3729,8 @@ var Field = function Field(_ref) {
     isList = _ref2$isList === void 0 ? false : _ref2$isList,
     _ref2$canClear = _ref2.canClear,
     canClear = _ref2$canClear === void 0 ? false : _ref2$canClear,
+    _ref2$withToggle = _ref2.withToggle,
+    withToggle = _ref2$withToggle === void 0 ? providedWithToggle : _ref2$withToggle,
     fieldProps = _objectWithoutProperties(_ref2, _excluded2$3);
   var FieldComponent = useFieldComponent(fieldComponent);
   var isFields = FieldComponent === FieldsComponent;
@@ -3662,7 +3752,7 @@ var Field = function Field(_ref) {
   var finalIsHorizontal = isHorizontal !== null ? isHorizontal : FieldComponent.isHorizontal || finalWithForm !== false && isListItem || finalWithModal !== false && isListItem || null;
   var finalWithoutLabel = withoutLabel || FieldComponent.withoutLabel || false;
   var finalWithSettings = settings !== null || typeof FieldComponent.withSettings !== 'undefined' && FieldComponent.withSettings || typeof FieldComponent.settingsComponent !== 'undefined' || false;
-  var fieldElement = /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
+  var fieldElement = !withToggle || value !== null ? /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
     isHorizontal: finalIsHorizontal && !isFields,
     isList: isList,
     canClear: canClear,
@@ -3678,8 +3768,10 @@ var Field = function Field(_ref) {
     onChange: onChange,
     gotoFieldForm: gotoFieldForm,
     gotoForm: gotoForm
-  }));
+  })) : null;
   return !withoutFieldRow ? /*#__PURE__*/React.createElement(FieldRow, Object.assign({}, props, fieldProps, {
+    value: value,
+    onChange: onChange,
     label: label,
     errors: errors,
     help: help,
@@ -3688,6 +3780,7 @@ var Field = function Field(_ref) {
     isListItem: isListItem,
     withoutLabel: finalWithoutLabel,
     withSettings: finalWithSettings,
+    withToggle: withToggle,
     withForm: finalWithForm,
     withValue: value !== null,
     gotoSettings: gotoSettings,
@@ -3909,10 +4002,63 @@ var Fields = function Fields(_ref) {
 Fields.propTypes = propTypes$1r;
 Fields.defaultProps = defaultProps$1r;
 
-var styles$B = {"container":"micromag-fields-slide-container","noValue":"micromag-fields-slide-noValue","value":"micromag-fields-slide-value","panel":"micromag-fields-slide-panel"};
+var styles$B = {};
 
-var _excluded$A = ["value", "isForm", "className"];
+var _excluded$B = ["value", "className", "onChange", "fields", "toggleLabel"];
 var propTypes$1q = {
+  value: PropTypes$1.badge,
+  className: PropTypes.string,
+  onChange: PropTypes.func
+};
+var defaultProps$1q = {
+  value: null,
+  className: null,
+  onChange: null
+};
+var Alternative = function Alternative(_ref) {
+  var value = _ref.value,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    fields = _ref.fields,
+    toggleLabel = _ref.toggleLabel,
+    props = _objectWithoutProperties(_ref, _excluded$B);
+  var finalFields = useMemo(function () {
+    return [{
+      name: 'active',
+      type: 'toggle',
+      isHorizontal: true,
+      label: toggleLabel
+    }].concat(_toConsumableArray(value !== null ? fields : []));
+  }, [fields, value, toggleLabel]);
+  console.log({
+    value: value,
+    fields: fields,
+    finalFields: finalFields
+  });
+  var onUpdateValue = useCallback(function (newValue) {
+    var _ref2 = newValue || {},
+      _ref2$active = _ref2.active,
+      nowActive = _ref2$active === void 0 ? false : _ref2$active;
+    if (onChange !== null) {
+      onChange(nowActive ? newValue : null);
+    }
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(Fields, Object.assign({
+    className: classNames([styles$B.container, _defineProperty({}, className, className !== null)]),
+    fieldClassName: styles$B.field
+  }, props, {
+    fields: finalFields,
+    value: value,
+    onChange: onUpdateValue
+  }));
+};
+Alternative.propTypes = propTypes$1q;
+Alternative.defaultProps = defaultProps$1q;
+
+var styles$A = {"container":"micromag-fields-slide-container","noValue":"micromag-fields-slide-noValue","value":"micromag-fields-slide-value","panel":"micromag-fields-slide-panel"};
+
+var _excluded$A = ["value", "isForm", "className"];
+var propTypes$1p = {
   value: PropTypes.shape({
     text: PropTypes.string,
     image: PropTypes$1.imageMedia
@@ -3920,7 +4066,7 @@ var propTypes$1q = {
   isForm: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$1q = {
+var defaultProps$1p = {
   value: null,
   isForm: false,
   className: null
@@ -3934,7 +4080,7 @@ var AnswerField = function AnswerField(_ref) {
     _ref2$text = _ref2.text,
     text = _ref2$text === void 0 ? null : _ref2$text;
   return isForm ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$B.panel, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$A.panel, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Fields, Object.assign({
     className: classNames([{
       'p-2': isForm,
@@ -3943,18 +4089,18 @@ var AnswerField = function AnswerField(_ref) {
   }, props, {
     value: value
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$B.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$A.container, _defineProperty({}, className, className !== null)])
   }, text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: styles$B.value
+    className: styles$A.value
   }, text) : /*#__PURE__*/React.createElement("span", {
-    className: styles$B.noValue
+    className: styles$A.noValue
   }, "Entrez une question..."));
 };
-AnswerField.propTypes = propTypes$1q;
-AnswerField.defaultProps = defaultProps$1q;
+AnswerField.propTypes = propTypes$1p;
+AnswerField.defaultProps = defaultProps$1p;
 
 var _excluded$z = ["name", "value", "getDefaultValue", "noItemLabel", "addItemLabel", "itemFieldLabel", "itemComponent", "itemsField", "itemsProps", "className", "withoutSort", "withoutAddItem", "withoutDeleteItem", "onChange", "isFieldForm", "gotoFieldForm", "closeFieldForm"];
-var propTypes$1p = {
+var propTypes$1o = {
   name: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.object),
   // eslint-disable-line
@@ -3975,7 +4121,7 @@ var propTypes$1p = {
   closeFieldForm: PropTypes.func,
   onChange: PropTypes.func
 };
-var defaultProps$1p = {
+var defaultProps$1o = {
   name: null,
   value: null,
   getDefaultValue: null,
@@ -4218,14 +4364,14 @@ var ItemsField = function ItemsField(_ref2) {
     }]
   })) : null));
 };
-ItemsField.propTypes = propTypes$1p;
-ItemsField.defaultProps = defaultProps$1p;
+ItemsField.propTypes = propTypes$1o;
+ItemsField.defaultProps = defaultProps$1o;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$1o = {
+var propTypes$1n = {
   value: PropTypes$1.answers
 };
-var defaultProps$1o = {
+var defaultProps$1n = {
   value: null
 };
 var AnswersField = function AnswersField(props) {
@@ -4247,13 +4393,21 @@ var AnswersField = function AnswersField(props) {
     itemComponent: AnswerField
   }, props));
 };
-AnswersField.propTypes = propTypes$1o;
-AnswersField.defaultProps = defaultProps$1o;
+AnswersField.propTypes = propTypes$1n;
+AnswersField.defaultProps = defaultProps$1n;
 
-var styles$A = {"thumbnail":"micromag-fields-field-with-form-thumbnail","label":"micromag-fields-field-with-form-label","clearButton":"micromag-fields-field-with-form-clearButton"};
+var styles$z = {"thumbnail":"micromag-fields-field-with-form-thumbnail","label":"micromag-fields-field-with-form-label","clearButton":"micromag-fields-field-with-form-clearButton"};
 
 var _excluded$y = ["value", "isForm", "canClear", "noValueLabel", "label", "labelPath", "withTitleLabel", "thumbnail", "thumbnailPath", "isHorizontal", "className", "onChange", "closeForm", "children", "field"];
-var propTypes$1n = {
+function getItemLabel(item, labelPath, defaultValue) {
+  return (isArray(labelPath) ? labelPath : [labelPath]).reduce(function (acc, path) {
+    if (!isEmpty(acc)) {
+      return acc;
+    }
+    return path !== null ? get(item, path, defaultValue) : defaultValue;
+  }, defaultValue);
+}
+var propTypes$1m = {
   value: PropTypes.any,
   // eslint-disable-line
   isForm: PropTypes.bool,
@@ -4271,7 +4425,7 @@ var propTypes$1n = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$1n = {
+var defaultProps$1m = {
   value: null,
   isForm: false,
   canClear: false,
@@ -4324,7 +4478,7 @@ var FieldWithForm = function FieldWithForm(_ref) {
       onChange: onChange
     }));
   }
-  var labelValue = label !== null ? label : get(value, labelPath, null);
+  var labelValue = label !== null ? label : getItemLabel(value, labelPath, null);
   var labelElement = null;
   var labelString = null;
   if (labelValue !== null && isMessage(labelValue)) {
@@ -4344,7 +4498,7 @@ var FieldWithForm = function FieldWithForm(_ref) {
     } else if (thumbnailSrc !== null) {
       thumbElement = /*#__PURE__*/React.createElement("img", {
         src: thumbnailSrc,
-        className: styles$A.thumbnail,
+        className: styles$z.thumbnail,
         alt: label
       });
     }
@@ -4367,14 +4521,14 @@ var FieldWithForm = function FieldWithForm(_ref) {
   }, !isHorizontal && thumbnailElement !== null ? /*#__PURE__*/React.createElement("span", {
     className: "col-auto"
   }, thumbnailElement) : null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$A.label, 'col', 'text-monospace', 'text-start', 'text-truncate', 'fw-bold', {
+    className: classNames([styles$z.label, 'col', 'text-monospace', 'text-start', 'text-truncate', 'fw-bold', {
       'text-start': !isHorizontal,
       'text-end': isHorizontal
     }])
   }, labelElement), isHorizontal && thumbnailElement !== null ? /*#__PURE__*/React.createElement("span", {
     className: "col-auto ps-0"
   }, thumbnailElement) : null, value !== null && canClear ? /*#__PURE__*/React.createElement(ClearButton, {
-    className: styles$A.clearButton,
+    className: styles$z.clearButton,
     onClick: onClear
   }) : null)) : /*#__PURE__*/React.createElement("span", {
     className: classNames(['col', 'text-body-secondary', {
@@ -4390,14 +4544,14 @@ var FieldWithForm = function FieldWithForm(_ref) {
     }]
   }))));
 };
-FieldWithForm.propTypes = propTypes$1n;
-FieldWithForm.defaultProps = defaultProps$1n;
+FieldWithForm.propTypes = propTypes$1m;
+FieldWithForm.defaultProps = defaultProps$1m;
 FieldWithForm.withForm = true;
 
-var styles$z = {"clearButton":"micromag-fields-media-modal-clearButton","previewButton":"micromag-fields-media-modal-previewButton","dialog":"micromag-fields-media-modal-dialog","thumbnail":"micromag-fields-media-modal-thumbnail","dialogBody":"micromag-fields-media-modal-dialogBody","shaded":"micromag-fields-media-modal-shaded","small":"micromag-fields-media-modal-small"};
+var styles$y = {"clearButton":"micromag-fields-media-modal-clearButton","previewButton":"micromag-fields-media-modal-previewButton","dialog":"micromag-fields-media-modal-dialog","thumbnail":"micromag-fields-media-modal-thumbnail","dialogBody":"micromag-fields-media-modal-dialogBody","shaded":"micromag-fields-media-modal-shaded","small":"micromag-fields-media-modal-small"};
 
 var _excluded$x = ["title", "value", "type", "noValueLabel", "isHorizontal", "onChange", "onRequestClose", "multiple", "thumbnail", "thumbnailPath", "className", "buttonsClassName"];
-var propTypes$1m = {
+var propTypes$1l = {
   title: PropTypes.string,
   value: PropTypes$1.media,
   type: PropTypes.string,
@@ -4411,7 +4565,7 @@ var propTypes$1m = {
   className: PropTypes.string,
   buttonsClassName: PropTypes.string
 };
-var defaultProps$1m = {
+var defaultProps$1l = {
   title: null,
   value: null,
   type: null,
@@ -4467,7 +4621,7 @@ var MediaModal = function MediaModal(_ref) {
   } else if (thumbnailSrc !== null) {
     thumbnailElement = /*#__PURE__*/React.createElement("img", {
       src: thumbnailSrc,
-      className: styles$z.thumbnail,
+      className: styles$y.thumbnail,
       alt: label
     });
   }
@@ -4584,12 +4738,12 @@ var MediaModal = function MediaModal(_ref) {
     className: "d-flex w-100 align-items-center justify-content-between mw-100 overflow-hidden"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames([styles$z.previewButton, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$z.shaded, !isHorizontal), styles$z.small, isHorizontal), 'p-2', !isHorizontal), 'mx-auto', !isHorizontal), 'bg-dark', !isHorizontal), 'flex-grow-1', true)]),
+    className: classNames([styles$y.previewButton, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$y.shaded, !isHorizontal), styles$y.small, isHorizontal), 'p-2', !isHorizontal), 'mx-auto', !isHorizontal), 'bg-dark', !isHorizontal), 'flex-grow-1', true)]),
     onClick: onOpen
   }, /*#__PURE__*/React.createElement("span", {
     className: "row"
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$z.label, 'col', 'w-75', 'text-monospace', 'text-truncate', {
+    className: classNames([styles$y.label, 'col', 'w-75', 'text-monospace', 'text-truncate', {
       'fw-bold': value !== null,
       'text-start': !isHorizontal,
       'text-end': isHorizontal
@@ -4608,12 +4762,12 @@ var MediaModal = function MediaModal(_ref) {
   }))), thumbnailElement !== null ? /*#__PURE__*/React.createElement("span", {
     className: "col-auto ps-0"
   }, thumbnailElement) : null)), value !== null ? /*#__PURE__*/React.createElement(ClearButton, {
-    className: classNames([styles$z.clearButton]),
+    className: classNames([styles$y.clearButton]),
     onClick: onClearMedia
   }) : null)), modalOpen ? /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
     title: dialogTitle,
-    className: classNames([styles$z.dialog, _defineProperty({}, className, className)]),
-    bodyClassName: styles$z.dialogBody,
+    className: classNames([styles$y.dialog, _defineProperty({}, className, className)]),
+    bodyClassName: styles$y.dialogBody,
     size: "xl",
     onClose: onClose,
     buttons: !mediaFormOpen ? [{
@@ -4653,16 +4807,16 @@ var MediaModal = function MediaModal(_ref) {
     onMediaFormClose: onMediaFormClose
   }))) : null);
 };
-MediaModal.propTypes = propTypes$1m;
-MediaModal.defaultProps = defaultProps$1m;
+MediaModal.propTypes = propTypes$1l;
+MediaModal.defaultProps = defaultProps$1l;
 MediaModal.withModal = true;
 
 var _excluded$w = ["closeForm", "onChange"];
-var propTypes$1l = {
+var propTypes$1k = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$1l = {
+var defaultProps$1k = {
   onChange: null,
   closeForm: null
 };
@@ -4683,15 +4837,15 @@ var MediaField = function MediaField(_ref) {
     onChange: closeOnChange
   }, props));
 };
-MediaField.propTypes = propTypes$1l;
-MediaField.defaultProps = defaultProps$1l;
+MediaField.propTypes = propTypes$1k;
+MediaField.defaultProps = defaultProps$1k;
 MediaField.withForm = true;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$1k = {
+var propTypes$1j = {
   value: PropTypes$1.audioMedia
 };
-var defaultProps$1k = {
+var defaultProps$1j = {
   value: null
 };
 var AudioField = function AudioField(props) {
@@ -4707,11 +4861,11 @@ var AudioField = function AudioField(props) {
     type: "audio"
   }));
 };
-AudioField.propTypes = propTypes$1k;
-AudioField.defaultProps = defaultProps$1k;
+AudioField.propTypes = propTypes$1j;
+AudioField.defaultProps = defaultProps$1j;
 AudioField.withForm = true;
 
-var propTypes$1j = {
+var propTypes$1i = {
   // eslint-disable-next-line react/forbid-prop-types
   inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.object
@@ -4728,7 +4882,7 @@ var propTypes$1j = {
   onChange: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$1j = {
+var defaultProps$1i = {
   inputRef: null,
   type: 'text',
   value: null,
@@ -4781,17 +4935,17 @@ var TextField = function TextField(_ref) {
     className: "input-group-text"
   }, prefix), input) : input;
 };
-TextField.propTypes = propTypes$1j;
-TextField.defaultProps = defaultProps$1j;
+TextField.propTypes = propTypes$1i;
+TextField.defaultProps = defaultProps$1i;
 var TextField$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(TextField, Object.assign({}, props, {
     inputRef: ref
   }));
 });
 
-var styles$y = {"container":"micromag-fields-autocomplete-container","list":"micromag-fields-autocomplete-list","item":"micromag-fields-autocomplete-item"};
+var styles$x = {"container":"micromag-fields-autocomplete-container","list":"micromag-fields-autocomplete-list","item":"micromag-fields-autocomplete-item"};
 
-var propTypes$1i = {
+var propTypes$1h = {
   items: PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
@@ -4813,7 +4967,7 @@ var propTypes$1i = {
   onChange: PropTypes.func,
   children: PropTypes.node
 };
-var defaultProps$1i = {
+var defaultProps$1h = {
   items: [],
   value: null,
   searchOptions: {
@@ -4873,15 +5027,15 @@ var AutocompleteField = function AutocompleteField(_ref) {
     }
   }, [onChange, showEmpty]);
   var listItems = children !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$y.list
+    className: styles$x.list
   }, children) : /*#__PURE__*/React.createElement("div", {
-    className: styles$y.list
+    className: styles$x.list
   }, /*#__PURE__*/React.createElement("ul", {
     className: "list-group bg-light"
   }, maxedList.map(function (_ref2) {
     var item = _ref2.item;
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['list-group-item', styles$y.item]),
+      className: classNames(['list-group-item', styles$x.item]),
       key: "auto-".concat(item.label)
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
@@ -4891,26 +5045,26 @@ var AutocompleteField = function AutocompleteField(_ref) {
     }, item.label));
   })));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$y.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$x.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(TextField$1, {
     value: value,
-    buttonClassName: styles$y.button,
+    buttonClassName: styles$x.button,
     placeholder: placeholder,
     onChange: onInputChange
   }), open ? listItems : null);
 };
-AutocompleteField.propTypes = propTypes$1i;
-AutocompleteField.defaultProps = defaultProps$1i;
+AutocompleteField.propTypes = propTypes$1h;
+AutocompleteField.defaultProps = defaultProps$1h;
 
-var styles$x = {"container":"micromag-fields-badge-container","field":"micromag-fields-badge-field","active":"micromag-fields-badge-active"};
+var styles$w = {"container":"micromag-fields-badge-container","field":"micromag-fields-badge-field","active":"micromag-fields-badge-active"};
 
 var _excluded$v = ["value", "className", "onChange"];
-var propTypes$1h = {
+var propTypes$1g = {
   value: PropTypes$1.badge,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1h = {
+var defaultProps$1g = {
   value: null,
   className: null,
   onChange: null
@@ -4952,17 +5106,17 @@ var Badge = function Badge(_ref) {
     }
   }, [onChange, value]);
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
-    className: classNames([styles$x.container, _defineProperty(_defineProperty({}, className, className !== null), styles$x.active, active)]),
-    fieldClassName: styles$x.field
+    className: classNames([styles$w.container, _defineProperty(_defineProperty({}, className, className !== null), styles$w.active, active)]),
+    fieldClassName: styles$w.field
   }, props, {
     value: value,
     onChange: onUpdateValue
   }));
 };
-Badge.propTypes = propTypes$1h;
-Badge.defaultProps = defaultProps$1h;
+Badge.propTypes = propTypes$1g;
+Badge.defaultProps = defaultProps$1g;
 
-var styles$w = {"container":"micromag-fields-slider-container","slider":"micromag-fields-slider-slider","input":"micromag-fields-slider-input","unit":"micromag-fields-slider-unit"};
+var styles$v = {"container":"micromag-fields-slider-container","slider":"micromag-fields-slider-slider","input":"micromag-fields-slider-input","unit":"micromag-fields-slider-unit"};
 
 // const roundEven = value => 2 * Math.round(value / 2);
 
@@ -4989,7 +5143,7 @@ var generateSteps = function generateSteps(steps, style) {
     }));
   }, {});
 };
-var propTypes$1g = {
+var propTypes$1f = {
   value: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -5004,7 +5158,7 @@ var propTypes$1g = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1g = {
+var defaultProps$1f = {
   value: null,
   min: 0,
   max: 100,
@@ -5041,7 +5195,7 @@ var SliderField = function SliderField(_ref) {
     return (isArray(marks) ? generateSteps(marks, marksStyle) : marks) || (marksStep !== null ? generateSteps(rangeFromStep(min, max, marksStep), marksStyle) : null) || (marksCount !== null ? generateSteps(rangeFromCount(min, max, marksCount), marksStyle) : null) || undefined;
   }, [min, max, marks, marksStep, marksCount, marksStyle]);
   var slider = /*#__PURE__*/React.createElement("div", {
-    className: styles$w.slider
+    className: styles$v.slider
   }, /*#__PURE__*/React.createElement(Slider, {
     value: value !== null ? value : 0,
     min: min,
@@ -5050,7 +5204,7 @@ var SliderField = function SliderField(_ref) {
     onChange: customOnChange
   }));
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$w.container, _defineProperty(_defineProperty({}, styles$w.withInput, withInput), className, className !== null)])
+    className: classNames([styles$v.container, _defineProperty(_defineProperty({}, styles$v.withInput, withInput), className, className !== null)])
   }, withInput ? /*#__PURE__*/React.createElement("div", {
     className: "row align-items-center no-gutters"
   }, /*#__PURE__*/React.createElement("div", {
@@ -5061,23 +5215,23 @@ var SliderField = function SliderField(_ref) {
     type: "number",
     value: value,
     onChange: customOnChange,
-    className: styles$w.input
+    className: styles$v.input
   })), unit !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['col-auto', styles$w.unit])
+    className: classNames(['col-auto', styles$v.unit])
   }, unit) : null) : slider);
 };
-SliderField.propTypes = propTypes$1g;
-SliderField.defaultProps = defaultProps$1g;
+SliderField.propTypes = propTypes$1f;
+SliderField.defaultProps = defaultProps$1f;
 
-var styles$v = {"container":"micromag-fields-border-width-container"};
+var styles$u = {"container":"micromag-fields-border-width-container"};
 
-var propTypes$1f = {
+var propTypes$1e = {
   value: PropTypes.string,
   sizes: PropTypes.arrayOf(PropTypes.number),
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1f = {
+var defaultProps$1e = {
   value: null,
   sizes: [0, 2, 6, 10, 20, 30],
   className: null,
@@ -5094,20 +5248,20 @@ var BorderRadius = function BorderRadius(_ref) {
     max: sizes[sizes.length - 1],
     marks: sizes,
     withInput: true,
-    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$u.container, _defineProperty({}, className, className !== null)]),
     onChange: onChange
   });
 };
-BorderRadius.propTypes = propTypes$1f;
-BorderRadius.defaultProps = defaultProps$1f;
+BorderRadius.propTypes = propTypes$1e;
+BorderRadius.defaultProps = defaultProps$1e;
 
-var propTypes$1e = {
+var propTypes$1d = {
   types: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1e = {
+var defaultProps$1d = {
   types: ['solid', 'dotted', 'dashed'],
   value: null,
   className: null,
@@ -5131,9 +5285,9 @@ var BorderStyle = function BorderStyle(_ref) {
       return {
         value: type,
         label: /*#__PURE__*/React.createElement("div", {
-          className: styles$I.type
+          className: styles$J.type
         }, /*#__PURE__*/React.createElement("div", {
-          className: styles$I.borders,
+          className: styles$J.borders,
           style: {
             border: "2px ".concat(type, " currentColor")
           }
@@ -5141,21 +5295,21 @@ var BorderStyle = function BorderStyle(_ref) {
       };
     }),
     value: value || null,
-    className: classNames([styles$I.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$I.button,
+    className: classNames([styles$J.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$J.button,
     onChange: onBorderStyleChange
   })));
 };
-BorderStyle.propTypes = propTypes$1e;
-BorderStyle.defaultProps = defaultProps$1e;
+BorderStyle.propTypes = propTypes$1d;
+BorderStyle.defaultProps = defaultProps$1d;
 
-var propTypes$1d = {
+var propTypes$1c = {
   value: PropTypes.string,
   sizes: PropTypes.arrayOf(PropTypes.number),
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1d = {
+var defaultProps$1c = {
   value: null,
   sizes: [1, 2, 4, 8, 10, 14, 20],
   className: null,
@@ -5172,17 +5326,17 @@ var BorderWidth = function BorderWidth(_ref) {
     max: sizes[sizes.length - 1],
     marks: sizes,
     withInput: true,
-    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$u.container, _defineProperty({}, className, className !== null)]),
     onChange: onChange
   });
 };
-BorderWidth.propTypes = propTypes$1d;
-BorderWidth.defaultProps = defaultProps$1d;
+BorderWidth.propTypes = propTypes$1c;
+BorderWidth.defaultProps = defaultProps$1c;
 
-var styles$u = {"preview":"micromag-fields-box-style-preview","box":"micromag-fields-box-style-box"};
+var styles$t = {"preview":"micromag-fields-box-style-preview","box":"micromag-fields-box-style-box"};
 
 var _excluded$u = ["value", "fields", "onChange", "closeForm", "withAlignment"];
-var propTypes$1c = {
+var propTypes$1b = {
   value: PropTypes$1.boxStyle,
   fields: PropTypes.arrayOf(PropTypes$1.formField),
   isForm: PropTypes.bool,
@@ -5192,7 +5346,7 @@ var propTypes$1c = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$1c = {
+var defaultProps$1b = {
   value: null,
   fields: null,
   isForm: false,
@@ -5210,9 +5364,9 @@ var BoxStyleForm = function BoxStyleForm(_ref) {
     _ref.withAlignment;
     var props = _objectWithoutProperties(_ref, _excluded$u);
   var previewElement = value !== null ? /*#__PURE__*/React.createElement("span", {
-    className: styles$u.preview
+    className: styles$t.preview
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$u.box,
+    className: styles$t.box,
     style: _objectSpread(_objectSpread({}, getStyleFromBox(value)), {}, {
       padding: 0
     })
@@ -5232,20 +5386,20 @@ var BoxStyleForm = function BoxStyleForm(_ref) {
     })
   }, props));
 };
-BoxStyleForm.propTypes = propTypes$1c;
-BoxStyleForm.defaultProps = defaultProps$1c;
+BoxStyleForm.propTypes = propTypes$1b;
+BoxStyleForm.defaultProps = defaultProps$1b;
 BoxStyleForm.withForm = true;
 
-var styles$t = {"container":"micromag-fields-button-layout-container","button":"micromag-fields-button-layout-button","placeholderText":"micromag-fields-button-layout-placeholderText","placeholderTextOver":"micromag-fields-button-layout-placeholderTextOver","active":"micromag-fields-button-layout-active"};
+var styles$s = {"container":"micromag-fields-button-layout-container","button":"micromag-fields-button-layout-button","placeholderText":"micromag-fields-button-layout-placeholderText","placeholderTextOver":"micromag-fields-button-layout-placeholderTextOver","active":"micromag-fields-button-layout-active"};
 
-var propTypes$1b = {
+var propTypes$1a = {
   types: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.string,
   defaultValue: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1b = {
+var defaultProps$1a = {
   types: ['label-bottom', 'label-top', 'no-label', 'label-over'],
   value: null,
   defaultValue: null,
@@ -5271,13 +5425,13 @@ var ButtonLayout = function ButtonLayout(_ref) {
           width: "1.25em",
           height: "1em"
         }), /*#__PURE__*/React.createElement(PlaceholderText, {
-          className: styles$t.placeholderText,
+          className: styles$s.placeholderText,
           lines: 1,
           lineMargin: 1
         }));
       case 'label-top':
         return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(PlaceholderText, {
-          className: styles$t.placeholderText,
+          className: styles$s.placeholderText,
           lines: 1,
           lineMargin: 1
         }), /*#__PURE__*/React.createElement(PlaceholderImage, {
@@ -5294,7 +5448,7 @@ var ButtonLayout = function ButtonLayout(_ref) {
           width: "1.5em",
           height: "1.5em"
         }), /*#__PURE__*/React.createElement(PlaceholderText, {
-          className: classNames([styles$t.placeholderText, styles$t.placeholderTextOver]),
+          className: classNames([styles$s.placeholderText, styles$s.placeholderTextOver]),
           lines: 1,
           withInvertedColors: false
         }));
@@ -5314,25 +5468,25 @@ var ButtonLayout = function ButtonLayout(_ref) {
       };
     }),
     value: finalValue || null,
-    className: classNames([styles$t.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$t.button,
-    activeClassName: styles$t.active,
+    className: classNames([styles$s.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$s.button,
+    activeClassName: styles$s.active,
     onChange: onButtonLayoutChange,
     uncheckable: true
   })));
 };
-ButtonLayout.propTypes = propTypes$1b;
-ButtonLayout.defaultProps = defaultProps$1b;
+ButtonLayout.propTypes = propTypes$1a;
+ButtonLayout.defaultProps = defaultProps$1a;
 
-var styles$s = {"container":"micromag-fields-call-to-action-container","field":"micromag-fields-call-to-action-field","active":"micromag-fields-call-to-action-active"};
+var styles$r = {"container":"micromag-fields-call-to-action-container","field":"micromag-fields-call-to-action-field","active":"micromag-fields-call-to-action-active"};
 
 var _excluded$t = ["value", "className", "onChange"];
-var propTypes$1a = {
+var propTypes$19 = {
   value: PropTypes$1.callToAction,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$1a = {
+var defaultProps$19 = {
   value: null,
   className: null,
   onChange: null
@@ -5381,24 +5535,24 @@ var CallToAction = function CallToAction(_ref) {
     }
   }, [onChange, value]);
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
-    className: classNames([styles$s.container, _defineProperty(_defineProperty({}, className, className !== null), styles$s.active, active)]),
-    fieldClassName: styles$s.field
+    className: classNames([styles$r.container, _defineProperty(_defineProperty({}, className, className !== null), styles$r.active, active)]),
+    fieldClassName: styles$r.field
   }, props, {
     value: value,
     onChange: onUpdateValue
   }));
 };
-CallToAction.propTypes = propTypes$1a;
-CallToAction.defaultProps = defaultProps$1a;
+CallToAction.propTypes = propTypes$19;
+CallToAction.defaultProps = defaultProps$19;
 
 var _excluded$s = ["value", "className", "onChange"],
   _excluded2$2 = ["paddingRight", "paddingBottom"];
-var propTypes$19 = {
+var propTypes$18 = {
   value: PropTypes$1.activeForm,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$19 = {
+var defaultProps$18 = {
   value: null,
   className: null,
   onChange: null
@@ -5449,9 +5603,9 @@ var CallToActionForm = function CallToActionForm(_ref) {
     _getStyleFromBox.paddingBottom;
     var stylesWithoutPadding = _objectWithoutProperties(_getStyleFromBox, _excluded2$2);
   var previewElement = value !== null ? /*#__PURE__*/React.createElement("span", {
-    className: styles$u.preview
+    className: styles$t.preview
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$u.box,
+    className: styles$t.box,
     style: _objectSpread(_objectSpread({}, stylesWithoutPadding), {}, {
       padding: 0
     })
@@ -5472,20 +5626,20 @@ var CallToActionForm = function CallToActionForm(_ref) {
     })
   }, props));
 };
-CallToActionForm.propTypes = propTypes$19;
-CallToActionForm.defaultProps = defaultProps$19;
+CallToActionForm.propTypes = propTypes$18;
+CallToActionForm.defaultProps = defaultProps$18;
 
-var styles$r = {"container":"micromag-fields-toggle-section-container","field":"micromag-fields-toggle-section-field","enabled":"micromag-fields-toggle-section-enabled"};
+var styles$q = {"container":"micromag-fields-toggle-section-container","field":"micromag-fields-toggle-section-field","enabled":"micromag-fields-toggle-section-enabled"};
 
 var _excluded$r = ["value", "toggleField", "className", "onChange"];
-var propTypes$18 = {
+var propTypes$17 = {
   // eslint-disable-next-line react/forbid-prop-types
   value: PropTypes.object,
   toggleField: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$18 = {
+var defaultProps$17 = {
   value: null,
   toggleField: null,
   className: null,
@@ -5507,19 +5661,19 @@ var ToggleSection = function ToggleSection(_ref) {
     }
   }, [onChange, value]);
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
-    className: classNames([styles$r.container, _defineProperty(_defineProperty({}, className, className !== null), styles$r.enabled, valueEnabled)]),
-    fieldClassName: styles$r.field
+    className: classNames([styles$q.container, _defineProperty(_defineProperty({}, className, className !== null), styles$q.enabled, valueEnabled)]),
+    fieldClassName: styles$q.field
   }, props, {
     value: value,
     onChange: onUpdateValue
   }));
 };
-ToggleSection.propTypes = propTypes$18;
-ToggleSection.defaultProps = defaultProps$18;
+ToggleSection.propTypes = propTypes$17;
+ToggleSection.defaultProps = defaultProps$17;
 
-var styles$q = {"container":"micromag-fields-date-container","input":"micromag-fields-date-input"};
+var styles$p = {"container":"micromag-fields-date-container","input":"micromag-fields-date-input"};
 
-var propTypes$17 = {
+var propTypes$16 = {
   name: PropTypes.string,
   value: PropTypes.number,
   withTime: PropTypes.bool,
@@ -5527,7 +5681,7 @@ var propTypes$17 = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$17 = {
+var defaultProps$16 = {
   name: null,
   value: null,
   withTime: false,
@@ -5549,10 +5703,10 @@ var DateField = function DateField(_ref) {
     }
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$q.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("input", {
     type: withTime ? 'datetime-local' : 'date',
-    className: classNames([styles$q.input, 'form-control', 'ms-auto']),
+    className: classNames([styles$p.input, 'form-control', 'ms-auto']),
     name: name,
     value: value !== null ? value : '',
     autoComplete: "off",
@@ -5560,17 +5714,17 @@ var DateField = function DateField(_ref) {
     placeholder: placeholder
   }));
 };
-DateField.propTypes = propTypes$17;
-DateField.defaultProps = defaultProps$17;
+DateField.propTypes = propTypes$16;
+DateField.defaultProps = defaultProps$16;
 
-var propTypes$16 = {
+var propTypes$15 = {
   name: PropTypes.string,
   value: PropTypes$1.textElement,
   withTime: PropTypes.bool,
   placeholder: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$16 = {
+var defaultProps$15 = {
   name: null,
   value: null,
   withTime: false,
@@ -5595,7 +5749,7 @@ var DateElement = function DateElement(_ref) {
   }, [value, onChange]);
   return /*#__PURE__*/React.createElement("input", {
     type: withTime ? 'datetime-local' : 'date',
-    className: classNames([styles$q.input, 'form-control', 'ms-auto']),
+    className: classNames([styles$p.input, 'form-control', 'ms-auto']),
     name: name,
     value: bodyValue !== null ? bodyValue : '',
     autoComplete: "off",
@@ -5603,16 +5757,16 @@ var DateElement = function DateElement(_ref) {
     placeholder: placeholder
   });
 };
-DateElement.propTypes = propTypes$16;
-DateElement.defaultProps = defaultProps$16;
+DateElement.propTypes = propTypes$15;
+DateElement.defaultProps = defaultProps$15;
 
 var _excluded$q = ["value", "className", "onChange"];
-var propTypes$15 = {
+var propTypes$14 = {
   value: PropTypes$1.callToAction,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$15 = {
+var defaultProps$14 = {
   value: null,
   className: null,
   onChange: null
@@ -5656,23 +5810,23 @@ var ShareIncentive = function ShareIncentive(_ref) {
     }
   }, [onChange, value]);
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
-    className: classNames([styles$s.container, _defineProperty(_defineProperty({}, className, className !== null), styles$s.active, active)]),
-    fieldClassName: styles$s.field
+    className: classNames([styles$r.container, _defineProperty(_defineProperty({}, className, className !== null), styles$r.active, active)]),
+    fieldClassName: styles$r.field
   }, props, {
     value: value,
     onChange: onUpdateValue
   }));
 };
-ShareIncentive.propTypes = propTypes$15;
-ShareIncentive.defaultProps = defaultProps$15;
+ShareIncentive.propTypes = propTypes$14;
+ShareIncentive.defaultProps = defaultProps$14;
 
 var _excluded$p = ["value", "className", "onChange"];
-var propTypes$14 = {
+var propTypes$13 = {
   value: PropTypes$1.activeForm,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$14 = {
+var defaultProps$13 = {
   value: null,
   className: null,
   onChange: null
@@ -5724,18 +5878,18 @@ var ShareIncentiveForm = function ShareIncentiveForm(_ref) {
     })
   }, props));
 };
-ShareIncentiveForm.propTypes = propTypes$14;
-ShareIncentiveForm.defaultProps = defaultProps$14;
+ShareIncentiveForm.propTypes = propTypes$13;
+ShareIncentiveForm.defaultProps = defaultProps$13;
 
-var styles$p = {"container":"micromag-fields-card-layout-container","button":"micromag-fields-card-layout-button","layout":"micromag-fields-card-layout-layout"};
+var styles$o = {"container":"micromag-fields-card-layout-container","button":"micromag-fields-card-layout-button","layout":"micromag-fields-card-layout-layout"};
 
-var propTypes$13 = {
+var propTypes$12 = {
   types: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$13 = {
+var defaultProps$12 = {
   types: ['content-top', 'content-bottom', 'content-split'],
   value: null,
   className: null,
@@ -5754,7 +5908,7 @@ var CardLayout = function CardLayout(_ref) {
     switch (type) {
       case 'content-top':
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$p.layout
+          className: styles$o.layout
         }, /*#__PURE__*/React.createElement(PlaceholderTitle, {
           lines: 1,
           lineMargin: 1
@@ -5767,7 +5921,7 @@ var CardLayout = function CardLayout(_ref) {
         }));
       case 'content-bottom':
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$p.layout
+          className: styles$o.layout
         }, /*#__PURE__*/React.createElement(PlaceholderImage, {
           width: "100%",
           height: "1.25em"
@@ -5780,7 +5934,7 @@ var CardLayout = function CardLayout(_ref) {
         }));
       case 'content-split':
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$p.layout
+          className: styles$o.layout
         }, /*#__PURE__*/React.createElement(PlaceholderTitle, {
           lines: 1,
           lineMargin: 1
@@ -5807,18 +5961,18 @@ var CardLayout = function CardLayout(_ref) {
       };
     }),
     value: value || null,
-    className: classNames([styles$p.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$p.button,
+    className: classNames([styles$o.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$o.button,
     onChange: onButtonLayoutChange,
     uncheckable: true
   })));
 };
-CardLayout.propTypes = propTypes$13;
-CardLayout.defaultProps = defaultProps$13;
+CardLayout.propTypes = propTypes$12;
+CardLayout.defaultProps = defaultProps$12;
 
-var styles$o = {"item":"micromag-fields-checkboxes-item"};
+var styles$n = {"item":"micromag-fields-checkboxes-item"};
 
-var propTypes$12 = {
+var propTypes$11 = {
   name: PropTypes.string,
   value: PropTypes.arrayOf(PropTypes.string),
   singleChoice: PropTypes.bool,
@@ -5827,7 +5981,7 @@ var propTypes$12 = {
   buttonClassName: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$12 = {
+var defaultProps$11 = {
   name: null,
   value: null,
   singleChoice: false,
@@ -5848,7 +6002,7 @@ var Checkboxes = function Checkboxes(_ref) {
     return getSelectOptions(options);
   }, [options]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', 'btn-group-toggle', styles$o.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', 'btn-group-toggle', styles$n.container, _defineProperty({}, className, className !== null)]),
     "data-toggle": "buttons"
   }, finalOptions.map(function (_ref3) {
     var optionValue = _ref3.value,
@@ -5856,7 +6010,7 @@ var Checkboxes = function Checkboxes(_ref) {
     var active = value !== null && isArray(value) && value.indexOf(optionValue) !== -1 || !isArray(value) && value === optionValue;
     return /*#__PURE__*/React.createElement("label", {
       key: "radio-".concat(optionValue),
-      className: classNames(['btn', 'btn-outline-secondary', styles$o.item, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), "active", active)])
+      className: classNames(['btn', 'btn-outline-secondary', styles$n.item, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), "active", active)])
     }, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
       name: "".concat(name, "[]"),
@@ -5890,14 +6044,14 @@ var Checkboxes = function Checkboxes(_ref) {
     }), ' ', label);
   }));
 };
-Checkboxes.propTypes = propTypes$12;
-Checkboxes.defaultProps = defaultProps$12;
+Checkboxes.propTypes = propTypes$11;
+Checkboxes.defaultProps = defaultProps$11;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$11 = {
+var propTypes$10 = {
   value: PropTypes$1.closedCaptionsMedia
 };
-var defaultProps$11 = {
+var defaultProps$10 = {
   value: null
 };
 var ClosedCaptionField = function ClosedCaptionField(props) {
@@ -5913,11 +6067,11 @@ var ClosedCaptionField = function ClosedCaptionField(props) {
     type: "subtitle"
   }));
 };
-ClosedCaptionField.propTypes = propTypes$11;
-ClosedCaptionField.defaultProps = defaultProps$11;
+ClosedCaptionField.propTypes = propTypes$10;
+ClosedCaptionField.defaultProps = defaultProps$10;
 ClosedCaptionField.withForm = true;
 
-var propTypes$10 = {
+var propTypes$$ = {
   value: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -5926,7 +6080,7 @@ var propTypes$10 = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$10 = {
+var defaultProps$$ = {
   value: null,
   disableAlpha: false,
   className: null,
@@ -5990,13 +6144,13 @@ var ColorPickerField = function ColorPickerField(_ref) {
     disableAlpha: disableAlpha
   }));
 };
-ColorPickerField.propTypes = propTypes$10;
-ColorPickerField.defaultProps = defaultProps$10;
+ColorPickerField.propTypes = propTypes$$;
+ColorPickerField.defaultProps = defaultProps$$;
 
-var styles$n = {"preview":"micromag-fields-color-preview","color":"micromag-fields-color-color","picker":"micromag-fields-color-picker"};
+var styles$m = {"preview":"micromag-fields-color-preview","color":"micromag-fields-color-color","picker":"micromag-fields-color-picker"};
 
 var _excluded$o = ["value", "onChange", "closeForm", "disableAlpha", "canClear"];
-var propTypes$$ = {
+var propTypes$_ = {
   value: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -6009,7 +6163,7 @@ var propTypes$$ = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$$ = {
+var defaultProps$_ = {
   value: null,
   isForm: false,
   isHorizontal: false,
@@ -6033,9 +6187,9 @@ var ColorField = function ColorField(_ref) {
     return color !== null ? tinycolor(color).toHexString() : null;
   }, [color]);
   var previewElement = value !== null && color !== null ? /*#__PURE__*/React.createElement("span", {
-    className: styles$n.preview
+    className: styles$m.preview
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$n.color,
+    className: styles$m.color,
     style: _objectSpread({}, getStyleFromColor(value))
   })) : null;
   var onClickReset = useCallback(function () {
@@ -6062,7 +6216,7 @@ var ColorField = function ColorField(_ref) {
   }, props), /*#__PURE__*/React.createElement("div", {
     className: "p-2"
   }, /*#__PURE__*/React.createElement(ColorPickerField, {
-    className: styles$n.picker,
+    className: styles$m.picker,
     value: value,
     onChange: onChange,
     disableAlpha: disableAlpha
@@ -6092,32 +6246,32 @@ var ColorField = function ColorField(_ref) {
     }]
   })) : null)));
 };
-ColorField.propTypes = propTypes$$;
-ColorField.defaultProps = defaultProps$$;
+ColorField.propTypes = propTypes$_;
+ColorField.defaultProps = defaultProps$_;
 ColorField.withForm = true;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$_ = {};
-var defaultProps$_ = {};
+var propTypes$Z = {};
+var defaultProps$Z = {};
 var ContainerStyleField = function ContainerStyleField(props) {
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
     isList: true
   }, props));
 };
-ContainerStyleField.propTypes = propTypes$_;
-ContainerStyleField.defaultProps = defaultProps$_;
+ContainerStyleField.propTypes = propTypes$Z;
+ContainerStyleField.defaultProps = defaultProps$Z;
 
-var styles$m = {};
+var styles$l = {};
 
 var _excluded$n = ["value", "fields", "name", "className", "onChange"];
-var propTypes$Z = {
+var propTypes$Y = {
   value: PropTypes$1.conversation,
   fields: PropTypes$1.formFields,
   name: PropTypes.string.isRequired,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$Z = {
+var defaultProps$Y = {
   value: null,
   fields: null,
   className: null,
@@ -6143,7 +6297,7 @@ var Conversation = function Conversation(_ref) {
     };
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$m.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$l.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(FieldContextProvider, {
     context: {
       options: speakerOptions
@@ -6155,18 +6309,18 @@ var Conversation = function Conversation(_ref) {
     onChange: onChange
   }, props))));
 };
-Conversation.propTypes = propTypes$Z;
-Conversation.defaultProps = defaultProps$Z;
+Conversation.propTypes = propTypes$Y;
+Conversation.defaultProps = defaultProps$Y;
 
-var styles$l = {"container":"micromag-fields-custom-answer-container","field":"micromag-fields-custom-answer-field","active":"micromag-fields-custom-answer-active"};
+var styles$k = {"container":"micromag-fields-custom-answer-container","field":"micromag-fields-custom-answer-field","active":"micromag-fields-custom-answer-active"};
 
 var _excluded$m = ["value", "className", "onChange"];
-var propTypes$Y = {
+var propTypes$X = {
   value: PropTypes$1.customAnswer,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$Y = {
+var defaultProps$X = {
   value: null,
   className: null,
   onChange: null
@@ -6208,17 +6362,17 @@ var CustomAnswer = function CustomAnswer(_ref) {
     }
   }, [onChange, value]);
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
-    className: classNames([styles$l.container, _defineProperty(_defineProperty({}, className, className !== null), styles$l.active, active)]),
-    fieldClassName: styles$l.field
+    className: classNames([styles$k.container, _defineProperty(_defineProperty({}, className, className !== null), styles$k.active, active)]),
+    fieldClassName: styles$k.field
   }, props, {
     value: value,
     onChange: onUpdateValue
   }));
 };
-CustomAnswer.propTypes = propTypes$Y;
-CustomAnswer.defaultProps = defaultProps$Y;
+CustomAnswer.propTypes = propTypes$X;
+CustomAnswer.defaultProps = defaultProps$X;
 
-var propTypes$X = {
+var propTypes$W = {
   name: PropTypes.string,
   fields: PropTypes$1.formFields,
   value: PropTypes.object,
@@ -6228,7 +6382,7 @@ var propTypes$X = {
   closeFieldForm: PropTypes.func,
   onChange: PropTypes.func
 };
-var defaultProps$X = {
+var defaultProps$W = {
   name: null,
   fields: [],
   value: null,
@@ -6286,29 +6440,29 @@ var ElementField = function ElementField(_ref) {
     isList: isList
   });
 };
-ElementField.propTypes = propTypes$X;
-ElementField.defaultProps = defaultProps$X;
+ElementField.propTypes = propTypes$W;
+ElementField.defaultProps = defaultProps$W;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$W = {};
-var defaultProps$W = {};
+var propTypes$V = {};
+var defaultProps$V = {};
 var ElementList = function ElementList(props) {
   return /*#__PURE__*/React.createElement(ElementField, Object.assign({
     isList: true
   }, props));
 };
-ElementList.propTypes = propTypes$W;
-ElementList.defaultProps = defaultProps$W;
+ElementList.propTypes = propTypes$V;
+ElementList.defaultProps = defaultProps$V;
 
-var styles$k = {"container":"micromag-fields-fit-container","frame":"micromag-fields-fit-frame","inner":"micromag-fields-fit-inner","button":"micromag-fields-fit-button","shape":"micromag-fields-fit-shape","media":"micromag-fields-fit-media","cover":"micromag-fields-fit-cover","contain":"micromag-fields-fit-contain","fill":"micromag-fields-fit-fill","none":"micromag-fields-fit-none"};
+var styles$j = {"container":"micromag-fields-fit-container","frame":"micromag-fields-fit-frame","inner":"micromag-fields-fit-inner","button":"micromag-fields-fit-button","shape":"micromag-fields-fit-shape","media":"micromag-fields-fit-media","cover":"micromag-fields-fit-cover","contain":"micromag-fields-fit-contain","fill":"micromag-fields-fit-fill","none":"micromag-fields-fit-none"};
 
-var propTypes$V = {
+var propTypes$U = {
   values: PropTypes.arrayOf(PropTypes$1.objectFitSize),
   value: PropTypes$1.objectFitSize,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$V = {
+var defaultProps$U = {
   values: ['cover', 'contain', null],
   // TODO, maybe add 'fill', 'scale-down', ?
   value: null,
@@ -6325,30 +6479,30 @@ var ObjectFitSize = function ObjectFitSize(_ref) {
       return {
         value: val,
         label: /*#__PURE__*/React.createElement("div", {
-          className: classNames([styles$k.frame, styles$k[val || 'none']])
+          className: classNames([styles$j.frame, styles$j[val || 'none']])
         }, /*#__PURE__*/React.createElement("div", {
-          className: styles$k.shape
+          className: styles$j.shape
         }, /*#__PURE__*/React.createElement("div", {
-          className: styles$k.inner
+          className: styles$j.inner
         }, /*#__PURE__*/React.createElement("div", {
-          className: styles$k.media
+          className: styles$j.media
         }))))
       };
     }),
     value: value,
-    className: classNames([styles$k.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$k.button,
+    className: classNames([styles$j.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$j.button,
     onChange: onChange
   });
 };
-ObjectFitSize.propTypes = propTypes$V;
-ObjectFitSize.defaultProps = defaultProps$V;
+ObjectFitSize.propTypes = propTypes$U;
+ObjectFitSize.defaultProps = defaultProps$U;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$U = {
+var propTypes$T = {
   value: PropTypes$1.fontMedia
 };
-var defaultProps$U = {
+var defaultProps$T = {
   value: null
 };
 var FontField = function FontField(props) {
@@ -6364,8 +6518,8 @@ var FontField = function FontField(props) {
     type: "font"
   }));
 };
-FontField.propTypes = propTypes$U;
-FontField.defaultProps = defaultProps$U;
+FontField.propTypes = propTypes$T;
+FontField.defaultProps = defaultProps$T;
 FontField.withForm = true;
 
 var _excluded$l = ["value", "onChange", "closeForm", "maxFontsVisible", "isForm", "canClear"],
@@ -6376,7 +6530,7 @@ var normalize = function normalize(str) {
 var fontEquals = function fontEquals(fontA, fontB) {
   return fontA === fontB || isObject(fontA) && isObject(fontB) && fontA.type === fontB.type && fontA.name === fontB.name;
 };
-var propTypes$T = {
+var propTypes$S = {
   value: PropTypes$1.font,
   isForm: PropTypes.bool,
   isHorizontal: PropTypes.bool,
@@ -6386,7 +6540,7 @@ var propTypes$T = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$T = {
+var defaultProps$S = {
   value: null,
   isForm: false,
   isHorizontal: false,
@@ -6574,15 +6728,15 @@ var FontFamily = function FontFamily(_ref) {
     }]
   }))) : null);
 };
-FontFamily.propTypes = propTypes$T;
-FontFamily.defaultProps = defaultProps$T;
+FontFamily.propTypes = propTypes$S;
+FontFamily.defaultProps = defaultProps$S;
 FontFamily.withForm = true;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$S = {
+var propTypes$R = {
   value: PropTypes$1.imageMedias
 };
-var defaultProps$S = {
+var defaultProps$R = {
   value: null
 };
 var FontsField = function FontsField(props) {
@@ -6604,12 +6758,12 @@ var FontsField = function FontsField(props) {
     itemComponent: FontField
   }, props));
 };
-FontsField.propTypes = propTypes$S;
-FontsField.defaultProps = defaultProps$S;
+FontsField.propTypes = propTypes$R;
+FontsField.defaultProps = defaultProps$R;
 
-var styles$j = {"container":"micromag-fields-number-container","clearButton":"micromag-fields-number-clearButton","input":"micromag-fields-number-input","arrow":"micromag-fields-number-arrow","arrowIcon":"micromag-fields-number-arrowIcon","dataListItems":"micromag-fields-number-dataListItems","dataListItem":"micromag-fields-number-dataListItem","dataListItemButton":"micromag-fields-number-dataListItemButton","fullWidth":"micromag-fields-number-fullWidth"};
+var styles$i = {"container":"micromag-fields-number-container","clearButton":"micromag-fields-number-clearButton","input":"micromag-fields-number-input","arrow":"micromag-fields-number-arrow","arrowIcon":"micromag-fields-number-arrowIcon","dataListItems":"micromag-fields-number-dataListItems","dataListItem":"micromag-fields-number-dataListItem","dataListItemButton":"micromag-fields-number-dataListItemButton","fullWidth":"micromag-fields-number-fullWidth"};
 
-var propTypes$R = {
+var propTypes$Q = {
   name: PropTypes.string,
   value: PropTypes.number,
   min: PropTypes.number,
@@ -6624,7 +6778,7 @@ var propTypes$R = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$R = {
+var defaultProps$Q = {
   name: null,
   value: null,
   min: null,
@@ -6689,10 +6843,10 @@ var NumberField = function NumberField(_ref) {
     }
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$j.container, _defineProperty({}, className, className !== null), _defineProperty({}, styles$j.fullWidth, fullWidth)])
+    className: classNames([styles$i.container, _defineProperty({}, className, className !== null), _defineProperty({}, styles$i.fullWidth, fullWidth)])
   }, /*#__PURE__*/React.createElement("input", {
     type: "number",
-    className: classNames([styles$j.input, 'form-control', 'ms-auto']),
+    className: classNames([styles$i.input, 'form-control', 'ms-auto']),
     name: name,
     value: value !== null ? value : '',
     min: min,
@@ -6704,21 +6858,21 @@ var NumberField = function NumberField(_ref) {
     onBlur: onInputBlur,
     placeholder: placeholder
   }), value === null && hasDataList ? /*#__PURE__*/React.createElement("div", {
-    className: styles$j.arrow
+    className: styles$i.arrow
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$j.arrowIcon,
+    className: styles$i.arrowIcon,
     icon: faChevronDown
   })) : null, value !== null ? /*#__PURE__*/React.createElement(ClearButton, {
-    className: styles$j.clearButton,
+    className: styles$i.clearButton,
     onClick: onClear
   }) : null, hasDataList && dataListActive ? /*#__PURE__*/React.createElement("ul", {
-    className: styles$j.dataListItems
+    className: styles$i.dataListItems
   }, dataList.map(function (dataListValue) {
     return /*#__PURE__*/React.createElement("li", {
       key: "data-list-".concat(dataListValue),
-      className: styles$j.dataListItem
+      className: styles$i.dataListItem
     }, /*#__PURE__*/React.createElement("button", {
-      className: styles$j.dataListItemButton,
+      className: styles$i.dataListItemButton,
       type: "button",
       onTouchStart: function onTouchStart() {
         onDataListClick(dataListValue);
@@ -6729,14 +6883,14 @@ var NumberField = function NumberField(_ref) {
     }, dataListValue));
   })) : null);
 };
-NumberField.propTypes = propTypes$R;
-NumberField.defaultProps = defaultProps$R;
+NumberField.propTypes = propTypes$Q;
+NumberField.defaultProps = defaultProps$Q;
 
 var _excluded$k = ["sizes"];
-var propTypes$Q = {
+var propTypes$P = {
   sizes: PropTypes.arrayOf(PropTypes.number)
 };
-var defaultProps$Q = {
+var defaultProps$P = {
   sizes: [12, 14, 16, 18, 20, 24, 28, 32, 48]
 };
 var FontSize = function FontSize(_ref) {
@@ -6746,12 +6900,12 @@ var FontSize = function FontSize(_ref) {
     dataList: sizes
   }));
 };
-FontSize.propTypes = propTypes$Q;
-FontSize.defaultProps = defaultProps$Q;
+FontSize.propTypes = propTypes$P;
+FontSize.defaultProps = defaultProps$P;
 FontSize.isHorizontal = true;
 
 var _excluded$j = ["value", "options", "onChange"];
-var propTypes$P = {
+var propTypes$O = {
   value: PropTypes.shape({}),
   options: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.string,
@@ -6759,7 +6913,7 @@ var propTypes$P = {
   })),
   onChange: PropTypes.func
 };
-var defaultProps$P = {
+var defaultProps$O = {
   options: [{
     value: 'bold',
     label: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -6805,16 +6959,16 @@ var FontStyles$1 = function FontStyles(_ref) {
     onChange: onInputChange
   }, props));
 };
-FontStyles$1.propTypes = propTypes$P;
-FontStyles$1.defaultProps = defaultProps$P;
+FontStyles$1.propTypes = propTypes$O;
+FontStyles$1.defaultProps = defaultProps$O;
 
 var _excluded$i = ["value", "options", "onChange"];
-var propTypes$O = {
+var propTypes$N = {
   value: PropTypes.shape({}),
   options: PropTypes.arrayOf(PropTypes.object),
   onChange: PropTypes.func
 };
-var defaultProps$O = {
+var defaultProps$N = {
   options: [{
     value: 'capitalize',
     label: /*#__PURE__*/React.createElement("strong", null, "Aa")
@@ -6840,17 +6994,17 @@ var TextTransform = function TextTransform(_ref) {
     uncheckable: true
   }, props));
 };
-TextTransform.propTypes = propTypes$O;
-TextTransform.defaultProps = defaultProps$O;
+TextTransform.propTypes = propTypes$N;
+TextTransform.defaultProps = defaultProps$N;
 TextTransform.isHorizontal = true;
 
 var _excluded$h = ["value", "transformName", "onChange"];
-var propTypes$N = {
+var propTypes$M = {
   value: PropTypes.shape({}),
   transformName: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$N = {
+var defaultProps$M = {
   transformName: 'transform',
   value: null,
   onChange: null
@@ -6872,17 +7026,17 @@ var FontStyleTransform = function FontStyleTransform(_ref) {
     onChange: onTransformChange
   }, props));
 };
-FontStyleTransform.propTypes = propTypes$N;
-FontStyleTransform.defaultProps = defaultProps$N;
+FontStyleTransform.propTypes = propTypes$M;
+FontStyleTransform.defaultProps = defaultProps$M;
 FontStyleTransform.isHorizontal = true;
 
 var _excluded$g = ["value", "options", "onChange"];
-var propTypes$M = {
+var propTypes$L = {
   value: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.object),
   onChange: PropTypes.func
 };
-var defaultProps$M = {
+var defaultProps$L = {
   options: [{
     value: 'left',
     label: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -6914,19 +7068,19 @@ var TextAlign = function TextAlign(_ref) {
     uncheckable: true
   }, props));
 };
-TextAlign.propTypes = propTypes$M;
-TextAlign.defaultProps = defaultProps$M;
+TextAlign.propTypes = propTypes$L;
+TextAlign.defaultProps = defaultProps$L;
 
-var styles$i = {"item":"micromag-fields-font-style-with-align-item","button":"micromag-fields-font-style-with-align-button"};
+var styles$h = {"item":"micromag-fields-font-style-with-align-item","button":"micromag-fields-font-style-with-align-button"};
 
-var propTypes$L = {
+var propTypes$K = {
   value: PropTypes.shape({}),
   fontStyleName: PropTypes.string,
   alignName: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$L = {
+var defaultProps$K = {
   fontStyleName: 'fontStyle',
   alignName: 'align',
   value: null,
@@ -6954,29 +7108,29 @@ var FontStyles = function FontStyles(_ref) {
     }
   }, [value, alignName, onChange]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', styles$i.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['d-flex', styles$h.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(FontStyles$1, {
-    className: styles$i.item,
-    buttonClassName: styles$i.button,
+    className: styles$h.item,
+    buttonClassName: styles$h.button,
     value: fontStyleValue,
     onChange: onFontStyleChange
   }), /*#__PURE__*/React.createElement(TextAlign, {
-    className: styles$i.item,
-    buttonClassName: styles$i.button,
+    className: styles$h.item,
+    buttonClassName: styles$h.button,
     value: alignValue,
     onChange: onAlignChange
   }));
 };
-FontStyles.propTypes = propTypes$L;
-FontStyles.defaultProps = defaultProps$L;
+FontStyles.propTypes = propTypes$K;
+FontStyles.defaultProps = defaultProps$K;
 
-var propTypes$K = {
+var propTypes$J = {
   value: PropTypes.string,
   sizes: PropTypes.arrayOf(PropTypes.number),
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$K = {
+var defaultProps$J = {
   value: null,
   sizes: [100, 200, 300, 400, 500, 600, 700, 800, 900],
   className: null,
@@ -6993,23 +7147,23 @@ var FontWeight = function FontWeight(_ref) {
     max: sizes[sizes.length - 1],
     marks: sizes,
     marksStep: 100,
-    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$u.container, _defineProperty({}, className, className !== null)]),
     onChange: onChange
   });
 };
-FontWeight.propTypes = propTypes$K;
-FontWeight.defaultProps = defaultProps$K;
+FontWeight.propTypes = propTypes$J;
+FontWeight.defaultProps = defaultProps$J;
 
-var styles$h = {"container":"micromag-fields-geo-position-container","autoComplete":"micromag-fields-geo-position-autoComplete","address":"micromag-fields-geo-position-address","map":"micromag-fields-geo-position-map","pin":"micromag-fields-geo-position-pin","infos":"micromag-fields-geo-position-infos","coords":"micromag-fields-geo-position-coords","coord":"micromag-fields-geo-position-coord"};
+var styles$g = {"container":"micromag-fields-geo-position-container","autoComplete":"micromag-fields-geo-position-autoComplete","address":"micromag-fields-geo-position-address","map":"micromag-fields-geo-position-map","pin":"micromag-fields-geo-position-pin","infos":"micromag-fields-geo-position-infos","coords":"micromag-fields-geo-position-coords","coord":"micromag-fields-geo-position-coord"};
 
-var propTypes$J = {
+var propTypes$I = {
   value: PropTypes$1.geoPosition,
   defaultCenter: PropTypes$1.geoPosition,
   defaultZoom: PropTypes.number,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$J = {
+var defaultProps$I = {
   value: null,
   defaultCenter: {
     lat: 45.5,
@@ -7136,9 +7290,9 @@ var GeoPosition = function GeoPosition(_ref2) {
     };
   }, [client]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.autoComplete, 'input-group'])
+    className: classNames([styles$g.autoComplete, 'input-group'])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onSearchButtonClick,
@@ -7148,7 +7302,7 @@ var GeoPosition = function GeoPosition(_ref2) {
   })), /*#__PURE__*/React.createElement("input", {
     type: "text",
     ref: addressInputRef,
-    className: classNames([styles$h.address, 'form-control']),
+    className: classNames([styles$g.address, 'form-control']),
     value: address,
     placeholder: intl.formatMessage({
       id: "KB7N5E",
@@ -7162,7 +7316,7 @@ var GeoPosition = function GeoPosition(_ref2) {
       setAddress(e.target.value);
     }
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$h.map
+    className: styles$g.map
   }, /*#__PURE__*/React.createElement(Map, {
     center: value || defaultCenter,
     zoom: zoom,
@@ -7172,11 +7326,11 @@ var GeoPosition = function GeoPosition(_ref2) {
     withoutStyle: true,
     zoomControl: true
   }), mapReady ? /*#__PURE__*/React.createElement("img", {
-    className: styles$h.pin,
+    className: styles$g.pin,
     src: Pin,
     alt: "Pin"
   }) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$h.infos
+    className: styles$g.infos
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "XhgKcw",
     defaultMessage: [{
@@ -7184,11 +7338,11 @@ var GeoPosition = function GeoPosition(_ref2) {
       "value": "Move the map to position the place"
     }]
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$h.coords
+    className: styles$g.coords
   }, /*#__PURE__*/React.createElement("label", {
-    className: styles$h.coord
+    className: styles$g.coord
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$h.coordLabel
+    className: styles$g.coordLabel
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "zDH24s",
     defaultMessage: [{
@@ -7204,9 +7358,9 @@ var GeoPosition = function GeoPosition(_ref2) {
     onChange: onLatitudeChange,
     fullWidth: true
   })), /*#__PURE__*/React.createElement("label", {
-    className: styles$h.coord
+    className: styles$g.coord
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$h.coordLabel
+    className: styles$g.coordLabel
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "THKV4v",
     defaultMessage: [{
@@ -7223,12 +7377,12 @@ var GeoPosition = function GeoPosition(_ref2) {
     fullWidth: true
   }))));
 };
-GeoPosition.propTypes = propTypes$J;
-GeoPosition.defaultProps = defaultProps$J;
+GeoPosition.propTypes = propTypes$I;
+GeoPosition.defaultProps = defaultProps$I;
 
-var styles$g = {"container":"micromag-fields-grid-layout-container","button":"micromag-fields-grid-layout-button","grid":"micromag-fields-grid-layout-grid","column":"micromag-fields-grid-layout-column"};
+var styles$f = {"container":"micromag-fields-grid-layout-container","button":"micromag-fields-grid-layout-button","grid":"micromag-fields-grid-layout-grid","column":"micromag-fields-grid-layout-column"};
 
-var propTypes$I = {
+var propTypes$H = {
   grids: PropTypes.arrayOf(PropTypes$1.gridLayout),
   value: PropTypes.arrayOf(PropTypes.shape({
     rows: PropTypes.number,
@@ -7237,7 +7391,7 @@ var propTypes$I = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$I = {
+var defaultProps$H = {
   grids: [],
   value: null,
   className: null,
@@ -7254,27 +7408,27 @@ var GridLayout = function GridLayout(_ref) {
         value: layout,
         label: /*#__PURE__*/React.createElement(Grid, {
           layout: layout,
-          className: styles$g.grid,
-          columnClassName: styles$g.column
+          className: styles$f.grid,
+          columnClassName: styles$f.column
         })
       };
     }),
     value: value !== null ? grids.find(function (it) {
       return getGridLayoutName(it) === getGridLayoutName(value);
     }) || null : null,
-    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$g.button,
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$f.button,
     onChange: onChange
   });
 };
-GridLayout.propTypes = propTypes$I;
-GridLayout.defaultProps = defaultProps$I;
+GridLayout.propTypes = propTypes$H;
+GridLayout.defaultProps = defaultProps$H;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$H = {
+var propTypes$G = {
   value: PropTypes$1.imageMedia
 };
-var defaultProps$H = {
+var defaultProps$G = {
   value: null
 };
 var ImageField = function ImageField(props) {
@@ -7290,15 +7444,15 @@ var ImageField = function ImageField(props) {
     type: "image"
   }));
 };
-ImageField.propTypes = propTypes$H;
-ImageField.defaultProps = defaultProps$H;
+ImageField.propTypes = propTypes$G;
+ImageField.defaultProps = defaultProps$G;
 ImageField.withForm = true;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$G = {
+var propTypes$F = {
   value: PropTypes$1.imageMedias
 };
-var defaultProps$G = {
+var defaultProps$F = {
   value: null
 };
 var ImagesField = function ImagesField(props) {
@@ -7320,27 +7474,27 @@ var ImagesField = function ImagesField(props) {
     itemComponent: ImageField
   }, props));
 };
-ImagesField.propTypes = propTypes$G;
-ImagesField.defaultProps = defaultProps$G;
+ImagesField.propTypes = propTypes$F;
+ImagesField.defaultProps = defaultProps$F;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$F = {};
-var defaultProps$F = {};
+var propTypes$E = {};
+var defaultProps$E = {};
 var ImageStyleField = function ImageStyleField(props) {
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
     isList: true
   }, props));
 };
-ImageStyleField.propTypes = propTypes$F;
-ImageStyleField.defaultProps = defaultProps$F;
+ImageStyleField.propTypes = propTypes$E;
+ImageStyleField.defaultProps = defaultProps$E;
 
 /* eslint-disable react/jsx-props-no-spreading */
 // import ImageField from './Image';
 
-var propTypes$E = {
+var propTypes$D = {
   value: PropTypes$1.imageMedias
 };
-var defaultProps$E = {
+var defaultProps$D = {
   value: null
 };
 var ImagesWithCaptionField = function ImagesWithCaptionField(props) {
@@ -7361,10 +7515,10 @@ var ImagesWithCaptionField = function ImagesWithCaptionField(props) {
     })
   }, props));
 };
-ImagesWithCaptionField.propTypes = propTypes$E;
-ImagesWithCaptionField.defaultProps = defaultProps$E;
+ImagesWithCaptionField.propTypes = propTypes$D;
+ImagesWithCaptionField.defaultProps = defaultProps$D;
 
-var propTypes$D = {
+var propTypes$C = {
   id: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   errors: PropTypes$1.errors,
@@ -7372,7 +7526,7 @@ var propTypes$D = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$D = {
+var defaultProps$C = {
   id: null,
   value: null,
   errors: null,
@@ -7401,16 +7555,16 @@ var TextareaField = function TextareaField(_ref) {
     required: required
   });
 };
-TextareaField.propTypes = propTypes$D;
-TextareaField.defaultProps = defaultProps$D;
+TextareaField.propTypes = propTypes$C;
+TextareaField.defaultProps = defaultProps$C;
 
 var _excluded$f = ["value", "onChange", "multiline"];
-var propTypes$C = {
+var propTypes$B = {
   value: PropTypes$1.inputElement,
   multiline: PropTypes.bool,
   onChange: PropTypes.func
 };
-var defaultProps$C = {
+var defaultProps$B = {
   multiline: false,
   value: null,
   onChange: null
@@ -7437,19 +7591,19 @@ var TextElement$1 = function TextElement(_ref) {
     onChange: onLabelChange
   }));
 };
-TextElement$1.propTypes = propTypes$C;
-TextElement$1.defaultProps = defaultProps$C;
+TextElement$1.propTypes = propTypes$B;
+TextElement$1.defaultProps = defaultProps$B;
 
-var styles$f = {"container":"micromag-fields-input-group-container"};
+var styles$e = {"container":"micromag-fields-input-group-container"};
 
-var propTypes$B = {
+var propTypes$A = {
   prepend: PropTypes.node,
   children: PropTypes.node,
   append: PropTypes.node,
   size: PropTypes.oneOf([null, 'sm', 'lg']),
   className: PropTypes.string
 };
-var defaultProps$B = {
+var defaultProps$A = {
   prepend: null,
   children: null,
   append: null,
@@ -7463,20 +7617,20 @@ var InputGroup = function InputGroup(_ref) {
     size = _ref.size,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['input-group', _defineProperty({}, "input-group-".concat(size), size !== null), styles$f.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['input-group', _defineProperty({}, "input-group-".concat(size), size !== null), styles$e.container, _defineProperty({}, className, className !== null)])
   }, isString(prepend) ? /*#__PURE__*/React.createElement("div", {
     className: "input-group-text"
   }, prepend) : prepend, children, isString(append) ? /*#__PURE__*/React.createElement("div", {
     className: "input-group-text"
   }, append) : append);
 };
-InputGroup.propTypes = propTypes$B;
-InputGroup.defaultProps = defaultProps$B;
+InputGroup.propTypes = propTypes$A;
+InputGroup.defaultProps = defaultProps$A;
 
-var styles$e = {"buttonLabel":"micromag-fields-keypad-layout-buttonLabel","keypad":"micromag-fields-keypad-layout-keypad","preview":"micromag-fields-keypad-layout-preview","buttonVisual":"micromag-fields-keypad-layout-buttonVisual"};
+var styles$d = {"buttonLabel":"micromag-fields-keypad-layout-buttonLabel","keypad":"micromag-fields-keypad-layout-keypad","preview":"micromag-fields-keypad-layout-preview","buttonVisual":"micromag-fields-keypad-layout-buttonVisual"};
 
 var _excluded$e = ["value", "onChange", "closeForm"];
-var propTypes$A = {
+var propTypes$z = {
   value: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -7485,7 +7639,7 @@ var propTypes$A = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$A = {
+var defaultProps$z = {
   value: null,
   className: null,
   onChange: null,
@@ -7505,22 +7659,22 @@ var KeypadLayout = function KeypadLayout(_ref) {
     spacing = _ref2$spacing === void 0 ? null : _ref2$spacing;
   var finalSpacingPreview = Math.max(0, Math.min(4, spacing));
   value !== null ? /*#__PURE__*/React.createElement(Keypad, {
-    className: styles$e.keypad,
+    className: styles$d.keypad,
     align: columnAlign,
     columns: columns,
     spacing: finalSpacingPreview,
     items: [1, 2, 3, 4].map(function (n) {
       return /*#__PURE__*/React.createElement("div", {
         key: n,
-        className: classNames([styles$e.preview, {
+        className: classNames([styles$d.preview, {
           // [styles.isPopupEmpty]: isPopupEmpty,
         }])
       }, /*#__PURE__*/React.createElement(PlaceholderImage, {
-        className: styles$e.buttonVisual,
+        className: styles$d.buttonVisual,
         height: 20
       }), /*#__PURE__*/React.createElement(PlaceholderText, {
         lines: 1,
-        className: styles$e.buttonLabel
+        className: styles$d.buttonLabel
       }));
     })
   }) : null;
@@ -7543,10 +7697,10 @@ var KeypadLayout = function KeypadLayout(_ref) {
     })
   }, props)));
 };
-KeypadLayout.propTypes = propTypes$A;
-KeypadLayout.defaultProps = defaultProps$A;
+KeypadLayout.propTypes = propTypes$z;
+KeypadLayout.defaultProps = defaultProps$z;
 
-var styles$d = {"previewButton":"micromag-fields-keypad-layout-form-previewButton","previewKeypad":"micromag-fields-keypad-layout-form-previewKeypad","previewKey":"micromag-fields-keypad-layout-form-previewKey","oneColumn":"micromag-fields-keypad-layout-form-oneColumn"};
+var styles$c = {"previewButton":"micromag-fields-keypad-layout-form-previewButton","previewKeypad":"micromag-fields-keypad-layout-form-previewKeypad","previewKey":"micromag-fields-keypad-layout-form-previewKey","oneColumn":"micromag-fields-keypad-layout-form-oneColumn"};
 
 var _excluded$d = ["value", "onChange", "closeForm"];
 function getPreviewItemsByColumns(columns) {
@@ -7563,7 +7717,7 @@ function getPreviewItemsByColumns(columns) {
       return [1, 2, 3];
   }
 }
-var propTypes$z = {
+var propTypes$y = {
   value: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -7574,7 +7728,7 @@ var propTypes$z = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$z = {
+var defaultProps$y = {
   value: null,
   isForm: false,
   isHorizontal: false,
@@ -7628,7 +7782,7 @@ var KeypadLayoutForm = function KeypadLayoutForm(_ref) {
     }
   }
   var label = /*#__PURE__*/React.createElement("div", {
-    className: styles$d.previewLabel
+    className: styles$c.previewLabel
   }, columns, ' ', intl.formatMessage({
     id: "mgjMWG",
     defaultMessage: [{
@@ -7637,16 +7791,16 @@ var KeypadLayoutForm = function KeypadLayoutForm(_ref) {
     }]
   }), ' ', ", ", getAlignIntlLabel(columnAlign), ", ", spacing, "px");
   var previewElement = value !== null ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Keypad, {
-    className: classNames([styles$d.previewKeypad, _defineProperty({}, styles$d.oneColumn, columns === 1)]),
+    className: classNames([styles$c.previewKeypad, _defineProperty({}, styles$c.oneColumn, columns === 1)]),
     align: columnAlign,
     columns: columns,
     spacing: finalSpacingPreview,
     items: previewItems.map(function (n) {
       return /*#__PURE__*/React.createElement("div", {
         key: n,
-        className: styles$d.previewKey
+        className: styles$c.previewKey
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$d.previewButton
+        className: styles$c.previewButton
       }));
     })
   })) : null;
@@ -7659,21 +7813,21 @@ var KeypadLayoutForm = function KeypadLayoutForm(_ref) {
     thumbnail: previewElement
   }, props));
 };
-KeypadLayoutForm.propTypes = propTypes$z;
-KeypadLayoutForm.defaultProps = defaultProps$z;
+KeypadLayoutForm.propTypes = propTypes$y;
+KeypadLayoutForm.defaultProps = defaultProps$y;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$y = {};
-var defaultProps$y = {};
+var propTypes$x = {};
+var defaultProps$x = {};
 var MapField = function MapField(props) {
   return /*#__PURE__*/React.createElement(Fields, props);
 };
-MapField.propTypes = propTypes$y;
-MapField.defaultProps = defaultProps$y;
+MapField.propTypes = propTypes$x;
+MapField.defaultProps = defaultProps$x;
 
-var styles$c = {"container":"micromag-fields-margin-container","icon":"micromag-fields-margin-icon","slider":"micromag-fields-margin-slider"};
+var styles$b = {"container":"micromag-fields-margin-container","icon":"micromag-fields-margin-icon","slider":"micromag-fields-margin-slider"};
 
-var propTypes$x = {
+var propTypes$w = {
   value: PropTypes.number,
   unit: PropTypes.string,
   direction: PropTypes.oneOf(['top', 'bottom']),
@@ -7683,7 +7837,7 @@ var propTypes$x = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$x = {
+var defaultProps$w = {
   value: null,
   unit: 'pt',
   direction: 'top',
@@ -7703,10 +7857,10 @@ var MarginField = function MarginField(_ref) {
     className = _ref.className,
     _onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: direction === 'top' ? faArrowUp : faArrowDown,
-    className: styles$c.icon
+    className: styles$b.icon
   }), /*#__PURE__*/React.createElement(SliderField, {
     value: value,
     min: min,
@@ -7721,24 +7875,24 @@ var MarginField = function MarginField(_ref) {
     onChange: function onChange(newValue) {
       return _onChange !== null ? _onChange(newValue !== 0 ? newValue : null) : null;
     },
-    className: styles$c.slider
+    className: styles$b.slider
   }));
 };
-MarginField.propTypes = propTypes$x;
-MarginField.defaultProps = defaultProps$x;
+MarginField.propTypes = propTypes$w;
+MarginField.defaultProps = defaultProps$w;
 MarginField.isHorizontal = true;
 
-var styles$b = {"container":"micromag-fields-marker-container","noValue":"micromag-fields-marker-noValue","value":"micromag-fields-marker-value","panel":"micromag-fields-marker-panel"};
+var styles$a = {"container":"micromag-fields-marker-container","noValue":"micromag-fields-marker-noValue","value":"micromag-fields-marker-value","panel":"micromag-fields-marker-panel"};
 
 var _excluded$c = ["isForm", "value", "className"];
-var propTypes$w = {
+var propTypes$v = {
   value: PropTypes.shape({
     text: PropTypes.string
   }),
   isForm: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$w = {
+var defaultProps$v = {
   value: null,
   isForm: false,
   className: null
@@ -7752,23 +7906,23 @@ var MarkerField = function MarkerField(_ref) {
     _ref2$title = _ref2.title,
     title = _ref2$title === void 0 ? null : _ref2$title;
   return isForm ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.panel, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$a.panel, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Fields, Object.assign({}, props, {
     value: value
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
   }, title !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles$b.value
+    className: styles$a.value
   }, title.body)) : /*#__PURE__*/React.createElement("span", {
-    className: styles$b.noValue
+    className: styles$a.noValue
   }, "Entrez les infos..."));
 };
-MarkerField.propTypes = propTypes$w;
-MarkerField.defaultProps = defaultProps$w;
+MarkerField.propTypes = propTypes$v;
+MarkerField.defaultProps = defaultProps$v;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$v = {};
-var defaultProps$v = {};
+var propTypes$u = {};
+var defaultProps$u = {};
 var MarkersField = function MarkersField(props) {
   return /*#__PURE__*/React.createElement(ItemsField, Object.assign({
     noItemLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -7788,19 +7942,19 @@ var MarkersField = function MarkersField(props) {
     itemComponent: MarkerField
   }, props));
 };
-MarkersField.propTypes = propTypes$v;
-MarkersField.defaultProps = defaultProps$v;
+MarkersField.propTypes = propTypes$u;
+MarkersField.defaultProps = defaultProps$u;
 
-var styles$a = {"container":"micromag-fields-media-thumbnail-container","radios":"micromag-fields-media-thumbnail-radios","thumbnail":"micromag-fields-media-thumbnail-thumbnail","button":"micromag-fields-media-thumbnail-button"};
+var styles$9 = {"container":"micromag-fields-media-thumbnail-container","radios":"micromag-fields-media-thumbnail-radios","thumbnail":"micromag-fields-media-thumbnail-thumbnail","button":"micromag-fields-media-thumbnail-button"};
 
 var _excluded$b = ["value", "onChange", "className", "isForm"];
-var propTypes$u = {
+var propTypes$t = {
   value: PropTypes.oneOf([PropTypes.string, PropTypes$1.imageMedia]),
   isForm: PropTypes.bool,
   onChange: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$u = {
+var defaultProps$t = {
   value: null,
   isForm: false,
   onChange: null,
@@ -7834,27 +7988,27 @@ function MediaThumbnail(_ref) {
         label: /*#__PURE__*/React.createElement("img", {
           src: url,
           alt: handle,
-          className: styles$a.thumbnail
+          className: styles$9.thumbnail
         })
       };
     }) : null;
   }, [media]);
   return isForm ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(ImageField, Object.assign({}, props, {
     isForm: true,
     value: isObject(value) ? value : null,
     onChange: onChange
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)])
   }, options !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mb-4"
   }, /*#__PURE__*/React.createElement(Radios, Object.assign({
     value: !isObject(value) ? value : null,
     options: options || [],
     onChange: onChange,
-    className: styles$a.radios,
-    buttonClassName: styles$a.button
+    className: styles$9.radios,
+    buttonClassName: styles$9.button
   }, props))) : null, /*#__PURE__*/React.createElement(FieldRow, Object.assign({}, props, {
     withForm: true
   }), /*#__PURE__*/React.createElement(ImageField, Object.assign({
@@ -7862,11 +8016,11 @@ function MediaThumbnail(_ref) {
     onChange: onChange
   }, props))));
 }
-MediaThumbnail.propTypes = propTypes$u;
-MediaThumbnail.defaultProps = defaultProps$u;
+MediaThumbnail.propTypes = propTypes$t;
+MediaThumbnail.defaultProps = defaultProps$t;
 
 var _excluded$a = ["type", "value", "fields", "noValueLabel", "withoutThumbnail", "onChange", "closeForm"];
-var propTypes$t = {
+var propTypes$s = {
   type: PropTypes.oneOfType([PropTypes$1.mediaTypes, PropTypes.arrayOf(PropTypes$1.mediaTypes)]),
   value: PropTypes$1.media,
   fields: PropTypes$1.formFields,
@@ -7875,7 +8029,7 @@ var propTypes$t = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$t = {
+var defaultProps$s = {
   type: null,
   value: null,
   fields: null,
@@ -7916,8 +8070,8 @@ var MessageField = function MessageField(_ref) {
     })
   }, props));
 };
-MessageField.propTypes = propTypes$t;
-MessageField.defaultProps = defaultProps$t;
+MessageField.propTypes = propTypes$s;
+MessageField.defaultProps = defaultProps$s;
 MessageField.withForm = true;
 
 var _excluded$9 = ["icon", "iconRotation", "isHorizontal", "className"];
@@ -7926,13 +8080,13 @@ var fontAwesomeIconType = PropTypes.shape({
   iconName: PropTypes.string,
   prefix: PropTypes.string
 });
-var propTypes$s = {
+var propTypes$r = {
   icon: PropTypes.oneOfType([PropTypes.node, fontAwesomeIconType]),
   iconRotation: PropTypes.number,
   isHorizontal: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$s = {
+var defaultProps$r = {
   icon: null,
   iconRotation: 0,
   isHorizontal: false,
@@ -7957,19 +8111,19 @@ var NumberWithIcon = function NumberWithIcon(_ref) {
     icon: icon
   })), /*#__PURE__*/React.createElement(NumberField, props));
 };
-NumberWithIcon.propTypes = propTypes$s;
-NumberWithIcon.defaultProps = defaultProps$s;
+NumberWithIcon.propTypes = propTypes$r;
+NumberWithIcon.defaultProps = defaultProps$r;
 NumberWithIcon.isHorizontal = true;
 
-var styles$9 = {"spacing":"micromag-fields-padding-spacing"};
+var styles$8 = {"spacing":"micromag-fields-padding-spacing"};
 
 var _excluded$8 = ["value", "className", "onChange"];
-var propTypes$r = {
+var propTypes$q = {
   value: PropTypes.number,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$r = {
+var defaultProps$q = {
   value: null,
   className: null,
   onChange: null
@@ -7989,11 +8143,11 @@ var Spacing = function Spacing(_ref) {
     onChange: onChange
   }, props)));
 };
-Spacing.propTypes = propTypes$r;
-Spacing.defaultProps = defaultProps$r;
+Spacing.propTypes = propTypes$q;
+Spacing.defaultProps = defaultProps$q;
 
 var _excluded$7 = ["value", "onChange", "closeForm"];
-var propTypes$q = {
+var propTypes$p = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
     top: PropTypes.string,
     left: PropTypes.string,
@@ -8006,7 +8160,7 @@ var propTypes$q = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$q = {
+var defaultProps$p = {
   value: null,
   isForm: false,
   isHorizontal: false,
@@ -8066,7 +8220,7 @@ var PaddingField = function PaddingField(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-content-center justify-content-center my-2"
   }, /*#__PURE__*/React.createElement(Spacing, {
-    className: styles$9.spacing,
+    className: styles$8.spacing,
     value: defaultValue || top,
     onChange: function onChange(val) {
       return onSpacingChange(val, 'top');
@@ -8081,7 +8235,7 @@ var PaddingField = function PaddingField(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-content-center justify-content-between my-2"
   }, /*#__PURE__*/React.createElement(Spacing, {
-    className: styles$9.spacing,
+    className: styles$8.spacing,
     value: defaultValue || left,
     onChange: function onChange(val) {
       return onSpacingChange(val, 'left');
@@ -8094,7 +8248,7 @@ var PaddingField = function PaddingField(_ref) {
       }]
     })
   }), /*#__PURE__*/React.createElement(Spacing, {
-    className: styles$9.spacing,
+    className: styles$8.spacing,
     value: defaultValue || right,
     onChange: function onChange(val) {
       return onSpacingChange(val, 'right');
@@ -8109,7 +8263,7 @@ var PaddingField = function PaddingField(_ref) {
   })), /*#__PURE__*/React.createElement("div", {
     className: "d-flex w-100 align-content-center justify-content-center my-2"
   }, /*#__PURE__*/React.createElement(Spacing, {
-    className: styles$9.spacing,
+    className: styles$8.spacing,
     value: defaultValue || bottom,
     onChange: function onChange(val) {
       return onSpacingChange(val, 'bottom');
@@ -8147,13 +8301,13 @@ var PaddingField = function PaddingField(_ref) {
     }]
   })) : null)));
 };
-PaddingField.propTypes = propTypes$q;
-PaddingField.defaultProps = defaultProps$q;
+PaddingField.propTypes = propTypes$p;
+PaddingField.defaultProps = defaultProps$p;
 PaddingField.withForm = true;
 
-var styles$8 = {"container":"micromag-fields-position-container","button":"micromag-fields-position-button","rotateLeft":"micromag-fields-position-rotateLeft","rotateRight":"micromag-fields-position-rotateRight"};
+var styles$7 = {"container":"micromag-fields-position-container","button":"micromag-fields-position-button","rotateLeft":"micromag-fields-position-rotateLeft","rotateRight":"micromag-fields-position-rotateRight"};
 
-var propTypes$p = {
+var propTypes$o = {
   name: PropTypes.string,
   value: PropTypes.string,
   axisOptions: PropTypes.arrayOf(PropTypes.string),
@@ -8162,7 +8316,7 @@ var propTypes$p = {
   buttonClassName: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$p = {
+var defaultProps$o = {
   name: null,
   value: null,
   axisOptions: ['top', 'center', 'bottom'],
@@ -8177,47 +8331,47 @@ var Icon = function Icon(_ref) {
     case 'top-left':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowUp,
-        className: styles$8.rotateLeft
+        className: styles$7.rotateLeft
       });
     case 'top-center':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowUp,
-        className: styles$8.icon
+        className: styles$7.icon
       });
     case 'top-right':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowUp,
-        className: styles$8.rotateRight
+        className: styles$7.rotateRight
       });
     case 'center-left':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowLeft,
-        className: styles$8.icon
+        className: styles$7.icon
       });
     case 'center-center':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faDotCircle,
-        className: styles$8.icon
+        className: styles$7.icon
       });
     case 'center-right':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowRight,
-        className: styles$8.icon
+        className: styles$7.icon
       });
     case 'bottom-left':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowDown,
-        className: styles$8.rotateRight
+        className: styles$7.rotateRight
       });
     case 'bottom-center':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowDown,
-        className: styles$8.icon
+        className: styles$7.icon
       });
     case 'bottom-right':
       return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
         icon: faArrowDown,
-        className: styles$8.rotateLeft
+        className: styles$7.rotateLeft
       });
   }
   return null;
@@ -8245,7 +8399,7 @@ var Position = function Position(_ref2) {
     _ref3$crossAlign = _ref3.crossAlign,
     crossAlign = _ref3$crossAlign === void 0 ? null : _ref3$crossAlign;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', 'btn-group-toggle', styles$8.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', 'btn-group-toggle', styles$7.container, _defineProperty({}, className, className !== null)]),
     "data-toggle": "buttons"
   }, axisOptions.map(function (_ref5) {
     var axisOption = _ref5.value,
@@ -8255,7 +8409,7 @@ var Position = function Position(_ref2) {
         crossLabel = _ref6.label;
       return /*#__PURE__*/React.createElement("label", {
         key: "radio-".concat(axisOption, "-").concat(crossOption),
-        className: classNames(['btn', 'btn-outline-secondary', _defineProperty(_defineProperty(_defineProperty({}, styles$8.button, true), "active", axisOption === axisAlign && crossOption === crossAlign), buttonClassName, buttonClassName !== null)])
+        className: classNames(['btn', 'btn-outline-secondary', _defineProperty(_defineProperty(_defineProperty({}, styles$7.button, true), "active", axisOption === axisAlign && crossOption === crossAlign), buttonClassName, buttonClassName !== null)])
       }, /*#__PURE__*/React.createElement("input", {
         type: "radio",
         name: name,
@@ -8276,30 +8430,30 @@ var Position = function Position(_ref2) {
     });
   }));
 };
-Position.propTypes = propTypes$p;
-Position.defaultProps = defaultProps$p;
+Position.propTypes = propTypes$o;
+Position.defaultProps = defaultProps$o;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$o = {};
-var defaultProps$o = {};
+var propTypes$n = {};
+var defaultProps$n = {};
 var QuestionField = function QuestionField(props) {
   return /*#__PURE__*/React.createElement(Fields, Object.assign({
     isList: true
   }, props));
 };
-QuestionField.propTypes = propTypes$o;
-QuestionField.defaultProps = defaultProps$o;
+QuestionField.propTypes = propTypes$n;
+QuestionField.defaultProps = defaultProps$n;
 
-var styles$7 = {"container":"micromag-fields-layout-container","button":"micromag-fields-layout-button","layout":"micromag-fields-layout-layout","screen":"micromag-fields-layout-screen"};
+var styles$6 = {"container":"micromag-fields-layout-container","button":"micromag-fields-layout-button","layout":"micromag-fields-layout-layout","screen":"micromag-fields-layout-screen"};
 
 var _excluded$6 = ["value", "screenState", "className", "onChange"];
-var propTypes$n = {
+var propTypes$m = {
   value: PropTypes.string,
   screenState: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$n = {
+var defaultProps$m = {
   value: null,
   screenState: null,
   className: null,
@@ -8320,7 +8474,7 @@ var ScreenLayoutField = function ScreenLayoutField(_ref) {
       return {
         value: layout,
         label: /*#__PURE__*/React.createElement("div", {
-          className: styles$7.layout
+          className: styles$6.layout
         }, /*#__PURE__*/React.createElement(ScreenPlaceholder, {
           screen: {
             type: id,
@@ -8328,29 +8482,29 @@ var ScreenLayoutField = function ScreenLayoutField(_ref) {
           },
           screenState: screenState,
           withSize: true,
-          className: styles$7.screen
+          className: styles$6.screen
         }))
       };
     }),
     value: value || (layouts ? layouts[0] : null),
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$7.button,
+    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$6.button,
     onChange: onChange
   });
 };
-ScreenLayoutField.propTypes = propTypes$n;
-ScreenLayoutField.defaultProps = defaultProps$n;
+ScreenLayoutField.propTypes = propTypes$m;
+ScreenLayoutField.defaultProps = defaultProps$m;
 
-var styles$6 = {"lightCaret":"micromag-fields-select-lightCaret"};
+var styles$5 = {"lightCaret":"micromag-fields-select-lightCaret"};
 
-var propTypes$m = {
+var propTypes$l = {
   value: PropTypes.string,
   options: PropTypes$1.selectOptions,
   disabled: PropTypes.bool,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$m = {
+var defaultProps$l = {
   value: null,
   options: [],
   disabled: false,
@@ -8367,7 +8521,7 @@ var SelectField = function SelectField(_ref) {
     return getSelectOptions(options);
   }, [options]);
   return /*#__PURE__*/React.createElement("select", {
-    className: classNames([styles$6.container, 'form-select', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$6.lightCaret, !disabled), 'bg-dark', !disabled), 'text-light', !disabled), 'text-dark', disabled), className, className !== null)]),
+    className: classNames([styles$5.container, 'form-select', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.lightCaret, !disabled), 'bg-dark', !disabled), 'text-light', !disabled), 'text-dark', disabled), className, className !== null)]),
     value: value || '',
     disabled: disabled,
     onChange: function onChange(e) {
@@ -8384,8 +8538,8 @@ var SelectField = function SelectField(_ref) {
     }, optionLabel);
   }));
 };
-SelectField.propTypes = propTypes$m;
-SelectField.defaultProps = defaultProps$m;
+SelectField.propTypes = propTypes$l;
+SelectField.defaultProps = defaultProps$l;
 
 var selectTheme = function selectTheme(theme) {
   return _objectSpread(_objectSpread({}, theme), {}, {
@@ -8419,7 +8573,7 @@ var selectTheme = function selectTheme(theme) {
 
 var _excluded$5 = ["name", "value", "options", "withoutReset", "disabled", "className", "onChange"],
   _excluded2 = ["label"];
-var propTypes$l = {
+var propTypes$k = {
   name: PropTypes.string,
   value: PropTypes.string,
   options: PropTypes$1.selectOptions,
@@ -8428,7 +8582,7 @@ var propTypes$l = {
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$l = {
+var defaultProps$k = {
   name: null,
   value: null,
   options: [],
@@ -8482,18 +8636,18 @@ var SelectAdvancedField = function SelectAdvancedField(_ref) {
     theme: selectTheme
   }));
 };
-SelectAdvancedField.propTypes = propTypes$l;
-SelectAdvancedField.defaultProps = defaultProps$l;
+SelectAdvancedField.propTypes = propTypes$k;
+SelectAdvancedField.defaultProps = defaultProps$k;
 
-var styles$5 = {"container":"micromag-fields-shadow-angle-container","button":"micromag-fields-shadow-angle-button","type":"micromag-fields-shadow-angle-type","icon":"micromag-fields-shadow-angle-icon"};
+var styles$4 = {"container":"micromag-fields-shadow-angle-container","button":"micromag-fields-shadow-angle-button","type":"micromag-fields-shadow-angle-type","icon":"micromag-fields-shadow-angle-icon"};
 
-var propTypes$k = {
+var propTypes$j = {
   types: PropTypes.arrayOf(PropTypes.string),
   value: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$k = {
+var defaultProps$j = {
   types: [45, 90, -45, -90],
   value: null,
   className: null,
@@ -8520,9 +8674,9 @@ var ShadowAngle = function ShadowAngle(_ref) {
       return {
         value: type,
         label: /*#__PURE__*/React.createElement("div", {
-          className: styles$5.type
+          className: styles$4.type
         }, /*#__PURE__*/React.createElement("div", {
-          className: styles$5.icon,
+          className: styles$4.icon,
           style: {
             border: "2px solid currentColor",
             position: 'relative',
@@ -8532,16 +8686,16 @@ var ShadowAngle = function ShadowAngle(_ref) {
       };
     }),
     value: value || null,
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)]),
-    buttonClassName: styles$5.button,
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
+    buttonClassName: styles$4.button,
     onChange: onShadowAngleChange
   })));
 };
-ShadowAngle.propTypes = propTypes$k;
-ShadowAngle.defaultProps = defaultProps$k;
+ShadowAngle.propTypes = propTypes$j;
+ShadowAngle.defaultProps = defaultProps$j;
 
 var _excluded$4 = ["value", "isForm", "className"];
-var propTypes$j = {
+var propTypes$i = {
   value: PropTypes.shape({
     text: PropTypes.string,
     image: PropTypes$1.imageMedia
@@ -8549,7 +8703,7 @@ var propTypes$j = {
   isForm: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$j = {
+var defaultProps$i = {
   value: null,
   isForm: false,
   className: null
@@ -8563,7 +8717,7 @@ var SlideField = function SlideField(_ref) {
     _ref2$text = _ref2.text,
     text = _ref2$text === void 0 ? null : _ref2$text;
   return isForm ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$B.panel, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$A.panel, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(Fields, Object.assign({
     className: classNames([{
       'p-2': isForm,
@@ -8572,64 +8726,64 @@ var SlideField = function SlideField(_ref) {
   }, props, {
     value: value
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$B.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$A.container, _defineProperty({}, className, className !== null)])
   }, text !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: styles$B.value
+    className: styles$A.value
   }, text)) : /*#__PURE__*/React.createElement("span", {
-    className: styles$B.noValue
+    className: styles$A.noValue
   }, "Entrez les infos..."));
 };
-SlideField.propTypes = propTypes$j;
-SlideField.defaultProps = defaultProps$j;
+SlideField.propTypes = propTypes$i;
+SlideField.defaultProps = defaultProps$i;
 
 /* eslint-disable react/no-array-index-key, react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$i = {
+var propTypes$h = {
   unit: PropTypes.string,
   withInput: PropTypes.bool
 };
-var defaultProps$i = {
+var defaultProps$h = {
   unit: '%',
   withInput: true
 };
 var SliderPixelField$1 = function SliderPixelField(props) {
   return /*#__PURE__*/React.createElement(SliderField, props);
 };
-SliderPixelField$1.propTypes = propTypes$i;
-SliderPixelField$1.defaultProps = defaultProps$i;
+SliderPixelField$1.propTypes = propTypes$h;
+SliderPixelField$1.defaultProps = defaultProps$h;
 
 /* eslint-disable react/no-array-index-key, react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$h = {
+var propTypes$g = {
   unit: PropTypes.string,
   withInput: PropTypes.bool
 };
-var defaultProps$h = {
+var defaultProps$g = {
   unit: 'px',
   withInput: true
 };
 var SliderPixelField = function SliderPixelField(props) {
   return /*#__PURE__*/React.createElement(SliderField, props);
 };
-SliderPixelField.propTypes = propTypes$h;
-SliderPixelField.defaultProps = defaultProps$h;
+SliderPixelField.propTypes = propTypes$g;
+SliderPixelField.defaultProps = defaultProps$g;
 
 /* eslint-disable react/no-array-index-key, react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$g = {
+var propTypes$f = {
   unit: PropTypes.string,
   withInput: PropTypes.bool
 };
-var defaultProps$g = {
+var defaultProps$f = {
   unit: 'pt',
   withInput: true
 };
 var SliderPointField = function SliderPointField(props) {
   return /*#__PURE__*/React.createElement(SliderField, props);
 };
-SliderPointField.propTypes = propTypes$g;
-SliderPointField.defaultProps = defaultProps$g;
+SliderPointField.propTypes = propTypes$f;
+SliderPointField.defaultProps = defaultProps$f;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$f = {};
-var defaultProps$f = {};
+var propTypes$e = {};
+var defaultProps$e = {};
 var SlidesField = function SlidesField(props) {
   return /*#__PURE__*/React.createElement(ItemsField, Object.assign({
     noItemLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -8649,17 +8803,17 @@ var SlidesField = function SlidesField(props) {
     itemComponent: SlideField
   }, props));
 };
-SlidesField.propTypes = propTypes$f;
-SlidesField.defaultProps = defaultProps$f;
+SlidesField.propTypes = propTypes$e;
+SlidesField.defaultProps = defaultProps$e;
 
-var styles$4 = {"container":"micromag-fields-static-field-container","icon":"micromag-fields-static-field-icon"};
+var styles$3 = {"container":"micromag-fields-static-field-container","icon":"micromag-fields-static-field-icon"};
 
-var propTypes$e = {
+var propTypes$d = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
   name: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$e = {
+var defaultProps$d = {
   value: null,
   name: null,
   className: null
@@ -8669,25 +8823,25 @@ var StaticField = function StaticField(_ref) {
     name = _ref.name,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$3.container, _defineProperty({}, className, className !== null)])
   }, name === 'user' ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.icon
+    className: styles$3.icon
   }) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.field
+    className: styles$3.field
   }, value !== null ? value : null));
 };
-StaticField.propTypes = propTypes$e;
-StaticField.defaultProps = defaultProps$e;
+StaticField.propTypes = propTypes$d;
+StaticField.defaultProps = defaultProps$d;
 
 /* eslint-disable react/no-array-index-key, react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$d = {
+var propTypes$c = {
   options: PropTypes.arrayOf(PropTypes.string),
   isForm: PropTypes.bool,
   value: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func
 };
-var defaultProps$d = {
+var defaultProps$c = {
   options: ['_blank', 'self'],
   isForm: false,
   value: null,
@@ -8707,8 +8861,8 @@ var TargetField = function TargetField(_ref) {
     onChange: onChange
   })) : /*#__PURE__*/React.createElement("div", null, value);
 };
-TargetField.propTypes = propTypes$d;
-TargetField.defaultProps = defaultProps$d;
+TargetField.propTypes = propTypes$c;
+TargetField.defaultProps = defaultProps$c;
 TargetField.withForm = true;
 
 /**
@@ -8741,9 +8895,9 @@ var useCKEditor = function useCKEditor() {
   return loadedPackage || {};
 };
 
-var styles$3 = {"container":"micromag-fields-text-editor-container","size-sm":"micromag-fields-text-editor-size-sm","size-lg":"micromag-fields-text-editor-size-lg"};
+var styles$2 = {"container":"micromag-fields-text-editor-container","size-sm":"micromag-fields-text-editor-size-sm","size-lg":"micromag-fields-text-editor-size-lg"};
 
-var propTypes$c = {
+var propTypes$b = {
   value: PropTypes.string,
   size: PropTypes$1.formControlSize,
   className: PropTypes.string,
@@ -8757,7 +8911,7 @@ var propTypes$c = {
   onFocus: PropTypes.func,
   disabled: PropTypes.bool
 };
-var defaultProps$c = {
+var defaultProps$b = {
   value: null,
   size: null,
   className: null,
@@ -8871,7 +9025,7 @@ var TextEditorField = function TextEditorField(_ref) {
   }, [onChange]);
   return /*#__PURE__*/React.createElement("div", {
     id: id,
-    className: classNames([styles$3.container, _defineProperty(_defineProperty({}, styles$3["size-".concat(size)], size !== null), className, className !== null)])
+    className: classNames([styles$2.container, _defineProperty(_defineProperty({}, styles$2["size-".concat(size)], size !== null), className, className !== null)])
   }, Editor !== null ? /*#__PURE__*/React.createElement(CKEditor, {
     editor: !withFullEditor ? InlineEditor : Editor,
     config: finalEditorConfig,
@@ -8888,11 +9042,11 @@ var TextEditorField = function TextEditorField(_ref) {
     style: getStyleFromHighlight(highlightStyle)
   }) : null);
 };
-TextEditorField.propTypes = propTypes$c;
-TextEditorField.defaultProps = defaultProps$c;
+TextEditorField.propTypes = propTypes$b;
+TextEditorField.defaultProps = defaultProps$b;
 
 var _excluded$3 = ["value", "onChange", "inline", "textOnly", "onFocus", "disabled"];
-var propTypes$b = {
+var propTypes$a = {
   value: PropTypes$1.textElement,
   inline: PropTypes.bool,
   textOnly: PropTypes.bool,
@@ -8900,7 +9054,7 @@ var propTypes$b = {
   onFocus: PropTypes.func,
   disabled: PropTypes.bool
 };
-var defaultProps$b = {
+var defaultProps$a = {
   inline: false,
   textOnly: false,
   value: null,
@@ -8948,13 +9102,13 @@ var TextElement = function TextElement(_ref) {
     disabled: disabled
   }));
 };
-TextElement.propTypes = propTypes$b;
-TextElement.defaultProps = defaultProps$b;
+TextElement.propTypes = propTypes$a;
+TextElement.defaultProps = defaultProps$a;
 
-var styles$2 = {"previewButton":"micromag-fields-text-modal-previewButton","dialog":"micromag-fields-text-modal-dialog","editor":"micromag-fields-text-modal-editor","dialogBody":"micromag-fields-text-modal-dialogBody","preview":"micromag-fields-text-modal-preview"};
+var styles$1 = {"previewButton":"micromag-fields-text-modal-previewButton","dialog":"micromag-fields-text-modal-dialog","editor":"micromag-fields-text-modal-editor","dialogBody":"micromag-fields-text-modal-dialogBody","preview":"micromag-fields-text-modal-preview"};
 
 var _excluded$2 = ["title", "value", "editorConfig", "inline", "withHighlightColors", "className", "onRequestClose", "onChange"];
-var propTypes$a = {
+var propTypes$9 = {
   title: PropTypes.string,
   value: PropTypes.shape({
     body: PropTypes.string
@@ -8966,7 +9120,7 @@ var propTypes$a = {
   onRequestClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$9 = {
   title: null,
   value: null,
   editorConfig: null,
@@ -9043,10 +9197,10 @@ var TextModal = function TextModal(_ref) {
   }, [setModalOpen, onRequestClose]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$2.previewButton,
+    className: styles$1.previewButton,
     onClick: onOpen
   }, /*#__PURE__*/React.createElement(TextElement, {
-    className: styles$2.preview,
+    className: styles$1.preview,
     inline: true,
     value: value,
     disabled: true,
@@ -9059,13 +9213,13 @@ var TextModal = function TextModal(_ref) {
         "value": "Edit text"
       }]
     }),
-    className: classNames([styles$2.dialog, _defineProperty({}, className, className)]),
-    bodyClassName: styles$2.dialogBody,
+    className: classNames([styles$1.dialog, _defineProperty({}, className, className)]),
+    bodyClassName: styles$1.dialogBody,
     onClose: onClose,
     footer: /*#__PURE__*/React.createElement("div", {
       className: "p-2"
     }, /*#__PURE__*/React.createElement(Button, {
-      className: styles$2.close,
+      className: styles$1.close,
       theme: "primary",
       onClick: onClose
     }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -9078,18 +9232,18 @@ var TextModal = function TextModal(_ref) {
   }, /*#__PURE__*/React.createElement(TextEditorField, Object.assign({}, props, {
     value: bodyValue,
     onChange: onBodyChange,
-    className: styles$2.editor,
+    className: styles$1.editor,
     inline: inline,
     withHighlightColors: withHighlightColors,
     withFullEditor: true,
     editorConfig: finalEditorConfig
   })))) : null);
 };
-TextModal.propTypes = propTypes$a;
-TextModal.defaultProps = defaultProps$a;
+TextModal.propTypes = propTypes$9;
+TextModal.defaultProps = defaultProps$9;
 
 var _excluded$1 = ["value", "fields", "sections", "onChange", "closeForm"];
-var propTypes$9 = {
+var propTypes$8 = {
   value: PropTypes.shape({
     color: PropTypes.string,
     alpha: PropTypes.number
@@ -9104,7 +9258,7 @@ var propTypes$9 = {
   onChange: PropTypes.func,
   closeForm: PropTypes.func
 };
-var defaultProps$9 = {
+var defaultProps$8 = {
   value: null,
   fields: [],
   isForm: false,
@@ -9152,41 +9306,10 @@ var TextStyleForm = function TextStyleForm(_ref) {
     })
   }, props));
 };
-TextStyleForm.propTypes = propTypes$9;
-TextStyleForm.defaultProps = defaultProps$9;
+TextStyleForm.propTypes = propTypes$8;
+TextStyleForm.defaultProps = defaultProps$8;
 TextStyleForm.withForm = true;
 
-var styles$1 = {"container":"micromag-fields-toggle-container"};
-
-var propTypes$8 = {
-  value: PropTypes.bool,
-  defaultValue: PropTypes.bool,
-  className: PropTypes.string,
-  onChange: PropTypes.func
-};
-var defaultProps$8 = {
-  value: null,
-  defaultValue: null,
-  className: null,
-  onChange: null
-};
-var ToggleField = function ToggleField(_ref) {
-  var value = _ref.value,
-    defaultValue = _ref.defaultValue,
-    className = _ref.className,
-    onChange = _ref.onChange;
-  var finalValue = value === null && (defaultValue === true || defaultValue === 'true') ? true : value;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(Switch, {
-    checked: finalValue !== null ? finalValue : false,
-    onChange: onChange
-  }));
-};
-ToggleField.propTypes = propTypes$8;
-ToggleField.defaultProps = defaultProps$8;
-ToggleField.isHorizontal = true;
-
 var styles = {"container":"micromag-fields-tokens-container"};
 
 var propTypes$7 = {
@@ -9541,6 +9664,7 @@ var components = /*#__PURE__*/Object.freeze({
     AlignHorizontal: AlignHorizontal,
     AlignVertical: AlignVertical,
     Alignment: Alignment,
+    Alternative: Alternative,
     Answer: AnswerField,
     Answers: AnswersField,
     Audio: AudioField,
@@ -9651,4 +9775,4 @@ var FieldsProvider = function FieldsProvider(_ref) {
 FieldsProvider.propTypes = propTypes;
 FieldsProvider.defaultProps = defaultProps;
 
-export { AdFormatField as AdFormat, AlignHorizontal, AlignVertical, Alignment, AnswerField as Answer, AnswersField as Answers, AudioField as Audio, AutocompleteField as Autocomplete, Badge, BorderRadius, BorderStyle, BorderWidth, BoxStyleForm, ButtonLayout, CallToAction, CallToActionForm, CardLayout, Checkboxes, ClosedCaptionField as ClosedCaptions, ColorField as Color, ColorPickerField as ColorPicker, ContainerStyleField as ContainerStyle, Conversation, CustomAnswer, DateField as Date, DateElement, ElementField as Element, ElementList, FieldWithForm, Fields, FieldsProvider, ObjectFitSize as Fit, FontField as Font, FontFamily, FontSize, FontStyles$1 as FontStyle, FontStyleTransform, FontStyles as FontStyleWithAlign, FontWeight, FontsField as Fonts, GeoPosition, GridLayout, ImageField as Image, ImageStyleField as ImageStyle, ImagesField as Images, ImagesWithCaptionField as ImagesWithCaption, TextElement$1 as InputElement, InputGroup, ItemsField as Items, KeypadLayout, KeypadLayoutForm, MapField as Map, MarginField as Margin, MarkerField as Marker, MarkersField as Markers, MediaField as Media, MediaModal, MediaThumbnail, MessageField as Message, NumberField as Number, NumberWithIcon, PaddingField as Padding, Position, QuestionField as Question, Radios, ScreenLayoutField as ScreenLayout, SelectField as Select, SelectAdvancedField as SelectAdvanced, ShadowAngle, ShareIncentive, ShareIncentiveForm, SlideField as Slide, SliderField as Slider, SliderPixelField$1 as SliderPercentage, SliderPixelField as SliderPixel, SliderPointField as SliderPoint, SlidesField as Slides, Spacing, StaticField, TargetField as Target, TextField$1 as Text, TextEditorField as TextEditor, TextElement, TextModal, TextStyleForm, TextTransform, TextareaField as Textarea, ToggleField as Toggle, ToggleSection, Tokens, TrueFalse, UrlField as Url, VideoField as Video, VisualField as Visual, VisualsField as Visuals, VisualsWithCaptionField as VisualsWithCaption, manager as default, manager };
+export { AdFormatField as AdFormat, AlignHorizontal, AlignVertical, Alignment, Alternative, AnswerField as Answer, AnswersField as Answers, AudioField as Audio, AutocompleteField as Autocomplete, Badge, BorderRadius, BorderStyle, BorderWidth, BoxStyleForm, ButtonLayout, CallToAction, CallToActionForm, CardLayout, Checkboxes, ClosedCaptionField as ClosedCaptions, ColorField as Color, ColorPickerField as ColorPicker, ContainerStyleField as ContainerStyle, Conversation, CustomAnswer, DateField as Date, DateElement, ElementField as Element, ElementList, FieldWithForm, Fields, FieldsProvider, ObjectFitSize as Fit, FontField as Font, FontFamily, FontSize, FontStyles$1 as FontStyle, FontStyleTransform, FontStyles as FontStyleWithAlign, FontWeight, FontsField as Fonts, GeoPosition, GridLayout, ImageField as Image, ImageStyleField as ImageStyle, ImagesField as Images, ImagesWithCaptionField as ImagesWithCaption, TextElement$1 as InputElement, InputGroup, ItemsField as Items, KeypadLayout, KeypadLayoutForm, MapField as Map, MarginField as Margin, MarkerField as Marker, MarkersField as Markers, MediaField as Media, MediaModal, MediaThumbnail, MessageField as Message, NumberField as Number, NumberWithIcon, PaddingField as Padding, Position, QuestionField as Question, Radios, ScreenLayoutField as ScreenLayout, SelectField as Select, SelectAdvancedField as SelectAdvanced, ShadowAngle, ShareIncentive, ShareIncentiveForm, SlideField as Slide, SliderField as Slider, SliderPixelField$1 as SliderPercentage, SliderPixelField as SliderPixel, SliderPointField as SliderPoint, SlidesField as Slides, Spacing, StaticField, TargetField as Target, TextField$1 as Text, TextEditorField as TextEditor, TextElement, TextModal, TextStyleForm, TextTransform, TextareaField as Textarea, ToggleField as Toggle, ToggleSection, Tokens, TrueFalse, UrlField as Url, VideoField as Video, VisualField as Visual, VisualsField as Visuals, VisualsWithCaptionField as VisualsWithCaption, manager as default, manager };