@micromag/editor 0.3.317 → 0.3.319

package/lib/index.js

@@ -63,26 +63,23 @@ var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
 
 var useRouteParams = function useRouteParams() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-      _ref$screenOnly = _ref.screenOnly,
-      screenOnly = _ref$screenOnly === void 0 ? false : _ref$screenOnly;
-
+    _ref$screenOnly = _ref.screenOnly,
+    screenOnly = _ref$screenOnly === void 0 ? false : _ref$screenOnly;
   var routes = contexts.useRoutes();
   var path = React.useMemo(function () {
     return screenOnly ? [routes.screen, '*'] : [routes['screen.field.form'], routes['screen.field'], routes.screen, '*'];
   }, [routes, screenOnly]);
-
   var _useRouteMatch = reactRouter.useRouteMatch({
-    path: path
-  }),
-      url = _useRouteMatch.url,
-      _useRouteMatch$params = _useRouteMatch.params,
-      _useRouteMatch$params2 = _useRouteMatch$params.screen,
-      screen = _useRouteMatch$params2 === void 0 ? null : _useRouteMatch$params2,
-      _useRouteMatch$params3 = _useRouteMatch$params.field,
-      field = _useRouteMatch$params3 === void 0 ? null : _useRouteMatch$params3,
-      _useRouteMatch$params4 = _useRouteMatch$params.form,
-      form = _useRouteMatch$params4 === void 0 ? null : _useRouteMatch$params4;
-
+      path: path
+    }),
+    url = _useRouteMatch.url,
+    _useRouteMatch$params = _useRouteMatch.params,
+    _useRouteMatch$params2 = _useRouteMatch$params.screen,
+    screen = _useRouteMatch$params2 === void 0 ? null : _useRouteMatch$params2,
+    _useRouteMatch$params3 = _useRouteMatch$params.field,
+    field = _useRouteMatch$params3 === void 0 ? null : _useRouteMatch$params3,
+    _useRouteMatch$params4 = _useRouteMatch$params.form,
+    form = _useRouteMatch$params4 === void 0 ? null : _useRouteMatch$params4;
   var routeParams = React.useMemo(function () {
     return screenOnly ? {
       url: url,
@@ -97,7 +94,7 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-var styles$i = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
+var styles$i = {"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 useFormTransition = function useFormTransition(url, screenIndex, styles) {
   var lastPageRef = React.useRef({
@@ -106,16 +103,14 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
   });
   var direction = React.useMemo(function () {
     var _lastPageRef$current = lastPageRef.current,
-        lastScreenIndex = _lastPageRef$current.screenIndex,
-        lastUrl = _lastPageRef$current.url;
+      lastScreenIndex = _lastPageRef$current.screenIndex,
+      lastUrl = _lastPageRef$current.url;
     lastPageRef.current.url = url;
     lastPageRef.current.screenIndex = screenIndex;
-
     if (screenIndex !== lastScreenIndex) {
       // return screenIndex > lastScreenIndex ? 'bottom' : 'top';
       return null;
     }
-
     var urlSplit = url.split('/');
     var lastUrlSplit = lastUrl.split('/');
     var currentPartsCount = urlSplit.length;
@@ -128,7 +123,6 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
   }, [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',
@@ -145,28 +139,25 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
 
 function getScreenFieldsWithStates(definition) {
   var _ref = definition || {},
-      _ref$fields = _ref.fields,
-      screenFields = _ref$fields === void 0 ? null : _ref$fields,
-      _ref$states = _ref.states,
-      states = _ref$states === void 0 ? null : _ref$states;
-
+    _ref$fields = _ref.fields,
+    screenFields = _ref$fields === void 0 ? null : _ref$fields,
+    _ref$states = _ref.states,
+    states = _ref$states === void 0 ? null : _ref$states;
   if (states === null) {
     return screenFields;
   }
-
   var extraFields = states.reduce(function (statesFields, current) {
     var _ref2 = current || {},
-        id = _ref2.id,
-        _ref2$fields = _ref2.fields,
-        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
-        _ref2$repeatable = _ref2.repeatable,
-        repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
-        _ref2$fieldName = _ref2.fieldName,
-        fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
-        label = _ref2.label,
-        _ref2$defaultValue = _ref2.defaultValue,
-        defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
-
+      id = _ref2.id,
+      _ref2$fields = _ref2.fields,
+      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+      _ref2$repeatable = _ref2.repeatable,
+      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+      _ref2$fieldName = _ref2.fieldName,
+      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+      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 ? [{
       type: 'items',
       name: fieldName || id,
@@ -201,17 +192,14 @@ var createScreen = function createScreen(definition) {
   var screenFields = getScreenFieldsWithStates(finalDefinition);
   var defaultValueFields = screenFields.reduce(function (all, curr) {
     var _ref = curr || {},
-        _ref$name = _ref.name,
-        name = _ref$name === void 0 ? null : _ref$name,
-        _ref$defaultValue = _ref.defaultValue,
-        defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
-
+      _ref$name = _ref.name,
+      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);
-
     if (name !== null && defaultValue !== null) {
       newAll[name] = defaultValue;
     }
-
     return newAll;
   }, {});
   return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({
@@ -222,13 +210,11 @@ var createScreen = function createScreen(definition) {
 };
 
 var _excluded$c = ["components"];
-
 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);
-
+    _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), {}, {
     components: components.filter(function (_ref2) {
       var id = _ref2.id;
@@ -238,13 +224,11 @@ var deleteScreen = function deleteScreen(story, screenId) {
 };
 
 var _excluded$b = ["components"];
-
 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);
-
+    _ref$components = _ref.components,
+    components = _ref$components === void 0 ? [] : _ref$components,
+    currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$b);
   var screen = components.find(function (it) {
     return it.id === screenId;
   }) || null;
@@ -256,15 +240,12 @@ var duplicateScreen = function duplicateScreen(story, screenId) {
 };
 
 var _excluded$a = ["components"];
-
 var updateScreen = function updateScreen(story, newScreenValue) {
   var newScreenId = newScreenValue.id;
-
   var _ref = story || {},
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
-
+    _ref$components = _ref.components,
+    components = _ref$components === void 0 ? [] : _ref$components,
+    currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
   var index = components.findIndex(function (it) {
     return it.id === newScreenId;
   });
@@ -278,16 +259,13 @@ var getFieldByName = function getFieldByName(fields, name) {
     if (foundField !== null) {
       return foundField;
     }
-
     var _it$name = it.name,
-        fieldName = _it$name === void 0 ? null : _it$name,
-        _it$fields = it.fields,
-        subFields = _it$fields === void 0 ? [] : _it$fields;
-
+      fieldName = _it$name === void 0 ? null : _it$name,
+      _it$fields = it.fields,
+      subFields = _it$fields === void 0 ? [] : _it$fields;
     if (name !== null && fieldName === name) {
       return it;
     }
-
     return getFieldByName(subFields, name);
   }, null);
 };
@@ -301,12 +279,10 @@ var defaultProps$o = {
   dots: false,
   className: null
 };
-
 var SettingsButton = function SettingsButton(_ref) {
   var className = _ref.className,
-      dots = _ref.dots,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
-
+    dots = _ref.dots,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
   return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
     className: className,
     theme: "secondary",
@@ -316,7 +292,6 @@ var SettingsButton = function SettingsButton(_ref) {
     })
   }, props));
 };
-
 SettingsButton.propTypes = propTypes$o;
 SettingsButton.defaultProps = defaultProps$o;
 
@@ -331,46 +306,38 @@ var defaultProps$n = {
   form: null,
   children: null
 };
-
 var FieldWithContexts = function FieldWithContexts(_ref) {
   var name = _ref.name,
-      form = _ref.form,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
-
+    form = _ref.form,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
   var definition = contexts.useScreenDefinition() || null;
   var _definition$states = definition.states,
-      states = _definition$states === void 0 ? null : _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),
-      _nameParts$ = _nameParts[0],
-      stateId = _nameParts$ === void 0 ? null : _nameParts$;
-
+    _nameParts$ = _nameParts[0],
+    stateId = _nameParts$ === void 0 ? null : _nameParts$;
   var currentState = states !== null ? states.find(function (_ref2) {
     var id = _ref2.id;
     return id === stateId;
   }) || null : null;
   var finalNameParts = nameParts;
-
   var _ref3 = currentState || {},
-      _ref3$repeatable = _ref3.repeatable,
-      repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable,
-      _ref3$fieldName = _ref3.fieldName,
-      fieldName = _ref3$fieldName === void 0 ? null : _ref3$fieldName,
-      _ref3$fields = _ref3.fields,
-      stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
-
+    _ref3$repeatable = _ref3.repeatable,
+    repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable,
+    _ref3$fieldName = _ref3.fieldName,
+    fieldName = _ref3$fieldName === void 0 ? null : _ref3$fieldName,
+    _ref3$fields = _ref3.fields,
+    stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
   var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
     var itemName = _ref4.name,
-        fieldStateId = _ref4.stateId;
+      fieldStateId = _ref4.stateId;
     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);
   }
-
   var formComponents = contexts.useFormsComponents();
   return definition !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]({
@@ -385,7 +352,6 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
     fields: stateFields
   }, props))) : null;
 };
-
 FieldWithContexts.propTypes = propTypes$n;
 FieldWithContexts.defaultProps = defaultProps$n;
 
@@ -396,26 +362,27 @@ var propTypes$m = {
   className: PropTypes__default["default"].string,
   gotoFieldForm: PropTypes__default["default"].func.isRequired,
   closeFieldForm: PropTypes__default["default"].func.isRequired,
-  onChange: PropTypes__default["default"].func // onClickDelete: PropTypes.func,
-
+  onChange: PropTypes__default["default"].func
+  // onClickDelete: PropTypes.func,
 };
+
 var defaultProps$m = {
   value: null,
   className: null,
-  onChange: null // onClickDelete: null,
-
+  onChange: null
+  // onClickDelete: null,
 };
 
 var ScreenForm = function ScreenForm(_ref) {
   var value = _ref.value,
-      className = _ref.className,
-      gotoFieldForm = _ref.gotoFieldForm,
-      closeFieldForm = _ref.closeFieldForm,
-      onChange = _ref.onChange;
-
+    className = _ref.className,
+    gotoFieldForm = _ref.gotoFieldForm,
+    closeFieldForm = _ref.closeFieldForm,
+    onChange = _ref.onChange;
   var _useScreenDefinition = contexts.useScreenDefinition(),
-      _useScreenDefinition$ = _useScreenDefinition.fields,
-      fields$1 = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // const intl = useIntl();
+    _useScreenDefinition$ = _useScreenDefinition.fields,
+    fields$1 = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$;
+  // const intl = useIntl();
   // const finalOnClickDelete = useCallback(() => {
   //     if (
   //         onClickDelete !== null &&
@@ -429,8 +396,6 @@ var ScreenForm = function ScreenForm(_ref) {
   //         onClickDelete(value);
   //     }
   // }, [intl, onClickDelete, value]);
-
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$h.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -443,7 +408,6 @@ var ScreenForm = function ScreenForm(_ref) {
     closeFieldForm: closeFieldForm
   }) : null));
 };
-
 ScreenForm.propTypes = propTypes$m;
 ScreenForm.defaultProps = defaultProps$m;
 
@@ -464,110 +428,94 @@ var defaultProps$l = {
   form: null,
   className: null
 };
-
 var Breadcrumb = function Breadcrumb(_ref) {
   var story = _ref.story,
-      screenId = _ref.screenId,
-      field = _ref.field,
-      form = _ref.form,
-      url = _ref.url,
-      className = _ref.className;
+    screenId = _ref.screenId,
+    field = _ref.field,
+    form = _ref.form,
+    url = _ref.url,
+    className = _ref.className;
   var intl = reactIntl.useIntl();
-
   var _ref2 = story || {},
-      _ref2$components = _ref2.components,
-      screens = _ref2$components === void 0 ? [] : _ref2$components;
-
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var history = reactRouter.useHistory();
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager();
   var route = contexts.useUrlGenerator();
-
   var _useMemo = React.useMemo(function () {
-    var screenIndex = screens.findIndex(function (it) {
-      return it.id === screenId;
-    });
-
-    if (!screens[screenIndex]) {
-      return {};
-    }
-
-    var _screens$screenIndex = screens[screenIndex],
+      var screenIndex = screens.findIndex(function (it) {
+        return it.id === screenId;
+      });
+      if (!screens[screenIndex]) {
+        return {};
+      }
+      var _screens$screenIndex = screens[screenIndex],
         type = _screens$screenIndex.type,
         _screens$screenIndex$ = _screens$screenIndex.parameters,
         parameters = _screens$screenIndex$ === void 0 ? null : _screens$screenIndex$;
-    var definition = screensManager.getDefinition(type);
-
-    var _ref3 = definition || {},
+      var definition = screensManager.getDefinition(type);
+      var _ref3 = definition || {},
         _ref3$states = _ref3.states,
         states = _ref3$states === void 0 ? null : _ref3$states,
         _ref3$title = _ref3.title,
         definitionTitle = _ref3$title === void 0 ? null : _ref3$title;
-
-    return {
-      title: definitionTitle,
-      fields: definition !== null ? [].concat(_toConsumableArray__default["default"](getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]) : null,
-      states: states,
-      parameters: parameters
-    };
-  }, [screens, screenId, screensManager, intl]),
-      _useMemo$title = _useMemo.title,
-      screenTitle = _useMemo$title === void 0 ? null : _useMemo$title,
-      _useMemo$fields = _useMemo.fields,
-      screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
-      _useMemo$states = _useMemo.states,
-      screenStates = _useMemo$states === void 0 ? null : _useMemo$states,
-      _useMemo$parameters = _useMemo.parameters,
-      screenParameters = _useMemo$parameters === void 0 ? null : _useMemo$parameters;
-
+      return {
+        title: definitionTitle,
+        fields: definition !== null ? [].concat(_toConsumableArray__default["default"](getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]) : null,
+        states: states,
+        parameters: parameters
+      };
+    }, [screens, screenId, screensManager, intl]),
+    _useMemo$title = _useMemo.title,
+    screenTitle = _useMemo$title === void 0 ? null : _useMemo$title,
+    _useMemo$fields = _useMemo.fields,
+    screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
+    _useMemo$states = _useMemo.states,
+    screenStates = _useMemo$states === void 0 ? null : _useMemo$states,
+    _useMemo$parameters = _useMemo.parameters,
+    screenParameters = _useMemo$parameters === void 0 ? null : _useMemo$parameters;
   var items = React.useMemo(function () {
     var fieldItems = [];
     var currentState = null;
-
     if (field !== null) {
-      var fieldPath = field.split('/'); // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
+      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),
-          _fieldPath$ = _fieldPath[0],
-          stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
-
+        _fieldPath$ = _fieldPath[0],
+        stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
       currentState = screenStates !== null ? screenStates.find(function (_ref4) {
         var id = _ref4.id;
         return id === stateId;
       }) || null : null;
       var finalFieldPath = fieldPath;
-
       if (currentState !== null) {
         var _ref5 = currentState || {},
-            _ref5$repeatable = _ref5.repeatable,
-            repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable,
-            _ref5$fieldName = _ref5.fieldName,
-            fieldName = _ref5$fieldName === void 0 ? null : _ref5$fieldName;
-
+          _ref5$repeatable = _ref5.repeatable,
+          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);
       }
-
       var lastKeyIndex = finalFieldPath.length - 1;
       var parentItem = null;
       finalFieldPath.reduce(function (currentFields, key, keyIndex) {
         var _ref6 = currentFields || {},
-            _ref6$type = _ref6.type,
-            fieldType = _ref6$type === void 0 ? null : _ref6$type,
-            _ref6$fields = _ref6.fields,
-            currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
-            _ref6$itemsField = _ref6.itemsField,
-            currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
-
+          _ref6$type = _ref6.type,
+          fieldType = _ref6$type === void 0 ? null : _ref6$type,
+          _ref6$fields = _ref6.fields,
+          currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
+          _ref6$itemsField = _ref6.itemsField,
+          currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
         var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
-
         var _ref7 = fieldsDef || {},
-            _ref7$fields = _ref7.fields,
-            defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
-            _ref7$settings = _ref7.settings,
-            settings = _ref7$settings === void 0 ? null : _ref7$settings,
-            _ref7$itemsField = _ref7.itemsField,
-            defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
-
+          _ref7$fields = _ref7.fields,
+          defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
+          _ref7$settings = _ref7.settings,
+          settings = _ref7$settings === void 0 ? null : _ref7$settings,
+          _ref7$itemsField = _ref7.itemsField,
+          defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
         var itemsField = currentItemsField || defItemsField;
         var subFields = currentSubFields || defSubFields;
         var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
@@ -586,12 +534,10 @@ var Breadcrumb = function Breadcrumb(_ref) {
         var addNewItem = isLastIndex || isListItems;
         var itemPath = "".concat(pathPrefix).concat(pathSuffix);
         var nextFields = null;
-
         if (isCurrentSubfields) {
           nextFields = currentSubfields;
         } else if (isCurrentSettings) {
           nextFields = currentSettings;
-
           if (parentItem !== null) {
             fieldItems.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, parentItem), {}, {
               url: route('screen.field.form', {
@@ -606,44 +552,36 @@ var Breadcrumb = function Breadcrumb(_ref) {
         } else if (isListItems) {
           nextFields = itemsField;
         }
-
         var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
         var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
-
         var _ref8 = parentItem || {},
-            _ref8$label = _ref8.label,
-            parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
-
+          _ref8$label = _ref8.label,
+          parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
         var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
         var item = {
           url: itemPath,
           label: finalItemLabel || '',
           active: false
         };
-
         if (addNewItem) {
           fieldItems.push(item);
         }
-
         parentItem = item;
         return nextFields;
       }, {
         fields: stateId === null ? screenFields : screenFields.filter(function (_ref9) {
           var _ref9$stateId = _ref9.stateId,
-              fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
+            fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
           return fieldStateId === null || fieldStateId === stateId;
         })
       });
     }
-
     var _ref10 = screenParameters || {},
-        _ref10$metadata = _ref10.metadata,
-        metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
-
+      _ref10$metadata = _ref10.metadata,
+      metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
     var _ref11 = metadata || {},
-        _ref11$title = _ref11.title,
-        title = _ref11$title === void 0 ? null : _ref11$title;
-
+      _ref11$title = _ref11.title,
+      title = _ref11$title === void 0 ? null : _ref11$title;
     var typeTitle = screenTitle !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, screenTitle) : null;
     var parametersMessage = intl.formatMessage({
       id: "AHvHaY",
@@ -689,7 +627,6 @@ var Breadcrumb = function Breadcrumb(_ref) {
     className: classNames__default["default"]([styles$g.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
   }));
 };
-
 Breadcrumb.propTypes = propTypes$l;
 Breadcrumb.defaultProps = defaultProps$l;
 
@@ -705,11 +642,10 @@ var defaultProps$k = {
   onConfirm: null,
   onCancel: null
 };
-
 var DeleteScreenModal = function DeleteScreenModal(_ref) {
   var className = _ref.className,
-      onConfirm = _ref.onConfirm,
-      onCancel = _ref.onCancel;
+    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, {
       id: "p6q/+/",
@@ -751,11 +687,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
     })
   }))));
 };
-
 DeleteScreenModal.propTypes = propTypes$k;
 DeleteScreenModal.defaultProps = defaultProps$k;
 
-var styles$e = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
+var styles$e = {"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]),
@@ -769,30 +704,27 @@ var defaultProps$j = {
   className: null,
   onChange: null
 };
-
 var EditForm = function EditForm(_ref) {
   var value = _ref.value,
-      isTheme = _ref.isTheme,
-      className = _ref.className,
-      onChange = _ref.onChange;
+    isTheme = _ref.isTheme,
+    className = _ref.className,
+    onChange = _ref.onChange;
   // Match routes
   var history = reactRouter.useHistory();
   var routePush = contexts.useRoutePush();
-
   var _useRouteParams = useRouteParams(),
-      url = _useRouteParams.url,
-      _useRouteParams$scree = _useRouteParams.screen,
-      screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
-      _useRouteParams$field = _useRouteParams.field,
-      fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
-      _useRouteParams$form = _useRouteParams.form,
-      formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form; // Get screen
-
-
+    url = _useRouteParams.url,
+    _useRouteParams$scree = _useRouteParams.screen,
+    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+    _useRouteParams$field = _useRouteParams.field,
+    fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
+    _useRouteParams$form = _useRouteParams.form,
+    formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form;
+
+  // Get screen
   var _ref2 = value || {},
-      _ref2$components = _ref2.components,
-      screens = _ref2$components === void 0 ? [] : _ref2$components;
-
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var screenIndex = screens.findIndex(function (it) {
     return it.id === screenId;
   });
@@ -800,62 +732,54 @@ var EditForm = function EditForm(_ref) {
   var screensManager = contexts.useScreensManager();
   var screenFields = React.useMemo(function () {
     var _ref3 = screen || {},
-        type = _ref3.type;
-
+      type = _ref3.type;
     var definition = type !== null ? screensManager.getDefinition(type) : null;
     return definition != null ? getScreenFieldsWithStates(definition) : [];
-  }, [screensManager, screen]); // Get transition value
+  }, [screensManager, screen]);
 
+  // Get transition value
   var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
-      transitionClassNames = _useFormTransition.classNames,
-      transitionTimeout = _useFormTransition.timeout;
-
+    transitionClassNames = _useFormTransition.classNames,
+    transitionTimeout = _useFormTransition.timeout;
   var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      screenSettingsOpened = _useState2[0],
-      setScreenSettingsOpened = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    screenSettingsOpened = _useState2[0],
+    setScreenSettingsOpened = _useState2[1];
   var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      deleteScreenModalOpened = _useState4[0],
-      setDeleteScreenModalOpened = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    deleteScreenModalOpened = _useState4[0],
+    setDeleteScreenModalOpened = _useState4[1];
   var _useState5 = React.useState({}),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      fieldForms = _useState6[0],
-      setFieldForms = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    fieldForms = _useState6[0],
+    setFieldForms = _useState6[1];
   var _useState7 = React.useState(null),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      fieldContext = _useState8[0],
-      setFieldContext = _useState8[1]; // Callbacks
-
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    fieldContext = _useState8[0],
+    setFieldContext = _useState8[1];
 
+  // Callbacks
   var gotoFieldForm = React.useCallback(function () {
     var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     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$ = _ref5[0],
-        rootFieldName = _ref5$ === void 0 ? null : _ref5$;
-
+      _ref5 = _slicedToArray__default["default"](_ref4, 1),
+      _ref5$ = _ref5[0],
+      rootFieldName = _ref5$ === void 0 ? null : _ref5$;
     var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
-        _ref7 = _slicedToArray__default["default"](_ref6, 1),
-        _ref7$ = _ref7[0],
-        currentStateId = _ref7$ === void 0 ? null : _ref7$;
-
+      _ref7 = _slicedToArray__default["default"](_ref6, 1),
+      _ref7$ = _ref7[0],
+      currentStateId = _ref7$ === void 0 ? null : _ref7$;
     var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
-      var name = _ref9.name,
+        var name = _ref9.name,
           fieldStateId = _ref9.stateId;
-      return name === rootFieldName && currentStateId === fieldStateId;
-    }) || null : null) || {},
-        _ref8$stateId = _ref8.stateId,
-        stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
-
+        return name === rootFieldName && currentStateId === fieldStateId;
+      }) || null : null) || {},
+      _ref8$stateId = _ref8.stateId,
+      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) {
@@ -870,11 +794,9 @@ var EditForm = function EditForm(_ref) {
     var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
     var pastUrl = fieldForms[fieldKey] || null;
-
     if (pastUrl !== null) {
       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;
     }, {}));
@@ -904,25 +826,22 @@ var EditForm = function EditForm(_ref) {
   var onDeleteScreenConfirm = React.useCallback(function () {
     var current = screens.findIndex(function (_ref10) {
       var _ref10$id = _ref10.id,
-          scrId = _ref10$id === void 0 ? null : _ref10$id;
+        scrId = _ref10$id === void 0 ? null : _ref10$id;
       return scrId === screenId;
     }) || 0;
     var previous = screens.find(function (_ref11, i) {
       var _ref11$id = _ref11.id,
-          scrId = _ref11$id === void 0 ? null : _ref11$id;
+        scrId = _ref11$id === void 0 ? null : _ref11$id;
       return scrId !== screenId && (i === current - 1 || current === 0);
     }) || null;
-
     if (previous !== null) {
       var _ref12 = previous || {},
-          _ref12$id = _ref12.id,
-          firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
-
+        _ref12$id = _ref12.id,
+        firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
       routePush('screen', {
         screen: firstScreenId
       });
     }
-
     triggerOnChange(deleteScreen(value, screenId));
     setDeleteScreenModalOpened(false);
   }, [value, triggerOnChange, screenId, setScreenSettingsOpened, routePush, screens]);
@@ -1034,40 +953,33 @@ var EditForm = function EditForm(_ref) {
     onCancel: onDeleteScreenCancel
   }) : null);
 };
-
 EditForm.propTypes = propTypes$j;
 EditForm.defaultProps = defaultProps$j;
 
 function useScreenStates(screen) {
   var _ref = screen || {},
-      type = _ref.type;
-
+    type = _ref.type;
   var screensManager = contexts.useScreensManager();
   var states = React.useMemo(function () {
     var definition = screensManager.getDefinition(type) || null;
-
     var _ref2 = definition || {},
-        _ref2$states = _ref2.states,
-        screenStates = _ref2$states === void 0 ? null : _ref2$states;
-
+      _ref2$states = _ref2.states,
+      screenStates = _ref2$states === void 0 ? null : _ref2$states;
     return screenStates;
   }, [screensManager, type]);
   return states;
 }
 
 var _excluded$7 = ["components"];
-
 var useThemeValue = function useThemeValue(value) {
   var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var valueWithTheme = React.useMemo(function () {
     if (!isTheme) {
       return value;
     }
-
     var _ref = value || {};
-        _ref.components;
-        var themeValue = _objectWithoutProperties__default["default"](_ref, _excluded$7);
-
+      _ref.components;
+      var themeValue = _objectWithoutProperties__default["default"](_ref, _excluded$7);
     return value !== null ? _objectSpread__default["default"]({
       theme: themeValue
     }, value) : value;
@@ -1086,10 +998,9 @@ var defaultProps$i = {
   color: 'currentColor',
   className: null
 };
-
 var DesktopIcon = function DesktopIcon(_ref) {
   var color = _ref.color,
-      className = _ref.className;
+    className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -1106,7 +1017,6 @@ var DesktopIcon = function DesktopIcon(_ref) {
     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"
   }));
 };
-
 DesktopIcon.propTypes = propTypes$i;
 DesktopIcon.defaultProps = defaultProps$i;
 
@@ -1119,10 +1029,9 @@ var defaultProps$h = {
   color: 'currentColor',
   className: null
 };
-
 var MobileIcon = function MobileIcon(_ref) {
   var color = _ref.color,
-      className = _ref.className;
+    className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
@@ -1139,7 +1048,6 @@ var MobileIcon = function MobileIcon(_ref) {
     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"
   }));
 };
-
 MobileIcon.propTypes = propTypes$h;
 MobileIcon.defaultProps = defaultProps$h;
 
@@ -1161,13 +1069,11 @@ var defaultProps$g = {
   iconComponents: DeviceIcons,
   className: null
 };
-
 var DeviceButton = function DeviceButton(_ref) {
   var device = _ref.device,
-      className = _ref.className,
-      iconComponents = _ref.iconComponents,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
-
+    className = _ref.className,
+    iconComponents = _ref.iconComponents,
+    props = _objectWithoutProperties__default["default"](_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$c.container, _defineProperty__default["default"]({}, className, className !== null)])
@@ -1175,7 +1081,6 @@ var DeviceButton = function DeviceButton(_ref) {
     className: styles$c.icon
   }));
 };
-
 DeviceButton.propTypes = propTypes$g;
 DeviceButton.defaultProps = defaultProps$g;
 
@@ -1190,19 +1095,17 @@ var defaultProps$f = {
   className: null,
   onClickItem: null
 };
-
 var DevicesMenu = function DevicesMenu(_ref) {
   var items = _ref.items,
-      className = _ref.className,
-      onClickItem = _ref.onClickItem;
+    className = _ref.className,
+    onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
     items: items,
     theme: "outline-secondary",
     className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
-          itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
-
+        itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
       return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
@@ -1214,13 +1117,12 @@ var DevicesMenu = function DevicesMenu(_ref) {
     }
   });
 };
-
 DevicesMenu.propTypes = propTypes$f;
 DevicesMenu.defaultProps = defaultProps$f;
 
 var styles$b = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
-var styles$a = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
+var styles$a = {"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,
@@ -1233,8 +1135,8 @@ var propTypes$e = {
   children: PropTypes__default["default"].node,
   refButton: PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any // eslint-disable-line
-
   }),
+
   className: PropTypes__default["default"].string
 };
 var defaultProps$e = {
@@ -1249,20 +1151,18 @@ var defaultProps$e = {
   refButton: null,
   className: null
 };
-
 var ScreenButton = function ScreenButton(_ref) {
   var _ref2;
-
   var active = _ref.active,
-      id = _ref.id,
-      href = _ref.href,
-      className = _ref.className,
-      label = _ref.label,
-      icon = _ref.icon,
-      children = _ref.children,
-      title = _ref.title,
-      onClick = _ref.onClick,
-      refButton = _ref.refButton;
+    id = _ref.id,
+    href = _ref.href,
+    className = _ref.className,
+    label = _ref.label,
+    icon = _ref.icon,
+    children = _ref.children,
+    title = _ref.title,
+    onClick = _ref.onClick,
+    refButton = _ref.refButton;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$a.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$a.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1285,7 +1185,6 @@ var ScreenButton = function ScreenButton(_ref) {
     className: classNames__default["default"]([styles$a.border, 'rounded'])
   })));
 };
-
 ScreenButton.propTypes = propTypes$e;
 ScreenButton.defaultProps = defaultProps$e;
 var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
@@ -1319,18 +1218,17 @@ var defaultProps$d = {
   onClickItem: null,
   className: null
 };
-
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
   var screen = _ref.screen,
-      screenState = _ref.screenState,
-      index = _ref.index,
-      title = _ref.title,
-      href = _ref.href,
-      active = _ref.active,
-      className = _ref.className,
-      _onClick = _ref.onClick,
-      onClickItem = _ref.onClickItem,
-      withPlaceholder = _ref.withPlaceholder;
+    screenState = _ref.screenState,
+    index = _ref.index,
+    title = _ref.title,
+    href = _ref.href,
+    active = _ref.active,
+    className = _ref.className,
+    _onClick = _ref.onClick,
+    onClickItem = _ref.onClickItem,
+    withPlaceholder = _ref.withPlaceholder;
   var intl = reactIntl.useIntl();
   var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
   return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
@@ -1342,7 +1240,6 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       if (_onClick !== null) {
         _onClick(screen, index);
       }
-
       if (onClickItem !== null) {
         onClickItem(screen, index);
       }
@@ -1354,7 +1251,6 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     withSize: true
   }));
 };
-
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;
 
@@ -1370,29 +1266,24 @@ var defaultProps$c = {
   className: null,
   onChange: null
 };
-
 function ScreenStates(_ref) {
   var screen = _ref.screen,
-      value = _ref.value,
-      className = _ref.className,
-      onChange = _ref.onChange;
+    value = _ref.value,
+    className = _ref.className,
+    onChange = _ref.onChange;
   var url = contexts.useUrlGenerator();
   var push = contexts.useRoutePush();
-
   var _useRouteParams = useRouteParams(),
-      _useRouteParams$scree = _useRouteParams.screen,
-      screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
-      _useRouteParams$field = _useRouteParams.field,
-      field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
-
+    _useRouteParams$scree = _useRouteParams.screen,
+    screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+    _useRouteParams$field = _useRouteParams.field,
+    field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
   var states = useScreenStates(screen);
-
   var _ref2 = field !== null ? field.split('/') : [],
-      _ref3 = _toArray__default["default"](_ref2),
-      _ref3$ = _ref3[0],
-      stateParam = _ref3$ === void 0 ? null : _ref3$,
-      stateIndexes = _ref3.slice(1);
-
+    _ref3 = _toArray__default["default"](_ref2),
+    _ref3$ = _ref3[0],
+    stateParam = _ref3$ === void 0 ? null : _ref3$,
+    stateIndexes = _ref3.slice(1);
   var stateIndex = stateIndexes.find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || null;
@@ -1421,42 +1312,36 @@ function ScreenStates(_ref) {
     })
   })), states.map(function (state) {
     var id = state.id,
-        _state$label = state.label,
-        label = _state$label === void 0 ? null : _state$label,
-        _state$repeatable = state.repeatable,
-        repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
-        _state$withoutCreate = state.withoutCreate,
-        withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
-        _state$fieldName = state.fieldName,
-        fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
+      _state$label = state.label,
+      label = _state$label === void 0 ? null : _state$label,
+      _state$repeatable = state.repeatable,
+      repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
+      _state$withoutCreate = state.withoutCreate,
+      withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
+      _state$fieldName = state.fieldName,
+      fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
     var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
-
     var onClickAdd = function onClickAdd() {
       var _ref6 = value || {},
-          _ref6$components = _ref6.components,
-          currentComponentsValue = _ref6$components === void 0 ? [] : _ref6$components;
-
+        _ref6$components = _ref6.components,
+        currentComponentsValue = _ref6$components === void 0 ? [] : _ref6$components;
       var currentScreenIndex = currentComponentsValue.findIndex(function (_ref7) {
         var screenId = _ref7.id;
         return screen.id === screenId;
       });
       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)))
       });
-
       if (onChange !== null) {
         onChange(newValue);
       }
-
       push('screen.field', {
         screen: screen.id,
         field: [id, currentFieldValue.length]
       });
     };
-
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React__default["default"].createElement("h6", {
@@ -1496,12 +1381,12 @@ function ScreenStates(_ref) {
       href: url('screen.field', {
         screen: screen.id,
         field: id
-      }) // onClick={() => {
+      })
+      // onClick={() => {
       //     if (onStateChange !== null) {
       //         onStateChange(id);
       //     }
       // }}
-
     }));
   })));
 }
@@ -1509,7 +1394,7 @@ function ScreenStates(_ref) {
 ScreenStates.propTypes = propTypes$c;
 ScreenStates.defaultProps = defaultProps$c;
 
-var styles$8 = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","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 styles$8 = {"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]),
@@ -1541,44 +1426,39 @@ var defaultProps$b = {
   onChange: null,
   withoutDevicesSizes: true
 };
-
 var EditorPreview = function EditorPreview(_ref) {
   var _ref8;
-
   var value = _ref.value,
-      viewerTheme = _ref.viewerTheme,
-      isTheme = _ref.isTheme,
-      devices = _ref.devices,
-      initialDevice = _ref.device,
-      className = _ref.className,
-      onScreenChange = _ref.onScreenChange,
-      onChange = _ref.onChange,
-      withoutDevicesSizes = _ref.withoutDevicesSizes;
-
+    viewerTheme = _ref.viewerTheme,
+    isTheme = _ref.isTheme,
+    devices = _ref.devices,
+    initialDevice = _ref.device,
+    className = _ref.className,
+    onScreenChange = _ref.onScreenChange,
+    onChange = _ref.onChange,
+    withoutDevicesSizes = _ref.withoutDevicesSizes;
   var _useRouteParams = useRouteParams(),
-      _useRouteParams$scree = _useRouteParams.screen,
-      screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
-      _useRouteParams$field = _useRouteParams.field,
-      fieldParam = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
-
+    _useRouteParams$scree = _useRouteParams.screen,
+    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+    _useRouteParams$field = _useRouteParams.field,
+    fieldParam = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
   var _useScreenSize = contexts.useScreenSize(),
-      _useScreenSize$screen = _useScreenSize.screen,
-      screen = _useScreenSize$screen === void 0 ? null : _useScreenSize$screen,
-      _useScreenSize$screen2 = _useScreenSize.screens,
-      screens = _useScreenSize$screen2 === void 0 ? [] : _useScreenSize$screen2;
-
-  var valueWithTheme = useThemeValue(value, isTheme); // const valueParsed = valueWithTheme;
-
+    _useScreenSize$screen = _useScreenSize.screen,
+    screen = _useScreenSize$screen === void 0 ? null : _useScreenSize$screen,
+    _useScreenSize$screen2 = _useScreenSize.screens,
+    screens = _useScreenSize$screen2 === void 0 ? [] : _useScreenSize$screen2;
+  var valueWithTheme = useThemeValue(value, isTheme);
+  // const valueParsed = valueWithTheme;
   var valueParsed = hooks.useParsedStory(valueWithTheme, {
     withTheme: isTheme,
     withMedias: false
-  }); // Get device
+  });
 
+  // Get device
   var _useState = React.useState(initialDevice || devices[0].id),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      deviceId = _useState2[0],
-      setDeviceId = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    deviceId = _useState2[0],
+    setDeviceId = _useState2[1];
   var onClickDeviceItem = React.useCallback(function (e, it) {
     return setDeviceId(it.id);
   }, [setDeviceId]);
@@ -1586,62 +1466,54 @@ var EditorPreview = function EditorPreview(_ref) {
     return devices.find(function (it) {
       return it.id === deviceId;
     });
-  }, [devices, deviceId]); // Calculate preview style
+  }, [devices, deviceId]);
 
+  // Calculate preview style
   var _useDimensionObserver = hooks.useDimensionObserver(),
-      bottomRef = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
-      _useDimensionObserver3 = _useDimensionObserver.height,
-      bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
-
+    bottomRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
   var previewStyle = React.useMemo(function () {
     if (withoutDevicesSizes && initialDevice === null) {
       return {};
     }
-
     var deviceWidth = device.width,
-        deviceHeight = device.height;
+      deviceHeight = device.height;
     var maxWidth = screen === 'mobile' ? bottomWidth : deviceWidth;
     var maxHeight = screen === 'mobile' ? bottomHeight : deviceHeight;
-
     var _getSizeWithinBounds = size.getSizeWithinBounds(maxWidth, maxHeight, bottomWidth, bottomHeight),
-        previewScale = _getSizeWithinBounds.scale;
-
+      previewScale = _getSizeWithinBounds.scale;
     return {
       width: maxWidth * previewScale,
-      height: maxHeight * previewScale // transform: `scale(${previewScale}, ${previewScale})`,
-
+      height: maxHeight * previewScale
+      // transform: `scale(${previewScale}, ${previewScale})`,
     };
   }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
   var currentScreen = React.useMemo(function () {
     var _ref2 = valueParsed || {},
-        _ref2$components = _ref2.components,
-        components = _ref2$components === void 0 ? [] : _ref2$components;
-
+      _ref2$components = _ref2.components,
+      components = _ref2$components === void 0 ? [] : _ref2$components;
     return (screenId !== null ? components.find(function (_ref3) {
       var id = _ref3.id;
       return id === screenId;
     }) : components[0]) || null;
   }, [valueParsed, screenId]);
   var currentScreenStates = useScreenStates(currentScreen);
-
   var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
-      _ref5 = _slicedToArray__default["default"](_ref4, 1),
-      _ref5$ = _ref5[0],
-      screenStateParam = _ref5$ === void 0 ? null : _ref5$;
-
+    _ref5 = _slicedToArray__default["default"](_ref4, 1),
+    _ref5$ = _ref5[0],
+    screenStateParam = _ref5$ === void 0 ? null : _ref5$;
   var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
     var id = _ref6.id;
     return id === screenStateParam;
   }) || null : null;
-
   var _ref7 = currentScreenState || {},
-      _ref7$id = _ref7.id,
-      screenStateId = _ref7$id === void 0 ? null : _ref7$id,
-      _ref7$repeatable = _ref7.repeatable,
-      repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
-
+    _ref7$id = _ref7.id,
+    screenStateId = _ref7$id === void 0 ? null : _ref7$id,
+    _ref7$repeatable = _ref7.repeatable,
+    repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
@@ -1694,13 +1566,12 @@ var EditorPreview = function EditorPreview(_ref) {
     className: styles$8.devices
   })) : null));
 };
-
 EditorPreview.propTypes = propTypes$b;
 EditorPreview.defaultProps = defaultProps$b;
 
 var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var styles$6 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -1708,22 +1579,18 @@ function getDragDepth(offset, indentationWidth) {
 }
 function getMaxDepth(_ref) {
   var previousItem = _ref.previousItem;
-
   if (previousItem) {
     // return previousItem.depth + 1;
     return 1;
   }
-
   return 0;
 }
 function getMinDepth(_ref2) {
   var nextItem = _ref2.nextItem;
-
   if (nextItem) {
     // return nextItem.depth;
     return 0;
   }
-
   return 0;
 }
 function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
@@ -1748,34 +1615,27 @@ function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
     nextItem: nextItem
   });
   var depth = projectedDepth;
-
   if (projectedDepth >= maxDepth) {
     depth = maxDepth;
   } else if (projectedDepth < minDepth) {
     depth = minDepth;
   }
-
   function getParentId() {
     var _newItems$slice$rever;
-
     if (depth === 0 || !previousItem) {
       return null;
     }
-
     if (depth === previousItem.depth) {
       return previousItem.parentId;
     }
-
     if (depth > previousItem.depth) {
       return previousItem.id;
     }
-
     var newParent = (_newItems$slice$rever = newItems.slice(0, overItemIndex).reverse().find(function (item) {
       return item.depth === depth;
     })) === null || _newItems$slice$rever === void 0 ? void 0 : _newItems$slice$rever.parentId;
     return newParent !== null && newParent !== void 0 ? newParent : null;
   }
-
   return {
     depth: depth,
     maxDepth: maxDepth,
@@ -1783,7 +1643,6 @@ function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
     parentId: getParentId()
   };
 }
-
 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;
@@ -1792,11 +1651,9 @@ function flatten(items) {
       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)));
   }, []);
 }
-
 function flattenTree(items) {
   return flatten(items);
 }
@@ -1811,36 +1668,30 @@ function buildTree(flattenedItems) {
     id: 'root',
     children: []
   };
-
   var nodes = _defineProperty__default["default"]({}, root.id, root);
-
   var items = flattenedItems.map(function (item) {
     return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
       children: []
     });
-  }); // console.log('BUILD');
-
-  var indexes = {}; // eslint-disable-next-line no-restricted-syntax
-
+  });
+  // console.log('BUILD');
+  var indexes = {};
+  // eslint-disable-next-line no-restricted-syntax
   var _iterator = _createForOfIteratorHelper__default["default"](items),
-      _step;
-
+    _step;
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var _item$parentId, _nodes$parentId;
-
       var item = _step.value;
       var id = item.id,
-          children = item.children;
+        children = item.children;
       var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
       var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
-
       if (typeof indexes[parentId] !== 'undefined') {
         indexes[parentId] += 1;
       } else {
         indexes[parentId] = 0;
       }
-
       nodes[id] = {
         id: id,
         children: children,
@@ -1855,50 +1706,42 @@ function buildTree(flattenedItems) {
   } finally {
     _iterator.f();
   }
-
   return root.children;
 }
 function findItemDeep(items, itemId) {
   for (var i = 0; i < items.length; i += 1) {
     var item = items[i] || {};
     var id = item.id,
-        _item$children = item.children,
-        children = _item$children === void 0 ? [] : _item$children;
-
+      _item$children = item.children,
+      children = _item$children === void 0 ? [] : _item$children;
     if (id === itemId) {
       return item;
     }
-
     if (children.length > 0) {
       var child = findItemDeep(children, itemId);
-
       if (child) {
         return child;
       }
     }
   }
-
   return undefined;
 }
 function removeItem(items, id) {
-  var newItems = []; // eslint-disable-next-line no-restricted-syntax
+  var newItems = [];
 
+  // eslint-disable-next-line no-restricted-syntax
   var _iterator2 = _createForOfIteratorHelper__default["default"](items),
-      _step2;
-
+    _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var item = _step2.value;
-
       if (item.id === id) {
         // eslint-disable-next-line no-continue
         continue;
       }
-
       if (item.children.length) {
         item.children = removeItem(item.children, id);
       }
-
       newItems.push(item);
     }
   } catch (err) {
@@ -1906,24 +1749,20 @@ function removeItem(items, id) {
   } finally {
     _iterator2.f();
   }
-
   return newItems;
 }
 function setProperty(items, id, property, setter) {
   // eslint-disable-next-line no-restricted-syntax
   var _iterator3 = _createForOfIteratorHelper__default["default"](items),
-      _step3;
-
+    _step3;
   try {
     for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
       var item = _step3.value;
-
       if (item.id === id) {
-        item[property] = setter(item[property]); // eslint-disable-next-line no-continue
-
+        item[property] = setter(item[property]);
+        // eslint-disable-next-line no-continue
         continue;
       }
-
       if (item.children.length) {
         item.children = setProperty(item.children, id, property, setter);
       }
@@ -1933,47 +1772,37 @@ function setProperty(items, id, property, setter) {
   } finally {
     _iterator3.f();
   }
-
   return _toConsumableArray__default["default"](items);
 }
-
 function countChildren(items) {
   var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return items.reduce(function (acc, _ref6) {
     var _ref6$children = _ref6.children,
-        children = _ref6$children === void 0 ? [] : _ref6$children;
-
+      children = _ref6$children === void 0 ? [] : _ref6$children;
     if (children.length) {
       return countChildren(children, acc + 1);
     }
-
     return acc + 1;
   }, count);
 }
-
 function getChildCount(items, id) {
   if (!id) {
     return 0;
   }
-
   var item = findItemDeep(items, id);
   return item ? countChildren(item.children || []) : 0;
 }
 function removeChildrenOf(items, ids) {
   var excludeParentIds = _toConsumableArray__default["default"](ids);
-
   return items.filter(function (item) {
     if (item.parentId && excludeParentIds.includes(item.parentId)) {
       var _item$children2 = item.children,
-          children = _item$children2 === void 0 ? [] : _item$children2;
-
+        children = _item$children2 === void 0 ? [] : _item$children2;
       if (children.length) {
         excludeParentIds.push(item.id);
       }
-
       return false;
     }
-
     return true;
   });
 }
@@ -1983,30 +1812,25 @@ var horizontal = [core$1.KeyboardCode.Left, core$1.KeyboardCode.Right];
 var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(context, indentationWidth) {
   return function (event, _ref) {
     var currentCoordinates = _ref.currentCoordinates,
-        _ref$context = _ref.context,
-        active = _ref$context.active,
-        over = _ref$context.over,
-        collisionRect = _ref$context.collisionRect,
-        droppableContainers = _ref$context.droppableContainers;
-
+      _ref$context = _ref.context,
+      active = _ref$context.active,
+      over = _ref$context.over,
+      collisionRect = _ref$context.collisionRect,
+      droppableContainers = _ref$context.droppableContainers;
     if (directions.includes(event.code)) {
       var _droppableContainers$;
-
       if (!active || !collisionRect) {
         return;
       }
-
       event.preventDefault();
       var _context$current = context.current,
-          items = _context$current.items,
-          offset = _context$current.offset;
-
+        items = _context$current.items,
+        offset = _context$current.offset;
       if (horizontal.includes(event.code) && over !== null && over !== void 0 && over.id) {
         var _getProjection = getProjection(items, active.id, over.id, offset, indentationWidth),
-            depth = _getProjection.depth,
-            maxDepth = _getProjection.maxDepth,
-            minDepth = _getProjection.minDepth;
-
+          depth = _getProjection.depth,
+          maxDepth = _getProjection.maxDepth,
+          minDepth = _getProjection.minDepth;
         switch (event.code) {
           case core$1.KeyboardCode.Left:
             if (depth > minDepth) {
@@ -2014,55 +1838,42 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
                 x: currentCoordinates.x - indentationWidth
               });
             }
-
             break;
-
           case core$1.KeyboardCode.Right:
             if (depth < maxDepth) {
               return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentCoordinates), {}, {
                 x: currentCoordinates.x + indentationWidth
               });
             }
-
             break;
-
           default:
             return undefined;
         }
-
         return undefined;
       }
-
       var containers = [];
       var overRect = over !== null && over !== void 0 && over.id ? (_droppableContainers$ = droppableContainers.get(over.id)) === null || _droppableContainers$ === void 0 ? void 0 : _droppableContainers$.rect.current : undefined;
-
       if (overRect) {
         droppableContainers.forEach(function (container) {
           if (container !== null && container !== void 0 && container.disabled) {
             return;
           }
-
           var rect = container === null || container === void 0 ? void 0 : container.rect.current;
-
           if (!rect) {
             return;
           }
-
           switch (event.code) {
             case core$1.KeyboardCode.Down:
               if (overRect.top < rect.top) {
                 containers.push(container);
               }
-
               break;
-
             case core$1.KeyboardCode.Up:
               if (overRect.top > rect.top) {
                 containers.push(container);
               }
-
               break;
-
+            //
           }
         });
       }
@@ -2074,13 +1885,10 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
         droppableContainers: containers
       });
       var closestId = core$1.getFirstCollision(collisions, 'id');
-
       if (closestId && over !== null && over !== void 0 && over.id) {
         var _droppableContainers$2, _droppableContainers$3;
-
         var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.node.current;
         var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : _droppableContainers$3.rect.current;
-
         if (newNode && activeNodeRect) {
           var newRect = core$1.getClientRect(newNode, {
             ignoreTransform: true
@@ -2093,11 +1901,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
             var id = _ref3.id;
             return id === active.id;
           });
-
           if (newItem && activeItem) {
             var _getProjection2 = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth),
-                _depth = _getProjection2.depth;
-
+              _depth = _getProjection2.depth;
             var topOffset = newRect.top > activeNodeRect.top ? Math.abs(activeNodeRect.height - newRect.height) : 0;
             var newCoordinates = {
               x: newRect.left + _depth * indentationWidth,
@@ -2108,14 +1914,13 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
         }
       }
     }
-
     return undefined;
   };
 };
 
 var styles$5 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
 
-var styles$4 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","text":"micromag-editor-sortable-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
+var styles$4 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","text":"micromag-editor-sortable-sortable-tree-item-actions-text","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
 
 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 = {
@@ -2168,29 +1973,27 @@ var defaultProps$a = {
 };
 var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
-
   var childCount = _ref.childCount,
-      clone = _ref.clone,
-      depth = _ref.depth,
-      disableSelection = _ref.disableSelection,
-      disableInteraction = _ref.disableInteraction,
-      ghost = _ref.ghost,
-      handleProps = _ref.handleProps,
-      indentationWidth = _ref.indentationWidth,
-      indicator = _ref.indicator,
-      collapsed = _ref.collapsed,
-      onCollapse = _ref.onCollapse,
-      onRemove = _ref.onRemove;
-      _ref.onClick;
-      var style = _ref.style;
-      _ref.value;
-      var wrapperRef = _ref.wrapperRef;
-      _ref.showId;
-      var showCount = _ref.showCount,
-      showCollapsedCount = _ref.showCollapsedCount,
-      children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
-
+    clone = _ref.clone,
+    depth = _ref.depth,
+    disableSelection = _ref.disableSelection,
+    disableInteraction = _ref.disableInteraction,
+    ghost = _ref.ghost,
+    handleProps = _ref.handleProps,
+    indentationWidth = _ref.indentationWidth,
+    indicator = _ref.indicator,
+    collapsed = _ref.collapsed,
+    onCollapse = _ref.onCollapse,
+    onRemove = _ref.onRemove;
+    _ref.onClick;
+    var style = _ref.style;
+    _ref.value;
+    var wrapperRef = _ref.wrapperRef;
+    _ref.showId;
+    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$4.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.clone, clone), _defineProperty__default["default"](_ref2, styles$4.ghost, ghost), _defineProperty__default["default"](_ref2, styles$4.indicator, indicator), _defineProperty__default["default"](_ref2, styles$4.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$4.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$4.withChildren, onCollapse !== null), _ref2)]),
     ref: wrapperRef,
@@ -2265,65 +2068,57 @@ var defaultProps$9 = {
   childValue: null,
   isLastChild: false
 };
-
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
   var isSorting = _ref.isSorting,
-      wasDragging = _ref.wasDragging;
+    wasDragging = _ref.wasDragging;
   return !(isSorting || wasDragging);
 };
-
 var SortableTreeItem = function SortableTreeItem(_ref2) {
   var id = _ref2.id,
-      index = _ref2.index,
-      depth = _ref2.depth,
-      Component = _ref2.component,
-      value = _ref2.value;
-      _ref2.style;
-      _ref2.smallScale;
-      var collapsed = _ref2.collapsed,
-      onCollapse = _ref2.onCollapse,
-      onClickItem = _ref2.onClickItem,
-      childValue = _ref2.childValue;
-      _ref2.isLastChild;
-      var props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
-
+    index = _ref2.index,
+    depth = _ref2.depth,
+    Component = _ref2.component,
+    value = _ref2.value;
+    _ref2.style;
+    _ref2.smallScale;
+    var collapsed = _ref2.collapsed,
+    onCollapse = _ref2.onCollapse,
+    onClickItem = _ref2.onClickItem,
+    childValue = _ref2.childValue;
+    _ref2.isLastChild;
+    var props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
   var _useSortable = sortable.useSortable({
-    id: id,
-    animateLayoutChanges: animateLayoutChanges
-  }),
-      attributes = _useSortable.attributes,
-      isDragging = _useSortable.isDragging,
-      isSorting = _useSortable.isSorting,
-      listeners = _useSortable.listeners,
-      setDraggableNodeRef = _useSortable.setDraggableNodeRef,
-      setDroppableNodeRef = _useSortable.setDroppableNodeRef,
-      transform = _useSortable.transform,
-      transition = _useSortable.transition;
-
+      id: id,
+      animateLayoutChanges: animateLayoutChanges
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    isSorting = _useSortable.isSorting,
+    listeners = _useSortable.listeners,
+    setDraggableNodeRef = _useSortable.setDraggableNodeRef,
+    setDroppableNodeRef = _useSortable.setDroppableNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
   var timeout = React.useRef(null);
   var actionsStyle = {
     transform: utilities.CSS.Translate.toString(transform),
     transition: transition
   };
-
   var _ref3 = listeners || {},
-      _ref3$onPointerDown = _ref3.onPointerDown,
-      onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
-      _ref3$onPointerUp = _ref3.onPointerUp,
-      onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
-
+    _ref3$onPointerDown = _ref3.onPointerDown,
+    onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
+    _ref3$onPointerUp = _ref3.onPointerUp,
+    onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
   var onClickAction = React.useCallback(function (e) {
     if (onClickItem !== null) {
       onClickItem(value, index);
     }
-
     if (onPointerDown !== null) {
       e.persist();
       timeout.current = setTimeout(function () {
         if (onPointerDown !== null) {
           onPointerDown(e);
         }
-
         timeout.current = null;
       }, 200);
     }
@@ -2332,7 +2127,6 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     if (timeout.current !== null) {
       clearTimeout(timeout.current);
     }
-
     if (onPointerUp !== null) {
       onPointerUp(e);
     }
@@ -2359,7 +2153,6 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     className: styles$5.child
   }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
 };
-
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
 
@@ -2389,18 +2182,15 @@ var measuring = {
     strategy: core$1.MeasuringStrategy.Always
   }
 };
-
 var dropAnimation = _objectSpread__default["default"](_objectSpread__default["default"]({}, core$1.defaultDropAnimation), {}, {
   dragSourceOpacity: 0.5
 });
-
 var adjustTranslate = function adjustTranslate(_ref) {
   var transform = _ref.transform;
   return _objectSpread__default["default"](_objectSpread__default["default"]({}, transform), {}, {
     y: transform.y - 25
   });
 };
-
 var propTypes$8 = {
   collapsible: PropTypes__default["default"].bool,
   // eslint-disable-next-line react/forbid-prop-types
@@ -2422,45 +2212,39 @@ var defaultProps$8 = {
   onClickItem: null,
   onChange: null
 };
-
 var SortableTree = function SortableTree(_ref2) {
   var collapsible = _ref2.collapsible,
-      defaultItems = _ref2.items,
-      indicator = _ref2.indicator,
-      indentationWidth = _ref2.indentationWidth,
-      removable = _ref2.removable,
-      component = _ref2.component,
-      onClickItem = _ref2.onClickItem,
-      onChange = _ref2.onChange;
-
+    defaultItems = _ref2.items,
+    indicator = _ref2.indicator,
+    indentationWidth = _ref2.indentationWidth,
+    removable = _ref2.removable,
+    component = _ref2.component,
+    onClickItem = _ref2.onClickItem,
+    onChange = _ref2.onChange;
   var _useState = React.useState(function () {
-    return buildTree(defaultItems);
-  }),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      items = _useState2[0],
-      setItems = _useState2[1];
-
+      return buildTree(defaultItems);
+    }),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
   var _useState3 = React.useState(null),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      activeId = _useState4[0],
-      setActiveId = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    activeId = _useState4[0],
+    setActiveId = _useState4[1];
   var _useState5 = React.useState(null),
-      _useState6 = _slicedToArray__default["default"](_useState5, 2),
-      overId = _useState6[0],
-      setOverId = _useState6[1];
-
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    overId = _useState6[0],
+    setOverId = _useState6[1];
   var _useState7 = React.useState(0),
-      _useState8 = _slicedToArray__default["default"](_useState7, 2),
-      offsetLeft = _useState8[0],
-      setOffsetLeft = _useState8[1];
-
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    offsetLeft = _useState8[0],
+    setOffsetLeft = _useState8[1];
   var _useState9 = React.useState(null),
-      _useState10 = _slicedToArray__default["default"](_useState9, 2),
-      currentPosition = _useState10[0],
-      setCurrentPosition = _useState10[1]; // Tree setup from list
-
+    _useState10 = _slicedToArray__default["default"](_useState9, 2),
+    currentPosition = _useState10[0],
+    setCurrentPosition = _useState10[1];
 
+  // Tree setup from list
   React.useEffect(function () {
     var flat = flattenTree(items);
     var merged = defaultItems.map(function (t1) {
@@ -2474,9 +2258,9 @@ var SortableTree = function SortableTree(_ref2) {
     var flattenedTree = flattenTree(items);
     var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
       var _ref3$children = _ref3.children,
-          children = _ref3$children === void 0 ? [] : _ref3$children,
-          collapsed = _ref3.collapsed,
-          id = _ref3.id;
+        children = _ref3$children === void 0 ? [] : _ref3$children,
+        collapsed = _ref3.collapsed,
+        id = _ref3.id;
       return collapsed && children.length ? [].concat(_toConsumableArray__default["default"](acc), [id]) : acc;
     }, []) || null;
     return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray__default["default"](collapsedItems)) : collapsedItems);
@@ -2486,13 +2270,11 @@ var SortableTree = function SortableTree(_ref2) {
     items: flattenedItems,
     offset: offsetLeft
   });
-
   var _useState11 = React.useState(function () {
-    return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
-  }),
-      _useState12 = _slicedToArray__default["default"](_useState11, 1),
-      coordinateGetter = _useState12[0];
-
+      return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
+    }),
+    _useState12 = _slicedToArray__default["default"](_useState11, 1),
+    coordinateGetter = _useState12[0];
   var sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor), core$1.useSensor(core$1.KeyboardSensor, {
     coordinateGetter: coordinateGetter
   }));
@@ -2512,20 +2294,17 @@ var SortableTree = function SortableTree(_ref2) {
       offset: offsetLeft
     };
   }, [flattenedItems, offsetLeft]);
-
   function getMovementAnnouncement(eventName, currentActiveId, currentOverId) {
     if (currentOverId && projected) {
       if (eventName !== 'onDragEnd') {
         if (currentPosition && projected.parentId === currentPosition.parentId && currentOverId === currentPosition.overId) {
           return;
         }
-
         setCurrentPosition({
           parentId: projected.parentId,
           overId: currentOverId
         });
       }
-
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
       var overIndex = clonedItems.findIndex(function (_ref6) {
         var id = _ref6.id;
@@ -2540,10 +2319,8 @@ var SortableTree = function SortableTree(_ref2) {
       var newAnnouncement;
       var movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
       var nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
-
       if (!previousItem) {
         var nextItem = typeof sortedItems[overIndex + 1] !== 'undefined' ? sortedItems[overIndex + 1] : null;
-
         if (nextItem !== null) {
           newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " before ").concat(nextItem.id, ".");
         }
@@ -2551,30 +2328,26 @@ var SortableTree = function SortableTree(_ref2) {
         newAnnouncement = "".concat(currentActiveId, " was ").concat(nestedVerb, " under ").concat(previousItem.id, ".");
       } else {
         var previousSibling = previousItem;
-
         var _loop = function _loop() {
           var _previousSibling = previousSibling,
-              parentId = _previousSibling.parentId;
+            parentId = _previousSibling.parentId;
           previousSibling = sortedItems.find(function (_ref8) {
             var id = _ref8.id;
             return id === parentId;
           });
         };
-
         while (previousSibling && projected.depth < previousSibling.depth) {
           _loop();
         }
-
         if (previousSibling) {
           newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " after ").concat(previousSibling.id, ".");
         }
-      } // eslint-disable-next-line consistent-return
-
+      }
 
+      // eslint-disable-next-line consistent-return
       return newAnnouncement;
     }
   }
-
   var announcements = React.useMemo(function () {
     return {
       onDragStart: function onDragStart(id) {
@@ -2596,7 +2369,7 @@ var SortableTree = function SortableTree(_ref2) {
   }, [getMovementAnnouncement]);
   var activeValue = defaultItems.find(function (_ref9) {
     var _ref9$id = _ref9.id,
-        defaultId = _ref9$id === void 0 ? null : _ref9$id;
+      defaultId = _ref9$id === void 0 ? null : _ref9$id;
     return defaultId === activeId;
   });
   var handleDragStart = React.useCallback(function (_ref10) {
@@ -2607,14 +2380,12 @@ var SortableTree = function SortableTree(_ref2) {
       var id = _ref11.id;
       return id === newActiveId;
     });
-
     if (newActiveItem) {
       setCurrentPosition({
         parentId: newActiveItem.parentId,
         overId: activeId
       });
     }
-
     document.body.style.setProperty('cursor', 'grabbing');
   }, [flattenedItems, setActiveId, setOverId, setCurrentPosition]);
   var handleDragMove = React.useCallback(function (_ref12) {
@@ -2623,7 +2394,6 @@ var SortableTree = function SortableTree(_ref2) {
   }, [setOffsetLeft]);
   var handleDragOver = React.useCallback(function (_ref13) {
     var _over$id;
-
     var over = _ref13.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }, [setOverId]);
@@ -2636,12 +2406,11 @@ var SortableTree = function SortableTree(_ref2) {
   }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
   var handleDragEnd = React.useCallback(function (_ref14) {
     var active = _ref14.active,
-        over = _ref14.over;
+      over = _ref14.over;
     resetState();
-
     if (projected && over) {
       var depth = projected.depth,
-          parentId = projected.parentId;
+        parentId = projected.parentId;
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
       var overIndex = clonedItems.findIndex(function (_ref15) {
         var id = _ref15.id;
@@ -2652,10 +2421,10 @@ var SortableTree = function SortableTree(_ref2) {
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
-      var maxDepth = getMaxDepth(activeTreeItem); // Un-merge and flatten
-
+      var maxDepth = getMaxDepth(activeTreeItem);
+      // Un-merge and flatten
       if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
-        var _loop2 = function _loop2(i) {
+        var _loop2 = function _loop2() {
           var childId = activeTreeItem.children[i].id;
           var childIndex = clonedItems.findIndex(function (_ref17) {
             var id = _ref17.id;
@@ -2664,33 +2433,32 @@ var SortableTree = function SortableTree(_ref2) {
           clonedItems[childIndex].parentId = parentId;
           clonedItems[childIndex].depth = depth;
         };
-
         for (var i = 0; i < activeTreeItem.children.length; i += 1) {
-          _loop2(i);
+          _loop2();
         }
-
         activeTreeItem.children = [];
       }
-
       clonedItems[activeIndex] = _objectSpread__default["default"](_objectSpread__default["default"]({}, activeTreeItem), {}, {
         depth: depth,
         parentId: parentId
       });
       var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
-      var newItems = buildTree(sortedItems); // console.log('drag endd', sortedItems, newItems);
+      var newItems = buildTree(sortedItems);
 
-      setItems(newItems);
+      // console.log('drag endd', sortedItems, newItems);
 
+      setItems(newItems);
       if (onChange !== null) {
         // console.log('hell is flatss', newItems);
+
         onChange((newItems || []).map(function (_ref18) {
           var itemId = _ref18.id,
-              _ref18$children = _ref18.children,
-              children = _ref18$children === void 0 ? [] : _ref18$children,
-              _ref18$parentId = _ref18.parentId,
-              itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
-              _ref18$collapsed = _ref18.collapsed,
-              collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
+            _ref18$children = _ref18.children,
+            children = _ref18$children === void 0 ? [] : _ref18$children,
+            _ref18$parentId = _ref18.parentId,
+            itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
+            _ref18$collapsed = _ref18.collapsed,
+            collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
           return {
             id: itemId,
             props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
@@ -2728,7 +2496,8 @@ var SortableTree = function SortableTree(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement(core$1.DndContext, {
     accessibility: {
       announcements: announcements
-    } // announcements={announcements}
+    }
+    // announcements={announcements}
     ,
     sensors: sensors,
     collisionDetection: core$1.closestCenter,
@@ -2743,15 +2512,14 @@ var SortableTree = function SortableTree(_ref2) {
     strategy: sortable.verticalListSortingStrategy
   }, flattenedItems.map(function (_ref19, idx) {
     var _flattenedItems, _ref22;
-
     var id = _ref19.id,
-        _ref19$children = _ref19.children,
-        children = _ref19$children === void 0 ? [] : _ref19$children,
-        collapsed = _ref19.collapsed,
-        depth = _ref19.depth;
+      _ref19$children = _ref19.children,
+      children = _ref19$children === void 0 ? [] : _ref19$children,
+      collapsed = _ref19.collapsed,
+      depth = _ref19.depth;
     var screenValue = defaultItems.find(function (_ref20) {
       var _ref20$id = _ref20.id,
-          defaultId = _ref20$id === void 0 ? null : _ref20$id;
+        defaultId = _ref20$id === void 0 ? null : _ref20$id;
       return defaultId === id;
     });
     var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === void 0 ? void 0 : _flattenedItems.parentId) || null;
@@ -2763,7 +2531,7 @@ var SortableTree = function SortableTree(_ref2) {
     var childCount = getChildCount(items, id);
     var childValue = childCount > 0 && collapsed ? defaultItems.slice().reverse().find(function (_ref21) {
       var _ref21$parentId = _ref21.parentId,
-          parentId = _ref21$parentId === void 0 ? null : _ref21$parentId;
+        parentId = _ref21$parentId === void 0 ? null : _ref21$parentId;
       return parentId === id;
     }) : null;
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2808,12 +2576,11 @@ var SortableTree = function SortableTree(_ref2) {
     })
   })) : null), document.body)));
 };
-
 SortableTree.propTypes = propTypes$8;
 SortableTree.defaultProps = defaultProps$8;
 
 var _excluded$2 = ["className", "screen", "type", "onClick", "active", "href"],
-    _excluded2 = ["id", "screen", "href"];
+  _excluded2 = ["id", "screen", "href"];
 var propTypes$7 = {
   items: core.PropTypes.menuItems,
   withPreview: PropTypes__default["default"].bool,
@@ -2846,37 +2613,33 @@ var defaultProps$7 = {
   onClickItem: null,
   onOrderChange: null
 };
-
 var ScreensMenu = function ScreensMenu(_ref) {
   var _ref8;
-
   var items = _ref.items,
-      withPreview = _ref.withPreview,
-      withPlaceholder = _ref.withPlaceholder,
-      settings = _ref.settings,
-      isVertical = _ref.isVertical,
-      noWrap = _ref.noWrap,
-      className = _ref.className,
-      itemClassName = _ref.itemClassName,
-      buttonClassName = _ref.buttonClassName,
-      settingsClassName = _ref.settingsClassName,
-      sortable = _ref.sortable,
-      isTree = _ref.isTree,
-      onClickItem = _ref.onClickItem,
-      onOrderChange = _ref.onOrderChange;
+    withPreview = _ref.withPreview,
+    withPlaceholder = _ref.withPlaceholder,
+    settings = _ref.settings,
+    isVertical = _ref.isVertical,
+    noWrap = _ref.noWrap,
+    className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    buttonClassName = _ref.buttonClassName,
+    settingsClassName = _ref.settingsClassName,
+    sortable = _ref.sortable,
+    isTree = _ref.isTree,
+    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,
-        type = _ref2.type,
-        _ref2$onClick = _ref2.onClick,
-        onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
-        active = _ref2.active,
-        href = _ref2.href,
-        item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
-
+      itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
+      screen = _ref2.screen,
+      type = _ref2.type,
+      _ref2$onClick = _ref2.onClick,
+      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", {
       key: item.id,
       className: classNames__default["default"]([styles$6.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
@@ -2900,20 +2663,17 @@ var ScreensMenu = function ScreensMenu(_ref) {
   var sortableItems = React.useMemo(function () {
     return isTree ? items.map(function (_ref5) {
       var id = _ref5.id,
-          _ref5$screen = _ref5.screen,
-          screen = _ref5$screen === void 0 ? {} : _ref5$screen,
-          href = _ref5.href,
-          props = _objectWithoutProperties__default["default"](_ref5, _excluded2);
-
+        _ref5$screen = _ref5.screen,
+        screen = _ref5$screen === void 0 ? {} : _ref5$screen,
+        href = _ref5.href,
+        props = _objectWithoutProperties__default["default"](_ref5, _excluded2);
       var _screen$parentId = screen.parentId,
-          parentId = _screen$parentId === void 0 ? null : _screen$parentId,
-          _screen$group = screen.group,
-          group = _screen$group === void 0 ? {} : _screen$group;
-
+        parentId = _screen$parentId === void 0 ? null : _screen$parentId,
+        _screen$group = screen.group,
+        group = _screen$group === void 0 ? {} : _screen$group;
       var _ref6 = group || {},
-          _ref6$collapsed = _ref6.collapsed,
-          collapsed = _ref6$collapsed === void 0 ? true : _ref6$collapsed;
-
+        _ref6$collapsed = _ref6.collapsed,
+        collapsed = _ref6$collapsed === void 0 ? true : _ref6$collapsed;
       return {
         id: id,
         parentId: parentId,
@@ -2950,7 +2710,6 @@ var ScreensMenu = function ScreensMenu(_ref) {
     className: styles$6.items
   }, itemsElements) : null);
 };
-
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
 
@@ -2968,12 +2727,11 @@ var defaultProps$6 = {
   className: null,
   onClickItem: null
 };
-
 var ScreenTypes = function ScreenTypes(_ref) {
   var screens = _ref.screens,
-      selectedTypes = _ref.selectedTypes,
-      className = _ref.className,
-      onClickItem = _ref.onClickItem;
+    selectedTypes = _ref.selectedTypes,
+    className = _ref.className,
+    onClickItem = _ref.onClickItem;
   var intl = reactIntl.useIntl();
   var screensManager = contexts.useScreensManager();
   var screenDefinitions = screens || screensManager.getDefinitions();
@@ -2983,36 +2741,31 @@ var ScreenTypes = function ScreenTypes(_ref) {
   var groups = React.useMemo(function () {
     var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
       var id = definition.id,
-          title = definition.title,
-          _definition$group = definition.group,
-          group = _definition$group === void 0 ? {} : _definition$group;
-
+        title = definition.title,
+        _definition$group = definition.group,
+        group = _definition$group === void 0 ? {} : _definition$group;
       var _ref2 = group || {},
-          _ref2$order = _ref2.order,
-          order = _ref2$order === void 0 ? 0 : _ref2$order,
-          _ref2$label = _ref2.label,
-          label = _ref2$label === void 0 ? {} : _ref2$label,
-          _ref2$hidden = _ref2.hidden,
-          hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
-
+        _ref2$order = _ref2.order,
+        order = _ref2$order === void 0 ? 0 : _ref2$order,
+        _ref2$label = _ref2.label,
+        label = _ref2$label === void 0 ? {} : _ref2$label,
+        _ref2$hidden = _ref2.hidden,
+        hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
       var _ref3 = label || {},
-          _ref3$id = _ref3.id,
-          messageId = _ref3$id === void 0 ? null : _ref3$id;
-
+        _ref3$id = _ref3.id,
+        messageId = _ref3$id === void 0 ? null : _ref3$id;
       if (hidden) {
         return allGroups;
       }
-
       var _ref4 = utils.isMessage(label) ? {
-        id: messageId || id,
-        name: group
-      } : {
-        id: messageId || id,
-        name: title
-      },
-          groupId = _ref4.id,
-          groupName = _ref4.name;
-
+          id: messageId || id,
+          name: group
+        } : {
+          id: messageId || id,
+          name: title
+        },
+        groupId = _ref4.id,
+        groupName = _ref4.name;
       var groupIndex = allGroups.findIndex(function (it) {
         return it.id === groupId;
       });
@@ -3043,8 +2796,8 @@ var ScreenTypes = function ScreenTypes(_ref) {
     className: styles$2.rows
   }, groups.map(function (_ref6) {
     var id = _ref6.id,
-        name = _ref6.name,
-        items = _ref6.items;
+      name = _ref6.name,
+      items = _ref6.items;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "group-".concat(id),
       className: styles$2.row
@@ -3064,7 +2817,6 @@ var ScreenTypes = function ScreenTypes(_ref) {
     })));
   })));
 };
-
 ScreenTypes.propTypes = propTypes$6;
 ScreenTypes.defaultProps = defaultProps$6;
 
@@ -3082,12 +2834,11 @@ var defaultProps$5 = {
   onRequestClose: null,
   onClickScreenType: null
 };
-
 var ScreenTypesModal = function ScreenTypesModal(_ref) {
   var selectedTypes = _ref.selectedTypes,
-      className = _ref.className,
-      onRequestClose = _ref.onRequestClose,
-      onClickScreenType = _ref.onClickScreenType;
+    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, {
       id: "QBaiO0",
@@ -3104,7 +2855,6 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
     onClickItem: onClickScreenType
   })));
 };
-
 ScreenTypesModal.propTypes = propTypes$5;
 ScreenTypesModal.defaultProps = defaultProps$5;
 
@@ -3131,57 +2881,48 @@ var defaultProps$4 = {
   onChange: null,
   className: null
 };
-
 var EditorScreens = function EditorScreens(_ref) {
   var unparsedValue = _ref.value,
-      isTheme = _ref.isTheme,
-      isVertical = _ref.isVertical,
-      isCreateOpened = _ref.isCreateOpened,
-      isParsed = _ref.isParsed,
-      isTree = _ref.isTree,
-      onClickScreen = _ref.onClickScreen,
-      onChange = _ref.onChange,
-      className = _ref.className;
+    isTheme = _ref.isTheme,
+    isVertical = _ref.isVertical,
+    isCreateOpened = _ref.isCreateOpened,
+    isParsed = _ref.isParsed,
+    isTree = _ref.isTree,
+    onClickScreen = _ref.onClickScreen,
+    onChange = _ref.onChange,
+    className = _ref.className;
   var valueWithTheme = useThemeValue(unparsedValue, isTheme);
   var value = isParsed ? unparsedValue : hooks.useParsedStory(valueWithTheme, {
     withMedias: false
   });
-
   var _ref2 = value || {},
-      _ref2$components = _ref2.components,
-      screens = _ref2$components === void 0 ? [] : _ref2$components;
-
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var _useState = React.useState(isCreateOpened),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      createModalOpened = _useState2[0],
-      setCreateModalOpened = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    createModalOpened = _useState2[0],
+    setCreateModalOpened = _useState2[1];
   var routes = contexts.useRoutes();
   var push = contexts.useRoutePush();
   var url = contexts.useUrlGenerator();
-
   var _useRouteParams = useRouteParams({
-    screenOnly: true
-  }),
-      _useRouteParams$scree = _useRouteParams.screen,
-      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
-
+      screenOnly: true
+    }),
+    _useRouteParams$scree = _useRouteParams.screen,
+    currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
   var createScreenFromDefinition = React.useCallback(function (definition) {
     var _ref3 = value || {},
-        _ref3$components = _ref3.components,
-        currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
-        _ref3$theme = _ref3.theme,
-        theme = _ref3$theme === void 0 ? {} : _ref3$theme;
-
+      _ref3$components = _ref3.components,
+      currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
     var _ref4 = isString__default["default"](definition) ? {
-      id: definition
-    } : definition,
-        newScreenType = _ref4.id;
-
+        id: definition
+      } : definition,
+      newScreenType = _ref4.id;
     var _ref5 = theme || {},
-        _ref5$components = _ref5.components,
-        themeComponents = _ref5$components === void 0 ? null : _ref5$components;
-
+      _ref5$components = _ref5.components,
+      themeComponents = _ref5$components === void 0 ? null : _ref5$components;
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
@@ -3191,15 +2932,12 @@ 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)))
     });
-
     if (onChange !== null) {
       onChange(newValue);
     }
-
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = React.useCallback(function (listItems) {
@@ -3209,8 +2947,8 @@ var EditorScreens = function EditorScreens(_ref) {
     });
     var screenProps = listItems.map(function (_ref8) {
       var id = _ref8.id,
-          _ref8$props = _ref8.props,
-          props = _ref8$props === void 0 ? null : _ref8$props;
+        _ref8$props = _ref8.props,
+        props = _ref8$props === void 0 ? null : _ref8$props;
       return {
         id: id,
         props: props
@@ -3220,11 +2958,9 @@ var EditorScreens = function EditorScreens(_ref) {
       var props = _ref9.props;
       return props !== null;
     }) || []).length > 0;
-
     var _ref10 = value || {},
-        _ref10$components = _ref10.components,
-        currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
-
+      _ref10$components = _ref10.components,
+      currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
     var currentIds = currentScreens.map(function (_ref11) {
       var id = _ref11.id;
       return id;
@@ -3233,7 +2969,6 @@ var EditorScreens = function EditorScreens(_ref) {
       var id = _ref12.id;
       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) {
@@ -3241,18 +2976,14 @@ var EditorScreens = function EditorScreens(_ref) {
           var idB = _ref14.id;
           var indexA = ids.indexOf(idA);
           var indexB = ids.indexOf(idB);
-
           if (indexA === indexB) {
             return 0;
           }
-
           return indexA > indexB ? 1 : -1;
         }).map(function (_ref15) {
           var _screenProps$find;
-
           var id = _ref15.id,
-              props = _objectWithoutProperties__default["default"](_ref15, _excluded$1);
-
+            props = _objectWithoutProperties__default["default"](_ref15, _excluded$1);
           return _objectSpread__default["default"](_objectSpread__default["default"]({
             id: id
           }, props), (_screenProps$find = screenProps.find(function (_ref16) {
@@ -3261,7 +2992,6 @@ var EditorScreens = function EditorScreens(_ref) {
           })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
         })
       });
-
       if (onChange !== null) {
         onChange(newValue);
       }
@@ -3273,11 +3003,9 @@ var EditorScreens = function EditorScreens(_ref) {
       var type = _ref17.type;
       return type === definition.id;
     }) || null : null;
-
     if (!isTheme || currentScreen === null) {
       currentScreen = createScreenFromDefinition(definition);
     }
-
     push('screen', {
       screen: currentScreen.id
     });
@@ -3317,7 +3045,7 @@ var EditorScreens = function EditorScreens(_ref) {
     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;
+        screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -3358,7 +3086,6 @@ var EditorScreens = function EditorScreens(_ref) {
     onRequestClose: onCreateModalRequestClose
   }) : null);
 };
-
 EditorScreens.propTypes = propTypes$4;
 EditorScreens.defaultProps = defaultProps$4;
 
@@ -3384,43 +3111,39 @@ var defaultProps$3 = {
   onChange: null,
   className: null
 };
-
 var Editor = function Editor(_ref) {
   var _ref5;
-
   var value = _ref.value,
-      viewerTheme = _ref.viewerTheme,
-      isTheme = _ref.isTheme,
-      isCreateOpened = _ref.isCreateOpened,
-      deviceScreens = _ref.deviceScreens,
-      initialMobileView = _ref.mobileView,
-      onChange = _ref.onChange,
-      fullscreen = _ref.fullscreen,
-      className = _ref.className;
+    viewerTheme = _ref.viewerTheme,
+    isTheme = _ref.isTheme,
+    isCreateOpened = _ref.isCreateOpened,
+    deviceScreens = _ref.deviceScreens,
+    initialMobileView = _ref.mobileView,
+    onChange = _ref.onChange,
+    fullscreen = _ref.fullscreen,
+    className = _ref.className;
   var push = contexts.useRoutePush();
   var refScreensContainer = React.useRef(null);
-
   var _useRouteParams = useRouteParams({
-    screenOnly: true
-  }),
-      screenId = _useRouteParams.screen; // Screen size
-
+      screenOnly: true
+    }),
+    screenId = _useRouteParams.screen;
 
+  // Screen size
   var _useScreenSizeFromEle = hooks.useScreenSizeFromElement({
-    screens: deviceScreens,
-    withoutMaxSize: true,
-    withoutScale: true
-  }),
-      refContainer = _useScreenSizeFromEle.ref,
-      screenSize = _useScreenSizeFromEle.screenSize;
-
-  var isMobile = screenSize !== null && screenSize.screens.indexOf('medium') === -1; // Mobile view
+      screens: deviceScreens,
+      withoutMaxSize: true,
+      withoutScale: true
+    }),
+    refContainer = _useScreenSizeFromEle.ref,
+    screenSize = _useScreenSizeFromEle.screenSize;
+  var isMobile = screenSize !== null && screenSize.screens.indexOf('medium') === -1;
 
+  // Mobile view
   var _useState = React.useState(initialMobileView),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      mobileView = _useState2[0],
-      setMobileView = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    mobileView = _useState2[0],
+    setMobileView = _useState2[1];
   var onClickScreens = React.useCallback(function () {
     return setMobileView('screens');
   }, [mobileView, setMobileView]);
@@ -3429,18 +3152,18 @@ var Editor = function Editor(_ref) {
   }, [setMobileView]);
   var onClickViewScreen = React.useCallback(function () {
     return setMobileView('preview');
-  }, [setMobileView]); // Apply base theme values to it's own components
+  }, [setMobileView]);
 
+  // Apply base theme values to it's own components
   var _ref2 = value || {},
-      _ref2$background = _ref2.background,
-      background = _ref2$background === void 0 ? null : _ref2$background,
-      _ref2$colors = _ref2.colors,
-      colors = _ref2$colors === void 0 ? null : _ref2$colors,
-      _ref2$textStyles = _ref2.textStyles,
-      textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
-      _ref2$boxStyles = _ref2.boxStyles,
-      boxStyles = _ref2$boxStyles === void 0 ? null : _ref2$boxStyles;
-
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? null : _ref2$background,
+    _ref2$colors = _ref2.colors,
+    colors = _ref2$colors === void 0 ? null : _ref2$colors,
+    _ref2$textStyles = _ref2.textStyles,
+    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), {}, {
     theme: {
       background: background,
@@ -3450,13 +3173,10 @@ var Editor = function Editor(_ref) {
     }
   }) : value;
   var story = hooks.useParsedStory(baseValue);
-
   var _useMediasParser = hooks.useMediasParser(),
-      parseMediasToPath = _useMediasParser.toPath;
-
+    parseMediasToPath = _useMediasParser.toPath;
   var onStoryChange = React.useCallback(function (newStory) {
     var storyWithMedias = parseMediasToPath(newStory);
-
     if (onChange !== null) {
       onChange(storyWithMedias);
     }
@@ -3465,11 +3185,9 @@ var Editor = function Editor(_ref) {
   var onClickScreen = React.useCallback(function (_ref3) {
     var id = _ref3.id;
     clickedScreenId.current = id;
-
     if (screenSize.screen) {
       setMobileView('preview');
     }
-
     push('screen', {
       screen: clickedScreenId.current
     });
@@ -3479,17 +3197,16 @@ var Editor = function Editor(_ref) {
     push('screen', {
       screen: newScreenId
     });
-  }, [push]); // Auto-scroll to current screen except when manually clicking one
+  }, [push]);
 
+  // Auto-scroll to current screen except when manually clicking one
   React.useEffect(function () {
     if (screenId === null || clickedScreenId.current === screenId) {
       return;
     }
-
     clickedScreenId.current = null;
     var screens = refScreensContainer.current;
     var items = screens.querySelectorAll("[data-screen-id=\"".concat(screenId, "\"]"));
-
     if (items !== null && items.length > 0) {
       var item = items[0];
       var cnt = item.parentNode.parentNode.parentNode;
@@ -3574,10 +3291,10 @@ var Editor = function Editor(_ref) {
     className: styles$i.inner
   }))), /*#__PURE__*/React__default["default"].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,
@@ -3603,34 +3320,28 @@ var defaultProps$2 = {
   className: null,
   onChange: null
 };
-
 var SettingsForm = function SettingsForm(_ref) {
   var name = _ref.name,
-      field = _ref.field,
-      value = _ref.value,
-      className = _ref.className,
-      gotoFieldForm = _ref.gotoFieldForm,
-      closeFieldForm = _ref.closeFieldForm,
-      onChange = _ref.onChange;
+    field = _ref.field,
+    value = _ref.value,
+    className = _ref.className,
+    gotoFieldForm = _ref.gotoFieldForm,
+    closeFieldForm = _ref.closeFieldForm,
+    onChange = _ref.onChange;
   if (field === null) return false;
-
   var _ref2 = field || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type;
-
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
   var fieldsManager = contexts.useFieldsManager();
-
   var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
-      _ref3$component = _ref3.component,
-      fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
-      settings = _ref3.settings;
-
+    _ref3$component = _ref3.component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
+    settings = _ref3.settings;
   var FieldComponent = contexts.useFieldComponent(fieldComponent);
   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);
-
     if (onChange !== null) {
       onChange(newValue);
     }
@@ -3649,7 +3360,6 @@ var SettingsForm = function SettingsForm(_ref) {
     closeFieldForm: closeFieldForm
   })));
 };
-
 SettingsForm.propTypes = propTypes$2;
 SettingsForm.defaultProps = defaultProps$2;
 
@@ -3667,14 +3377,12 @@ var propTypes$1 = {
 var defaultProps$1 = {
   children: null
 };
-
 var FormsProvider = function FormsProvider(props) {
   return /*#__PURE__*/React__default["default"].createElement(contexts.ComponentsProvider, Object.assign({
     namespace: contexts.FORMS_NAMESPACE,
     components: FormsComponents
   }, props));
 };
-
 FormsProvider.propTypes = propTypes$1;
 FormsProvider.defaultProps = defaultProps$1;
 
@@ -3710,24 +3418,22 @@ var defaultProps = {
   googleMapsLibraries: ['places'],
   screenNamespaces: null
 };
-
 var EditorContainer = function EditorContainer(_ref) {
   var value = _ref.value,
-      memoryRouter = _ref.memoryRouter,
-      routes = _ref.routes,
-      basePath = _ref.basePath,
-      uppy = _ref.uppy,
-      googleApiKey = _ref.googleApiKey,
-      googleMapsLibraries = _ref.googleMapsLibraries,
-      screenNamespaces = _ref.screenNamespaces,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded);
-
+    memoryRouter = _ref.memoryRouter,
+    routes = _ref.routes,
+    basePath = _ref.basePath,
+    uppy = _ref.uppy,
+    googleApiKey = _ref.googleApiKey,
+    googleMapsLibraries = _ref.googleMapsLibraries,
+    screenNamespaces = _ref.screenNamespaces,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded);
   var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
-
   var _useIntl = reactIntl.useIntl(),
-      locale = _useIntl.locale; // const { metadata } = value || {};
-  // const { language:finalLocale = locale } = metadata || {};
+    locale = _useIntl.locale;
 
+  // const { metadata } = value || {};
+  // const { language:finalLocale = locale } = metadata || {};
 
   return /*#__PURE__*/React__default["default"].createElement(Router, {
     basename: !memoryRouter ? basePath : null
@@ -3757,7 +3463,6 @@ var EditorContainer = function EditorContainer(_ref) {
     }, props)));
   }))))))))))));
 };
-
 EditorContainer.propTypes = propTypes;
 EditorContainer.defaultProps = defaultProps;