@micromag/core 0.3.480 → 0.3.482

package/lib/components.js

@@ -1,21 +1,24 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var classNames = require('classnames');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var PropTypes = require('prop-types');
 var React = require('react');
-var reactRouterDom = require('react-router-dom');
 var core = require('@micromag/core');
-var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
+var contexts = require('@micromag/core/contexts');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core$1 = require('@react-spring/core');
+var web = require('@react-spring/web');
+var classNames = require('classnames');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var regexparam = require('regexparam');
+var index_js = require('use-sync-external-store/shim/index.js');
+var reactIntl = require('react-intl');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var hooks = require('@micromag/core/hooks');
-var contexts = require('@micromag/core/contexts');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
 var queryString = require('query-string');
 var ReactDOM = require('react-dom');
@@ -42,8 +45,273 @@ var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
 var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
 var faCircle = require('@fortawesome/free-solid-svg-icons/faCircle');
 var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
-var core$1 = require('@react-spring/core');
-var web = require('@react-spring/web');
+
+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 _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.
+ */
+
+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 Link$2 = 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
+  }));
+});
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$T = {
@@ -66,6 +334,7 @@ var Label = function Label(_ref) {
 };
 Label.propTypes = propTypes$T;
 Label.defaultProps = defaultProps$T;
+var Label$1 = Label;
 
 var styles$x = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
@@ -134,7 +403,7 @@ var defaultProps$S = {
   onClick: null,
   refButton: null
 };
-var Button$1 = function Button(_ref) {
+var Button$2 = function Button(_ref) {
   var _ref8;
   var type = _ref.type,
     theme = _ref.theme,
@@ -167,7 +436,7 @@ var Button$1 = function Button(_ref) {
     refButton = _ref.refButton,
     props = _objectWithoutProperties(_ref, _excluded$b);
   var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
+  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label$1, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
@@ -198,8 +467,8 @@ var Button$1 = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(reactRouterDom.Link, {
-      to: href,
+    }), content) : /*#__PURE__*/React.createElement(Link$2, {
+      href: href,
       className: linkClassNames,
       onClick: onClick,
       ref: refButton,
@@ -215,8 +484,9 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button$1.propTypes = propTypes$S;
-Button$1.defaultProps = defaultProps$S;
+Button$2.propTypes = propTypes$S;
+Button$2.defaultProps = defaultProps$S;
+var Button$3 = Button$2;
 
 var styles$w = {};
 
@@ -271,11 +541,12 @@ var Buttons = function Buttons(_ref) {
       },
       theme: buttonTheme || theme
     };
-    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
+    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$3, Object.assign({}, fixedProps, buttonProps));
   }));
 };
 Buttons.propTypes = propTypes$R;
 Buttons.defaultProps = defaultProps$R;
+var Buttons$1 = Buttons;
 
 var _excluded$9 = ["className"];
 var propTypes$Q = {
@@ -287,7 +558,7 @@ var defaultProps$Q = {
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/React.createElement(Button$3, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
     size: "sm",
     icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
@@ -298,6 +569,7 @@ var BackButton = function BackButton(_ref) {
 };
 BackButton.propTypes = propTypes$Q;
 BackButton.defaultProps = defaultProps$Q;
+var BackButton$1 = BackButton;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
@@ -393,6 +665,7 @@ var FieldForm = function FieldForm(_ref) {
 };
 FieldForm.propTypes = propTypes$P;
 FieldForm.defaultProps = defaultProps$P;
+var FieldForm$1 = FieldForm;
 
 var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
@@ -571,14 +844,14 @@ var Form = function Form(_ref) {
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mb-2"
-  }, /*#__PURE__*/React.createElement(BackButton, {
+  }, /*#__PURE__*/React.createElement(BackButton$1, {
     theme: "secondary",
     outline: true,
     onClick: closeFieldForm
   })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['w-100', styles$v.panel]),
     key: "field"
-  }, /*#__PURE__*/React.createElement(FieldForm, {
+  }, /*#__PURE__*/React.createElement(FieldForm$1, {
     name: fieldName,
     fields: fields,
     value: value,
@@ -597,7 +870,7 @@ var Form = function Form(_ref) {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$v.actions, _defineProperty(_defineProperty({}, styles$v[actionsAlign], actionsAlign), actionsClassName, actionsClassName !== null)])
-  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
+  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$3, {
     type: "button",
     onClick: onCancel,
     href: onCancelHref,
@@ -611,10 +884,10 @@ var Form = function Form(_ref) {
       "type": 0,
       "value": "Cancel"
     }]
-  })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+  })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons$1, {
     buttons: buttons,
     className: styles$v.buttons
-  }) : /*#__PURE__*/React.createElement(Button$1, {
+  }) : /*#__PURE__*/React.createElement(Button$3, {
     type: "submit",
     theme: submitButtonTheme || 'primary',
     disabled: status === 'loading' || !canSave
@@ -630,6 +903,7 @@ var Form = function Form(_ref) {
 };
 Form.propTypes = propTypes$O;
 Form.defaultProps = defaultProps$O;
+var Form$1 = Form;
 
 var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
@@ -666,13 +940,14 @@ var Link = function Link(_ref) {
     href: href,
     target: target,
     rel: rel
-  }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(reactRouterDom.Link, Object.assign({
+  }, props), /*#__PURE__*/React.createElement(Label$1, null, children)) : /*#__PURE__*/React.createElement(Link$2, Object.assign({
     className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
-    to: href
-  }, props), /*#__PURE__*/React.createElement(Label, null, children));
+    href: href
+  }, props), /*#__PURE__*/React.createElement(Label$1, null, children));
 };
 Link.propTypes = propTypes$N;
 Link.defaultProps = defaultProps$N;
+var Link$1 = Link;
 
 var _excluded$6 = ["label", "className"];
 var propTypes$M = {
@@ -760,21 +1035,21 @@ var Card = function Card(_ref) {
       _ref2$className = _ref2.className,
       linkClassName = _ref2$className === void 0 ? null : _ref2$className,
       linkProps = _objectWithoutProperties(_ref2, _excluded$6);
-    return /*#__PURE__*/React.createElement(Link, Object.assign({
+    return /*#__PURE__*/React.createElement(Link$1, Object.assign({
       key: "link-".concat(label, "-").concat(index),
       className: classNames(['card-link', _defineProperty({}, linkClassName, linkClassName !== null)])
     }, linkProps), label);
   });
   var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/React.createElement(React.Fragment, null, title !== null ? /*#__PURE__*/React.createElement("h5", {
     className: classNames(['card-title', _defineProperty({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
+  }, /*#__PURE__*/React.createElement(Label$1, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
     className: classNames(['card-subtitle', _defineProperty({}, subtitleClassName, subtitleClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, subtitle)) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label$1, null, subtitle)) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex"
   }, linksElements) : null) : null;
   var cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, header !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['card-header', _defineProperty({}, headerClassName, headerClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React.createElement(Label$1, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: imageAlt,
     className: classNames(['card-img-top', _defineProperty({}, imageClassName, imageClassName !== null)])
@@ -796,12 +1071,12 @@ var Card = function Card(_ref) {
     type: "button",
     className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)]),
     onClick: onClickFooter
-  }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Label$1, null, footer)) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
+  }, /*#__PURE__*/React.createElement(Label$1, null, footer)) : null);
   var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className, className !== null)]);
   if (href !== null) {
-    return /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/React.createElement(Link$1, {
       href: href,
       className: cardClassName
     }, cardInner);
@@ -819,6 +1094,7 @@ var Card = function Card(_ref) {
 };
 Card.propTypes = propTypes$M;
 Card.defaultProps = defaultProps$M;
+var Card$1 = Card;
 
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
 
@@ -857,6 +1133,7 @@ var Spinner = function Spinner(_ref) {
 };
 Spinner.propTypes = propTypes$L;
 Spinner.defaultProps = defaultProps$L;
+var Spinner$1 = Spinner;
 
 var styles$s = {};
 
@@ -879,12 +1156,13 @@ var FormPanel = function FormPanel(_ref) {
     children = _ref.children,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement(Card, Object.assign({
+  return /*#__PURE__*/React.createElement(Card$1, Object.assign({
     className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
-  }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
+  }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner$1, null) : children);
 };
 FormPanel.propTypes = propTypes$K;
 FormPanel.defaultProps = defaultProps$K;
+var FormPanel$1 = FormPanel;
 
 var propTypes$J = {
   className: PropTypes.string,
@@ -913,6 +1191,7 @@ var ArrowIcon = function ArrowIcon(_ref) {
 };
 ArrowIcon.propTypes = propTypes$J;
 ArrowIcon.defaultProps = defaultProps$J;
+var ArrowIcon$1 = ArrowIcon;
 
 var propTypes$I = {
   className: PropTypes.string,
@@ -946,6 +1225,7 @@ var CloseIcon = function CloseIcon(_ref) {
 };
 CloseIcon.propTypes = propTypes$I;
 CloseIcon.defaultProps = defaultProps$I;
+var CloseIcon$1 = CloseIcon;
 
 var propTypes$H = {
   className: PropTypes.string,
@@ -972,6 +1252,7 @@ var FullscreenIcon = function FullscreenIcon(_ref) {
 };
 FullscreenIcon.propTypes = propTypes$H;
 FullscreenIcon.defaultProps = defaultProps$H;
+var FullscreenIcon$1 = FullscreenIcon;
 
 var propTypes$G = {
   className: PropTypes.string,
@@ -1007,6 +1288,7 @@ var LinkIcon = function LinkIcon(_ref) {
 };
 LinkIcon.propTypes = propTypes$G;
 LinkIcon.defaultProps = defaultProps$G;
+var LinkIcon$1 = LinkIcon;
 
 var propTypes$F = {
   className: PropTypes.string,
@@ -1039,6 +1321,7 @@ var MuteIcon = function MuteIcon(_ref) {
 };
 MuteIcon.propTypes = propTypes$F;
 MuteIcon.defaultProps = defaultProps$F;
+var MuteIcon$1 = MuteIcon;
 
 var propTypes$E = {
   className: PropTypes.string,
@@ -1073,6 +1356,7 @@ var PauseIcon = function PauseIcon(_ref) {
 };
 PauseIcon.propTypes = propTypes$E;
 PauseIcon.defaultProps = defaultProps$E;
+var PauseIcon$1 = PauseIcon;
 
 var propTypes$D = {
   className: PropTypes.string,
@@ -1100,6 +1384,7 @@ var PlayIcon = function PlayIcon(_ref) {
 };
 PlayIcon.propTypes = propTypes$D;
 PlayIcon.defaultProps = defaultProps$D;
+var PlayIcon$1 = PlayIcon;
 
 var propTypes$C = {
   className: PropTypes.string,
@@ -1131,6 +1416,7 @@ var UnmuteIcon = function UnmuteIcon(_ref) {
 };
 UnmuteIcon.propTypes = propTypes$C;
 UnmuteIcon.defaultProps = defaultProps$C;
+var UnmuteIcon$1 = UnmuteIcon;
 
 var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
@@ -1178,18 +1464,19 @@ var Breadcrumb = function Breadcrumb(_ref) {
         active: active
       }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
       key: "item-".concat(index)
-    }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(reactRouterDom.Link, {
-      to: url,
+    }, active ? /*#__PURE__*/React.createElement(Label$1, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(Link$2, {
+      href: url,
       onClick: onClick,
       className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
-    }, /*#__PURE__*/React.createElement(Label, null, label)) : null, !active && onClick ? /*#__PURE__*/React.createElement(Button$1, {
+    }, /*#__PURE__*/React.createElement(Label$1, null, label)) : null, !active && onClick ? /*#__PURE__*/React.createElement(Button$3, {
       onClick: onClick,
       className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
-    }, /*#__PURE__*/React.createElement(Label, null, label)) : null);
+    }, /*#__PURE__*/React.createElement(Label$1, null, label)) : null);
   })));
 };
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
+var Breadcrumb$1 = Breadcrumb;
 
 var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
 var propTypes$A = {
@@ -1261,7 +1548,7 @@ var Dropdown = function Dropdown(_ref) {
       itemProps = _objectWithoutProperties(it, _excluded$4);
     var ItemComponent = 'div';
     if (type === 'link') {
-      ItemComponent = Link;
+      ItemComponent = Link$1;
     } else if (type === 'button') {
       ItemComponent = 'button';
     } else if (type === 'header') {
@@ -1287,11 +1574,12 @@ var Dropdown = function Dropdown(_ref) {
         active: active
       }, itemClassName, itemClassName !== null), customClassName, customClassName !== null)]),
       onClick: finalOnClickItem
-    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
+    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label$1, null, label) : itemChildren)) : null;
   }));
 };
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
+var Dropdown$1 = Dropdown;
 
 var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
 var propTypes$z = {
@@ -1390,7 +1678,7 @@ var Menu = function Menu(_ref) {
       setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
     } : null;
     var ItemComponent = itemTagName;
-    return linkAsItem ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
+    return linkAsItem ? /*#__PURE__*/React.createElement(Link$1, Object.assign({}, itemProps, {
       key: "item-".concat(id || index),
       onClick: onClickItem,
       href: href,
@@ -1404,12 +1692,12 @@ var Menu = function Menu(_ref) {
         dropdown: dropdown !== null,
         active: active
       }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null))
-    }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
+    }, href !== null ? /*#__PURE__*/React.createElement(Link$1, Object.assign({}, itemProps, {
       onClick: onClickItem,
       href: href,
       external: external,
       className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
-    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
+    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$3, Object.assign({}, itemProps, {
       onClick: onClickItem,
       className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
     }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
@@ -1417,7 +1705,7 @@ var Menu = function Menu(_ref) {
       className: subMenuClassName,
       itemClassName: classNames(_defineProperty(_defineProperty({}, subMenuItemClassName, subMenuItemClassName !== null), itemClassName, subMenuItemClassName === null && itemClassName !== null)),
       linkClassName: classNames(_defineProperty(_defineProperty({}, subMenuLinkClassName, subMenuLinkClassName !== null), linkClassName, subMenuLinkClassName === null && linkClassName !== null))
-    }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
+    }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown$1, {
       items: dropdown,
       visible: dropdownsVisible[index] || false,
       className: dropdownClassName,
@@ -1431,6 +1719,7 @@ var Menu = function Menu(_ref) {
 };
 Menu.propTypes = propTypes$z;
 Menu.defaultProps = defaultProps$z;
+var Menu$1 = Menu;
 
 var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
 
@@ -1494,7 +1783,7 @@ var Navbar = function Navbar(_ref) {
     className: classNames(['container-fluid', {
       'px-0': compact
     }])
-  }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
+  }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link$1, {
     className: classNames(['navbar-brand', _defineProperty({
       'py-0': compact
     }, brandClassName, brandClassName !== null)]),
@@ -1507,7 +1796,7 @@ var Navbar = function Navbar(_ref) {
     className: classNames(['navbar-breadcrumbs', _defineProperty({
       'py-0': compact
     }, breadCrumbsClassName, breadCrumbsClassName !== null)])
-  }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React.createElement(Button$1, {
+  }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React.createElement(Button$3, {
     className: "navbar-toggler",
     onClick: onClickMenu,
     withoutTheme: true,
@@ -1522,6 +1811,7 @@ var Navbar = function Navbar(_ref) {
 };
 Navbar.propTypes = propTypes$y;
 Navbar.defaultProps = defaultProps$y;
+var Navbar$1 = Navbar;
 
 var styles$p = {};
 
@@ -1624,7 +1914,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
     className: classNames(['page-item', _defineProperty({
       disabled: page <= 1
     }, itemClassName, itemClassName !== null)])
-  }, page > 1 ? /*#__PURE__*/React.createElement(Link, {
+  }, page > 1 ? /*#__PURE__*/React.createElement(Link$1, {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
     href: getUrl(page - 1),
     onClick: onClickPage !== null ? function () {
@@ -1632,13 +1922,13 @@ var PaginationMenu = function PaginationMenu(_ref) {
     } : null
   }, messages.previous) : /*#__PURE__*/React.createElement("span", {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
+  }, /*#__PURE__*/React.createElement(Label$1, null, messages.previous))) : null, pages.map(function (pageNumber) {
     return /*#__PURE__*/React.createElement("li", {
       key: "page-".concat(pageNumber),
       className: classNames(['page-item', _defineProperty({
         active: pageNumber === page
       }, itemClassName, itemClassName !== null)])
-    }, /*#__PURE__*/React.createElement(Link, {
+    }, /*#__PURE__*/React.createElement(Link$1, {
       className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
       href: getUrl(pageNumber),
       onClick: onClickPage !== null ? function () {
@@ -1649,7 +1939,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
     className: classNames(['page-item', _defineProperty({
       disabled: page >= total
     }, itemClassName, itemClassName !== null)])
-  }, page < total ? /*#__PURE__*/React.createElement(Link, {
+  }, page < total ? /*#__PURE__*/React.createElement(Link$1, {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
     href: getUrl(page + 1),
     onClick: onClickPage !== null ? function () {
@@ -1657,10 +1947,11 @@ var PaginationMenu = function PaginationMenu(_ref) {
     } : null
   }, messages.next) : /*#__PURE__*/React.createElement("span", {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
+  }, /*#__PURE__*/React.createElement(Label$1, null, messages.next))) : null));
 };
 PaginationMenu.propTypes = propTypes$x;
 PaginationMenu.defaultProps = defaultProps$x;
+var PaginationMenu$1 = PaginationMenu;
 
 var styles$o = {"container":"micromag-core-menus-tabs-container"};
 
@@ -1692,7 +1983,7 @@ var TabsMenu = function TabsMenu(_ref) {
     onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$o.container, _defineProperty({}, className, className)])
-  }, /*#__PURE__*/React.createElement(Buttons, {
+  }, /*#__PURE__*/React.createElement(Buttons$1, {
     buttons: items,
     size: size,
     theme: theme,
@@ -1704,6 +1995,7 @@ var TabsMenu = function TabsMenu(_ref) {
 };
 TabsMenu.propTypes = propTypes$w;
 TabsMenu.defaultProps = defaultProps$w;
+var TabsMenu$1 = TabsMenu;
 
 var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
@@ -1779,6 +2071,7 @@ var ElementPortal = function ElementPortal(_ref) {
 };
 ElementPortal.propTypes = propTypes$u;
 ElementPortal.defaultProps = defaultProps$u;
+var ElementPortal$1 = ElementPortal;
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$t = {
@@ -1802,7 +2095,7 @@ var ModalPortal = function ModalPortal(_ref) {
     register = _useModals$register === void 0 ? null : _useModals$register,
     _useModals$unregister = _useModals.unregister,
     unregister = _useModals$unregister === void 0 ? null : _useModals$unregister;
-  return /*#__PURE__*/React.createElement(ElementPortal, {
+  return /*#__PURE__*/React.createElement(ElementPortal$1, {
     id: id,
     data: data,
     container: container,
@@ -1812,6 +2105,7 @@ var ModalPortal = function ModalPortal(_ref) {
 };
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
+var Portal$1 = ModalPortal;
 
 var propTypes$s = {
   id: PropTypes.string,
@@ -1838,7 +2132,7 @@ var Modal = function Modal(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React.createElement(ModalPortal, {
+  return /*#__PURE__*/React.createElement(Portal$1, {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
@@ -1849,6 +2143,7 @@ var Modal = function Modal(_ref) {
 };
 Modal.propTypes = propTypes$s;
 Modal.defaultProps = defaultProps$s;
+var Modal$1 = Modal;
 
 var styles$l = {"container":"micromag-core-modals-dialog-container"};
 
@@ -1896,7 +2191,7 @@ var ModalDialog = function ModalDialog(_ref) {
     }])
   }, /*#__PURE__*/React.createElement("h5", {
     className: "modal-title"
-  }, /*#__PURE__*/React.createElement(Label, null, title)), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(Label$1, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "btn-close",
     "aria-label": "Close",
@@ -1905,13 +2200,14 @@ var ModalDialog = function ModalDialog(_ref) {
     className: classNames(['modal-body', 'p-2', styles$l.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-footer', styles$l.footer])
-  }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+  }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons$1, {
     buttons: buttons,
     className: styles$l.buttons
   }) : null) : null));
 };
 ModalDialog.propTypes = propTypes$r;
 ModalDialog.defaultProps = defaultProps$r;
+var ModalDialog$1 = ModalDialog;
 
 // import classNames from 'classnames';
 // import { DashboardModal } from '@uppy/react';
@@ -1980,6 +2276,7 @@ var UploadModal = function UploadModal(_ref2) {
 };
 UploadModal.propTypes = propTypes$q;
 UploadModal.defaultProps = defaultProps$q;
+var UploadModal$1 = UploadModal;
 
 var styles$k = {"container":"micromag-core-panels-container"};
 
@@ -2039,7 +2336,7 @@ var PanelPortal = function PanelPortal(_ref) {
   if (panels === null) {
     return children;
   }
-  return /*#__PURE__*/React.createElement(ElementPortal, {
+  return /*#__PURE__*/React.createElement(ElementPortal$1, {
     id: id,
     data: data,
     container: container,
@@ -2049,6 +2346,7 @@ var PanelPortal = function PanelPortal(_ref) {
 };
 PanelPortal.propTypes = propTypes$o;
 PanelPortal.defaultProps = defaultProps$o;
+var Portal = PanelPortal;
 
 var styles$j = {"container":"micromag-core-panels-panel-container"};
 
@@ -2075,7 +2373,7 @@ var Panel = function Panel(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React.createElement(PanelPortal, {
+  return /*#__PURE__*/React.createElement(Portal, {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
@@ -2084,6 +2382,7 @@ var Panel = function Panel(_ref) {
 };
 Panel.propTypes = propTypes$n;
 Panel.defaultProps = defaultProps$n;
+var Panel$1 = Panel;
 
 var styles$i = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
 
@@ -2124,7 +2423,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     className: classNames([styles$i.container, _defineProperty(_defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null), className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$i.top, _defineProperty({}, topClassName, topClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Button$1, {
+  }, /*#__PURE__*/React.createElement(Button$3, {
     withoutStyle: true,
     className: classNames([styles$i.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
@@ -2140,6 +2439,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
 };
 CollapsablePanel.propTypes = propTypes$m;
 CollapsablePanel.defaultProps = defaultProps$m;
+var CollapsablePanel$1 = CollapsablePanel;
 
 var propTypes$l = {
   stroke: PropTypes.string,
@@ -2192,6 +2492,7 @@ var Close = function Close(_ref) {
 };
 Close.propTypes = propTypes$l;
 Close.defaultProps = defaultProps$l;
+var Close$1 = Close;
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$k = {
@@ -2222,6 +2523,7 @@ var Date$1 = function Date(_ref) {
 };
 Date$1.propTypes = propTypes$k;
 Date$1.defaultProps = defaultProps$k;
+var Date$2 = Date$1;
 
 /* eslint-disable react/no-danger */
 var propTypes$j = {
@@ -2300,6 +2602,7 @@ var Detector = function Detector(_ref) {
 };
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
+var Detector$1 = Detector;
 
 var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
 
@@ -2341,6 +2644,7 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
 };
 PlaceholderBlock.propTypes = propTypes$i;
 PlaceholderBlock.defaultProps = defaultProps$i;
+var PlaceholderBlock$1 = PlaceholderBlock;
 
 /* eslint-disable react/jsx-props-no-spreading */
 
@@ -2375,7 +2679,7 @@ var ElementComponent = function ElementComponent(_ref) {
   if (isPlaceholder) {
     // TODO: figure out what this did
     // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
+    return /*#__PURE__*/React.createElement(PlaceholderBlock$1, placeholderProps);
   }
   var RealComponent = components[utils.pascalCase(name)];
   if (!RealComponent) {
@@ -2387,6 +2691,7 @@ var ElementComponent = function ElementComponent(_ref) {
 };
 ElementComponent.propTypes = propTypes$h;
 ElementComponent.defaultProps = defaultProps$h;
+var ElementComponent$1 = ElementComponent;
 
 var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
 
@@ -2411,10 +2716,11 @@ var Empty = function Empty(_ref) {
     className: classNames([styles$g.container, _defineProperty(_defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light), className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.middle
-  }, /*#__PURE__*/React.createElement(Label, null, children)));
+  }, /*#__PURE__*/React.createElement(Label$1, null, children)));
 };
 Empty.propTypes = propTypes$g;
 Empty.defaultProps = defaultProps$g;
+var Empty$1 = Empty;
 
 var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
   var _ref = media || {},
@@ -2497,6 +2803,7 @@ var FontFaces = function FontFaces(_ref4) {
 };
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
+var FontFaces$1 = FontFaces;
 
 var styles$f = {};
 
@@ -2543,10 +2850,11 @@ var Media = function Media(_ref) {
     className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React.createElement("h5", {
     className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
+  }, /*#__PURE__*/React.createElement(Label$1, null, title)) : null, children) : null);
 };
 Media.propTypes = propTypes$e;
 Media.defaultProps = defaultProps$e;
+var Media$1 = Media;
 
 /**
  * Core
@@ -3266,6 +3574,7 @@ var Meta = function Meta(_ref) {
 };
 Meta.propTypes = propTypes$d;
 Meta.defaultProps = defaultProps$d;
+var Meta$1 = Meta;
 
 var styles$e = {"container":"micromag-core-partials-slideshow-container","items":"micromag-core-partials-slideshow-items","item":"micromag-core-partials-slideshow-item","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
 
@@ -3334,6 +3643,7 @@ var Slideshow = function Slideshow(_ref) {
 };
 Slideshow.propTypes = propTypes$c;
 Slideshow.defaultProps = defaultProps$c;
+var Slideshow$1 = Slideshow;
 
 var styles$d = {"icon":"micromag-core-placeholders-icon"};
 
@@ -3342,7 +3652,7 @@ var AdFrame = function AdFrame(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: className
@@ -3351,13 +3661,14 @@ var AdFrame = function AdFrame(_ref) {
     className: styles$d.icon
   }));
 };
+var AdFrame$1 = AdFrame;
 
 /* eslint-disable react/prop-types */
 var AdImage = function AdImage(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: className
@@ -3366,6 +3677,7 @@ var AdImage = function AdImage(_ref) {
     className: styles$d.icon
   }));
 };
+var AdImage$1 = AdImage;
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Audio = function Audio(_ref) {
@@ -3374,7 +3686,7 @@ var Audio = function Audio(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '2em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: className
@@ -3383,6 +3695,7 @@ var Audio = function Audio(_ref) {
     className: styles$d.icon
   }));
 };
+var Audio$1 = Audio;
 
 var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
 
@@ -3431,6 +3744,7 @@ var PlaceholderText = function PlaceholderText(_ref) {
 };
 PlaceholderText.propTypes = propTypes$b;
 PlaceholderText.defaultProps = defaultProps$b;
+var PlaceholderText$1 = PlaceholderText;
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Button = function Button(_ref) {
@@ -3439,16 +3753,17 @@ var Button = function Button(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.4em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     outline: true,
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText$1, {
     line: 1,
     height: "0.1em"
   }));
 };
+var Button$1 = Button;
 
 var _excluded$2 = ["width", "height", "className"];
 var Image = function Image(_ref) {
@@ -3456,7 +3771,7 @@ var Image = function Image(_ref) {
     height = _ref.height,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, Object.assign({}, props, {
     width: width,
     height: height,
     className: className
@@ -3465,20 +3780,22 @@ var Image = function Image(_ref) {
     className: styles$d.icon
   }));
 };
+var Image$1 = Image;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Line = function Line(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 1
   }));
 };
+var Line$1 = Line;
 
 var styles$b = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 var Map = function Map(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, Object.assign({}, props, {
     width: "100%",
     height: "100%",
     className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)])
@@ -3496,10 +3813,11 @@ var Map = function Map(props) {
     className: styles$b.icon
   }));
 };
+var Map$1 = Map;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var MapPath = function MapPath(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, Object.assign({}, props, {
     width: "100%",
     height: "70%",
     className: classNames([props.className, styles$d.mapPath])
@@ -3509,33 +3827,37 @@ var MapPath = function MapPath(props) {
     className: styles$d.icon
   }));
 };
+var MapPath$1 = MapPath;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Quote = function Quote(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.subtitle]),
     height: 0.5,
     lines: 6
   }));
 };
+var Quote$1 = Quote;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var ShortText = function ShortText(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 2
   }));
 };
+var ShortText$1 = ShortText;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Subtitle = function Subtitle(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.subtitle]),
     height: 0.3,
     lines: 1
   }));
 };
+var Subtitle$1 = Subtitle;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var TextPlaceholder = function TextPlaceholder(props) {
@@ -3547,43 +3869,46 @@ var TextPlaceholder = function TextPlaceholder(props) {
     lines = _props$lines === void 0 ? 4 : _props$lines,
     _props$lineMargin = props.lineMargin,
     lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
     className: classNames([className, styles$d.text])
   }));
 };
+var TextPlaceholder$1 = TextPlaceholder;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Timeline = function Timeline(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.timeline])
   }));
 };
+var Timeline$1 = Timeline;
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
-var Title$1 = function Title(props) {
+var Title$2 = function Title(props) {
   var _props$height = props.height,
     height = _props$height === void 0 ? 0.5 : _props$height,
     _props$lines = props.lines,
     lines = _props$lines === void 0 ? 2 : _props$lines,
     _props$lineMargin = props.lineMargin,
     lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText$1, Object.assign({}, props, {
     className: classNames([props.className, styles$d.title]),
     height: height,
     lines: lines,
     lineMargin: lineMargin
   }));
 };
+var Title$3 = Title$2;
 
 /* eslint-disable react/prop-types */
 var Video = function Video(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: className
@@ -3592,6 +3917,7 @@ var Video = function Video(_ref) {
     className: styles$d.icon
   }));
 };
+var Video$1 = Video;
 
 var styles$a = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
 
@@ -3599,7 +3925,7 @@ var Video360 = function Video360(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
@@ -3611,13 +3937,14 @@ var Video360 = function Video360(_ref) {
     className: styles$a.label
   }, "360"));
 };
+var Video360$1 = Video360;
 
 /* eslint-disable react/prop-types */
 var VideoLoop = function VideoLoop(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     width: width,
     height: height,
     className: className
@@ -3629,6 +3956,7 @@ var VideoLoop = function VideoLoop(_ref) {
     className: styles$d.icon
   }));
 };
+var VideoLoop$1 = VideoLoop;
 
 var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
@@ -3741,6 +4069,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
 };
 ScreenSizer.propTypes = propTypes$a;
 ScreenSizer.defaultProps = defaultProps$a;
+var ScreenSizer$1 = ScreenSizer;
 
 var styles$8 = {"container":"micromag-core-screens-screen-container"};
 
@@ -3839,7 +4168,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     layout: layout,
     className: classNames([styles$7.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer$1, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight
@@ -3893,7 +4222,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
   }, props));
   var element = !hidden ? screenElement : /*#__PURE__*/React.createElement("div", null);
-  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer$1, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
@@ -3921,6 +4250,7 @@ var Conversation = function Conversation() {
     className: styles$5.icon
   }));
 };
+var Conversation$1 = Conversation;
 
 /* eslint-disable react/prop-types */
 var InputText = function InputText(_ref) {
@@ -3929,17 +4259,18 @@ var InputText = function InputText(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.5em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     outline: true,
     width: width,
     height: height,
     className: className
   });
 };
+var InputText$1 = InputText;
 
 var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","block":"micromag-core-placeholders-quiz-answer-block","answer":"micromag-core-placeholders-quiz-answer-answer","answerIcon":"micromag-core-placeholders-quiz-answer-answerIcon","good":"micromag-core-placeholders-quiz-answer-good"};
 
-var Answer$1 = function Answer(_ref) {
+var Answer$2 = function Answer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '75%' : _ref$width,
     _ref$height = _ref.height,
@@ -3954,21 +4285,22 @@ var Answer$1 = function Answer(_ref) {
   }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$4.answerIcon,
     icon: good ? faCheck.faCheck : faTimes.faTimes
-  })), /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  })), /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     outline: true,
     width: width,
     height: height,
     className: styles$4.block
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText$1, {
     line: 1,
     height: "0.2em"
   })));
 };
+var Answer$3 = Answer$2;
 
 var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item","button":"micromag-core-placeholders-share-options-button"};
 
 var Title = function Title(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock$1, Object.assign({}, props, {
     width: "100%",
     height: "100%",
     className: classNames([styles$3.container, _defineProperty({}, props.className, props.className !== null)]),
@@ -3990,6 +4322,7 @@ var Title = function Title(props) {
     className: styles$3.icon
   })));
 };
+var Title$1 = Title;
 
 var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container","block":"micromag-core-placeholders-survey-answer-block","percent":"micromag-core-placeholders-survey-answer-percent","percentIcon":"micromag-core-placeholders-survey-answer-percentIcon"};
 
@@ -4001,12 +4334,12 @@ var Answer = function Answer(_ref) {
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
-  }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock$1, {
     outline: true,
     width: width,
     height: height,
     className: styles$2.block
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText$1, {
     line: 1,
     height: "0.2em"
   })), /*#__PURE__*/React.createElement("div", {
@@ -4016,31 +4349,32 @@ var Answer = function Answer(_ref) {
     icon: faPercent.faPercent
   })));
 };
+var Answer$1 = Answer;
 
 var Placeholders = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AdFrame: AdFrame,
-    AdImage: AdImage,
-    Audio: Audio,
-    Button: Button,
-    Conversation: Conversation,
-    Image: Image,
-    InputText: InputText,
-    Line: Line,
-    Map: Map,
-    MapPath: MapPath,
-    QuizAnswer: Answer$1,
-    Quote: Quote,
-    ShareOptions: Title,
-    ShortText: ShortText,
-    Subtitle: Subtitle,
-    SurveyAnswer: Answer,
-    Text: TextPlaceholder,
-    Timeline: Timeline,
-    Title: Title$1,
-    Video: Video,
-    Video360: Video360,
-    VideoLoop: VideoLoop
+  __proto__: null,
+  AdFrame: AdFrame$1,
+  AdImage: AdImage$1,
+  Audio: Audio$1,
+  Button: Button$1,
+  Conversation: Conversation$1,
+  Image: Image$1,
+  InputText: InputText$1,
+  Line: Line$1,
+  Map: Map$1,
+  MapPath: MapPath$1,
+  QuizAnswer: Answer$3,
+  Quote: Quote$1,
+  ShareOptions: Title$1,
+  ShortText: ShortText$1,
+  Subtitle: Subtitle$1,
+  SurveyAnswer: Answer$1,
+  Text: TextPlaceholder$1,
+  Timeline: Timeline$1,
+  Title: Title$3,
+  Video: Video$1,
+  Video360: Video360$1,
+  VideoLoop: VideoLoop$1
 });
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -4083,7 +4417,7 @@ var ScreenElement = function ScreenElement(_ref) {
     return PlaceholderComponent !== null ? /*#__PURE__*/React.createElement(PlaceholderComponent, placeholderProps) : placeholder;
   }
   if (isEdit && isEmpty) {
-    return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty, {
+    return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty$1, {
       className: emptyClassName
     }, emptyLabel);
   }
@@ -4094,6 +4428,7 @@ var ScreenElement = function ScreenElement(_ref) {
 };
 ScreenElement.propTypes = propTypes$6;
 ScreenElement.defaultProps = defaultProps$6;
+var ScreenElement$1 = ScreenElement;
 
 var styles$1 = {"container":"micromag-core-screens-container","screen":"micromag-core-screens-screen","visible":"micromag-core-screens-visible"};
 
@@ -4123,6 +4458,7 @@ var Screens = function Screens(_ref) {
 };
 Screens.propTypes = propTypes$5;
 Screens.defaultProps = defaultProps$5;
+var Screens$1 = Screens;
 
 var styles = {"container":"micromag-core-transitions-transition-container","fullscreen":"micromag-core-transitions-transition-fullscreen"};
 
@@ -4395,6 +4731,7 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
 };
 TransitionsStagger.propTypes = propTypes$2;
 TransitionsStagger.defaultProps = defaultProps$2;
+var TransitionsStagger$1 = TransitionsStagger;
 
 var propTypes$1 = {
   selector: PropTypes.string,
@@ -4418,6 +4755,7 @@ var HighlightStyle = function HighlightStyle(_ref) {
 };
 HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
+var HighlightStyle$1 = HighlightStyle;
 
 var propTypes = {
   selector: PropTypes.string,
@@ -4441,73 +4779,74 @@ var LinkStyle = function LinkStyle(_ref) {
 };
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
-
-exports.ArrowIcon = ArrowIcon;
-exports.BackButton = BackButton;
-exports.Breadcrumb = Breadcrumb;
-exports.Button = Button$1;
-exports.Buttons = Buttons;
-exports.Card = Card;
-exports.Close = Close;
-exports.CloseIcon = CloseIcon;
-exports.CollapsablePanel = CollapsablePanel;
-exports.Date = Date$1;
-exports.Detector = Detector;
-exports.DropdownMenu = Dropdown;
-exports.Element = ElementComponent;
-exports.Empty = Empty;
-exports.FieldForm = FieldForm;
-exports.FontFaces = FontFaces;
-exports.Form = Form;
-exports.FormPanel = FormPanel;
-exports.FullscreenIcon = FullscreenIcon;
-exports.HighlightStyle = HighlightStyle;
-exports.Label = Label;
-exports.Link = Link;
-exports.LinkIcon = LinkIcon;
-exports.LinkStyle = LinkStyle;
-exports.Media = Media;
-exports.Menu = Menu;
-exports.Meta = Meta;
-exports.Modal = Modal;
-exports.ModalDialog = ModalDialog;
-exports.ModalPortal = ModalPortal;
+var LinkStyle$1 = LinkStyle;
+
+exports.ArrowIcon = ArrowIcon$1;
+exports.BackButton = BackButton$1;
+exports.Breadcrumb = Breadcrumb$1;
+exports.Button = Button$3;
+exports.Buttons = Buttons$1;
+exports.Card = Card$1;
+exports.Close = Close$1;
+exports.CloseIcon = CloseIcon$1;
+exports.CollapsablePanel = CollapsablePanel$1;
+exports.Date = Date$2;
+exports.Detector = Detector$1;
+exports.DropdownMenu = Dropdown$1;
+exports.Element = ElementComponent$1;
+exports.Empty = Empty$1;
+exports.FieldForm = FieldForm$1;
+exports.FontFaces = FontFaces$1;
+exports.Form = Form$1;
+exports.FormPanel = FormPanel$1;
+exports.FullscreenIcon = FullscreenIcon$1;
+exports.HighlightStyle = HighlightStyle$1;
+exports.Label = Label$1;
+exports.Link = Link$1;
+exports.LinkIcon = LinkIcon$1;
+exports.LinkStyle = LinkStyle$1;
+exports.Media = Media$1;
+exports.Menu = Menu$1;
+exports.Meta = Meta$1;
+exports.Modal = Modal$1;
+exports.ModalDialog = ModalDialog$1;
+exports.ModalPortal = Portal$1;
 exports.Modals = Modals;
-exports.MuteIcon = MuteIcon;
-exports.Navbar = Navbar;
-exports.Pagination = PaginationMenu;
-exports.Panel = Panel;
-exports.PanelPortal = PanelPortal;
+exports.MuteIcon = MuteIcon$1;
+exports.Navbar = Navbar$1;
+exports.Pagination = PaginationMenu$1;
+exports.Panel = Panel$1;
+exports.PanelPortal = Portal;
 exports.Panels = Panels;
-exports.PauseIcon = PauseIcon;
-exports.PlaceholderAdFrame = AdFrame;
-exports.PlaceholderAdImage = AdImage;
-exports.PlaceholderAudio = Audio;
-exports.PlaceholderButton = Button;
-exports.PlaceholderImage = Image;
-exports.PlaceholderLine = Line;
-exports.PlaceholderMap = Map;
-exports.PlaceholderMapPath = MapPath;
-exports.PlaceholderQuote = Quote;
-exports.PlaceholderShortText = ShortText;
-exports.PlaceholderSubtitle = Subtitle;
-exports.PlaceholderText = TextPlaceholder;
-exports.PlaceholderTimeline = Timeline;
-exports.PlaceholderTitle = Title$1;
-exports.PlaceholderVideo = Video;
-exports.PlaceholderVideo360 = Video360;
-exports.PlaceholderVideoLoop = VideoLoop;
-exports.PlayIcon = PlayIcon;
+exports.PauseIcon = PauseIcon$1;
+exports.PlaceholderAdFrame = AdFrame$1;
+exports.PlaceholderAdImage = AdImage$1;
+exports.PlaceholderAudio = Audio$1;
+exports.PlaceholderButton = Button$1;
+exports.PlaceholderImage = Image$1;
+exports.PlaceholderLine = Line$1;
+exports.PlaceholderMap = Map$1;
+exports.PlaceholderMapPath = MapPath$1;
+exports.PlaceholderQuote = Quote$1;
+exports.PlaceholderShortText = ShortText$1;
+exports.PlaceholderSubtitle = Subtitle$1;
+exports.PlaceholderText = TextPlaceholder$1;
+exports.PlaceholderTimeline = Timeline$1;
+exports.PlaceholderTitle = Title$3;
+exports.PlaceholderVideo = Video$1;
+exports.PlaceholderVideo360 = Video360$1;
+exports.PlaceholderVideoLoop = VideoLoop$1;
+exports.PlayIcon = PlayIcon$1;
 exports.Screen = Screen$1;
-exports.ScreenElement = ScreenElement;
+exports.ScreenElement = ScreenElement$1;
 exports.ScreenPlaceholder = Placeholder;
 exports.ScreenPreview = Preview;
-exports.ScreenSizer = ScreenSizer;
-exports.Screens = Screens;
-exports.Slideshow = Slideshow;
-exports.Spinner = Spinner;
-exports.Tabs = TabsMenu;
+exports.ScreenSizer = ScreenSizer$1;
+exports.Screens = Screens$1;
+exports.Slideshow = Slideshow$1;
+exports.Spinner = Spinner$1;
+exports.Tabs = TabsMenu$1;
 exports.Transitions = Transitions;
-exports.TransitionsStagger = TransitionsStagger;
-exports.UnmuteIcon = UnmuteIcon;
-exports.UploadModal = UploadModal;
+exports.TransitionsStagger = TransitionsStagger$1;
+exports.UnmuteIcon = UnmuteIcon$1;
+exports.UploadModal = UploadModal$1;