@micromag/core 0.3.480 → 0.3.482

package/es/components.js

@@ -1,19 +1,21 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import classNames from 'classnames';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import PropTypes$1 from 'prop-types';
 import React, { useCallback, useState, useEffect, useRef, useMemo, Suspense } from 'react';
-import { Link as Link$1 } from 'react-router-dom';
 import { PropTypes } from '@micromag/core';
-import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
+import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useSpring } from '@react-spring/core';
+import { config, animated } from '@react-spring/web';
+import classNames from 'classnames';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Link as Link$2 } from 'wouter';
+import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver } from '@micromag/core/hooks';
-import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import queryString from 'query-string';
 import ReactDOM from 'react-dom';
@@ -40,8 +42,6 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
-import { useSpring } from '@react-spring/core';
-import { config, animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$T = {
@@ -64,6 +64,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"};
 
@@ -132,7 +133,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,
@@ -165,7 +166,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);
@@ -196,8 +197,8 @@ var Button$1 = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(Link$1, {
-      to: href,
+    }), content) : /*#__PURE__*/React.createElement(Link$2, {
+      href: href,
       className: linkClassNames,
       onClick: onClick,
       ref: refButton,
@@ -213,8 +214,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 = {};
 
@@ -269,11 +271,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 = {
@@ -285,7 +288,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(FontAwesomeIcon, {
@@ -296,6 +299,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"];
@@ -391,6 +395,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"};
 
@@ -569,14 +574,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,
@@ -595,7 +600,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,
@@ -609,10 +614,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
@@ -628,6 +633,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"};
 
@@ -664,13 +670,14 @@ var Link = function Link(_ref) {
     href: href,
     target: target,
     rel: rel
-  }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(Link$1, 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 = {
@@ -758,21 +765,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)])
@@ -794,12 +801,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);
@@ -817,6 +824,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"};
 
@@ -855,6 +863,7 @@ var Spinner = function Spinner(_ref) {
 };
 Spinner.propTypes = propTypes$L;
 Spinner.defaultProps = defaultProps$L;
+var Spinner$1 = Spinner;
 
 var styles$s = {};
 
@@ -877,12 +886,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$1.string,
@@ -911,6 +921,7 @@ var ArrowIcon = function ArrowIcon(_ref) {
 };
 ArrowIcon.propTypes = propTypes$J;
 ArrowIcon.defaultProps = defaultProps$J;
+var ArrowIcon$1 = ArrowIcon;
 
 var propTypes$I = {
   className: PropTypes$1.string,
@@ -944,6 +955,7 @@ var CloseIcon = function CloseIcon(_ref) {
 };
 CloseIcon.propTypes = propTypes$I;
 CloseIcon.defaultProps = defaultProps$I;
+var CloseIcon$1 = CloseIcon;
 
 var propTypes$H = {
   className: PropTypes$1.string,
@@ -970,6 +982,7 @@ var FullscreenIcon = function FullscreenIcon(_ref) {
 };
 FullscreenIcon.propTypes = propTypes$H;
 FullscreenIcon.defaultProps = defaultProps$H;
+var FullscreenIcon$1 = FullscreenIcon;
 
 var propTypes$G = {
   className: PropTypes$1.string,
@@ -1005,6 +1018,7 @@ var LinkIcon = function LinkIcon(_ref) {
 };
 LinkIcon.propTypes = propTypes$G;
 LinkIcon.defaultProps = defaultProps$G;
+var LinkIcon$1 = LinkIcon;
 
 var propTypes$F = {
   className: PropTypes$1.string,
@@ -1037,6 +1051,7 @@ var MuteIcon = function MuteIcon(_ref) {
 };
 MuteIcon.propTypes = propTypes$F;
 MuteIcon.defaultProps = defaultProps$F;
+var MuteIcon$1 = MuteIcon;
 
 var propTypes$E = {
   className: PropTypes$1.string,
@@ -1071,6 +1086,7 @@ var PauseIcon = function PauseIcon(_ref) {
 };
 PauseIcon.propTypes = propTypes$E;
 PauseIcon.defaultProps = defaultProps$E;
+var PauseIcon$1 = PauseIcon;
 
 var propTypes$D = {
   className: PropTypes$1.string,
@@ -1098,6 +1114,7 @@ var PlayIcon = function PlayIcon(_ref) {
 };
 PlayIcon.propTypes = propTypes$D;
 PlayIcon.defaultProps = defaultProps$D;
+var PlayIcon$1 = PlayIcon;
 
 var propTypes$C = {
   className: PropTypes$1.string,
@@ -1129,6 +1146,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"};
 
@@ -1176,18 +1194,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(Link$1, {
-      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 = {
@@ -1259,7 +1278,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') {
@@ -1285,11 +1304,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 = {
@@ -1388,7 +1408,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,
@@ -1402,12 +1422,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, {
@@ -1415,7 +1435,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,
@@ -1429,6 +1449,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"};
 
@@ -1492,7 +1513,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)]),
@@ -1505,7 +1526,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,
@@ -1520,6 +1541,7 @@ var Navbar = function Navbar(_ref) {
 };
 Navbar.propTypes = propTypes$y;
 Navbar.defaultProps = defaultProps$y;
+var Navbar$1 = Navbar;
 
 var styles$p = {};
 
@@ -1622,7 +1644,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 () {
@@ -1630,13 +1652,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 () {
@@ -1647,7 +1669,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 () {
@@ -1655,10 +1677,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"};
 
@@ -1690,7 +1713,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,
@@ -1702,6 +1725,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"};
 
@@ -1777,6 +1801,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 = {
@@ -1800,7 +1825,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,
@@ -1810,6 +1835,7 @@ var ModalPortal = function ModalPortal(_ref) {
 };
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
+var Portal$1 = ModalPortal;
 
 var propTypes$s = {
   id: PropTypes$1.string,
@@ -1836,7 +1862,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", {
@@ -1847,6 +1873,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"};
 
@@ -1894,7 +1921,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",
@@ -1903,13 +1930,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';
@@ -1978,6 +2006,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"};
 
@@ -2037,7 +2066,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,
@@ -2047,6 +2076,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"};
 
@@ -2073,7 +2103,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", {
@@ -2082,6 +2112,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"};
 
@@ -2122,7 +2153,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(FontAwesomeIcon, {
@@ -2138,6 +2169,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
 };
 CollapsablePanel.propTypes = propTypes$m;
 CollapsablePanel.defaultProps = defaultProps$m;
+var CollapsablePanel$1 = CollapsablePanel;
 
 var propTypes$l = {
   stroke: PropTypes$1.string,
@@ -2190,6 +2222,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 = {
@@ -2220,6 +2253,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 = {
@@ -2298,6 +2332,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"};
 
@@ -2339,6 +2374,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 */
 
@@ -2373,7 +2409,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[pascalCase(name)];
   if (!RealComponent) {
@@ -2385,6 +2421,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"};
 
@@ -2409,10 +2446,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 || {},
@@ -2495,6 +2533,7 @@ var FontFaces = function FontFaces(_ref4) {
 };
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
+var FontFaces$1 = FontFaces;
 
 var styles$f = {};
 
@@ -2541,10 +2580,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
@@ -3264,6 +3304,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"};
 
@@ -3332,6 +3373,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"};
 
@@ -3340,7 +3382,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
@@ -3349,13 +3391,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
@@ -3364,6 +3407,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) {
@@ -3372,7 +3416,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
@@ -3381,6 +3425,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"};
 
@@ -3429,6 +3474,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) {
@@ -3437,16 +3483,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) {
@@ -3454,7 +3501,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
@@ -3463,20 +3510,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)])
@@ -3494,10 +3543,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])
@@ -3507,33 +3557,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) {
@@ -3545,43 +3599,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
@@ -3590,6 +3647,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"};
 
@@ -3597,7 +3655,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)]),
@@ -3609,13 +3667,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
@@ -3627,6 +3686,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"};
 
@@ -3739,6 +3799,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"};
 
@@ -3837,7 +3898,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
@@ -3891,7 +3952,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,
@@ -3919,6 +3980,7 @@ var Conversation = function Conversation() {
     className: styles$5.icon
   }));
 };
+var Conversation$1 = Conversation;
 
 /* eslint-disable react/prop-types */
 var InputText = function InputText(_ref) {
@@ -3927,17 +3989,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,
@@ -3952,21 +4015,22 @@ var Answer$1 = function Answer(_ref) {
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: styles$4.answerIcon,
     icon: good ? faCheck : 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)]),
@@ -3988,6 +4052,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"};
 
@@ -3999,12 +4064,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", {
@@ -4014,31 +4079,32 @@ var Answer = function Answer(_ref) {
     icon: 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
+    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 */
@@ -4081,7 +4147,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);
   }
@@ -4092,6 +4158,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"};
 
@@ -4121,6 +4188,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"};
 
@@ -4393,6 +4461,7 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
 };
 TransitionsStagger.propTypes = propTypes$2;
 TransitionsStagger.defaultProps = defaultProps$2;
+var TransitionsStagger$1 = TransitionsStagger;
 
 var propTypes$1 = {
   selector: PropTypes$1.string,
@@ -4416,6 +4485,7 @@ var HighlightStyle = function HighlightStyle(_ref) {
 };
 HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
+var HighlightStyle$1 = HighlightStyle;
 
 var propTypes = {
   selector: PropTypes$1.string,
@@ -4439,5 +4509,6 @@ var LinkStyle = function LinkStyle(_ref) {
 };
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
+var LinkStyle$1 = LinkStyle;
 
-export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon, UploadModal };
+export { ArrowIcon$1 as ArrowIcon, BackButton$1 as BackButton, Breadcrumb$1 as Breadcrumb, Button$3 as Button, Buttons$1 as Buttons, Card$1 as Card, Close$1 as Close, CloseIcon$1 as CloseIcon, CollapsablePanel$1 as CollapsablePanel, Date$2 as Date, Detector$1 as Detector, Dropdown$1 as DropdownMenu, ElementComponent$1 as Element, Empty$1 as Empty, FieldForm$1 as FieldForm, FontFaces$1 as FontFaces, Form$1 as Form, FormPanel$1 as FormPanel, FullscreenIcon$1 as FullscreenIcon, HighlightStyle$1 as HighlightStyle, Label$1 as Label, Link$1 as Link, LinkIcon$1 as LinkIcon, LinkStyle$1 as LinkStyle, Media$1 as Media, Menu$1 as Menu, Meta$1 as Meta, Modal$1 as Modal, ModalDialog$1 as ModalDialog, Portal$1 as ModalPortal, Modals, MuteIcon$1 as MuteIcon, Navbar$1 as Navbar, PaginationMenu$1 as Pagination, Panel$1 as Panel, Portal as PanelPortal, Panels, PauseIcon$1 as PauseIcon, AdFrame$1 as PlaceholderAdFrame, AdImage$1 as PlaceholderAdImage, Audio$1 as PlaceholderAudio, Button$1 as PlaceholderButton, Image$1 as PlaceholderImage, Line$1 as PlaceholderLine, Map$1 as PlaceholderMap, MapPath$1 as PlaceholderMapPath, Quote$1 as PlaceholderQuote, ShortText$1 as PlaceholderShortText, Subtitle$1 as PlaceholderSubtitle, TextPlaceholder$1 as PlaceholderText, Timeline$1 as PlaceholderTimeline, Title$3 as PlaceholderTitle, Video$1 as PlaceholderVideo, Video360$1 as PlaceholderVideo360, VideoLoop$1 as PlaceholderVideoLoop, PlayIcon$1 as PlayIcon, Screen$1 as Screen, ScreenElement$1 as ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer$1 as ScreenSizer, Screens$1 as Screens, Slideshow$1 as Slideshow, Spinner$1 as Spinner, TabsMenu$1 as Tabs, Transitions, TransitionsStagger$1 as TransitionsStagger, UnmuteIcon$1 as UnmuteIcon, UploadModal$1 as UploadModal };