@micromag/editor 0.3.538 → 0.3.540

package/es/index.js

@@ -0,0 +1,3549 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$2, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
+import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useFieldsComponentsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, VisitorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
+import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
+import { getScreenFieldsWithStates, getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useMemo, useRef, useCallback, useState, forwardRef, useEffect } from 'react';
+import { useIntl, FormattedMessage } from 'react-intl';
+import { useRouteMatcher, createPathToRegexpParser, useMemoryRouter } from '@folklore/routes';
+import { useLocation, Switch, Route, Router } from 'wouter';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Fields, FieldsProvider } from '@micromag/fields';
+import { v1 } from 'uuid';
+import { getSizeWithinBounds } from '@folklore/size';
+import { Viewer } from '@micromag/viewer';
+import _toArray from '@babel/runtime/helpers/toArray';
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
+import isString from 'lodash/isString';
+import isFunction from 'lodash/isFunction';
+import { ReactSortable } from 'react-sortablejs';
+import { KeyboardCode, closestCorners, getFirstCollision, getClientRect, MeasuringStrategy, defaultDropAnimation, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { createPortal } from 'react-dom';
+import _createForOfIteratorHelper from '@babel/runtime/helpers/createForOfIteratorHelper';
+import { CSS } from '@dnd-kit/utilities';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faGripLines } from '@fortawesome/free-solid-svg-icons/faGripLines';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import orderBy from 'lodash/orderBy';
+import { UppyProvider } from '@panneau/uppy';
+import { ScreensProvider } from '@micromag/screens';
+
+var useRouteParams = function useRouteParams() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$screenOnly = _ref.screenOnly,
+    screenOnly = _ref$screenOnly === void 0 ? false : _ref$screenOnly;
+  var routes = useRoutes();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 1),
+    location = _useLocation2[0];
+  var matcher = useRouteMatcher();
+  var _useMemo = useMemo(function () {
+      var paths = screenOnly ? [routes.screen, '/:screen/*', '*'] : [routes['screen.field.form'], routes['screen.field'], routes.screen, '*'];
+      return paths.reduce(function (currentParams, path) {
+        if (currentParams !== null) {
+          return currentParams;
+        }
+        var _matcher = matcher(path),
+          _matcher2 = _slicedToArray(_matcher, 2),
+          _matcher2$ = _matcher2[0],
+          match = _matcher2$ === void 0 ? false : _matcher2$,
+          params = _matcher2[1];
+        return match ? params : currentParams;
+      }, null) || {};
+    }, [routes, screenOnly, location, matcher]),
+    _useMemo$screen = _useMemo.screen,
+    screen = _useMemo$screen === void 0 ? null : _useMemo$screen,
+    _useMemo$field = _useMemo.field,
+    field = _useMemo$field === void 0 ? null : _useMemo$field,
+    _useMemo$form = _useMemo.form,
+    form = _useMemo$form === void 0 ? null : _useMemo$form;
+  var routeParams = useMemo(function () {
+    return screenOnly ? {
+      url: location,
+      screen: screen
+    } : {
+      url: location,
+      screen: screen,
+      field: field,
+      form: form
+    };
+  }, [screenOnly, location, screen, field, form]);
+  return routeParams;
+};
+
+var useFormTransition = function useFormTransition(url, screenIndex, styles) {
+  var lastPageRef = useRef({
+    url: url,
+    screenIndex: screenIndex
+  });
+  var direction = useMemo(function () {
+    var _lastPageRef$current = lastPageRef.current,
+      lastScreenIndex = _lastPageRef$current.screenIndex,
+      lastUrl = _lastPageRef$current.url;
+    lastPageRef.current.url = url;
+    lastPageRef.current.screenIndex = screenIndex;
+    if (screenIndex !== lastScreenIndex) {
+      // return screenIndex > lastScreenIndex ? 'bottom' : 'top';
+      return null;
+    }
+    var urlSplit = url.split('/');
+    var lastUrlSplit = lastUrl.split('/');
+    var currentPartsCount = urlSplit.length;
+    var previousPartsCount = lastUrlSplit.length;
+    var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
+    var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
+    currentPartsCount -= isSettings ? 1 : 0;
+    previousPartsCount -= wasSettings ? 1 : 0;
+    return currentPartsCount >= previousPartsCount ? 'right' : 'left';
+  }, [url, screenIndex]);
+  var transitionClassNames = useMemo(function () {
+    return {
+      enter: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.enterRight, direction === 'right'), styles.enterLeft, direction === 'left'), styles.enterTop, direction === 'top'), styles.enterBottom, direction === 'bottom')) || 'none',
+      enterActive: classNames(_defineProperty(_defineProperty({}, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), styles.enterActiveVertical, direction === 'top' || direction === 'bottom')) || 'none',
+      exit: styles.exit || 'none',
+      exitActive: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.exitActiveRight, direction === 'right'), styles.exitActiveLeft, direction === 'left'), styles.exitActiveTop, direction === 'top'), styles.exitActiveBottom, direction === 'bottom')) || 'none'
+    };
+  }, [direction, screenIndex]);
+  return {
+    direction: direction,
+    classNames: transitionClassNames,
+    timeout: direction === 'left' || direction === 'right' ? 300 : 10
+  };
+};
+
+var createScreen = function createScreen(definition) {
+  var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var finalDefinition = isString(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({}, all);
+    if (name !== null && defaultValue !== null) {
+      newAll[name] = defaultValue;
+    }
+    return newAll;
+  }, {});
+  return _objectSpread(_objectSpread(_objectSpread({
+    type: id
+  }, defaultValueFields), data), {}, {
+    id: v1()
+  });
+};
+var createScreen$1 = createScreen;
+
+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(_ref, _excluded$c);
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: components.filter(function (_ref2) {
+      var id = _ref2.id;
+      return id !== screenId;
+    })
+  });
+};
+
+var _excluded$b = ["components"];
+var duplicateScreen = function duplicateScreen(story, screenId) {
+  var screenIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+  var _ref = story || {},
+    _ref$components = _ref.components,
+    components = _ref$components === void 0 ? [] : _ref$components,
+    currentValue = _objectWithoutProperties(_ref, _excluded$b);
+  var screen = components.find(function (it) {
+    return it.id === screenId;
+  }) || null;
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: screen !== null ? screenIndex !== null && screenIndex > -1 ? [].concat(_toConsumableArray(components.slice(0, screenIndex + 1)), [_objectSpread(_objectSpread({}, screen), {}, {
+      id: v1()
+    })], _toConsumableArray(components.slice(screenIndex + 1))) : [].concat(_toConsumableArray(components), [_objectSpread(_objectSpread({}, screen), {}, {
+      id: v1()
+    })]) : components
+  });
+};
+
+var _excluded$a = ["components"];
+var updateScreen = function updateScreen(story, newScreenValue) {
+  var newScreenId = newScreenValue.id;
+  var _ref = story || {},
+    _ref$components = _ref.components,
+    components = _ref$components === void 0 ? [] : _ref$components,
+    currentValue = _objectWithoutProperties(_ref, _excluded$a);
+  var index = components.findIndex(function (it) {
+    return it.id === newScreenId;
+  });
+  return _objectSpread(_objectSpread({}, currentValue), {}, {
+    components: [].concat(_toConsumableArray(components.slice(0, index)), [_objectSpread(_objectSpread({}, components[index]), newScreenValue)], _toConsumableArray(components.slice(index + 1)))
+  });
+};
+
+var getFieldByName = function getFieldByName(fields, name) {
+  return fields.reduce(function (foundField, it) {
+    if (foundField !== null) {
+      return foundField;
+    }
+    var _it$name = it.name,
+      fieldName = _it$name === void 0 ? null : _it$name,
+      _it$fields = it.fields,
+      subFields = _it$fields === void 0 ? [] : _it$fields;
+    if (name !== null && fieldName === name) {
+      return it;
+    }
+    return getFieldByName(subFields, name);
+  }, null);
+};
+
+var _excluded$9 = ["className", "dots"];
+var propTypes$o = {
+  dots: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$o = {
+  dots: false,
+  className: null
+};
+var SettingsButton = function SettingsButton(_ref) {
+  var className = _ref.className,
+    dots = _ref.dots,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: className,
+    theme: "secondary",
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: dots ? faEllipsisV : faCogs
+    })
+  }, props));
+};
+SettingsButton.propTypes = propTypes$o;
+SettingsButton.defaultProps = defaultProps$o;
+var SettingsButton$1 = SettingsButton;
+
+var _excluded$8 = ["name", "form"];
+var propTypes$n = {
+  name: PropTypes.string,
+  form: PropTypes.string,
+  children: PropTypes.node
+};
+var defaultProps$n = {
+  name: null,
+  form: null,
+  children: null
+};
+var FieldWithContexts = function FieldWithContexts(_ref) {
+  var name = _ref.name,
+    form = _ref.form,
+    props = _objectWithoutProperties(_ref, _excluded$8);
+  var definition = useScreenDefinition() || null;
+  var _definition$states = definition.states,
+    states = _definition$states === void 0 ? null : _definition$states;
+  var screenFields = getScreenFieldsWithStates(definition);
+  var nameParts = name.split('.');
+  var _nameParts = _slicedToArray(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;
+  var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
+    var itemName = _ref4.name,
+      fieldStateId = _ref4.stateId;
+    return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
+  }) : screenFields;
+  if (currentState !== null) {
+    finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(nameParts.slice(1))) : nameParts.slice(1);
+  }
+  var formComponents = useFormsComponents();
+  return definition !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames({
+      'p-2': form === null
+    })
+  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(FieldForm, Object.assign({
+    fields: finalScreenFields,
+    formComponents: formComponents,
+    name: finalNameParts.join('.'),
+    form: form
+  }, props)) : /*#__PURE__*/React.createElement(Fields, Object.assign({
+    fields: stateFields
+  }, props))) : null;
+};
+FieldWithContexts.propTypes = propTypes$n;
+FieldWithContexts.defaultProps = defaultProps$n;
+var FieldWithContexts$1 = FieldWithContexts;
+
+var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+
+var propTypes$m = {
+  value: PropTypes$1.component,
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.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 = useScreenDefinition(),
+    _useScreenDefinition$ = _useScreenDefinition.fields,
+    fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$;
+  // const intl = useIntl();
+  // const finalOnClickDelete = useCallback(() => {
+  //     if (
+  //         onClickDelete !== null &&
+  //         window.confirm(
+  //             intl.formatMessage({
+  //                 defaultMessage: 'Are you sure you want to delete this screen?',
+  //                 description: 'Confirm message when deleting a screen',
+  //             }),
+  //         )
+  //     ) {
+  //         onClickDelete(value);
+  //     }
+  // }, [intl, onClickDelete, value]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$i.inner
+  }, fields !== null ? /*#__PURE__*/React.createElement(Fields, {
+    fields: fields,
+    value: value,
+    onChange: onChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  }) : null));
+};
+ScreenForm.propTypes = propTypes$m;
+ScreenForm.defaultProps = defaultProps$m;
+var ScreenForm$1 = ScreenForm;
+
+var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
+
+var propTypes$l = {
+  story: PropTypes$1.story,
+  screenId: PropTypes.string,
+  field: PropTypes.string,
+  form: PropTypes.string,
+  url: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+var defaultProps$l = {
+  story: null,
+  screenId: null,
+  field: null,
+  form: null,
+  className: null
+};
+var Breadcrumb = function Breadcrumb(_ref) {
+  var story = _ref.story,
+    screenId = _ref.screenId,
+    field = _ref.field,
+    form = _ref.form,
+    url = _ref.url,
+    className = _ref.className;
+  var intl = useIntl();
+  var _ref2 = story || {},
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
+  var screensManager = useScreensManager();
+  var fieldsManager = useFieldsManager();
+  var fieldsComponentManager = useFieldsComponentsManager();
+  var route = useUrlGenerator();
+  var _useMemo = useMemo(function () {
+      var screenIndex = screens.findIndex(function (it) {
+        return it.id === screenId;
+      });
+      if (!screens[screenIndex]) {
+        return {};
+      }
+      var _screens$screenIndex = screens[screenIndex],
+        type = _screens$screenIndex.type,
+        _screens$screenIndex$ = _screens$screenIndex.parameters,
+        parameters = _screens$screenIndex$ === void 0 ? null : _screens$screenIndex$;
+      var definition = screensManager.getDefinition(type);
+      var _ref3 = definition || {},
+        _ref3$states = _ref3.states,
+        states = _ref3$states === void 0 ? null : _ref3$states,
+        _ref3$title = _ref3.title,
+        definitionTitle = _ref3$title === void 0 ? null : _ref3$title;
+      return {
+        title: definitionTitle,
+        fields: definition !== null ? [].concat(_toConsumableArray(getScreenFieldsWithStates(definition)), [getScreenExtraField(intl)]) : null,
+        states: states,
+        parameters: parameters
+      };
+    }, [screens, screenId, screensManager, intl]),
+    _useMemo$title = _useMemo.title,
+    screenTitle = _useMemo$title === void 0 ? null : _useMemo$title,
+    _useMemo$fields = _useMemo.fields,
+    screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
+    _useMemo$states = _useMemo.states,
+    screenStates = _useMemo$states === void 0 ? null : _useMemo$states,
+    _useMemo$parameters = _useMemo.parameters,
+    screenParameters = _useMemo$parameters === void 0 ? null : _useMemo$parameters;
+  var items = useMemo(function () {
+    var fieldItems = [];
+    var currentState = null;
+    if (field !== null) {
+      var fieldPath = field.split('/');
+
+      // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
+      var _fieldPath = _slicedToArray(fieldPath, 1),
+        _fieldPath$ = _fieldPath[0],
+        stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
+      currentState = screenStates !== null ? screenStates.find(function (_ref4) {
+        var id = _ref4.id;
+        return id === stateId;
+      }) || null : null;
+      var finalFieldPath = fieldPath;
+      if (currentState !== null) {
+        var _ref5 = currentState || {},
+          _ref5$repeatable = _ref5.repeatable,
+          repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable,
+          _ref5$fieldName = _ref5.fieldName,
+          fieldName = _ref5$fieldName === void 0 ? null : _ref5$fieldName;
+        finalFieldPath = (repeatable || fieldName !== null) && fieldPath.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(fieldPath.slice(1))) : fieldPath.slice(1);
+      }
+      var lastKeyIndex = finalFieldPath.length - 1;
+      var parentItem = null;
+      finalFieldPath.reduce(function (currentFields, key, keyIndex) {
+        var _ref6 = currentFields || {},
+          _ref6$type = _ref6.type,
+          fieldType = _ref6$type === void 0 ? null : _ref6$type,
+          _ref6$fields = _ref6.fields,
+          currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
+          _ref6$itemsField = _ref6.itemsField,
+          currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
+        var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
+        var _ref7 = fieldsDef || {},
+          _ref7$fields = _ref7.fields,
+          defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
+          _ref7$settings = _ref7.settings,
+          settings = _ref7$settings === void 0 ? null : _ref7$settings,
+          _ref7$itemsField = _ref7.itemsField,
+          defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField,
+          _ref7$component = _ref7.component,
+          defComponent = _ref7$component === void 0 ? null : _ref7$component;
+        var _ref8 = fieldsComponentManager.getComponent(defComponent) || {},
+          _ref8$withForm = _ref8.withForm,
+          withForm = _ref8$withForm === void 0 ? false : _ref8$withForm;
+        var itemsField = currentItemsField || defItemsField;
+        var subFields = currentSubFields || defSubFields;
+        var finalSubField = subFields !== null ? getFieldByName(subFields, key) : null;
+        var finalSettingsField = settings !== null ? getFieldByName(settings, key) : null;
+        var isCurrentSubField = finalSubField !== null;
+        var isCurrentSettingsField = finalSettingsField !== null;
+        var isListItems = itemsField !== null && !!key.match(/^[0-9]+$/);
+        var isLastIndex = keyIndex === lastKeyIndex;
+        var pathPrefix = route('screen.field', {
+          screen: screenId,
+          field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(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);
+        if (parentItem !== null && (withForm || isCurrentSettingsField)) {
+          fieldItems.push(_objectSpread(_objectSpread({}, parentItem), {}, {
+            url: isCurrentSettingsField ? route('screen.field.form', {
+              screen: screenId,
+              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(finalFieldPath.slice(0, keyIndex))).filter(function (it) {
+                return it !== null;
+              }),
+              form: 'settings'
+            }) : route('screen.field', {
+              screen: screenId,
+              field: [currentState !== null ? currentState.id : null].concat(_toConsumableArray(finalFieldPath.slice(0, keyIndex))).filter(function (it) {
+                return it !== null;
+              })
+            })
+          }));
+        }
+        var nextField = null;
+        if (isCurrentSubField) {
+          nextField = finalSubField;
+        } else if (isCurrentSettingsField) {
+          nextField = finalSettingsField;
+        } else if (isListItems) {
+          nextField = itemsField;
+        }
+        var fieldLabel = nextField ? nextField.breadcrumbLabel || nextField.label : null;
+        var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
+        var _ref9 = parentItem || {},
+          _ref9$label = _ref9.label,
+          parentItemLabel = _ref9$label === void 0 ? null : _ref9$label;
+        var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
+        var item = {
+          url: itemPath,
+          label: finalItemLabel || '',
+          active: false
+        };
+        if (addNewItem) {
+          fieldItems.push(item);
+        }
+        parentItem = !addNewItem ? item : null;
+        return nextField;
+      }, {
+        fields: stateId === null ? screenFields : screenFields.filter(function (_ref10) {
+          var _ref10$stateId = _ref10.stateId,
+            fieldStateId = _ref10$stateId === void 0 ? null : _ref10$stateId;
+          return fieldStateId === null || fieldStateId === stateId;
+        })
+      });
+    }
+    var _ref11 = screenParameters || {},
+      _ref11$metadata = _ref11.metadata,
+      metadata = _ref11$metadata === void 0 ? null : _ref11$metadata;
+    var _ref12 = metadata || {},
+      _ref12$title = _ref12.title,
+      title = _ref12$title === void 0 ? null : _ref12$title;
+    var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(FormattedMessage, screenTitle) : null;
+    var parametersMessage = intl.formatMessage({
+      id: "AHvHaY",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Parameters"
+      }]
+    });
+    var defaultLabel = (fieldItems || []).length === 0 ? title || typeTitle || parametersMessage : parametersMessage;
+    var finalItems = [currentState === null || (currentState.repeatable || false) === false ? {
+      label: currentState !== null ? currentState.label : defaultLabel,
+      url: currentState !== null ? route('screen.field', {
+        screen: screenId,
+        field: currentState.id
+      }) : route('screen', {
+        screen: screenId
+      }),
+      active: false
+    } : null].concat(fieldItems).filter(function (it) {
+      return it !== null;
+    });
+    var lastItemsIndex = finalItems.length - 1;
+    return finalItems.map(function (it, index) {
+      return index === lastItemsIndex ? _objectSpread(_objectSpread({}, it), {}, {
+        url: url,
+        active: true
+      }) : it;
+    });
+  }, [intl, route, screenId, field, form, url, screenFields, screenStates, screenTitle, fieldsManager]);
+  var itemsLength = items.length;
+  var onClickBack = useCallback(function () {
+    setLocation(items[itemsLength - 2].url);
+  }, [items, setLocation, itemsLength]);
+  var withBack = itemsLength > 1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(BackButton, {
+    onClick: onClickBack,
+    className: "me-2 py-0"
+  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$2, {
+    items: items,
+    theme: "secondary",
+    withoutBar: true,
+    noWrap: true,
+    className: classNames([styles$h.container, 'text-truncate', _defineProperty({}, className, className !== null)])
+  }));
+};
+Breadcrumb.propTypes = propTypes$l;
+Breadcrumb.defaultProps = defaultProps$l;
+var Breadcrumb$1 = Breadcrumb;
+
+var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+
+var propTypes$k = {
+  className: PropTypes.string,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
+};
+var defaultProps$k = {
+  className: null,
+  onConfirm: null,
+  onCancel: null
+};
+var DeleteScreenModal = function DeleteScreenModal(_ref) {
+  var className = _ref.className,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel;
+  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "p6q/+/",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Delete screen"
+      }]
+    }),
+    className: classNames([styles$g.container, _defineProperty({}, className, className)]),
+    onClose: onCancel
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.description
+  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "q/tLk0",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Are you sure you want to delete this screen?"
+    }]
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styles$g.actions
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: onCancel,
+    className: "btn-outline-secondary me-2"
+  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "0GT0SI",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  }))), /*#__PURE__*/React.createElement(Button, {
+    onClick: onConfirm,
+    theme: "danger",
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "gRxcTc",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Delete screen"
+      }]
+    })
+  }))));
+};
+DeleteScreenModal.propTypes = propTypes$k;
+DeleteScreenModal.defaultProps = defaultProps$k;
+var DeleteScreenModal$1 = DeleteScreenModal;
+
+var styles$f = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterRight":"micromag-editor-form-enterRight","enterLeft":"micromag-editor-form-enterLeft","enterTop":"micromag-editor-form-enterTop","enterBottom":"micromag-editor-form-enterBottom","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveTop":"micromag-editor-form-exitActiveTop","exitActiveBottom":"micromag-editor-form-exitActiveBottom"};
+
+var propTypes$j = {
+  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  isTheme: PropTypes.bool,
+  className: PropTypes.string,
+  onChange: PropTypes.func
+};
+var defaultProps$j = {
+  value: null,
+  isTheme: false,
+  className: null,
+  onChange: null
+};
+var EditForm = function EditForm(_ref) {
+  var value = _ref.value,
+    isTheme = _ref.isTheme,
+    className = _ref.className,
+    onChange = _ref.onChange;
+  // Match routes
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
+  var routePush = useRoutePush();
+  var _useRouteParams = useRouteParams(),
+    url = _useRouteParams.url,
+    _useRouteParams$scree = _useRouteParams.screen,
+    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+    _useRouteParams$field = _useRouteParams.field,
+    fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
+    _useRouteParams$form = _useRouteParams.form,
+    formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form;
+
+  // Get screen
+  var _ref2 = value || {},
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
+  var screenIndex = screens.findIndex(function (it) {
+    return it.id === screenId;
+  });
+  var screen = screenIndex !== -1 ? screens[screenIndex] : null;
+  var screensManager = useScreensManager();
+  var screenFields = useMemo(function () {
+    var _ref3 = screen || {},
+      type = _ref3.type;
+    var definition = type !== null ? screensManager.getDefinition(type) : null;
+    return definition != null ? getScreenFieldsWithStates(definition) : [];
+  }, [screensManager, screen]);
+
+  // Get transition value
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$f),
+    transitionClassNames = _useFormTransition.classNames,
+    transitionTimeout = _useFormTransition.timeout;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    screenSettingsOpened = _useState2[0],
+    setScreenSettingsOpened = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deleteScreenModalOpened = _useState4[0],
+    setDeleteScreenModalOpened = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    fieldForms = _useState6[0],
+    setFieldForms = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fieldContext = _useState8[0],
+    setFieldContext = _useState8[1];
+
+  // Callbacks
+  var gotoFieldForm = useCallback(function () {
+    var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var hasField = field !== null;
+    var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
+    var _ref4 = field !== null ? field.split('.') : [],
+      _ref5 = _slicedToArray(_ref4, 1),
+      _ref5$ = _ref5[0],
+      rootFieldName = _ref5$ === void 0 ? null : _ref5$;
+    var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
+      _ref7 = _slicedToArray(_ref6, 1),
+      _ref7$ = _ref7[0],
+      currentStateId = _ref7$ === void 0 ? null : _ref7$;
+    var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
+        var name = _ref9.name,
+          fieldStateId = _ref9.stateId;
+        return name === rootFieldName && currentStateId === fieldStateId;
+      }) || null : null) || {},
+      _ref8$stateId = _ref8.stateId,
+      stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
+    routePush(hasField ? fieldRoute : 'screen', {
+      screen: screenId,
+      field: field !== null ? [stateId].concat(_toConsumableArray(field.split('.'))).filter(function (it) {
+        return it !== null;
+      }) : null,
+      form: formName !== null ? slug(formName) : null
+    });
+    var nextFieldForms = _objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url));
+    setFieldForms(nextFieldForms);
+    setFieldContext(context);
+  }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
+  var closeFieldForm = useCallback(function (field) {
+    var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
+    var pastUrl = fieldForms[fieldKey] || null;
+    if (pastUrl !== null) {
+      setLocation(pastUrl);
+    }
+    setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
+      return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
+    }, {}));
+  }, [setLocation, screenId, fieldForms, setFieldForms]);
+  var triggerOnChange = useCallback(function (newValue) {
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  }, [onChange]);
+  var onScreenFormChange = useCallback(function (newScreenValue) {
+    triggerOnChange(updateScreen(value, newScreenValue));
+  }, [value, triggerOnChange]);
+  var onClickDuplicate = useCallback(function () {
+    triggerOnChange(duplicateScreen(value, screenId, screenIndex));
+    setScreenSettingsOpened(false);
+  }, [value, screenId, screenIndex, triggerOnChange, setScreenSettingsOpened]);
+  var onClickDelete = useCallback(function () {
+    setDeleteScreenModalOpened(true);
+    setScreenSettingsOpened(false);
+  }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
+  var onSettingsClick = useCallback(function () {
+    setScreenSettingsOpened(!screenSettingsOpened);
+  }, [screenSettingsOpened, setScreenSettingsOpened]);
+  var onDropdownClickOutside = useCallback(function () {
+    setScreenSettingsOpened(false);
+  }, [setScreenSettingsOpened]);
+  var onDeleteScreenConfirm = useCallback(function () {
+    var current = screens.findIndex(function (_ref10) {
+      var _ref10$id = _ref10.id,
+        scrId = _ref10$id === void 0 ? null : _ref10$id;
+      return scrId === screenId;
+    }) || 0;
+    var previous = screens.find(function (_ref11, i) {
+      var _ref11$id = _ref11.id,
+        scrId = _ref11$id === void 0 ? null : _ref11$id;
+      return scrId !== screenId && (i === current - 1 || current === 0);
+    }) || null;
+    if (previous !== null) {
+      var _ref12 = previous || {},
+        _ref12$id = _ref12.id,
+        firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
+      routePush('screen', {
+        screen: firstScreenId
+      });
+    }
+    triggerOnChange(deleteScreen(value, screenId));
+    setDeleteScreenModalOpened(false);
+  }, [value, triggerOnChange, screenId, setScreenSettingsOpened, routePush, screens]);
+  var onDeleteScreenCancel = useCallback(function () {
+    setDeleteScreenModalOpened(false);
+  }, [setDeleteScreenModalOpened]);
+  var dropdownItems = [!isTheme ? {
+    id: 'duplicate',
+    type: 'button',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "IBjY5r",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Duplicate screen"
+      }]
+    }),
+    onClick: onClickDuplicate
+  } : null, {
+    id: 'delete',
+    type: 'button',
+    label: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "hpiKce",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Delete screen"
+      }]
+    }),
+    onClick: onClickDelete
+  }].filter(function (it) {
+    return it !== null;
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['d-flex', 'flex-column', className])
+  }, screenId !== null ? /*#__PURE__*/React.createElement(Navbar, {
+    compact: true,
+    noWrap: true,
+    withoutCollapse: true,
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
+  }, /*#__PURE__*/React.createElement(Breadcrumb$1, {
+    story: value,
+    url: url,
+    screenId: screenId,
+    field: fieldParams,
+    form: formParams,
+    className: "me-auto"
+  }), fieldParams === null ? /*#__PURE__*/React.createElement("div", {
+    className: "dropdown"
+  }, /*#__PURE__*/React.createElement(SettingsButton$1, {
+    onClick: onSettingsClick,
+    dots: true,
+    className: "py-0",
+    theme: "default"
+  }), /*#__PURE__*/React.createElement(DropdownMenu, {
+    align: "end",
+    items: dropdownItems,
+    visible: screenSettingsOpened,
+    onClickOutside: onDropdownClickOutside
+  })) : null) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$f.content])
+  }, screen !== null ? /*#__PURE__*/React.createElement(TransitionGroup, {
+    className: "w-100 flex-grow-1",
+    childFactory: function childFactory(child) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        classNames: transitionClassNames
+      });
+    }
+  }, fieldParams !== null ? /*#__PURE__*/React.createElement(CSSTransition, {
+    timeout: transitionTimeout,
+    key: "field-".concat(fieldParams, "-").concat(formParams)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$f.panel])
+  }, /*#__PURE__*/React.createElement(ScreenProvider, {
+    data: screen
+  }, /*#__PURE__*/React.createElement(FieldWithContexts$1, {
+    name: fieldParams.replace(/\//g, '.'),
+    value: screen,
+    form: formParams,
+    className: styles$f.form,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    fieldContext: fieldContext,
+    onChange: onScreenFormChange
+  })))) : /*#__PURE__*/React.createElement(CSSTransition, {
+    classNames: transitionClassNames,
+    timeout: transitionTimeout,
+    key: "screen-".concat(screen.id)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$f.panel]),
+    key: "screen-".concat(screen.id)
+  }, /*#__PURE__*/React.createElement(ScreenProvider, {
+    data: screen
+  }, /*#__PURE__*/React.createElement(ScreenForm$1, {
+    value: screen,
+    className: styles$f.form,
+    onChange: onScreenFormChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  }))))) : /*#__PURE__*/React.createElement(Empty, {
+    className: "w-100 m-2"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "QfpTKK",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Select a screen..."
+    }],
+    decription: "Indication to select a screen to view the form"
+  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal$1, {
+    onConfirm: onDeleteScreenConfirm,
+    onCancel: onDeleteScreenCancel
+  }) : null);
+};
+EditForm.propTypes = propTypes$j;
+EditForm.defaultProps = defaultProps$j;
+var EditorForm = EditForm;
+
+function useScreenStates(screen) {
+  var _ref = screen || {},
+    type = _ref.type;
+  var screensManager = useScreensManager();
+  var states = 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"];
+var useThemeValue = function useThemeValue(value) {
+  var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var valueWithTheme = useMemo(function () {
+    if (!isTheme) {
+      return value;
+    }
+    var _ref = value || {};
+      _ref.components;
+      var themeValue = _objectWithoutProperties(_ref, _excluded$7);
+    return value !== null ? _objectSpread({
+      theme: themeValue
+    }, value) : value;
+  }, [value, isTheme]);
+  return valueWithTheme;
+};
+
+var styles$e = {"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$i = {
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$i = {
+  color: 'currentColor',
+  className: null
+};
+var DesktopIcon = function DesktopIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    version: "1.1",
+    x: "0px",
+    y: "0px",
+    width: "100px",
+    height: "100px",
+    viewBox: "0 0 100 100",
+    xmlSpace: "preserve",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M84 17H16c-3.3 0-6 2.7-6 6v42c0 3.3 2.7 6 6 6h22v4.2c-.1.4-.9 1.5-1.3 2-1.1 1.4-2.2 2.8-1.4 4.4.3.7 1.1 1.4 2.7 1.4h23c1 0 3.3 0 4.1-1.8.8-1.8-.6-3.2-1.8-4.5-.4-.5-1.1-1.2-1.3-1.6V71h22c3.3 0 6-2.7 6-6V23c0-3.3-2.7-6-6-6zM40.3 79c.9-1.1 1.7-2.4 1.7-3.8V71h16v4.2c0 1.4 1 2.7 2 3.8H40.3zM86 65c0 1.1-.9 2-2 2H16c-1.1 0-2-.9-2-2v-6h72v6zm0-10H14V23c0-1.1.9-2 2-2h68c1.1 0 2 .9 2 2v32z"
+  }));
+};
+DesktopIcon.propTypes = propTypes$i;
+DesktopIcon.defaultProps = defaultProps$i;
+var DesktopIcon$1 = DesktopIcon;
+
+/* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
+var propTypes$h = {
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$h = {
+  color: 'currentColor',
+  className: null
+};
+var MobileIcon = function MobileIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    version: "1.1",
+    x: "0px",
+    y: "0px",
+    width: "100px",
+    height: "100px",
+    viewBox: "0 0 100 100",
+    xmlSpace: "preserve",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "M66 11H34c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6V17c0-3.3-2.7-6-6-6zm2 72c0 1.1-.9 2-2 2H34c-1.1 0-2-.9-2-2v-4h36v4zm0-8H32V25h36v50zm0-54H32v-4c0-1.1.9-2 2-2h32c1.1 0 2 .9 2 2v4z"
+  }));
+};
+MobileIcon.propTypes = propTypes$h;
+MobileIcon.defaultProps = defaultProps$h;
+var MobileIcon$1 = MobileIcon;
+
+var DeviceIcons = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Desktop: DesktopIcon$1,
+    Mobile: MobileIcon$1
+});
+
+var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+
+var _excluded$6 = ["device", "className", "iconComponents"];
+var propTypes$g = {
+  device: PropTypes.string.isRequired,
+  iconComponents: PropTypes$1.components,
+  className: PropTypes.string
+};
+var defaultProps$g = {
+  iconComponents: DeviceIcons,
+  className: null
+};
+var DeviceButton = function DeviceButton(_ref) {
+  var device = _ref.device,
+    className = _ref.className,
+    iconComponents = _ref.iconComponents,
+    props = _objectWithoutProperties(_ref, _excluded$6);
+  var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon$1);
+  return /*#__PURE__*/React.createElement(Button, Object.assign({
+    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
+  }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
+    className: styles$d.icon
+  }));
+};
+DeviceButton.propTypes = propTypes$g;
+DeviceButton.defaultProps = defaultProps$g;
+var DeviceButton$1 = DeviceButton;
+
+var _excluded$5 = ["id"];
+var propTypes$f = {
+  items: PropTypes$1.menuItems,
+  className: PropTypes.string,
+  onClickItem: PropTypes.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.createElement(Tabs, {
+    items: items,
+    theme: "outline-secondary",
+    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
+    renderItemButton: function renderItemButton(item, index, props) {
+      var id = item.id,
+        itemProps = _objectWithoutProperties(item, _excluded$5);
+      return /*#__PURE__*/React.createElement(DeviceButton$1, Object.assign({
+        device: id
+      }, props, itemProps, {
+        className: styles$e.button,
+        onClick: function onClick(e) {
+          return onClickItem !== null ? onClickItem(e, item, index) : null;
+        }
+      }));
+    }
+  });
+};
+DevicesMenu.propTypes = propTypes$f;
+DevicesMenu.defaultProps = defaultProps$f;
+var DevicesMenu$1 = DevicesMenu;
+
+var styles$c = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","border":"micromag-editor-buttons-screen-border","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
+
+var propTypes$e = {
+  active: PropTypes.bool,
+  id: PropTypes.string,
+  href: PropTypes.string,
+  label: PropTypes$1.label,
+  icon: PropTypes.node,
+  title: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node,
+  refButton: PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+  }),
+  className: PropTypes.string
+};
+var defaultProps$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 active = _ref.active,
+    id = _ref.id,
+    href = _ref.href,
+    className = _ref.className,
+    label = _ref.label,
+    icon = _ref.icon,
+    children = _ref.children,
+    title = _ref.title,
+    onClick = _ref.onClick,
+    refButton = _ref.refButton;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$c.container, 'rounded', _defineProperty(_defineProperty({}, styles$c.active, active), className, className !== null)])
+  }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
+    className: styles$c.screen
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$c.inner
+  }, icon !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$c.icon
+  }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$c.label
+  }, label) : null)), /*#__PURE__*/React.createElement(Button, {
+    className: styles$c.button,
+    withoutStyle: true,
+    id: id,
+    href: href,
+    title: title,
+    onClick: onClick,
+    refButton: refButton
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$c.border, 'rounded'])
+  })));
+};
+ScreenButton.propTypes = propTypes$e;
+ScreenButton.defaultProps = defaultProps$e;
+var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(ScreenButton, Object.assign({}, props, {
+    refButton: ref
+  }));
+});
+
+var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","name":"micromag-editor-buttons-screen-with-preview-name","index":"micromag-editor-buttons-screen-with-preview-index","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
+
+var propTypes$d = {
+  screen: PropTypes$1.screenComponent,
+  screenState: PropTypes.string,
+  index: PropTypes.number.isRequired,
+  href: PropTypes.string,
+  title: PropTypes.string,
+  active: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  withIndexIndicator: PropTypes.bool,
+  withName: PropTypes.bool,
+  withDeleteButtonOnRepeatables: PropTypes.bool,
+  onClick: PropTypes.func,
+  onClickItem: PropTypes.func,
+  onDeleteButtonClick: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$d = {
+  screen: null,
+  screenState: null,
+  title: null,
+  href: null,
+  active: false,
+  withPlaceholder: false,
+  withIndexIndicator: false,
+  withName: false,
+  withDeleteButtonOnRepeatables: false,
+  onClick: null,
+  onClickItem: null,
+  onDeleteButtonClick: null,
+  className: null
+};
+var ScreenWithPreview = function ScreenWithPreview(_ref) {
+  var screen = _ref.screen,
+    screenState = _ref.screenState,
+    index = _ref.index,
+    title = _ref.title,
+    href = _ref.href,
+    active = _ref.active,
+    className = _ref.className,
+    _onClick = _ref.onClick,
+    onClickItem = _ref.onClickItem,
+    withName = _ref.withName,
+    withPlaceholder = _ref.withPlaceholder,
+    withIndexIndicator = _ref.withIndexIndicator,
+    withDeleteButtonOnRepeatables = _ref.withDeleteButtonOnRepeatables,
+    onDeleteButtonClick = _ref.onDeleteButtonClick;
+  var intl = useIntl();
+  var _useIsVisible = useIsVisible({
+      threshold: 0.1
+    }),
+    ref = _useIsVisible.ref,
+    visible = _useIsVisible.visible;
+  var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
+  var finalTitle = isMessage(title) ? intl.formatMessage(title) : title || null;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(ScreenButton$1, {
+    href: href,
+    active: active,
+    className: classNames([styles$b.button, _defineProperty(_defineProperty({}, className, className !== null), styles$b.withIndex, withIndexIndicator || withName)]),
+    title: finalTitle,
+    onClick: function onClick() {
+      if (_onClick !== null) {
+        _onClick(screen, index);
+      }
+      if (onClickItem !== null) {
+        onClickItem(screen, index);
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ScreenComponent, {
+    screen: screen,
+    screenState: screenState,
+    className: styles$b.screen,
+    hidden: !visible,
+    withSize: true
+  }), index !== null && withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.index
+  }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.name
+  }, finalTitle || null) : null, withDeleteButtonOnRepeatables ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.deleteButton,
+    onClick: onDeleteButtonClick
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimesCircle
+  })) : null));
+};
+ScreenWithPreview.propTypes = propTypes$d;
+ScreenWithPreview.defaultProps = defaultProps$d;
+var ScreenWithPreview$1 = ScreenWithPreview;
+
+var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
+
+var propTypes$c = {
+  screen: PropTypes$1.screen.isRequired,
+  screenState: PropTypes.string,
+  value: PropTypes$1.story.isRequired,
+  className: PropTypes.string,
+  onChange: PropTypes.func
+};
+var defaultProps$c = {
+  screenState: null,
+  className: null,
+  onChange: null
+};
+function ScreenStates(_ref) {
+  var screen = _ref.screen,
+    value = _ref.value,
+    className = _ref.className,
+    onChange = _ref.onChange;
+  var url = useUrlGenerator();
+  var push = useRoutePush();
+  var _useRouteParams = useRouteParams(),
+    _useRouteParams$scree = _useRouteParams.screen,
+    screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
+    _useRouteParams$field = _useRouteParams.field,
+    field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
+  var states = useScreenStates(screen);
+  var _ref2 = field !== null ? field.split('/') : [],
+    _ref3 = _toArray(_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.createElement("div", {
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex align-items-end m-n1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "p-1 align-self-stretch d-flex flex-column"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: classNames(['fw-normal', 'invisible', styles$a.title])
+  }, "Settings"), /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
+    theme: screenParam !== null && field === null ? 'primary' : 'secondary',
+    outline: screenParam === null || field !== null,
+    size: "lg",
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: 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$withoutCreate = state.withoutCreate,
+      withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
+      _state$fieldName = state.fieldName,
+      fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
+    var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
+    var onClickAdd = function onClickAdd() {
+      var _ref6 = value || {},
+        _ref6$components = _ref6.components,
+        currentComponentsValue = _ref6$components === void 0 ? [] : _ref6$components;
+      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(_objectSpread({}, value), {}, {
+        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, [].concat(_toConsumableArray(currentFieldValue), [{}])))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+      });
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+      push('screen.field', {
+        screen: screen.id,
+        field: [id, currentFieldValue.length]
+      });
+    };
+    var onClickDelete = function onClickDelete(indexToDelete) {
+      var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentComponentsValue = _ref8$components === void 0 ? [] : _ref8$components;
+      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref9) {
+        var screenId = _ref9.id;
+        return screen.id === screenId;
+      });
+      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+      currentScreenValue[fieldName || id] || [];
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, (currentScreenValue[fieldName || id] || []).filter(function (_, index) {
+          return index !== indexToDelete;
+        })))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+      });
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+      push('screen', {
+        screen: screen.id
+      });
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-1 align-self-stretch d-flex flex-column"
+    }, /*#__PURE__*/React.createElement("h6", {
+      className: classNames(['fw-normal', 'text-body-secondary', styles$a.title])
+    }, /*#__PURE__*/React.createElement(FormattedMessage, label)), repeatable ? /*#__PURE__*/React.createElement("ul", {
+      className: "d-flex list-unstyled m-n1 flex-grow-1"
+    }, repeatableItems.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("li", {
+        className: "p-1"
+      }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
+        index: index,
+        withIndexIndicator: true,
+        withDeleteButtonOnRepeatables: true,
+        screen: screen,
+        screenState: "".concat(id, ".").concat(index),
+        className: styles$a.button,
+        active: currentState !== null && id === currentState.split('.')[0] && stateIndex !== null && parseInt(stateIndex, 10) === index,
+        href: url('screen.field', {
+          screen: screen.id,
+          field: [id, index]
+        }),
+        onDeleteButtonClick: function onDeleteButtonClick() {
+          return onClickDelete(index);
+        }
+      }));
+    }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
+      className: "p-1"
+    }, /*#__PURE__*/React.createElement(Button, {
+      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
+      theme: "secondary",
+      outline: true,
+      size: "lg",
+      icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faPlus
+      }),
+      onClick: onClickAdd
+    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
+      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);
+      //     }
+      // }}
+    }));
+  })));
+}
+ScreenStates.propTypes = propTypes$c;
+ScreenStates.defaultProps = defaultProps$c;
+
+var styles$9 = {"container":"micromag-editor-preview-container","story":"micromag-editor-preview-story","noStory":"micromag-editor-preview-noStory","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","devices":"micromag-editor-preview-devices"};
+
+var propTypes$b = {
+  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  devices: PropTypes$1.devices,
+  device: PropTypes.string,
+  viewerTheme: PropTypes$1.viewerTheme,
+  isTheme: PropTypes.bool,
+  className: PropTypes.string,
+  onScreenChange: PropTypes.func,
+  onChange: PropTypes.func,
+  withoutDevicesSizes: PropTypes.bool
+};
+var defaultProps$b = {
+  value: null,
+  devices: [{
+    id: 'mobile',
+    width: 320,
+    height: 480
+  }, {
+    id: 'desktop',
+    width: 1200,
+    height: 900
+  }],
+  device: 'mobile',
+  viewerTheme: null,
+  isTheme: false,
+  className: null,
+  onScreenChange: null,
+  onChange: null,
+  withoutDevicesSizes: true
+};
+var EditorPreview = function EditorPreview(_ref) {
+  var value = _ref.value,
+    viewerTheme = _ref.viewerTheme,
+    isTheme = _ref.isTheme,
+    devices = _ref.devices,
+    initialDevice = _ref.device,
+    className = _ref.className,
+    onScreenChange = _ref.onScreenChange,
+    onChange = _ref.onChange,
+    withoutDevicesSizes = _ref.withoutDevicesSizes;
+  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 = useScreenSize(),
+    _useScreenSize$screen = _useScreenSize.screen,
+    screen = _useScreenSize$screen === void 0 ? null : _useScreenSize$screen,
+    _useScreenSize$screen2 = _useScreenSize.screens,
+    screens = _useScreenSize$screen2 === void 0 ? [] : _useScreenSize$screen2;
+  var valueWithTheme = useThemeValue(value, isTheme);
+  // const valueParsed = valueWithTheme;
+  var valueParsed = useParsedStory(valueWithTheme, {
+    withTheme: isTheme,
+    withMedias: false
+  });
+
+  // Get device
+  var _useState = useState(initialDevice || devices[0].id),
+    _useState2 = _slicedToArray(_useState, 2),
+    deviceId = _useState2[0],
+    setDeviceId = _useState2[1];
+  var onClickDeviceItem = useCallback(function (e, it) {
+    return setDeviceId(it.id);
+  }, [setDeviceId]);
+  var device = useMemo(function () {
+    return devices.find(function (it) {
+      return it.id === deviceId;
+    });
+  }, [devices, deviceId]);
+
+  // Calculate preview style
+  var _useDimensionObserver = useDimensionObserver(),
+    bottomRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
+  var previewStyle = useMemo(function () {
+    if (withoutDevicesSizes && initialDevice === null) {
+      return {};
+    }
+    var deviceWidth = device.width,
+      deviceHeight = device.height;
+    var maxWidth = screen === 'mobile' ? bottomWidth : deviceWidth;
+    var maxHeight = screen === 'mobile' ? bottomHeight : deviceHeight;
+    var _getSizeWithinBounds = getSizeWithinBounds(maxWidth, maxHeight, bottomWidth, bottomHeight),
+      previewScale = _getSizeWithinBounds.scale;
+    return {
+      width: maxWidth * previewScale,
+      height: maxHeight * previewScale
+      // transform: `scale(${previewScale}, ${previewScale})`,
+    };
+  }, [device, bottomWidth, bottomHeight, screen, withoutDevicesSizes, initialDevice]);
+  var currentScreen = useMemo(function () {
+    var _ref2 = valueParsed || {},
+      _ref2$components = _ref2.components,
+      components = _ref2$components === void 0 ? [] : _ref2$components;
+    return (screenId !== null ? components.find(function (_ref3) {
+      var id = _ref3.id;
+      return id === screenId;
+    }) : components[0]) || null;
+  }, [valueParsed, screenId]);
+  var currentScreenStates = useScreenStates(currentScreen);
+  var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
+    _ref5 = _slicedToArray(_ref4, 1),
+    _ref5$ = _ref5[0],
+    screenStateParam = _ref5$ === void 0 ? null : _ref5$;
+  var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
+    var id = _ref6.id;
+    return id === screenStateParam;
+  }) || null : null;
+  var _ref7 = currentScreenState || {},
+    _ref7$id = _ref7.id,
+    screenStateId = _ref7$id === void 0 ? null : _ref7$id,
+    _ref7$repeatable = _ref7.repeatable,
+    repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
+  var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
+    return it.match(/^[0-9]+$/) !== null;
+  }) || 0) : screenStateId;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.container, screens.map(function (screenName) {
+      return styles$9["screen-".concat(screenName)];
+    }), _defineProperty(_defineProperty({}, className, className), styles$9.withoutDevicesSizes, withoutDevicesSizes)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.inner
+  }, currentScreenStates !== null && currentScreen !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.top, 'px-1'])
+  }, /*#__PURE__*/React.createElement(ScreenStates, {
+    screen: currentScreen,
+    screenState: currentScreenStateId,
+    value: value,
+    onChange: onChange
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.bottom
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.inner,
+    ref: bottomRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.preview,
+    style: previewStyle
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.viewerContainer
+  }, /*#__PURE__*/React.createElement(PlaybackProvider, null, /*#__PURE__*/React.createElement(Viewer, {
+    story: valueParsed,
+    storyIsParsed: true,
+    screen: screenId,
+    screenState: currentScreenStateId,
+    className: styles$9.story,
+    theme: viewerTheme,
+    interactions: null,
+    renderContext: "edit",
+    onScreenChange: onScreenChange,
+    withoutNavigationArrow: true,
+    withoutTransitions: true,
+    withoutGestures: true,
+    withoutMenu: true
+  })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
+    className: styles$9.deviceMenu
+  }, /*#__PURE__*/React.createElement(DevicesMenu$1, {
+    items: devices.map(function (it) {
+      return _objectSpread(_objectSpread({}, it), {}, {
+        active: it.id === deviceId
+      });
+    }),
+    onClickItem: onClickDeviceItem,
+    className: styles$9.devices
+  })) : null));
+};
+EditorPreview.propTypes = propTypes$b;
+EditorPreview.defaultProps = defaultProps$b;
+var EditorPreview$1 = EditorPreview;
+
+var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
+function getDragDepth(offset, indentationWidth) {
+  return Math.round(offset / indentationWidth);
+}
+function getMaxDepth(_ref) {
+  var previousItem = _ref.previousItem;
+  if (previousItem) {
+    // return previousItem.depth + 1;
+    return 1;
+  }
+  return 0;
+}
+function getMinDepth(_ref2) {
+  var nextItem = _ref2.nextItem;
+  if (nextItem) {
+    // return nextItem.depth;
+    return 0;
+  }
+  return 0;
+}
+function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
+  var overItemIndex = items.findIndex(function (_ref3) {
+    var id = _ref3.id;
+    return id === overId;
+  });
+  var activeItemIndex = items.findIndex(function (_ref4) {
+    var id = _ref4.id;
+    return id === activeId;
+  });
+  var activeItem = items[activeItemIndex];
+  var newItems = arrayMove(items, activeItemIndex, overItemIndex);
+  var previousItem = newItems[overItemIndex - 1];
+  var nextItem = newItems[overItemIndex + 1];
+  var dragDepth = getDragDepth(dragOffset, indentationWidth);
+  var projectedDepth = activeItem.depth + dragDepth;
+  var maxDepth = getMaxDepth({
+    previousItem: previousItem
+  });
+  var minDepth = getMinDepth({
+    nextItem: nextItem
+  });
+  var depth = projectedDepth;
+  if (projectedDepth >= maxDepth) {
+    depth = maxDepth;
+  } else if (projectedDepth < minDepth) {
+    depth = minDepth;
+  }
+  function getParentId() {
+    var _newItems$slice$rever;
+    if (depth === 0 || !previousItem) {
+      return null;
+    }
+    if (depth === previousItem.depth) {
+      return previousItem.parentId;
+    }
+    if (depth > previousItem.depth) {
+      return previousItem.id;
+    }
+    var newParent = (_newItems$slice$rever = newItems.slice(0, overItemIndex).reverse().find(function (item) {
+      return item.depth === depth;
+    })) === null || _newItems$slice$rever === void 0 ? void 0 : _newItems$slice$rever.parentId;
+    return newParent !== null && newParent !== void 0 ? newParent : null;
+  }
+  return {
+    depth: depth,
+    maxDepth: maxDepth,
+    minDepth: minDepth,
+    parentId: getParentId()
+  };
+}
+function flatten(items) {
+  var parentId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return items.reduce(function (acc, item, index) {
+    return [].concat(_toConsumableArray(acc), [_objectSpread(_objectSpread({}, item), {}, {
+      parentId: item.parentId || parentId,
+      depth: item.parentId ? 1 : 0,
+      index: index // For some reason this aint enough
+    })], _toConsumableArray(flatten(item.children || [], item.id, depth + 1)));
+  }, []);
+}
+function flattenTree(items) {
+  return flatten(items);
+}
+function findItem(items, itemId) {
+  return items.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === itemId;
+  });
+}
+function buildTree(flattenedItems) {
+  var root = {
+    id: 'root',
+    children: []
+  };
+  var nodes = _defineProperty({}, root.id, root);
+  var items = flattenedItems.map(function (item) {
+    return _objectSpread(_objectSpread({}, item), {}, {
+      children: []
+    });
+  });
+  // console.log('BUILD');
+  var indexes = {};
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator = _createForOfIteratorHelper(items),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item$parentId, _nodes$parentId;
+      var item = _step.value;
+      var id = item.id,
+        children = item.children;
+      var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
+      var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
+      if (typeof indexes[parentId] !== 'undefined') {
+        indexes[parentId] += 1;
+      } else {
+        indexes[parentId] = 0;
+      }
+      nodes[id] = {
+        id: id,
+        children: children,
+        index: indexes[parentId]
+      };
+      parent.children.push(_objectSpread(_objectSpread({}, item), {}, {
+        index: indexes[parentId]
+      }));
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return root.children;
+}
+function findItemDeep(items, itemId) {
+  for (var i = 0; i < items.length; i += 1) {
+    var item = items[i] || {};
+    var id = item.id,
+      _item$children = item.children,
+      children = _item$children === void 0 ? [] : _item$children;
+    if (id === itemId) {
+      return item;
+    }
+    if (children.length > 0) {
+      var child = findItemDeep(children, itemId);
+      if (child) {
+        return child;
+      }
+    }
+  }
+  return undefined;
+}
+function removeItem(items, id) {
+  var newItems = [];
+
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator2 = _createForOfIteratorHelper(items),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var item = _step2.value;
+      if (item.id === id) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      if (item.children.length) {
+        item.children = removeItem(item.children, id);
+      }
+      newItems.push(item);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  return newItems;
+}
+function setProperty(items, id, property, setter) {
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator3 = _createForOfIteratorHelper(items),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var item = _step3.value;
+      if (item.id === id) {
+        item[property] = setter(item[property]);
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+      if (item.children.length) {
+        item.children = setProperty(item.children, id, property, setter);
+      }
+    }
+  } catch (err) {
+    _iterator3.e(err);
+  } finally {
+    _iterator3.f();
+  }
+  return _toConsumableArray(items);
+}
+function countChildren(items) {
+  var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return items.reduce(function (acc, _ref6) {
+    var _ref6$children = _ref6.children,
+      children = _ref6$children === void 0 ? [] : _ref6$children;
+    if (children.length) {
+      return countChildren(children, acc + 1);
+    }
+    return acc + 1;
+  }, count);
+}
+function getChildCount(items, id) {
+  if (!id) {
+    return 0;
+  }
+  var item = findItemDeep(items, id);
+  return item ? countChildren(item.children || []) : 0;
+}
+function removeChildrenOf(items, ids) {
+  var excludeParentIds = _toConsumableArray(ids);
+  return items.filter(function (item) {
+    if (item.parentId && excludeParentIds.includes(item.parentId)) {
+      var _item$children2 = item.children,
+        children = _item$children2 === void 0 ? [] : _item$children2;
+      if (children.length) {
+        excludeParentIds.push(item.id);
+      }
+      return false;
+    }
+    return true;
+  });
+}
+
+var directions = [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+var horizontal = [KeyboardCode.Left, KeyboardCode.Right];
+var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(context, indentationWidth) {
+  return function (event, _ref) {
+    var currentCoordinates = _ref.currentCoordinates,
+      _ref$context = _ref.context,
+      active = _ref$context.active,
+      over = _ref$context.over,
+      collisionRect = _ref$context.collisionRect,
+      droppableContainers = _ref$context.droppableContainers;
+    if (directions.includes(event.code)) {
+      var _droppableContainers$;
+      if (!active || !collisionRect) {
+        return;
+      }
+      event.preventDefault();
+      var _context$current = context.current,
+        items = _context$current.items,
+        offset = _context$current.offset;
+      if (horizontal.includes(event.code) && over !== null && over !== void 0 && over.id) {
+        var _getProjection = getProjection(items, active.id, over.id, offset, indentationWidth),
+          depth = _getProjection.depth,
+          maxDepth = _getProjection.maxDepth,
+          minDepth = _getProjection.minDepth;
+        switch (event.code) {
+          case KeyboardCode.Left:
+            if (depth > minDepth) {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+                x: currentCoordinates.x - indentationWidth
+              });
+            }
+            break;
+          case KeyboardCode.Right:
+            if (depth < maxDepth) {
+              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
+                x: currentCoordinates.x + indentationWidth
+              });
+            }
+            break;
+          default:
+            return undefined;
+        }
+        return undefined;
+      }
+      var containers = [];
+      var overRect = over !== null && over !== void 0 && over.id ? (_droppableContainers$ = droppableContainers.get(over.id)) === null || _droppableContainers$ === void 0 ? void 0 : _droppableContainers$.rect.current : undefined;
+      if (overRect) {
+        droppableContainers.forEach(function (container) {
+          if (container !== null && container !== void 0 && container.disabled) {
+            return;
+          }
+          var rect = container === null || container === void 0 ? void 0 : container.rect.current;
+          if (!rect) {
+            return;
+          }
+          switch (event.code) {
+            case KeyboardCode.Down:
+              if (overRect.top < rect.top) {
+                containers.push(container);
+              }
+              break;
+            case KeyboardCode.Up:
+              if (overRect.top > rect.top) {
+                containers.push(container);
+              }
+              break;
+            //
+          }
+        });
+      }
+      var collisions = closestCorners({
+        active: active,
+        collisionRect: collisionRect,
+        pointerCoordinates: null,
+        droppableContainers: containers
+      });
+      var closestId = getFirstCollision(collisions, 'id');
+      if (closestId && over !== null && over !== void 0 && over.id) {
+        var _droppableContainers$2, _droppableContainers$3;
+        var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.node.current;
+        var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : _droppableContainers$3.rect.current;
+        if (newNode && activeNodeRect) {
+          var newRect = getClientRect(newNode, {
+            ignoreTransform: true
+          });
+          var newItem = items.find(function (_ref2) {
+            var id = _ref2.id;
+            return id === closestId;
+          });
+          var activeItem = items.find(function (_ref3) {
+            var id = _ref3.id;
+            return id === active.id;
+          });
+          if (newItem && activeItem) {
+            var _getProjection2 = getProjection(items, active.id, closestId, (newItem.depth - activeItem.depth) * indentationWidth, indentationWidth),
+              _depth = _getProjection2.depth;
+            var topOffset = newRect.top > activeNodeRect.top ? Math.abs(activeNodeRect.height - newRect.height) : 0;
+            var newCoordinates = {
+              x: newRect.left + _depth * indentationWidth,
+              y: newRect.top + topOffset
+            };
+            return newCoordinates;
+          }
+        }
+      }
+    }
+    return undefined;
+  };
+};
+
+var styles$8 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","text":"micromag-editor-sortable-sortable-tree-item-actions-text","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
+
+var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
+var propTypes$a = {
+  childCount: PropTypes.number,
+  clone: PropTypes.bool,
+  collapsed: PropTypes.bool,
+  depth: PropTypes.number.isRequired,
+  disableInteraction: PropTypes.bool,
+  disableSelection: PropTypes.bool,
+  ghost: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  handleProps: PropTypes.any,
+  indicator: PropTypes.bool,
+  indentationWidth: PropTypes.number.isRequired,
+  value: PropTypes.string,
+  onCollapse: PropTypes.func,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  wrapperRef: PropTypes.any,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired
+  }),
+  showId: PropTypes.bool,
+  showCount: PropTypes.bool,
+  showCollapsedCount: PropTypes.bool,
+  children: PropTypes.node
+};
+var defaultProps$a = {
+  childCount: null,
+  clone: false,
+  collapsed: false,
+  disableInteraction: false,
+  disableSelection: false,
+  ghost: false,
+  handleProps: null,
+  indicator: false,
+  value: null,
+  onCollapse: null,
+  onRemove: null,
+  onClick: null,
+  wrapperRef: null,
+  style: null,
+  showId: false,
+  showCount: false,
+  showCollapsedCount: false,
+  children: null
+};
+var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var childCount = _ref.childCount,
+    clone = _ref.clone,
+    depth = _ref.depth,
+    disableSelection = _ref.disableSelection,
+    disableInteraction = _ref.disableInteraction,
+    ghost = _ref.ghost,
+    handleProps = _ref.handleProps,
+    indentationWidth = _ref.indentationWidth,
+    indicator = _ref.indicator,
+    collapsed = _ref.collapsed,
+    onCollapse = _ref.onCollapse,
+    onRemove = _ref.onRemove;
+    _ref.onClick;
+    var style = _ref.style;
+    _ref.value;
+    var wrapperRef = _ref.wrapperRef;
+    _ref.showId;
+    var showCount = _ref.showCount,
+    showCollapsedCount = _ref.showCollapsedCount,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded$4);
+  return /*#__PURE__*/React.createElement("div", Object.assign({
+    className: classNames([styles$8.wrapper, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$8.clone, clone), styles$8.ghost, ghost), styles$8.indicator, indicator), styles$8.disableSelection, disableSelection), styles$8.disableInteraction, disableInteraction), styles$8.withChildren, onCollapse !== null)]),
+    ref: wrapperRef,
+    style: {
+      marginLeft: "".concat(indentationWidth * depth, "px"),
+      marginRight: "".concat(5 * depth, "px")
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: styles$8.inner,
+    ref: ref,
+    style: style
+  }, /*#__PURE__*/React.createElement("button", Object.assign({
+    className: classNames([styles$8.button, styles$8.handle]),
+    type: "button"
+  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$8.icon,
+    icon: faGripLines
+  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onRemove
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimes
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
+    className: styles$8.count
+  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
+    className: styles$8.collapsedCount
+  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onCollapse,
+    className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faAngleDown
+  })) : null, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.children
+  }, children)));
+});
+SortableTreeItemActions.propTypes = propTypes$a;
+SortableTreeItemActions.defaultProps = defaultProps$a;
+var SortableTreeItemActions$1 = SortableTreeItemActions;
+
+var styles$7 = {"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 _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
+var propTypes$9 = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  depth: PropTypes.number.isRequired,
+  component: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.object,
+  style: PropTypes.shape({
+    width: PropTypes.number.isRequired,
+    height: PropTypes.number.isRequired,
+    scaledWidth: PropTypes.number.isRequired,
+    scaledHeight: PropTypes.number.isRequired,
+    transform: PropTypes.string.isRequired,
+    scale: PropTypes.number.isRequired
+  }),
+  smallScale: PropTypes.number,
+  collapsed: PropTypes.bool,
+  onCollapse: PropTypes.func,
+  onClickItem: PropTypes.func,
+  // eslint-disable-next-line react/forbid-prop-types
+  childValue: PropTypes.object,
+  isLastChild: PropTypes.bool
+};
+var defaultProps$9 = {
+  component: null,
+  value: null,
+  style: null,
+  smallScale: 0.75,
+  collapsed: false,
+  onCollapse: null,
+  onClickItem: null,
+  childValue: null,
+  isLastChild: false
+};
+var animateLayoutChanges = function animateLayoutChanges(_ref) {
+  var isSorting = _ref.isSorting,
+    wasDragging = _ref.wasDragging;
+  return !(isSorting || wasDragging);
+};
+var SortableTreeItem = function SortableTreeItem(_ref2) {
+  var id = _ref2.id,
+    index = _ref2.index,
+    depth = _ref2.depth,
+    Component = _ref2.component,
+    value = _ref2.value;
+    _ref2.style;
+    _ref2.smallScale;
+    var collapsed = _ref2.collapsed,
+    onCollapse = _ref2.onCollapse,
+    onClickItem = _ref2.onClickItem,
+    childValue = _ref2.childValue;
+    _ref2.isLastChild;
+    var props = _objectWithoutProperties(_ref2, _excluded$3);
+  var _useSortable = useSortable({
+      id: id,
+      animateLayoutChanges: animateLayoutChanges
+    }),
+    attributes = _useSortable.attributes,
+    isDragging = _useSortable.isDragging,
+    isSorting = _useSortable.isSorting,
+    listeners = _useSortable.listeners,
+    setDraggableNodeRef = _useSortable.setDraggableNodeRef,
+    setDroppableNodeRef = _useSortable.setDroppableNodeRef,
+    transform = _useSortable.transform,
+    transition = _useSortable.transition;
+  var timeout = useRef(null);
+  var actionsStyle = {
+    transform: CSS.Translate.toString(transform),
+    transition: transition
+  };
+  var _ref3 = listeners || {},
+    _ref3$onPointerDown = _ref3.onPointerDown,
+    onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
+    _ref3$onPointerUp = _ref3.onPointerUp,
+    onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
+  var onClickAction = useCallback(function (e) {
+    if (onClickItem !== null) {
+      onClickItem(value, index);
+    }
+    if (onPointerDown !== null) {
+      e.persist();
+      timeout.current = setTimeout(function () {
+        if (onPointerDown !== null) {
+          onPointerDown(e);
+        }
+        timeout.current = null;
+      }, 200);
+    }
+  }, [value, index, onClickItem, onPointerDown]);
+  var cancellingPointerUp = useCallback(function (e) {
+    if (timeout.current !== null) {
+      clearTimeout(timeout.current);
+    }
+    if (onPointerUp !== null) {
+      onPointerUp(e);
+    }
+  }, [onPointerUp]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$7.container])
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions$1, Object.assign({
+    ref: setDraggableNodeRef,
+    wrapperRef: setDroppableNodeRef,
+    style: actionsStyle,
+    depth: depth,
+    ghost: isDragging,
+    disableSelection: iOS,
+    disableInteraction: isSorting,
+    handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+      onPointerDown: onClickAction,
+      onPointerUp: cancellingPointerUp
+    }),
+    collapsed: collapsed,
+    onCollapse: onCollapse
+  }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$7.parent
+  }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
+    className: styles$7.child
+  }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
+};
+SortableTreeItem.propTypes = propTypes$9;
+SortableTreeItem.defaultProps = defaultProps$9;
+var SortableTreeItem$1 = SortableTreeItem;
+
+var styles$6 = {"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 initialItems = [{
+  id: 'Home',
+  children: []
+}, {
+  id: 'Collections',
+  children: [{
+    id: 'Spring',
+    children: []
+  }, {
+    id: 'Summer',
+    children: []
+  }, {
+    id: 'Fall',
+    children: []
+  }, {
+    id: 'Winter',
+    children: []
+  }]
+}];
+var measuring = {
+  droppable: {
+    strategy: MeasuringStrategy.Always
+  }
+};
+var dropAnimation = _objectSpread(_objectSpread({}, defaultDropAnimation), {}, {
+  dragSourceOpacity: 0.5
+});
+var adjustTranslate = function adjustTranslate(_ref) {
+  var transform = _ref.transform;
+  return _objectSpread(_objectSpread({}, transform), {}, {
+    y: transform.y - 25
+  });
+};
+var propTypes$8 = {
+  collapsible: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.array,
+  indentationWidth: PropTypes.number,
+  indicator: PropTypes.bool,
+  removable: PropTypes.bool,
+  component: PropTypes.func,
+  onClickItem: PropTypes.func,
+  onChange: PropTypes.func
+};
+var defaultProps$8 = {
+  collapsible: true,
+  items: initialItems,
+  indentationWidth: 30,
+  indicator: false,
+  removable: false,
+  component: null,
+  onClickItem: null,
+  onChange: null
+};
+var SortableTree = function SortableTree(_ref2) {
+  var collapsible = _ref2.collapsible,
+    defaultItems = _ref2.items,
+    indicator = _ref2.indicator,
+    indentationWidth = _ref2.indentationWidth,
+    removable = _ref2.removable,
+    component = _ref2.component,
+    onClickItem = _ref2.onClickItem,
+    onChange = _ref2.onChange;
+  var _useState = useState(function () {
+      return buildTree(defaultItems);
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    items = _useState2[0],
+    setItems = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    activeId = _useState4[0],
+    setActiveId = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    overId = _useState6[0],
+    setOverId = _useState6[1];
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    offsetLeft = _useState8[0],
+    setOffsetLeft = _useState8[1];
+  var _useState9 = useState(null),
+    _useState10 = _slicedToArray(_useState9, 2),
+    currentPosition = _useState10[0],
+    setCurrentPosition = _useState10[1];
+
+  // Tree setup from list
+  useEffect(function () {
+    var flat = flattenTree(items);
+    var merged = defaultItems.map(function (t1) {
+      return _objectSpread(_objectSpread({}, flat.find(function (t2) {
+        return t2.id === t1.id;
+      })), t1);
+    });
+    setItems(buildTree(merged));
+  }, [defaultItems.length]);
+  var flattenedItems = 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,
+        collapsed = _ref3.collapsed,
+        id = _ref3.id;
+      return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
+    }, []) || null;
+    return removeChildrenOf(flattenedTree, activeId ? [activeId].concat(_toConsumableArray(collapsedItems)) : collapsedItems);
+  }, [activeId, items, items.length]);
+  var projected = activeId && overId ? getProjection(flattenedItems, activeId, overId, offsetLeft, indentationWidth) : null;
+  var sensorContext = useRef({
+    items: flattenedItems,
+    offset: offsetLeft
+  });
+  var _useState11 = useState(function () {
+      return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
+    }),
+    _useState12 = _slicedToArray(_useState11, 1),
+    coordinateGetter = _useState12[0];
+  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+    coordinateGetter: coordinateGetter
+  }));
+  var sortedIds = useMemo(function () {
+    return flattenedItems.map(function (_ref4) {
+      var id = _ref4.id;
+      return id;
+    });
+  }, [flattenedItems]);
+  var activeItem = activeId ? flattenedItems.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === activeId;
+  }) : null;
+  useEffect(function () {
+    sensorContext.current = {
+      items: flattenedItems,
+      offset: offsetLeft
+    };
+  }, [flattenedItems, offsetLeft]);
+  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 = 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 = useMemo(function () {
+    return {
+      onDragStart: function onDragStart(id) {
+        return "Picked up ".concat(id, ".");
+      },
+      onDragMove: function onDragMove(id, currentOverId) {
+        return getMovementAnnouncement('onDragMove', id, currentOverId);
+      },
+      onDragOver: function onDragOver(id, currentOverId) {
+        return getMovementAnnouncement('onDragOver', id, currentOverId);
+      },
+      onDragEnd: function onDragEnd(id, currentOverId) {
+        return getMovementAnnouncement('onDragEnd', id, currentOverId);
+      },
+      onDragCancel: function onDragCancel(id) {
+        return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
+      }
+    };
+  }, [getMovementAnnouncement]);
+  var activeValue = defaultItems.find(function (_ref9) {
+    var _ref9$id = _ref9.id,
+      defaultId = _ref9$id === void 0 ? null : _ref9$id;
+    return defaultId === activeId;
+  });
+  var handleDragStart = useCallback(function (_ref10) {
+    var newActiveId = _ref10.active.id;
+    setActiveId(newActiveId);
+    setOverId(newActiveId);
+    var newActiveItem = flattenedItems.find(function (_ref11) {
+      var id = _ref11.id;
+      return id === newActiveId;
+    });
+    if (newActiveItem) {
+      setCurrentPosition({
+        parentId: newActiveItem.parentId,
+        overId: activeId
+      });
+    }
+    document.body.style.setProperty('cursor', 'grabbing');
+  }, [flattenedItems, setActiveId, setOverId, setCurrentPosition]);
+  var handleDragMove = useCallback(function (_ref12) {
+    var delta = _ref12.delta;
+    setOffsetLeft(delta.x);
+  }, [setOffsetLeft]);
+  var handleDragOver = useCallback(function (_ref13) {
+    var _over$id;
+    var over = _ref13.over;
+    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
+  }, [setOverId]);
+  var resetState = useCallback(function () {
+    setOverId(null);
+    setActiveId(null);
+    setOffsetLeft(0);
+    setCurrentPosition(null);
+    document.body.style.setProperty('cursor', '');
+  }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
+  var handleDragEnd = useCallback(function (_ref14) {
+    var active = _ref14.active,
+      over = _ref14.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 (_ref15) {
+        var id = _ref15.id;
+        return id === over.id;
+      });
+      var activeIndex = clonedItems.findIndex(function (_ref16) {
+        var id = _ref16.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 _loop2 = function _loop2() {
+          var childId = activeTreeItem.children[i].id;
+          var childIndex = clonedItems.findIndex(function (_ref17) {
+            var id = _ref17.id;
+            return id === childId;
+          });
+          clonedItems[childIndex].parentId = parentId;
+          clonedItems[childIndex].depth = depth;
+        };
+        for (var i = 0; i < activeTreeItem.children.length; i += 1) {
+          _loop2();
+        }
+        activeTreeItem.children = [];
+      }
+      clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
+        depth: depth,
+        parentId: parentId
+      });
+      var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
+      var newItems = buildTree(sortedItems);
+      setItems(newItems);
+      if (onChange !== null) {
+        // console.log('hell is flat', sortedItems);
+        // console.log('hell is tree', newItems);
+        onChange((sortedItems || []).map(function (_ref18) {
+          var itemId = _ref18.id,
+            _ref18$children = _ref18.children,
+            children = _ref18$children === void 0 ? [] : _ref18$children,
+            _ref18$parentId = _ref18.parentId,
+            itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
+            _ref18$collapsed = _ref18.collapsed,
+            collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
+          return {
+            id: itemId,
+            props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
+              group: {
+                collapsed: collapsed,
+                mergeNavItems: true
+              }
+            } : {
+              group: null
+            }), itParentId !== null ? {
+              parentId: itParentId
+            } : {
+              parentId: null
+            })
+          };
+        }));
+      }
+    }
+  }, [projected, items, resetState, arrayMove, buildTree, setItems]);
+  var handleDragCancel = useCallback(function () {
+    resetState();
+  }, [resetState]);
+  var handleRemove = useCallback(function (id) {
+    setItems(function (newItems) {
+      return removeItem(newItems, id);
+    });
+  }, [setItems, removeItem]);
+  var handleCollapse = useCallback(function (id) {
+    setItems(function (newItems) {
+      return setProperty(newItems, id, 'collapsed', function (value) {
+        return !value;
+      });
+    });
+  }, [setItems, setProperty]);
+  return /*#__PURE__*/React.createElement(DndContext, {
+    accessibility: {
+      announcements: announcements
+    }
+    // announcements={announcements}
+    ,
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    measuring: measuring,
+    onDragStart: handleDragStart,
+    onDragMove: handleDragMove,
+    onDragOver: handleDragOver,
+    onDragEnd: handleDragEnd,
+    onDragCancel: handleDragCancel
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: sortedIds,
+    strategy: verticalListSortingStrategy
+  }, flattenedItems.map(function (_ref19, idx) {
+    var _flattenedItems;
+    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.createElement("div", {
+      className: classNames([styles$6.item, _defineProperty(_defineProperty(_defineProperty({}, styles$6.parent, onCollapse !== null && !collapsed), styles$6.group, depth === 1), styles$6.isLastChild, next === null)]),
+      key: id
+    }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
+      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__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
+    dropAnimation: dropAnimation,
+    modifiers: indicator ? [adjustTranslate] : undefined
+  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
+    className: styles$6.item,
+    key: activeId
+  }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
+    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 SortableTree$1 = SortableTree;
+
+var styles$5 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+
+var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
+  _excluded2 = ["id", "screen", "href"];
+var propTypes$7 = {
+  items: PropTypes$1.menuItems,
+  withPreview: PropTypes.bool,
+  withPlaceholder: PropTypes.bool,
+  withName: PropTypes.bool,
+  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  sortable: PropTypes.bool,
+  isTree: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  buttonClassName: PropTypes.string,
+  settingsClassName: PropTypes.string,
+  onClickItem: PropTypes.func,
+  onOrderChange: PropTypes.func
+};
+var defaultProps$7 = {
+  items: [],
+  withPreview: false,
+  withPlaceholder: false,
+  withName: false,
+  settings: null,
+  sortable: false,
+  isTree: false,
+  isVertical: false,
+  noWrap: false,
+  className: null,
+  itemClassName: null,
+  buttonClassName: null,
+  settingsClassName: null,
+  onClickItem: null,
+  onOrderChange: null
+};
+var ScreensMenu = function ScreensMenu(_ref) {
+  var items = _ref.items,
+    withPreview = _ref.withPreview,
+    withPlaceholder = _ref.withPlaceholder,
+    withName = _ref.withName,
+    settings = _ref.settings,
+    isVertical = _ref.isVertical,
+    noWrap = _ref.noWrap,
+    className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    buttonClassName = _ref.buttonClassName,
+    settingsClassName = _ref.settingsClassName,
+    sortable = _ref.sortable,
+    isTree = _ref.isTree,
+    onClickItem = _ref.onClickItem,
+    onOrderChange = _ref.onOrderChange;
+  var itemsElements = !isTree ? items.map(function (_ref2, index) {
+    var _ref2$className = _ref2.className,
+      itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
+      screen = _ref2.screen,
+      type = _ref2.type,
+      title = _ref2.title,
+      _ref2$onClick = _ref2.onClick,
+      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
+      active = _ref2.active,
+      href = _ref2.href,
+      item = _objectWithoutProperties(_ref2, _excluded$2);
+    return /*#__PURE__*/React.createElement("li", {
+      key: item.id,
+      className: classNames([styles$5.item, _defineProperty(_defineProperty({}, itemClassName, itemClassName !== null), itemCustomClassName, itemCustomClassName !== null)]),
+      "data-screen-id": item.id
+    }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
+      index: index,
+      screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
+        type: type
+      }) : screen,
+      href: href,
+      className: buttonClassName,
+      title: title,
+      active: active,
+      withPreview: withPreview,
+      withPlaceholder: withPlaceholder,
+      withName: withName,
+      onClick: onClick,
+      onClickItem: onClickItem
+    }), settings !== null ? /*#__PURE__*/React.createElement("div", {
+      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$5.settings, 'p-2'])
+    }, isFunction(settings) ? settings(index) : settings) : null);
+  }) : [];
+  var sortableItems = useMemo(function () {
+    return isTree ? items.map(function (_ref5) {
+      var id = _ref5.id,
+        _ref5$screen = _ref5.screen,
+        screen = _ref5$screen === void 0 ? {} : _ref5$screen,
+        href = _ref5.href,
+        props = _objectWithoutProperties(_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 _ref6 = group || {},
+        _ref6$collapsed = _ref6.collapsed,
+        collapsed = _ref6$collapsed === void 0 ? true : _ref6$collapsed;
+      return {
+        id: id,
+        parentId: parentId,
+        collapsed: collapsed,
+        value: _objectSpread({
+          id: id,
+          screen: screen,
+          href: href
+        }, props)
+      };
+    }, []) : items.map(function (_ref7) {
+      var id = _ref7.id;
+      return {
+        id: id
+      };
+    });
+  }, [items, isTree, items.length]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$5.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.noWrap, noWrap), styles$5.isVertical, isVertical), styles$5.isTree, isTree), styles$5.withPlaceholder, withPlaceholder), className, className)])
+  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree$1, {
+    items: sortableItems,
+    component: ScreenWithPreview$1,
+    onClickItem: onClickItem,
+    onChange: onOrderChange
+  }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(ReactSortable, {
+    list: sortableItems,
+    setList: onOrderChange,
+    animation: 200,
+    delayOnTouchStart: true,
+    delay: 2,
+    tag: "ul",
+    className: styles$5.items
+  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
+    className: styles$5.items
+  }, itemsElements) : null);
+};
+ScreensMenu.propTypes = propTypes$7;
+ScreensMenu.defaultProps = defaultProps$7;
+var ScreensMenu$1 = ScreensMenu;
+
+var styles$4 = {"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","button":"micromag-editor-menus-screen-types-button"};
+
+var propTypes$6 = {
+  screens: PropTypes$1.screenDefinitions,
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+  onClickItem: PropTypes.func
+};
+var defaultProps$6 = {
+  screens: null,
+  selectedTypes: null,
+  className: null,
+  onClickItem: null
+};
+var ScreenTypes = function ScreenTypes(_ref) {
+  var screens = _ref.screens,
+    selectedTypes = _ref.selectedTypes,
+    className = _ref.className,
+    onClickItem = _ref.onClickItem;
+  var intl = useIntl();
+  var screensManager = useScreensManager();
+  var screenDefinitions = screens || screensManager.getDefinitions();
+  var finalDefinitions = (screenDefinitions || []).filter(function (s) {
+    return s !== null;
+  });
+  var groups = useMemo(function () {
+    var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
+      var id = definition.id,
+        title = definition.title,
+        _definition$group = definition.group,
+        group = _definition$group === void 0 ? {} : _definition$group;
+      var _ref2 = group || {},
+        _ref2$order = _ref2.order,
+        order = _ref2$order === void 0 ? 0 : _ref2$order,
+        _ref2$label = _ref2.label,
+        label = _ref2$label === void 0 ? {} : _ref2$label,
+        _ref2$hidden = _ref2.hidden,
+        hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
+      var _ref3 = label || {},
+        _ref3$id = _ref3.id,
+        messageId = _ref3$id === void 0 ? null : _ref3$id;
+      if (hidden) {
+        return allGroups;
+      }
+      var _ref4 = isMessage(label) ? {
+          id: messageId || id,
+          name: group
+        } : {
+          id: messageId || id,
+          name: title
+        },
+        groupId = _ref4.id,
+        groupName = _ref4.name;
+      var groupIndex = allGroups.findIndex(function (it) {
+        return it.id === groupId;
+      });
+      var selected = selectedTypes !== null && selectedTypes.indexOf(id) !== -1;
+      var item = {
+        id: id,
+        type: id,
+        screen: definition,
+        title: title,
+        className: classNames(_defineProperty({
+          'bg-secondary': !selected,
+          'bg-primary': selected
+        }, styles$4.selected, selected))
+      };
+      return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
+        items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
+      })], _toConsumableArray(allGroups.slice(groupIndex + 1))) : [].concat(_toConsumableArray(allGroups), [{
+        id: groupId,
+        name: isMessage(label) ? intl.formatMessage(label) : groupName,
+        order: order,
+        items: [item]
+      }]);
+    }, []);
+    return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
+  }, [finalDefinitions, selectedTypes]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$4.rows
+  }, groups.map(function (_ref6) {
+    var id = _ref6.id,
+      name = _ref6.name,
+      items = _ref6.items;
+    return /*#__PURE__*/React.createElement("div", {
+      key: "group-".concat(id),
+      className: styles$4.row
+    }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
+      className: styles$4.layouts
+    }, /*#__PURE__*/React.createElement(ScreensMenu$1, {
+      items: items,
+      withPlaceholder: true,
+      withName: true,
+      itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
+        'border-secondary': selectedTypes === null,
+        'border-dark': selectedTypes !== null,
+        'bg-secondary': selectedTypes === null,
+        'text-secondary': selectedTypes !== null
+      }]),
+      buttonClassName: styles$4.button,
+      onClickItem: onClickItem
+    })));
+  })));
+};
+ScreenTypes.propTypes = propTypes$6;
+ScreenTypes.defaultProps = defaultProps$6;
+var ScreenTypesMenu = ScreenTypes;
+
+var styles$3 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
+
+var propTypes$5 = {
+  selectedTypes: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+  onRequestClose: PropTypes.func,
+  onClickScreenType: PropTypes.func
+};
+var defaultProps$5 = {
+  selectedTypes: null,
+  className: null,
+  onRequestClose: null,
+  onClickScreenType: null
+};
+var ScreenTypesModal = function ScreenTypesModal(_ref) {
+  var selectedTypes = _ref.selectedTypes,
+    className = _ref.className,
+    onRequestClose = _ref.onRequestClose,
+    onClickScreenType = _ref.onClickScreenType;
+  return /*#__PURE__*/React.createElement(Modal, null, /*#__PURE__*/React.createElement(ModalDialog, {
+    title: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "QBaiO0",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Add a screen"
+      }]
+    }),
+    className: classNames([styles$3.container, _defineProperty({}, className, className)]),
+    onClose: onRequestClose
+  }, /*#__PURE__*/React.createElement(ScreenTypesMenu, {
+    selectedTypes: selectedTypes,
+    className: styles$3.menu,
+    onClickItem: onClickScreenType
+  })));
+};
+ScreenTypesModal.propTypes = propTypes$5;
+ScreenTypesModal.defaultProps = defaultProps$5;
+var ScreenTypesModal$1 = ScreenTypesModal;
+
+var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
+
+var _excluded$1 = ["id"];
+var propTypes$4 = {
+  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  isTheme: PropTypes.bool,
+  isVertical: PropTypes.bool,
+  isCreateOpened: PropTypes.bool,
+  isParsed: PropTypes.bool,
+  isTree: PropTypes.bool,
+  onClickScreen: PropTypes.func,
+  onChange: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$4 = {
+  value: null,
+  isTheme: false,
+  isVertical: false,
+  isCreateOpened: false,
+  isParsed: false,
+  isTree: false,
+  onClickScreen: null,
+  onChange: null,
+  className: null
+};
+var EditorScreens = function EditorScreens(_ref) {
+  var unparsedValue = _ref.value,
+    isTheme = _ref.isTheme,
+    isVertical = _ref.isVertical,
+    isCreateOpened = _ref.isCreateOpened,
+    isParsed = _ref.isParsed,
+    isTree = _ref.isTree,
+    onClickScreen = _ref.onClickScreen,
+    onChange = _ref.onChange,
+    className = _ref.className;
+  var valueWithTheme = useThemeValue(unparsedValue, isTheme);
+  var value = isParsed ? unparsedValue : useParsedStory(valueWithTheme, {
+    withMedias: false
+  });
+  var _ref2 = value || {},
+    _ref2$components = _ref2.components,
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
+  var _useState = useState(isCreateOpened),
+    _useState2 = _slicedToArray(_useState, 2),
+    createModalOpened = _useState2[0],
+    setCreateModalOpened = _useState2[1];
+  var routes = useRoutes();
+  var push = useRoutePush();
+  var url = useUrlGenerator();
+  var _useRouteParams = useRouteParams({
+      screenOnly: true
+    }),
+    _useRouteParams$scree = _useRouteParams.screen,
+    currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
+  var createScreenFromDefinition = useCallback(function (definition) {
+    var _ref3 = value || {},
+      _ref3$components = _ref3.components,
+      currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
+      _ref3$theme = _ref3.theme,
+      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
+    var _ref4 = isString(definition) ? {
+        id: definition
+      } : definition,
+      newScreenType = _ref4.id;
+    var _ref5 = theme || {},
+      _ref5$components = _ref5.components,
+      themeComponents = _ref5$components === void 0 ? null : _ref5$components;
+    var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
+      return it.type === newScreenType;
+    }) || null : null;
+    var newScreen = createScreen$1(definition, themeScreen);
+    var foundIndex = screens.findIndex(function (_ref6) {
+      var id = _ref6.id;
+      return id === currentScreenId;
+    });
+    var currentScreenIndex = !isTheme && foundIndex >= 0 ? foundIndex + 1 : null;
+    var newValue = _objectSpread(_objectSpread({}, value), {}, {
+      components: [].concat(_toConsumableArray(currentScreens.slice(0, currentScreenIndex)), [newScreen], _toConsumableArray(currentScreens.slice(currentScreenIndex)))
+    });
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+    return newScreen;
+  }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
+  var onOrderChange = useCallback(function (listItems) {
+    var ids = listItems.map(function (_ref7) {
+      var id = _ref7.id;
+      return id;
+    });
+    var screenProps = listItems.map(function (_ref8) {
+      var id = _ref8.id,
+        _ref8$props = _ref8.props,
+        props = _ref8$props === void 0 ? null : _ref8$props;
+      return {
+        id: id,
+        props: props
+      };
+    });
+    var hasScreenProps = (screenProps.filter(function (_ref9) {
+      var props = _ref9.props;
+      return props !== null;
+    }) || []).length > 0;
+    var _ref10 = value || {},
+      _ref10$components = _ref10.components,
+      currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
+    var currentIds = currentScreens.map(function (_ref11) {
+      var id = _ref11.id;
+      return id;
+    });
+    var sameOrder = listItems.reduce(function (same, _ref12, index) {
+      var id = _ref12.id;
+      return same && id === currentIds[index];
+    }, true);
+    if (!sameOrder || hasScreenProps) {
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: _toConsumableArray(currentScreens).sort(function (_ref13, _ref14) {
+          var idA = _ref13.id;
+          var idB = _ref14.id;
+          var indexA = ids.indexOf(idA);
+          var indexB = ids.indexOf(idB);
+          if (indexA === indexB) {
+            return 0;
+          }
+          return indexA > indexB ? 1 : -1;
+        }).map(function (_ref15) {
+          var _screenProps$find;
+          var id = _ref15.id,
+            props = _objectWithoutProperties(_ref15, _excluded$1);
+          return _objectSpread(_objectSpread({
+            id: id
+          }, props), (_screenProps$find = screenProps.find(function (_ref16) {
+            var propsId = _ref16.id;
+            return propsId === id;
+          })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
+        })
+      });
+      if (onChange !== null) {
+        // console.log('og!', listItems, newValue);
+        onChange(newValue);
+      }
+    }
+  }, [value, onChange]);
+  var onClickScreenType = useCallback(function (definition) {
+    setCreateModalOpened(false);
+    var currentScreen = isTheme ? screens.find(function (_ref17) {
+      var type = _ref17.type;
+      return type === definition.id;
+    }) || null : null;
+    if (!isTheme || currentScreen === null) {
+      currentScreen = createScreenFromDefinition(definition);
+    }
+    push('screen', {
+      screen: currentScreen.id
+    });
+    onClickScreen(currentScreen);
+  }, [screens, isTheme, createScreenFromDefinition, push, onClickScreen]);
+  var onClickAdd = useCallback(function () {
+    return setCreateModalOpened(true);
+  }, [setCreateModalOpened]);
+  var onCreateModalRequestClose = useCallback(function () {
+    return setCreateModalOpened(false);
+  }, [setCreateModalOpened]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['d-flex', 'flex-column', styles$2.container, className])
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    compact: true,
+    noWrap: true,
+    withoutCollapse: true,
+    className: classNames(['sticky-top', styles$2.navbar])
+  }, /*#__PURE__*/React.createElement("strong", {
+    className: "mb-0 me-auto"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "jf+4Hq",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Screens"
+    }]
+  })), /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    size: "sm",
+    onClick: onClickAdd,
+    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+      icon: faPlus
+    })
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex-grow-1 d-flex w-100 p-2"
+  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
+    path: "".concat(routes.screen, "/(.*)?")
+  }, function (_ref18) {
+    var _ref18$screen = _ref18.screen,
+      screenId = _ref18$screen === void 0 ? null : _ref18$screen;
+    return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu$1, {
+      items: screens.map(function (it) {
+        return {
+          id: it.id,
+          screen: it,
+          href: url('screen', {
+            screen: it.id
+          }),
+          active: it.id === screenId
+        };
+      }),
+      isVertical: isVertical,
+      withPreview: true,
+      sortable: !isTree,
+      className: "w-100",
+      onClickItem: onClickScreen,
+      onOrderChange: onOrderChange,
+      isTree: isTree
+    }) : /*#__PURE__*/React.createElement(Empty, {
+      className: "flex-grow-1 p-2"
+    }, /*#__PURE__*/React.createElement(Button, {
+      theme: "primary",
+      onClick: onClickAdd
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JoWKee",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Create your first screen"
+      }]
+    })));
+  }), /*#__PURE__*/React.createElement(Route, null, screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu$1, {
+    items: screens.map(function (it) {
+      return {
+        id: it.id,
+        screen: it,
+        href: url('screen', {
+          screen: it.id
+        }),
+        active: false
+      };
+    }),
+    isVertical: isVertical,
+    withPreview: true,
+    sortable: !isTree,
+    className: "w-100",
+    onClickItem: onClickScreen,
+    onOrderChange: onOrderChange,
+    isTree: isTree
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    className: "flex-grow-1 p-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    onClick: onClickAdd
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "JoWKee",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Create your first screen"
+    }]
+  })))))), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal$1, {
+    selectedTypes: isTheme ? screens.map(function (_ref19) {
+      var type = _ref19.type;
+      return type;
+    }) : [],
+    onClickScreenType: onClickScreenType,
+    onRequestClose: onCreateModalRequestClose
+  }) : null);
+};
+EditorScreens.propTypes = propTypes$4;
+EditorScreens.defaultProps = defaultProps$4;
+var Screens = EditorScreens;
+
+var styles$1 = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","center":"micromag-editor-center","inner":"micromag-editor-inner","visible":"micromag-editor-visible","top":"micromag-editor-top"};
+
+var propTypes$3 = {
+  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  deviceScreens: PropTypes$1.deviceScreens,
+  viewerTheme: PropTypes$1.viewerTheme,
+  mobileView: PropTypes.oneOf(['screens', 'preview', 'form']),
+  fullscreen: PropTypes.bool,
+  isTheme: PropTypes.bool,
+  isCreateOpened: PropTypes.bool,
+  onChange: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$3 = {
+  value: null,
+  deviceScreens: getDeviceScreens(),
+  viewerTheme: null,
+  mobileView: 'preview',
+  fullscreen: false,
+  isTheme: false,
+  isCreateOpened: false,
+  onChange: null,
+  className: null
+};
+var Editor = function Editor(_ref) {
+  var value = _ref.value,
+    viewerTheme = _ref.viewerTheme,
+    isTheme = _ref.isTheme,
+    isCreateOpened = _ref.isCreateOpened,
+    deviceScreens = _ref.deviceScreens,
+    initialMobileView = _ref.mobileView,
+    onChange = _ref.onChange,
+    fullscreen = _ref.fullscreen,
+    className = _ref.className;
+  var push = useRoutePush();
+  var refScreensContainer = useRef(null);
+  var _useRouteParams = useRouteParams({
+      screenOnly: true
+    }),
+    screenId = _useRouteParams.screen;
+
+  // Screen size
+  var _useScreenSizeFromEle = useScreenSizeFromElement({
+      screens: deviceScreens,
+      withoutMaxSize: true,
+      withoutScale: true
+    }),
+    refContainer = _useScreenSizeFromEle.ref,
+    screenSize = _useScreenSizeFromEle.screenSize;
+  var isMobile = screenSize !== null && screenSize.screens.indexOf('medium') === -1;
+
+  // Mobile view
+  var _useState = useState(initialMobileView),
+    _useState2 = _slicedToArray(_useState, 2),
+    mobileView = _useState2[0],
+    setMobileView = _useState2[1];
+  var onClickScreens = useCallback(function () {
+    return setMobileView('screens');
+  }, [mobileView, setMobileView]);
+  var onClickEdit = useCallback(function () {
+    return setMobileView('form');
+  }, [setMobileView]);
+  var onClickViewScreen = useCallback(function () {
+    return setMobileView('preview');
+  }, [setMobileView]);
+
+  // console.log('mobileView', screenSize, isMobile, mobileView);
+
+  // Apply base theme values to it's own components
+  var _ref2 = value || {},
+    _ref2$background = _ref2.background,
+    background = _ref2$background === void 0 ? null : _ref2$background,
+    _ref2$colors = _ref2.colors,
+    colors = _ref2$colors === void 0 ? null : _ref2$colors,
+    _ref2$textStyles = _ref2.textStyles,
+    textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
+    _ref2$boxStyles = _ref2.boxStyles,
+    boxStyles = _ref2$boxStyles === void 0 ? null : _ref2$boxStyles;
+  var baseValue = isTheme ? _objectSpread(_objectSpread({}, value), {}, {
+    theme: {
+      background: background,
+      colors: colors,
+      textStyles: textStyles,
+      boxStyles: boxStyles
+    }
+  }) : value;
+  var story = useParsedStory(baseValue);
+  var _useMediasParser = useMediasParser(),
+    parseMediasToPath = _useMediasParser.toPath;
+  var onStoryChange = useCallback(function (newStory) {
+    var storyWithMedias = parseMediasToPath(newStory);
+    if (onChange !== null) {
+      onChange(storyWithMedias);
+    }
+  }, [onChange, parseMediasToPath]);
+  var clickedScreenId = useRef(null);
+  var onClickScreen = useCallback(function (_ref3) {
+    var id = _ref3.id;
+    clickedScreenId.current = id;
+    if (screenSize.screen) {
+      setMobileView('preview');
+    }
+    push('screen', {
+      screen: clickedScreenId.current
+    });
+  }, [screenSize.screen, push]);
+  var onPreviewScreenChange = useCallback(function (_ref4) {
+    var newScreenId = _ref4.id;
+    push('screen', {
+      screen: newScreenId
+    });
+  }, [push]);
+
+  // Auto-scroll to current screen except when manually clicking one
+  useEffect(function () {
+    if (screenId === null || clickedScreenId.current === screenId) {
+      return;
+    }
+    clickedScreenId.current = null;
+    var screens = refScreensContainer.current;
+    var items = screens.querySelectorAll("[data-screen-id=\"".concat(screenId, "\"]"));
+    if (items !== null && items.length > 0) {
+      var item = items[0];
+      var cnt = item.parentNode.parentNode.parentNode;
+      screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
+    }
+  }, [screenId]);
+
+  // console.log('screenId', screenId);
+
+  return /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(PanelsProvider, null, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
+    size: screenSize
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$1["screen-".concat(screenName)];
+    }) : null, _defineProperty(_defineProperty({}, styles$1.fullscreen, fullscreen), className, className)]),
+    ref: refContainer
+  }, /*#__PURE__*/React.createElement(Navbar, {
+    theme: "light",
+    compact: true,
+    noWrap: true,
+    withoutCollapse: true,
+    className: styles$1.top
+  }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    theme: "secondary",
+    onClick: onClickScreens,
+    className: "me-auto"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "wkysUu",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Screens"
+    }]
+  })) : /*#__PURE__*/React.createElement("span", null), mobileView !== 'form' ? /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    theme: "primary",
+    onClick: onClickEdit
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "HseFdk",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Edit"
+    }]
+  })) : null, mobileView === 'form' ? /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    theme: "primary",
+    onClick: onClickViewScreen
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "4POR3B",
+    defaultMessage: [{
+      "type": 0,
+      "value": "View screen"
+    }]
+  })) : null), /*#__PURE__*/React.createElement("div", {
+    className: styles$1.inner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
+    ref: refScreensContainer
+  }, /*#__PURE__*/React.createElement(Screens, {
+    value: story,
+    isTheme: isTheme,
+    isCreateOpened: isCreateOpened,
+    isParsed: true,
+    onChange: onStoryChange,
+    onClickScreen: onClickScreen,
+    isVertical: !isMobile,
+    className: styles$1.inner,
+    isTree: true
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
+  }, /*#__PURE__*/React.createElement(EditorPreview$1, {
+    value: story,
+    isTheme: isTheme,
+    viewerTheme: viewerTheme,
+    className: styles$1.preview,
+    onScreenChange: onPreviewScreenChange,
+    onChange: onStoryChange
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')])
+  }, /*#__PURE__*/React.createElement(EditorForm, {
+    key: screenId,
+    value: story,
+    isTheme: isTheme,
+    onChange: onStoryChange,
+    className: styles$1.inner
+  }))), /*#__PURE__*/React.createElement(Modals, null)))));
+};
+Editor.propTypes = propTypes$3;
+Editor.defaultProps = defaultProps$3;
+var Editor$1 = Editor;
+
+// eslint-disable-next-line import/prefer-default-export
+var routes = PropTypes.shape({
+  home: PropTypes.string.isRequired,
+  screen: PropTypes.string.isRequired,
+  'screen.field': PropTypes.string.isRequired,
+  'screen.field.form': PropTypes.string.isRequired
+});
+
+var styles = {"container":"micromag-editor-forms-settings-container","inner":"micromag-editor-forms-settings-inner"};
+
+var propTypes$2 = {
+  name: PropTypes.string,
+  field: PropTypes$1.formField,
+  value: PropTypes$1.component,
+  className: PropTypes.string,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  onChange: PropTypes.func
+};
+var defaultProps$2 = {
+  name: null,
+  field: null,
+  value: null,
+  className: null,
+  onChange: null
+};
+var SettingsForm = function SettingsForm(_ref) {
+  var name = _ref.name,
+    field = _ref.field,
+    value = _ref.value,
+    className = _ref.className,
+    gotoFieldForm = _ref.gotoFieldForm,
+    closeFieldForm = _ref.closeFieldForm,
+    onChange = _ref.onChange;
+  if (field === null) return false;
+  var _ref2 = field || {},
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    _ref2$fieldsProps = _ref2.fieldsProps,
+    fieldsProps = _ref2$fieldsProps === void 0 ? null : _ref2$fieldsProps;
+  var fieldsManager = useFieldsManager();
+  var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
+    _ref3$component = _ref3.component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
+    settings = _ref3.settings;
+  var FieldComponent = useFieldComponent(fieldComponent);
+  var FieldsComponent = useFieldComponent('fields');
+  var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
+  var onSettingsChange = useCallback(function (newSettingsValue) {
+    var newValue = _objectSpread(_objectSpread({}, value), newSettingsValue);
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  }, [value, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.inner
+  }, /*#__PURE__*/React.createElement(SettingsComponent, {
+    name: name,
+    field: field,
+    fields: settings,
+    value: value,
+    onChange: onSettingsChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    fieldsProps: fieldsProps
+  })));
+};
+SettingsForm.propTypes = propTypes$2;
+SettingsForm.defaultProps = defaultProps$2;
+var SettingsForm$1 = SettingsForm;
+
+// eslint-disable-next-line import/prefer-default-export
+
+var FormsComponents = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Settings: SettingsForm$1
+});
+
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$1 = {
+  children: PropTypes.node
+};
+var defaultProps$1 = {
+  children: null
+};
+var FormsProvider = function FormsProvider(props) {
+  return /*#__PURE__*/React.createElement(ComponentsProvider, Object.assign({
+    namespace: FORMS_NAMESPACE,
+    components: FormsComponents
+  }, props));
+};
+FormsProvider.propTypes = propTypes$1;
+FormsProvider.defaultProps = defaultProps$1;
+var FormsProvider$1 = FormsProvider;
+
+var home = "/";
+var screen_wildcard = "/:screen/(.*)?";
+var screen = "/:screen";
+var defaultRoutes = {
+  home: home,
+  screen_wildcard: screen_wildcard,
+  screen: screen,
+  "screen.field": "/:screen/:field+",
+  "screen.field.form": "/:screen/:field+/:form"
+};
+
+var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries", "screenNamespaces"];
+var pathToRegexpParser = createPathToRegexpParser();
+var propTypes = {
+  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
+  routes: routes,
+  memoryRouter: PropTypes.bool,
+  basePath: PropTypes.string,
+  uppy: PropTypes.shape({
+    transport: PropTypes.string
+  }),
+  googleApiKey: PropTypes.string,
+  googleMapsLibraries: PropTypes.arrayOf(PropTypes.string),
+  screenNamespaces: PropTypes.arrayOf(PropTypes.string)
+};
+var defaultProps = {
+  value: null,
+  routes: defaultRoutes,
+  memoryRouter: false,
+  basePath: null,
+  uppy: null,
+  googleApiKey: null,
+  googleMapsLibraries: ['places'],
+  screenNamespaces: null
+};
+var EditorContainer = function EditorContainer(_ref) {
+  var value = _ref.value,
+    memoryRouter = _ref.memoryRouter,
+    routes = _ref.routes,
+    basePath = _ref.basePath,
+    uppy = _ref.uppy,
+    googleApiKey = _ref.googleApiKey,
+    googleMapsLibraries = _ref.googleMapsLibraries,
+    screenNamespaces = _ref.screenNamespaces,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useIntl = useIntl(),
+    locale = _useIntl.locale;
+  var _useMemoryRouter = useMemoryRouter(),
+    memoryLocationHook = _useMemoryRouter.hook,
+    memorySearchHook = _useMemoryRouter.searchHook;
+  var routerProps = useMemo(function () {
+    return {
+      hook: memoryRouter ? memoryLocationHook : null,
+      searchHook: memoryRouter ? memorySearchHook : null,
+      parser: pathToRegexpParser,
+      base: !memoryRouter ? basePath : null
+    };
+  }, [basePath, memoryRouter]);
+  return /*#__PURE__*/React.createElement(Router, routerProps, /*#__PURE__*/React.createElement(UppyProvider, uppy, /*#__PURE__*/React.createElement(StoryProvider, {
+    story: value
+  }, /*#__PURE__*/React.createElement(ScreensProvider, {
+    filterNamespaces: true,
+    namespaces: screenNamespaces
+  }, /*#__PURE__*/React.createElement(GoogleKeysProvider, {
+    apiKey: googleApiKey
+  }, /*#__PURE__*/React.createElement(GoogleMapsClientProvider, {
+    locale: locale,
+    libraries: googleMapsLibraries
+  }, /*#__PURE__*/React.createElement(FontsProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider$1, null, /*#__PURE__*/React.createElement(EditorProvider, null, /*#__PURE__*/React.createElement(VisitorProvider, {
+    visitor: "editor"
+  }, /*#__PURE__*/React.createElement(ComponentsContext.Consumer, null, function (manager) {
+    var formComponents = manager.getComponents(FORMS_NAMESPACE);
+    var formRegEx = formComponents !== null ? Object.keys(formComponents).map(function (name) {
+      return slug(name);
+    }).join('|') : null;
+    return /*#__PURE__*/React.createElement(RoutesProvider, {
+      routes: _objectSpread(_objectSpread({}, routes), {}, {
+        'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
+      })
+    }, /*#__PURE__*/React.createElement(Editor$1, Object.assign({
+      value: value
+    }, props)));
+  }))))))))))));
+};
+EditorContainer.propTypes = propTypes;
+EditorContainer.defaultProps = defaultProps;
+var EditorContainer$1 = EditorContainer;
+
+export { Editor$1 as Editor, ScreenTypesMenu as ScreenTypes, ScreensMenu$1 as Screens, createScreen$1 as createScreen, EditorContainer$1 as default };