@micromag/editor 0.2.408 → 0.2.412

package/es/index.js

@@ -1,129 +1,39 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import React, { useCallback, useMemo, useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { useRouteMatch, Route, useHistory, MemoryRouter } from 'react-router';
-import { BrowserRouter } from 'react-router-dom';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { useFieldsManager, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, useRoutes, useScreensManager, useRoutePush, useUrlGenerator, useScreenSize, useScreenDefinition, useFormsComponents, ScreenProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
-import { isMessage, getComponentFromName, getScreenExtraField, slug, getDeviceScreens } from '@micromag/core/utils';
-import { ScreensProvider } from '@micromag/screens';
-import { Fields, FieldsProvider } from '@micromag/fields';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { Button, BackButton, Breadcrumb as Breadcrumb$1, FieldForm, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPreview, ScreenPlaceholder, Modals } from '@micromag/core/components';
+import { useRoutes, useScreensManager, useFieldsManager, useScreenDefinition, useFormsComponents, useRoutePush, ScreenProvider, useScreenSize, useUrlGenerator, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
+import { useParsedStory, useResizeObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
+import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
 import classNames from 'classnames';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useResizeObserver, useParsedStory, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
-import { Button, ScreenPreview, ScreenPlaceholder, Label, Modal, ModalDialog, Navbar, Empty, Tabs, BackButton, Breadcrumb as Breadcrumb$1, FieldForm, DropdownMenu, Modals } from '@micromag/core/components';
+import PropTypes from 'prop-types';
+import React, { useMemo, useRef, useCallback, useState, forwardRef, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { useRouteMatch, useHistory, Route, MemoryRouter } from 'react-router';
+import { CSSTransitionGroup } from 'react-transition-group';
+import { v1 } from 'uuid';
+import isString from 'lodash/isString';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'lodash/isArray';
+import 'lodash/get';
+import 'lodash/set';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPlus, faCogs } from '@fortawesome/free-solid-svg-icons';
-import isString from 'lodash/isString';
-import { v1 } from 'uuid';
+import { faCogs, faGripLines, faTimes, faAngleDown, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { Fields, FieldsProvider } from '@micromag/fields';
 import { getSizeWithinBounds } from '@folklore/size';
-import { ReactSortable } from 'react-sortablejs';
+import { Viewer } from '@micromag/viewer';
 import isFunction from 'lodash/isFunction';
+import { ReactSortable } from 'react-sortablejs';
+import { KeyboardCode, closestCorners, getFirstCollision, getClientRect, MeasuringStrategy, defaultDropAnimation, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { createPortal } from 'react-dom';
+import _createForOfIteratorHelper from '@babel/runtime/helpers/createForOfIteratorHelper';
+import { CSS } from '@dnd-kit/utilities';
 import orderBy from 'lodash/orderBy';
-import { Viewer } from '@micromag/viewer';
-import { CSSTransitionGroup } from 'react-transition-group';
-import 'lodash/isArray';
-import 'lodash/get';
-import 'lodash/set';
-
-var routes = PropTypes.shape({
-  home: PropTypes.string.isRequired,
-  screen: PropTypes.string.isRequired,
-  'screen.field': PropTypes.string.isRequired,
-  'screen.field.form': PropTypes.string.isRequired
-});
-
-var styles$d = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
-
-var propTypes$j = {
-  name: PropTypes.string,
-  field: PropTypes$1.formField.isRequired,
-  value: PropTypes$1.component,
-  className: PropTypes.string,
-  gotoFieldForm: PropTypes.func.isRequired,
-  closeFieldForm: PropTypes.func.isRequired,
-  onChange: PropTypes.func
-};
-var defaultProps$j = {
-  name: null,
-  value: null,
-  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;
-  var _field$type = field.type,
-      type = _field$type === void 0 ? null : _field$type;
-  var fieldsManager = useFieldsManager();
-
-  var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
-      _ref2$component = _ref2.component,
-      fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
-      settings = _ref2.settings;
-
-  var FieldComponent = useFieldComponent(fieldComponent);
-  var FieldsComponent = useFieldComponent('fields');
-  var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
-  var onSettingsChange = useCallback(function (newSettingsValue) {
-    var newValue = _objectSpread(_objectSpread({}, value), newSettingsValue);
-
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  }, [value, onChange]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner
-  }, /*#__PURE__*/React.createElement(SettingsComponent, {
-    name: name,
-    field: field,
-    fields: settings,
-    value: value,
-    onChange: onSettingsChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  })));
-};
-
-SettingsForm.propTypes = propTypes$j;
-SettingsForm.defaultProps = defaultProps$j;
-
-// eslint-disable-next-line import/prefer-default-export
-
-var FormsComponents = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Settings: SettingsForm
-});
-
-/* eslint-disable react/jsx-props-no-spreading */
-var propTypes$i = {
-  children: PropTypes.node
-};
-var defaultProps$i = {
-  children: null
-};
-
-var FormsProvider = function FormsProvider(props) {
-  return /*#__PURE__*/React.createElement(ComponentsProvider, Object.assign({
-    namespace: FORMS_NAMESPACE,
-    components: FormsComponents
-  }, props));
-};
-
-FormsProvider.propTypes = propTypes$i;
-FormsProvider.defaultProps = defaultProps$i;
+import { ScreensProvider } from '@micromag/screens';
+import { BrowserRouter } from 'react-router-dom';
 
 var useRouteParams = function useRouteParams() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -161,25 +71,7 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-var _excluded$8 = ["components"];
-
-var useThemeValue = function useThemeValue(value) {
-  var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var valueWithTheme = useMemo(function () {
-    if (!isTheme) {
-      return value;
-    }
-
-    var _ref = value || {};
-        _ref.components;
-        var themeValue = _objectWithoutProperties(_ref, _excluded$8);
-
-    return value !== null ? _objectSpread({
-      theme: themeValue
-    }, value) : value;
-  }, [value, isTheme]);
-  return valueWithTheme;
-};
+var styles$f = {"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 createScreen = function createScreen(definition) {
   var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -213,614 +105,700 @@ var createScreen = function createScreen(definition) {
   });
 };
 
-var styles$c = {"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 _excluded$b = ["components"];
 
-var propTypes$h = {
-  active: PropTypes.bool,
-  id: PropTypes.string,
-  href: PropTypes.string,
-  label: PropTypes$1.label,
-  icon: PropTypes.node,
-  title: PropTypes.string,
-  onClick: PropTypes.func,
-  children: PropTypes.node,
-  refButton: PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
+var deleteScreen = function deleteScreen(story, screenId) {
+  var _ref = story || {},
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? [] : _ref$components,
+      currentValue = _objectWithoutProperties(_ref, _excluded$b);
 
-  }),
-  className: PropTypes.string
-};
-var defaultProps$h = {
-  active: false,
-  id: null,
-  href: null,
-  label: null,
-  icon: null,
-  title: null,
-  onClick: null,
-  children: null,
-  refButton: null,
-  className: null
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: components.filter(function (_ref2) {
+      var id = _ref2.id;
+      return id !== screenId;
+    })
+  });
 };
 
-var ScreenButton = function ScreenButton(_ref) {
-  var _ref2;
+var _excluded$a = ["components"];
 
-  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;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$c.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.screen
-  }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$c.inner
-  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.icon
-  }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.label
-  }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$c.button,
-    withoutStyle: true,
-    id: id,
-    href: href,
-    title: title,
-    onClick: onClick,
-    refButton: refButton
-  }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$c.border, 'rounded'])
-  })));
+var duplicateScreen = function duplicateScreen(story, screenId) {
+  var _ref = story || {},
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? [] : _ref$components,
+      currentValue = _objectWithoutProperties(_ref, _excluded$a);
+
+  var screen = components.find(function (it) {
+    return it.id === screenId;
+  }) || null;
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: screen !== null ? [].concat(_toConsumableArray(components), [_objectSpread(_objectSpread({}, screen), {}, {
+      id: v1()
+    })]) : components
+  });
 };
 
-ScreenButton.propTypes = propTypes$h;
-ScreenButton.defaultProps = defaultProps$h;
-var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
-    refButton: ref
-  }));
-});
+var _excluded$9 = ["components"];
 
-var styles$b = {"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","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var updateScreen = function updateScreen(story, newScreenValue) {
+  var newScreenId = newScreenValue.id;
 
-var _excluded$7 = ["onClick", "title", "screen", "className"];
-var propTypes$g = {
-  items: PropTypes$1.menuItems,
-  withPreview: PropTypes.bool,
-  withPlaceholder: PropTypes.bool,
-  settings: PropTypes.node,
-  previewMinWidth: PropTypes.number,
-  sortable: PropTypes.bool,
-  isVertical: PropTypes.bool,
-  noWrap: PropTypes.bool,
-  className: PropTypes.string,
-  itemClassName: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  settingsClassName: PropTypes.string,
-  onClickItem: PropTypes.func,
-  onOrderChange: PropTypes.func
-};
-var defaultProps$g = {
-  items: [],
-  withPreview: false,
-  withPlaceholder: false,
-  settings: null,
-  previewMinWidth: 320,
-  sortable: false,
-  isVertical: false,
-  noWrap: false,
-  className: null,
-  itemClassName: null,
-  buttonClassName: null,
-  settingsClassName: null,
-  onClickItem: null,
-  onOrderChange: null
-};
+  var _ref = story || {},
+      _ref$components = _ref.components,
+      components = _ref$components === void 0 ? [] : _ref$components,
+      currentValue = _objectWithoutProperties(_ref, _excluded$9);
 
-var ScreensMenu = function ScreensMenu(_ref) {
-  var _ref8;
+  var index = components.findIndex(function (it) {
+    return it.id === newScreenId;
+  });
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: [].concat(_toConsumableArray(components.slice(0, index)), [_objectSpread(_objectSpread({}, components[index]), newScreenValue)], _toConsumableArray(components.slice(index + 1)))
+  });
+};
 
-  var items = _ref.items,
-      withPreview = _ref.withPreview,
-      withPlaceholder = _ref.withPlaceholder,
-      settings = _ref.settings,
-      previewMinWidth = _ref.previewMinWidth,
-      isVertical = _ref.isVertical,
-      noWrap = _ref.noWrap,
-      className = _ref.className,
-      itemClassName = _ref.itemClassName,
-      buttonClassName = _ref.buttonClassName,
-      settingsClassName = _ref.settingsClassName,
-      sortable = _ref.sortable,
-      onClickItem = _ref.onClickItem,
-      onOrderChange = _ref.onOrderChange;
-  var intl = useIntl();
+var getFieldByName = function getFieldByName(fields, name) {
+  return fields.reduce(function (foundField, it) {
+    if (foundField !== null) {
+      return foundField;
+    }
 
-  var _useResizeObserver = useResizeObserver({}, [items]),
-      containerRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
+    var _it$name = it.name,
+        fieldName = _it$name === void 0 ? null : _it$name,
+        _it$fields = it.fields,
+        subFields = _it$fields === void 0 ? [] : _it$fields;
 
-  var previewStyle = useMemo(function () {
-    var _ref2 = contentRect || {},
-        _ref2$width = _ref2.width,
-        itemWidth = _ref2$width === void 0 ? 0 : _ref2$width,
-        _ref2$height = _ref2.height,
-        itemHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+    if (name !== null && fieldName === name) {
+      return it;
+    }
 
-    var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 0;
+    return getFieldByName(subFields, name);
+  }, null);
+};
 
-    var _getSizeWithinBounds = getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
-        previewScale = _getSizeWithinBounds.scale;
+var useFormTransition = function useFormTransition(url, screenIndex, styles) {
+  var lastPageRef = useRef({
+    url: url,
+    screenIndex: screenIndex
+  });
+  var direction = useMemo(function () {
+    var _lastPageRef$current = lastPageRef.current,
+        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;
+    var previousPartsCount = lastUrlSplit.length;
+    var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
+    var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
+    currentPartsCount -= isSettings ? 1 : 0;
+    previousPartsCount -= wasSettings ? 1 : 0;
+    return currentPartsCount >= previousPartsCount ? 'right' : 'left';
+  }, [url, screenIndex]);
+  var name = useMemo(function () {
+    var _classNames, _classNames2, _classNames3;
 
     return {
-      width: previewMinWidth,
-      height: previewMinWidth * ratio,
-      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
+      enter: classNames((_classNames = {}, _defineProperty(_classNames, styles.enterRight, direction === 'right'), _defineProperty(_classNames, styles.enterLeft, direction === 'left'), _defineProperty(_classNames, styles.enterTop, direction === 'top'), _defineProperty(_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
+      enterActive: classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty(_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
+      leave: styles.leave || 'none',
+      leaveActive: classNames((_classNames3 = {}, _defineProperty(_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty(_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty(_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty(_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
     };
-  }, [previewMinWidth, contentRect]);
-  var itemsElements = items.map(function (_ref3, index) {
-    var _ref4;
+  }, [direction, screenIndex]);
+  return {
+    direction: direction,
+    name: name,
+    timeout: direction === 'left' || direction === 'right' ? 300 : 10
+  };
+};
 
-    var _ref3$onClick = _ref3.onClick,
-        _onClick = _ref3$onClick === void 0 ? null : _ref3$onClick,
-        title = _ref3.title,
-        screen = _ref3.screen,
-        _ref3$className = _ref3.className,
-        itemCustomClassName = _ref3$className === void 0 ? null : _ref3$className,
-        item = _objectWithoutProperties(_ref3, _excluded$7);
+var _excluded$8 = ["className"];
+var propTypes$n = {
+  className: PropTypes.string
+};
+var defaultProps$n = {
+  className: null
+};
 
-    return /*#__PURE__*/React.createElement("li", {
-      key: item.id,
-      className: classNames([styles$b.item, (_ref4 = {}, _defineProperty(_ref4, itemClassName, itemClassName !== null), _defineProperty(_ref4, itemCustomClassName, itemCustomClassName !== null), _ref4)]),
-      "data-screen-id": item.id,
-      ref: index === 0 ? containerRef : null
-    }, /*#__PURE__*/React.createElement(ScreenButton$1, Object.assign({}, item, {
-      className: classNames([styles$b.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
-      title: isMessage(title) ? intl.formatMessage(title) : null,
-      onClick: function onClick() {
-        if (_onClick !== null) {
-          _onClick(screen, index);
-        }
+var SettingsButton = function SettingsButton(_ref) {
+  var className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
-        if (onClickItem !== null) {
-          onClickItem(screen, index);
-        }
-      }
-    }), withPreview ? /*#__PURE__*/React.createElement("div", {
-      className: styles$b.preview,
-      style: previewStyle
-    }, /*#__PURE__*/React.createElement(ScreenPreview, {
-      screen: screen,
-      width: previewStyle.width,
-      height: previewStyle.height,
-      className: styles$b.screen
-    })) : null, withPlaceholder ? /*#__PURE__*/React.createElement("div", {
-      className: styles$b.placeholder,
-      style: previewStyle
-    }, /*#__PURE__*/React.createElement(ScreenPlaceholder, {
-      screen: item,
-      width: previewStyle.width,
-      height: previewStyle.height,
-      className: styles$b.screen
-    })) : null), settings !== null ? /*#__PURE__*/React.createElement("div", {
-      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$b.settings, 'p-2'])
-    }, isFunction(settings) ? settings(index) : settings) : null);
-  });
-  var sortableItems = useMemo(function () {
-    return items.map(function (_ref7) {
-      var id = _ref7.id;
-      return {
-        id: id
-      };
-    });
-  }, [items]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$b.container, (_ref8 = {}, _defineProperty(_ref8, styles$b.noWrap, noWrap), _defineProperty(_ref8, styles$b.isVertical, isVertical), _defineProperty(_ref8, styles$b.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
-  }, sortable && items.length > 1 ? /*#__PURE__*/React.createElement(ReactSortable, {
-    list: sortableItems,
-    setList: onOrderChange,
-    animation: 200,
-    delayOnTouchStart: true,
-    delay: 2,
-    tag: "ul",
-    className: styles$b.items
-  }, itemsElements) : /*#__PURE__*/React.createElement("ul", {
-    className: styles$b.items
-  }, itemsElements));
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: className,
+    theme: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faCogs
+    })
+  }, props));
 };
 
-ScreensMenu.propTypes = propTypes$g;
-ScreensMenu.defaultProps = defaultProps$g;
+SettingsButton.propTypes = propTypes$n;
+SettingsButton.defaultProps = defaultProps$n;
 
-var styles$a = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title"};
+var styles$e = {"container":"micromag-editor-menus-breadcrumb-container"};
 
-var propTypes$f = {
-  screens: PropTypes$1.screenDefinitions,
-  selectedTypes: PropTypes.arrayOf(PropTypes.string),
-  className: PropTypes.string,
-  onClickItem: PropTypes.func
+var propTypes$m = {
+  story: PropTypes$1.story,
+  screenId: PropTypes.string,
+  field: PropTypes.string,
+  form: PropTypes.string,
+  url: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
-var defaultProps$f = {
-  screens: null,
-  selectedTypes: null,
-  className: null,
-  onClickItem: null
+var defaultProps$m = {
+  story: null,
+  screenId: null,
+  field: null,
+  form: null,
+  className: null
 };
 
-var ScreenTypes = function ScreenTypes(_ref) {
-  var screens = _ref.screens,
-      selectedTypes = _ref.selectedTypes,
-      className = _ref.className,
-      onClickItem = _ref.onClickItem;
+var Breadcrumb = function Breadcrumb(_ref) {
+  var story = _ref.story,
+      screenId = _ref.screenId,
+      field = _ref.field,
+      form = _ref.form,
+      url = _ref.url,
+      className = _ref.className;
   var intl = useIntl();
+
+  var _ref2 = story || {},
+      _ref2$components = _ref2.components,
+      screens = _ref2$components === void 0 ? [] : _ref2$components;
+
+  var history = useHistory();
   var screensManager = useScreensManager();
-  var finalDefinitions = screens || screensManager.getDefinitions();
-  var groups = 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;
+  var fieldsManager = useFieldsManager();
+  var items = useMemo(function () {
+    var screenIndex = screens.findIndex(function (it) {
+      return it.id === screenId;
+    });
 
-      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;
+    if (!screens[screenIndex]) {
+      return [];
+    }
 
-      var _ref3 = label || {},
-          _ref3$id = _ref3.id,
-          messageId = _ref3$id === void 0 ? null : _ref3$id;
+    var type = screens[screenIndex].type;
+    var fieldItems = [];
 
-      if (hidden) {
-        return allGroups;
-      }
+    if (field !== null) {
+      var _screensManager$getDe = screensManager.getDefinition(type),
+          _screensManager$getDe2 = _screensManager$getDe.fields,
+          screenFields = _screensManager$getDe2 === void 0 ? [] : _screensManager$getDe2;
+
+      var fields = [].concat(_toConsumableArray(screenFields), [getScreenExtraField(intl)]);
+      var fieldPath = field.split('/');
+      var lastKeyIndex = fieldPath.length - 1;
+      var parentItem = null;
+      fieldPath.reduce(function (currentFields, key, keyIndex) {
+        var _currentFields$type = currentFields.type,
+            fieldType = _currentFields$type === void 0 ? null : _currentFields$type;
+        var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
+        var _fieldsDef$fields = fieldsDef.fields,
+            subFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
+            _fieldsDef$settings = fieldsDef.settings,
+            settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
+            _fieldsDef$itemsField = fieldsDef.itemsField,
+            itemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
+        var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
+        var currentSettings = settings !== null ? getFieldByName(settings, key) : null;
+        var isCurrentSubfields = currentSubfields !== null;
+        var isCurrentSettings = currentSettings !== null;
+        var isListItems = itemsField !== null && !!key.match(/^[0-9]+$/);
+        var isLastIndex = keyIndex === lastKeyIndex;
+        var pathPrefix = "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex + 1).join('/'));
+        var pathSuffix = isLastIndex && form !== null ? "/".concat(form) : '';
+        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(_objectSpread({}, parentItem), {}, {
+              url: "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex).join('/'), "/settings")
+            }));
+          }
+        } else if (isListItems) {
+          nextFields = itemsField;
+        }
+
+        var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
+        var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
+
+        var _ref3 = parentItem || {},
+            _ref3$label = _ref3.label,
+            parentItemLabel = _ref3$label === void 0 ? null : _ref3$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: fields
+      });
+    }
+
+    var finalItems = [{
+      label: intl.formatMessage({
+        id: "AHvHaY",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Parameters"
+        }]
+      }),
+      url: "/".concat(screenId),
+      active: false
+    }].concat(fieldItems).filter(function (it) {
+      return it !== null;
+    });
+    var lastItemsIndex = finalItems.length - 1;
+    return finalItems.map(function (it, index) {
+      return index === lastItemsIndex ? _objectSpread(_objectSpread({}, it), {}, {
+        url: url,
+        active: true
+      }) : it;
+    });
+  }, [intl, screens, screenId, field, form, url, screensManager, fieldsManager]);
+  var itemsLength = items.length;
+  var onClickBack = useCallback(function () {
+    history.push(items[itemsLength - 2].url);
+  }, [items]);
+  var withBack = itemsLength > 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(BackButton, {
+    onClick: onClickBack,
+    className: "mr-2"
+  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$1, {
+    items: items,
+    theme: "secondary",
+    withoutBar: true,
+    noWrap: true,
+    className: classNames([styles$e.container, 'text-truncate', _defineProperty({}, className, className !== null)])
+  }));
+};
+
+Breadcrumb.propTypes = propTypes$m;
+Breadcrumb.defaultProps = defaultProps$m;
+
+var styles$d = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+
+var propTypes$l = {
+  value: PropTypes$1.component,
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.func // onClickDelete: PropTypes.func,
+
+};
+var defaultProps$l = {
+  value: null,
+  className: 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;
+
+  var _useScreenDefinition = useScreenDefinition(),
+      _useScreenDefinition$ = _useScreenDefinition.fields,
+      fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // const intl = useIntl();
+  // const finalOnClickDelete = useCallback(() => {
+  //     if (
+  //         onClickDelete !== null &&
+  //         window.confirm(
+  //             intl.formatMessage({
+  //                 defaultMessage: 'Are you sure you want to delete this screen?',
+  //                 description: 'Confirm message when deleting a screen',
+  //             }),
+  //         )
+  //     ) {
+  //         onClickDelete(value);
+  //     }
+  // }, [intl, onClickDelete, value]);
 
-      var _ref4 = isMessage(label) ? {
-        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;
-      });
-      var selected = selectedTypes !== null && selectedTypes.indexOf(id) !== -1;
-      var item = {
-        id: id,
-        type: id,
-        screen: definition,
-        className: classNames(_defineProperty({
-          'bg-secondary': !selected,
-          'bg-primary': selected
-        }, styles$a.selected, selected))
-      };
-      return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
-        items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
-      })], _toConsumableArray(allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray(allGroups), [{
-        id: groupId,
-        name: isMessage(label) ? intl.formatMessage(label) : groupName,
-        order: order,
-        items: [item]
-      }]);
-    }, []);
-    return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
-  }, [finalDefinitions, selectedTypes]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className)])
+    className: classNames([styles$d.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$a.rows
-  }, groups.map(function (_ref6) {
-    var id = _ref6.id,
-        name = _ref6.name,
-        items = _ref6.items;
-    return /*#__PURE__*/React.createElement("div", {
-      key: "group-".concat(id),
-      className: styles$a.row
-    }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
-      className: styles$a.layouts
-    }, /*#__PURE__*/React.createElement(ScreensMenu, {
-      items: items,
-      withPlaceholder: true,
-      itemClassName: classNames(['border', 'rounded', {
-        'border-secondary': selectedTypes === null,
-        'border-dark': selectedTypes !== null,
-        'bg-secondary': selectedTypes === null,
-        'text-secondary': selectedTypes !== null
-      }]),
-      previewMinWidth: 100,
-      onClickItem: onClickItem
-    })));
+    className: styles$d.inner
+  }, /*#__PURE__*/React.createElement(Fields, {
+    fields: fields,
+    value: value,
+    onChange: onChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
   })));
 };
 
-ScreenTypes.propTypes = propTypes$f;
-ScreenTypes.defaultProps = defaultProps$f;
+ScreenForm.propTypes = propTypes$l;
+ScreenForm.defaultProps = defaultProps$l;
 
-var styles$9 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$k = {
+  children: PropTypes.node
+};
+var defaultProps$k = {
+  children: null
+};
 
-var propTypes$e = {
-  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+var FieldWithContexts = function FieldWithContexts(props) {
+  // Get definitions
+  var _useScreenDefinition = useScreenDefinition(),
+      _useScreenDefinition$ = _useScreenDefinition.fields,
+      fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // To use a specific form component
+
+
+  var formComponents = useFormsComponents();
+  return /*#__PURE__*/React.createElement(FieldForm, Object.assign({
+    fields: fields,
+    formComponents: formComponents
+  }, props));
+};
+
+FieldWithContexts.propTypes = propTypes$k;
+FieldWithContexts.defaultProps = defaultProps$k;
+
+var styles$c = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+
+var propTypes$j = {
   className: PropTypes.string,
-  onRequestClose: PropTypes.func,
-  onClickScreenType: PropTypes.func
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
 };
-var defaultProps$e = {
-  selectedTypes: null,
+var defaultProps$j = {
   className: null,
-  onRequestClose: null,
-  onClickScreenType: null
+  onConfirm: null,
+  onCancel: null
 };
 
-var ScreenTypesModal = function ScreenTypesModal(_ref) {
-  var selectedTypes = _ref.selectedTypes,
-      className = _ref.className,
-      onRequestClose = _ref.onRequestClose,
-      onClickScreenType = _ref.onClickScreenType;
+var DeleteScreenModal = function DeleteScreenModal(_ref) {
+  var className = _ref.className,
+      onConfirm = _ref.onConfirm,
+      onCancel = _ref.onCancel;
   return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "QBaiO0",
+      id: "p6q/+/",
       defaultMessage: [{
         "type": 0,
-        "value": "Add a screen"
+        "value": "Delete screen"
       }]
     }),
-    className: classNames([styles$9.container, _defineProperty({}, className, className)]),
-    onClickClose: onRequestClose
-  }, /*#__PURE__*/React.createElement(ScreenTypes, {
-    selectedTypes: selectedTypes,
-    className: styles$9.menu,
-    onClickItem: onClickScreenType
-  })));
+    className: classNames([styles$c.container, _defineProperty({}, className, className)]),
+    onClickClose: onCancel
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.description
+  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "q/tLk0",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Are you sure you want to delete this screen?"
+    }]
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$c.actions
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onCancel,
+    className: "btn-outline-secondary mr-2"
+  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "0GT0SI",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  }))), /*#__PURE__*/React.createElement(Button, {
+    onClick: onConfirm,
+    theme: "danger",
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "gRxcTc",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Delete screen"
+      }]
+    })
+  }))));
 };
 
-ScreenTypesModal.propTypes = propTypes$e;
-ScreenTypesModal.defaultProps = defaultProps$e;
+DeleteScreenModal.propTypes = propTypes$j;
+DeleteScreenModal.defaultProps = defaultProps$j;
 
-var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
+var styles$b = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","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","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
 
-var propTypes$d = {
+var propTypes$i = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   isTheme: PropTypes.bool,
-  isVertical: PropTypes.bool,
-  isCreateOpened: PropTypes.bool,
-  isParsed: PropTypes.bool,
-  onClickScreen: PropTypes.func,
-  onChange: PropTypes.func,
-  className: PropTypes.string
+  className: PropTypes.string,
+  onChange: PropTypes.func
 };
-var defaultProps$d = {
+var defaultProps$i = {
   value: null,
   isTheme: false,
-  isVertical: false,
-  isCreateOpened: false,
-  isParsed: false,
-  onClickScreen: null,
-  onChange: null,
-  className: null
+  className: null,
+  onChange: null
 };
 
-var EditorScreens = function EditorScreens(_ref) {
-  var unparsedValue = _ref.value,
+var EditForm = function EditForm(_ref) {
+  var value = _ref.value,
       isTheme = _ref.isTheme,
-      isVertical = _ref.isVertical,
-      isCreateOpened = _ref.isCreateOpened,
-      isParsed = _ref.isParsed,
-      onClickScreen = _ref.onClickScreen,
-      onChange = _ref.onChange,
-      className = _ref.className;
-  var valueWithTheme = useThemeValue(unparsedValue, isTheme);
-  var value = isParsed ? unparsedValue : useParsedStory(valueWithTheme, {
-    withMedias: false
-  });
+      className = _ref.className,
+      onChange = _ref.onChange;
+  // Match routes
+  var history = useHistory();
+  var routePush = 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
+
 
   var _ref2 = value || {},
       _ref2$components = _ref2.components,
       screens = _ref2$components === void 0 ? [] : _ref2$components;
 
-  var _useState = useState(isCreateOpened),
-      _useState2 = _slicedToArray(_useState, 2),
-      createModalOpened = _useState2[0],
-      setCreateModalOpened = _useState2[1];
-
-  var routes = useRoutes();
-  var push = useRoutePush();
-  var url = useUrlGenerator();
-
-  var _useRouteParams = useRouteParams({
-    screenOnly: true
-  }),
-      _useRouteParams$scree = _useRouteParams.screen,
-      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
-
-  var createScreenFromDefinition = 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;
-
-    var _ref4 = isString(definition) ? {
-      id: definition
-    } : definition,
-        newScreenType = _ref4.id;
+  var screenIndex = screens.findIndex(function (it) {
+    return it.id === screenId;
+  });
+  var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
 
-    var _ref5 = theme || {},
-        _ref5$components = _ref5.components,
-        themeComponents = _ref5$components === void 0 ? null : _ref5$components;
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$b),
+      transitionName = _useFormTransition.name,
+      transitionTimeout = _useFormTransition.timeout;
 
-    var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
-      return it.type === newScreenType;
-    }) || null : null;
-    var newScreen = createScreen(definition, themeScreen);
-    var foundIndex = screens.findIndex(function (_ref6) {
-      var id = _ref6.id;
-      return id === currentScreenId;
-    });
-    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      screenSettingsOpened = _useState2[0],
+      setScreenSettingsOpened = _useState2[1];
 
-    var newValue = _objectSpread(_objectSpread({}, value), {}, {
-      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
-    });
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      deleteScreenModalOpened = _useState4[0],
+      setDeleteScreenModalOpened = _useState4[1];
 
-    if (onChange !== null) {
-      onChange(newValue);
-    }
+  var _useState5 = useState({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fieldForms = _useState6[0],
+      setFieldForms = _useState6[1];
 
-    return newScreen;
-  }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
-  var onOrderChange = useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref7) {
-      var id = _ref7.id;
-      return id;
-    });
+  var _useState7 = useState(null),
+      _useState8 = _slicedToArray(_useState7, 2),
+      fieldContext = _useState8[0],
+      setFieldContext = _useState8[1]; // Callbacks
 
-    var _ref8 = value || {},
-        _ref8$components = _ref8.components,
-        currentScreens = _ref8$components === void 0 ? [] : _ref8$components;
 
-    var currentIds = currentScreens.map(function (_ref9) {
-      var id = _ref9.id;
-      return id;
+  var gotoFieldForm = 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';
+    routePush(hasField ? fieldRoute : 'screen', {
+      screen: screenId,
+      field: field !== null ? field.split('.') : null,
+      form: formName !== null ? slug(formName) : null
     });
-    var sameOrder = listItems.reduce(function (same, _ref10, index) {
-      var id = _ref10.id;
-      return same && id === currentIds[index];
-    }, true);
-
-    if (!sameOrder) {
-      var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: _toConsumableArray(currentScreens).sort(function (_ref11, _ref12) {
-          var idA = _ref11.id;
-          var idB = _ref12.id;
-          var indexA = ids.indexOf(idA);
-          var indexB = ids.indexOf(idB);
-
-          if (indexA === indexB) {
-            return 0;
-          }
-
-          return indexA > indexB ? 1 : -1;
-        })
-      });
+    setFieldForms(_objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
+    setFieldContext(context);
+  }, [routePush, screenId, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
+  var closeFieldForm = useCallback(function (field) {
+    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 (onChange !== null) {
-        onChange(newValue);
-      }
+    if (pastUrl !== null) {
+      history.push(pastUrl);
     }
-  }, [value, onChange]);
-  var onClickScreenType = useCallback(function (definition) {
-    setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref13) {
-      var type = _ref13.type;
-      return type === definition.id;
-    }) || null : null;
 
-    if (!isTheme || currentScreen === null) {
-      currentScreen = createScreenFromDefinition(definition);
+    setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
+      return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
+    }, {}));
+  }, [history, screenId, fieldForms, setFieldForms]);
+  var triggerOnChange = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
     }
-
-    push('screen', {
-      screen: currentScreen.id
+  }, [onChange]);
+  var onScreenFormChange = useCallback(function (newScreenValue) {
+    triggerOnChange(updateScreen(value, newScreenValue));
+  }, [value, triggerOnChange]);
+  var onClickDuplicate = useCallback(function () {
+    triggerOnChange(duplicateScreen(value, screenId));
+    setScreenSettingsOpened(false);
+  }, [value, screenId, triggerOnChange, setScreenSettingsOpened]);
+  var onClickDelete = useCallback(function () {
+    setDeleteScreenModalOpened(true);
+    setScreenSettingsOpened(false);
+  }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
+  var onSettingsClick = useCallback(function () {
+    setScreenSettingsOpened(function (opened) {
+      return !opened;
     });
-    onClickScreen(currentScreen);
-  }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
-  var onClickAdd = useCallback(function () {
-    return setCreateModalOpened(true);
-  }, [setCreateModalOpened]);
-  var onCreateModalRequestClose = useCallback(function () {
-    return setCreateModalOpened(false);
-  }, [setCreateModalOpened]);
+  }, [setScreenSettingsOpened]);
+  var onDropdownClickOutside = useCallback(function () {
+    setScreenSettingsOpened(false);
+  }, [setScreenSettingsOpened]);
+  var onDeleteScreenConfirm = useCallback(function () {
+    triggerOnChange(deleteScreen(value, screenId));
+    setDeleteScreenModalOpened(false);
+  }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
+  var onDeleteScreenCancel = useCallback(function () {
+    setDeleteScreenModalOpened(false);
+  }, [setDeleteScreenModalOpened]);
+  var dropdownItems = [!isTheme ? {
+    id: 'duplicate',
+    type: 'button',
+    className: 'text-left text-info',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "IBjY5r",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duplicate screen"
+      }]
+    }),
+    onClick: onClickDuplicate
+  } : null, {
+    id: 'delete',
+    type: 'button',
+    className: 'text-left text-danger',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "hpiKce",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Delete screen"
+      }]
+    }),
+    onClick: onClickDelete
+  }].filter(function (it) {
+    return it !== null;
+  });
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', styles$8.container, className])
-  }, /*#__PURE__*/React.createElement(Navbar, {
+    className: classNames(['d-flex', 'flex-column', className])
+  }, screenId !== null ? /*#__PURE__*/React.createElement(Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', styles$8.navbar])
-  }, /*#__PURE__*/React.createElement("strong", {
-    className: "mb-0 mr-auto"
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
+  }, /*#__PURE__*/React.createElement(Breadcrumb, {
+    story: value,
+    url: url,
+    screenId: screenId,
+    field: fieldParams,
+    form: formParams,
+    className: "mr-auto"
+  }), fieldParams === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingsButton, {
+    onClick: onSettingsClick
+  }), /*#__PURE__*/React.createElement(DropdownMenu, {
+    items: dropdownItems,
+    visible: screenSettingsOpened,
+    align: "right",
+    onClickOutside: onDropdownClickOutside
+  })) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
+  }, screen !== null ? /*#__PURE__*/React.createElement(CSSTransitionGroup, {
+    transitionName: transitionName,
+    transitionEnterTimeout: transitionTimeout,
+    transitionLeaveTimeout: transitionTimeout,
+    className: "w-100 flex-grow-1"
+  }, fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$b.panel]),
+    key: "field-".concat(fieldParams, "-").concat(formParams)
+  }, /*#__PURE__*/React.createElement(ScreenProvider, {
+    data: screen
+  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
+    name: fieldParams.replace(/\//g, '.'),
+    value: screen,
+    form: formParams,
+    className: styles$b.form,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    fieldContext: fieldContext,
+    onChange: onScreenFormChange
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$b.panel]),
+    key: "screen-".concat(screen.id)
+  }, /*#__PURE__*/React.createElement(ScreenProvider, {
+    data: screen
+  }, /*#__PURE__*/React.createElement(ScreenForm, {
+    value: screen,
+    className: styles$b.form,
+    onChange: onScreenFormChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  })))) : /*#__PURE__*/React.createElement(Empty, {
+    className: "w-100 m-2"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "jf+4Hq",
+    id: "QfpTKK",
     defaultMessage: [{
       "type": 0,
-      "value": "Screens"
-    }]
-  })), /*#__PURE__*/React.createElement(Button, {
-    theme: "primary",
-    size: "sm",
-    onClick: onClickAdd,
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faPlus
-    })
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "flex-grow-1 d-flex w-100 p-2"
-  }, /*#__PURE__*/React.createElement(Route, {
-    path: [routes.screen, routes.home],
-    render: function render(_ref14) {
-      var _ref14$match$params$s = _ref14.match.params.screen,
-          screenId = _ref14$match$params$s === void 0 ? null : _ref14$match$params$s;
-      return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
-        items: screens.map(function (it) {
-          return {
-            id: it.id,
-            screen: it,
-            href: url('screen', {
-              screen: it.id
-            }),
-            active: it.id === screenId
-          };
-        }),
-        isVertical: isVertical,
-        withPreview: true,
-        sortable: true,
-        className: "w-100",
-        onClickItem: onClickScreen,
-        onOrderChange: onOrderChange
-      }) : /*#__PURE__*/React.createElement(Empty, {
-        className: "flex-grow-1 p-2"
-      }, /*#__PURE__*/React.createElement(Button, {
-        theme: "primary",
-        onClick: onClickAdd
-      }, /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "JoWKee",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Create your first screen"
-        }]
-      })));
-    }
-  })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref15) {
-      var type = _ref15.type;
-      return type;
-    }) : [],
-    onClickScreenType: onClickScreenType,
-    onRequestClose: onCreateModalRequestClose
+      "value": "Select a screen..."
+    }],
+    decription: "Indication to select a screen to view the form"
+  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
+    onConfirm: onDeleteScreenConfirm,
+    onCancel: onDeleteScreenCancel
   }) : null);
 };
 
-EditorScreens.propTypes = propTypes$d;
-EditorScreens.defaultProps = defaultProps$d;
+EditForm.propTypes = propTypes$i;
+EditForm.defaultProps = defaultProps$i;
+
+var _excluded$7 = ["components"];
+
+var useThemeValue = function useThemeValue(value) {
+  var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var valueWithTheme = useMemo(function () {
+    if (!isTheme) {
+      return value;
+    }
+
+    var _ref = value || {};
+        _ref.components;
+        var themeValue = _objectWithoutProperties(_ref, _excluded$7);
+
+    return value !== null ? _objectSpread({
+      theme: themeValue
+    }, value) : value;
+  }, [value, isTheme]);
+  return valueWithTheme;
+};
+
+var styles$a = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$c = {
+var propTypes$h = {
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$c = {
+var defaultProps$h = {
   color: 'currentColor',
   className: null
 };
@@ -845,15 +823,15 @@ var DesktopIcon = function DesktopIcon(_ref) {
   }));
 };
 
-DesktopIcon.propTypes = propTypes$c;
-DesktopIcon.defaultProps = defaultProps$c;
+DesktopIcon.propTypes = propTypes$h;
+DesktopIcon.defaultProps = defaultProps$h;
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$b = {
+var propTypes$g = {
   color: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$b = {
+var defaultProps$g = {
   color: 'currentColor',
   className: null
 };
@@ -878,8 +856,8 @@ var MobileIcon = function MobileIcon(_ref) {
   }));
 };
 
-MobileIcon.propTypes = propTypes$b;
-MobileIcon.defaultProps = defaultProps$b;
+MobileIcon.propTypes = propTypes$g;
+MobileIcon.defaultProps = defaultProps$g;
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -887,15 +865,15 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$7 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$9 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
-var propTypes$a = {
+var propTypes$f = {
   device: PropTypes.string.isRequired,
   iconComponents: PropTypes$1.components,
   className: PropTypes.string
 };
-var defaultProps$a = {
+var defaultProps$f = {
   iconComponents: DeviceIcons,
   className: null
 };
@@ -908,24 +886,22 @@ var DeviceButton = function DeviceButton(_ref) {
 
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$7.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$7.icon
+    className: styles$9.icon
   }));
 };
 
-DeviceButton.propTypes = propTypes$a;
-DeviceButton.defaultProps = defaultProps$a;
-
-var styles$6 = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+DeviceButton.propTypes = propTypes$f;
+DeviceButton.defaultProps = defaultProps$f;
 
 var _excluded$5 = ["id"];
-var propTypes$9 = {
+var propTypes$e = {
   items: PropTypes$1.menuItems,
   className: PropTypes.string,
   onClickItem: PropTypes.func
 };
-var defaultProps$9 = {
+var defaultProps$e = {
   items: [],
   className: null,
   onClickItem: null
@@ -938,7 +914,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties(item, _excluded$5);
@@ -946,7 +922,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$6.button,
+        className: styles$a.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -955,12 +931,12 @@ var DevicesMenu = function DevicesMenu(_ref) {
   });
 };
 
-DevicesMenu.propTypes = propTypes$9;
-DevicesMenu.defaultProps = defaultProps$9;
+DevicesMenu.propTypes = propTypes$e;
+DevicesMenu.defaultProps = defaultProps$e;
 
-var styles$5 = {"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","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
+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","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
 
-var propTypes$8 = {
+var propTypes$d = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   devices: PropTypes$1.devices,
   device: PropTypes.string,
@@ -970,7 +946,7 @@ var propTypes$8 = {
   onScreenChange: PropTypes.func,
   withoutDevicesSizes: PropTypes.bool
 };
-var defaultProps$8 = {
+var defaultProps$d = {
   value: null,
   devices: [{
     id: 'mobile',
@@ -1060,13 +1036,13 @@ var EditorPreview = function EditorPreview(_ref) {
     };
   }, [device, contentRect, screen, withoutDevicesSizes]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$5.container, screens.map(function (screenName) {
-      return styles$5["screen-".concat(screenName)];
-    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$5.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
+    className: classNames([styles$8.container, screens.map(function (screenName) {
+      return styles$8["screen-".concat(screenName)];
+    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.inner
+    className: styles$8.inner
   }, !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.top
+    className: styles$8.top
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -1075,12 +1051,12 @@ var EditorPreview = function EditorPreview(_ref) {
     }),
     onClickItem: onClickDeviceItem
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.bottom
+    className: styles$8.bottom
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.inner,
+    className: styles$8.inner,
     ref: bottomRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$5.preview,
+    className: styles$8.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
@@ -1088,12 +1064,12 @@ var EditorPreview = function EditorPreview(_ref) {
       var _ref4$match$params$sc = _ref4.match.params.screen,
           screenId = _ref4$match$params$sc === void 0 ? null : _ref4$match$params$sc;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$5.viewerContainer
+        className: styles$8.viewerContainer
       }, /*#__PURE__*/React.createElement(Viewer, {
         story: valueParsed,
         storyIsParsed: true,
         screen: screenId,
-        className: styles$5.story,
+        className: styles$8.story,
         theme: viewerTheme,
         interactions: null,
         renderContext: "edit",
@@ -1103,678 +1079,1823 @@ var EditorPreview = function EditorPreview(_ref) {
   }))))));
 };
 
-EditorPreview.propTypes = propTypes$8;
-EditorPreview.defaultProps = defaultProps$8;
+EditorPreview.propTypes = propTypes$d;
+EditorPreview.defaultProps = defaultProps$d;
 
-var _excluded$4 = ["components"];
+var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-var deleteScreen = function deleteScreen(story, screenId) {
-  var _ref = story || {},
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties(_ref, _excluded$4);
+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","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
-  return _objectSpread(_objectSpread({}, currentValue), {}, {
-    components: components.filter(function (_ref2) {
-      var id = _ref2.id;
-      return id !== screenId;
-    })
-  });
+var styles$5 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
+
+var styles$4 = {"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 propTypes$c = {
+  active: PropTypes.bool,
+  id: PropTypes.string,
+  href: PropTypes.string,
+  label: PropTypes$1.label,
+  icon: PropTypes.node,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  refButton: PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+
+  }),
+  className: PropTypes.string
+};
+var defaultProps$c = {
+  active: false,
+  id: null,
+  href: null,
+  label: null,
+  icon: null,
+  title: null,
+  onClick: null,
+  children: null,
+  refButton: null,
+  className: null
 };
 
-var _excluded$3 = ["components"];
+var ScreenButton = function ScreenButton(_ref) {
+  var _ref2;
 
-var duplicateScreen = function duplicateScreen(story, screenId) {
-  var _ref = story || {},
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties(_ref, _excluded$3);
+  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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$4.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$4.screen
+  }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
+    className: styles$4.inner
+  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$4.icon
+  }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$4.label
+  }, label) : null)), /*#__PURE__*/React.createElement(Button, {
+    className: styles$4.button,
+    withoutStyle: true,
+    id: id,
+    href: href,
+    title: title,
+    onClick: onClick,
+    refButton: refButton
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$4.border, 'rounded'])
+  })));
+};
 
-  var screen = components.find(function (it) {
-    return it.id === screenId;
-  }) || null;
-  return _objectSpread(_objectSpread({}, currentValue), {}, {
-    components: screen !== null ? [].concat(_toConsumableArray(components), [_objectSpread(_objectSpread({}, screen), {}, {
-      id: v1()
-    })]) : components
+ScreenButton.propTypes = propTypes$c;
+ScreenButton.defaultProps = defaultProps$c;
+var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
+    refButton: ref
+  }));
+});
+
+var propTypes$b = {
+  screen: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  index: PropTypes.number.isRequired,
+  title: PropTypes.string,
+  previewStyle: PropTypes.shape({
+    width: PropTypes.number,
+    height: PropTypes.number
+  }),
+  withPreview: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  onClick: PropTypes.func,
+  onClickItem: PropTypes.func,
+  buttonClassName: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$b = {
+  screen: null,
+  title: null,
+  previewStyle: null,
+  withPreview: true,
+  withPlaceholder: false,
+  onClick: null,
+  onClickItem: null,
+  buttonClassName: null,
+  className: null
+};
+
+var ScreenWithPreview = function ScreenWithPreview(_ref) {
+  var _ref3;
+
+  var screen = _ref.screen,
+      index = _ref.index,
+      title = _ref.title,
+      className = _ref.className,
+      buttonClassName = _ref.buttonClassName,
+      previewStyle = _ref.previewStyle,
+      _onClick = _ref.onClick,
+      onClickItem = _ref.onClickItem,
+      withPreview = _ref.withPreview,
+      withPlaceholder = _ref.withPlaceholder;
+  var intl = useIntl();
+
+  var _ref2 = previewStyle || {},
+      _ref2$width = _ref2.width,
+      width = _ref2$width === void 0 ? null : _ref2$width,
+      _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? null : _ref2$height;
+
+  return /*#__PURE__*/React.createElement(ScreenButton$1, Object.assign({}, screen, {
+    className: classNames([styles$5.button, (_ref3 = {}, _defineProperty(_ref3, buttonClassName, buttonClassName !== null), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    title: isMessage(title) ? intl.formatMessage(title) : null,
+    onClick: function onClick() {
+      if (_onClick !== null) {
+        _onClick(screen, index);
+      }
+
+      if (onClickItem !== null) {
+        onClickItem(screen, index);
+      }
+    }
+  }), withPreview && !withPlaceholder ? /*#__PURE__*/React.createElement("div", {
+    className: styles$5.preview,
+    style: previewStyle
+  }, /*#__PURE__*/React.createElement(ScreenPreview, {
+    screen: screen,
+    width: width,
+    height: height,
+    className: styles$5.screen
+  })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React.createElement("div", {
+    className: styles$5.placeholder,
+    style: previewStyle
+  }, /*#__PURE__*/React.createElement(ScreenPlaceholder, {
+    screen: screen,
+    width: width,
+    height: height,
+    className: styles$5.screen
+  })) : null);
+};
+
+ScreenWithPreview.propTypes = propTypes$b;
+ScreenWithPreview.defaultProps = defaultProps$b;
+
+var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
+function getDragDepth(offset, indentationWidth) {
+  return Math.round(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) {
+  var overItemIndex = items.findIndex(function (_ref3) {
+    var id = _ref3.id;
+    return id === overId;
+  });
+  var activeItemIndex = items.findIndex(function (_ref4) {
+    var id = _ref4.id;
+    return id === activeId;
+  });
+  var activeItem = items[activeItemIndex];
+  var newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  var previousItem = newItems[overItemIndex - 1];
+  var nextItem = newItems[overItemIndex + 1];
+  var dragDepth = getDragDepth(dragOffset, indentationWidth);
+  var projectedDepth = activeItem.depth + dragDepth;
+  var maxDepth = getMaxDepth({
+    previousItem: previousItem
+  });
+  var minDepth = getMinDepth({
+    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,
+    minDepth: minDepth,
+    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;
+  return items.reduce(function (acc, item, index) {
+    return [].concat(_toConsumableArray(acc), [_objectSpread(_objectSpread({}, item), {}, {
+      parentId: item.parentId || parentId,
+      depth: item.parentId ? 1 : 0,
+      index: index
+    })], _toConsumableArray(flatten(item.children || [], item.id, depth + 1)));
+  }, []);
+}
+
+function flattenTree(items) {
+  return flatten(items);
+}
+function findItem(items, itemId) {
+  return items.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === itemId;
+  });
+}
+function buildTree(flattenedItems) {
+  var root = {
+    id: 'root',
+    children: []
+  };
+
+  var nodes = _defineProperty({}, root.id, root);
+
+  var items = flattenedItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      children: []
+    });
+  }); // eslint-disable-next-line no-restricted-syntax
+
+  var _iterator = _createForOfIteratorHelper(items),
+      _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;
+      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);
+      nodes[id] = {
+        id: id,
+        children: children
+      };
+      parent.children.push(item);
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } 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;
+
+    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 _iterator2 = _createForOfIteratorHelper(items),
+      _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) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+
+  return newItems;
+}
+function setProperty(items, id, property, setter) {
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator3 = _createForOfIteratorHelper(items),
+      _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
+
+        continue;
+      }
+
+      if (item.children.length) {
+        item.children = setProperty(item.children, id, property, setter);
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+
+  return _toConsumableArray(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;
+
+    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(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;
+
+      if (children.length) {
+        excludeParentIds.push(item.id);
+      }
+
+      return false;
+    }
+
+    return true;
   });
+}
+
+var directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+var horizontal = [KeyboardCode.Left, 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;
+
+    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;
+
+      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;
+
+        switch (event.code) {
+          case KeyboardCode.Left:
+            if (depth > minDepth) {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+                x: currentCoordinates.x - indentationWidth
+              });
+            }
+
+            break;
+
+          case KeyboardCode.Right:
+            if (depth < maxDepth) {
+              return _objectSpread(_objectSpread({}, 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 KeyboardCode.Down:
+              if (overRect.top < rect.top) {
+                containers.push(container);
+              }
+
+              break;
+
+            case KeyboardCode.Up:
+              if (overRect.top > rect.top) {
+                containers.push(container);
+              }
+
+              break;
+
+          }
+        });
+      }
+
+      var collisions = closestCorners({
+        active: active,
+        collisionRect: collisionRect,
+        pointerCoordinates: null,
+        droppableContainers: containers
+      });
+      var closestId = 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 = getClientRect(newNode, {
+            ignoreTransform: true
+          });
+          var newItem = items.find(function (_ref2) {
+            var id = _ref2.id;
+            return id === closestId;
+          });
+          var activeItem = items.find(function (_ref3) {
+            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;
+
+            var topOffset = newRect.top > activeNodeRect.top ? Math.abs(activeNodeRect.height - newRect.height) : 0;
+            var newCoordinates = {
+              x: newRect.left + _depth * indentationWidth,
+              y: newRect.top + topOffset
+            };
+            return newCoordinates;
+          }
+        }
+      }
+    }
+
+    return undefined;
+  };
+};
+
+var styles$3 = {"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","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator","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","Count":"micromag-editor-sortable-sortable-tree-item-actions-Count","Text":"micromag-editor-sortable-sortable-tree-item-actions-Text","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"};
+
+var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "children"];
+var propTypes$a = {
+  childCount: PropTypes.number,
+  clone: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  depth: PropTypes.number.isRequired,
+  disableInteraction: PropTypes.bool,
+  disableSelection: PropTypes.bool,
+  ghost: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  handleProps: PropTypes.any,
+  indicator: PropTypes.bool,
+  indentationWidth: PropTypes.number.isRequired,
+  value: PropTypes.string,
+  onCollapse: PropTypes.func,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  wrapperRef: PropTypes.any,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired
+  }),
+  showId: PropTypes.bool,
+  children: PropTypes.node
+};
+var defaultProps$a = {
+  childCount: null,
+  clone: false,
+  collapsed: false,
+  disableInteraction: false,
+  disableSelection: false,
+  ghost: false,
+  handleProps: null,
+  indicator: false,
+  value: null,
+  onCollapse: null,
+  onRemove: null,
+  onClick: null,
+  wrapperRef: null,
+  style: null,
+  showId: false,
+  children: null
+};
+var SortableTreeItemActions = /*#__PURE__*/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 children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded$4);
+
+  return /*#__PURE__*/React.createElement("li", Object.assign({
+    className: classNames([styles$3.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$3.clone, clone), _defineProperty(_ref2, styles$3.ghost, ghost), _defineProperty(_ref2, styles$3.indicator, indicator), _defineProperty(_ref2, styles$3.disableSelection, disableSelection), _defineProperty(_ref2, styles$3.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$3.withChildren, onCollapse !== null), _ref2)]),
+    ref: wrapperRef,
+    style: _objectSpread({
+      marginLeft: "".concat(indentationWidth * depth, "px")
+    }, style)
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.inner,
+    ref: ref,
+    style: {
+      width: style.width,
+      height: style.height
+    }
+  }, /*#__PURE__*/React.createElement("button", Object.assign({
+    className: classNames([styles$3.button, styles$3.handle]),
+    type: "button"
+  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$3.icon,
+    icon: faGripLines
+  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimes
+  })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
+    className: styles$3.count
+  }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: styles$3.collapsedCount
+  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onCollapse,
+    className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
+    style: {
+      width: style.width
+    }
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faAngleDown
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.children
+  }, children));
+});
+SortableTreeItemActions.propTypes = propTypes$a;
+SortableTreeItemActions.defaultProps = defaultProps$a;
+
+var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "onCollapse", "onClickItem"];
+var propTypes$9 = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  depth: PropTypes.number.isRequired,
+  component: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.object,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    scaledWidth: PropTypes.number.isRequired,
+    scaledHeight: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired,
+    scale: PropTypes.number.isRequired
+  }),
+  smallScale: PropTypes.number,
+  onCollapse: PropTypes.func,
+  onClickItem: PropTypes.func
+};
+var defaultProps$9 = {
+  component: null,
+  value: null,
+  style: null,
+  smallScale: 0.75,
+  onCollapse: null,
+  onClickItem: null
+};
+
+var animateLayoutChanges = function animateLayoutChanges(_ref) {
+  var isSorting = _ref.isSorting,
+      wasDragging = _ref.wasDragging;
+  return !(isSorting || wasDragging);
 };
 
-var _excluded$2 = ["components"];
+var SortableTreeItem = function SortableTreeItem(_ref2) {
+  var id = _ref2.id,
+      index = _ref2.index,
+      depth = _ref2.depth,
+      Component = _ref2.component,
+      value = _ref2.value,
+      itemStyle = _ref2.style,
+      smallScale = _ref2.smallScale,
+      onCollapse = _ref2.onCollapse,
+      onClickItem = _ref2.onClickItem,
+      props = _objectWithoutProperties(_ref2, _excluded$3);
+
+  var _useSortable = 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;
+
+  var hasCollapse = onCollapse !== null;
+  var _itemStyle$scaledWidt = itemStyle.scaledWidth,
+      scaledWidth = _itemStyle$scaledWidt === void 0 ? 100 : _itemStyle$scaledWidt,
+      _itemStyle$scaledHeig = itemStyle.scaledHeight,
+      scaledHeight = _itemStyle$scaledHeig === void 0 ? 66 : _itemStyle$scaledHeig,
+      _itemStyle$scale = itemStyle.scale,
+      scale = _itemStyle$scale === void 0 ? 1 : _itemStyle$scale;
+  var extraHeight = hasCollapse ? 30 : 0;
+  var actionsStyle = {
+    width: depth === 0 ? scaledWidth : scaledWidth * smallScale,
+    height: depth === 0 ? scaledHeight + extraHeight : scaledHeight * smallScale,
+    transform: CSS.Translate.toString(transform),
+    transition: transition
+  };
+  var previewStyle = {
+    width: itemStyle.width,
+    height: itemStyle.height,
+    transform: depth === 0 ? itemStyle.transform : "scale(".concat(scale * smallScale, ", ").concat(scale * smallScale, ")")
+  };
+
+  var _ref3 = listeners || {},
+      onPointerDown = _ref3.onPointerDown;
 
-var updateScreen = function updateScreen(story, newScreenValue) {
-  var newScreenId = newScreenValue.id;
+  var onClickAction = useCallback(function (e) {
+    if (onClickItem !== null) {
+      onClickItem(value, index);
+    }
 
-  var _ref = story || {},
-      _ref$components = _ref.components,
-      components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties(_ref, _excluded$2);
+    if (onPointerDown !== null) {
+      onPointerDown(e);
+    }
+  }, [value, index, onClickItem, onPointerDown]);
+  return /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
+    ref: setDraggableNodeRef,
+    wrapperRef: setDroppableNodeRef,
+    style: actionsStyle,
+    depth: depth,
+    ghost: isDragging,
+    disableSelection: iOS,
+    disableInteraction: isSorting,
+    handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+      onPointerDown: onClickAction
+    }),
+    onCollapse: onCollapse
+  }, props), Component !== null ? /*#__PURE__*/React.createElement(Component, Object.assign({}, value, {
+    previewStyle: previewStyle
+  })) : null);
+};
+SortableTreeItem.propTypes = propTypes$9;
+SortableTreeItem.defaultProps = defaultProps$9;
+
+var initialItems = [{
+  id: 'Home',
+  children: []
+}, {
+  id: 'Collections',
+  children: [{
+    id: 'Spring',
+    children: []
+  }, {
+    id: 'Summer',
+    children: []
+  }, {
+    id: 'Fall',
+    children: []
+  }, {
+    id: 'Winter',
+    children: []
+  }]
+}, {
+  id: 'About Us',
+  children: []
+}, {
+  id: 'My Account',
+  children: [{
+    id: 'Addresses',
+    children: []
+  }, {
+    id: 'Order History',
+    children: []
+  }]
+}];
+var measuring = {
+  droppable: {
+    strategy: MeasuringStrategy.Always
+  }
+};
+
+var dropAnimation = _objectSpread(_objectSpread({}, defaultDropAnimation), {}, {
+  dragSourceOpacity: 0.5
+});
 
-  var index = components.findIndex(function (it) {
-    return it.id === newScreenId;
-  });
-  return _objectSpread(_objectSpread({}, currentValue), {}, {
-    components: [].concat(_toConsumableArray(components.slice(0, index)), [_objectSpread(_objectSpread({}, components[index]), newScreenValue)], _toConsumableArray(components.slice(index + 1)))
+var adjustTranslate = function adjustTranslate(_ref) {
+  var transform = _ref.transform;
+  return _objectSpread(_objectSpread({}, transform), {}, {
+    y: transform.y - 25
   });
 };
 
-var getFieldByName = function getFieldByName(fields, name) {
-  return fields.reduce(function (foundField, it) {
-    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;
+var propTypes$8 = {
+  collapsible: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.array,
+  indentationWidth: PropTypes.number,
+  indicator: PropTypes.bool,
+  removable: PropTypes.bool,
+  component: PropTypes.func,
+  itemStyle: PropTypes.shape({}),
+  onClickItem: PropTypes.func,
+  onChange: PropTypes.func
+};
+var defaultProps$8 = {
+  collapsible: true,
+  items: initialItems,
+  indentationWidth: 30,
+  indicator: false,
+  removable: false,
+  component: null,
+  itemStyle: null,
+  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,
+      itemStyle = _ref2.itemStyle,
+      onClickItem = _ref2.onClickItem,
+      onChange = _ref2.onChange;
+
+  var _useState = useState(function () {
+    return defaultItems;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
 
-    if (name !== null && fieldName === name) {
-      return it;
-    }
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      activeId = _useState4[0],
+      setActiveId = _useState4[1];
 
-    return getFieldByName(subFields, name);
-  }, null);
-};
+  var _useState5 = useState(null),
+      _useState6 = _slicedToArray(_useState5, 2),
+      overId = _useState6[0],
+      setOverId = _useState6[1];
 
-var useFormTransition = function useFormTransition(url, screenIndex, styles) {
-  var lastPageRef = useRef({
-    url: url,
-    screenIndex: screenIndex
+  var _useState7 = useState(0),
+      _useState8 = _slicedToArray(_useState7, 2),
+      offsetLeft = _useState8[0],
+      setOffsetLeft = _useState8[1];
+
+  var _useState9 = useState(null),
+      _useState10 = _slicedToArray(_useState9, 2),
+      currentPosition = _useState10[0],
+      setCurrentPosition = _useState10[1];
+
+  var flattenedItems = useMemo(function () {
+    var flattenedTree = flattenTree(items); // console.log('yo', items, flattenedTree);
+
+    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;
+      return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
+    }, []) || null;
+    return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray(collapsedItems)) : collapsedItems);
+  }, [activeId, items]);
+  var projected = activeId && overId ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
+  var sensorContext = useRef({
+    items: flattenedItems,
+    offset: offsetLeft
   });
-  var direction = useMemo(function () {
-    var _lastPageRef$current = lastPageRef.current,
-        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;
-    var previousPartsCount = lastUrlSplit.length;
-    var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
-    var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
-    currentPartsCount -= isSettings ? 1 : 0;
-    previousPartsCount -= wasSettings ? 1 : 0;
-    return currentPartsCount >= previousPartsCount ? 'right' : 'left';
-  }, [url, screenIndex]);
-  var name = useMemo(function () {
-    var _classNames, _classNames2, _classNames3;
+  var _useState11 = useState(function () {
+    return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
+  }),
+      _useState12 = _slicedToArray(_useState11, 1),
+      coordinateGetter = _useState12[0];
 
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: coordinateGetter
+  }));
+  var sortedIds = useMemo(function () {
+    return flattenedItems.map(function (_ref4) {
+      var id = _ref4.id;
+      return id;
+    });
+  }, [flattenedItems]);
+  var activeItem = activeId ? flattenedItems.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === activeId;
+  }) : null;
+  useEffect(function () {
+    sensorContext.current = {
+      items: flattenedItems,
+      offset: offsetLeft
+    };
+  }, [flattenedItems, offsetLeft]);
+  var announcements = useMemo(function () {
     return {
-      enter: classNames((_classNames = {}, _defineProperty(_classNames, styles.enterRight, direction === 'right'), _defineProperty(_classNames, styles.enterLeft, direction === 'left'), _defineProperty(_classNames, styles.enterTop, direction === 'top'), _defineProperty(_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
-      enterActive: classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty(_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
-      leave: styles.leave || 'none',
-      leaveActive: classNames((_classNames3 = {}, _defineProperty(_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty(_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty(_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty(_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
+      onDragStart: function onDragStart(id) {
+        return "Picked up ".concat(id, ".");
+      },
+      onDragMove: function onDragMove(id, currentOverId) {
+        return getMovementAnnouncement('onDragMove', id, currentOverId);
+      },
+      onDragOver: function onDragOver(id, currentOverId) {
+        return getMovementAnnouncement('onDragOver', id, currentOverId);
+      },
+      onDragEnd: function onDragEnd(id, currentOverId) {
+        // console.log('drag end', flattenedItems);
+        if (onChange !== null) {
+          onChange((flattenedItems || []).map(function (_ref6) {
+            var itemId = _ref6.id,
+                _ref6$children = _ref6.children,
+                children = _ref6$children === void 0 ? [] : _ref6$children,
+                _ref6$parentId = _ref6.parentId,
+                parentId = _ref6$parentId === void 0 ? null : _ref6$parentId,
+                _ref6$collapsed = _ref6.collapsed,
+                collapsed = _ref6$collapsed === void 0 ? false : _ref6$collapsed;
+            return {
+              id: itemId,
+              props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
+                group: {
+                  collapsed: collapsed,
+                  mergeNavItems: true
+                }
+              } : {
+                group: null
+              }), parentId !== null ? {
+                parentId: parentId
+              } : {
+                parentId: null
+              })
+            };
+          }));
+        }
+
+        return getMovementAnnouncement('onDragEnd', id, currentOverId);
+      },
+      onDragCancel: function onDragCancel(id) {
+        return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
+      }
     };
-  }, [direction, screenIndex]);
-  return {
-    direction: direction,
-    name: name,
-    timeout: direction === 'left' || direction === 'right' ? 300 : 10
-  };
-};
+  }, [flattenedItems, onChange]); // Initial tree setup from list
 
-var _excluded$1 = ["className"];
-var propTypes$7 = {
-  className: PropTypes.string
-};
-var defaultProps$7 = {
-  className: null
-};
+  useEffect(function () {
+    // console.log('fuck off');
+    setItems(buildTree(defaultItems));
+  }, []);
+  return /*#__PURE__*/React.createElement(DndContext, {
+    announcements: announcements,
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    measuring: measuring,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: sortedIds,
+    strategy: verticalListSortingStrategy
+  }, flattenedItems.map(function (_ref7, idx) {
+    var id = _ref7.id,
+        _ref7$children = _ref7.children,
+        children = _ref7$children === void 0 ? [] : _ref7$children,
+        collapsed = _ref7.collapsed,
+        depth = _ref7.depth,
+        _ref7$value = _ref7.value,
+        value = _ref7$value === void 0 ? null : _ref7$value;
+    return /*#__PURE__*/React.createElement(SortableTreeItem, {
+      key: id,
+      id: id,
+      depth: id === activeId && projected ? projected.depth : depth,
+      indentationWidth: indentationWidth,
+      indicator: indicator,
+      collapsed: Boolean(collapsed && children.length),
+      onCollapse: collapsible && children.length ? function () {
+        return handleCollapse(id);
+      } : undefined,
+      onRemove: removable ? function () {
+        return handleRemove(id);
+      } : undefined,
+      childCount: getChildCount(items, id),
+      component: component,
+      value: value,
+      style: itemStyle,
+      onClickItem: onClickItem,
+      index: idx
+    });
+  }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
+    dropAnimation: dropAnimation,
+    modifiers: indicator ? [adjustTranslate] : undefined
+  }, activeId && activeItem ? /*#__PURE__*/React.createElement(SortableTreeItem, {
+    id: activeId,
+    depth: activeItem.depth,
+    clone: true,
+    childCount: getChildCount(items, activeId) + 1,
+    indentationWidth: indentationWidth,
+    component: component,
+    value: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value,
+    onClickItem: onClickItem,
+    index: flattenedItems.findIndex(function (_ref8) {
+      var id = _ref8.id;
+      return activeId === id;
+    }),
+    style: itemStyle
+  }) : null), document.body)));
+
+  function handleDragStart(_ref9) {
+    var newActiveId = _ref9.active.id;
+    setActiveId(newActiveId);
+    setOverId(newActiveId);
+    var newActiveItem = flattenedItems.find(function (_ref10) {
+      var id = _ref10.id;
+      return id === newActiveId;
+    });
 
-var SettingsButton = function SettingsButton(_ref) {
-  var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1);
+    if (newActiveItem) {
+      setCurrentPosition({
+        parentId: newActiveItem.parentId,
+        overId: activeId
+      });
+    }
 
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: className,
-    theme: "secondary",
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: faCogs
-    })
-  }, props));
-};
+    document.body.style.setProperty('cursor', 'grabbing');
+  }
+
+  function handleDragMove(_ref11) {
+    var delta = _ref11.delta;
+    setOffsetLeft(delta.x);
+  }
+
+  function handleDragOver(_ref12) {
+    var _over$id;
+
+    var over = _ref12.over;
+    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
+  }
+
+  function resetState() {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+    setCurrentPosition(null);
+    document.body.style.setProperty('cursor', '');
+  }
+
+  function handleDragEnd(_ref13) {
+    var active = _ref13.active,
+        over = _ref13.over;
+    resetState();
+
+    if (projected && over) {
+      var depth = projected.depth,
+          parentId = projected.parentId;
+      var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
+      var overIndex = clonedItems.findIndex(function (_ref14) {
+        var id = _ref14.id;
+        return id === over.id;
+      });
+      var activeIndex = clonedItems.findIndex(function (_ref15) {
+        var id = _ref15.id;
+        return id === active.id;
+      });
+      var activeTreeItem = clonedItems[activeIndex];
+      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 _loop = function _loop(i) {
+          var childId = activeTreeItem.children[i].id;
+          var childIndex = clonedItems.findIndex(function (_ref16) {
+            var id = _ref16.id;
+            return id === childId;
+          });
+          clonedItems[childIndex].parentId = parentId;
+          clonedItems[childIndex].depth = depth;
+        };
 
-SettingsButton.propTypes = propTypes$7;
-SettingsButton.defaultProps = defaultProps$7;
+        for (var i = 0; i < activeTreeItem.children.length; i += 1) {
+          _loop(i);
+        }
 
-var styles$4 = {"container":"micromag-editor-menus-breadcrumb-container"};
+        activeTreeItem.children = [];
+      }
 
-var propTypes$6 = {
-  story: PropTypes$1.story,
-  screenId: PropTypes.string,
-  field: PropTypes.string,
-  form: PropTypes.string,
-  url: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
-var defaultProps$6 = {
-  story: null,
-  screenId: null,
-  field: null,
-  form: null,
-  className: null
-};
+      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
+        depth: depth,
+        parentId: parentId
+      });
+      var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+      var newItems = buildTree(sortedItems);
+      setItems(newItems);
+    }
+  }
 
-var Breadcrumb = function Breadcrumb(_ref) {
-  var story = _ref.story,
-      screenId = _ref.screenId,
-      field = _ref.field,
-      form = _ref.form,
-      url = _ref.url,
-      className = _ref.className;
-  var intl = useIntl();
+  function handleDragCancel() {
+    resetState();
+  }
 
-  var _ref2 = story || {},
-      _ref2$components = _ref2.components,
-      screens = _ref2$components === void 0 ? [] : _ref2$components;
+  function handleRemove(id) {
+    setItems(function (newItems) {
+      return removeItem(newItems, id);
+    });
+  }
 
-  var history = useHistory();
-  var screensManager = useScreensManager();
-  var fieldsManager = useFieldsManager();
-  var items = useMemo(function () {
-    var screenIndex = screens.findIndex(function (it) {
-      return it.id === screenId;
+  function handleCollapse(id) {
+    setItems(function (newItems) {
+      return setProperty(newItems, id, 'collapsed', function (value) {
+        return !value;
+      });
     });
+  }
 
-    if (!screens[screenIndex]) {
-      return [];
+  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 (_ref17) {
+        var id = _ref17.id;
+        return id === currentOverId;
+      });
+      var activeIndex = clonedItems.findIndex(function (_ref18) {
+        var id = _ref18.id;
+        return id === currentActiveId;
+      });
+      var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+      var previousItem = sortedItems[overIndex - 1];
+      var newAnnouncement;
+      var movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
+      var nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
+
+      if (!previousItem) {
+        var nextItem = sortedItems[overIndex + 1];
+        newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " before ").concat(nextItem.id, ".");
+      } else if (projected.depth > previousItem.depth) {
+        newAnnouncement = "".concat(currentActiveId, " was ").concat(nestedVerb, " under ").concat(previousItem.id, ".");
+      } else {
+        var previousSibling = previousItem;
+
+        var _loop2 = function _loop2() {
+          var _previousSibling = previousSibling,
+              parentId = _previousSibling.parentId;
+          previousSibling = sortedItems.find(function (_ref19) {
+            var id = _ref19.id;
+            return id === parentId;
+          });
+        };
+
+        while (previousSibling && projected.depth < previousSibling.depth) {
+          _loop2();
+        }
+
+        if (previousSibling) {
+          newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " after ").concat(previousSibling.id, ".");
+        }
+      } // eslint-disable-next-line consistent-return
+
+
+      return newAnnouncement;
     }
+  }
+};
+SortableTree.propTypes = propTypes$8;
+SortableTree.defaultProps = defaultProps$8;
 
-    var type = screens[screenIndex].type;
-    var fieldItems = [];
+var _excluded$2 = ["className", "screen", "type", "onClick"],
+    _excluded2 = ["id", "screen"];
+var propTypes$7 = {
+  items: PropTypes$1.menuItems,
+  withPreview: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  settings: PropTypes.node,
+  previewMinWidth: PropTypes.number,
+  sortable: PropTypes.bool,
+  isTree: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  settingsClassName: PropTypes.string,
+  onClickItem: PropTypes.func,
+  onOrderChange: PropTypes.func
+};
+var defaultProps$7 = {
+  items: [],
+  withPreview: false,
+  withPlaceholder: false,
+  settings: null,
+  previewMinWidth: 320,
+  sortable: false,
+  isTree: false,
+  isVertical: false,
+  noWrap: false,
+  className: null,
+  itemClassName: null,
+  buttonClassName: null,
+  settingsClassName: null,
+  onClickItem: null,
+  onOrderChange: null
+};
 
-    if (field !== null) {
-      var _screensManager$getDe = screensManager.getDefinition(type),
-          _screensManager$getDe2 = _screensManager$getDe.fields,
-          screenFields = _screensManager$getDe2 === void 0 ? [] : _screensManager$getDe2;
+var ScreensMenu = function ScreensMenu(_ref) {
+  var _ref10;
 
-      var fields = [].concat(_toConsumableArray(screenFields), [getScreenExtraField(intl)]);
-      var fieldPath = field.split('/');
-      var lastKeyIndex = fieldPath.length - 1;
-      var parentItem = null;
-      fieldPath.reduce(function (currentFields, key, keyIndex) {
-        var _currentFields$type = currentFields.type,
-            fieldType = _currentFields$type === void 0 ? null : _currentFields$type;
-        var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
-        var _fieldsDef$fields = fieldsDef.fields,
-            subFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
-            _fieldsDef$settings = fieldsDef.settings,
-            settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
-            _fieldsDef$itemsField = fieldsDef.itemsField,
-            itemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
-        var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
-        var currentSettings = settings !== null ? getFieldByName(settings, key) : null;
-        var isCurrentSubfields = currentSubfields !== null;
-        var isCurrentSettings = currentSettings !== null;
-        var isListItems = itemsField !== null && !!key.match(/^[0-9]+$/);
-        var isLastIndex = keyIndex === lastKeyIndex;
-        var pathPrefix = "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex + 1).join('/'));
-        var pathSuffix = isLastIndex && form !== null ? "/".concat(form) : '';
-        var addNewItem = isLastIndex || isListItems;
-        var itemPath = "".concat(pathPrefix).concat(pathSuffix);
-        var nextFields = null;
+  var items = _ref.items,
+      withPreview = _ref.withPreview,
+      withPlaceholder = _ref.withPlaceholder,
+      settings = _ref.settings,
+      previewMinWidth = _ref.previewMinWidth,
+      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;
 
-        if (isCurrentSubfields) {
-          nextFields = currentSubfields;
-        } else if (isCurrentSettings) {
-          nextFields = currentSettings;
+  var _useResizeObserver = useResizeObserver({}, [items]),
+      containerRef = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
 
-          if (parentItem !== null) {
-            fieldItems.push(_objectSpread(_objectSpread({}, parentItem), {}, {
-              url: "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex).join('/'), "/settings")
-            }));
-          }
-        } else if (isListItems) {
-          nextFields = itemsField;
-        }
+  var _useResizeObserver2 = useResizeObserver({}, [items]),
+      columnRef = _useResizeObserver2.ref,
+      columnRect = _useResizeObserver2.entry.contentRect;
 
-        var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
-        var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
+  var previewStyle = useMemo(function () {
+    var _ref2 = contentRect || {},
+        _ref2$width = _ref2.width,
+        itemWidth = _ref2$width === void 0 ? 0 : _ref2$width,
+        _ref2$height = _ref2.height,
+        itemHeight = _ref2$height === void 0 ? 0 : _ref2$height;
 
-        var _ref3 = parentItem || {},
-            _ref3$label = _ref3.label,
-            parentItemLabel = _ref3$label === void 0 ? null : _ref3$label;
+    var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 2 / 3;
 
-        var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
-        var item = {
-          url: itemPath,
-          label: finalItemLabel || '',
-          active: false
-        };
+    var _getSizeWithinBounds = getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
+        previewScale = _getSizeWithinBounds.scale;
 
-        if (addNewItem) {
-          fieldItems.push(item);
-        }
+    return {
+      width: previewMinWidth,
+      height: previewMinWidth * ratio,
+      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
+    };
+  }, [previewMinWidth, contentRect]);
+  var treeStyle = useMemo(function () {
+    var _ref3 = columnRect || {},
+        _ref3$width = _ref3.width,
+        itemWidth = _ref3$width === void 0 ? 0 : _ref3$width;
 
-        parentItem = item;
-        return nextFields;
-      }, {
-        fields: fields
-      });
-    }
+    var itemHeight = itemWidth * 3 / 2;
+    var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 0;
 
-    var finalItems = [{
-      label: intl.formatMessage({
-        id: "AHvHaY",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Parameters"
-        }]
-      }),
-      url: "/".concat(screenId),
-      active: false
-    }].concat(fieldItems).filter(function (it) {
-      return it !== null;
-    });
-    var lastItemsIndex = finalItems.length - 1;
-    return finalItems.map(function (it, index) {
-      return index === lastItemsIndex ? _objectSpread(_objectSpread({}, it), {}, {
-        url: url,
-        active: true
-      }) : it;
+    var _getSizeWithinBounds2 = getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
+        scaledWidth = _getSizeWithinBounds2.width,
+        scaledHeight = _getSizeWithinBounds2.height,
+        previewScale = _getSizeWithinBounds2.scale;
+
+    return {
+      width: previewMinWidth,
+      height: previewMinWidth * ratio,
+      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")"),
+      scale: previewScale,
+      scaledWidth: scaledWidth,
+      scaledHeight: scaledHeight
+    };
+  }, [previewMinWidth, columnRect]);
+  var itemsElements = !isTree ? items.map(function (_ref4, index) {
+    var _ref5;
+
+    var _ref4$className = _ref4.className,
+        itemCustomClassName = _ref4$className === void 0 ? null : _ref4$className,
+        screen = _ref4.screen,
+        type = _ref4.type,
+        _ref4$onClick = _ref4.onClick,
+        onClick = _ref4$onClick === void 0 ? null : _ref4$onClick,
+        item = _objectWithoutProperties(_ref4, _excluded$2);
+
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.id,
+      className: classNames([styles$6.item, (_ref5 = {}, _defineProperty(_ref5, itemClassName, itemClassName !== null), _defineProperty(_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
+      "data-screen-id": item.id,
+      ref: index === 0 ? containerRef : null
+    }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
+      index: index,
+      screen: _objectSpread(_objectSpread({}, screen), withPlaceholder ? {
+        type: type
+      } : null),
+      buttonClassName: buttonClassName,
+      previewStyle: previewStyle,
+      withPreview: withPreview,
+      withPlaceholder: withPlaceholder,
+      onClick: onClick,
+      onClickItem: onClickItem
+    }), settings !== null ? /*#__PURE__*/React.createElement("div", {
+      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
+    }, isFunction(settings) ? settings(index) : settings) : null);
+  }) : [];
+  var sortableItems = useMemo(function () {
+    return isTree ? items.map(function (_ref7) {
+      var id = _ref7.id,
+          _ref7$screen = _ref7.screen,
+          screen = _ref7$screen === void 0 ? {} : _ref7$screen,
+          props = _objectWithoutProperties(_ref7, _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;
+
+      var _ref8 = group || {},
+          _ref8$collapsed = _ref8.collapsed,
+          collapsed = _ref8$collapsed === void 0 ? true : _ref8$collapsed;
+
+      return _objectSpread({
+        id: id,
+        parentId: parentId,
+        collapsed: collapsed,
+        value: {
+          id: id,
+          screen: screen
+        }
+      }, props);
+    }, []) : items.map(function (_ref9) {
+      var id = _ref9.id;
+      return {
+        id: id
+      };
     });
-  }, [intl, screens, screenId, field, form, url, screensManager, fieldsManager]);
-  var itemsLength = items.length;
-  var onClickBack = useCallback(function () {
-    history.push(items[itemsLength - 2].url);
-  }, [items]);
-  var withBack = itemsLength > 1;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(BackButton, {
-    onClick: onClickBack,
-    className: "mr-2"
-  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$1, {
-    items: items,
-    theme: "secondary",
-    withoutBar: true,
-    noWrap: true,
-    className: classNames([styles$4.container, 'text-truncate', _defineProperty({}, className, className !== null)])
-  }));
+  }, [items, isTree]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$6.container, (_ref10 = {}, _defineProperty(_ref10, styles$6.noWrap, noWrap), _defineProperty(_ref10, styles$6.isVertical, isVertical), _defineProperty(_ref10, styles$6.isTree, isTree), _defineProperty(_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty(_ref10, className, className), _ref10)]),
+    ref: columnRef
+  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
+    items: sortableItems,
+    component: ScreenWithPreview,
+    itemStyle: treeStyle,
+    onClickItem: onClickItem,
+    onChange: onOrderChange
+  }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(ReactSortable, {
+    list: sortableItems,
+    setList: onOrderChange,
+    animation: 200,
+    delayOnTouchStart: true,
+    delay: 2,
+    tag: "ul",
+    className: styles$6.items
+  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
+    className: styles$6.items
+  }, itemsElements) : null);
 };
 
-Breadcrumb.propTypes = propTypes$6;
-Breadcrumb.defaultProps = defaultProps$6;
+ScreensMenu.propTypes = propTypes$7;
+ScreensMenu.defaultProps = defaultProps$7;
 
-var styles$3 = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+var styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title"};
 
-var propTypes$5 = {
-  value: PropTypes$1.component,
+var propTypes$6 = {
+  screens: PropTypes$1.screenDefinitions,
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
   className: PropTypes.string,
-  gotoFieldForm: PropTypes.func.isRequired,
-  closeFieldForm: PropTypes.func.isRequired,
-  onChange: PropTypes.func // onClickDelete: PropTypes.func,
-
+  onClickItem: PropTypes.func
 };
-var defaultProps$5 = {
-  value: null,
+var defaultProps$6 = {
+  screens: null,
+  selectedTypes: null,
   className: null,
-  onChange: null // onClickDelete: null,
-
+  onClickItem: null
 };
 
-var ScreenForm = function ScreenForm(_ref) {
-  var value = _ref.value,
+var ScreenTypes = function ScreenTypes(_ref) {
+  var screens = _ref.screens,
+      selectedTypes = _ref.selectedTypes,
       className = _ref.className,
-      gotoFieldForm = _ref.gotoFieldForm,
-      closeFieldForm = _ref.closeFieldForm,
-      onChange = _ref.onChange;
-
-  var _useScreenDefinition = useScreenDefinition(),
-      _useScreenDefinition$ = _useScreenDefinition.fields,
-      fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // const intl = useIntl();
-  // const finalOnClickDelete = useCallback(() => {
-  //     if (
-  //         onClickDelete !== null &&
-  //         window.confirm(
-  //             intl.formatMessage({
-  //                 defaultMessage: 'Are you sure you want to delete this screen?',
-  //                 description: 'Confirm message when deleting a screen',
-  //             }),
-  //         )
-  //     ) {
-  //         onClickDelete(value);
-  //     }
-  // }, [intl, onClickDelete, value]);
-
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$3.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3.inner
-  }, /*#__PURE__*/React.createElement(Fields, {
-    fields: fields,
-    value: value,
-    onChange: onChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  })));
-};
+      onClickItem = _ref.onClickItem;
+  var intl = useIntl();
+  var screensManager = useScreensManager();
+  var finalDefinitions = screens || screensManager.getDefinitions();
+  var groups = 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;
 
-ScreenForm.propTypes = propTypes$5;
-ScreenForm.defaultProps = defaultProps$5;
+      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;
 
-/* eslint-disable react/jsx-props-no-spreading */
-var propTypes$4 = {
-  children: PropTypes.node
-};
-var defaultProps$4 = {
-  children: null
-};
+      var _ref3 = label || {},
+          _ref3$id = _ref3.id,
+          messageId = _ref3$id === void 0 ? null : _ref3$id;
 
-var FieldWithContexts = function FieldWithContexts(props) {
-  // Get definitions
-  var _useScreenDefinition = useScreenDefinition(),
-      _useScreenDefinition$ = _useScreenDefinition.fields,
-      fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // To use a specific form component
+      if (hidden) {
+        return allGroups;
+      }
 
+      var _ref4 = isMessage(label) ? {
+        id: messageId || id,
+        name: group
+      } : {
+        id: messageId || id,
+        name: title
+      },
+          groupId = _ref4.id,
+          groupName = _ref4.name;
 
-  var formComponents = useFormsComponents();
-  return /*#__PURE__*/React.createElement(FieldForm, Object.assign({
-    fields: fields,
-    formComponents: formComponents
-  }, props));
+      var groupIndex = allGroups.findIndex(function (it) {
+        return it.id === groupId;
+      });
+      var selected = selectedTypes !== null && selectedTypes.indexOf(id) !== -1;
+      var item = {
+        id: id,
+        type: id,
+        screen: definition,
+        className: classNames(_defineProperty({
+          'bg-secondary': !selected,
+          'bg-primary': selected
+        }, styles$2.selected, selected))
+      };
+      return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
+        items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
+      })], _toConsumableArray(allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray(allGroups), [{
+        id: groupId,
+        name: isMessage(label) ? intl.formatMessage(label) : groupName,
+        order: order,
+        items: [item]
+      }]);
+    }, []);
+    return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
+  }, [finalDefinitions, selectedTypes]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$2.rows
+  }, groups.map(function (_ref6) {
+    var id = _ref6.id,
+        name = _ref6.name,
+        items = _ref6.items;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "group-".concat(id),
+      className: styles$2.row
+    }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
+      className: styles$2.layouts
+    }, /*#__PURE__*/React.createElement(ScreensMenu, {
+      items: items,
+      withPlaceholder: true,
+      itemClassName: classNames(['border', 'rounded', {
+        'border-secondary': selectedTypes === null,
+        'border-dark': selectedTypes !== null,
+        'bg-secondary': selectedTypes === null,
+        'text-secondary': selectedTypes !== null
+      }]),
+      previewMinWidth: 100,
+      onClickItem: onClickItem
+    })));
+  })));
 };
 
-FieldWithContexts.propTypes = propTypes$4;
-FieldWithContexts.defaultProps = defaultProps$4;
+ScreenTypes.propTypes = propTypes$6;
+ScreenTypes.defaultProps = defaultProps$6;
 
-var styles$2 = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+var styles$1 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
 
-var propTypes$3 = {
+var propTypes$5 = {
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
   className: PropTypes.string,
-  onConfirm: PropTypes.func,
-  onCancel: PropTypes.func
+  onRequestClose: PropTypes.func,
+  onClickScreenType: PropTypes.func
 };
-var defaultProps$3 = {
+var defaultProps$5 = {
+  selectedTypes: null,
   className: null,
-  onConfirm: null,
-  onCancel: null
+  onRequestClose: null,
+  onClickScreenType: null
 };
 
-var DeleteScreenModal = function DeleteScreenModal(_ref) {
-  var className = _ref.className,
-      onConfirm = _ref.onConfirm,
-      onCancel = _ref.onCancel;
+var ScreenTypesModal = function ScreenTypesModal(_ref) {
+  var selectedTypes = _ref.selectedTypes,
+      className = _ref.className,
+      onRequestClose = _ref.onRequestClose,
+      onClickScreenType = _ref.onClickScreenType;
   return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
     title: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "p6q/+/",
+      id: "QBaiO0",
       defaultMessage: [{
         "type": 0,
-        "value": "Delete screen"
+        "value": "Add a screen"
       }]
     }),
-    className: classNames([styles$2.container, _defineProperty({}, className, className)]),
-    onClickClose: onCancel
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2.description
-  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "q/tLk0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Are you sure you want to delete this screen?"
-    }]
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.actions
-  }, /*#__PURE__*/React.createElement(Button, {
-    onClick: onCancel,
-    className: "btn-outline-secondary mr-2"
-  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "0GT0SI",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  }))), /*#__PURE__*/React.createElement(Button, {
-    onClick: onConfirm,
-    theme: "danger",
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "gRxcTc",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Delete screen"
-      }]
-    })
-  }))));
+    className: classNames([styles$1.container, _defineProperty({}, className, className)]),
+    onClickClose: onRequestClose
+  }, /*#__PURE__*/React.createElement(ScreenTypes, {
+    selectedTypes: selectedTypes,
+    className: styles$1.menu,
+    onClickItem: onClickScreenType
+  })));
 };
 
-DeleteScreenModal.propTypes = propTypes$3;
-DeleteScreenModal.defaultProps = defaultProps$3;
-
-var styles$1 = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","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","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
+ScreenTypesModal.propTypes = propTypes$5;
+ScreenTypesModal.defaultProps = defaultProps$5;
 
-var propTypes$2 = {
+var _excluded$1 = ["id"];
+var propTypes$4 = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   isTheme: PropTypes.bool,
-  className: PropTypes.string,
-  onChange: PropTypes.func
+  isVertical: PropTypes.bool,
+  isCreateOpened: PropTypes.bool,
+  isParsed: PropTypes.bool,
+  isTree: PropTypes.bool,
+  onClickScreen: PropTypes.func,
+  onChange: PropTypes.func,
+  className: PropTypes.string
 };
-var defaultProps$2 = {
+var defaultProps$4 = {
   value: null,
   isTheme: false,
-  className: null,
-  onChange: null
+  isVertical: false,
+  isCreateOpened: false,
+  isParsed: false,
+  isTree: false,
+  onClickScreen: null,
+  onChange: null,
+  className: null
 };
 
-var EditForm = function EditForm(_ref) {
-  var value = _ref.value,
+var EditorScreens = function EditorScreens(_ref) {
+  var unparsedValue = _ref.value,
       isTheme = _ref.isTheme,
-      className = _ref.className,
-      onChange = _ref.onChange;
-  // Match routes
-  var history = useHistory();
-  var routePush = 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
-
+      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 : useParsedStory(valueWithTheme, {
+    withMedias: false
+  });
 
   var _ref2 = value || {},
       _ref2$components = _ref2.components,
       screens = _ref2$components === void 0 ? [] : _ref2$components;
 
-  var screenIndex = screens.findIndex(function (it) {
-    return it.id === screenId;
-  });
-  var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
-
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$1),
-      transitionName = _useFormTransition.name,
-      transitionTimeout = _useFormTransition.timeout;
-
-  var _useState = useState(false),
+  var _useState = useState(isCreateOpened),
       _useState2 = _slicedToArray(_useState, 2),
-      screenSettingsOpened = _useState2[0],
-      setScreenSettingsOpened = _useState2[1];
+      createModalOpened = _useState2[0],
+      setCreateModalOpened = _useState2[1];
 
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      deleteScreenModalOpened = _useState4[0],
-      setDeleteScreenModalOpened = _useState4[1];
+  var routes = useRoutes();
+  var push = useRoutePush();
+  var url = useUrlGenerator();
 
-  var _useState5 = useState({}),
-      _useState6 = _slicedToArray(_useState5, 2),
-      fieldForms = _useState6[0],
-      setFieldForms = _useState6[1];
+  var _useRouteParams = useRouteParams({
+    screenOnly: true
+  }),
+      _useRouteParams$scree = _useRouteParams.screen,
+      currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
 
-  var _useState7 = useState(null),
-      _useState8 = _slicedToArray(_useState7, 2),
-      fieldContext = _useState8[0],
-      setFieldContext = _useState8[1]; // Callbacks
+  var createScreenFromDefinition = 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;
+
+    var _ref4 = isString(definition) ? {
+      id: definition
+    } : definition,
+        newScreenType = _ref4.id;
 
+    var _ref5 = theme || {},
+        _ref5$components = _ref5.components,
+        themeComponents = _ref5$components === void 0 ? null : _ref5$components;
 
-  var gotoFieldForm = 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';
-    routePush(hasField ? fieldRoute : 'screen', {
-      screen: screenId,
-      field: field !== null ? field.split('.') : null,
-      form: formName !== null ? slug(formName) : null
+    var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
+      return it.type === newScreenType;
+    }) || null : null;
+    var newScreen = createScreen(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
     });
-    setFieldForms(_objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
-    setFieldContext(context);
-  }, [routePush, screenId, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
-  var closeFieldForm = useCallback(function (field) {
-    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;
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
 
-    if (pastUrl !== null) {
-      history.push(pastUrl);
-    }
+    var newValue = _objectSpread(_objectSpread({}, value), {}, {
+      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
+    });
 
-    setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
-      return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
-    }, {}));
-  }, [history, screenId, fieldForms, setFieldForms]);
-  var triggerOnChange = useCallback(function (newValue) {
     if (onChange !== null) {
       onChange(newValue);
     }
-  }, [onChange]);
-  var onScreenFormChange = useCallback(function (newScreenValue) {
-    triggerOnChange(updateScreen(value, newScreenValue));
-  }, [value, triggerOnChange]);
-  var onClickDuplicate = useCallback(function () {
-    triggerOnChange(duplicateScreen(value, screenId));
-    setScreenSettingsOpened(false);
-  }, [value, screenId, triggerOnChange, setScreenSettingsOpened]);
-  var onClickDelete = useCallback(function () {
-    setDeleteScreenModalOpened(true);
-    setScreenSettingsOpened(false);
-  }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
-  var onSettingsClick = useCallback(function () {
-    setScreenSettingsOpened(function (opened) {
-      return !opened;
+
+    return newScreen;
+  }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
+  var onOrderChange = useCallback(function (listItems) {
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
+      return id;
+    });
+    var screenProps = listItems.map(function (_ref8) {
+      var id = _ref8.id,
+          _ref8$props = _ref8.props,
+          props = _ref8$props === void 0 ? null : _ref8$props;
+      return {
+        id: id,
+        props: props
+      };
+    });
+    var hasScreenProps = (screenProps.filter(function (_ref9) {
+      var props = _ref9.props;
+      return props !== null;
+    }) || []).length > 0;
+
+    var _ref10 = value || {},
+        _ref10$components = _ref10.components,
+        currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
+
+    var currentIds = currentScreens.map(function (_ref11) {
+      var id = _ref11.id;
+      return id;
+    });
+    var sameOrder = listItems.reduce(function (same, _ref12, index) {
+      var id = _ref12.id;
+      return same && id === currentIds[index];
+    }, true);
+
+    if (!sameOrder || hasScreenProps) {
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: _toConsumableArray(currentScreens).sort(function (_ref13, _ref14) {
+          var idA = _ref13.id;
+          var idB = _ref14.id;
+          var indexA = ids.indexOf(idA);
+          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(_ref15, _excluded$1);
+
+          return _objectSpread(_objectSpread({
+            id: id
+          }, props), (_screenProps$find = screenProps.find(function (_ref16) {
+            var propsId = _ref16.id;
+            return propsId === id;
+          })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
+        })
+      });
+
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+    }
+  }, [value, onChange]);
+  var onClickScreenType = useCallback(function (definition) {
+    setCreateModalOpened(false);
+    var currentScreen = isTheme ? screens.find(function (_ref17) {
+      var type = _ref17.type;
+      return type === definition.id;
+    }) || null : null;
+
+    if (!isTheme || currentScreen === null) {
+      currentScreen = createScreenFromDefinition(definition);
+    }
+
+    push('screen', {
+      screen: currentScreen.id
     });
-  }, [setScreenSettingsOpened]);
-  var onDropdownClickOutside = useCallback(function () {
-    setScreenSettingsOpened(false);
-  }, [setScreenSettingsOpened]);
-  var onDeleteScreenConfirm = useCallback(function () {
-    triggerOnChange(deleteScreen(value, screenId));
-    setDeleteScreenModalOpened(false);
-  }, [value, triggerOnChange, screenId, setScreenSettingsOpened]);
-  var onDeleteScreenCancel = useCallback(function () {
-    setDeleteScreenModalOpened(false);
-  }, [setDeleteScreenModalOpened]);
-  var dropdownItems = [!isTheme ? {
-    id: 'duplicate',
-    type: 'button',
-    className: 'text-left text-info',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "IBjY5r",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Duplicate screen"
-      }]
-    }),
-    onClick: onClickDuplicate
-  } : null, {
-    id: 'delete',
-    type: 'button',
-    className: 'text-left text-danger',
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "hpiKce",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Delete screen"
-      }]
-    }),
-    onClick: onClickDelete
-  }].filter(function (it) {
-    return it !== null;
-  });
+    onClickScreen(currentScreen);
+  }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
+  var onClickAdd = useCallback(function () {
+    return setCreateModalOpened(true);
+  }, [setCreateModalOpened]);
+  var onCreateModalRequestClose = useCallback(function () {
+    return setCreateModalOpened(false);
+  }, [setCreateModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', className])
-  }, screenId !== null ? /*#__PURE__*/React.createElement(Navbar, {
+    className: classNames(['d-flex', 'flex-column', styles$7.container, className])
+  }, /*#__PURE__*/React.createElement(Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$1.navbar])
-  }, /*#__PURE__*/React.createElement(Breadcrumb, {
-    story: value,
-    url: url,
-    screenId: screenId,
-    field: fieldParams,
-    form: formParams,
-    className: "mr-auto"
-  }), fieldParams === null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SettingsButton, {
-    onClick: onSettingsClick
-  }), /*#__PURE__*/React.createElement(DropdownMenu, {
-    items: dropdownItems,
-    visible: screenSettingsOpened,
-    align: "right",
-    onClickOutside: onDropdownClickOutside
-  })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$1.content])
-  }, screen !== null ? /*#__PURE__*/React.createElement(CSSTransitionGroup, {
-    transitionName: transitionName,
-    transitionEnterTimeout: transitionTimeout,
-    transitionLeaveTimeout: transitionTimeout,
-    className: "w-100 flex-grow-1"
-  }, fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$1.panel]),
-    key: "field-".concat(fieldParams, "-").concat(formParams)
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen
-  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
-    name: fieldParams.replace(/\//g, '.'),
-    value: screen,
-    form: formParams,
-    className: styles$1.form,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    fieldContext: fieldContext,
-    onChange: onScreenFormChange
-  }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$1.panel]),
-    key: "screen-".concat(screen.id)
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen
-  }, /*#__PURE__*/React.createElement(ScreenForm, {
-    value: screen,
-    className: styles$1.form,
-    onChange: onScreenFormChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  })))) : /*#__PURE__*/React.createElement(Empty, {
-    className: "w-100 m-2"
+    className: classNames(['sticky-top', styles$7.navbar])
+  }, /*#__PURE__*/React.createElement("strong", {
+    className: "mb-0 mr-auto"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "QfpTKK",
+    id: "jf+4Hq",
     defaultMessage: [{
       "type": 0,
-      "value": "Select a screen..."
-    }],
-    decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
-    onConfirm: onDeleteScreenConfirm,
-    onCancel: onDeleteScreenCancel
+      "value": "Screens"
+    }]
+  })), /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    size: "sm",
+    onClick: onClickAdd,
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1 d-flex w-100 p-2"
+  }, /*#__PURE__*/React.createElement(Route, {
+    path: [routes.screen, routes.home],
+    render: function render(_ref18) {
+      var _ref18$match$params$s = _ref18.match.params.screen,
+          screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
+      return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
+        items: screens.map(function (it) {
+          return {
+            id: it.id,
+            screen: it,
+            href: url('screen', {
+              screen: it.id
+            }),
+            active: it.id === screenId
+          };
+        }),
+        isVertical: isVertical,
+        withPreview: true,
+        sortable: !isTree,
+        className: "w-100",
+        onClickItem: onClickScreen,
+        onOrderChange: onOrderChange,
+        isTree: isTree
+      }) : /*#__PURE__*/React.createElement(Empty, {
+        className: "flex-grow-1 p-2"
+      }, /*#__PURE__*/React.createElement(Button, {
+        theme: "primary",
+        onClick: onClickAdd
+      }, /*#__PURE__*/React.createElement(FormattedMessage, {
+        id: "JoWKee",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Create your first screen"
+        }]
+      })));
+    }
+  })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
+    selectedTypes: isTheme ? screens.map(function (_ref19) {
+      var type = _ref19.type;
+      return type;
+    }) : [],
+    onClickScreenType: onClickScreenType,
+    onRequestClose: onCreateModalRequestClose
   }) : null);
 };
 
-EditForm.propTypes = propTypes$2;
-EditForm.defaultProps = defaultProps$2;
-
-var styles = {"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"};
+EditorScreens.propTypes = propTypes$4;
+EditorScreens.defaultProps = defaultProps$4;
 
-var propTypes$1 = {
+var propTypes$3 = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   deviceScreens: PropTypes$1.deviceScreens,
   viewerTheme: PropTypes$1.viewerTheme,
@@ -1785,7 +2906,7 @@ var propTypes$1 = {
   onChange: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$1 = {
+var defaultProps$3 = {
   value: null,
   deviceScreens: getDeviceScreens(),
   viewerTheme: null,
@@ -1878,7 +2999,11 @@ var Editor = function Editor(_ref) {
     if (screenSize.screen) {
       setMobileView('preview');
     }
-  }, [screenSize.screen]);
+
+    push('screen', {
+      screen: clickedScreenId.current
+    });
+  }, [screenSize.screen, push]);
   var onPreviewScreenChange = useCallback(function (_ref4) {
     var newScreenId = _ref4.id;
     push('screen', {
@@ -1900,20 +3025,21 @@ var Editor = function Editor(_ref) {
       var cnt = item.parentNode.parentNode.parentNode;
       screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
     }
-  }, [screenId]);
+  }, [screenId]); // console.log('editor level value', value);
+
   return /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(PanelsProvider, null, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
+    className: classNames([styles$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$f["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$f.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React.createElement(Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles.top
+    className: styles$f.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
     size: "sm",
     theme: "secondary",
@@ -1946,9 +3072,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles.inner
+    className: styles$f.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.left, _defineProperty({}, styles.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames([styles$f.left, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React.createElement(EditorScreens, {
     value: story,
@@ -1958,28 +3084,29 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles.inner
+    className: styles$f.inner,
+    isTree: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.center, _defineProperty({}, styles.visible, !isMobile || mobileView === 'preview')])
+    className: classNames([styles$f.center, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React.createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles.preview,
+    className: styles$f.preview,
     onScreenChange: onPreviewScreenChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.right, _defineProperty({}, styles.visible, !isMobile || mobileView === 'form')])
+    className: classNames([styles$f.right, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React.createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles.inner
+    className: styles$f.inner
   }))), /*#__PURE__*/React.createElement(Modals, null)))));
 };
 
-Editor.propTypes = propTypes$1;
-Editor.defaultProps = defaultProps$1;
+Editor.propTypes = propTypes$3;
+Editor.defaultProps = defaultProps$3;
 
 var home = "/";
 var screen = "/:screen";
@@ -1990,6 +3117,101 @@ var defaultRoutes = {
   "screen.field.form": "/:screen/:field+/:form"
 };
 
+var routes = PropTypes.shape({
+  home: PropTypes.string.isRequired,
+  screen: PropTypes.string.isRequired,
+  'screen.field': PropTypes.string.isRequired,
+  'screen.field.form': PropTypes.string.isRequired
+});
+
+var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
+
+var propTypes$2 = {
+  name: PropTypes.string,
+  field: PropTypes$1.formField.isRequired,
+  value: PropTypes$1.component,
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.func
+};
+var defaultProps$2 = {
+  name: null,
+  value: null,
+  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;
+  var _field$type = field.type,
+      type = _field$type === void 0 ? null : _field$type;
+  var fieldsManager = useFieldsManager();
+
+  var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
+      _ref2$component = _ref2.component,
+      fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
+      settings = _ref2.settings;
+
+  var FieldComponent = useFieldComponent(fieldComponent);
+  var FieldsComponent = useFieldComponent('fields');
+  var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
+  var onSettingsChange = useCallback(function (newSettingsValue) {
+    var newValue = _objectSpread(_objectSpread({}, value), newSettingsValue);
+
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  }, [value, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement(SettingsComponent, {
+    name: name,
+    field: field,
+    fields: settings,
+    value: value,
+    onChange: onSettingsChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  })));
+};
+
+SettingsForm.propTypes = propTypes$2;
+SettingsForm.defaultProps = defaultProps$2;
+
+// eslint-disable-next-line import/prefer-default-export
+
+var FormsComponents = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Settings: SettingsForm
+});
+
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$1 = {
+  children: PropTypes.node
+};
+var defaultProps$1 = {
+  children: null
+};
+
+var FormsProvider = function FormsProvider(props) {
+  return /*#__PURE__*/React.createElement(ComponentsProvider, Object.assign({
+    namespace: FORMS_NAMESPACE,
+    components: FormsComponents
+  }, props));
+};
+
+FormsProvider.propTypes = propTypes$1;
+FormsProvider.defaultProps = defaultProps$1;
+
 var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries"];
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),