@micromag/viewer 0.3.480 → 0.3.482

package/lib/index.js

@@ -4,17 +4,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var routes$1 = require('@folklore/routes');
-var PropTypes = require('prop-types');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var wouter = require('wouter');
+var PropTypes = require('prop-types');
+var jsxRuntime = require('react/jsx-runtime');
+var pathToRegexp = require('path-to-regexp');
+var mitt = require('mitt');
+var _createForOfIteratorHelper = require('@babel/runtime/helpers/createForOfIteratorHelper');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _toArray = require('@babel/runtime/helpers/toArray');
+var regexparam = require('regexparam');
+var index_js = require('use-sync-external-store/shim/index.js');
 var core = require('@micromag/core');
 var contexts = require('@micromag/core/contexts');
 var intl = require('@micromag/intl');
 var screens = require('@micromag/screens');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var web = require('@react-spring/web');
 var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
@@ -24,13 +29,545 @@ var hooks = require('@micromag/core/hooks');
 var utils = require('@micromag/core/utils');
 var all = require('@micromag/elements/all');
 var reactIntl = require('react-intl');
-var reactRouterDom = require('react-router-dom');
 var core$1 = require('@react-spring/core');
 var Scroll = require('@micromag/element-scroll');
 var ShareOptions = require('@micromag/element-share-options');
 var react = require('@use-gesture/react');
 var WebView = require('@micromag/element-webview');
 
+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$a = ["children"],
+  _excluded2 = ["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$a);
+  // 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);
+  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
+  });
+};
+var Link = 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;
+};
+
+/* eslint-disable react/jsx-props-no-spreading */
+var RoutesContext = /*#__PURE__*/React.createContext(null);
+var useRoutesContext = function useRoutesContext() {
+  return React.useContext(RoutesContext);
+};
+var propTypes$o = {
+  children: PropTypes.node.isRequired,
+  routes: PropTypes.objectOf(PropTypes.string).isRequired,
+  basePath: PropTypes.string
+};
+var defaultProps$o = {
+  basePath: null
+};
+function RoutesProvider(_ref) {
+  var routes = _ref.routes,
+    basePath = _ref.basePath,
+    children = _ref.children;
+  var value = React.useMemo(function () {
+    return {
+      routes: routes,
+      basePath: basePath
+    };
+  }, [routes, basePath]);
+  return /*#__PURE__*/jsxRuntime.jsx(RoutesContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+RoutesProvider.propTypes = propTypes$o;
+RoutesProvider.defaultProps = defaultProps$o;
+var compilers = {};
+function generatePath(path, data) {
+  var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (typeof compilers[path] === 'undefined') {
+    compilers[path] = pathToRegexp.compile(path, opts);
+  }
+  var compiler = compilers[path];
+  return compiler(data);
+}
+var useUrlGeneratorPathToRepexp = function useUrlGeneratorPathToRepexp() {
+  var _ref2 = useRoutesContext() || {},
+    _ref2$routes = _ref2.routes,
+    routes = _ref2$routes === void 0 ? null : _ref2$routes,
+    _ref2$basePath = _ref2.basePath,
+    basePath = _ref2$basePath === void 0 ? null : _ref2$basePath;
+  var urlGenerator = React.useCallback(function (key, data, opts) {
+    var path = routes !== null ? routes[key] || null : null;
+    if (path === null) {
+      return null;
+    }
+    var url = generatePath(path, data, opts);
+    return basePath !== null ? "".concat(basePath.replace(/\/$/, ''), "/").concat(url.replace(/^\//, '')) : url;
+  }, [routes, basePath]);
+  return urlGenerator;
+};
+var useUrlGeneratorPathToRegexp = useUrlGeneratorPathToRepexp;
+var useRoutes = function useRoutes() {
+  var _useRoutesContext = useRoutesContext(),
+    routes = _useRoutesContext.routes;
+  return routes;
+};
+var useRoutes$1 = useRoutes;
+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
+  };
+}
+
 // eslint-disable-next-line import/prefer-default-export
 var routes = PropTypes.shape({
   home: PropTypes.string.isRequired,
@@ -317,8 +854,8 @@ var Button = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(reactRouterDom.Link, Object.assign({}, props, {
-      to: href,
+    }), content) : /*#__PURE__*/React.createElement(Link, Object.assign({}, props, {
+      href: href,
       className: linkClassNames,
       style: buttonStyles,
       onClick: onClick,
@@ -338,6 +875,7 @@ var Button = function Button(_ref) {
 };
 Button.propTypes = propTypes$n;
 Button.defaultProps = defaultProps$n;
+var Button$1 = Button;
 
 var styles$f = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
 
@@ -354,7 +892,7 @@ var IconButton = function IconButton(_ref) {
   var iconClassName = _ref.iconClassName,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$8);
-  return /*#__PURE__*/React.createElement(Button, Object.assign({
+  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     labelClassName: styles$f.label,
     iconClassName: classNames([styles$f.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
@@ -362,6 +900,7 @@ var IconButton = function IconButton(_ref) {
 };
 IconButton.propTypes = propTypes$m;
 IconButton.defaultProps = defaultProps$m;
+var IconButton$1 = IconButton;
 
 var _excluded$7 = ["single", "className"];
 var propTypes$l = {
@@ -377,7 +916,7 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$7);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "dIvwcD",
@@ -420,6 +959,7 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
 };
 CloseMenuButton.propTypes = propTypes$l;
 CloseMenuButton.defaultProps = defaultProps$l;
+var CloseMenuButton$1 = CloseMenuButton;
 
 var _excluded$6 = ["className", "iconClassName"];
 var propTypes$k = {
@@ -435,7 +975,7 @@ var MenuButton = function MenuButton(_ref) {
     _ref.iconClassName;
     var props = _objectWithoutProperties(_ref, _excluded$6);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "F/gl4b",
@@ -472,6 +1012,7 @@ var MenuButton = function MenuButton(_ref) {
 };
 MenuButton.propTypes = propTypes$k;
 MenuButton.defaultProps = defaultProps$k;
+var MenuButton$1 = MenuButton;
 
 var _excluded$5 = ["className"];
 var propTypes$j = {
@@ -484,7 +1025,7 @@ var ShareButton = function ShareButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$5);
   var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
+  return /*#__PURE__*/React.createElement(IconButton$1, Object.assign({
     className: classNames([_defineProperty({}, className, className !== null)]),
     label: intl.formatMessage({
       id: "7tw6U2",
@@ -515,6 +1056,7 @@ var ShareButton = function ShareButton(_ref) {
 };
 ShareButton.propTypes = propTypes$j;
 ShareButton.defaultProps = defaultProps$j;
+var ShareButton$1 = ShareButton;
 
 var styles$e = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
@@ -560,6 +1102,7 @@ var ToggleButton = function ToggleButton(_ref) {
 };
 ToggleButton.propTypes = propTypes$i;
 ToggleButton.defaultProps = defaultProps$i;
+var ToggleButton$1 = ToggleButton;
 
 var styles$d = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
@@ -618,6 +1161,7 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
 };
 ViewerMenuContainer.propTypes = propTypes$h;
 ViewerMenuContainer.defaultProps = defaultProps$h;
+var MenuContainer = ViewerMenuContainer;
 
 var styles$c = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot","subDot":"micromag-viewer-menus-menu-dot-subDot","dots":"micromag-viewer-menus-menu-dot-dots","outlineBounce":"micromag-viewer-menus-menu-dot-outlineBounce"};
 
@@ -709,6 +1253,7 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
 };
 ViewerMenuDot.propTypes = propTypes$g;
 ViewerMenuDot.defaultProps = defaultProps$g;
+var MenuDot = ViewerMenuDot;
 
 var styles$b = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","focus-visible":"micromag-viewer-menus-menu-dots-focus-visible","items":"micromag-viewer-menus-menu-dots-items","item":"micromag-viewer-menus-menu-dots-item","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
@@ -801,7 +1346,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       count = _ref6$count === void 0 ? 1 : _ref6$count,
       _ref6$subIndex = _ref6.subIndex,
       subIndex = _ref6$subIndex === void 0 ? 0 : _ref6$subIndex;
-    return /*#__PURE__*/React.createElement(ViewerMenuDot, {
+    return /*#__PURE__*/React.createElement(MenuDot, {
       key: "item-".concat(index + 1),
       current: current,
       active: index <= currentIndex,
@@ -846,6 +1391,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
 };
 ViewerMenuDots.propTypes = propTypes$f;
 ViewerMenuDots.defaultProps = defaultProps$f;
+var MenuDots = ViewerMenuDots;
 
 var propTypes$e = {
   className: PropTypes.string
@@ -870,6 +1416,7 @@ var StackIcon = function StackIcon(_ref) {
 };
 StackIcon.propTypes = propTypes$e;
 StackIcon.defaultProps = defaultProps$e;
+var StackIcon$1 = StackIcon;
 
 var styles$a = {"button":"micromag-viewer-menus-menu-screen-button","container":"micromag-viewer-menus-menu-screen-container","focus-visible":"micromag-viewer-menus-menu-screen-focus-visible","isCurrent":"micromag-viewer-menus-menu-screen-isCurrent","pulse":"micromag-viewer-menus-menu-screen-pulse","inner":"micromag-viewer-menus-menu-screen-inner","subScreenBadge":"micromag-viewer-menus-menu-screen-subScreenBadge","subScreenCount":"micromag-viewer-menus-menu-screen-subScreenCount","subScreenIcon":"micromag-viewer-menus-menu-screen-subScreenIcon"};
 
@@ -949,7 +1496,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
     className: styles$a.subScreenBadge
   }, /*#__PURE__*/React.createElement("span", {
     className: styles$a.subScreenCount
-  }, count), /*#__PURE__*/React.createElement(StackIcon, {
+  }, count), /*#__PURE__*/React.createElement(StackIcon$1, {
     className: styles$a.subScreenIcon
   })) : null, screenWidth > 0 && screenHeight > 0 ? /*#__PURE__*/React.createElement(components.ScreenPreview, {
     className: styles$a.screen,
@@ -963,6 +1510,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 };
 ViewerMenuScreen.propTypes = propTypes$d;
 ViewerMenuScreen.defaultProps = defaultProps$d;
+var MenuScreen = ViewerMenuScreen;
 
 var styles$9 = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","disabled":"micromag-viewer-menus-menu-preview-disabled","screenButton":"micromag-viewer-menus-menu-preview-screenButton","content":"micromag-viewer-menus-menu-preview-content","buttons":"micromag-viewer-menus-menu-preview-buttons","organisation":"micromag-viewer-menus-menu-preview-organisation","icon":"micromag-viewer-menus-menu-preview-icon","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","badge":"micromag-viewer-menus-menu-preview-badge","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","intro":"micromag-viewer-menus-menu-preview-intro"};
 
@@ -1128,7 +1676,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       style: {
         paddingBottom: "".concat(screenHeight / screenWidth * 100, "%")
       }
-    }, screenMounted ? /*#__PURE__*/React.createElement(ViewerMenuScreen, {
+    }, screenMounted ? /*#__PURE__*/React.createElement(MenuScreen, {
       className: styles$9.screen,
       item: item,
       index: index,
@@ -1140,6 +1688,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
 };
 ViewerMenuPreview.propTypes = propTypes$c;
 ViewerMenuPreview.defaultProps = defaultProps$c;
+var MenuPreview = ViewerMenuPreview;
 
 var styles$8 = {"container":"micromag-viewer-partials-micromag-preview-container","cover":"micromag-viewer-partials-micromag-preview-cover","info":"micromag-viewer-partials-micromag-preview-info","url":"micromag-viewer-partials-micromag-preview-url","title":"micromag-viewer-partials-micromag-preview-title"};
 
@@ -1182,6 +1731,7 @@ var MicromagPreview = function MicromagPreview(_ref) {
 };
 MicromagPreview.propTypes = propTypes$b;
 MicromagPreview.defaultProps = defaultProps$b;
+var MicromagPreview$1 = MicromagPreview;
 
 var styles$7 = {"scroll":"micromag-viewer-menus-menu-share-scroll","container":"micromag-viewer-menus-menu-share-container","disabled":"micromag-viewer-menus-menu-share-disabled","button":"micromag-viewer-menus-menu-share-button","content":"micromag-viewer-menus-menu-share-content","inner":"micromag-viewer-menus-menu-share-inner","organisation":"micromag-viewer-menus-menu-share-organisation","icon":"micromag-viewer-menus-menu-share-icon","header":"micromag-viewer-menus-menu-share-header","mode":"micromag-viewer-menus-menu-share-mode","bump":"micromag-viewer-menus-menu-share-bump","options":"micromag-viewer-menus-menu-share-options"};
 
@@ -1287,7 +1837,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$7.header
-  }, /*#__PURE__*/React.createElement(MicromagPreview, {
+  }, /*#__PURE__*/React.createElement(MicromagPreview$1, {
     className: styles$7.preview,
     screen: shareCurrentScreen ? currentScreen : coverScreen,
     title: title,
@@ -1321,6 +1871,7 @@ var ViewerMenuShare = function ViewerMenuShare(_ref) {
 };
 ViewerMenuShare.propTypes = propTypes$a;
 ViewerMenuShare.defaultProps = defaultProps$a;
+var MenuShare = ViewerMenuShare;
 
 var styles$6 = {"container":"micromag-viewer-container","screenContainer":"micromag-viewer-screenContainer","screensFrame":"micromag-viewer-screensFrame","menuShare":"micromag-viewer-menuShare","menuPreview":"micromag-viewer-menuPreview","menuContainer":"micromag-viewer-menuContainer","focus-visible":"micromag-viewer-focus-visible","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","menuNavContainer":"micromag-viewer-menuNavContainer","menuTopContainer":"micromag-viewer-menuTopContainer","dots":"micromag-viewer-dots","disableMenu":"micromag-viewer-disableMenu","content":"micromag-viewer-content","withoutGestures":"micromag-viewer-withoutGestures","fadeMenu":"micromag-viewer-fadeMenu","withShadow":"micromag-viewer-withShadow","isOpened":"micromag-viewer-isOpened","menuItem":"micromag-viewer-menuItem","menuButton":"micromag-viewer-menuButton","slidingButton":"micromag-viewer-slidingButton","screensMenuButtonToggled":"micromag-viewer-screensMenuButtonToggled","navButton":"micromag-viewer-navButton","previous":"micromag-viewer-previous","next":"micromag-viewer-next","screen":"micromag-viewer-screen","current":"micromag-viewer-current","playbackControls":"micromag-viewer-playbackControls","arrowHint":"micromag-viewer-arrowHint","webView":"micromag-viewer-webView","shareIncentiveContainer":"micromag-viewer-shareIncentiveContainer","shareIncentive":"micromag-viewer-shareIncentive","shareIncentiveVisible":"micromag-viewer-shareIncentiveVisible"};
 
@@ -1653,16 +2204,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     ref: navContainerRef
   }, !withoutShareMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+  }, bindShareDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(ShareButton, {
+    button: /*#__PURE__*/React.createElement(ShareButton$1, {
       className: styles$6.menuButton,
       onClick: onOpenShare,
       theme: menuTheme,
       iconPosition: "left",
       focusable: !shareOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseShare,
       theme: menuTheme,
@@ -1673,16 +2224,16 @@ var ViewerMenu = function ViewerMenu(_ref) {
     progressSpring: shareOpenedProgress
   })) : null, !withoutScreensMenu ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.menuItem
-  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton, {
+  }, bindMenuDrag()), /*#__PURE__*/React.createElement(ToggleButton$1, {
     className: styles$6.slidingButton,
-    button: /*#__PURE__*/React.createElement(MenuButton, {
+    button: /*#__PURE__*/React.createElement(MenuButton$1, {
       className: styles$6.menuButton,
       iconClassName: styles$6.menuButtonIcon,
       onClick: onOpenMenu,
       theme: menuTheme,
       focusable: !menuOpened
     }),
-    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton, {
+    toggledButton: /*#__PURE__*/React.createElement(CloseMenuButton$1, {
       className: styles$6.menuButton,
       onClick: onCloseMenu,
       theme: menuTheme,
@@ -1691,7 +2242,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     }),
     progressSpring: menuOpenedProgress,
     toggledButtonClassName: styles$6.screensMenuButtonToggled
-  })) : null), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
+  })) : null), /*#__PURE__*/React.createElement(MenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     items: items,
     onClickDot: onClickScreen,
@@ -1703,11 +2254,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     withoutShareMenu: withoutShareMenu,
     onClose: onClickCloseViewer,
     className: styles$6.dots
-  }))), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+  }))), /*#__PURE__*/React.createElement(MenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: shareOpenedProgress,
     theme: viewerTheme
-  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(ViewerMenuShare, {
+  }, draggingShare || shareOpened ? /*#__PURE__*/React.createElement(MenuShare, {
     viewerTheme: viewerTheme,
     className: styles$6.menuShare,
     title: title,
@@ -1720,11 +2271,11 @@ var ViewerMenu = function ViewerMenu(_ref) {
     shareUrl: shareUrl,
     onShare: onShare,
     onClose: onCloseShare
-  }) : null), /*#__PURE__*/React.createElement(ViewerMenuContainer, {
+  }) : null), /*#__PURE__*/React.createElement(MenuContainer, {
     className: styles$6.menuContainer,
     progressSpring: menuOpenedProgress,
     theme: viewerTheme
-  }, menuMounted ? /*#__PURE__*/React.createElement(ViewerMenuPreview, {
+  }, menuMounted ? /*#__PURE__*/React.createElement(MenuPreview, {
     viewerTheme: viewerTheme,
     header: previewHeader,
     footer: previewFooter,
@@ -1848,7 +2399,7 @@ var NavigationButton = function NavigationButton(_ref) {
   var direction = _ref.direction,
     _onClick = _ref.onClick,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(IconButton, {
+  return /*#__PURE__*/React.createElement(IconButton$1, {
     className: classNames([styles$4.container, styles$4[direction], _defineProperty({}, className, className !== null)]),
     onClick: function onClick(e) {
       e.stopPropagation();
@@ -1884,6 +2435,7 @@ var NavigationButton = function NavigationButton(_ref) {
 };
 NavigationButton.propTypes = propTypes$7;
 NavigationButton.defaultProps = defaultProps$7;
+var NavigationButton$1 = NavigationButton;
 
 var styles$3 = {"container":"micromag-viewer-partials-arrow-hint-container","inner":"micromag-viewer-partials-arrow-hint-inner","shadowFade":"micromag-viewer-partials-arrow-hint-shadowFade","arrow":"micromag-viewer-partials-arrow-hint-arrow","panX":"micromag-viewer-partials-arrow-hint-panX"};
 
@@ -1905,6 +2457,7 @@ var ArrowHint = function ArrowHint(_ref) {
 };
 ArrowHint.propTypes = propTypes$6;
 ArrowHint.defaultProps = defaultProps$6;
+var ArrowHint$1 = ArrowHint;
 
 var styles$2 = {"track":"micromag-viewer-partials-seek-bar-track","progress":"micromag-viewer-partials-seek-bar-progress","inner":"micromag-viewer-partials-seek-bar-inner","progressBarContainer":"micromag-viewer-partials-seek-bar-progressBarContainer","progressBar":"micromag-viewer-partials-seek-bar-progressBar","playHead":"micromag-viewer-partials-seek-bar-playHead","withSeekHead":"micromag-viewer-partials-seek-bar-withSeekHead","scrubbedTime":"micromag-viewer-partials-seek-bar-scrubbedTime","showTimestamp":"micromag-viewer-partials-seek-bar-showTimestamp"};
 
@@ -2099,6 +2652,7 @@ var SeekBar = function SeekBar(_ref3) {
 };
 SeekBar.propTypes = propTypes$5;
 SeekBar.defaultProps = defaultProps$5;
+var SeekBar$1 = SeekBar;
 
 var styles$1 = {"suggest":"micromag-viewer-partials-playback-controls-suggest","playPauseButton":"micromag-viewer-partials-playback-controls-playPauseButton","muteButton":"micromag-viewer-partials-playback-controls-muteButton","container":"micromag-viewer-partials-playback-controls-container","icon":"micromag-viewer-partials-playback-controls-icon","offset":"micromag-viewer-partials-playback-controls-offset","spinner":"micromag-viewer-partials-playback-controls-spinner","withPlayPause":"micromag-viewer-partials-playback-controls-withPlayPause","withSuggestPlay":"micromag-viewer-partials-playback-controls-withSuggestPlay","isCollapsed":"micromag-viewer-partials-playback-controls-isCollapsed","loading":"micromag-viewer-partials-playback-controls-loading","hidden":"micromag-viewer-partials-playback-controls-hidden","notPlaying":"micromag-viewer-partials-playback-controls-notPlaying","isMuted":"micromag-viewer-partials-playback-controls-isMuted","withMute":"micromag-viewer-partials-playback-controls-withMute","withSeekBar":"micromag-viewer-partials-playback-controls-withSeekBar","seekBar":"micromag-viewer-partials-playback-controls-seekBar","withSeekBarOnly":"micromag-viewer-partials-playback-controls-withSeekBarOnly"};
 
@@ -2316,7 +2870,7 @@ function PlaybackControls(_ref) {
       }]
     }) : playLabel,
     withoutBootstrapStyles: true
-  }), /*#__PURE__*/React.createElement(SeekBar, {
+  }), /*#__PURE__*/React.createElement(SeekBar$1, {
     className: styles$1.seekBar,
     media: mediaElement,
     playing: playing,
@@ -3076,7 +3630,7 @@ var Viewer = function Viewer(_ref) {
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$6.content
-  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  }, dragContentBind()), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex > 0 && screens.length > 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "previous",
     className: classNames([styles$6.navButton, styles$6.previous]),
     onClick: gotoPreviousScreen
@@ -3111,7 +3665,7 @@ var Viewer = function Viewer(_ref) {
       height: screenHeight,
       scale: screenScale
     }) : null);
-  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton, {
+  })), !withoutNavigationArrow && !withNeighborScreens && !navigationDisabled && screenIndex < screens.length - 1 ? /*#__PURE__*/React.createElement(NavigationButton$1, {
     direction: "next",
     className: classNames([styles$6.navButton, styles$6.next]),
     onClick: gotoNextScreen
@@ -3120,7 +3674,7 @@ var Viewer = function Viewer(_ref) {
     ref: playbackControlsContainerRef
   }, /*#__PURE__*/React.createElement(PlaybackControls, {
     className: styles$6.controls
-  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint, {
+  })) : null, withNavigationHint && !withNeighborScreens && !navigationDisabled && screenIndex === 0 && !hasInteracted ? /*#__PURE__*/React.createElement(ArrowHint$1, {
     className: styles$6.arrowHint
   }) : null) : null, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.shareIncentiveContainer, _defineProperty({}, styles$6.shareIncentiveVisible, hasShareIncentive && shareIncentiveVisible)]),
@@ -3138,6 +3692,7 @@ var Viewer = function Viewer(_ref) {
 };
 Viewer.propTypes = propTypes$2;
 Viewer.defaultProps = defaultProps$2;
+var Viewer$1 = Viewer;
 
 var _excluded$1 = ["story", "pathWithIndex", "children", "onScreenChange"];
 var propTypes$1 = {
@@ -3159,9 +3714,9 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
     _ref.children;
     var onScreenChange = _ref.onScreenChange,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var routes = routes$1.useRoutes();
-  var url = routes$1.useUrlGenerator();
-  var _useLocation = wouter.useLocation(),
+  var routes = useRoutes$1();
+  var url = useUrlGeneratorPathToRegexp();
+  var _useLocation = useLocation(),
     _useLocation2 = _slicedToArray(_useLocation, 2),
     navigate = _useLocation2[1];
   var _ref2 = story || {},
@@ -3179,19 +3734,19 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
       onScreenChange(it);
     }
   }, [navigate, url, pathWithIndex, screens, onScreenChange]);
-  return /*#__PURE__*/React.createElement(wouter.Switch, null, /*#__PURE__*/React.createElement(wouter.Route, {
+  return /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
     path: routes.home
-  }, /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+  }, /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
     story: story,
     onScreenChange: finalOnScreenChange
-  }))), /*#__PURE__*/React.createElement(wouter.Route, {
+  }))), /*#__PURE__*/React.createElement(Route, {
     path: routes.screen
   }, function (_ref3) {
     var _ref3$screen = _ref3.screen,
       screenParam = _ref3$screen === void 0 ? null : _ref3$screen;
     var screenFromIndex = pathWithIndex && screenParam !== null ? screens[parseInt(screenParam, 10) - 1] || null : null;
     var screenId = pathWithIndex ? (screenFromIndex || {}).id || null : screenParam;
-    return /*#__PURE__*/React.createElement(Viewer, Object.assign({}, otherProps, {
+    return /*#__PURE__*/React.createElement(Viewer$1, Object.assign({}, otherProps, {
       story: story,
       screen: screenId,
       onScreenChange: finalOnScreenChange
@@ -3200,6 +3755,7 @@ var ViewerRoutes = function ViewerRoutes(_ref) {
 };
 ViewerRoutes.propTypes = propTypes$1;
 ViewerRoutes.defaultProps = defaultProps$1;
+var ViewerRoutes$1 = ViewerRoutes;
 
 var home = "/";
 var screen = "/:screen";
@@ -3302,27 +3858,28 @@ var ViewerContainer = function ViewerContainer(_ref) {
     paused: paused
   }, /*#__PURE__*/React.createElement(contexts.TrackingProvider, {
     variables: finalTrackingVariables
-  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer, Object.assign({
+  }, withoutRouter ? /*#__PURE__*/React.createElement(Viewer$1, Object.assign({
     story: story,
     basePath: basePath
-  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes, Object.assign({
+  }, otherProps)) : /*#__PURE__*/React.createElement(ViewerRoutes$1, Object.assign({
     story: story,
     basePath: basePath,
     pathWithIndex: pathWithIndex
   }, otherProps))))))))));
-  var _useMemoryRouter = routes$1.useMemoryRouter(),
+  var _useMemoryRouter = useMemoryRouter(),
     memoryRouterHook = _useMemoryRouter.hook,
     memoryRouterSearchHook = _useMemoryRouter.searchHook;
-  return withoutRouter ? content : /*#__PURE__*/React.createElement(wouter.Router, {
+  return withoutRouter ? content : /*#__PURE__*/React.createElement(Router, {
     base: !memoryRouter ? basePath : null,
     hook: !memoryRouter ? memoryRouterHook : null,
     searchHook: !memoryRouter ? memoryRouterSearchHook : null
-  }, /*#__PURE__*/React.createElement(routes$1.RoutesProvider, {
+  }, /*#__PURE__*/React.createElement(RoutesProvider, {
     routes: routes
   }, content));
 };
 ViewerContainer.propTypes = propTypes;
 ViewerContainer.defaultProps = defaultProps;
+var ViewerContainer$1 = ViewerContainer;
 
-exports.Viewer = Viewer;
-exports.default = ViewerContainer;
+exports.Viewer = Viewer$1;
+exports.default = ViewerContainer$1;