@micromag/editor 0.2.412 → 0.3.1

package/lib/index.js

@@ -15,11 +15,11 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var reactIntl = require('react-intl');
 var reactRouter = require('react-router');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactTransitionGroup = require('react-transition-group');
 var uuid = require('uuid');
 var isString = require('lodash/isString');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 require('lodash/isArray');
 require('lodash/get');
 require('lodash/set');
@@ -28,6 +28,7 @@ var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 var fields = require('@micromag/fields');
 var size = require('@folklore/size');
 var viewer = require('@micromag/viewer');
+var _toArray = require('@babel/runtime/helpers/toArray');
 var isFunction = require('lodash/isFunction');
 var reactSortablejs = require('react-sortablejs');
 var core$1 = require('@dnd-kit/core');
@@ -47,9 +48,10 @@ var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray)
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+var _toArray__default = /*#__PURE__*/_interopDefaultLegacy(_toArray);
 var isFunction__default = /*#__PURE__*/_interopDefaultLegacy(isFunction);
 var _createForOfIteratorHelper__default = /*#__PURE__*/_interopDefaultLegacy(_createForOfIteratorHelper);
 var orderBy__default = /*#__PURE__*/_interopDefaultLegacy(orderBy);
@@ -90,24 +92,110 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-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 styles$i = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
-var createScreen = function createScreen(definition) {
-  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+var useFormTransition = function useFormTransition(url, screenIndex, styles) {
+  var lastPageRef = React.useRef({
+    url: url,
+    screenIndex: screenIndex
+  });
+  var direction = React.useMemo(function () {
+    var _lastPageRef$current = lastPageRef.current,
+        lastScreenIndex = _lastPageRef$current.screenIndex,
+        lastUrl = _lastPageRef$current.url;
+    lastPageRef.current.url = url;
+    lastPageRef.current.screenIndex = screenIndex;
 
-  var _ref = isString__default["default"](definition) ? {
-    id: definition
-  } : definition,
-      id = _ref.id,
+    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 transitionClassNames = React.useMemo(function () {
+    var _classNames, _classNames2, _classNames3;
+
+    return {
+      enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
+      enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
+      exit: styles.exit || 'none',
+      exitActive: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, styles.exitActiveRight, direction === 'right'), _defineProperty__default["default"](_classNames3, styles.exitActiveLeft, direction === 'left'), _defineProperty__default["default"](_classNames3, styles.exitActiveTop, direction === 'top'), _defineProperty__default["default"](_classNames3, styles.exitActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
+    };
+  }, [direction, screenIndex]);
+  return {
+    direction: direction,
+    classNames: transitionClassNames,
+    timeout: direction === 'left' || direction === 'right' ? 300 : 10
+  };
+};
+
+var styles$h = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
+
+function getScreenFieldsWithStates(definition) {
+  var _ref = definition || {},
       _ref$fields = _ref.fields,
-      fields = _ref$fields === void 0 ? [] : _ref$fields;
+      screenFields = _ref$fields === void 0 ? [] : _ref$fields,
+      _ref$states = _ref.states,
+      states = _ref$states === void 0 ? null : _ref$states;
+
+  if (states === null) {
+    return screenFields;
+  }
+
+  return [].concat(_toConsumableArray__default["default"](states.reduce(function (statesFields, _ref2) {
+    var id = _ref2.id,
+        _ref2$fields = _ref2.fields,
+        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
+        _ref2$repeatable = _ref2.repeatable,
+        repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
+        _ref2$fieldName = _ref2.fieldName,
+        fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
+        label = _ref2.label;
+    return [].concat(_toConsumableArray__default["default"](statesFields), _toConsumableArray__default["default"](repeatable ? [{
+      type: 'items',
+      name: fieldName || id,
+      label: label,
+      stateId: id,
+      itemsField: {
+        label: label,
+        type: 'fields',
+        fields: fields
+      }
+    }] : []), _toConsumableArray__default["default"](!repeatable && fieldName !== null ? [{
+      type: 'fields',
+      name: fieldName,
+      stateId: id,
+      fields: fields
+    }] : []), _toConsumableArray__default["default"](!repeatable && fieldName === null ? fields.map(function (it) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
+        stateId: id
+      });
+    }) : []));
+  }, [])), _toConsumableArray__default["default"](screenFields));
+}
 
-  var defaultValueFields = fields.reduce(function (all, curr) {
-    var _ref2 = curr || {},
-        _ref2$name = _ref2.name,
-        name = _ref2$name === void 0 ? null : _ref2$name,
-        _ref2$defaultValue = _ref2.defaultValue,
-        defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
+var createScreen = function createScreen(definition) {
+  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var finalDefinition = isString__default["default"](definition) ? {
+    id: definition
+  } : definition;
+  var id = finalDefinition.id;
+  var screenFields = getScreenFieldsWithStates(finalDefinition);
+  var defaultValueFields = screenFields.reduce(function (all, curr) {
+    var _ref = curr || {},
+        _ref$name = _ref.name,
+        name = _ref$name === void 0 ? null : _ref$name,
+        _ref$defaultValue = _ref.defaultValue,
+        defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
 
     var newAll = _objectSpread__default["default"]({}, all);
 
@@ -124,13 +212,13 @@ var createScreen = function createScreen(definition) {
   });
 };
 
-var _excluded$b = ["components"];
+var _excluded$c = ["components"];
 
 var deleteScreen = function deleteScreen(story, screenId) {
   var _ref = story || {},
       _ref$components = _ref.components,
       components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$b);
+      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$c);
 
   return _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, {
     components: components.filter(function (_ref2) {
@@ -140,13 +228,13 @@ var deleteScreen = function deleteScreen(story, screenId) {
   });
 };
 
-var _excluded$a = ["components"];
+var _excluded$b = ["components"];
 
 var duplicateScreen = function duplicateScreen(story, screenId) {
   var _ref = story || {},
       _ref$components = _ref.components,
       components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$b);
 
   var screen = components.find(function (it) {
     return it.id === screenId;
@@ -158,7 +246,7 @@ var duplicateScreen = function duplicateScreen(story, screenId) {
   });
 };
 
-var _excluded$9 = ["components"];
+var _excluded$a = ["components"];
 
 var updateScreen = function updateScreen(story, newScreenValue) {
   var newScreenId = newScreenValue.id;
@@ -166,7 +254,7 @@ var updateScreen = function updateScreen(story, newScreenValue) {
   var _ref = story || {},
       _ref$components = _ref.components,
       components = _ref$components === void 0 ? [] : _ref$components,
-      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$9);
+      currentValue = _objectWithoutProperties__default["default"](_ref, _excluded$a);
 
   var index = components.findIndex(function (it) {
     return it.id === newScreenId;
@@ -195,78 +283,179 @@ var getFieldByName = function getFieldByName(fields, name) {
   }, null);
 };
 
-var useFormTransition = function useFormTransition(url, screenIndex, styles) {
-  var lastPageRef = React.useRef({
-    url: url,
-    screenIndex: screenIndex
-  });
-  var direction = React.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 = React.useMemo(function () {
-    var _classNames, _classNames2, _classNames3;
-
-    return {
-      enter: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles.enterRight, direction === 'right'), _defineProperty__default["default"](_classNames, styles.enterLeft, direction === 'left'), _defineProperty__default["default"](_classNames, styles.enterTop, direction === 'top'), _defineProperty__default["default"](_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
-      enterActive: classNames__default["default"]((_classNames2 = {}, _defineProperty__default["default"](_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty__default["default"](_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
-      leave: styles.leave || 'none',
-      leaveActive: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty__default["default"](_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty__default["default"](_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty__default["default"](_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
-    };
-  }, [direction, screenIndex]);
-  return {
-    direction: direction,
-    name: name,
-    timeout: direction === 'left' || direction === 'right' ? 300 : 10
-  };
-};
-
-var _excluded$8 = ["className"];
-var propTypes$n = {
+var _excluded$9 = ["className", "dots"];
+var propTypes$o = {
+  dots: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$n = {
+var defaultProps$o = {
+  dots: false,
   className: null
 };
 
 var SettingsButton = function SettingsButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+      dots = _ref.dots,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
 
   return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
     className: className,
     theme: "secondary",
     size: "sm",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faCogs
+      icon: dots ? freeSolidSvgIcons.faEllipsisV : freeSolidSvgIcons.faCogs
     })
   }, props));
 };
 
-SettingsButton.propTypes = propTypes$n;
-SettingsButton.defaultProps = defaultProps$n;
+SettingsButton.propTypes = propTypes$o;
+SettingsButton.defaultProps = defaultProps$o;
+
+var _excluded$8 = ["name", "form"];
+var propTypes$n = {
+  name: PropTypes__default["default"].string,
+  form: PropTypes__default["default"].string,
+  children: PropTypes__default["default"].node
+};
+var defaultProps$n = {
+  name: null,
+  form: null,
+  children: null
+};
+
+var FieldWithContexts = function FieldWithContexts(_ref) {
+  var name = _ref.name,
+      form = _ref.form,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
 
-var styles$e = {"container":"micromag-editor-menus-breadcrumb-container"};
+  // Get definitions
+  var definition = contexts.useScreenDefinition();
+  var _definition$states = definition.states,
+      states = _definition$states === void 0 ? null : _definition$states;
+  var screenFields = getScreenFieldsWithStates(definition); // const [stateId = null] = name.split('.');
+  // const currentState = states !== null ? states.find(({ id }) => id === stateId) || null : null;
+
+  var nameParts = name.split('.');
+
+  var _nameParts = _slicedToArray__default["default"](nameParts, 1),
+      _nameParts$ = _nameParts[0],
+      stateId = _nameParts$ === void 0 ? null : _nameParts$;
+
+  var currentState = states !== null ? states.find(function (_ref2) {
+    var id = _ref2.id;
+    return id === stateId;
+  }) || null : null;
+  var finalNameParts = nameParts;
+
+  var _ref3 = currentState || {},
+      _ref3$repeatable = _ref3.repeatable,
+      repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable,
+      _ref3$fieldName = _ref3.fieldName,
+      fieldName = _ref3$fieldName === void 0 ? null : _ref3$fieldName,
+      _ref3$fields = _ref3.fields,
+      stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
+
+  if (currentState !== null) {
+    finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](nameParts.slice(1))) : nameParts.slice(1);
+  }
+
+  var formComponents = contexts.useFormsComponents(); // if (currentState !== null && !repeatable && stateFieldName === null) {
+  //     return (
+  //         <div className="p-2">
+  //             <Fields fields={stateFields} {...props} />
+  //         </div>
+  //     );
+  // }
+  // const finalFields =
+  //     repeatable || stateFieldName !== null
+  //         ? [{
+  //               name: stateFieldName || stateId,
+  //               itemsField: {
+  //                   type: 'fields',
+  //                   fields: stateFields,
+  //                   className: 'p-2'
+  //               },
+  //           }]
+  // : fields;
+
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]({
+      'p-2': form === null
+    })
+  }, finalNameParts.length > 0 ? /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
+    fields: screenFields,
+    formComponents: formComponents,
+    name: finalNameParts.join('.'),
+    form: form
+  }, props)) : /*#__PURE__*/React__default["default"].createElement(fields.Fields, Object.assign({
+    fields: stateFields
+  }, props)));
+};
+
+FieldWithContexts.propTypes = propTypes$n;
+FieldWithContexts.defaultProps = defaultProps$n;
+
+var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
 var propTypes$m = {
+  value: core.PropTypes.component,
+  className: PropTypes__default["default"].string,
+  gotoFieldForm: PropTypes__default["default"].func.isRequired,
+  closeFieldForm: PropTypes__default["default"].func.isRequired,
+  onChange: PropTypes__default["default"].func // onClickDelete: PropTypes.func,
+
+};
+var defaultProps$m = {
+  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 = contexts.useScreenDefinition(),
+      _useScreenDefinition$ = _useScreenDefinition.fields,
+      fields$1 = _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__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$g.container, _defineProperty__default["default"]({}, className, className)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$g.inner
+  }, /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
+    fields: fields$1,
+    value: value,
+    onChange: onChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  })));
+};
+
+ScreenForm.propTypes = propTypes$m;
+ScreenForm.defaultProps = defaultProps$m;
+
+var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
+
+var propTypes$l = {
   story: core.PropTypes.story,
   screenId: PropTypes__default["default"].string,
   field: PropTypes__default["default"].string,
@@ -274,7 +463,7 @@ var propTypes$m = {
   url: PropTypes__default["default"].string.isRequired,
   className: PropTypes__default["default"].string
 };
-var defaultProps$m = {
+var defaultProps$l = {
   story: null,
   screenId: null,
   field: null,
@@ -298,44 +487,87 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var history = reactRouter.useHistory();
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager();
-  var items = React.useMemo(function () {
+  var route = contexts.useUrlGenerator();
+
+  var _useMemo = React.useMemo(function () {
     var screenIndex = screens.findIndex(function (it) {
       return it.id === screenId;
     });
 
     if (!screens[screenIndex]) {
-      return [];
+      return {};
     }
 
     var type = screens[screenIndex].type;
+    var definition = screensManager.getDefinition(type);
+    var states = definition.states;
+    return {
+      fields: [].concat(_toConsumableArray__default["default"](getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]),
+      states: states
+    };
+  }, [screens, screenId, screensManager, intl]),
+      _useMemo$fields = _useMemo.fields,
+      screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
+      _useMemo$states = _useMemo.states,
+      screenStates = _useMemo$states === void 0 ? null : _useMemo$states;
+
+  var items = React.useMemo(function () {
     var fieldItems = [];
+    var currentState = null;
 
     if (field !== null) {
-      var _screensManager$getDe = screensManager.getDefinition(type),
-          _screensManager$getDe2 = _screensManager$getDe.fields,
-          screenFields = _screensManager$getDe2 === void 0 ? [] : _screensManager$getDe2;
+      var fieldPath = field.split('/'); // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
+
+      var _fieldPath = _slicedToArray__default["default"](fieldPath, 1),
+          _fieldPath$ = _fieldPath[0],
+          stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
+
+      currentState = screenStates !== null ? screenStates.find(function (_ref3) {
+        var id = _ref3.id;
+        return id === stateId;
+      }) || null : null;
+      var finalFieldPath = fieldPath;
+
+      if (currentState !== null) {
+        var _ref4 = currentState || {},
+            _ref4$repeatable = _ref4.repeatable,
+            repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable,
+            _ref4$fieldName = _ref4.fieldName,
+            fieldName = _ref4$fieldName === void 0 ? null : _ref4$fieldName;
+
+        finalFieldPath = (repeatable || fieldName !== null) && fieldPath.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](fieldPath.slice(1))) : fieldPath.slice(1);
+      }
 
-      var fields = [].concat(_toConsumableArray__default["default"](screenFields), [utils.getScreenExtraField(intl)]);
-      var fieldPath = field.split('/');
-      var lastKeyIndex = fieldPath.length - 1;
+      var lastKeyIndex = finalFieldPath.length - 1;
       var parentItem = null;
-      fieldPath.reduce(function (currentFields, key, keyIndex) {
+      finalFieldPath.reduce(function (currentFields, key, keyIndex) {
         var _currentFields$type = currentFields.type,
-            fieldType = _currentFields$type === void 0 ? null : _currentFields$type;
+            fieldType = _currentFields$type === void 0 ? null : _currentFields$type,
+            _currentFields$fields = currentFields.fields,
+            currentSubFields = _currentFields$fields === void 0 ? null : _currentFields$fields,
+            _currentFields$itemsF = currentFields.itemsField,
+            currentItemsField = _currentFields$itemsF === void 0 ? null : _currentFields$itemsF;
         var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
         var _fieldsDef$fields = fieldsDef.fields,
-            subFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
+            defSubFields = _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;
+            defItemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
+        var itemsField = currentItemsField || defItemsField;
+        var subFields = currentSubFields || defSubFields;
         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 pathPrefix = route('screen.field', {
+          screen: screenId,
+          field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray__default["default"](finalFieldPath.slice(0, keyIndex + 1))).filter(function (it) {
+            return it !== null;
+          })
+        });
         var pathSuffix = isLastIndex && form !== null ? "/".concat(form) : '';
         var addNewItem = isLastIndex || isListItems;
         var itemPath = "".concat(pathPrefix).concat(pathSuffix);
@@ -348,7 +580,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
 
           if (parentItem !== null) {
             fieldItems.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, parentItem), {}, {
-              url: "/".concat(screenId, "/").concat(fieldPath.slice(0, keyIndex).join('/'), "/settings")
+              url: route('screen.field.form', {
+                screen: screenId,
+                field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray__default["default"](finalFieldPath.slice(0, keyIndex))).filter(function (it) {
+                  return it !== null;
+                }),
+                form: 'settings'
+              })
             }));
           }
         } else if (isListItems) {
@@ -358,9 +596,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
         var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
         var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
 
-        var _ref3 = parentItem || {},
-            _ref3$label = _ref3.label,
-            parentItemLabel = _ref3$label === void 0 ? null : _ref3$label;
+        var _ref5 = parentItem || {},
+            _ref5$label = _ref5.label,
+            parentItemLabel = _ref5$label === void 0 ? null : _ref5$label;
 
         var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
         var item = {
@@ -376,21 +614,26 @@ var Breadcrumb = function Breadcrumb(_ref) {
         parentItem = item;
         return nextFields;
       }, {
-        fields: fields
+        fields: screenFields
       });
     }
 
-    var finalItems = [{
-      label: intl.formatMessage({
+    var finalItems = [currentState === null || (currentState.repeatable || false) === false ? {
+      label: currentState !== null ? currentState.label : intl.formatMessage({
         id: "AHvHaY",
         defaultMessage: [{
           "type": 0,
           "value": "Parameters"
         }]
       }),
-      url: "/".concat(screenId),
+      url: currentState !== null ? route('screen.field', {
+        screen: screenId,
+        field: currentState.id
+      }) : route('screen', {
+        screen: screenId
+      }),
       active: false
-    }].concat(fieldItems).filter(function (it) {
+    } : null].concat(fieldItems).filter(function (it) {
       return it !== null;
     });
     var lastItemsIndex = finalItems.length - 1;
@@ -400,7 +643,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         active: true
       }) : it;
     });
-  }, [intl, screens, screenId, field, form, url, screensManager, fieldsManager]);
+  }, [intl, route, screenId, field, form, url, screenFields, screenStates, fieldsManager]);
   var itemsLength = items.length;
   var onClickBack = React.useCallback(function () {
     history.push(items[itemsLength - 2].url);
@@ -408,110 +651,27 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var withBack = itemsLength > 1;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, withBack ? /*#__PURE__*/React__default["default"].createElement(components.BackButton, {
     onClick: onClickBack,
-    className: "mr-2"
+    className: "me-2 py-0"
   }) : null, /*#__PURE__*/React__default["default"].createElement(components.Breadcrumb, {
     items: items,
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames__default["default"]([styles$e.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$f.container, 'text-truncate', _defineProperty__default["default"]({}, 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: core.PropTypes.component,
-  className: PropTypes__default["default"].string,
-  gotoFieldForm: PropTypes__default["default"].func.isRequired,
-  closeFieldForm: PropTypes__default["default"].func.isRequired,
-  onChange: PropTypes__default["default"].func // 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 = contexts.useScreenDefinition(),
-      _useScreenDefinition$ = _useScreenDefinition.fields,
-      fields$1 = _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]);
-
+Breadcrumb.propTypes = propTypes$l;
+Breadcrumb.defaultProps = defaultProps$l;
 
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.inner
-  }, /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
-    fields: fields$1,
-    value: value,
-    onChange: onChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  })));
-};
+var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
-ScreenForm.propTypes = propTypes$l;
-ScreenForm.defaultProps = defaultProps$l;
-
-/* eslint-disable react/jsx-props-no-spreading */
 var propTypes$k = {
-  children: PropTypes__default["default"].node
-};
-var defaultProps$k = {
-  children: null
-};
-
-var FieldWithContexts = function FieldWithContexts(props) {
-  // Get definitions
-  var _useScreenDefinition = contexts.useScreenDefinition(),
-      _useScreenDefinition$ = _useScreenDefinition.fields,
-      fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$; // To use a specific form component
-
-
-  var formComponents = contexts.useFormsComponents();
-  return /*#__PURE__*/React__default["default"].createElement(components.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__default["default"].string,
   onConfirm: PropTypes__default["default"].func,
   onCancel: PropTypes__default["default"].func
 };
-var defaultProps$j = {
+var defaultProps$k = {
   className: null,
   onConfirm: null,
   onCancel: null
@@ -529,10 +689,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$c.description
+    className: styles$e.description
   }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -540,10 +700,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$c.actions
+    className: styles$e.actions
   }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
     onClick: onCancel,
-    className: "btn-outline-secondary mr-2"
+    className: "btn-outline-secondary me-2"
   }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "0GT0SI",
     defaultMessage: [{
@@ -563,18 +723,16 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
   }))));
 };
 
-DeleteScreenModal.propTypes = propTypes$j;
-DeleteScreenModal.defaultProps = defaultProps$j;
-
-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"};
+DeleteScreenModal.propTypes = propTypes$k;
+DeleteScreenModal.defaultProps = defaultProps$k;
 
-var propTypes$i = {
+var propTypes$j = {
   value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   isTheme: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func
 };
-var defaultProps$i = {
+var defaultProps$j = {
   value: null,
   isTheme: false,
   className: null,
@@ -607,10 +765,18 @@ var EditForm = function EditForm(_ref) {
   var screenIndex = screens.findIndex(function (it) {
     return it.id === screenId;
   });
-  var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
+  var screen = screenIndex !== -1 ? screens[screenIndex] : null;
+  var screensManager = contexts.useScreensManager();
+  var screenFields = React.useMemo(function () {
+    var _ref3 = screen || {},
+        type = _ref3.type;
 
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$b),
-      transitionName = _useFormTransition.name,
+    var definition = type !== null ? screensManager.getDefinition(type) : null;
+    return definition != null ? getScreenFieldsWithStates(definition) : [];
+  }, [screensManager, screen]); // Get transition value
+
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$h),
+      transitionClassNames = _useFormTransition.classNames,
       transitionTimeout = _useFormTransition.timeout;
 
   var _useState = React.useState(false),
@@ -640,14 +806,29 @@ var EditForm = function EditForm(_ref) {
     var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
     var hasField = field !== null;
     var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
+
+    var _ref4 = field !== null ? field.split('.') : [],
+        _ref5 = _slicedToArray__default["default"](_ref4, 1),
+        _ref5$ = _ref5[0],
+        rootFieldName = _ref5$ === void 0 ? null : _ref5$;
+
+    var _ref6 = (rootFieldName !== null ? screenFields.find(function (_ref7) {
+      var name = _ref7.name;
+      return name === rootFieldName;
+    }) || null : null) || {},
+        _ref6$stateId = _ref6.stateId,
+        stateId = _ref6$stateId === void 0 ? null : _ref6$stateId;
+
     routePush(hasField ? fieldRoute : 'screen', {
       screen: screenId,
-      field: field !== null ? field.split('.') : null,
+      field: field !== null ? [stateId].concat(_toConsumableArray__default["default"](field.split('.'))).filter(function (it) {
+        return it !== null;
+      }) : null,
       form: formName !== null ? utils.slug(formName) : null
     });
     setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
     setFieldContext(context);
-  }, [routePush, screenId, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
+  }, [routePush, screenId, screenFields, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
   var closeFieldForm = React.useCallback(function (field) {
     var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
@@ -695,7 +876,6 @@ var EditForm = function EditForm(_ref) {
   var dropdownItems = [!isTheme ? {
     id: 'duplicate',
     type: 'button',
-    className: 'text-left text-info',
     label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "IBjY5r",
       defaultMessage: [{
@@ -707,7 +887,6 @@ var EditForm = function EditForm(_ref) {
   } : null, {
     id: 'delete',
     type: 'button',
-    className: 'text-left text-danger',
     label: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "hpiKce",
       defaultMessage: [{
@@ -725,54 +904,67 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
+    className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$h.navbar])
   }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
     story: value,
     url: url,
     screenId: screenId,
     field: fieldParams,
     form: formParams,
-    className: "mr-auto"
-  }), fieldParams === null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SettingsButton, {
-    onClick: onSettingsClick
+    className: "me-auto"
+  }), fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React__default["default"].createElement(SettingsButton, {
+    onClick: onSettingsClick,
+    dots: true,
+    className: "py-0",
+    theme: "default"
   }), /*#__PURE__*/React__default["default"].createElement(components.DropdownMenu, {
+    align: "end",
     items: dropdownItems,
     visible: screenSettingsOpened,
-    align: "right",
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
-  }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransitionGroup, {
-    transitionName: transitionName,
-    transitionEnterTimeout: transitionTimeout,
-    transitionLeaveTimeout: transitionTimeout,
-    className: "w-100 flex-grow-1"
-  }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$b.panel]),
+    className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$h.content])
+  }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
+    className: "w-100 flex-grow-1",
+    childFactory: function childFactory(child) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        classNames: transitionClassNames
+      });
+    }
+  }, fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+    timeout: transitionTimeout,
     key: "field-".concat(fieldParams, "-").concat(formParams)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"](['w-100', styles$h.panel])
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
-    className: styles$b.form,
+    className: styles$h.form,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
     onChange: onScreenFormChange
-  }))) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$b.panel]),
+  })))) : /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+    classNames: transitionClassNames,
+    timeout: transitionTimeout,
+    key: "screen-".concat(screen.id)
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"](['w-100', styles$h.panel]),
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
     value: screen,
-    className: styles$b.form,
+    className: styles$h.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
-  })))) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
+  }))))) : /*#__PURE__*/React__default["default"].createElement(components.Empty, {
     className: "w-100 m-2"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "QfpTKK",
@@ -787,8 +979,25 @@ var EditForm = function EditForm(_ref) {
   }) : null);
 };
 
-EditForm.propTypes = propTypes$i;
-EditForm.defaultProps = defaultProps$i;
+EditForm.propTypes = propTypes$j;
+EditForm.defaultProps = defaultProps$j;
+
+function useScreenStates(screen) {
+  var _ref = screen || {},
+      type = _ref.type;
+
+  var screensManager = contexts.useScreensManager();
+  var states = React.useMemo(function () {
+    var definition = screensManager.getDefinition(type) || null;
+
+    var _ref2 = definition || {},
+        _ref2$states = _ref2.states,
+        screenStates = _ref2$states === void 0 ? null : _ref2$states;
+
+    return screenStates;
+  }, [screensManager, type]);
+  return states;
+}
 
 var _excluded$7 = ["components"];
 
@@ -810,14 +1019,16 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
-var styles$a = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+var styles$d = {"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"};
+
+var styles$c = {"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$h = {
+var propTypes$i = {
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$h = {
+var defaultProps$i = {
   color: 'currentColor',
   className: null
 };
@@ -842,15 +1053,15 @@ var DesktopIcon = function DesktopIcon(_ref) {
   }));
 };
 
-DesktopIcon.propTypes = propTypes$h;
-DesktopIcon.defaultProps = defaultProps$h;
+DesktopIcon.propTypes = propTypes$i;
+DesktopIcon.defaultProps = defaultProps$i;
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
-var propTypes$g = {
+var propTypes$h = {
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$g = {
+var defaultProps$h = {
   color: 'currentColor',
   className: null
 };
@@ -875,8 +1086,8 @@ var MobileIcon = function MobileIcon(_ref) {
   }));
 };
 
-MobileIcon.propTypes = propTypes$g;
-MobileIcon.defaultProps = defaultProps$g;
+MobileIcon.propTypes = propTypes$h;
+MobileIcon.defaultProps = defaultProps$h;
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -884,78 +1095,418 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$9 = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$b = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
-var propTypes$f = {
+var propTypes$g = {
   device: PropTypes__default["default"].string.isRequired,
   iconComponents: core.PropTypes.components,
   className: PropTypes__default["default"].string
 };
-var defaultProps$f = {
+var defaultProps$g = {
   iconComponents: DeviceIcons,
   className: null
 };
 
-var DeviceButton = function DeviceButton(_ref) {
-  var device = _ref.device,
-      className = _ref.className,
-      iconComponents = _ref.iconComponents,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+var DeviceButton = function DeviceButton(_ref) {
+  var device = _ref.device,
+      className = _ref.className,
+      iconComponents = _ref.iconComponents,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+
+  var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
+  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
+    className: styles$b.icon
+  }));
+};
+
+DeviceButton.propTypes = propTypes$g;
+DeviceButton.defaultProps = defaultProps$g;
+
+var _excluded$5 = ["id"];
+var propTypes$f = {
+  items: core.PropTypes.menuItems,
+  className: PropTypes__default["default"].string,
+  onClickItem: PropTypes__default["default"].func
+};
+var defaultProps$f = {
+  items: [],
+  className: null,
+  onClickItem: null
+};
+
+var DevicesMenu = function DevicesMenu(_ref) {
+  var items = _ref.items,
+      className = _ref.className,
+      onClickItem = _ref.onClickItem;
+  return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
+    items: items,
+    theme: "outline-secondary",
+    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    renderItemButton: function renderItemButton(item, index, props) {
+      var id = item.id,
+          itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
+
+      return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
+        device: id
+      }, props, itemProps, {
+        className: styles$c.button,
+        onClick: function onClick(e) {
+          return onClickItem !== null ? onClickItem(e, item, index) : null;
+        }
+      }));
+    }
+  });
+};
+
+DevicesMenu.propTypes = propTypes$f;
+DevicesMenu.defaultProps = defaultProps$f;
+
+var styles$a = {"button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
+
+var styles$9 = {"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","frame":"micromag-editor-buttons-screen-with-preview-frame"};
+
+var styles$8 = {"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$e = {
+  active: PropTypes__default["default"].bool,
+  id: PropTypes__default["default"].string,
+  href: PropTypes__default["default"].string,
+  label: core.PropTypes.label,
+  icon: PropTypes__default["default"].node,
+  title: PropTypes__default["default"].string,
+  onClick: PropTypes__default["default"].func,
+  children: PropTypes__default["default"].node,
+  refButton: PropTypes__default["default"].shape({
+    current: PropTypes__default["default"].any // eslint-disable-line
+
+  }),
+  className: PropTypes__default["default"].string
+};
+var defaultProps$e = {
+  active: false,
+  id: null,
+  href: null,
+  label: null,
+  icon: null,
+  title: null,
+  onClick: null,
+  children: null,
+  refButton: null,
+  className: null
+};
+
+var ScreenButton = function ScreenButton(_ref) {
+  var _ref2;
+
+  var active = _ref.active,
+      id = _ref.id,
+      href = _ref.href,
+      className = _ref.className,
+      label = _ref.label,
+      icon = _ref.icon,
+      children = _ref.children,
+      title = _ref.title,
+      onClick = _ref.onClick,
+      refButton = _ref.refButton;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$8.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$8.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+  }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.screen
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.inner
+  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.icon
+  }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.label
+  }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: styles$8.button,
+    withoutStyle: true,
+    id: id,
+    href: href,
+    title: title,
+    onClick: onClick,
+    refButton: refButton
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: classNames__default["default"]([styles$8.border, 'rounded'])
+  })));
+};
+
+ScreenButton.propTypes = propTypes$e;
+ScreenButton.defaultProps = defaultProps$e;
+var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
+  return /*#__PURE__*/React__default["default"].createElement(ScreenButton, Object.assign({}, props, {
+    refButton: ref
+  }));
+});
+
+var propTypes$d = {
+  screen: core.PropTypes.screenComponent,
+  screenState: PropTypes__default["default"].string,
+  index: PropTypes__default["default"].number.isRequired,
+  href: PropTypes__default["default"].string,
+  title: PropTypes__default["default"].string,
+  active: PropTypes__default["default"].bool,
+  previewWidth: PropTypes__default["default"].number,
+  previewHeight: PropTypes__default["default"].number,
+  withPreview: PropTypes__default["default"].bool,
+  withPlaceholder: PropTypes__default["default"].bool,
+  onClick: PropTypes__default["default"].func,
+  onClickItem: PropTypes__default["default"].func,
+  className: PropTypes__default["default"].string
+};
+var defaultProps$d = {
+  screen: null,
+  screenState: null,
+  title: null,
+  href: null,
+  active: false,
+  previewWidth: 320,
+  previewHeight: 480,
+  withPreview: true,
+  withPlaceholder: false,
+  onClick: null,
+  onClickItem: null,
+  className: null
+};
+
+var ScreenWithPreview = function ScreenWithPreview(_ref) {
+  var _classNames;
+
+  var screen = _ref.screen,
+      screenState = _ref.screenState,
+      index = _ref.index,
+      title = _ref.title,
+      href = _ref.href,
+      active = _ref.active,
+      className = _ref.className,
+      previewWidth = _ref.previewWidth,
+      previewHeight = _ref.previewHeight,
+      _onClick = _ref.onClick,
+      onClickItem = _ref.onClickItem,
+      withPreview = _ref.withPreview,
+      withPlaceholder = _ref.withPlaceholder;
+  var intl = reactIntl.useIntl();
+
+  var _useResizeObserver = hooks.useResizeObserver(),
+      refResize = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _useMemo = React.useMemo(function () {
+    var _ref2 = contentRect || {},
+        _ref2$width = _ref2.width,
+        itemWidth = _ref2$width === void 0 ? 0 : _ref2$width;
 
-  var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
-  return /*#__PURE__*/React__default["default"].createElement(components.Button, Object.assign({
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, props), /*#__PURE__*/React__default["default"].createElement(DeviceIcon, {
-    className: styles$9.icon
-  }));
+    var ratio = 3 / 4;
+    var finalWidth = previewWidth;
+    var finalHeight = previewHeight !== null ? previewHeight : previewWidth * ratio;
+    var previewScale = itemWidth / previewWidth;
+    return {
+      width: itemWidth,
+      height: finalHeight * previewScale,
+      screenWidth: finalWidth,
+      screenHeight: finalHeight,
+      scale: previewScale
+    };
+  }, [withPlaceholder, previewWidth, previewHeight, contentRect]),
+      width = _useMemo.width,
+      height = _useMemo.height,
+      screenWidth = _useMemo.screenWidth,
+      screenHeight = _useMemo.screenHeight,
+      scale = _useMemo.scale;
+
+  var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
+  return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
+    href: href,
+    ref: refResize,
+    active: active,
+    className: classNames__default["default"]([styles$9.button, _defineProperty__default["default"]({}, className, className !== null)]),
+    title: utils.isMessage(title) ? intl.formatMessage(title) : null,
+    onClick: function onClick() {
+      if (_onClick !== null) {
+        _onClick(screen, index);
+      }
+
+      if (onClickItem !== null) {
+        onClickItem(screen, index);
+      }
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$9.frame,
+    style: {
+      width: width,
+      height: height
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]((_classNames = {}, _defineProperty__default["default"](_classNames, styles$9.preview, withPreview && !withPlaceholder), _defineProperty__default["default"](_classNames, styles$9.placeholder, withPlaceholder && !withPreview), _classNames)),
+    style: {
+      width: withPlaceholder ? width : screenWidth,
+      height: withPlaceholder ? height : screenHeight,
+      transform: withPlaceholder ? null : "scale(".concat(scale, ")")
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, {
+    screen: screen,
+    screenState: screenState,
+    width: withPlaceholder ? width : screenWidth,
+    height: withPlaceholder ? height : screenHeight,
+    className: styles$9.screen
+  }))));
 };
 
-DeviceButton.propTypes = propTypes$f;
-DeviceButton.defaultProps = defaultProps$f;
+ScreenWithPreview.propTypes = propTypes$d;
+ScreenWithPreview.defaultProps = defaultProps$d;
 
-var _excluded$5 = ["id"];
-var propTypes$e = {
-  items: core.PropTypes.menuItems,
+var propTypes$c = {
+  screen: core.PropTypes.screen.isRequired,
+  screenState: PropTypes__default["default"].string,
+  value: core.PropTypes.story.isRequired,
   className: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func
+  onChange: PropTypes__default["default"].func
 };
-var defaultProps$e = {
-  items: [],
+var defaultProps$c = {
+  screenState: null,
   className: null,
-  onClickItem: null
+  onChange: null
 };
 
-var DevicesMenu = function DevicesMenu(_ref) {
-  var items = _ref.items,
+function ScreenStates(_ref) {
+  var screen = _ref.screen,
+      value = _ref.value,
       className = _ref.className,
-      onClickItem = _ref.onClickItem;
-  return /*#__PURE__*/React__default["default"].createElement(components.Tabs, {
-    items: items,
-    theme: "outline-secondary",
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    renderItemButton: function renderItemButton(item, index, props) {
-      var id = item.id,
-          itemProps = _objectWithoutProperties__default["default"](item, _excluded$5);
+      onChange = _ref.onChange;
+  var url = contexts.useUrlGenerator();
+  var push = contexts.useRoutePush();
 
-      return /*#__PURE__*/React__default["default"].createElement(DeviceButton, Object.assign({
-        device: id
-      }, props, itemProps, {
+  var _useRouteParams = useRouteParams(),
+      _useRouteParams$scree = _useRouteParams.screen,
+      screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+      _useRouteParams$field = _useRouteParams.field,
+      field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
+
+  var states = useScreenStates(screen);
+
+  var _ref2 = field !== null ? field.split('/') : [],
+      _ref3 = _toArray__default["default"](_ref2),
+      _ref3$ = _ref3[0],
+      stateParam = _ref3$ === void 0 ? null : _ref3$,
+      stateIndexes = _ref3.slice(1);
+
+  var stateIndex = stateIndexes.find(function (it) {
+    return it.match(/^[0-9]+$/) !== null;
+  }) || null;
+  var currentState = stateParam !== null && states.findIndex(function (_ref4) {
+    var id = _ref4.id;
+    return id === stateParam;
+  }) !== -1 ? stateParam : null;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "d-flex align-items-end flex-wrap m-n1"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "p-1 align-self-stretch d-flex flex-column"
+  }, /*#__PURE__*/React__default["default"].createElement("h6", {
+    className: classNames__default["default"](['fw-normal', 'invisible', styles$a.title])
+  }, "Settings"), /*#__PURE__*/React__default["default"].createElement(components.Button, {
+    className: classNames__default["default"]([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    theme: screenParam !== null && field === null ? 'primary' : 'secondary',
+    outline: screenParam === null || field !== null,
+    size: "lg",
+    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: freeSolidSvgIcons.faCogs
+    }),
+    href: url('screen', {
+      screen: screen.id
+    })
+  })), states.map(function (state) {
+    var id = state.id,
+        _state$label = state.label,
+        label = _state$label === void 0 ? null : _state$label,
+        _state$repeatable = state.repeatable,
+        repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
+        _state$fieldName = state.fieldName,
+        fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
+    var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
+
+    var onClickAdd = function onClickAdd() {
+      var _ref6 = value || {},
+          _ref6$components = _ref6.components,
+          currentComponentsValue = _ref6$components === void 0 ? [] : _ref6$components;
+
+      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref7) {
+        var screenId = _ref7.id;
+        return screen.id === screenId;
+      });
+      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+      var currentFieldValue = currentScreenValue[fieldName || id] || [];
+
+      var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
+        components: [].concat(_toConsumableArray__default["default"](currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, currentScreenValue), {}, _defineProperty__default["default"]({}, fieldName || id, [].concat(_toConsumableArray__default["default"](currentFieldValue), [{}])))], _toConsumableArray__default["default"](currentComponentsValue.slice(currentScreenIndex + 1)))
+      });
+
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+
+      push('screen.field', {
+        screen: screen.id,
+        field: [id, currentFieldValue.length]
+      });
+    };
+
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "p-1 align-self-stretch d-flex flex-column"
+    }, /*#__PURE__*/React__default["default"].createElement("h6", {
+      className: classNames__default["default"](['fw-normal', 'text-muted', styles$a.title])
+    }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React__default["default"].createElement("ul", {
+      className: "d-flex list-unstyled flex-wrap m-n1 flex-grow-1"
+    }, repeatableItems.map(function (item, index) {
+      return /*#__PURE__*/React__default["default"].createElement("li", {
+        className: "p-1"
+      }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
+        screen: screen,
+        screenState: "".concat(id, ".").concat(index),
         className: styles$a.button,
-        onClick: function onClick(e) {
-          return onClickItem !== null ? onClickItem(e, item, index) : null;
-        }
+        active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
+        href: url('screen.field', {
+          screen: screen.id,
+          field: [id, index]
+        })
       }));
-    }
-  });
-};
-
-DevicesMenu.propTypes = propTypes$e;
-DevicesMenu.defaultProps = defaultProps$e;
+    }), /*#__PURE__*/React__default["default"].createElement("li", {
+      className: "p-1"
+    }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
+      className: classNames__default["default"]([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      theme: "secondary",
+      outline: true,
+      size: "lg",
+      icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+        icon: freeSolidSvgIcons.faPlus
+      }),
+      onClick: onClickAdd
+    }))) : /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
+      screen: screen,
+      screenState: id,
+      className: styles$a.button,
+      active: id === currentState,
+      href: url('screen.field', {
+        screen: screen.id,
+        field: id
+      }) // onClick={() => {
+      //     if (onStateChange !== null) {
+      //         onStateChange(id);
+      //     }
+      // }}
+
+    }));
+  })));
+}
 
-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"};
+ScreenStates.propTypes = propTypes$c;
+ScreenStates.defaultProps = defaultProps$c;
 
-var propTypes$d = {
+var propTypes$b = {
   value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
   devices: core.PropTypes.devices,
   device: PropTypes__default["default"].string,
@@ -963,9 +1514,10 @@ var propTypes$d = {
   isTheme: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   onScreenChange: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func,
   withoutDevicesSizes: PropTypes__default["default"].bool
 };
-var defaultProps$d = {
+var defaultProps$b = {
   value: null,
   devices: [{
     id: 'mobile',
@@ -976,16 +1528,17 @@ var defaultProps$d = {
     width: 1200,
     height: 900
   }],
-  device: null,
+  device: 'mobile',
   viewerTheme: null,
   isTheme: false,
   className: null,
   onScreenChange: null,
-  withoutDevicesSizes: false
+  onChange: null,
+  withoutDevicesSizes: true
 };
 
 var EditorPreview = function EditorPreview(_ref) {
-  var _ref3;
+  var _ref9;
 
   var value = _ref.value,
       viewerTheme = _ref.viewerTheme,
@@ -994,8 +1547,14 @@ var EditorPreview = function EditorPreview(_ref) {
       initialDevice = _ref.device,
       className = _ref.className,
       onScreenChange = _ref.onScreenChange,
+      onChange = _ref.onChange,
       withoutDevicesSizes = _ref.withoutDevicesSizes;
-  var routes = contexts.useRoutes();
+
+  var _useRouteParams = useRouteParams(),
+      _useRouteParams$scree = _useRouteParams.screen,
+      screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+      _useRouteParams$field = _useRouteParams.field,
+      fieldParam = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
 
   var _useScreenSize = contexts.useScreenSize(),
       _useScreenSize$screen = _useScreenSize.screen,
@@ -1029,7 +1588,7 @@ var EditorPreview = function EditorPreview(_ref) {
       contentRect = _useResizeObserver.entry.contentRect;
 
   var previewStyle = React.useMemo(function () {
-    if (withoutDevicesSizes) {
+    if (withoutDevicesSizes && initialDevice === null) {
       return {};
     }
 
@@ -1053,215 +1612,90 @@ var EditorPreview = function EditorPreview(_ref) {
       height: maxHeight,
       transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
     };
-  }, [device, contentRect, screen, withoutDevicesSizes]);
+  }, [device, contentRect, screen, withoutDevicesSizes, initialDevice]);
+  var currentScreen = React.useMemo(function () {
+    var _ref3 = valueParsed || {},
+        _ref3$components = _ref3.components,
+        components = _ref3$components === void 0 ? [] : _ref3$components;
+
+    return (screenId !== null ? components.find(function (_ref4) {
+      var id = _ref4.id;
+      return id === screenId;
+    }) : components[0]) || null;
+  }, [valueParsed, screenId]);
+  var currentScreenStates = useScreenStates(currentScreen);
+
+  var _ref5 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
+      _ref6 = _slicedToArray__default["default"](_ref5, 1),
+      _ref6$ = _ref6[0],
+      screenStateParam = _ref6$ === void 0 ? null : _ref6$;
+
+  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref7) {
+    var id = _ref7.id;
+    return id === screenStateParam;
+  }) || null : null;
+
+  var _ref8 = currentScreenState || {},
+      _ref8$id = _ref8.id,
+      screenStateId = _ref8$id === void 0 ? null : _ref8$id,
+      _ref8$repeatable = _ref8.repeatable,
+      repeatable = _ref8$repeatable === void 0 ? false : _ref8$repeatable;
+
+  var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
+    return it.match(/^[0-9]+$/) !== null;
+  }) || 0) : screenStateId;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className), _defineProperty__default["default"](_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
+    className: classNames__default["default"]([styles$d.container, screens.map(function (screenName) {
+      return styles$d["screen-".concat(screenName)];
+    }), (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className), _defineProperty__default["default"](_ref9, styles$d.withoutDevicesSizes, withoutDevicesSizes), _ref9)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner
+    className: styles$d.inner
   }, !withoutDevicesSizes ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.top
+    className: styles$d.top
   }, /*#__PURE__*/React__default["default"].createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread__default["default"](_objectSpread__default["default"]({}, it), {}, {
         active: it.id === deviceId
       });
     }),
-    onClickItem: onClickDeviceItem
+    onClickItem: onClickDeviceItem,
+    className: styles$d.devices
+  })) : null, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$d.top, 'px-1'])
+  }, /*#__PURE__*/React__default["default"].createElement(ScreenStates, {
+    screen: currentScreen,
+    screenState: currentScreenStateId,
+    value: value,
+    onChange: onChange
   })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.bottom
+    className: styles$d.bottom
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.inner,
+    className: styles$d.inner,
     ref: bottomRef
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.preview,
+    className: styles$d.preview,
     style: previewStyle
-  }, /*#__PURE__*/React__default["default"].createElement(reactRouter.Route, {
-    path: [routes.screen, routes.home],
-    render: function render(_ref4) {
-      var _ref4$match$params$sc = _ref4.match.params.screen,
-          screenId = _ref4$match$params$sc === void 0 ? null : _ref4$match$params$sc;
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$8.viewerContainer
-      }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
-        story: valueParsed,
-        storyIsParsed: true,
-        screen: screenId,
-        className: styles$8.story,
-        theme: viewerTheme,
-        interactions: null,
-        renderContext: "edit",
-        onScreenChange: onScreenChange
-      }));
-    }
-  }))))));
-};
-
-EditorPreview.propTypes = propTypes$d;
-EditorPreview.defaultProps = defaultProps$d;
-
-var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
-
-var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
-
-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__default["default"].bool,
-  id: PropTypes__default["default"].string,
-  href: PropTypes__default["default"].string,
-  label: core.PropTypes.label,
-  icon: PropTypes__default["default"].node,
-  title: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].node,
-  refButton: PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any // eslint-disable-line
-
-  }),
-  className: PropTypes__default["default"].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 ScreenButton = function ScreenButton(_ref) {
-  var _ref2;
-
-  var active = _ref.active,
-      id = _ref.id,
-      href = _ref.href,
-      className = _ref.className,
-      label = _ref.label,
-      icon = _ref.icon,
-      children = _ref.children,
-      title = _ref.title,
-      onClick = _ref.onClick,
-      refButton = _ref.refButton;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.active, active), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.screen
-  }, children !== null ? children : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.inner
-  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.icon
-  }, icon) : null, label !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.label
-  }, label) : null)), /*#__PURE__*/React__default["default"].createElement(components.Button, {
-    className: styles$4.button,
-    withoutStyle: true,
-    id: id,
-    href: href,
-    title: title,
-    onClick: onClick,
-    refButton: refButton
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$4.border, 'rounded'])
-  })));
-};
-
-ScreenButton.propTypes = propTypes$c;
-ScreenButton.defaultProps = defaultProps$c;
-var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  return /*#__PURE__*/React__default["default"].createElement(ScreenButton, Object.assign({}, props, {
-    refButton: ref
-  }));
-});
-
-var propTypes$b = {
-  screen: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
-  index: PropTypes__default["default"].number.isRequired,
-  title: PropTypes__default["default"].string,
-  previewStyle: PropTypes__default["default"].shape({
-    width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number
-  }),
-  withPreview: PropTypes__default["default"].bool,
-  withPlaceholder: PropTypes__default["default"].bool,
-  onClick: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func,
-  buttonClassName: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].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 = reactIntl.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__default["default"].createElement(ScreenButton$1, Object.assign({}, screen, {
-    className: classNames__default["default"]([styles$5.button, (_ref3 = {}, _defineProperty__default["default"](_ref3, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref3, className, className !== null), _ref3)]),
-    title: utils.isMessage(title) ? intl.formatMessage(title) : null,
-    onClick: function onClick() {
-      if (_onClick !== null) {
-        _onClick(screen, index);
-      }
+    className: styles$d.viewerContainer
+  }, /*#__PURE__*/React__default["default"].createElement(viewer.Viewer, {
+    story: valueParsed,
+    storyIsParsed: true,
+    screen: screenId,
+    screenState: currentScreenStateId,
+    className: styles$d.story,
+    theme: viewerTheme,
+    interactions: null,
+    renderContext: "edit",
+    onScreenChange: onScreenChange
+  })))))));
+};
+
+EditorPreview.propTypes = propTypes$b;
+EditorPreview.defaultProps = defaultProps$b;
 
-      if (onClickItem !== null) {
-        onClickItem(screen, index);
-      }
-    }
-  }), withPreview && !withPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.preview,
-    style: previewStyle
-  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPreview, {
-    screen: screen,
-    width: width,
-    height: height,
-    className: styles$5.screen
-  })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5.placeholder,
-    style: previewStyle
-  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenPlaceholder, {
-    screen: screen,
-    width: width,
-    height: height,
-    className: styles$5.screen
-  })) : null);
-};
+var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-ScreenWithPreview.propTypes = propTypes$b;
-ScreenWithPreview.defaultProps = defaultProps$b;
+var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -1661,9 +2095,13 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
   };
 };
 
-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 styles$5 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
+
+var styles$4 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
+
+var styles$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","text":"micromag-editor-sortable-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
 
-var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "children"];
+var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
 var propTypes$a = {
   childCount: PropTypes__default["default"].number,
   clone: PropTypes__default["default"].bool,
@@ -1688,6 +2126,8 @@ var propTypes$a = {
     transform: PropTypes__default["default"].string.isRequired
   }),
   showId: PropTypes__default["default"].bool,
+  showCount: PropTypes__default["default"].bool,
+  showCollapsedCount: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node
 };
 var defaultProps$a = {
@@ -1706,6 +2146,8 @@ var defaultProps$a = {
   wrapperRef: null,
   style: null,
   showId: false,
+  showCount: false,
+  showCollapsedCount: false,
   children: null
 };
 var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -1728,22 +2170,22 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
       _ref.value;
       var wrapperRef = _ref.wrapperRef;
       _ref.showId;
-      var children = _ref.children,
+      var showCount = _ref.showCount,
+      showCollapsedCount = _ref.showCollapsedCount,
+      children = _ref.children,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default["default"].createElement("li", Object.assign({
+  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     className: classNames__default["default"]([styles$3.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$3.clone, clone), _defineProperty__default["default"](_ref2, styles$3.ghost, ghost), _defineProperty__default["default"](_ref2, styles$3.indicator, indicator), _defineProperty__default["default"](_ref2, styles$3.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$3.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$3.withChildren, onCollapse !== null), _ref2)]),
     ref: wrapperRef,
-    style: _objectSpread__default["default"]({
-      marginLeft: "".concat(indentationWidth * depth, "px")
-    }, style)
+    style: {
+      marginLeft: "".concat(indentationWidth * depth, "px"),
+      marginRight: "".concat(5 * depth, "px")
+    }
   }, props), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3.inner,
     ref: ref,
-    style: {
-      width: style.width,
-      height: style.height
-    }
+    style: style
   }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
     className: classNames__default["default"]([styles$3.button, styles$3.handle]),
     type: "button"
@@ -1755,27 +2197,24 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onClick: onRemove
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faTimes
-  })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3.count
-  }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles$3.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    onClick: onCollapse,
-    className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
-    style: {
-      width: style.width
-    }
+    onClick: onCollapse,
+    className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faAngleDown
-  })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
+  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3.children
-  }, children));
+  }, children)));
 });
 SortableTreeItemActions.propTypes = propTypes$a;
 SortableTreeItemActions.defaultProps = defaultProps$a;
 
-var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "onCollapse", "onClickItem"];
+var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
 var propTypes$9 = {
   id: PropTypes__default["default"].string.isRequired,
   index: PropTypes__default["default"].number.isRequired,
@@ -1792,16 +2231,23 @@ var propTypes$9 = {
     scale: PropTypes__default["default"].number.isRequired
   }),
   smallScale: PropTypes__default["default"].number,
+  collapsed: PropTypes__default["default"].bool,
   onCollapse: PropTypes__default["default"].func,
-  onClickItem: PropTypes__default["default"].func
+  onClickItem: PropTypes__default["default"].func,
+  // eslint-disable-next-line react/forbid-prop-types
+  childValue: PropTypes__default["default"].object,
+  isLastChild: PropTypes__default["default"].bool
 };
 var defaultProps$9 = {
   component: null,
   value: null,
   style: null,
   smallScale: 0.75,
+  collapsed: false,
   onCollapse: null,
-  onClickItem: null
+  onClickItem: null,
+  childValue: null,
+  isLastChild: false
 };
 
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
@@ -1815,12 +2261,15 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       index = _ref2.index,
       depth = _ref2.depth,
       Component = _ref2.component,
-      value = _ref2.value,
-      itemStyle = _ref2.style,
-      smallScale = _ref2.smallScale,
+      value = _ref2.value;
+      _ref2.style;
+      _ref2.smallScale;
+      var collapsed = _ref2.collapsed,
       onCollapse = _ref2.onCollapse,
       onClickItem = _ref2.onClickItem,
-      props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
+      childValue = _ref2.childValue;
+      _ref2.isLastChild;
+      var props = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
 
   var _useSortable = sortable.useSortable({
     id: id,
@@ -1835,28 +2284,17 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       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 timeout = React.useRef(null);
   var actionsStyle = {
-    width: depth === 0 ? scaledWidth : scaledWidth * smallScale,
-    height: depth === 0 ? scaledHeight + extraHeight : scaledHeight * smallScale,
     transform: utilities.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;
+      _ref3$onPointerDown = _ref3.onPointerDown,
+      onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
+      _ref3$onPointerUp = _ref3.onPointerUp,
+      onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
 
   var onClickAction = React.useCallback(function (e) {
     if (onClickItem !== null) {
@@ -1864,10 +2302,28 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     }
 
     if (onPointerDown !== null) {
-      onPointerDown(e);
+      e.persist();
+      timeout.current = setTimeout(function () {
+        if (onPointerDown !== null) {
+          onPointerDown(e);
+        }
+
+        timeout.current = null;
+      }, 200);
     }
   }, [value, index, onClickItem, onPointerDown]);
-  return /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
+  var cancellingPointerUp = React.useCallback(function (e) {
+    if (timeout.current !== null) {
+      clearTimeout(timeout.current);
+    }
+
+    if (onPointerUp !== null) {
+      onPointerUp(e);
+    }
+  }, [onPointerUp]);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$4.container])
+  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -1876,13 +2332,18 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     disableSelection: iOS,
     disableInteraction: isSorting,
     handleProps: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, attributes), listeners), {}, {
-      onPointerDown: onClickAction
+      onPointerDown: onClickAction,
+      onPointerUp: cancellingPointerUp
     }),
+    collapsed: collapsed,
     onCollapse: onCollapse
-  }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement(Component, Object.assign({}, value, {
-    previewStyle: previewStyle
-  })) : null);
+  }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$4.parent
+  }, /*#__PURE__*/React__default["default"].createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$4.child
+  }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
 };
+
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
 
@@ -1904,18 +2365,6 @@ var initialItems = [{
     id: 'Winter',
     children: []
   }]
-}, {
-  id: 'About Us',
-  children: []
-}, {
-  id: 'My Account',
-  children: [{
-    id: 'Addresses',
-    children: []
-  }, {
-    id: 'Order History',
-    children: []
-  }]
 }];
 var measuring = {
   droppable: {
@@ -1942,7 +2391,6 @@ var propTypes$8 = {
   indicator: PropTypes__default["default"].bool,
   removable: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].func,
-  itemStyle: PropTypes__default["default"].shape({}),
   onClickItem: PropTypes__default["default"].func,
   onChange: PropTypes__default["default"].func
 };
@@ -1953,10 +2401,10 @@ var defaultProps$8 = {
   indicator: false,
   removable: false,
   component: null,
-  itemStyle: null,
   onClickItem: null,
   onChange: null
 };
+
 var SortableTree = function SortableTree(_ref2) {
   var collapsible = _ref2.collapsible,
       defaultItems = _ref2.items,
@@ -1964,12 +2412,11 @@ var SortableTree = function SortableTree(_ref2) {
       indentationWidth = _ref2.indentationWidth,
       removable = _ref2.removable,
       component = _ref2.component,
-      itemStyle = _ref2.itemStyle,
       onClickItem = _ref2.onClickItem,
       onChange = _ref2.onChange;
 
   var _useState = React.useState(function () {
-    return defaultItems;
+    return buildTree(defaultItems);
   }),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       items = _useState2[0],
@@ -1993,11 +2440,20 @@ var SortableTree = function SortableTree(_ref2) {
   var _useState9 = React.useState(null),
       _useState10 = _slicedToArray__default["default"](_useState9, 2),
       currentPosition = _useState10[0],
-      setCurrentPosition = _useState10[1];
+      setCurrentPosition = _useState10[1]; // Tree setup from list
 
-  var flattenedItems = React.useMemo(function () {
-    var flattenedTree = flattenTree(items); // console.log('yo', items, flattenedTree);
 
+  React.useEffect(function () {
+    var flat = flattenTree(items);
+    var merged = defaultItems.map(function (t1) {
+      return _objectSpread__default["default"](_objectSpread__default["default"]({}, flat.find(function (t2) {
+        return t2.id === t1.id;
+      })), t1);
+    });
+    setItems(buildTree(merged));
+  }, [defaultItems.length]);
+  var flattenedItems = React.useMemo(function () {
+    var flattenedTree = flattenTree(items);
     var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
       var _ref3$children = _ref3.children,
           children = _ref3$children === void 0 ? [] : _ref3$children,
@@ -2006,7 +2462,7 @@ var SortableTree = function SortableTree(_ref2) {
       return collapsed && children.length ? [].concat(_toConsumableArray__default["default"](acc), [id]) : acc;
     }, []) || null;
     return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray__default["default"](collapsedItems)) : collapsedItems);
-  }, [activeId, items]);
+  }, [activeId, items, items.length]);
   var projected = activeId && overId ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
   var sensorContext = React.useRef({
     items: flattenedItems,
@@ -2038,6 +2494,69 @@ var SortableTree = function SortableTree(_ref2) {
       offset: offsetLeft
     };
   }, [flattenedItems, offsetLeft]);
+
+  function getMovementAnnouncement(eventName, currentActiveId, currentOverId) {
+    if (currentOverId && projected) {
+      if (eventName !== 'onDragEnd') {
+        if (currentPosition && projected.parentId === currentPosition.parentId && currentOverId === currentPosition.overId) {
+          return;
+        }
+
+        setCurrentPosition({
+          parentId: projected.parentId,
+          overId: currentOverId
+        });
+      }
+
+      var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
+      var overIndex = clonedItems.findIndex(function (_ref6) {
+        var id = _ref6.id;
+        return id === currentOverId;
+      });
+      var activeIndex = clonedItems.findIndex(function (_ref7) {
+        var id = _ref7.id;
+        return id === currentActiveId;
+      });
+      var sortedItems = sortable.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 = typeof sortedItems[overIndex + 1] !== 'undefined' ? sortedItems[overIndex + 1] : null;
+
+        if (nextItem !== null) {
+          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 _loop = function _loop() {
+          var _previousSibling = previousSibling,
+              parentId = _previousSibling.parentId;
+          previousSibling = sortedItems.find(function (_ref8) {
+            var id = _ref8.id;
+            return id === parentId;
+          });
+        };
+
+        while (previousSibling && projected.depth < previousSibling.depth) {
+          _loop();
+        }
+
+        if (previousSibling) {
+          newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " after ").concat(previousSibling.id, ".");
+        }
+      } // eslint-disable-next-line consistent-return
+
+
+      return newAnnouncement;
+    }
+  }
+
   var announcements = React.useMemo(function () {
     return {
       onDragStart: function onDragStart(id) {
@@ -2050,16 +2569,17 @@ var SortableTree = function SortableTree(_ref2) {
         return getMovementAnnouncement('onDragOver', id, currentOverId);
       },
       onDragEnd: function onDragEnd(id, currentOverId) {
-        // console.log('drag end', flattenedItems);
+        var flat = flattenTree(items);
+
         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;
+          onChange((flat || []).map(function (_ref9) {
+            var itemId = _ref9.id,
+                _ref9$children = _ref9.children,
+                children = _ref9$children === void 0 ? [] : _ref9$children,
+                _ref9$parentId = _ref9.parentId,
+                parentId = _ref9$parentId === void 0 ? null : _ref9$parentId,
+                _ref9$collapsed = _ref9.collapsed,
+                collapsed = _ref9$collapsed === void 0 ? false : _ref9$collapsed;
             return {
               id: itemId,
               props: _objectSpread__default["default"](_objectSpread__default["default"]({}, (children || []).length > 0 ? {
@@ -2084,78 +2604,18 @@ var SortableTree = function SortableTree(_ref2) {
         return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
       }
     };
-  }, [flattenedItems, onChange]); // Initial tree setup from list
-
-  React.useEffect(function () {
-    // console.log('fuck off');
-    setItems(buildTree(defaultItems));
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement(core$1.DndContext, {
-    announcements: announcements,
-    sensors: sensors,
-    collisionDetection: core$1.closestCenter,
-    measuring: measuring,
-    onDragStart: handleDragStart,
-    onDragMove: handleDragMove,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React__default["default"].createElement(sortable.SortableContext, {
-    items: sortedIds,
-    strategy: sortable.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__default["default"].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__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(core$1.DragOverlay, {
-    dropAnimation: dropAnimation,
-    modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].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;
+  }, [flattenedItems, onChange, getMovementAnnouncement]);
+  var activeValue = defaultItems.find(function (_ref10) {
+    var _ref10$id = _ref10.id,
+        defaultId = _ref10$id === void 0 ? null : _ref10$id;
+    return defaultId === activeId;
+  });
+  var handleDragStart = React.useCallback(function (_ref11) {
+    var newActiveId = _ref11.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref10) {
-      var id = _ref10.id;
+    var newActiveItem = flattenedItems.find(function (_ref12) {
+      var id = _ref12.id;
       return id === newActiveId;
     });
 
@@ -2167,53 +2627,49 @@ var SortableTree = function SortableTree(_ref2) {
     }
 
     document.body.style.setProperty('cursor', 'grabbing');
-  }
-
-  function handleDragMove(_ref11) {
-    var delta = _ref11.delta;
+  }, [flattenedItems, setActiveId, setOverId, setCurrentPosition]);
+  var handleDragMove = React.useCallback(function (_ref13) {
+    var delta = _ref13.delta;
     setOffsetLeft(delta.x);
-  }
-
-  function handleDragOver(_ref12) {
+  }, [setOffsetLeft]);
+  var handleDragOver = React.useCallback(function (_ref14) {
     var _over$id;
 
-    var over = _ref12.over;
+    var over = _ref14.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
-  }
-
-  function resetState() {
+  }, [setOverId]);
+  var resetState = React.useCallback(function () {
     setOverId(null);
     setActiveId(null);
     setOffsetLeft(0);
     setCurrentPosition(null);
     document.body.style.setProperty('cursor', '');
-  }
-
-  function handleDragEnd(_ref13) {
-    var active = _ref13.active,
-        over = _ref13.over;
+  }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
+  var handleDragEnd = React.useCallback(function (_ref15) {
+    var active = _ref15.active,
+        over = _ref15.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;
+      var overIndex = clonedItems.findIndex(function (_ref16) {
+        var id = _ref16.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref15) {
-        var id = _ref15.id;
+      var activeIndex = clonedItems.findIndex(function (_ref17) {
+        var id = _ref17.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 _loop2 = function _loop2(i) {
           var childId = activeTreeItem.children[i].id;
-          var childIndex = clonedItems.findIndex(function (_ref16) {
-            var id = _ref16.id;
+          var childIndex = clonedItems.findIndex(function (_ref18) {
+            var id = _ref18.id;
             return id === childId;
           });
           clonedItems[childIndex].parentId = parentId;
@@ -2221,7 +2677,7 @@ var SortableTree = function SortableTree(_ref2) {
         };
 
         for (var i = 0; i < activeTreeItem.children.length; i += 1) {
-          _loop(i);
+          _loop2(i);
         }
 
         activeTreeItem.children = [];
@@ -2235,96 +2691,113 @@ var SortableTree = function SortableTree(_ref2) {
       var newItems = buildTree(sortedItems);
       setItems(newItems);
     }
-  }
-
-  function handleDragCancel() {
+  }, [projected, items, resetState, sortable.arrayMove, buildTree, setItems]);
+  var handleDragCancel = React.useCallback(function () {
     resetState();
-  }
-
-  function handleRemove(id) {
+  }, [resetState]);
+  var handleRemove = React.useCallback(function (id) {
     setItems(function (newItems) {
       return removeItem(newItems, id);
     });
-  }
-
-  function handleCollapse(id) {
+  }, [setItems, removeItem]);
+  var handleCollapse = React.useCallback(function (id) {
     setItems(function (newItems) {
       return setProperty(newItems, id, 'collapsed', function (value) {
         return !value;
       });
     });
-  }
-
-  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 = sortable.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;
-    }
-  }
+  }, [setItems, setProperty]);
+  return /*#__PURE__*/React__default["default"].createElement(core$1.DndContext, {
+    announcements: announcements,
+    sensors: sensors,
+    collisionDetection: core$1.closestCenter,
+    measuring: measuring,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel
+  }, /*#__PURE__*/React__default["default"].createElement(sortable.SortableContext, {
+    items: sortedIds,
+    strategy: sortable.verticalListSortingStrategy
+  }, flattenedItems.map(function (_ref19, idx) {
+    var _flattenedItems, _ref22;
+
+    var id = _ref19.id,
+        _ref19$children = _ref19.children,
+        children = _ref19$children === void 0 ? [] : _ref19$children,
+        collapsed = _ref19.collapsed,
+        depth = _ref19.depth;
+    var screenValue = defaultItems.find(function (_ref20) {
+      var _ref20$id = _ref20.id,
+          defaultId = _ref20$id === void 0 ? null : _ref20$id;
+      return defaultId === id;
+    });
+    var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === void 0 ? void 0 : _flattenedItems.parentId) || null;
+    var isCollapsed = collapsed && children.length > 0;
+    var onCollapse = collapsible && children.length ? function () {
+      return handleCollapse(id);
+    } : null;
+    var currentDepth = id === activeId && projected ? projected.depth : depth;
+    var childCount = getChildCount(items, id);
+    var childValue = childCount > 0 && collapsed ? defaultItems.slice().reverse().find(function (_ref21) {
+      var _ref21$parentId = _ref21.parentId,
+          parentId = _ref21$parentId === void 0 ? null : _ref21$parentId;
+      return parentId === id;
+    }) : null;
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames__default["default"]([styles$5.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$5.group, depth === 1), _defineProperty__default["default"](_ref22, styles$5.isLastChild, next === null), _ref22)]),
+      key: id
+    }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
+      key: id,
+      id: id,
+      depth: currentDepth,
+      indentationWidth: indentationWidth,
+      indicator: indicator,
+      collapsed: isCollapsed,
+      onCollapse: onCollapse,
+      onRemove: removable ? function () {
+        return handleRemove(id);
+      } : undefined,
+      childCount: childCount,
+      component: component,
+      value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
+      onClickItem: onClickItem,
+      index: idx,
+      childValue: (childValue === null || childValue === void 0 ? void 0 : childValue.value) || null
+    }));
+  }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/React__default["default"].createElement(core$1.DragOverlay, {
+    dropAnimation: dropAnimation,
+    modifiers: indicator ? [adjustTranslate] : undefined
+  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$5.item,
+    key: activeId
+  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
+    id: activeId,
+    depth: activeItem.depth,
+    clone: true,
+    childCount: getChildCount(items, activeId) + 1,
+    indentationWidth: indentationWidth,
+    component: component,
+    value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
+    onClickItem: onClickItem,
+    index: flattenedItems.findIndex(function (_ref23) {
+      var id = _ref23.id;
+      return activeId === id;
+    })
+  })) : null), document.body)));
 };
+
 SortableTree.propTypes = propTypes$8;
 SortableTree.defaultProps = defaultProps$8;
 
-var _excluded$2 = ["className", "screen", "type", "onClick"],
-    _excluded2 = ["id", "screen"];
+var _excluded$2 = ["className", "screen", "type", "onClick", "active", "href"],
+    _excluded2 = ["id", "screen", "href"];
 var propTypes$7 = {
   items: core.PropTypes.menuItems,
   withPreview: PropTypes__default["default"].bool,
   withPlaceholder: PropTypes__default["default"].bool,
-  settings: PropTypes__default["default"].node,
-  previewMinWidth: PropTypes__default["default"].number,
+  settings: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
   sortable: PropTypes__default["default"].bool,
   isTree: PropTypes__default["default"].bool,
   isVertical: PropTypes__default["default"].bool,
@@ -2341,7 +2814,6 @@ var defaultProps$7 = {
   withPreview: false,
   withPlaceholder: false,
   settings: null,
-  previewMinWidth: 320,
   sortable: false,
   isTree: false,
   isVertical: false,
@@ -2355,13 +2827,12 @@ var defaultProps$7 = {
 };
 
 var ScreensMenu = function ScreensMenu(_ref) {
-  var _ref10;
+  var _ref8;
 
   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,
@@ -2372,78 +2843,31 @@ var ScreensMenu = function ScreensMenu(_ref) {
       isTree = _ref.isTree,
       onClickItem = _ref.onClickItem,
       onOrderChange = _ref.onOrderChange;
-
-  var _useResizeObserver = hooks.useResizeObserver({}, [items]),
-      containerRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _useResizeObserver2 = hooks.useResizeObserver({}, [items]),
-      columnRef = _useResizeObserver2.ref,
-      columnRect = _useResizeObserver2.entry.contentRect;
-
-  var previewStyle = React.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 ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 2 / 3;
-
-    var _getSizeWithinBounds = size.getSizeWithinBounds(previewMinWidth, previewMinWidth * ratio, itemWidth, itemHeight),
-        previewScale = _getSizeWithinBounds.scale;
-
-    return {
-      width: previewMinWidth,
-      height: previewMinWidth * ratio,
-      transform: "scale(".concat(previewScale, ", ").concat(previewScale, ")")
-    };
-  }, [previewMinWidth, contentRect]);
-  var treeStyle = React.useMemo(function () {
-    var _ref3 = columnRect || {},
-        _ref3$width = _ref3.width,
-        itemWidth = _ref3$width === void 0 ? 0 : _ref3$width;
-
-    var itemHeight = itemWidth * 3 / 2;
-    var ratio = itemHeight !== 0 && itemWidth !== 0 ? itemHeight / itemWidth : 0;
-
-    var _getSizeWithinBounds2 = size.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__default["default"](_ref4, _excluded$2);
+  var itemsElements = !isTree ? items.map(function (_ref2, index) {
+    var _ref3;
+
+    var _ref2$className = _ref2.className,
+        itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
+        screen = _ref2.screen,
+        type = _ref2.type,
+        _ref2$onClick = _ref2.onClick,
+        onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
+        active = _ref2.active,
+        href = _ref2.href,
+        item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
 
     return /*#__PURE__*/React__default["default"].createElement("li", {
       key: item.id,
-      className: classNames__default["default"]([styles$6.item, (_ref5 = {}, _defineProperty__default["default"](_ref5, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
-      "data-screen-id": item.id,
-      ref: index === 0 ? containerRef : null
+      className: classNames__default["default"]([styles$6.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
+      "data-screen-id": item.id
     }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
       index: index,
-      screen: _objectSpread__default["default"](_objectSpread__default["default"]({}, screen), withPlaceholder ? {
+      screen: withPlaceholder ? _objectSpread__default["default"](_objectSpread__default["default"]({}, screen), {}, {
         type: type
-      } : null),
-      buttonClassName: buttonClassName,
-      previewStyle: previewStyle,
+      }) : screen,
+      href: href,
+      className: buttonClassName,
+      active: active,
       withPreview: withPreview,
       withPlaceholder: withPlaceholder,
       onClick: onClick,
@@ -2453,44 +2877,44 @@ var ScreensMenu = function ScreensMenu(_ref) {
     }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = React.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__default["default"](_ref7, _excluded2);
+    return isTree ? items.map(function (_ref5) {
+      var id = _ref5.id,
+          _ref5$screen = _ref5.screen,
+          screen = _ref5$screen === void 0 ? {} : _ref5$screen,
+          href = _ref5.href,
+          props = _objectWithoutProperties__default["default"](_ref5, _excluded2);
 
       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;
+      var _ref6 = group || {},
+          _ref6$collapsed = _ref6.collapsed,
+          collapsed = _ref6$collapsed === void 0 ? true : _ref6$collapsed;
 
-      return _objectSpread__default["default"]({
+      return {
         id: id,
         parentId: parentId,
         collapsed: collapsed,
-        value: {
+        value: _objectSpread__default["default"]({
           id: id,
-          screen: screen
-        }
-      }, props);
-    }, []) : items.map(function (_ref9) {
-      var id = _ref9.id;
+          screen: screen,
+          href: href
+        }, props)
+      };
+    }, []) : items.map(function (_ref7) {
+      var id = _ref7.id;
       return {
         id: id
       };
     });
-  }, [items, isTree]);
+  }, [items, isTree, items.length]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$6.container, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles$6.noWrap, noWrap), _defineProperty__default["default"](_ref10, styles$6.isVertical, isVertical), _defineProperty__default["default"](_ref10, styles$6.isTree, isTree), _defineProperty__default["default"](_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref10, className, className), _ref10)]),
-    ref: columnRef
+    className: classNames__default["default"]([styles$6.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$6.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$6.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$6.isTree, isTree), _defineProperty__default["default"](_ref8, styles$6.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
   }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
     items: sortableItems,
     component: ScreenWithPreview,
-    itemStyle: treeStyle,
     onClickItem: onClickItem,
     onChange: onOrderChange
   }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React__default["default"].createElement(reactSortablejs.ReactSortable, {
@@ -2509,7 +2933,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
 
-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 styles$2 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen"};
 
 var propTypes$6 = {
   screens: core.PropTypes.screenDefinitions,
@@ -2605,13 +3029,12 @@ var ScreenTypes = function ScreenTypes(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
       items: items,
       withPlaceholder: true,
-      itemClassName: classNames__default["default"](['border', 'rounded', {
+      itemClassName: classNames__default["default"]([styles$2.screen, 'border', 'rounded', {
         'border-secondary': selectedTypes === null,
         'border-dark': selectedTypes !== null,
         'bg-secondary': selectedTypes === null,
         'text-secondary': selectedTypes !== null
       }]),
-      previewMinWidth: 100,
       onClickItem: onClickItem
     })));
   })));
@@ -2787,6 +3210,8 @@ var EditorScreens = function EditorScreens(_ref) {
     }, true);
 
     if (!sameOrder || hasScreenProps) {
+      console.log('order', ids);
+
       var newValue = _objectSpread__default["default"](_objectSpread__default["default"]({}, value), {}, {
         components: _toConsumableArray__default["default"](currentScreens).sort(function (_ref13, _ref14) {
           var idA = _ref13.id;
@@ -2840,7 +3265,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [setCreateModalOpened]);
   var onCreateModalRequestClose = React.useCallback(function () {
     return setCreateModalOpened(false);
-  }, [setCreateModalOpened]);
+  }, [setCreateModalOpened]); // console.log(screens);
+
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['d-flex', 'flex-column', styles$7.container, className])
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
@@ -2849,7 +3275,7 @@ var EditorScreens = function EditorScreens(_ref) {
     withoutCollapse: true,
     className: classNames__default["default"](['sticky-top', styles$7.navbar])
   }, /*#__PURE__*/React__default["default"].createElement("strong", {
-    className: "mb-0 mr-auto"
+    className: "mb-0 me-auto"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "jf+4Hq",
     defaultMessage: [{
@@ -3049,21 +3475,21 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(contexts.ModalsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.PanelsProvider, null, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$f["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$f.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
+    className: classNames__default["default"]([styles$i.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$i["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty__default["default"](_ref5, styles$i.fullscreen, fullscreen), _defineProperty__default["default"](_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$f.top
+    className: styles$i.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React__default["default"].createElement(components.Button, {
     size: "sm",
     theme: "secondary",
     onClick: onClickScreens,
-    className: "mr-auto"
+    className: "me-auto"
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "wkysUu",
     defaultMessage: [{
@@ -3091,9 +3517,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$f.inner
+    className: styles$i.inner
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.left, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames__default["default"]([styles$i.left, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React__default["default"].createElement(EditorScreens, {
     value: story,
@@ -3103,24 +3529,25 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$f.inner,
+    className: styles$i.inner,
     isTree: true
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.center, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'preview')])
+    className: classNames__default["default"]([styles$i.center, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React__default["default"].createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$f.preview,
-    onScreenChange: onPreviewScreenChange
+    className: styles$i.preview,
+    onScreenChange: onPreviewScreenChange,
+    onChange: onStoryChange
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.right, _defineProperty__default["default"]({}, styles$f.visible, !isMobile || mobileView === 'form')])
+    className: classNames__default["default"]([styles$i.right, _defineProperty__default["default"]({}, styles$i.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React__default["default"].createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$f.inner
+    className: styles$i.inner
   }))), /*#__PURE__*/React__default["default"].createElement(components.Modals, null)))));
 };