@micromag/editor 0.3.427 → 0.3.430

package/lib/index.js

@@ -45,22 +45,6 @@ var orderBy = require('lodash/orderBy');
 var reactRouterDom = require('react-router-dom');
 var screens = require('@micromag/screens');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _toArray__default = /*#__PURE__*/_interopDefaultLegacy(_toArray);
-var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
-var _createForOfIteratorHelper__default = /*#__PURE__*/_interopDefaultLegacy(_createForOfIteratorHelper);
-var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
-
 var useRouteParams = function useRouteParams() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$screenOnly = _ref.screenOnly,
@@ -120,12 +104,11 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
     return currentPartsCount >= previousPartsCount ? 'right' : 'left';
   }, [url, screenIndex]);
   var transitionClassNames = React.useMemo(function () {
-    var _classNames, _classNames2, _classNames3;
     return {
-      enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
-      enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
+      enter: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.enterRight, direction === 'right'), styles.enterLeft, direction === 'left'), styles.enterTop, direction === 'top'), styles.enterBottom, direction === 'bottom')) || 'none',
+      enterActive: classNames(_defineProperty(_defineProperty({}, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), styles.enterActiveVertical, direction === 'top' || direction === 'bottom')) || 'none',
       exit: styles.exit || 'none',
-      exitActive: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, styles.exitActiveRight, direction === 'right'), _defineProperty__default["default"](_classNames3, styles.exitActiveLeft, direction === 'left'), _defineProperty__default["default"](_classNames3, styles.exitActiveTop, direction === 'top'), _defineProperty__default["default"](_classNames3, styles.exitActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
+      exitActive: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.exitActiveRight, direction === 'right'), styles.exitActiveLeft, direction === 'left'), styles.exitActiveTop, direction === 'top'), styles.exitActiveBottom, direction === 'bottom')) || 'none'
     };
   }, [direction, screenIndex]);
   return {
@@ -156,7 +139,7 @@ function getScreenFieldsWithStates(definition) {
       label = _ref2.label,
       _ref2$defaultValue = _ref2.defaultValue,
       defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
-    return [].concat(_toConsumableArray__default["default"](statesFields), _toConsumableArray__default["default"](repeatable ? [{
+    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
       type: 'items',
       name: fieldName || id,
       label: label,
@@ -167,23 +150,23 @@ function getScreenFieldsWithStates(definition) {
         type: 'fields',
         fields: fields
       }
-    }] : []), _toConsumableArray__default["default"](!repeatable && fieldName !== null ? [{
+    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
       type: 'fields',
       name: fieldName,
       stateId: id,
       fields: fields
-    }] : []), _toConsumableArray__default["default"](!repeatable && fieldName === null ? fields.map(function (it) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
         stateId: id
       });
     }) : []));
   }, []);
-  return [].concat(_toConsumableArray__default["default"](extraFields), _toConsumableArray__default["default"](screenFields));
+  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
 }
 
 var createScreen = function createScreen(definition) {
   var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var finalDefinition = isString__default["default"](definition) ? {
+  var finalDefinition = isString(definition) ? {
     id: definition
   } : definition;
   var id = finalDefinition.id;
@@ -194,13 +177,13 @@ var createScreen = function createScreen(definition) {
       name = _ref$name === void 0 ? null : _ref$name,
       _ref$defaultValue = _ref.defaultValue,
       defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
-    var newAll = _objectSpread__default["default"]({}, all);
+    var newAll = _objectSpread({}, all);
     if (name !== null && defaultValue !== null) {
       newAll[name] = defaultValue;
     }
     return newAll;
   }, {});
-  return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({
+  return _objectSpread(_objectSpread(_objectSpread({
     type: id
   }, defaultValueFields), data), {}, {
     id: uuid.v1()
@@ -212,8 +195,8 @@ var deleteScreen = function deleteScreen(story, screenId) {
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$c);
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
+    currentValue = _objectWithoutProperties(_ref, _excluded$c);
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
     components: components.filter(function (_ref2) {
       var id = _ref2.id;
       return id !== screenId;
@@ -226,12 +209,12 @@ var duplicateScreen = function duplicateScreen(story, screenId) {
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$b);
+    currentValue = _objectWithoutProperties(_ref, _excluded$b);
   var screen = components.find(function (it) {
     return it.id === screenId;
   }) || null;
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
-    components: screen !== null ? [].concat(_toConsumableArray__default["default"](components), [_objectSpread__default["default"](_objectSpread__default["default"]({}, screen), {}, {
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: screen !== null ? [].concat(_toConsumableArray(components), [_objectSpread(_objectSpread({}, screen), {}, {
       id: uuid.v1()
     })]) : components
   });
@@ -243,12 +226,12 @@ var updateScreen = function updateScreen(story, newScreenValue) {
   var _ref = story || {},
     _ref$components = _ref.components,
     components = _ref$components === void 0 ? [] : _ref$components,
-    currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+    currentValue = _objectWithoutProperties(_ref, _excluded$a);
   var index = components.findIndex(function (it) {
     return it.id === newScreenId;
   });
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
-    components: [].concat(_toConsumableArray__default["default"](components.slice(0, index)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, components[index]), newScreenValue)], _toConsumableArray__default["default"](components.slice(index + 1)))
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: [].concat(_toConsumableArray(components.slice(0, index)), [_objectSpread(_objectSpread({}, components[index]), newScreenValue)], _toConsumableArray(components.slice(index + 1)))
   });
 };
 
@@ -270,8 +253,8 @@ var getFieldByName = function getFieldByName(fields, name) {
 
 var _excluded$9 = ["className", "dots"];
 var propTypes$o = {
-  dots: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  dots: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$o = {
   dots: false,
@@ -280,12 +263,12 @@ var defaultProps$o = {
 var SettingsButton = function SettingsButton(_ref) {
   var className = _ref.className,
     dots = _ref.dots,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
-  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement(components.Button, Object.assign({
     className: className,
     theme: "secondary",
     size: "sm",
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: dots ? faEllipsisV.faEllipsisV : faCogs.faCogs
     })
   }, props));
@@ -295,9 +278,9 @@ SettingsButton.defaultProps = defaultProps$o;
 
 var _excluded$8 = ["name", "form"];
 var propTypes$n = {
-  name: PropTypes__default["default"].string,
-  form: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  name: PropTypes.string,
+  form: PropTypes.string,
+  children: PropTypes.node
 };
 var defaultProps$n = {
   name: null,
@@ -307,13 +290,13 @@ var defaultProps$n = {
 var FieldWithContexts = function FieldWithContexts(_ref) {
   var name = _ref.name,
     form = _ref.form,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var definition = contexts.useScreenDefinition() || null;
   var _definition$states = definition.states,
     states = _definition$states === void 0 ? null : _definition$states;
   var screenFields = getScreenFieldsWithStates(definition);
   var nameParts = name.split('.');
-  var _nameParts = _slicedToArray__default["default"](nameParts, 1),
+  var _nameParts = _slicedToArray(nameParts, 1),
     _nameParts$ = _nameParts[0],
     stateId = _nameParts$ === void 0 ? null : _nameParts$;
   var currentState = states !== null ? states.find(function (_ref2) {
@@ -334,19 +317,19 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
     return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
   }) : screenFields;
   if (currentState !== null) {
-    finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](nameParts.slice(1))) : nameParts.slice(1);
+    finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(nameParts.slice(1))) : nameParts.slice(1);
   }
   var formComponents = contexts.useFormsComponents();
-  return definition !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]({
+  return definition !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames({
       'p-2': form === null
     })
-  }, finalNameParts.length > 0 ? /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
+  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(components.FieldForm, Object.assign({
     fields: finalScreenFields,
     formComponents: formComponents,
     name: finalNameParts.join('.'),
     form: form
-  }, props)) : /*#__PURE__*/React__default["default"].createElement(fields.Fields, Object.assign({
+  }, props)) : /*#__PURE__*/React.createElement(fields.Fields, Object.assign({
     fields: stateFields
   }, props))) : null;
 };
@@ -357,10 +340,10 @@ var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"mi
 
 var propTypes$m = {
   value: core.PropTypes.component,
-  className: PropTypes__default["default"].string,
-  gotoFieldForm: PropTypes__default["default"].func.isRequired,
-  closeFieldForm: PropTypes__default["default"].func.isRequired,
-  onChange: PropTypes__default["default"].func
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.func
   // onClickDelete: PropTypes.func,
 };
 
@@ -394,11 +377,11 @@ var ScreenForm = function ScreenForm(_ref) {
   //         onClickDelete(value);
   //     }
   // }, [intl, onClickDelete, value]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$i.inner
-  }, fields$1 !== null ? /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
+  }, fields$1 !== null ? /*#__PURE__*/React.createElement(fields.Fields, {
     fields: fields$1,
     value: value,
     onChange: onChange,
@@ -413,11 +396,11 @@ var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
 
 var propTypes$l = {
   story: core.PropTypes.story,
-  screenId: PropTypes__default["default"].string,
-  field: PropTypes__default["default"].string,
-  form: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string.isRequired,
-  className: PropTypes__default["default"].string
+  screenId: PropTypes.string,
+  field: PropTypes.string,
+  form: PropTypes.string,
+  url: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
 var defaultProps$l = {
   story: null,
@@ -461,7 +444,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         definitionTitle = _ref3$title === void 0 ? null : _ref3$title;
       return {
         title: definitionTitle,
-        fields: definition !== null ? [].concat(_toConsumableArray__default["default"](getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]) : null,
+        fields: definition !== null ? [].concat(_toConsumableArray(getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]) : null,
         states: states,
         parameters: parameters
       };
@@ -481,7 +464,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       var fieldPath = field.split('/');
 
       // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
-      var _fieldPath = _slicedToArray__default["default"](fieldPath, 1),
+      var _fieldPath = _slicedToArray(fieldPath, 1),
         _fieldPath$ = _fieldPath[0],
         stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
       currentState = screenStates !== null ? screenStates.find(function (_ref4) {
@@ -495,7 +478,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
           repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable,
           _ref5$fieldName = _ref5.fieldName,
           fieldName = _ref5$fieldName === void 0 ? null : _ref5$fieldName;
-        finalFieldPath = (repeatable || fieldName !== null) && fieldPath.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](fieldPath.slice(1))) : fieldPath.slice(1);
+        finalFieldPath = (repeatable || fieldName !== null) && fieldPath.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(fieldPath.slice(1))) : fieldPath.slice(1);
       }
       var lastKeyIndex = finalFieldPath.length - 1;
       var parentItem = null;
@@ -530,7 +513,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         var isLastIndex = keyIndex === lastKeyIndex;
         var pathPrefix = route('screen.field', {
           screen: screenId,
-          field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray__default["default"](finalFieldPath.slice(0, keyIndex + 1))).filter(function (it) {
+          field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(finalFieldPath.slice(0, keyIndex + 1))).filter(function (it) {
             return it !== null;
           })
         });
@@ -538,16 +521,16 @@ var Breadcrumb = function Breadcrumb(_ref) {
         var addNewItem = isLastIndex || isListItems;
         var itemPath = "".concat(pathPrefix).concat(pathSuffix);
         if (parentItem !== null && (withForm || isCurrentSettingsField)) {
-          fieldItems.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, parentItem), {}, {
+          fieldItems.push(_objectSpread(_objectSpread({}, parentItem), {}, {
             url: isCurrentSettingsField ? route('screen.field.form', {
               screen: screenId,
-              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray__default["default"](finalFieldPath.slice(0, keyIndex))).filter(function (it) {
+              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(finalFieldPath.slice(0, keyIndex))).filter(function (it) {
                 return it !== null;
               }),
               form: 'settings'
             }) : route('screen.field', {
               screen: screenId,
-              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray__default["default"](finalFieldPath.slice(0, keyIndex))).filter(function (it) {
+              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(finalFieldPath.slice(0, keyIndex))).filter(function (it) {
                 return it !== null;
               })
             })
@@ -591,7 +574,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     var _ref12 = metadata || {},
       _ref12$title = _ref12.title,
       title = _ref12$title === void 0 ? null : _ref12$title;
-    var typeTitle = screenTitle !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, screenTitle) : null;
+    var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, screenTitle) : null;
     var parametersMessage = intl.formatMessage({
       id: "AHvHaY",
       defaultMessage: [{
@@ -614,7 +597,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     });
     var lastItemsIndex = finalItems.length - 1;
     return finalItems.map(function (it, index) {
-      return index === lastItemsIndex ? _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+      return index === lastItemsIndex ? _objectSpread(_objectSpread({}, it), {}, {
         url: url,
         active: true
       }) : it;
@@ -625,15 +608,15 @@ var Breadcrumb = function Breadcrumb(_ref) {
     history.push(items[itemsLength - 2].url);
   }, [items]);
   var withBack = itemsLength > 1;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withBack ? /*#__PURE__*/React__default["default"].createElement(components.BackButton, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(components.BackButton, {
     onClick: onClickBack,
     className: "me-2 py-0"
-  }) : null, /*#__PURE__*/React__default["default"].createElement(components.Breadcrumb, {
+  }) : null, /*#__PURE__*/React.createElement(components.Breadcrumb, {
     items: items,
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames__default["default"]([styles$h.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames([styles$h.container, 'text-truncate', _defineProperty({}, className, className !== null)])
   }));
 };
 Breadcrumb.propTypes = propTypes$l;
@@ -642,9 +625,9 @@ Breadcrumb.defaultProps = defaultProps$l;
 var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
 var propTypes$k = {
-  className: PropTypes__default["default"].string,
-  onConfirm: PropTypes__default["default"].func,
-  onCancel: PropTypes__default["default"].func
+  className: PropTypes.string,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
 };
 var defaultProps$k = {
   className: null,
@@ -655,39 +638,39 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
   var className = _ref.className,
     onConfirm = _ref.onConfirm,
     onCancel = _ref.onCancel;
-  return /*#__PURE__*/React__default["default"].createElement(components.Modal, null, /*#__PURE__*/React__default["default"].createElement(components.ModalDialog, {
-    title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  return /*#__PURE__*/React.createElement(components.Modal, null, /*#__PURE__*/React.createElement(components.ModalDialog, {
+    title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "p6q/+/",
       defaultMessage: [{
         "type": 0,
         "value": "Delete screen"
       }]
     }),
-    className: classNames__default["default"]([styles$g.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames([styles$g.container, _defineProperty({}, className, className)]),
     onClickClose: onCancel
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.description
-  }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(components.Label, null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
       "type": 0,
       "value": "Are you sure you want to delete this screen?"
     }]
-  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     className: styles$g.actions
-  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }, /*#__PURE__*/React.createElement(components.Button, {
     onClick: onCancel,
     className: "btn-outline-secondary me-2"
-  }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(components.Label, null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "0GT0SI",
     defaultMessage: [{
       "type": 0,
       "value": "Cancel"
     }]
-  }))), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }))), /*#__PURE__*/React.createElement(components.Button, {
     onClick: onConfirm,
     theme: "danger",
-    label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "gRxcTc",
       defaultMessage: [{
         "type": 0,
@@ -702,10 +685,10 @@ DeleteScreenModal.defaultProps = defaultProps$k;
 var styles$f = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterRight":"micromag-editor-form-enterRight","enterLeft":"micromag-editor-form-enterLeft","enterTop":"micromag-editor-form-enterTop","enterBottom":"micromag-editor-form-enterBottom","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveTop":"micromag-editor-form-exitActiveTop","exitActiveBottom":"micromag-editor-form-exitActiveBottom"};
 
 var propTypes$j = {
-  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
-  isTheme: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func
+  value: PropTypes.oneOfType([core.PropTypes.story, core.PropTypes.theme]),
+  isTheme: PropTypes.bool,
+  className: PropTypes.string,
+  onChange: PropTypes.func
 };
 var defaultProps$j = {
   value: null,
@@ -751,19 +734,19 @@ var EditForm = function EditForm(_ref) {
     transitionClassNames = _useFormTransition.classNames,
     transitionTimeout = _useFormTransition.timeout;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     screenSettingsOpened = _useState2[0],
     setScreenSettingsOpened = _useState2[1];
   var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     deleteScreenModalOpened = _useState4[0],
     setDeleteScreenModalOpened = _useState4[1];
   var _useState5 = React.useState({}),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     fieldForms = _useState6[0],
     setFieldForms = _useState6[1];
   var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    _useState8 = _slicedToArray(_useState7, 2),
     fieldContext = _useState8[0],
     setFieldContext = _useState8[1];
 
@@ -775,11 +758,11 @@ var EditForm = function EditForm(_ref) {
     var hasField = field !== null;
     var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
     var _ref4 = field !== null ? field.split('.') : [],
-      _ref5 = _slicedToArray__default["default"](_ref4, 1),
+      _ref5 = _slicedToArray(_ref4, 1),
       _ref5$ = _ref5[0],
       rootFieldName = _ref5$ === void 0 ? null : _ref5$;
     var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
-      _ref7 = _slicedToArray__default["default"](_ref6, 1),
+      _ref7 = _slicedToArray(_ref6, 1),
       _ref7$ = _ref7[0],
       currentStateId = _ref7$ === void 0 ? null : _ref7$;
     var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
@@ -791,12 +774,12 @@ var EditForm = function EditForm(_ref) {
       stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
     routePush(hasField ? fieldRoute : 'screen', {
       screen: screenId,
-      field: field !== null ? [stateId].concat(_toConsumableArray__default["default"](field.split('.'))).filter(function (it) {
+      field: field !== null ? [stateId].concat(_toConsumableArray(field.split('.'))).filter(function (it) {
         return it !== null;
       }) : null,
       form: formName !== null ? utils.slug(formName) : null
     });
-    setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
+    setFieldForms(_objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
     setFieldContext(context);
   }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
   var closeFieldForm = React.useCallback(function (field) {
@@ -807,7 +790,7 @@ var EditForm = function EditForm(_ref) {
       history.push(pastUrl);
     }
     setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
-      return key !== fieldKey ? _objectSpread__default["default"](_objectSpread__default["default"]({}, map), {}, _defineProperty__default["default"]({}, key, fieldForms[key])) : map;
+      return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
     }, {}));
   }, [history, screenId, fieldForms, setFieldForms]);
   var triggerOnChange = React.useCallback(function (newValue) {
@@ -860,7 +843,7 @@ var EditForm = function EditForm(_ref) {
   var dropdownItems = [!isTheme ? {
     id: 'duplicate',
     type: 'button',
-    label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "IBjY5r",
       defaultMessage: [{
         "type": 0,
@@ -871,7 +854,7 @@ var EditForm = function EditForm(_ref) {
   } : null, {
     id: 'delete',
     type: 'button',
-    label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "hpiKce",
       defaultMessage: [{
         "type": 0,
@@ -882,49 +865,49 @@ var EditForm = function EditForm(_ref) {
   }].filter(function (it) {
     return it !== null;
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['d-flex', 'flex-column', className])
-  }, screenId !== null ? /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['d-flex', 'flex-column', className])
+  }, screenId !== null ? /*#__PURE__*/React.createElement(components.Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
-  }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
+  }, /*#__PURE__*/React.createElement(Breadcrumb, {
     story: value,
     url: url,
     screenId: screenId,
     field: fieldParams,
     form: formParams,
     className: "me-auto"
-  }), fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }), fieldParams === null ? /*#__PURE__*/React.createElement("div", {
     className: "dropdown"
-  }, /*#__PURE__*/React__default["default"].createElement(SettingsButton, {
+  }, /*#__PURE__*/React.createElement(SettingsButton, {
     onClick: onSettingsClick,
     dots: true,
     className: "py-0",
     theme: "default"
-  }), /*#__PURE__*/React__default["default"].createElement(components.DropdownMenu, {
+  }), /*#__PURE__*/React.createElement(components.DropdownMenu, {
     align: "end",
     items: dropdownItems,
     visible: screenSettingsOpened,
     onClickOutside: onDropdownClickOutside
-  })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
-  }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
+  })) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
+  }, screen !== null ? /*#__PURE__*/React.createElement(reactTransitionGroup.TransitionGroup, {
     className: "w-100 flex-grow-1",
     childFactory: function childFactory(child) {
-      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+      return /*#__PURE__*/React.cloneElement(child, {
         classNames: transitionClassNames
       });
     }
-  }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  }, fieldParams !== null ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
     timeout: transitionTimeout,
     key: "field-".concat(fieldParams, "-").concat(formParams)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$f.panel])
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$f.panel])
+  }, /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
+  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
@@ -933,31 +916,31 @@ var EditForm = function EditForm(_ref) {
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
     onChange: onScreenFormChange
-  })))) : /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+  })))) : /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
     classNames: transitionClassNames,
     timeout: transitionTimeout,
     key: "screen-".concat(screen.id)
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$f.panel]),
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$f.panel]),
     key: "screen-".concat(screen.id)
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
+  }, /*#__PURE__*/React.createElement(ScreenForm, {
     value: screen,
     className: styles$f.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
-  }))))) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
+  }))))) : /*#__PURE__*/React.createElement(components.Empty, {
     className: "w-100 m-2"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "QfpTKK",
     defaultMessage: [{
       "type": 0,
       "value": "Select a screen..."
     }],
     decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React__default["default"].createElement(DeleteScreenModal, {
+  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
     onConfirm: onDeleteScreenConfirm,
     onCancel: onDeleteScreenCancel
   }) : null);
@@ -988,8 +971,8 @@ var useThemeValue = function useThemeValue(value) {
     }
     var _ref = value || {};
       _ref.components;
-      var themeValue = _objectWithoutProperties__default["default"](_ref, _excluded$7);
-    return value !== null ? _objectSpread__default["default"]({
+      var themeValue = _objectWithoutProperties(_ref, _excluded$7);
+    return value !== null ? _objectSpread({
       theme: themeValue
     }, value) : value;
   }, [value, isTheme]);
@@ -1000,8 +983,8 @@ var styles$e = {"container":"micromag-editor-menus-devices-container","button":"
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$i = {
-  color: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  color: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$i = {
   color: 'currentColor',
@@ -1010,7 +993,7 @@ var defaultProps$i = {
 var DesktopIcon = function DesktopIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     version: "1.1",
@@ -1021,7 +1004,7 @@ var DesktopIcon = function DesktopIcon(_ref) {
     viewBox: "0 0 100 100",
     xmlSpace: "preserve",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     fill: color,
     d: "M84 17H16c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h22v4.2c-.1.4-.9 1.5-1.3 2-1.1 1.4-2.2 2.8-1.4 4.4.3.7 1.1 1.4 2.7 1.4h23c1 0 3.3 0 4.1-1.8.8-1.8-.6-3.2-1.8-4.5-.4-.5-1.1-1.2-1.3-1.6V71h22c3.3 0 6-2.7 6-6V23c0-3.3-2.7-6-6-6zM40.3 79c.9-1.1 1.7-2.4 1.7-3.8V71h16v4.2c0 1.4 1 2.7 2 3.8H40.3zM86 65c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2v-6h72v6zm0-10H14V23c0-1.1.9-2 2-2h68c1.1 0 2 .9 2 2v32z"
   }));
@@ -1031,8 +1014,8 @@ DesktopIcon.defaultProps = defaultProps$i;
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$h = {
-  color: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  color: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$h = {
   color: 'currentColor',
@@ -1041,7 +1024,7 @@ var defaultProps$h = {
 var MobileIcon = function MobileIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     version: "1.1",
@@ -1052,7 +1035,7 @@ var MobileIcon = function MobileIcon(_ref) {
     viewBox: "0 0 100 100",
     xmlSpace: "preserve",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     fill: color,
     d: "M66 11H34c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6V17c0-3.3-2.7-6-6-6zm2 72c0 1.1-.9 2-2 2H34c-1.1 0-2-.9-2-2v-4h36v4zm0-8H32V25h36v50zm0-54H32v-4c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v4z"
   }));
@@ -1070,9 +1053,9 @@ var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"m
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$g = {
-  device: PropTypes__default["default"].string.isRequired,
+  device: PropTypes.string.isRequired,
   iconComponents: core.PropTypes.components,
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$g = {
   iconComponents: DeviceIcons,
@@ -1082,11 +1065,11 @@ var DeviceButton = function DeviceButton(_ref) {
   var device = _ref.device,
     className = _ref.className,
     iconComponents = _ref.iconComponents,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+    props = _objectWithoutProperties(_ref, _excluded$6);
   var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
-  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
+  return /*#__PURE__*/React.createElement(components.Button, Object.assign({
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
+  }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
     className: styles$d.icon
   }));
 };
@@ -1096,8 +1079,8 @@ DeviceButton.defaultProps = defaultProps$g;
 var _excluded$5 = ["id"];
 var propTypes$f = {
   items: core.PropTypes.menuItems,
-  className: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func
+  className: PropTypes.string,
+  onClickItem: PropTypes.func
 };
 var defaultProps$f = {
   items: [],
@@ -1108,14 +1091,14 @@ var DevicesMenu = function DevicesMenu(_ref) {
   var items = _ref.items,
     className = _ref.className,
     onClickItem = _ref.onClickItem;
-  return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
+  return /*#__PURE__*/React.createElement(components.Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
-        itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
-      return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
+        itemProps = _objectWithoutProperties(item, _excluded$5);
+      return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
         className: styles$e.button,
@@ -1132,19 +1115,19 @@ DevicesMenu.defaultProps = defaultProps$f;
 var styles$c = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","border":"micromag-editor-buttons-screen-border","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
 var propTypes$e = {
-  active: PropTypes__default["default"].bool,
-  id: PropTypes__default["default"].string,
-  href: PropTypes__default["default"].string,
+  active: PropTypes.bool,
+  id: PropTypes.string,
+  href: PropTypes.string,
   label: core.PropTypes.label,
-  icon: PropTypes__default["default"].node,
-  title: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].node,
-  refButton: PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any // eslint-disable-line
+  icon: PropTypes.node,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  refButton: PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
   }),
 
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$e = {
   active: false,
@@ -1159,7 +1142,6 @@ var defaultProps$e = {
   className: null
 };
 var ScreenButton = function ScreenButton(_ref) {
-  var _ref2;
   var active = _ref.active,
     id = _ref.id,
     href = _ref.href,
@@ -1170,17 +1152,17 @@ var ScreenButton = function ScreenButton(_ref) {
     title = _ref.title,
     onClick = _ref.onClick,
     refButton = _ref.refButton;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$c.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$c.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
-  }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$c.container, 'rounded', _defineProperty(_defineProperty({}, styles$c.active, active), className, className !== null)])
+  }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
     className: styles$c.screen
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$c.inner
-  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$c.icon
-  }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$c.label
-  }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }, label) : null)), /*#__PURE__*/React.createElement(components.Button, {
     className: styles$c.button,
     withoutStyle: true,
     id: id,
@@ -1188,14 +1170,14 @@ var ScreenButton = function ScreenButton(_ref) {
     title: title,
     onClick: onClick,
     refButton: refButton
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$c.border, 'rounded'])
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$c.border, 'rounded'])
   })));
 };
 ScreenButton.propTypes = propTypes$e;
 ScreenButton.defaultProps = defaultProps$e;
-var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default["default"].createElement(ScreenButton, Object.assign({}, props, {
+var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
     refButton: ref
   }));
 });
@@ -1204,17 +1186,17 @@ var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","n
 
 var propTypes$d = {
   screen: core.PropTypes.screenComponent,
-  screenState: PropTypes__default["default"].string,
-  index: PropTypes__default["default"].number.isRequired,
-  href: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string,
-  active: PropTypes__default["default"].bool,
-  withPlaceholder: PropTypes__default["default"].bool,
-  withIndexIndicator: PropTypes__default["default"].bool,
-  withName: PropTypes__default["default"].bool,
-  onClick: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  screenState: PropTypes.string,
+  index: PropTypes.number.isRequired,
+  href: PropTypes.string,
+  title: PropTypes.string,
+  active: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  withIndexIndicator: PropTypes.bool,
+  withName: PropTypes.bool,
+  onClick: PropTypes.func,
+  onClickItem: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$d = {
   screen: null,
@@ -1230,7 +1212,6 @@ var defaultProps$d = {
   className: null
 };
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
-  var _ref2;
   var screen = _ref.screen,
     screenState = _ref.screenState,
     index = _ref.index,
@@ -1251,12 +1232,12 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     visible = _useIsVisible.visible;
   var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
   var finalTitle = utils.isMessage(title) ? intl.formatMessage(title) : title || null;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: ref
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
+  }, /*#__PURE__*/React.createElement(ScreenButton$1, {
     href: href,
     active: active,
-    className: classNames__default["default"]([styles$b.button, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$b.withIndex, withIndexIndicator || withName), _ref2)]),
+    className: classNames([styles$b.button, _defineProperty(_defineProperty({}, className, className !== null), styles$b.withIndex, withIndexIndicator || withName)]),
     title: finalTitle,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1266,15 +1247,15 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
         onClickItem(screen, index);
       }
     }
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, {
+  }, /*#__PURE__*/React.createElement(ScreenComponent, {
     screen: screen,
     screenState: screenState,
     className: styles$b.screen,
     hidden: !visible,
     withSize: true
-  }), index !== null && withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }), index !== null && withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.index
-  }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.name
   }, finalTitle || null) : null));
 };
@@ -1285,10 +1266,10 @@ var styles$a = {"container":"micromag-editor-partials-screen-states-container","
 
 var propTypes$c = {
   screen: core.PropTypes.screen.isRequired,
-  screenState: PropTypes__default["default"].string,
+  screenState: PropTypes.string,
   value: core.PropTypes.story.isRequired,
-  className: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func
+  className: PropTypes.string,
+  onChange: PropTypes.func
 };
 var defaultProps$c = {
   screenState: null,
@@ -1309,7 +1290,7 @@ function ScreenStates(_ref) {
     field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
   var states = useScreenStates(screen);
   var _ref2 = field !== null ? field.split('/') : [],
-    _ref3 = _toArray__default["default"](_ref2),
+    _ref3 = _toArray(_ref2),
     _ref3$ = _ref3[0],
     stateParam = _ref3$ === void 0 ? null : _ref3$,
     stateIndexes = _ref3.slice(1);
@@ -1320,20 +1301,20 @@ function ScreenStates(_ref) {
     var id = _ref4.id;
     return id === stateParam;
   }) !== -1 ? stateParam : null;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: "d-flex align-items-end m-n1"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "p-1 align-self-stretch d-flex flex-column"
-  }, /*#__PURE__*/React__default["default"].createElement("h6", {
-    className: classNames__default["default"](['fw-normal', 'invisible', styles$a.title])
-  }, "Settings"), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: classNames__default["default"]([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: classNames(['fw-normal', 'invisible', styles$a.title])
+  }, "Settings"), /*#__PURE__*/React.createElement(components.Button, {
+    className: classNames([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
     theme: screenParam !== null && field === null ? 'primary' : 'secondary',
     outline: screenParam === null || field !== null,
     size: "lg",
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faCogs.faCogs
     }),
     href: url('screen', {
@@ -1360,8 +1341,8 @@ function ScreenStates(_ref) {
       });
       var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
       var currentFieldValue = currentScreenValue[fieldName || id] || [];
-      var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-        components: [].concat(_toConsumableArray__default["default"](currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, currentScreenValue), {}, _defineProperty__default["default"]({}, fieldName || id, [].concat(_toConsumableArray__default["default"](currentFieldValue), [{}])))], _toConsumableArray__default["default"](currentComponentsValue.slice(currentScreenIndex + 1)))
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, [].concat(_toConsumableArray(currentFieldValue), [{}])))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
       });
       if (onChange !== null) {
         onChange(newValue);
@@ -1371,16 +1352,16 @@ function ScreenStates(_ref) {
         field: [id, currentFieldValue.length]
       });
     };
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
-    }, /*#__PURE__*/React__default["default"].createElement("h6", {
-      className: classNames__default["default"](['fw-normal', 'text-muted', styles$a.title])
-    }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React__default["default"].createElement("ul", {
+    }, /*#__PURE__*/React.createElement("h6", {
+      className: classNames(['fw-normal', 'text-muted', styles$a.title])
+    }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React.createElement("ul", {
       className: "d-flex list-unstyled m-n1 flex-grow-1"
     }, repeatableItems.map(function (item, index) {
-      return /*#__PURE__*/React__default["default"].createElement("li", {
+      return /*#__PURE__*/React.createElement("li", {
         className: "p-1"
-      }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
+      }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
         index: index,
         withIndexIndicator: true,
         screen: screen,
@@ -1392,18 +1373,18 @@ function ScreenStates(_ref) {
           field: [id, index]
         })
       }));
-    }), !withoutCreate ? /*#__PURE__*/React__default["default"].createElement("li", {
+    }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
       className: "p-1"
-    }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
-      className: classNames__default["default"]([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+    }, /*#__PURE__*/React.createElement(components.Button, {
+      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
       theme: "secondary",
       outline: true,
       size: "lg",
-      icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
         icon: faPlus.faPlus
       }),
       onClick: onClickAdd
-    })) : null) : /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
+    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
       screen: screen,
       screenState: id,
       className: styles$a.button,
@@ -1427,15 +1408,15 @@ ScreenStates.defaultProps = defaultProps$c;
 var styles$9 = {"container":"micromag-editor-preview-container","story":"micromag-editor-preview-story","noStory":"micromag-editor-preview-noStory","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","devices":"micromag-editor-preview-devices","screen-medium":"micromag-editor-preview-screen-medium"};
 
 var propTypes$b = {
-  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
+  value: PropTypes.oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   devices: core.PropTypes.devices,
-  device: PropTypes__default["default"].string,
+  device: PropTypes.string,
   viewerTheme: core.PropTypes.viewerTheme,
-  isTheme: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  onScreenChange: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
-  withoutDevicesSizes: PropTypes__default["default"].bool
+  isTheme: PropTypes.bool,
+  className: PropTypes.string,
+  onScreenChange: PropTypes.func,
+  onChange: PropTypes.func,
+  withoutDevicesSizes: PropTypes.bool
 };
 var defaultProps$b = {
   value: null,
@@ -1457,7 +1438,6 @@ var defaultProps$b = {
   withoutDevicesSizes: true
 };
 var EditorPreview = function EditorPreview(_ref) {
-  var _ref8;
   var value = _ref.value,
     viewerTheme = _ref.viewerTheme,
     isTheme = _ref.isTheme,
@@ -1486,7 +1466,7 @@ var EditorPreview = function EditorPreview(_ref) {
 
   // Get device
   var _useState = React.useState(initialDevice || devices[0].id),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     deviceId = _useState2[0],
     setDeviceId = _useState2[1];
   var onClickDeviceItem = React.useCallback(function (e, it) {
@@ -1532,7 +1512,7 @@ var EditorPreview = function EditorPreview(_ref) {
   }, [valueParsed, screenId]);
   var currentScreenStates = useScreenStates(currentScreen);
   var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
-    _ref5 = _slicedToArray__default["default"](_ref4, 1),
+    _ref5 = _slicedToArray(_ref4, 1),
     _ref5$ = _ref5[0],
     screenStateParam = _ref5$ === void 0 ? null : _ref5$;
   var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
@@ -1547,30 +1527,30 @@ var EditorPreview = function EditorPreview(_ref) {
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, screens.map(function (screenName) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.container, screens.map(function (screenName) {
       return styles$9["screen-".concat(screenName)];
-    }), (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className), _defineProperty__default["default"](_ref8, styles$9.withoutDevicesSizes, withoutDevicesSizes), _ref8)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    }), _defineProperty(_defineProperty({}, className, className), styles$9.withoutDevicesSizes, withoutDevicesSizes)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.inner
-  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.top, 'px-1'])
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenStates, {
+  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.top, 'px-1'])
+  }, /*#__PURE__*/React.createElement(ScreenStates, {
     screen: currentScreen,
     screenState: currentScreenStateId,
     value: value,
     onChange: onChange
-  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: styles$9.bottom
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.inner,
     ref: bottomRef
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.preview,
     style: previewStyle
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.viewerContainer
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
+  }, /*#__PURE__*/React.createElement(contexts.PlaybackProvider, null, /*#__PURE__*/React.createElement(viewer.Viewer, {
     story: valueParsed,
     storyIsParsed: true,
     screen: screenId,
@@ -1584,11 +1564,11 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutTransitions: true,
     withoutGestures: true,
     withoutMenu: true
-  })))))), !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
+  })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.deviceMenu
-  }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
+  }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+      return _objectSpread(_objectSpread({}, it), {}, {
         active: it.id === deviceId
       });
     }),
@@ -1673,11 +1653,11 @@ function flatten(items) {
   var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
   return items.reduce(function (acc, item, index) {
-    return [].concat(_toConsumableArray__default["default"](acc), [_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+    return [].concat(_toConsumableArray(acc), [_objectSpread(_objectSpread({}, item), {}, {
       parentId: item.parentId || parentId,
       depth: item.parentId ? 1 : 0,
       index: index // For some reason this aint enough
-    })], _toConsumableArray__default["default"](flatten(item.children || [], item.id, depth + 1)));
+    })], _toConsumableArray(flatten(item.children || [], item.id, depth + 1)));
   }, []);
 }
 function flattenTree(items) {
@@ -1694,16 +1674,16 @@ function buildTree(flattenedItems) {
     id: 'root',
     children: []
   };
-  var nodes = _defineProperty__default["default"]({}, root.id, root);
+  var nodes = _defineProperty({}, root.id, root);
   var items = flattenedItems.map(function (item) {
-    return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+    return _objectSpread(_objectSpread({}, item), {}, {
       children: []
     });
   });
   // console.log('BUILD');
   var indexes = {};
   // eslint-disable-next-line no-restricted-syntax
-  var _iterator = _createForOfIteratorHelper__default["default"](items),
+  var _iterator = _createForOfIteratorHelper(items),
     _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
@@ -1723,7 +1703,7 @@ function buildTree(flattenedItems) {
         children: children,
         index: indexes[parentId]
       };
-      parent.children.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
+      parent.children.push(_objectSpread(_objectSpread({}, item), {}, {
         index: indexes[parentId]
       }));
     }
@@ -1756,7 +1736,7 @@ function removeItem(items, id) {
   var newItems = [];
 
   // eslint-disable-next-line no-restricted-syntax
-  var _iterator2 = _createForOfIteratorHelper__default["default"](items),
+  var _iterator2 = _createForOfIteratorHelper(items),
     _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
@@ -1779,7 +1759,7 @@ function removeItem(items, id) {
 }
 function setProperty(items, id, property, setter) {
   // eslint-disable-next-line no-restricted-syntax
-  var _iterator3 = _createForOfIteratorHelper__default["default"](items),
+  var _iterator3 = _createForOfIteratorHelper(items),
     _step3;
   try {
     for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
@@ -1798,7 +1778,7 @@ function setProperty(items, id, property, setter) {
   } finally {
     _iterator3.f();
   }
-  return _toConsumableArray__default["default"](items);
+  return _toConsumableArray(items);
 }
 function countChildren(items) {
   var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -1819,7 +1799,7 @@ function getChildCount(items, id) {
   return item ? countChildren(item.children || []) : 0;
 }
 function removeChildrenOf(items, ids) {
-  var excludeParentIds = _toConsumableArray__default["default"](ids);
+  var excludeParentIds = _toConsumableArray(ids);
   return items.filter(function (item) {
     if (item.parentId && excludeParentIds.includes(item.parentId)) {
       var _item$children2 = item.children,
@@ -1860,14 +1840,14 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
         switch (event.code) {
           case core$1.KeyboardCode.Left:
             if (depth > minDepth) {
-              return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentCoordinates), {}, {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
                 x: currentCoordinates.x - indentationWidth
               });
             }
             break;
           case core$1.KeyboardCode.Right:
             if (depth < maxDepth) {
-              return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentCoordinates), {}, {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
                 x: currentCoordinates.x + indentationWidth
               });
             }
@@ -1948,32 +1928,32 @@ var styles$8 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-w
 
 var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
 var propTypes$a = {
-  childCount: PropTypes__default["default"].number,
-  clone: PropTypes__default["default"].bool,
-  collapsed: PropTypes__default["default"].bool,
-  depth: PropTypes__default["default"].number.isRequired,
-  disableInteraction: PropTypes__default["default"].bool,
-  disableSelection: PropTypes__default["default"].bool,
-  ghost: PropTypes__default["default"].bool,
+  childCount: PropTypes.number,
+  clone: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  depth: PropTypes.number.isRequired,
+  disableInteraction: PropTypes.bool,
+  disableSelection: PropTypes.bool,
+  ghost: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
-  handleProps: PropTypes__default["default"].any,
-  indicator: PropTypes__default["default"].bool,
-  indentationWidth: PropTypes__default["default"].number.isRequired,
-  value: PropTypes__default["default"].string,
-  onCollapse: PropTypes__default["default"].func,
-  onRemove: PropTypes__default["default"].func,
-  onClick: PropTypes__default["default"].func,
+  handleProps: PropTypes.any,
+  indicator: PropTypes.bool,
+  indentationWidth: PropTypes.number.isRequired,
+  value: PropTypes.string,
+  onCollapse: PropTypes.func,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  wrapperRef: PropTypes__default["default"].any,
-  style: PropTypes__default["default"].shape({
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired,
-    transform: PropTypes__default["default"].string.isRequired
+  wrapperRef: PropTypes.any,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired
   }),
-  showId: PropTypes__default["default"].bool,
-  showCount: PropTypes__default["default"].bool,
-  showCollapsedCount: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node
+  showId: PropTypes.bool,
+  showCount: PropTypes.bool,
+  showCollapsedCount: PropTypes.bool,
+  children: PropTypes.node
 };
 var defaultProps$a = {
   childCount: null,
@@ -1996,7 +1976,6 @@ var defaultProps$a = {
   children: null
 };
 var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref2;
   var childCount = _ref.childCount,
     clone = _ref.clone,
     depth = _ref.depth,
@@ -2017,40 +1996,40 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     var showCount = _ref.showCount,
     showCollapsedCount = _ref.showCollapsedCount,
     children = _ref.children,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    className: classNames__default["default"]([styles$8.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$8.clone, clone), _defineProperty__default["default"](_ref2, styles$8.ghost, ghost), _defineProperty__default["default"](_ref2, styles$8.indicator, indicator), _defineProperty__default["default"](_ref2, styles$8.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$8.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$8.withChildren, onCollapse !== null), _ref2)]),
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$8.wrapper, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$8.clone, clone), styles$8.ghost, ghost), styles$8.indicator, indicator), styles$8.disableSelection, disableSelection), styles$8.disableInteraction, disableInteraction), styles$8.withChildren, onCollapse !== null)]),
     ref: wrapperRef,
     style: {
       marginLeft: "".concat(indentationWidth * depth, "px"),
       marginRight: "".concat(5 * depth, "px")
     }
-  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, props), /*#__PURE__*/React.createElement("div", {
     className: styles$8.inner,
     ref: ref,
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
-    className: classNames__default["default"]([styles$8.button, styles$8.handle]),
+  }, /*#__PURE__*/React.createElement("button", Object.assign({
+    className: classNames([styles$8.button, styles$8.handle]),
     type: "button"
-  }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, handleProps), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$8.icon,
     icon: faGripLines.faGripLines
-  })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
+  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onRemove
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faTimes.faTimes
-  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
     className: styles$8.count
-  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
     className: styles$8.collapsedCount
-  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
+  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames__default["default"](styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faAngleDown.faAngleDown
-  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, /*#__PURE__*/React.createElement("div", {
     className: styles$8.children
   }, children)));
 });
@@ -2061,27 +2040,27 @@ var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-contain
 
 var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
 var propTypes$9 = {
-  id: PropTypes__default["default"].string.isRequired,
-  index: PropTypes__default["default"].number.isRequired,
-  depth: PropTypes__default["default"].number.isRequired,
-  component: PropTypes__default["default"].func,
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  depth: PropTypes.number.isRequired,
+  component: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  value: PropTypes__default["default"].object,
-  style: PropTypes__default["default"].shape({
-    width: PropTypes__default["default"].number.isRequired,
-    height: PropTypes__default["default"].number.isRequired,
-    scaledWidth: PropTypes__default["default"].number.isRequired,
-    scaledHeight: PropTypes__default["default"].number.isRequired,
-    transform: PropTypes__default["default"].string.isRequired,
-    scale: PropTypes__default["default"].number.isRequired
+  value: PropTypes.object,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    scaledWidth: PropTypes.number.isRequired,
+    scaledHeight: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired,
+    scale: PropTypes.number.isRequired
   }),
-  smallScale: PropTypes__default["default"].number,
-  collapsed: PropTypes__default["default"].bool,
-  onCollapse: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func,
+  smallScale: PropTypes.number,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onClickItem: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  childValue: PropTypes__default["default"].object,
-  isLastChild: PropTypes__default["default"].bool
+  childValue: PropTypes.object,
+  isLastChild: PropTypes.bool
 };
 var defaultProps$9 = {
   component: null,
@@ -2112,7 +2091,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     onClickItem = _ref2.onClickItem,
     childValue = _ref2.childValue;
     _ref2.isLastChild;
-    var props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
+    var props = _objectWithoutProperties(_ref2, _excluded$3);
   var _useSortable = sortable.useSortable({
       id: id,
       animateLayoutChanges: animateLayoutChanges
@@ -2157,9 +2136,9 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       onPointerUp(e);
     }
   }, [onPointerUp]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.container])
-  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$7.container])
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -2167,17 +2146,17 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     ghost: isDragging,
     disableSelection: iOS,
     disableInteraction: isSorting,
-    handleProps: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, attributes), listeners), {}, {
+    handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
       onPointerDown: onClickAction,
       onPointerUp: cancellingPointerUp
     }),
     collapsed: collapsed,
     onCollapse: onCollapse
-  }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$7.parent
-  }, /*#__PURE__*/React__default["default"].createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$7.child
-  }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
+  }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
@@ -2208,25 +2187,25 @@ var measuring = {
     strategy: core$1.MeasuringStrategy.Always
   }
 };
-var dropAnimation = _objectSpread__default["default"](_objectSpread__default["default"]({}, core$1.defaultDropAnimation), {}, {
+var dropAnimation = _objectSpread(_objectSpread({}, core$1.defaultDropAnimation), {}, {
   dragSourceOpacity: 0.5
 });
 var adjustTranslate = function adjustTranslate(_ref) {
   var transform = _ref.transform;
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, transform), {}, {
+  return _objectSpread(_objectSpread({}, transform), {}, {
     y: transform.y - 25
   });
 };
 var propTypes$8 = {
-  collapsible: PropTypes__default["default"].bool,
+  collapsible: PropTypes.bool,
   // eslint-disable-next-line react/forbid-prop-types
-  items: PropTypes__default["default"].array,
-  indentationWidth: PropTypes__default["default"].number,
-  indicator: PropTypes__default["default"].bool,
-  removable: PropTypes__default["default"].bool,
-  component: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func
+  items: PropTypes.array,
+  indentationWidth: PropTypes.number,
+  indicator: PropTypes.bool,
+  removable: PropTypes.bool,
+  component: PropTypes.func,
+  onClickItem: PropTypes.func,
+  onChange: PropTypes.func
 };
 var defaultProps$8 = {
   collapsible: true,
@@ -2250,23 +2229,23 @@ var SortableTree = function SortableTree(_ref2) {
   var _useState = React.useState(function () {
       return buildTree(defaultItems);
     }),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
     setItems = _useState2[1];
   var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     activeId = _useState4[0],
     setActiveId = _useState4[1];
   var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    _useState6 = _slicedToArray(_useState5, 2),
     overId = _useState6[0],
     setOverId = _useState6[1];
   var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    _useState8 = _slicedToArray(_useState7, 2),
     offsetLeft = _useState8[0],
     setOffsetLeft = _useState8[1];
   var _useState9 = React.useState(null),
-    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    _useState10 = _slicedToArray(_useState9, 2),
     currentPosition = _useState10[0],
     setCurrentPosition = _useState10[1];
 
@@ -2274,7 +2253,7 @@ var SortableTree = function SortableTree(_ref2) {
   React.useEffect(function () {
     var flat = flattenTree(items);
     var merged = defaultItems.map(function (t1) {
-      return _objectSpread__default["default"](_objectSpread__default["default"]({}, flat.find(function (t2) {
+      return _objectSpread(_objectSpread({}, flat.find(function (t2) {
         return t2.id === t1.id;
       })), t1);
     });
@@ -2287,9 +2266,9 @@ var SortableTree = function SortableTree(_ref2) {
         children = _ref3$children === void 0 ? [] : _ref3$children,
         collapsed = _ref3.collapsed,
         id = _ref3.id;
-      return collapsed && children.length ? [].concat(_toConsumableArray__default["default"](acc), [id]) : acc;
+      return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
     }, []) || null;
-    return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray__default["default"](collapsedItems)) : collapsedItems);
+    return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray(collapsedItems)) : collapsedItems);
   }, [activeId, items, items.length]);
   var projected = activeId && overId ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
   var sensorContext = React.useRef({
@@ -2299,7 +2278,7 @@ var SortableTree = function SortableTree(_ref2) {
   var _useState11 = React.useState(function () {
       return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
     }),
-    _useState12 = _slicedToArray__default["default"](_useState11, 1),
+    _useState12 = _slicedToArray(_useState11, 1),
     coordinateGetter = _useState12[0];
   var sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor), core$1.useSensor(core$1.KeyboardSensor, {
     coordinateGetter: coordinateGetter
@@ -2464,7 +2443,7 @@ var SortableTree = function SortableTree(_ref2) {
         }
         activeTreeItem.children = [];
       }
-      clonedItems[activeIndex] = _objectSpread__default["default"](_objectSpread__default["default"]({}, activeTreeItem), {}, {
+      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
         depth: depth,
         parentId: parentId
       });
@@ -2484,7 +2463,7 @@ var SortableTree = function SortableTree(_ref2) {
             collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
           return {
             id: itemId,
-            props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
+            props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
               group: {
                 collapsed: collapsed,
                 mergeNavItems: true
@@ -2516,7 +2495,7 @@ var SortableTree = function SortableTree(_ref2) {
       });
     });
   }, [setItems, setProperty]);
-  return /*#__PURE__*/React__default["default"].createElement(core$1.DndContext, {
+  return /*#__PURE__*/React.createElement(core$1.DndContext, {
     accessibility: {
       announcements: announcements
     }
@@ -2530,11 +2509,11 @@ var SortableTree = function SortableTree(_ref2) {
     onDragOver: handleDragOver,
     onDragEnd: handleDragEnd,
     onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React__default["default"].createElement(sortable.SortableContext, {
+  }, /*#__PURE__*/React.createElement(sortable.SortableContext, {
     items: sortedIds,
     strategy: sortable.verticalListSortingStrategy
   }, flattenedItems.map(function (_ref19, idx) {
-    var _flattenedItems, _ref22;
+    var _flattenedItems;
     var id = _ref19.id,
       _ref19$children = _ref19.children,
       children = _ref19$children === void 0 ? [] : _ref19$children,
@@ -2557,10 +2536,10 @@ var SortableTree = function SortableTree(_ref2) {
         parentId = _ref21$parentId === void 0 ? null : _ref21$parentId;
       return parentId === id;
     }) : null;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([styles$6.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$6.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$6.group, depth === 1), _defineProperty__default["default"](_ref22, styles$6.isLastChild, next === null), _ref22)]),
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles$6.item, _defineProperty(_defineProperty(_defineProperty({}, styles$6.parent, onCollapse !== null && !collapsed), styles$6.group, depth === 1), styles$6.isLastChild, next === null)]),
       key: id
-    }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
+    }, /*#__PURE__*/React.createElement(SortableTreeItem, {
       key: id,
       id: id,
       depth: currentDepth,
@@ -2578,13 +2557,13 @@ var SortableTree = function SortableTree(_ref2) {
       index: idx,
       childValue: (childValue === null || childValue === void 0 ? void 0 : childValue.value) || null
     }));
-  }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(core$1.DragOverlay, {
+  }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React.createElement(core$1.DragOverlay, {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.item,
     key: activeId
-  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
+  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
     id: activeId,
     depth: activeItem.depth,
     clone: true,
@@ -2608,20 +2587,20 @@ var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active",
   _excluded2 = ["id", "screen", "href"];
 var propTypes$7 = {
   items: core.PropTypes.menuItems,
-  withPreview: PropTypes__default["default"].bool,
-  withPlaceholder: PropTypes__default["default"].bool,
-  withName: PropTypes__default["default"].bool,
-  settings: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
-  sortable: PropTypes__default["default"].bool,
-  isTree: PropTypes__default["default"].bool,
-  isVertical: PropTypes__default["default"].bool,
-  noWrap: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  itemClassName: PropTypes__default["default"].string,
-  buttonClassName: PropTypes__default["default"].string,
-  settingsClassName: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func,
-  onOrderChange: PropTypes__default["default"].func
+  withPreview: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  withName: PropTypes.bool,
+  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  sortable: PropTypes.bool,
+  isTree: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  settingsClassName: PropTypes.string,
+  onClickItem: PropTypes.func,
+  onOrderChange: PropTypes.func
 };
 var defaultProps$7 = {
   items: [],
@@ -2641,7 +2620,6 @@ var defaultProps$7 = {
   onOrderChange: null
 };
 var ScreensMenu = function ScreensMenu(_ref) {
-  var _ref8;
   var items = _ref.items,
     withPreview = _ref.withPreview,
     withPlaceholder = _ref.withPlaceholder,
@@ -2658,7 +2636,6 @@ var ScreensMenu = function ScreensMenu(_ref) {
     onClickItem = _ref.onClickItem,
     onOrderChange = _ref.onOrderChange;
   var itemsElements = !isTree ? items.map(function (_ref2, index) {
-    var _ref3;
     var _ref2$className = _ref2.className,
       itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
       screen = _ref2.screen,
@@ -2668,14 +2645,14 @@ var ScreensMenu = function ScreensMenu(_ref) {
       onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
       active = _ref2.active,
       href = _ref2.href,
-      item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+      item = _objectWithoutProperties(_ref2, _excluded$2);
+    return /*#__PURE__*/React.createElement("li", {
       key: item.id,
-      className: classNames__default["default"]([styles$5.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
+      className: classNames([styles$5.item, _defineProperty(_defineProperty({}, itemClassName, itemClassName !== null), itemCustomClassName, itemCustomClassName !== null)]),
       "data-screen-id": item.id
-    }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
+    }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
       index: index,
-      screen: withPlaceholder ? _objectSpread__default["default"](_objectSpread__default["default"]({}, screen), {}, {
+      screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
         type: type
       }) : screen,
       href: href,
@@ -2687,9 +2664,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
       withName: withName,
       onClick: onClick,
       onClickItem: onClickItem
-    }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$5.settings, 'p-2'])
-    }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
+    }), settings !== null ? /*#__PURE__*/React.createElement("div", {
+      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$5.settings, 'p-2'])
+    }, isFunction(settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = React.useMemo(function () {
     return isTree ? items.map(function (_ref5) {
@@ -2697,7 +2674,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
         _ref5$screen = _ref5.screen,
         screen = _ref5$screen === void 0 ? {} : _ref5$screen,
         href = _ref5.href,
-        props = _objectWithoutProperties__default["default"](_ref5, _excluded2);
+        props = _objectWithoutProperties(_ref5, _excluded2);
       var _screen$parentId = screen.parentId,
         parentId = _screen$parentId === void 0 ? null : _screen$parentId,
         _screen$group = screen.group,
@@ -2709,7 +2686,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
         id: id,
         parentId: parentId,
         collapsed: collapsed,
-        value: _objectSpread__default["default"]({
+        value: _objectSpread({
           id: id,
           screen: screen,
           href: href
@@ -2722,14 +2699,14 @@ var ScreensMenu = function ScreensMenu(_ref) {
       };
     });
   }, [items, isTree, items.length]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$5.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$5.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$5.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$5.isTree, isTree), _defineProperty__default["default"](_ref8, styles$5.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
-  }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$5.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.noWrap, noWrap), styles$5.isVertical, isVertical), styles$5.isTree, isTree), styles$5.withPlaceholder, withPlaceholder), className, className)])
+  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
     items: sortableItems,
     component: ScreenWithPreview,
     onClickItem: onClickItem,
     onChange: onOrderChange
-  }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
+  }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(reactSortablejs.ReactSortable, {
     list: sortableItems,
     setList: onOrderChange,
     animation: 200,
@@ -2737,7 +2714,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
     delay: 2,
     tag: "ul",
     className: styles$5.items
-  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React__default["default"].createElement("ul", {
+  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
     className: styles$5.items
   }, itemsElements) : null);
 };
@@ -2748,9 +2725,9 @@ var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row"
 
 var propTypes$6 = {
   screens: core.PropTypes.screenDefinitions,
-  selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  className: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+  onClickItem: PropTypes.func
 };
 var defaultProps$6 = {
   screens: null,
@@ -2806,40 +2783,40 @@ var ScreenTypes = function ScreenTypes(_ref) {
         type: id,
         screen: definition,
         title: title,
-        className: classNames__default["default"](_defineProperty__default["default"]({
+        className: classNames(_defineProperty({
           'bg-secondary': !selected,
           'bg-primary': selected
         }, styles$4.selected, selected))
       };
-      return groupIndex !== -1 ? [].concat(_toConsumableArray__default["default"](allGroups.slice(0, groupIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, allGroups[groupIndex]), {}, {
-        items: [].concat(_toConsumableArray__default["default"](allGroups[groupIndex].items), [item])
-      })], _toConsumableArray__default["default"](allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray__default["default"](allGroups), [{
+      return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
+        items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
+      })], _toConsumableArray(allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray(allGroups), [{
         id: groupId,
         name: utils.isMessage(label) ? intl.formatMessage(label) : groupName,
         order: order,
         items: [item]
       }]);
     }, []);
-    return orderBy__default["default"](groupItems, ['order', 'name'], ['asc', 'asc']);
+    return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
   }, [finalDefinitions, selectedTypes]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.rows
   }, groups.map(function (_ref6) {
     var id = _ref6.id,
       name = _ref6.name,
       items = _ref6.items;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: "group-".concat(id),
       className: styles$4.row
-    }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, name), /*#__PURE__*/React__default["default"].createElement("div", {
+    }, /*#__PURE__*/React.createElement(components.Label, null, name), /*#__PURE__*/React.createElement("div", {
       className: styles$4.layouts
-    }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
+    }, /*#__PURE__*/React.createElement(ScreensMenu, {
       items: items,
       withPlaceholder: true,
       withName: true,
-      itemClassName: classNames__default["default"]([styles$4.screen, 'border', 'rounded', {
+      itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
         'border-secondary': selectedTypes === null,
         'border-dark': selectedTypes !== null,
         'bg-secondary': selectedTypes === null,
@@ -2856,10 +2833,10 @@ ScreenTypes.defaultProps = defaultProps$6;
 var styles$3 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
 
 var propTypes$5 = {
-  selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  className: PropTypes__default["default"].string,
-  onRequestClose: PropTypes__default["default"].func,
-  onClickScreenType: PropTypes__default["default"].func
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+  onRequestClose: PropTypes.func,
+  onClickScreenType: PropTypes.func
 };
 var defaultProps$5 = {
   selectedTypes: null,
@@ -2872,17 +2849,17 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
     className = _ref.className,
     onRequestClose = _ref.onRequestClose,
     onClickScreenType = _ref.onClickScreenType;
-  return /*#__PURE__*/React__default["default"].createElement(components.Modal, null, /*#__PURE__*/React__default["default"].createElement(components.ModalDialog, {
-    title: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  return /*#__PURE__*/React.createElement(components.Modal, null, /*#__PURE__*/React.createElement(components.ModalDialog, {
+    title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "QBaiO0",
       defaultMessage: [{
         "type": 0,
         "value": "Add a screen"
       }]
     }),
-    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames([styles$3.container, _defineProperty({}, className, className)]),
     onClickClose: onRequestClose
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenTypes, {
+  }, /*#__PURE__*/React.createElement(ScreenTypes, {
     selectedTypes: selectedTypes,
     className: styles$3.menu,
     onClickItem: onClickScreenType
@@ -2895,15 +2872,15 @@ var styles$2 = {"container":"micromag-editor-screens-container","navbar":"microm
 
 var _excluded$1 = ["id"];
 var propTypes$4 = {
-  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
-  isTheme: PropTypes__default["default"].bool,
-  isVertical: PropTypes__default["default"].bool,
-  isCreateOpened: PropTypes__default["default"].bool,
-  isParsed: PropTypes__default["default"].bool,
-  isTree: PropTypes__default["default"].bool,
-  onClickScreen: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  value: PropTypes.oneOfType([core.PropTypes.story, core.PropTypes.theme]),
+  isTheme: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  isCreateOpened: PropTypes.bool,
+  isParsed: PropTypes.bool,
+  isTree: PropTypes.bool,
+  onClickScreen: PropTypes.func,
+  onChange: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$4 = {
   value: null,
@@ -2934,7 +2911,7 @@ var EditorScreens = function EditorScreens(_ref) {
     _ref2$components = _ref2.components,
     screens = _ref2$components === void 0 ? [] : _ref2$components;
   var _useState = React.useState(isCreateOpened),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     createModalOpened = _useState2[0],
     setCreateModalOpened = _useState2[1];
   var routes = contexts.useRoutes();
@@ -2951,7 +2928,7 @@ var EditorScreens = function EditorScreens(_ref) {
       currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? {} : _ref3$theme;
-    var _ref4 = isString__default["default"](definition) ? {
+    var _ref4 = isString(definition) ? {
         id: definition
       } : definition,
       newScreenType = _ref4.id;
@@ -2967,8 +2944,8 @@ var EditorScreens = function EditorScreens(_ref) {
       return id === currentScreenId;
     });
     var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
-    var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-      components: [].concat(_toConsumableArray__default["default"](currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray__default["default"](currentScreens.slice(currentScreenIndex)))
+    var newValue = _objectSpread(_objectSpread({}, value), {}, {
+      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
     });
     if (onChange !== null) {
       onChange(newValue);
@@ -3005,8 +2982,8 @@ var EditorScreens = function EditorScreens(_ref) {
       return same && id === currentIds[index];
     }, true);
     if (!sameOrder || hasScreenProps) {
-      var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
-        components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref13, _ref14) {
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: _toConsumableArray(currentScreens).sort(function (_ref13, _ref14) {
           var idA = _ref13.id;
           var idB = _ref14.id;
           var indexA = ids.indexOf(idA);
@@ -3018,8 +2995,8 @@ var EditorScreens = function EditorScreens(_ref) {
         }).map(function (_ref15) {
           var _screenProps$find;
           var id = _ref15.id,
-            props = _objectWithoutProperties__default["default"](_ref15, _excluded$1);
-          return _objectSpread__default["default"](_objectSpread__default["default"]({
+            props = _objectWithoutProperties(_ref15, _excluded$1);
+          return _objectSpread(_objectSpread({
             id: id
           }, props), (_screenProps$find = screenProps.find(function (_ref16) {
             var propsId = _ref16.id;
@@ -3053,36 +3030,36 @@ var EditorScreens = function EditorScreens(_ref) {
   var onCreateModalRequestClose = React.useCallback(function () {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['d-flex', 'flex-column', styles$2.container, className])
-  }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['d-flex', 'flex-column', styles$2.container, className])
+  }, /*#__PURE__*/React.createElement(components.Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', styles$2.navbar])
-  }, /*#__PURE__*/React__default["default"].createElement("strong", {
+    className: classNames(['sticky-top', styles$2.navbar])
+  }, /*#__PURE__*/React.createElement("strong", {
     className: "mb-0 me-auto"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "jf+4Hq",
     defaultMessage: [{
       "type": 0,
       "value": "Screens"
     }]
-  })), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  })), /*#__PURE__*/React.createElement(components.Button, {
     theme: "primary",
     size: "sm",
     onClick: onClickAdd,
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faPlus.faPlus
     })
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "flex-grow-1 d-flex w-100 p-2"
-  }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
+  }, /*#__PURE__*/React.createElement(reactRouter.Route, {
     path: [routes.screen, routes.home],
     render: function render(_ref18) {
       var _ref18$match$params$s = _ref18.match.params.screen,
         screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
-      return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
+      return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
             id: it.id,
@@ -3100,12 +3077,12 @@ var EditorScreens = function EditorScreens(_ref) {
         onClickItem: onClickScreen,
         onOrderChange: onOrderChange,
         isTree: isTree
-      }) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
+      }) : /*#__PURE__*/React.createElement(components.Empty, {
         className: "flex-grow-1 p-2"
-      }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+      }, /*#__PURE__*/React.createElement(components.Button, {
         theme: "primary",
         onClick: onClickAdd
-      }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
         id: "JoWKee",
         defaultMessage: [{
           "type": 0,
@@ -3113,7 +3090,7 @@ var EditorScreens = function EditorScreens(_ref) {
         }]
       })));
     }
-  })), createModalOpened ? /*#__PURE__*/React__default["default"].createElement(ScreenTypesModal, {
+  })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
     selectedTypes: isTheme ? screens.map(function (_ref19) {
       var type = _ref19.type;
       return type;
@@ -3128,15 +3105,15 @@ EditorScreens.defaultProps = defaultProps$4;
 var styles$1 = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","center":"micromag-editor-center","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
 var propTypes$3 = {
-  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
+  value: PropTypes.oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   deviceScreens: core.PropTypes.deviceScreens,
   viewerTheme: core.PropTypes.viewerTheme,
-  mobileView: PropTypes__default["default"].oneOf(['screens', 'preview', 'form']),
-  fullscreen: PropTypes__default["default"].bool,
-  isTheme: PropTypes__default["default"].bool,
-  isCreateOpened: PropTypes__default["default"].bool,
-  onChange: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  mobileView: PropTypes.oneOf(['screens', 'preview', 'form']),
+  fullscreen: PropTypes.bool,
+  isTheme: PropTypes.bool,
+  isCreateOpened: PropTypes.bool,
+  onChange: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$3 = {
   value: null,
@@ -3150,7 +3127,6 @@ var defaultProps$3 = {
   className: null
 };
 var Editor = function Editor(_ref) {
-  var _ref5;
   var value = _ref.value,
     viewerTheme = _ref.viewerTheme,
     isTheme = _ref.isTheme,
@@ -3179,7 +3155,7 @@ var Editor = function Editor(_ref) {
 
   // Mobile view
   var _useState = React.useState(initialMobileView),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     mobileView = _useState2[0],
     setMobileView = _useState2[1];
   var onClickScreens = React.useCallback(function () {
@@ -3202,7 +3178,7 @@ var Editor = function Editor(_ref) {
     textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
     _ref2$boxStyles = _ref2.boxStyles,
     boxStyles = _ref2$boxStyles === void 0 ? null : _ref2$boxStyles;
-  var baseValue = isTheme ? _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
+  var baseValue = isTheme ? _objectSpread(_objectSpread({}, value), {}, {
     theme: {
       background: background,
       colors: colors,
@@ -3251,56 +3227,56 @@ var Editor = function Editor(_ref) {
       screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
     }
   }, [screenId]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ModalsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PanelsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
+  return /*#__PURE__*/React.createElement(contexts.ModalsProvider, null, /*#__PURE__*/React.createElement(contexts.PanelsProvider, null, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
     size: screenSize
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
       return styles$1["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$1.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
+    }) : null, _defineProperty(_defineProperty({}, styles$1.fullscreen, fullscreen), className, className)]),
     ref: refContainer
-  }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
+  }, /*#__PURE__*/React.createElement(components.Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
     className: styles$1.top
-  }, mobileView !== 'screens' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(components.Button, {
     size: "sm",
     theme: "secondary",
     onClick: onClickScreens,
     className: "me-auto"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "wkysUu",
     defaultMessage: [{
       "type": 0,
       "value": "Screens"
     }]
-  })) : /*#__PURE__*/React__default["default"].createElement("span", null), mobileView !== 'form' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  })) : /*#__PURE__*/React.createElement("span", null), mobileView !== 'form' ? /*#__PURE__*/React.createElement(components.Button, {
     size: "sm",
     theme: "primary",
     onClick: onClickEdit
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "HseFdk",
     defaultMessage: [{
       "type": 0,
       "value": "Edit"
     }]
-  })) : null, mobileView === 'form' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
+  })) : null, mobileView === 'form' ? /*#__PURE__*/React.createElement(components.Button, {
     size: "sm",
     theme: "primary",
     onClick: onClickViewScreen
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "4POR3B",
     defaultMessage: [{
       "type": 0,
       "value": "View screen"
     }]
-  })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null), /*#__PURE__*/React.createElement("div", {
     className: styles$1.inner
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.left, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
-  }, /*#__PURE__*/React__default["default"].createElement(EditorScreens, {
+  }, /*#__PURE__*/React.createElement(EditorScreens, {
     value: story,
     isTheme: isTheme,
     isCreateOpened: isCreateOpened,
@@ -3310,46 +3286,46 @@ var Editor = function Editor(_ref) {
     isVertical: !isMobile,
     className: styles$1.inner,
     isTree: true
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.center, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'preview')])
-  }, /*#__PURE__*/React__default["default"].createElement(EditorPreview, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
+  }, /*#__PURE__*/React.createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
     className: styles$1.preview,
     onScreenChange: onPreviewScreenChange,
     onChange: onStoryChange
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.right, _defineProperty__default["default"]({}, styles$1.visible, !isMobile || mobileView === 'form')])
-  }, /*#__PURE__*/React__default["default"].createElement(EditForm, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')])
+  }, /*#__PURE__*/React.createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
     className: styles$1.inner
-  }))), /*#__PURE__*/React__default["default"].createElement(components.Modals, null)))));
+  }))), /*#__PURE__*/React.createElement(components.Modals, null)))));
 };
 Editor.propTypes = propTypes$3;
 Editor.defaultProps = defaultProps$3;
 
 // eslint-disable-next-line import/prefer-default-export
-var routes = PropTypes__default["default"].shape({
-  home: PropTypes__default["default"].string.isRequired,
-  screen: PropTypes__default["default"].string.isRequired,
-  'screen.field': PropTypes__default["default"].string.isRequired,
-  'screen.field.form': PropTypes__default["default"].string.isRequired
+var routes = PropTypes.shape({
+  home: PropTypes.string.isRequired,
+  screen: PropTypes.string.isRequired,
+  'screen.field': PropTypes.string.isRequired,
+  'screen.field.form': PropTypes.string.isRequired
 });
 
 var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
 
 var propTypes$2 = {
-  name: PropTypes__default["default"].string,
+  name: PropTypes.string,
   field: core.PropTypes.formField,
   value: core.PropTypes.component,
-  className: PropTypes__default["default"].string,
-  gotoFieldForm: PropTypes__default["default"].func.isRequired,
-  closeFieldForm: PropTypes__default["default"].func.isRequired,
-  onChange: PropTypes__default["default"].func
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.func
 };
 var defaultProps$2 = {
   name: null,
@@ -3381,16 +3357,16 @@ var SettingsForm = function SettingsForm(_ref) {
   var FieldsComponent = contexts.useFieldComponent('fields');
   var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
   var onSettingsChange = React.useCallback(function (newSettingsValue) {
-    var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), newSettingsValue);
+    var newValue = _objectSpread(_objectSpread({}, value), newSettingsValue);
     if (onChange !== null) {
       onChange(newValue);
     }
   }, [value, onChange]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.inner
-  }, /*#__PURE__*/React__default["default"].createElement(SettingsComponent, {
+  }, /*#__PURE__*/React.createElement(SettingsComponent, {
     name: name,
     field: field,
     fields: settings,
@@ -3413,13 +3389,13 @@ var FormsComponents = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$1 = {
-  children: PropTypes__default["default"].node
+  children: PropTypes.node
 };
 var defaultProps$1 = {
   children: null
 };
 var FormsProvider = function FormsProvider(props) {
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, Object.assign({
+  return /*#__PURE__*/React.createElement(contexts.ComponentsProvider, Object.assign({
     namespace: contexts.FORMS_NAMESPACE,
     components: FormsComponents
   }, props));
@@ -3438,16 +3414,16 @@ var defaultRoutes = {
 
 var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries", "screenNamespaces"];
 var propTypes = {
-  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
+  value: PropTypes.oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   routes: routes,
-  memoryRouter: PropTypes__default["default"].bool,
-  basePath: PropTypes__default["default"].string,
-  uppy: PropTypes__default["default"].shape({
-    transport: PropTypes__default["default"].string
+  memoryRouter: PropTypes.bool,
+  basePath: PropTypes.string,
+  uppy: PropTypes.shape({
+    transport: PropTypes.string
   }),
-  googleApiKey: PropTypes__default["default"].string,
-  googleMapsLibraries: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  screenNamespaces: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
+  googleApiKey: PropTypes.string,
+  googleMapsLibraries: PropTypes.arrayOf(PropTypes.string),
+  screenNamespaces: PropTypes.arrayOf(PropTypes.string)
 };
 var defaultProps = {
   value: null,
@@ -3468,7 +3444,7 @@ var EditorContainer = function EditorContainer(_ref) {
     googleApiKey = _ref.googleApiKey,
     googleMapsLibraries = _ref.googleMapsLibraries,
     screenNamespaces = _ref.screenNamespaces,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
   var _useIntl = reactIntl.useIntl(),
     locale = _useIntl.locale;
@@ -3476,30 +3452,30 @@ var EditorContainer = function EditorContainer(_ref) {
   // const { metadata } = value || {};
   // const { language:finalLocale = locale } = metadata || {};
 
-  return /*#__PURE__*/React__default["default"].createElement(Router, {
+  return /*#__PURE__*/React.createElement(Router, {
     basename: !memoryRouter ? basePath : null
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.UppyProvider, uppy, /*#__PURE__*/React__default["default"].createElement(contexts.StoryProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.UppyProvider, uppy, /*#__PURE__*/React.createElement(contexts.StoryProvider, {
     story: value
-  }, /*#__PURE__*/React__default["default"].createElement(screens.ScreensProvider, {
+  }, /*#__PURE__*/React.createElement(screens.ScreensProvider, {
     filterNamespaces: true,
     namespaces: screenNamespaces
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.GoogleKeysProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.GoogleKeysProvider, {
     apiKey: googleApiKey
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.GoogleMapsClientProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.GoogleMapsClientProvider, {
     locale: locale,
     libraries: googleMapsLibraries
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.FontsProvider, null, /*#__PURE__*/React__default["default"].createElement(fields.FieldsProvider, null, /*#__PURE__*/React__default["default"].createElement(FormsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.EditorProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.VisitorProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.FontsProvider, null, /*#__PURE__*/React.createElement(fields.FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider, null, /*#__PURE__*/React.createElement(contexts.EditorProvider, null, /*#__PURE__*/React.createElement(contexts.VisitorProvider, {
     visitor: "editor"
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsContext.Consumer, null, function (manager) {
+  }, /*#__PURE__*/React.createElement(contexts.ComponentsContext.Consumer, null, function (manager) {
     var formComponents = manager.getComponents(contexts.FORMS_NAMESPACE);
     var formRegEx = formComponents !== null ? Object.keys(formComponents).map(function (name) {
       return utils.slug(name);
     }).join('|') : null;
-    return /*#__PURE__*/React__default["default"].createElement(contexts.RoutesProvider, {
-      routes: _objectSpread__default["default"](_objectSpread__default["default"]({}, routes), {}, {
+    return /*#__PURE__*/React.createElement(contexts.RoutesProvider, {
+      routes: _objectSpread(_objectSpread({}, routes), {}, {
         'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
       })
-    }, /*#__PURE__*/React__default["default"].createElement(Editor, Object.assign({
+    }, /*#__PURE__*/React.createElement(Editor, Object.assign({
       value: value
     }, props)));
   }))))))))))));
@@ -3511,4 +3487,4 @@ exports.Editor = Editor;
 exports.ScreenTypes = ScreenTypes;
 exports.Screens = ScreensMenu;
 exports.createScreen = createScreen;
-exports["default"] = EditorContainer;
+exports.default = EditorContainer;