@micromag/editor 0.3.546 → 0.3.548

package/lib/index.js

@@ -1,4103 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var hooks = require('@micromag/core/hooks');
-var utils = require('@micromag/core/utils');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var reactIntl = require('react-intl');
-var _toArray = require('@babel/runtime/helpers/toArray');
-var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var regexparam = require('regexparam');
-var index_js = require('use-sync-external-store/shim/index.js');
-var pathToRegexp = require('path-to-regexp');
-var mitt = require('mitt');
-var reactTransitionGroup = require('react-transition-group');
-var faCogs = require('@fortawesome/free-solid-svg-icons/faCogs');
-var faEllipsisV = require('@fortawesome/free-solid-svg-icons/faEllipsisV');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var fields = require('@micromag/fields');
-var uuid = require('uuid');
-var size = require('@folklore/size');
-var viewer = require('@micromag/viewer');
-var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
-var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
-var isString = require('lodash/isString');
-var isFunction = require('lodash/isFunction');
-var reactSortablejs = require('react-sortablejs');
-var core$1 = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
-var reactDom = require('react-dom');
-var utilities = require('@dnd-kit/utilities');
-var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
-var faGripLines = require('@fortawesome/free-solid-svg-icons/faGripLines');
-var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
-var orderBy = require('lodash/orderBy');
-var uppy = require('@panneau/uppy');
-var screens = require('@micromag/screens');
-
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-var useEffect = React__namespace.useEffect,
-  useLayoutEffect = React__namespace.useLayoutEffect,
-  useRef = React__namespace.useRef;
-
-// React.useInsertionEffect is not available in React <18
-// This hack fixes a transpilation issue on some apps
-var useBuiltinInsertionEffect = React__namespace['useInsertion' + 'Effect'];
-
-// Copied from:
-// https://github.com/facebook/react/blob/main/packages/shared/ExecutionEnvironment.js
-var canUseDOM = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
-
-// Copied from:
-// https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.ts
-// "React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect in the browser."
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-
-// useInsertionEffect is already a noop on the server.
-// See: https://github.com/facebook/react/blob/main/packages/react-server/src/ReactFizzHooks.js
-var useInsertionEffect = useBuiltinInsertionEffect || useIsomorphicLayoutEffect;
-
-// Userland polyfill while we wait for the forthcoming
-// https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md
-// Note: "A high-fidelity polyfill for useEvent is not possible because
-// there is no lifecycle or Hook in React that we can use to switch
-// .current at the right timing."
-// So we will have to make do with this "close enough" approach for now.
-var useEvent = function useEvent(fn) {
-  var ref = useRef([fn, function () {
-    return ref[0].apply(ref, arguments);
-  }]).current;
-  // Per Dan Abramov: useInsertionEffect executes marginally closer to the
-  // correct timing for ref synchronization than useLayoutEffect on React 18.
-  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
-  useInsertionEffect(function () {
-    ref[0] = fn;
-  });
-  return ref[1];
-};
-
-/**
- * History API docs @see https://developer.mozilla.org/en-US/docs/Web/API/History
- */
-var eventPopstate = "popstate";
-var eventPushState = "pushState";
-var eventReplaceState = "replaceState";
-var eventHashchange = "hashchange";
-var events = [eventPopstate, eventPushState, eventReplaceState, eventHashchange];
-var subscribeToLocationUpdates = function subscribeToLocationUpdates(callback) {
-  for (var _i = 0, _events = events; _i < _events.length; _i++) {
-    var event = _events[_i];
-    addEventListener(event, callback);
-  }
-  return function () {
-    for (var _i2 = 0, _events2 = events; _i2 < _events2.length; _i2++) {
-      var _event = _events2[_i2];
-      removeEventListener(_event, callback);
-    }
-  };
-};
-var useLocationProperty = function useLocationProperty(fn, ssrFn) {
-  return index_js.useSyncExternalStore(subscribeToLocationUpdates, fn, ssrFn);
-};
-var currentSearch = function currentSearch() {
-  return location.search;
-};
-var useSearch = function useSearch() {
-  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref$ssrSearch = _ref.ssrSearch,
-    ssrSearch = _ref$ssrSearch === void 0 ? "" : _ref$ssrSearch;
-  return useLocationProperty(currentSearch, function () {
-    return ssrSearch;
-  });
-};
-var currentPathname = function currentPathname() {
-  return location.pathname;
-};
-var usePathname = function usePathname() {
-  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    ssrPath = _ref2.ssrPath;
-  return useLocationProperty(currentPathname, ssrPath ? function () {
-    return ssrPath;
-  } : currentPathname);
-};
-var navigate = function navigate(to) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref3$replace = _ref3.replace,
-    replace = _ref3$replace === void 0 ? false : _ref3$replace,
-    _ref3$state = _ref3.state,
-    state = _ref3$state === void 0 ? null : _ref3$state;
-  return history[replace ? eventReplaceState : eventPushState](state, "", to);
-};
-
-// the 2nd argument of the `useBrowserLocation` return value is a function
-// that allows to perform a navigation.
-var useBrowserLocation = function useBrowserLocation() {
-  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return [usePathname(opts), navigate];
-};
-var patchKey = Symbol["for"]("wouter_v3");
-
-// While History API does have `popstate` event, the only
-// proper way to listen to changes via `push/replaceState`
-// is to monkey-patch these methods.
-//
-// See https://stackoverflow.com/a/4585031
-if (typeof history !== "undefined" && typeof window[patchKey] === "undefined") {
-  var _loop = function _loop() {
-    var type = _arr[_i3];
-    var original = history[type];
-    // TODO: we should be using unstable_batchedUpdates to avoid multiple re-renders,
-    // however that will require an additional peer dependency on react-dom.
-    // See: https://github.com/reactwg/react-18/discussions/86#discussioncomment-1567149
-    history[type] = function () {
-      var result = original.apply(this, arguments);
-      var event = new Event(type);
-      event.arguments = arguments;
-      dispatchEvent(event);
-      return result;
-    };
-  };
-  for (var _i3 = 0, _arr = [eventPushState, eventReplaceState]; _i3 < _arr.length; _i3++) {
-    _loop();
-  }
-
-  // patch history object only once
-  // See: https://github.com/molefrog/wouter/issues/167
-  Object.defineProperty(window, patchKey, {
-    value: true
-  });
-}
-
-var _excluded$d = ["children"],
-  _excluded2$1 = ["path", "nest", "match"],
-  _excluded3 = ["to", "href", "onClick", "asChild", "children", "className", "replace", "state"];
-
-/*
- * Transforms `path` into its relative `base` version
- * If base isn't part of the path provided returns absolute path e.g. `~/app`
- */
-var relativePath = function relativePath() {
-  var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  var path = arguments.length > 1 ? arguments[1] : undefined;
-  return !path.toLowerCase().indexOf(base.toLowerCase()) ? path.slice(base.length) || "/" : "~" + path;
-};
-var absolutePath = function absolutePath(to) {
-  var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
-  return to[0] === "~" ? to.slice(1) : base + to;
-};
-
-/*
- * decodes escape sequences such as %20
- */
-var unescape = function unescape(str) {
-  try {
-    return decodeURI(str);
-  } catch (_e) {
-    // fail-safe mode: if string can't be decoded do nothing
-    return str;
-  }
-};
-
-/*
- * Router and router context. Router is a lightweight object that represents the current
- * routing options: how location is managed, base path etc.
- *
- * There is a default router present for most of the use cases, however it can be overridden
- * via the <Router /> component.
- */
-
-var defaultRouter = {
-  hook: useBrowserLocation,
-  searchHook: useSearch,
-  parser: regexparam.parse,
-  base: "",
-  // this option is used to override the current location during SSR
-  ssrPath: undefined,
-  ssrSearch: undefined,
-  // customizes how `href` props are transformed for <Link />
-  hrefs: function hrefs(x) {
-    return x;
-  }
-};
-var RouterCtx = React.createContext(defaultRouter);
-
-// gets the closest parent router from the context
-var useRouter = function useRouter() {
-  return React.useContext(RouterCtx);
-};
-
-/**
- * Parameters context. Used by `useParams()` to get the
- * matched params from the innermost `Route` component.
- */
-
-var ParamsCtx = React.createContext({});
-
-/*
- * Part 1, Hooks API: useRoute and useLocation
- */
-
-// Internal version of useLocation to avoid redundant useRouter calls
-
-var useLocationFromRouter = function useLocationFromRouter(router) {
-  var _router$hook = router.hook(router),
-    _router$hook2 = _slicedToArray(_router$hook, 2),
-    location = _router$hook2[0],
-    navigate = _router$hook2[1];
-
-  // the function reference should stay the same between re-renders, so that
-  // it can be passed down as an element prop without any performance concerns.
-  // (This is achieved via `useEvent`.)
-  return [unescape(relativePath(router.base, location)), useEvent(function (to, navOpts) {
-    return navigate(absolutePath(to, router.base), navOpts);
-  })];
-};
-var useLocation = function useLocation() {
-  return useLocationFromRouter(useRouter());
-};
-var matchRoute = function matchRoute(parser, route, path, loose) {
-  // when parser is in "loose" mode, `$base` is equal to the
-  // first part of the route that matches the pattern
-  // (e.g. for pattern `/a/:b` and path `/a/1/2/3` the `$base` is `a/1`)
-  // we use this for route nesting
-  var _parser = parser(route || "*", loose),
-    pattern = _parser.pattern,
-    keys = _parser.keys;
-  var _ref = pattern.exec(path) || [],
-    _ref2 = _toArray(_ref),
-    $base = _ref2[0],
-    matches = _ref2.slice(1);
-  return $base !== undefined ? [true,
-  // an object with parameters matched, e.g. { foo: "bar" } for "/:foo"
-  // we "zip" two arrays here to construct the object
-  // ["foo"], ["bar"] → { foo: "bar" }
-  Object.fromEntries(keys.map(function (key, i) {
-    return [key, matches[i]];
-  }))].concat(_toConsumableArray(loose ? [$base] : [])) : [false, null];
-};
-
-/*
- * Part 2, Low Carb Router API: Router, Route, Link, Switch
- */
-
-var Router = function Router(_ref3) {
-  var _props$ssrPath$split, _props$ssrPath, _props$hrefs, _props$hook;
-  var children = _ref3.children,
-    props = _objectWithoutProperties(_ref3, _excluded$d);
-  // the router we will inherit from - it is the closest router in the tree,
-  // unless the custom `hook` is provided (in that case it's the default one)
-  var parent_ = useRouter();
-  var parent = props.hook ? defaultRouter : parent_;
-
-  // holds to the context value: the router object
-  var value = parent;
-
-  // when `ssrPath` contains a `?` character, we can extract the search from it
-  var _ref4 = (_props$ssrPath$split = (_props$ssrPath = props.ssrPath) === null || _props$ssrPath === void 0 ? void 0 : _props$ssrPath.split("?")) !== null && _props$ssrPath$split !== void 0 ? _props$ssrPath$split : [],
-    _ref5 = _slicedToArray(_ref4, 2),
-    path = _ref5[0],
-    search = _ref5[1];
-  if (search) props.ssrSearch = search, props.ssrPath = path;
-
-  // hooks can define their own `href` formatter (e.g. for hash location)
-  props.hrefs = (_props$hrefs = props.hrefs) !== null && _props$hrefs !== void 0 ? _props$hrefs : (_props$hook = props.hook) === null || _props$hook === void 0 ? void 0 : _props$hook.hrefs;
-
-  // what is happening below: to avoid unnecessary rerenders in child components,
-  // we ensure that the router object reference is stable, unless there are any
-  // changes that require reload (e.g. `base` prop changes -> all components that
-  // get the router from the context should rerender, even if the component is memoized).
-  // the expected behaviour is:
-  //
-  //   1) when the resulted router is no different from the parent, use parent
-  //   2) if the custom `hook` prop is provided, we always inherit from the
-  //      default router instead. this resets all previously overridden options.
-  //   3) when the router is customized here, it should stay stable between renders
-  var ref = React.useRef({}),
-    prev = ref.current,
-    next = prev;
-  for (var k in parent) {
-    var option = k === "base" ? /* base is special case, it is appended to the parent's base */
-    parent[k] + (props[k] || "") : props[k] || parent[k];
-    if (prev === next && option !== next[k]) {
-      ref.current = next = _objectSpread({}, next);
-    }
-    next[k] = option;
-
-    // the new router is no different from the parent, use parent
-    if (option !== parent[k]) value = next;
-  }
-  return React.createElement(RouterCtx.Provider, {
-    value: value,
-    children: children
-  });
-};
-var h_route = function h_route(_ref6, params) {
-  var children = _ref6.children,
-    component = _ref6.component;
-  // React-Router style `component` prop
-  if (component) return React.createElement(component, {
-    params: params
-  });
-
-  // support render prop or plain children
-  return typeof children === "function" ? children(params) : children;
-};
-var Route = function Route(_ref7) {
-  var path = _ref7.path,
-    nest = _ref7.nest,
-    match = _ref7.match,
-    renderProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  var router = useRouter();
-  var _useLocationFromRoute = useLocationFromRouter(router),
-    _useLocationFromRoute2 = _slicedToArray(_useLocationFromRoute, 1),
-    location = _useLocationFromRoute2[0];
-  var _ref8 = // `match` is a special prop to give up control to the parent,
-    // it is used by the `Switch` to avoid double matching
-    match !== null && match !== void 0 ? match : matchRoute(router.parser, path, location, nest),
-    _ref9 = _slicedToArray(_ref8, 3),
-    matches = _ref9[0],
-    params = _ref9[1],
-    base = _ref9[2];
-  if (!matches) return null;
-  var children = base ? React.createElement(Router, {
-    base: base
-  }, h_route(renderProps, params)) : h_route(renderProps, params);
-  return React.createElement(ParamsCtx.Provider, {
-    value: params,
-    children: children
-  });
-};
-React.forwardRef(function (props, ref) {
-  var router = useRouter();
-  var _useLocationFromRoute3 = useLocationFromRouter(router),
-    _useLocationFromRoute4 = _slicedToArray(_useLocationFromRoute3, 2),
-    path = _useLocationFromRoute4[0],
-    navigate = _useLocationFromRoute4[1];
-  var to = props.to,
-    _props$href = props.href,
-    _href = _props$href === void 0 ? to : _props$href,
-    _onClick = props.onClick,
-    asChild = props.asChild,
-    children = props.children,
-    cls = props.className;
-    props.replace;
-    props.state;
-    var restProps = _objectWithoutProperties(props, _excluded3);
-  var onClick = useEvent(function (event) {
-    // ignores the navigation when clicked using right mouse button or
-    // by holding a special modifier key: ctrl, command, win, alt, shift
-    if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey || event.button !== 0) return;
-    _onClick === null || _onClick === void 0 || _onClick(event);
-    if (!event.defaultPrevented) {
-      event.preventDefault();
-      navigate(_href, props);
-    }
-  });
-
-  // handle nested routers and absolute paths
-  var href = router.hrefs(_href[0] === "~" ? _href.slice(1) : router.base + _href, router // pass router as a second argument for convinience
-  );
-  return asChild && React.isValidElement(children) ? React.cloneElement(children, {
-    onClick: onClick,
-    href: href
-  }) : React.createElement("a", _objectSpread(_objectSpread({}, restProps), {}, {
-    onClick: onClick,
-    href: href,
-    // `className` can be a function to apply the class if this link is active
-    className: cls !== null && cls !== void 0 && cls.call ? cls(path === href) : cls,
-    children: children,
-    ref: ref
-  }));
-});
-var flattenChildren = function flattenChildren(children) {
-  return Array.isArray(children) ? children.flatMap(function (c) {
-    return flattenChildren(c && c.type === React.Fragment ? c.props.children : c);
-  }) : [children];
-};
-var Switch = function Switch(_ref10) {
-  var children = _ref10.children,
-    location = _ref10.location;
-  var router = useRouter();
-  var _useLocationFromRoute5 = useLocationFromRouter(router),
-    _useLocationFromRoute6 = _slicedToArray(_useLocationFromRoute5, 1),
-    originalLocation = _useLocationFromRoute6[0];
-  var _iterator = _createForOfIteratorHelper(flattenChildren(children)),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var element = _step.value;
-      var match = 0;
-      if (React.isValidElement(element) &&
-      // we don't require an element to be of type Route,
-      // but we do require it to contain a truthy `path` prop.
-      // this allows to use different components that wrap Route
-      // inside of a switch, for example <AnimatedRoute />.
-      (match = matchRoute(router.parser, element.props.path, location || originalLocation, element.props.nest))[0]) return React.cloneElement(element, {
-        match: match
-      });
-    }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return null;
-};
-
-({
-  children: PropTypes.node.isRequired,
-  routes: PropTypes.objectOf(PropTypes.string).isRequired,
-  basePath: PropTypes.string
-});
-function parseLocation(location) {
-  var search = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var hash = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var _split = (location || '').split('?', 2),
-    _split2 = _slicedToArray(_split, 2),
-    pathname = _split2[0],
-    _split2$ = _split2[1],
-    searchFromPath = _split2$ === void 0 ? null : _split2$;
-  var _split3 = (searchFromPath || '').split('#', 2),
-    _split4 = _slicedToArray(_split3, 2),
-    searchWithoutHash = _split4[0],
-    _split4$ = _split4[1],
-    hashFromPath = _split4$ === void 0 ? null : _split4$;
-  return {
-    pathname: pathname !== '' ? pathname : '/',
-    search: search || searchWithoutHash || null,
-    hash: hash || hashFromPath || null
-  };
-}
-function useMemoryRouter() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    _ref3$path = _ref3.path,
-    path = _ref3$path === void 0 ? '/' : _ref3$path,
-    _ref3$static = _ref3["static"],
-    staticLocation = _ref3$static === void 0 ? false : _ref3$static;
-    _ref3.record;
-  var currentPath = parseLocation(path);
-  var emitter = mitt();
-  var navigateImplementation = function navigateImplementation(newPath) {
-    var newParsedPath = parseLocation(newPath);
-    currentPath = newParsedPath;
-    emitter.emit('navigate', path);
-  };
-  var navigate = !staticLocation ? navigateImplementation : function () {
-    return null;
-  };
-  var subscribe = function subscribe(cb) {
-    emitter.on('navigate', cb);
-    return function () {
-      return emitter.off('navigate', cb);
-    };
-  };
-  function reset() {
-    navigateImplementation(path);
-  }
-  var locationHook = function locationHook() {
-    return [React.useSyncExternalStore(subscribe, function () {
-      return currentPath.pathname;
-    }), navigate];
-  };
-  var searchHook = function searchHook() {
-    return React.useSyncExternalStore(subscribe, function () {
-      return currentPath.search || '';
-    });
-  };
-  return {
-    hook: locationHook,
-    searchHook: searchHook,
-    reset: reset,
-    navigate: navigate
-  };
-}
-function useRouteMatcher() {
-  var router = useRouter();
-  var _useLocation3 = useLocation(),
-    _useLocation4 = _slicedToArray(_useLocation3, 1),
-    location = _useLocation4[0];
-  var matcher = React.useCallback(function (route) {
-    var specificLocation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var path = specificLocation || location;
-    // when parser is in "loose" mode, `$base` is equal to the
-    // first part of the route that matches the pattern
-    // (e.g. for pattern `/a/:b` and path `/a/1/2/3` the `$base` is `a/1`)
-    // we use this for route nesting
-    var _router$parser = router.parser(route || '*'),
-      pattern = _router$parser.pattern,
-      keys = _router$parser.keys;
-    var _ref4 = pattern.exec(path) || [],
-      _ref5 = _toArray(_ref4),
-      $base = _ref5[0],
-      matches = _ref5.slice(1);
-    return $base !== undefined ? [true,
-    // an object with parameters matched, e.g. { foo: "bar" } for "/:foo"
-    // we "zip" two arrays here to construct the object
-    // ["foo"], ["bar"] → { foo: "bar" }
-    Object.fromEntries(keys.map(function (key, i) {
-      return [key, matches[i]];
-    }))] : [false];
-  }, [router, location]);
-  return matcher;
-}
-function createPathToRegexpParser(opts) {
-  return function (fullPath, loose) {
-    var path = fullPath.replace(/^(https?:\/\/[^/]+)\/?/, '/');
-    var keys = [];
-    var isWildcard = path.match(/(\/|^)\*$/) !== null;
-    var pattern = pathToRegexp.pathToRegexp(isWildcard ? path.replace(/(\/|^)\*$/, '$1(.*)') : path, keys, _objectSpread({
-      end: !loose && !isWildcard
-    }, opts));
-    return {
-      pattern: pattern,
-      // `pathToRegexp` returns some metadata about the keys,
-      // we want to strip it to just an array of keys
-      keys: keys.map(function (k) {
-        return k.name;
-      })
-    };
-  };
-}
-
-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 = contexts.useRoutes();
-  var _useLocation = useLocation(),
-    _useLocation2 = _slicedToArray(_useLocation, 1),
-    location = _useLocation2[0];
-  var matcher = useRouteMatcher();
-  var _useMemo = React.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 = React.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 = React.useRef({
-    url: url,
-    screenIndex: screenIndex
-  });
-  var direction = React.useMemo(function () {
-    var _lastPageRef$current = lastPageRef.current,
-      lastScreenIndex = _lastPageRef$current.screenIndex,
-      lastUrl = _lastPageRef$current.url;
-    lastPageRef.current.url = url;
-    lastPageRef.current.screenIndex = screenIndex;
-    if (screenIndex !== lastScreenIndex) {
-      // return screenIndex > lastScreenIndex ? 'bottom' : 'top';
-      return null;
-    }
-    var urlSplit = url.split('/');
-    var lastUrlSplit = lastUrl.split('/');
-    var currentPartsCount = urlSplit.length;
-    var previousPartsCount = lastUrlSplit.length;
-    var isSettings = urlSplit[currentPartsCount - 1] === 'settings';
-    var wasSettings = lastUrlSplit[previousPartsCount - 1] === 'settings';
-    currentPartsCount -= isSettings ? 1 : 0;
-    previousPartsCount -= wasSettings ? 1 : 0;
-    return currentPartsCount >= previousPartsCount ? 'right' : 'left';
-  }, [url, screenIndex]);
-  var transitionClassNames = React.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 = utils.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: uuid.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: uuid.v1()
-    })], _toConsumableArray(components.slice(screenIndex + 1))) : [].concat(_toConsumableArray(components), [_objectSpread(_objectSpread({}, screen), {}, {
-      id: uuid.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(components.Button, Object.assign({
-    className: className,
-    theme: "secondary",
-    size: "sm",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: dots ? faEllipsisV.faEllipsisV : faCogs.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 = contexts.useScreenDefinition() || null;
-  var _definition$states = definition.states,
-    states = _definition$states === void 0 ? null : _definition$states;
-  var screenFields = utils.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 = contexts.useFormsComponents();
-  return definition !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames({
-      'p-2': form === null
-    })
-  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(components.FieldForm, Object.assign({
-    fields: finalScreenFields,
-    formComponents: formComponents,
-    name: finalNameParts.join('.'),
-    form: form
-  }, props)) : /*#__PURE__*/React.createElement(fields.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: core.PropTypes.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 = contexts.useScreenDefinition(),
-    _useScreenDefinition$ = _useScreenDefinition.fields,
-    fields$1 = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$;
-  // const intl = useIntl();
-  // const finalOnClickDelete = useCallback(() => {
-  //     if (
-  //         onClickDelete !== null &&
-  //         window.confirm(
-  //             intl.formatMessage({
-  //                 defaultMessage: 'Are you sure you want to delete this screen?',
-  //                 description: 'Confirm message when deleting a screen',
-  //             }),
-  //         )
-  //     ) {
-  //         onClickDelete(value);
-  //     }
-  // }, [intl, onClickDelete, value]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$i.inner
-  }, fields$1 !== null ? /*#__PURE__*/React.createElement(fields.Fields, {
-    fields: fields$1,
-    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: core.PropTypes.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 = reactIntl.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 = contexts.useScreensManager();
-  var fieldsManager = contexts.useFieldsManager();
-  var fieldsComponentManager = contexts.useFieldsComponentsManager();
-  var route = contexts.useUrlGenerator();
-  var _useMemo = React.useMemo(function () {
-      var screenIndex = screens.findIndex(function (it) {
-        return it.id === screenId;
-      });
-      if (!screens[screenIndex]) {
-        return {};
-      }
-      var _screens$screenIndex = screens[screenIndex],
-        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(utils.getScreenFieldsWithStates(definition)), [utils.getScreenExtraField(intl)]) : null,
-        states: states,
-        parameters: parameters
-      };
-    }, [screens, screenId, screensManager, intl]),
-    _useMemo$title = _useMemo.title,
-    screenTitle = _useMemo$title === void 0 ? null : _useMemo$title,
-    _useMemo$fields = _useMemo.fields,
-    screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
-    _useMemo$states = _useMemo.states,
-    screenStates = _useMemo$states === void 0 ? null : _useMemo$states,
-    _useMemo$parameters = _useMemo.parameters,
-    screenParameters = _useMemo$parameters === void 0 ? null : _useMemo$parameters;
-  var items = React.useMemo(function () {
-    var fieldItems = [];
-    var currentState = null;
-    if (field !== null) {
-      var fieldPath = field.split('/');
-
-      // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
-      var _fieldPath = _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 = utils.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(reactIntl.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 = React.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(components.BackButton, {
-    onClick: onClickBack,
-    className: "me-2 py-0"
-  }) : null, /*#__PURE__*/React.createElement(components.Breadcrumb, {
-    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(components.Modal, null, /*#__PURE__*/React.createElement(components.ModalDialog, {
-    title: /*#__PURE__*/React.createElement(reactIntl.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(components.Label, null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "q/tLk0",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Are you sure you want to delete this screen?"
-    }]
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$g.actions
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    onClick: onCancel,
-    className: "btn-outline-secondary me-2"
-  }, /*#__PURE__*/React.createElement(components.Label, null, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "0GT0SI",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  }))), /*#__PURE__*/React.createElement(components.Button, {
-    onClick: onConfirm,
-    theme: "danger",
-    label: /*#__PURE__*/React.createElement(reactIntl.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([core.PropTypes.story, core.PropTypes.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 = contexts.useRoutePush();
-  var _useRouteParams = useRouteParams(),
-    url = _useRouteParams.url,
-    _useRouteParams$scree = _useRouteParams.screen,
-    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
-    _useRouteParams$field = _useRouteParams.field,
-    fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
-    _useRouteParams$form = _useRouteParams.form,
-    formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form;
-
-  // Get screen
-  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 = contexts.useScreensManager();
-  var screenFields = React.useMemo(function () {
-    var _ref3 = screen || {},
-      type = _ref3.type;
-    var definition = type !== null ? screensManager.getDefinition(type) : null;
-    return definition != null ? utils.getScreenFieldsWithStates(definition) : [];
-  }, [screensManager, screen]);
-
-  // Get transition value
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$f),
-    transitionClassNames = _useFormTransition.classNames,
-    transitionTimeout = _useFormTransition.timeout;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    screenSettingsOpened = _useState2[0],
-    setScreenSettingsOpened = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    deleteScreenModalOpened = _useState4[0],
-    setDeleteScreenModalOpened = _useState4[1];
-  var _useState5 = React.useState({}),
-    _useState6 = _slicedToArray(_useState5, 2),
-    fieldForms = _useState6[0],
-    setFieldForms = _useState6[1];
-  var _useState7 = React.useState(null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    fieldContext = _useState8[0],
-    setFieldContext = _useState8[1];
-
-  // Callbacks
-  var gotoFieldForm = React.useCallback(function () {
-    var field = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-    var context = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    var hasField = field !== null;
-    var fieldRoute = formName !== null ? 'screen.field.form' : 'screen.field';
-    var _ref4 = field !== null ? field.split('.') : [],
-      _ref5 = _slicedToArray(_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 ? utils.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 = React.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 = React.useCallback(function (newValue) {
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  }, [onChange]);
-  var onScreenFormChange = React.useCallback(function (newScreenValue) {
-    triggerOnChange(updateScreen(value, newScreenValue));
-  }, [value, triggerOnChange]);
-  var onClickDuplicate = React.useCallback(function () {
-    triggerOnChange(duplicateScreen(value, screenId, screenIndex));
-    setScreenSettingsOpened(false);
-  }, [value, screenId, screenIndex, triggerOnChange, setScreenSettingsOpened]);
-  var onClickDelete = React.useCallback(function () {
-    setDeleteScreenModalOpened(true);
-    setScreenSettingsOpened(false);
-  }, [setScreenSettingsOpened, setDeleteScreenModalOpened]);
-  var onSettingsClick = React.useCallback(function () {
-    setScreenSettingsOpened(!screenSettingsOpened);
-  }, [screenSettingsOpened, setScreenSettingsOpened]);
-  var onDropdownClickOutside = React.useCallback(function () {
-    setScreenSettingsOpened(false);
-  }, [setScreenSettingsOpened]);
-  var onDeleteScreenConfirm = React.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 = React.useCallback(function () {
-    setDeleteScreenModalOpened(false);
-  }, [setDeleteScreenModalOpened]);
-  var dropdownItems = [!isTheme ? {
-    id: 'duplicate',
-    type: 'button',
-    label: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "IBjY5r",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Duplicate screen"
-      }]
-    }),
-    onClick: onClickDuplicate
-  } : null, {
-    id: 'delete',
-    type: 'button',
-    label: /*#__PURE__*/React.createElement(reactIntl.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(components.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(components.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(reactTransitionGroup.TransitionGroup, {
-    className: "w-100 flex-grow-1",
-    childFactory: function childFactory(child) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        classNames: transitionClassNames
-      });
-    }
-  }, fieldParams !== null ? /*#__PURE__*/React.createElement(reactTransitionGroup.CSSTransition, {
-    timeout: transitionTimeout,
-    key: "field-".concat(fieldParams, "-").concat(formParams)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$f.panel])
-  }, /*#__PURE__*/React.createElement(contexts.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(reactTransitionGroup.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(contexts.ScreenProvider, {
-    data: screen
-  }, /*#__PURE__*/React.createElement(ScreenForm$1, {
-    value: screen,
-    className: styles$f.form,
-    onChange: onScreenFormChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm
-  }))))) : /*#__PURE__*/React.createElement(components.Empty, {
-    className: "w-100 m-2"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "QfpTKK",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Select a screen..."
-    }],
-    decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React.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 = contexts.useScreensManager();
-  var states = React.useMemo(function () {
-    var definition = screensManager.getDefinition(type) || null;
-    var _ref2 = definition || {},
-      _ref2$states = _ref2.states,
-      screenStates = _ref2$states === void 0 ? null : _ref2$states;
-    return screenStates;
-  }, [screensManager, type]);
-  return states;
-}
-
-var _excluded$7 = ["components"];
-var useThemeValue = function useThemeValue(value) {
-  var isTheme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var valueWithTheme = React.useMemo(function () {
-    if (!isTheme) {
-      return value;
-    }
-    var _ref = value || {};
-      _ref.components;
-      var themeValue = _objectWithoutProperties(_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: core.PropTypes.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 = utils.getComponentFromName(device, iconComponents, DesktopIcon$1);
-  return /*#__PURE__*/React.createElement(components.Button, Object.assign({
-    className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
-  }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$d.icon
-  }));
-};
-DeviceButton.propTypes = propTypes$g;
-DeviceButton.defaultProps = defaultProps$g;
-var DeviceButton$1 = DeviceButton;
-
-var _excluded$5 = ["id"];
-var propTypes$f = {
-  items: core.PropTypes.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(components.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: core.PropTypes.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(components.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: core.PropTypes.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 = reactIntl.useIntl();
-  var _useIsVisible = hooks.useIsVisible({
-      threshold: 0.1
-    }),
-    ref = _useIsVisible.ref,
-    visible = _useIsVisible.visible;
-  var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
-  var finalTitle = utils.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(reactFontawesome.FontAwesomeIcon, {
-    icon: faTimesCircle.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: core.PropTypes.screen.isRequired,
-  screenState: PropTypes.string,
-  value: core.PropTypes.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 = contexts.useUrlGenerator();
-  var push = contexts.useRoutePush();
-  var _useRouteParams = useRouteParams(),
-    _useRouteParams$scree = _useRouteParams.screen,
-    screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
-    _useRouteParams$field = _useRouteParams.field,
-    field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
-  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(components.Button, {
-    className: classNames([styles$a.button, 'p-0', 'flex-grow-1', 'justify-content-center']),
-    theme: screenParam !== null && field === null ? 'primary' : 'secondary',
-    outline: screenParam === null || field !== null,
-    size: "lg",
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faCogs.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(reactIntl.FormattedMessage, label)), repeatable ? /*#__PURE__*/React.createElement("ul", {
-      className: "d-flex list-unstyled m-n1 flex-grow-1"
-    }, repeatableItems.map(function (item, index) {
-      return /*#__PURE__*/React.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(components.Button, {
-      className: classNames([styles$a.button, styles$a.addButton, 'h-100', 'p-0', 'justify-content-center']),
-      theme: "secondary",
-      outline: true,
-      size: "lg",
-      icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-        icon: faPlus.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([core.PropTypes.story, core.PropTypes.theme]),
-  devices: core.PropTypes.devices,
-  device: PropTypes.string,
-  viewerTheme: core.PropTypes.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 = contexts.useScreenSize(),
-    _useScreenSize$screen = _useScreenSize.screen,
-    screen = _useScreenSize$screen === void 0 ? null : _useScreenSize$screen,
-    _useScreenSize$screen2 = _useScreenSize.screens,
-    screens = _useScreenSize$screen2 === void 0 ? [] : _useScreenSize$screen2;
-  var valueWithTheme = useThemeValue(value, isTheme);
-  // const valueParsed = valueWithTheme;
-  var valueParsed = hooks.useParsedStory(valueWithTheme, {
-    withTheme: isTheme,
-    withMedias: false
-  });
-
-  // Get device
-  var _useState = React.useState(initialDevice || devices[0].id),
-    _useState2 = _slicedToArray(_useState, 2),
-    deviceId = _useState2[0],
-    setDeviceId = _useState2[1];
-  var onClickDeviceItem = React.useCallback(function (e, it) {
-    return setDeviceId(it.id);
-  }, [setDeviceId]);
-  var device = React.useMemo(function () {
-    return devices.find(function (it) {
-      return it.id === deviceId;
-    });
-  }, [devices, deviceId]);
-
-  // Calculate preview style
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    bottomRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
-    _useDimensionObserver3 = _useDimensionObserver.height,
-    bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
-  var previewStyle = React.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 = size.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 = React.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(contexts.PlaybackProvider, null, /*#__PURE__*/React.createElement(viewer.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 = sortable.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 = [core$1.KeyboardCode.Down, core$1.KeyboardCode.Right, core$1.KeyboardCode.Up, core$1.KeyboardCode.Left];
-var horizontal = [core$1.KeyboardCode.Left, core$1.KeyboardCode.Right];
-var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(context, indentationWidth) {
-  return function (event, _ref) {
-    var currentCoordinates = _ref.currentCoordinates,
-      _ref$context = _ref.context,
-      active = _ref$context.active,
-      over = _ref$context.over,
-      collisionRect = _ref$context.collisionRect,
-      droppableContainers = _ref$context.droppableContainers;
-    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 core$1.KeyboardCode.Left:
-            if (depth > minDepth) {
-              return _objectSpread(_objectSpread({}, currentCoordinates), {}, {
-                x: currentCoordinates.x - indentationWidth
-              });
-            }
-            break;
-          case core$1.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 core$1.KeyboardCode.Down:
-              if (overRect.top < rect.top) {
-                containers.push(container);
-              }
-              break;
-            case core$1.KeyboardCode.Up:
-              if (overRect.top > rect.top) {
-                containers.push(container);
-              }
-              break;
-            //
-          }
-        });
-      }
-      var collisions = core$1.closestCorners({
-        active: active,
-        collisionRect: collisionRect,
-        pointerCoordinates: null,
-        droppableContainers: containers
-      });
-      var closestId = core$1.getFirstCollision(collisions, 'id');
-      if (closestId && over !== null && over !== void 0 && over.id) {
-        var _droppableContainers$2, _droppableContainers$3;
-        var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.node.current;
-        var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : _droppableContainers$3.rect.current;
-        if (newNode && activeNodeRect) {
-          var newRect = core$1.getClientRect(newNode, {
-            ignoreTransform: true
-          });
-          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__*/React.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(reactFontawesome.FontAwesomeIcon, {
-    className: styles$8.icon,
-    icon: faGripLines.faGripLines
-  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: onRemove
-  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: faTimes.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(reactFontawesome.FontAwesomeIcon, {
-    icon: faAngleDown.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 = sortable.useSortable({
-      id: id,
-      animateLayoutChanges: animateLayoutChanges
-    }),
-    attributes = _useSortable.attributes,
-    isDragging = _useSortable.isDragging,
-    isSorting = _useSortable.isSorting,
-    listeners = _useSortable.listeners,
-    setDraggableNodeRef = _useSortable.setDraggableNodeRef,
-    setDroppableNodeRef = _useSortable.setDroppableNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition;
-  var timeout = React.useRef(null);
-  var actionsStyle = {
-    transform: utilities.CSS.Translate.toString(transform),
-    transition: transition
-  };
-  var _ref3 = listeners || {},
-    _ref3$onPointerDown = _ref3.onPointerDown,
-    onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
-    _ref3$onPointerUp = _ref3.onPointerUp,
-    onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
-  var onClickAction = React.useCallback(function (e) {
-    if (onClickItem !== null) {
-      onClickItem(value, index);
-    }
-    if (onPointerDown !== null) {
-      e.persist();
-      timeout.current = setTimeout(function () {
-        if (onPointerDown !== null) {
-          onPointerDown(e);
-        }
-        timeout.current = null;
-      }, 200);
-    }
-  }, [value, index, onClickItem, onPointerDown]);
-  var cancellingPointerUp = React.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: core$1.MeasuringStrategy.Always
-  }
-};
-var dropAnimation = _objectSpread(_objectSpread({}, core$1.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 = React.useState(function () {
-      return buildTree(defaultItems);
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    items = _useState2[0],
-    setItems = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    activeId = _useState4[0],
-    setActiveId = _useState4[1];
-  var _useState5 = React.useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    overId = _useState6[0],
-    setOverId = _useState6[1];
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    offsetLeft = _useState8[0],
-    setOffsetLeft = _useState8[1];
-  var _useState9 = React.useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    currentPosition = _useState10[0],
-    setCurrentPosition = _useState10[1];
-
-  // Tree setup from list
-  React.useEffect(function () {
-    var flat = flattenTree(items);
-    var merged = defaultItems.map(function (t1) {
-      return _objectSpread(_objectSpread({}, flat.find(function (t2) {
-        return t2.id === t1.id;
-      })), t1);
-    });
-    setItems(buildTree(merged));
-  }, [defaultItems.length]);
-  var flattenedItems = React.useMemo(function () {
-    var flattenedTree = flattenTree(items);
-    var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
-      var _ref3$children = _ref3.children,
-        children = _ref3$children === void 0 ? [] : _ref3$children,
-        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 = React.useRef({
-    items: flattenedItems,
-    offset: offsetLeft
-  });
-  var _useState11 = React.useState(function () {
-      return sortableTreeKeyboardCoordinates(sensorContext, indentationWidth);
-    }),
-    _useState12 = _slicedToArray(_useState11, 1),
-    coordinateGetter = _useState12[0];
-  var sensors = core$1.useSensors(core$1.useSensor(core$1.PointerSensor), core$1.useSensor(core$1.KeyboardSensor, {
-    coordinateGetter: coordinateGetter
-  }));
-  var sortedIds = React.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;
-  React.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 = sortable.arrayMove(clonedItems, activeIndex, overIndex);
-      var previousItem = sortedItems[overIndex - 1];
-      var newAnnouncement;
-      var movedVerb = eventName === 'onDragEnd' ? 'dropped' : 'moved';
-      var nestedVerb = eventName === 'onDragEnd' ? 'dropped' : 'nested';
-      if (!previousItem) {
-        var nextItem = typeof sortedItems[overIndex + 1] !== 'undefined' ? sortedItems[overIndex + 1] : null;
-        if (nextItem !== null) {
-          newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " before ").concat(nextItem.id, ".");
-        }
-      } else if (projected.depth > previousItem.depth) {
-        newAnnouncement = "".concat(currentActiveId, " was ").concat(nestedVerb, " under ").concat(previousItem.id, ".");
-      } else {
-        var previousSibling = previousItem;
-        var _loop = function _loop() {
-          var _previousSibling = previousSibling,
-            parentId = _previousSibling.parentId;
-          previousSibling = sortedItems.find(function (_ref8) {
-            var id = _ref8.id;
-            return id === parentId;
-          });
-        };
-        while (previousSibling && projected.depth < previousSibling.depth) {
-          _loop();
-        }
-        if (previousSibling) {
-          newAnnouncement = "".concat(currentActiveId, " was ").concat(movedVerb, " after ").concat(previousSibling.id, ".");
-        }
-      }
-
-      // eslint-disable-next-line consistent-return
-      return newAnnouncement;
-    }
-  }
-  var announcements = React.useMemo(function () {
-    return {
-      onDragStart: function onDragStart(id) {
-        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 = React.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 = React.useCallback(function (_ref12) {
-    var delta = _ref12.delta;
-    setOffsetLeft(delta.x);
-  }, [setOffsetLeft]);
-  var handleDragOver = React.useCallback(function (_ref13) {
-    var _over$id;
-    var over = _ref13.over;
-    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
-  }, [setOverId]);
-  var resetState = React.useCallback(function () {
-    setOverId(null);
-    setActiveId(null);
-    setOffsetLeft(0);
-    setCurrentPosition(null);
-    document.body.style.setProperty('cursor', '');
-  }, [setOverId, setActiveId, setOffsetLeft, setCurrentPosition]);
-  var handleDragEnd = React.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 = sortable.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, sortable.arrayMove, buildTree, setItems]);
-  var handleDragCancel = React.useCallback(function () {
-    resetState();
-  }, [resetState]);
-  var handleRemove = React.useCallback(function (id) {
-    setItems(function (newItems) {
-      return removeItem(newItems, id);
-    });
-  }, [setItems, removeItem]);
-  var handleCollapse = React.useCallback(function (id) {
-    setItems(function (newItems) {
-      return setProperty(newItems, id, 'collapsed', function (value) {
-        return !value;
-      });
-    });
-  }, [setItems, setProperty]);
-  return /*#__PURE__*/React.createElement(core$1.DndContext, {
-    accessibility: {
-      announcements: announcements
-    }
-    // announcements={announcements}
-    ,
-    sensors: sensors,
-    collisionDetection: core$1.closestCenter,
-    measuring: measuring,
-    onDragStart: handleDragStart,
-    onDragMove: handleDragMove,
-    onDragOver: handleDragOver,
-    onDragEnd: handleDragEnd,
-    onDragCancel: handleDragCancel
-  }, /*#__PURE__*/React.createElement(sortable.SortableContext, {
-    items: sortedIds,
-    strategy: sortable.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__*/reactDom.createPortal( /*#__PURE__*/React.createElement(core$1.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: core.PropTypes.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 = React.useMemo(function () {
-    return isTree ? items.map(function (_ref5) {
-      var id = _ref5.id,
-        _ref5$screen = _ref5.screen,
-        screen = _ref5$screen === void 0 ? {} : _ref5$screen,
-        href = _ref5.href,
-        props = _objectWithoutProperties(_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(reactSortablejs.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: core.PropTypes.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 = reactIntl.useIntl();
-  var screensManager = contexts.useScreensManager();
-  var screenDefinitions = screens || screensManager.getDefinitions();
-  var finalDefinitions = (screenDefinitions || []).filter(function (s) {
-    return s !== null;
-  });
-  var groups = React.useMemo(function () {
-    var groupItems = finalDefinitions.reduce(function (allGroups, definition) {
-      var id = definition.id,
-        title = definition.title,
-        _definition$group = definition.group,
-        group = _definition$group === void 0 ? {} : _definition$group;
-      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 = utils.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: utils.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(components.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(components.Modal, null, /*#__PURE__*/React.createElement(components.ModalDialog, {
-    title: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "QBaiO0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Add a screen"
-      }]
-    }),
-    className: classNames([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([core.PropTypes.story, core.PropTypes.theme]),
-  isTheme: PropTypes.bool,
-  isVertical: PropTypes.bool,
-  isCreateOpened: PropTypes.bool,
-  isParsed: PropTypes.bool,
-  isTree: PropTypes.bool,
-  onClickScreen: PropTypes.func,
-  onChange: PropTypes.func,
-  className: PropTypes.string
-};
-var defaultProps$4 = {
-  value: null,
-  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 : hooks.useParsedStory(valueWithTheme, {
-    withMedias: false
-  });
-  var _ref2 = value || {},
-    _ref2$components = _ref2.components,
-    screens = _ref2$components === void 0 ? [] : _ref2$components;
-  var _useState = React.useState(isCreateOpened),
-    _useState2 = _slicedToArray(_useState, 2),
-    createModalOpened = _useState2[0],
-    setCreateModalOpened = _useState2[1];
-  var routes = contexts.useRoutes();
-  var push = contexts.useRoutePush();
-  var url = contexts.useUrlGenerator();
-  var _useRouteParams = useRouteParams({
-      screenOnly: true
-    }),
-    _useRouteParams$scree = _useRouteParams.screen,
-    currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
-  var createScreenFromDefinition = React.useCallback(function (definition) {
-    var _ref3 = value || {},
-      _ref3$components = _ref3.components,
-      currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
-      _ref3$theme = _ref3.theme,
-      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
-    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 = React.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 = React.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 = React.useCallback(function () {
-    return setCreateModalOpened(true);
-  }, [setCreateModalOpened]);
-  var onCreateModalRequestClose = React.useCallback(function () {
-    return setCreateModalOpened(false);
-  }, [setCreateModalOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', styles$2.container, className])
-  }, /*#__PURE__*/React.createElement(components.Navbar, {
-    compact: true,
-    noWrap: true,
-    withoutCollapse: true,
-    className: classNames(['sticky-top', styles$2.navbar])
-  }, /*#__PURE__*/React.createElement("strong", {
-    className: "mb-0 me-auto"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "jf+4Hq",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screens"
-    }]
-  })), /*#__PURE__*/React.createElement(components.Button, {
-    theme: "primary",
-    size: "sm",
-    onClick: onClickAdd,
-    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: faPlus.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(components.Empty, {
-      className: "flex-grow-1 p-2"
-    }, /*#__PURE__*/React.createElement(components.Button, {
-      theme: "primary",
-      onClick: onClickAdd
-    }, /*#__PURE__*/React.createElement(reactIntl.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(components.Empty, {
-    className: "flex-grow-1 p-2"
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    theme: "primary",
-    onClick: onClickAdd
-  }, /*#__PURE__*/React.createElement(reactIntl.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([core.PropTypes.story, core.PropTypes.theme]),
-  deviceScreens: core.PropTypes.deviceScreens,
-  viewerTheme: core.PropTypes.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: utils.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 = contexts.useRoutePush();
-  var refScreensContainer = React.useRef(null);
-  var _useRouteParams = useRouteParams({
-      screenOnly: true
-    }),
-    screenId = _useRouteParams.screen;
-
-  // Screen size
-  var _useScreenSizeFromEle = hooks.useScreenSizeFromElement({
-      screens: deviceScreens,
-      withoutMaxSize: true,
-      withoutScale: true
-    }),
-    refContainer = _useScreenSizeFromEle.ref,
-    screenSize = _useScreenSizeFromEle.screenSize;
-  var isMobile = screenSize !== null && screenSize.screens.indexOf('medium') === -1;
-
-  // Mobile view
-  var _useState = React.useState(initialMobileView),
-    _useState2 = _slicedToArray(_useState, 2),
-    mobileView = _useState2[0],
-    setMobileView = _useState2[1];
-  var onClickScreens = React.useCallback(function () {
-    return setMobileView('screens');
-  }, [mobileView, setMobileView]);
-  var onClickEdit = React.useCallback(function () {
-    return setMobileView('form');
-  }, [setMobileView]);
-  var onClickViewScreen = React.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 = hooks.useParsedStory(baseValue);
-  var _useMediasParser = hooks.useMediasParser(),
-    parseMediasToPath = _useMediasParser.toPath;
-  var onStoryChange = React.useCallback(function (newStory) {
-    var storyWithMedias = parseMediasToPath(newStory);
-    if (onChange !== null) {
-      onChange(storyWithMedias);
-    }
-  }, [onChange, parseMediasToPath]);
-  var clickedScreenId = React.useRef(null);
-  var onClickScreen = React.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 = React.useCallback(function (_ref4) {
-    var newScreenId = _ref4.id;
-    push('screen', {
-      screen: newScreenId
-    });
-  }, [push]);
-
-  // Auto-scroll to current screen except when manually clicking one
-  React.useEffect(function () {
-    if (screenId === null || clickedScreenId.current === screenId) {
-      return;
-    }
-    clickedScreenId.current = null;
-    var screens = refScreensContainer.current;
-    var items = screens.querySelectorAll("[data-screen-id=\"".concat(screenId, "\"]"));
-    if (items !== null && items.length > 0) {
-      var item = items[0];
-      var cnt = item.parentNode.parentNode.parentNode;
-      screens.scrollTop = cnt.offsetTop + item.offsetTop + item.offsetHeight / 2 - screens.clientHeight / 2;
-    }
-  }, [screenId]);
-
-  // console.log('screenId', screenId);
-
-  return /*#__PURE__*/React.createElement(contexts.ModalsProvider, null, /*#__PURE__*/React.createElement(contexts.PanelsProvider, null, /*#__PURE__*/React.createElement(contexts.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(components.Navbar, {
-    theme: "light",
-    compact: true,
-    noWrap: true,
-    withoutCollapse: true,
-    className: styles$1.top
-  }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(components.Button, {
-    size: "sm",
-    theme: "secondary",
-    onClick: onClickScreens,
-    className: "me-auto"
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "wkysUu",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Screens"
-    }]
-  })) : /*#__PURE__*/React.createElement("span", null), mobileView !== 'form' ? /*#__PURE__*/React.createElement(components.Button, {
-    size: "sm",
-    theme: "primary",
-    onClick: onClickEdit
-  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "HseFdk",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Edit"
-    }]
-  })) : null, mobileView === 'form' ? /*#__PURE__*/React.createElement(components.Button, {
-    size: "sm",
-    theme: "primary",
-    onClick: onClickViewScreen
-  }, /*#__PURE__*/React.createElement(reactIntl.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(components.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: core.PropTypes.formField,
-  value: core.PropTypes.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 = contexts.useFieldsManager();
-  var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
-    _ref3$component = _ref3.component,
-    fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
-    settings = _ref3.settings;
-  var FieldComponent = contexts.useFieldComponent(fieldComponent);
-  var FieldsComponent = contexts.useFieldComponent('fields');
-  var SettingsComponent = FieldComponent !== null ? FieldComponent.settingsComponent || FieldsComponent : FieldsComponent;
-  var onSettingsChange = React.useCallback(function (newSettingsValue) {
-    var newValue = _objectSpread(_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(contexts.ComponentsProvider, Object.assign({
-    namespace: contexts.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([core.PropTypes.story, core.PropTypes.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$1 = _ref.uppy,
-    googleApiKey = _ref.googleApiKey,
-    googleMapsLibraries = _ref.googleMapsLibraries,
-    screenNamespaces = _ref.screenNamespaces,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useIntl = reactIntl.useIntl(),
-    locale = _useIntl.locale;
-  var _useMemoryRouter = useMemoryRouter(),
-    memoryLocationHook = _useMemoryRouter.hook,
-    memorySearchHook = _useMemoryRouter.searchHook;
-  var routerProps = React.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(uppy.UppyProvider, uppy$1, /*#__PURE__*/React.createElement(contexts.StoryProvider, {
-    story: value
-  }, /*#__PURE__*/React.createElement(screens.ScreensProvider, {
-    filterNamespaces: true,
-    namespaces: screenNamespaces
-  }, /*#__PURE__*/React.createElement(contexts.GoogleKeysProvider, {
-    apiKey: googleApiKey
-  }, /*#__PURE__*/React.createElement(contexts.GoogleMapsClientProvider, {
-    locale: locale,
-    libraries: googleMapsLibraries
-  }, /*#__PURE__*/React.createElement(contexts.FontsProvider, null, /*#__PURE__*/React.createElement(fields.FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider$1, null, /*#__PURE__*/React.createElement(contexts.EditorProvider, null, /*#__PURE__*/React.createElement(contexts.VisitorProvider, {
-    visitor: "editor"
-  }, /*#__PURE__*/React.createElement(contexts.ComponentsContext.Consumer, null, function (manager) {
-    var formComponents = manager.getComponents(contexts.FORMS_NAMESPACE);
-    var formRegEx = formComponents !== null ? Object.keys(formComponents).map(function (name) {
-      return utils.slug(name);
-    }).join('|') : null;
-    return /*#__PURE__*/React.createElement(contexts.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;
-
-exports.Editor = Editor$1;
-exports.ScreenTypes = ScreenTypesMenu;
-exports.Screens = ScreensMenu$1;
-exports.createScreen = createScreen$1;
-exports.default = EditorContainer$1;