@micromag/editor 0.3.480 → 0.3.482

package/lib/index.js

@@ -14,68 +14,599 @@ 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 reactRouter = require('react-router');
+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 uuid = require('uuid');
-var isString = require('lodash/isString');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-require('lodash/isArray');
-require('lodash/get');
-require('lodash/set');
 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 _toArray = require('@babel/runtime/helpers/toArray');
 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 _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
 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 reactRouterDom = require('react-router-dom');
 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);
+
+// React.useInsertionEffect is not available in React <18
+var useEffect = React__namespace.useEffect,
+  useLayoutEffect = React__namespace.useLayoutEffect,
+  useRef = React__namespace.useRef,
+  useBuiltinInsertionEffect = React__namespace.useInsertionEffect;
+
+// 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", "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
+};
+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 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;
+
+  // 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(_ref4, params) {
+  var children = _ref4.children,
+    component = _ref4.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(_ref5) {
+  var path = _ref5.path,
+    nest = _ref5.nest,
+    match = _ref5.match,
+    renderProps = _objectWithoutProperties(_ref5, _excluded2$1);
+  var router = useRouter();
+  var _useLocationFromRoute = useLocationFromRouter(router),
+    _useLocationFromRoute2 = _slicedToArray(_useLocationFromRoute, 1),
+    location = _useLocationFromRoute2[0];
+  var _ref6 = // `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),
+    _ref7 = _slicedToArray(_ref6, 3),
+    matches = _ref7[0],
+    params = _ref7[1],
+    base = _ref7[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),
+    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;
+    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 && _onClick(event); // TODO: is it safe to use _onClick?.(event)
+    if (!event.defaultPrevented) {
+      event.preventDefault();
+      navigate(_href, props);
+    }
+  });
+
+  // handle nested routers and absolute paths
+  var href = _href[0] === "~" ? _href.slice(1) : router.base + _href;
+  return asChild && React.isValidElement(children) ? React.cloneElement(children, {
+    href: href,
+    onClick: onClick
+  }) : React.createElement("a", _objectSpread(_objectSpread({}, restProps), {}, {
+    href: href,
+    onClick: onClick,
+    children: children,
+    ref: ref
+  }));
+});
+var flattenChildren = function flattenChildren(children) {
+  var _ref8;
+  return Array.isArray(children) ? (_ref8 = []).concat.apply(_ref8, _toConsumableArray(children.map(function (c) {
+    return c && c.type === React.Fragment ? flattenChildren(c.props.children) : flattenChildren(c);
+  }))) : [children];
+};
+var Switch = function Switch(_ref9) {
+  var children = _ref9.children,
+    location = _ref9.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 (path, loose) {
+    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 path = React.useMemo(function () {
-    return screenOnly ? [routes.screen, '*'] : [routes['screen.field.form'], routes['screen.field'], routes.screen, '*'];
-  }, [routes, screenOnly]);
-  var _useRouteMatch = reactRouter.useRouteMatch({
-      path: path
-    }),
-    url = _useRouteMatch.url,
-    _useRouteMatch$params = _useRouteMatch.params,
-    _useRouteMatch$params2 = _useRouteMatch$params.screen,
-    screen = _useRouteMatch$params2 === void 0 ? null : _useRouteMatch$params2,
-    _useRouteMatch$params3 = _useRouteMatch$params.field,
-    field = _useRouteMatch$params3 === void 0 ? null : _useRouteMatch$params3,
-    _useRouteMatch$params4 = _useRouteMatch$params.form,
-    form = _useRouteMatch$params4 === void 0 ? null : _useRouteMatch$params4;
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 1),
+    location = _useLocation2[0];
+  var matcher = useRouteMatcher();
+  var _useMemo = React.useMemo(function () {
+      var paths = screenOnly ? [routes.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: url,
+      url: location,
       screen: screen
     } : {
-      url: url,
+      url: location,
       screen: screen,
       field: field,
       form: form
     };
-  }, [screenOnly, url, screen, field, form]);
+  }, [screenOnly, location, screen, field, form]);
   return routeParams;
 };
 
@@ -190,6 +721,7 @@ var createScreen = function createScreen(definition) {
     id: uuid.v1()
   });
 };
+var createScreen$1 = createScreen;
 
 var _excluded$c = ["components"];
 var deleteScreen = function deleteScreen(story, screenId) {
@@ -279,6 +811,7 @@ var SettingsButton = function SettingsButton(_ref) {
 };
 SettingsButton.propTypes = propTypes$o;
 SettingsButton.defaultProps = defaultProps$o;
+var SettingsButton$1 = SettingsButton;
 
 var _excluded$8 = ["name", "form"];
 var propTypes$n = {
@@ -339,6 +872,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
 };
 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"};
 
@@ -393,6 +927,7 @@ var ScreenForm = function ScreenForm(_ref) {
 };
 ScreenForm.propTypes = propTypes$m;
 ScreenForm.defaultProps = defaultProps$m;
+var ScreenForm$1 = ScreenForm;
 
 var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
 
@@ -422,7 +957,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
     screens = _ref2$components === void 0 ? [] : _ref2$components;
-  var history = reactRouter.useHistory();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
   var screensManager = contexts.useScreensManager();
   var fieldsManager = contexts.useFieldsManager();
   var fieldsComponentManager = contexts.useFieldsComponentsManager();
@@ -607,8 +1144,8 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }, [intl, route, screenId, field, form, url, screenFields, screenStates, screenTitle, fieldsManager]);
   var itemsLength = items.length;
   var onClickBack = React.useCallback(function () {
-    history.push(items[itemsLength - 2].url);
-  }, [items]);
+    setLocation(items[itemsLength - 2].url);
+  }, [items, setLocation]);
   var withBack = itemsLength > 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(components.BackButton, {
     onClick: onClickBack,
@@ -623,6 +1160,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
 };
 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"};
 
@@ -683,6 +1221,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
 };
 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"};
 
@@ -704,7 +1243,9 @@ var EditForm = function EditForm(_ref) {
     className = _ref.className,
     onChange = _ref.onChange;
   // Match routes
-  var history = reactRouter.useHistory();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
   var routePush = contexts.useRoutePush();
   var _useRouteParams = useRouteParams(),
     url = _useRouteParams.url,
@@ -789,12 +1330,12 @@ var EditForm = function EditForm(_ref) {
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
     var pastUrl = fieldForms[fieldKey] || null;
     if (pastUrl !== null) {
-      history.push(pastUrl);
+      setLocation(pastUrl);
     }
     setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
       return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
     }, {}));
-  }, [history, screenId, fieldForms, setFieldForms]);
+  }, [setLocation, screenId, fieldForms, setFieldForms]);
   var triggerOnChange = React.useCallback(function (newValue) {
     if (onChange !== null) {
       onChange(newValue);
@@ -874,7 +1415,7 @@ var EditForm = function EditForm(_ref) {
     noWrap: true,
     withoutCollapse: true,
     className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
-  }, /*#__PURE__*/React.createElement(Breadcrumb, {
+  }, /*#__PURE__*/React.createElement(Breadcrumb$1, {
     story: value,
     url: url,
     screenId: screenId,
@@ -883,7 +1424,7 @@ var EditForm = function EditForm(_ref) {
     className: "me-auto"
   }), fieldParams === null ? /*#__PURE__*/React.createElement("div", {
     className: "dropdown"
-  }, /*#__PURE__*/React.createElement(SettingsButton, {
+  }, /*#__PURE__*/React.createElement(SettingsButton$1, {
     onClick: onSettingsClick,
     dots: true,
     className: "py-0",
@@ -909,7 +1450,7 @@ var EditForm = function EditForm(_ref) {
     className: classNames(['w-100', styles$f.panel])
   }, /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
+  }, /*#__PURE__*/React.createElement(FieldWithContexts$1, {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
@@ -927,7 +1468,7 @@ var EditForm = function EditForm(_ref) {
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React.createElement(ScreenForm, {
+  }, /*#__PURE__*/React.createElement(ScreenForm$1, {
     value: screen,
     className: styles$f.form,
     onChange: onScreenFormChange,
@@ -942,13 +1483,14 @@ var EditForm = function EditForm(_ref) {
       "value": "Select a screen..."
     }],
     decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
+  }))), 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 || {},
@@ -1013,6 +1555,7 @@ var DesktopIcon = function DesktopIcon(_ref) {
 };
 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 = {
@@ -1044,11 +1587,12 @@ var MobileIcon = function MobileIcon(_ref) {
 };
 MobileIcon.propTypes = propTypes$h;
 MobileIcon.defaultProps = defaultProps$h;
+var MobileIcon$1 = MobileIcon;
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Desktop: DesktopIcon,
-    Mobile: MobileIcon
+  __proto__: null,
+  Desktop: DesktopIcon$1,
+  Mobile: MobileIcon$1
 });
 
 var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
@@ -1068,7 +1612,7 @@ var DeviceButton = function DeviceButton(_ref) {
     className = _ref.className,
     iconComponents = _ref.iconComponents,
     props = _objectWithoutProperties(_ref, _excluded$6);
-  var DeviceIcon = utils.getComponentFromName(device, iconComponents, DesktopIcon);
+  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, {
@@ -1077,6 +1621,7 @@ var DeviceButton = function DeviceButton(_ref) {
 };
 DeviceButton.propTypes = propTypes$g;
 DeviceButton.defaultProps = defaultProps$g;
+var DeviceButton$1 = DeviceButton;
 
 var _excluded$5 = ["id"];
 var propTypes$f = {
@@ -1100,7 +1645,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
         itemProps = _objectWithoutProperties(item, _excluded$5);
-      return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
+      return /*#__PURE__*/React.createElement(DeviceButton$1, Object.assign({
         device: id
       }, props, itemProps, {
         className: styles$e.button,
@@ -1113,6 +1658,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
 };
 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"};
 
@@ -1273,6 +1819,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
 };
 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"};
 
@@ -1395,7 +1942,7 @@ function ScreenStates(_ref) {
     }, repeatableItems.map(function (item, index) {
       return /*#__PURE__*/React.createElement("li", {
         className: "p-1"
-      }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
+      }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
         index: index,
         withIndexIndicator: true,
         withDeleteButtonOnRepeatables: true,
@@ -1422,7 +1969,7 @@ function ScreenStates(_ref) {
         icon: faPlus.faPlus
       }),
       onClick: onClickAdd
-    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
+    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
       screen: screen,
       screenState: id,
       className: styles$a.button,
@@ -1603,7 +2150,7 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutMenu: true
   })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.deviceMenu
-  }, /*#__PURE__*/React.createElement(DevicesMenu, {
+  }, /*#__PURE__*/React.createElement(DevicesMenu$1, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
         active: it.id === deviceId
@@ -1615,6 +2162,7 @@ var EditorPreview = function EditorPreview(_ref) {
 };
 EditorPreview.propTypes = propTypes$b;
 EditorPreview.defaultProps = defaultProps$b;
+var EditorPreview$1 = EditorPreview;
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -2071,6 +2619,7 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 });
 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"};
 
@@ -2174,7 +2723,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
   }, [onPointerUp]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$7.container])
-  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions$1, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -2196,6 +2745,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
 };
 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"};
 
@@ -2575,7 +3125,7 @@ var SortableTree = function SortableTree(_ref2) {
     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, {
+    }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
       key: id,
       id: id,
       depth: currentDepth,
@@ -2599,7 +3149,7 @@ var SortableTree = function SortableTree(_ref2) {
   }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.item,
     key: activeId
-  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
     id: activeId,
     depth: activeItem.depth,
     clone: true,
@@ -2616,6 +3166,7 @@ var SortableTree = function SortableTree(_ref2) {
 };
 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"};
 
@@ -2686,7 +3237,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       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, {
+    }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
       index: index,
       screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
         type: type
@@ -2737,9 +3288,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
   }, [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, {
+  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree$1, {
     items: sortableItems,
-    component: ScreenWithPreview,
+    component: ScreenWithPreview$1,
     onClickItem: onClickItem,
     onChange: onOrderChange
   }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(reactSortablejs.ReactSortable, {
@@ -2756,6 +3307,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 };
 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"};
 
@@ -2848,7 +3400,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
       className: styles$4.row
     }, /*#__PURE__*/React.createElement(components.Label, null, name), /*#__PURE__*/React.createElement("div", {
       className: styles$4.layouts
-    }, /*#__PURE__*/React.createElement(ScreensMenu, {
+    }, /*#__PURE__*/React.createElement(ScreensMenu$1, {
       items: items,
       withPlaceholder: true,
       withName: true,
@@ -2865,6 +3417,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
 };
 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"};
 
@@ -2895,7 +3448,7 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
     }),
     className: classNames([styles$3.container, _defineProperty({}, className, className)]),
     onClickClose: onRequestClose
-  }, /*#__PURE__*/React.createElement(ScreenTypes, {
+  }, /*#__PURE__*/React.createElement(ScreenTypesMenu, {
     selectedTypes: selectedTypes,
     className: styles$3.menu,
     onClickItem: onClickScreenType
@@ -2903,6 +3456,7 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
 };
 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"};
 
@@ -2974,7 +3528,7 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen);
+    var newScreen = createScreen$1(definition, themeScreen);
     var foundIndex = screens.findIndex(function (_ref6) {
       var id = _ref6.id;
       return id === currentScreenId;
@@ -3090,43 +3644,71 @@ var EditorScreens = function EditorScreens(_ref) {
     })
   })), /*#__PURE__*/React.createElement("div", {
     className: "flex-grow-1 d-flex w-100 p-2"
-  }, /*#__PURE__*/React.createElement(reactRouter.Route, {
-    path: [routes.screen, routes.home],
-    render: function render(_ref18) {
-      var _ref18$match$params$s = _ref18.match.params.screen,
-        screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
-      return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
-        items: screens.map(function (it) {
-          return {
-            id: it.id,
-            screen: it,
-            href: url('screen', {
-              screen: it.id
-            }),
-            active: it.id === screenId
-          };
+  }, /*#__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
         }),
-        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, {
+        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;
@@ -3137,6 +3719,7 @@ var EditorScreens = function EditorScreens(_ref) {
 };
 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","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
@@ -3312,7 +3895,7 @@ var Editor = function Editor(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
-  }, /*#__PURE__*/React.createElement(EditorScreens, {
+  }, /*#__PURE__*/React.createElement(Screens, {
     value: story,
     isTheme: isTheme,
     isCreateOpened: isCreateOpened,
@@ -3324,7 +3907,7 @@ var Editor = function Editor(_ref) {
     isTree: true
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
-  }, /*#__PURE__*/React.createElement(EditorPreview, {
+  }, /*#__PURE__*/React.createElement(EditorPreview$1, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
@@ -3333,7 +3916,7 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')])
-  }, /*#__PURE__*/React.createElement(EditForm, {
+  }, /*#__PURE__*/React.createElement(EditorForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
@@ -3343,6 +3926,7 @@ var Editor = function Editor(_ref) {
 };
 Editor.propTypes = propTypes$3;
 Editor.defaultProps = defaultProps$3;
+var Editor$1 = Editor;
 
 // eslint-disable-next-line import/prefer-default-export
 var routes = PropTypes.shape({
@@ -3415,12 +3999,13 @@ var SettingsForm = function SettingsForm(_ref) {
 };
 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
+  __proto__: null,
+  Settings: SettingsForm$1
 });
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -3438,17 +4023,21 @@ var FormsProvider = function FormsProvider(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,
@@ -3481,15 +4070,19 @@ var EditorContainer = function EditorContainer(_ref) {
     googleMapsLibraries = _ref.googleMapsLibraries,
     screenNamespaces = _ref.screenNamespaces,
     props = _objectWithoutProperties(_ref, _excluded);
-  var Router = memoryRouter ? reactRouter.MemoryRouter : reactRouterDom.BrowserRouter;
   var _useIntl = reactIntl.useIntl(),
     locale = _useIntl.locale;
 
   // const { metadata } = value || {};
   // const { language:finalLocale = locale } = metadata || {};
-
+  var _useMemoryRouter = useMemoryRouter(),
+    memoryLocationHook = _useMemoryRouter.hook,
+    memorySearchHook = _useMemoryRouter.searchHook;
   return /*#__PURE__*/React.createElement(Router, {
-    basename: !memoryRouter ? basePath : null
+    hook: memoryRouter ? memoryLocationHook : null,
+    searchHook: memoryRouter ? memorySearchHook : null,
+    parser: pathToRegexpParser,
+    base: !memoryRouter ? basePath : null
   }, /*#__PURE__*/React.createElement(contexts.UppyProvider, uppy, /*#__PURE__*/React.createElement(contexts.StoryProvider, {
     story: value
   }, /*#__PURE__*/React.createElement(screens.ScreensProvider, {
@@ -3500,7 +4093,7 @@ var EditorContainer = function EditorContainer(_ref) {
   }, /*#__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, null, /*#__PURE__*/React.createElement(contexts.EditorProvider, null, /*#__PURE__*/React.createElement(contexts.VisitorProvider, {
+  }, /*#__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);
@@ -3511,16 +4104,17 @@ var EditorContainer = function EditorContainer(_ref) {
       routes: _objectSpread(_objectSpread({}, routes), {}, {
         'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
       })
-    }, /*#__PURE__*/React.createElement(Editor, Object.assign({
+    }, /*#__PURE__*/React.createElement(Editor$1, Object.assign({
       value: value
     }, props)));
   }))))))))))));
 };
 EditorContainer.propTypes = propTypes;
 EditorContainer.defaultProps = defaultProps;
+var EditorContainer$1 = EditorContainer;
 
-exports.Editor = Editor;
-exports.ScreenTypes = ScreenTypes;
-exports.Screens = ScreensMenu;
-exports.createScreen = createScreen;
-exports.default = EditorContainer;
+exports.Editor = Editor$1;
+exports.ScreenTypes = ScreenTypesMenu;
+exports.Screens = ScreensMenu$1;
+exports.createScreen = createScreen$1;
+exports.default = EditorContainer$1;