@micromag/core 0.3.178 → 0.3.182

package/lib/components.js

@@ -84,8 +84,6 @@ var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
-var styles$v = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
-
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$L = {
   children: core.PropTypes.label.isRequired,
@@ -111,7 +109,9 @@ var Label = function Label(_ref) {
 Label.propTypes = propTypes$L;
 Label.defaultProps = defaultProps$L;
 
-var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var styles$w = {"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"};
+
+var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$K = {
   type: PropTypes__default["default"].string,
   theme: core.PropTypes.buttonTheme,
@@ -133,6 +133,7 @@ var propTypes$K = {
   big: PropTypes__default["default"].bool,
   withShadow: PropTypes__default["default"].bool,
   withoutStyle: PropTypes__default["default"].bool,
+  withoutBootstrapStyles: PropTypes__default["default"].bool,
   withoutTheme: PropTypes__default["default"].bool,
   outline: PropTypes__default["default"].bool,
   asLink: PropTypes__default["default"].bool,
@@ -166,6 +167,7 @@ var defaultProps$K = {
   big: false,
   withShadow: false,
   withoutStyle: false,
+  withoutBootstrapStyles: false,
   withoutTheme: false,
   outline: false,
   asLink: false,
@@ -199,6 +201,7 @@ var Button$1 = function Button(_ref) {
       big = _ref.big,
       withShadow = _ref.withShadow,
       withoutStyle = _ref.withoutStyle,
+      withoutBootstrapStyles = _ref.withoutBootstrapStyles,
       withoutTheme = _ref.withoutTheme,
       asLink = _ref.asLink,
       outline = _ref.outline,
@@ -216,25 +219,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$v.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
+    className: classNames__default["default"]([styles$w.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$v.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$w.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$v.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames__default["default"]([styles$w.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$v.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$w.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$v.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames__default["default"]([styles$w.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
-  var buttonClassNames = classNames__default["default"]([(_ref7 = {
+  var buttonClassNames = classNames__default["default"]([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
-  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7), styles$v.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$v.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$v.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$v.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$v.withText, text !== null), _defineProperty__default["default"](_ref8, styles$v.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$v.isSmall, small), _defineProperty__default["default"](_ref8, styles$v.isBig, big), _defineProperty__default["default"](_ref8, styles$v.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$v.asLink, asLink), _defineProperty__default["default"](_ref8, styles$v.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$v.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$w.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$w.withText, text !== null), _defineProperty__default["default"](_ref8, styles$w.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$w.isSmall, small), _defineProperty__default["default"](_ref8, styles$w.isBig, big), _defineProperty__default["default"](_ref8, styles$w.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$w.asLink, asLink), _defineProperty__default["default"](_ref8, styles$w.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$w.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
-    }, styles$v.linkDisabled, disabled)]);
+    }, styles$w.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -264,7 +267,7 @@ var Button$1 = function Button(_ref) {
 Button$1.propTypes = propTypes$K;
 Button$1.defaultProps = defaultProps$K;
 
-var styles$u = {};
+var styles$v = {};
 
 var _excluded$9 = ["className", "onClick", "theme"];
 var propTypes$J = {
@@ -295,7 +298,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$u.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -310,7 +313,7 @@ var Buttons = function Buttons(_ref) {
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames__default["default"]([styles$u.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames__default["default"]([styles$v.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -354,7 +357,7 @@ var BackButton = function BackButton(_ref) {
 BackButton.propTypes = propTypes$I;
 BackButton.defaultProps = defaultProps$I;
 
-var styles$t = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var _excluded$7 = ["type"],
     _excluded2 = ["component", "id", "settings"];
@@ -640,7 +643,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement("form", {
     action: action,
-    className: classNames__default["default"]([styles$t.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$u.container, _defineProperty__default["default"]({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -650,7 +653,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$t.panel]),
+    className: classNames__default["default"](['w-100', styles$u.panel]),
     key: "field"
   }, /*#__PURE__*/React__default["default"].createElement(FieldForm, {
     name: fieldName,
@@ -666,11 +669,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames__default["default"]([styles$t.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames__default["default"]([styles$u.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$t.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$t[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames__default["default"]([styles$u.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$u[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -687,7 +690,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: buttons,
-    className: styles$t.buttons
+    className: styles$u.buttons
   }) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "submit",
     theme: "primary",
@@ -706,7 +709,7 @@ var Form = function Form(_ref) {
 Form.propTypes = propTypes$G;
 Form.defaultProps = defaultProps$G;
 
-var styles$s = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$F = {
@@ -739,12 +742,12 @@ var Link = function Link(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
 
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$s.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children)) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$s.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
@@ -979,7 +982,7 @@ var Spinner = function Spinner(_ref) {
 Spinner.propTypes = propTypes$D;
 Spinner.defaultProps = defaultProps$D;
 
-var styles$r = {};
+var styles$s = {};
 
 var _excluded$4 = ["description", "loading", "children", "className"];
 var propTypes$C = {
@@ -1003,14 +1006,14 @@ var FormPanel = function FormPanel(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
-    className: classNames__default["default"]([styles$r.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React__default["default"].createElement(Spinner, null) : children);
 };
 
 FormPanel.propTypes = propTypes$C;
 FormPanel.defaultProps = defaultProps$C;
 
-var styles$q = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
+var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
 var propTypes$B = {
   items: core.PropTypes.menuItems,
@@ -1039,7 +1042,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement("ol", {
-    className: classNames__default["default"]([styles$q.container, 'breadcrumb', 'mb-0', {
+    className: classNames__default["default"]([styles$r.container, 'breadcrumb', 'mb-0', {
       'p-0': withoutBar,
       'bg-transparent': withoutBar,
       'rounded-0': withoutBar,
@@ -1057,7 +1060,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: classNames__default["default"](['breadcrumb-item', (_ref3 = {
         active: active
-      }, _defineProperty__default["default"](_ref3, styles$q.arrow, separator === 'arrow'), _defineProperty__default["default"](_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, _defineProperty__default["default"](_ref3, styles$r.arrow, separator === 'arrow'), _defineProperty__default["default"](_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
       key: "item-".concat(index)
     }, active ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
       to: url,
@@ -1332,7 +1335,7 @@ var Menu = function Menu(_ref) {
 Menu.propTypes = propTypes$z;
 Menu.defaultProps = defaultProps$z;
 
-var styles$p = {"collapse":"micromag-core-menus-navbar-collapse"};
+var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
 
 var propTypes$y = {
   brand: PropTypes__default["default"].node,
@@ -1422,14 +1425,14 @@ var Navbar = function Navbar(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     className: "navbar-toggler-icon"
   })) : null, !withoutCollapse ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['navbar-collapse', 'collapse', styles$p.collapse, (_ref6 = {}, _defineProperty__default["default"](_ref6, collapseClassName, collapseClassName !== null), _defineProperty__default["default"](_ref6, "show", menuVisible), _ref6)])
+    className: classNames__default["default"](['navbar-collapse', 'collapse', styles$q.collapse, (_ref6 = {}, _defineProperty__default["default"](_ref6, collapseClassName, collapseClassName !== null), _defineProperty__default["default"](_ref6, "show", menuVisible), _ref6)])
   }, children) : children));
 };
 
 Navbar.propTypes = propTypes$y;
 Navbar.defaultProps = defaultProps$y;
 
-var styles$o = {};
+var styles$p = {};
 
 var messages = reactIntl.defineMessages({
   previous: {
@@ -1489,7 +1492,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
   });
 
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classNames__default["default"](['pagination', _defineProperty__default["default"]({}, paginationClassName, paginationClassName !== null)])
   }, withPreviousNext ? /*#__PURE__*/React__default["default"].createElement("li", {
@@ -1535,7 +1538,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
 PaginationMenu.propTypes = propTypes$x;
 PaginationMenu.defaultProps = defaultProps$x;
 
-var styles$n = {"container":"micromag-core-menus-tabs-container"};
+var styles$o = {"container":"micromag-core-menus-tabs-container"};
 
 var propTypes$w = {
   items: core.PropTypes.menuItems,
@@ -1565,22 +1568,22 @@ var TabsMenu = function TabsMenu(_ref) {
       className = _ref.className,
       onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$n.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: items,
     size: size,
     theme: theme,
     renderButton: renderItemButton,
     onClickButton: onClickItem,
-    className: styles$n.buttons,
-    buttonClassName: classNames__default["default"]([styles$n.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)])
+    className: styles$o.buttons,
+    buttonClassName: classNames__default["default"]([styles$o.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)])
   }));
 };
 
 TabsMenu.propTypes = propTypes$w;
 TabsMenu.defaultProps = defaultProps$w;
 
-var styles$m = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
+var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
 var propTypes$v = {
   modals: core.PropTypes.modals.isRequired,
@@ -1600,9 +1603,9 @@ var ModalsContainer = function ModalsContainer(_ref) {
     setModalsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$m.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$n.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$m.modals, _defineProperty__default["default"]({}, styles$m.hasModals, modals.length > 0)]),
+    className: classNames__default["default"]([styles$n.modals, _defineProperty__default["default"]({}, styles$n.hasModals, modals.length > 0)]),
     ref: containerRef
   }));
 };
@@ -1611,7 +1614,7 @@ ModalsContainer.propTypes = propTypes$v;
 ModalsContainer.defaultProps = defaultProps$v;
 var Modals = contexts.withModals(ModalsContainer);
 
-var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+var styles$m = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$u = {
@@ -1727,16 +1730,16 @@ var Modal = function Modal(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$l.container, _defineProperty__default["default"]({}, styles$l[position], position !== null)])
+    className: classNames__default["default"]([styles$m.container, _defineProperty__default["default"]({}, styles$m[position], position !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$l.inner, 'bg-dark'])
+    className: classNames__default["default"]([styles$m.inner, 'bg-dark'])
   }, children)));
 };
 
 Modal.propTypes = propTypes$s;
 Modal.defaultProps = defaultProps$s;
 
-var styles$k = {"container":"micromag-core-modals-dialog-container"};
+var styles$l = {"container":"micromag-core-modals-dialog-container"};
 
 var propTypes$r = {
   title: core.PropTypes.label,
@@ -1768,12 +1771,12 @@ var ModalDialog = function ModalDialog(_ref) {
       onClickClose = _ref.onClickClose,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-dialog', styles$k.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"](['modal-dialog', styles$l.container, _defineProperty__default["default"]({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-header', 'p-2', styles$k.header, {// 'bg-dark': theme === 'dark',
+    className: classNames__default["default"](['modal-header', 'p-2', styles$l.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1785,15 +1788,15 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-body', 'p-2', styles$k.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames__default["default"](['modal-body', 'p-2', styles$l.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
       // 'bg-dark': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-footer', styles$k.footer])
+    className: classNames__default["default"](['modal-footer', styles$l.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: buttons,
-    className: styles$k.buttons
+    className: styles$l.buttons
   }) : null) : null));
 };
 
@@ -1870,7 +1873,7 @@ var UploadModal = function UploadModal(_ref2) {
 UploadModal.propTypes = propTypes$q;
 UploadModal.defaultProps = defaultProps$q;
 
-var styles$j = {"container":"micromag-core-panels-container"};
+var styles$k = {"container":"micromag-core-panels-container"};
 
 var propTypes$p = {
   panels: core.PropTypes.panels,
@@ -1892,9 +1895,9 @@ var PanelsContainer = function PanelsContainer(_ref) {
     setPanelsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$j.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$k.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$j.panels, _defineProperty__default["default"]({}, styles$j.hasPanels, panels.length > 0)]),
+    className: classNames__default["default"]([styles$k.panels, _defineProperty__default["default"]({}, styles$k.hasPanels, panels.length > 0)]),
     ref: containerRef
   }));
 };
@@ -1946,7 +1949,7 @@ var PanelPortal = function PanelPortal(_ref) {
 PanelPortal.propTypes = propTypes$o;
 PanelPortal.defaultProps = defaultProps$o;
 
-var styles$i = {"container":"micromag-core-panels-panel-container"};
+var styles$j = {"container":"micromag-core-panels-panel-container"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$n = {
@@ -1976,14 +1979,14 @@ var Panel = function Panel(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$i.container
+    className: styles$j.container
   }, children));
 };
 
 Panel.propTypes = propTypes$n;
 Panel.defaultProps = defaultProps$n;
 
-var styles$h = {"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"};
+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"};
 
 var propTypes$m = {
   title: PropTypes__default["default"].node,
@@ -2024,21 +2027,21 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$h.isOpened, opened), _defineProperty__default["default"](_ref2, openedClassName, opened && openedClassName !== null), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+    className: classNames__default["default"]([styles$i.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$i.isOpened, opened), _defineProperty__default["default"](_ref2, openedClassName, opened && openedClassName !== null), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.top, _defineProperty__default["default"]({}, topClassName, topClassName !== null)])
+    className: classNames__default["default"]([styles$i.top, _defineProperty__default["default"]({}, topClassName, topClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     withoutStyle: true,
-    className: classNames__default["default"]([styles$h.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
+    className: classNames__default["default"]([styles$i.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
-      className: styles$h.icon
+      className: styles$i.icon
     }),
     iconPosition: "right",
-    labelClassName: styles$h.label,
+    labelClassName: styles$i.label,
     onClick: onClick
   }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.content, _defineProperty__default["default"]({}, contentClassName, contentClassName !== null)])
+    className: classNames__default["default"]([styles$i.content, _defineProperty__default["default"]({}, contentClassName, contentClassName !== null)])
   }, children));
 };
 
@@ -2219,7 +2222,7 @@ var Detector = function Detector(_ref) {
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
-var styles$g = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$h = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
 
 var propTypes$i = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -2248,9 +2251,9 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       boxClassName = _ref.boxClassName,
       children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$g.outline, outline), _ref2)])
+    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
+    className: classNames__default["default"]([styles$h.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
     style: {
       width: width,
       height: height
@@ -2313,7 +2316,7 @@ var ElementComponent = function ElementComponent(_ref) {
 ElementComponent.propTypes = propTypes$h;
 ElementComponent.defaultProps = defaultProps$h;
 
-var styles$f = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
+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"};
 
 var propTypes$g = {
   children: PropTypes__default["default"].node,
@@ -2336,9 +2339,9 @@ var Empty = function Empty(_ref) {
       light = _ref.light,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$f.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$f.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
+    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$g.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$f.middle
+    className: styles$g.middle
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, children)));
 };
 
@@ -2441,7 +2444,7 @@ var FontFaces = function FontFaces(_ref4) {
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
 
-var styles$e = {};
+var styles$f = {};
 
 var propTypes$e = {
   thumbnail: PropTypes__default["default"].node,
@@ -2474,19 +2477,19 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card', styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"](['card', styles$f.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames__default["default"](['me-3', styles$e.thumbnail, _defineProperty__default["default"]({
+    className: classNames__default["default"](['me-3', styles$f.thumbnail, _defineProperty__default["default"]({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
   }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-body', styles$e.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
+    className: classNames__default["default"](['card-body', styles$f.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
-    className: classNames__default["default"](['mt-0', 'text-truncate', styles$e.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
+    className: classNames__default["default"](['mt-0', 'text-truncate', styles$f.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children) : null);
 };
 
@@ -3035,7 +3038,7 @@ var pageMetadata = PropTypes__default["default"].shape({
   microformats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({}))
 });
 PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string,
+  name: textElement,
   avatar: PropTypes__default["default"].shape({
     url: PropTypes__default["default"].string
   })
@@ -3181,7 +3184,7 @@ var Meta = function Meta(_ref) {
 Meta.propTypes = propTypes$d;
 Meta.defaultProps = defaultProps$d;
 
-var styles$d = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
+var styles$e = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
 
 var propTypes$c = {
   items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].node),
@@ -3240,16 +3243,16 @@ var Slideshow = function Slideshow(_ref) {
     height: height
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
     style: style
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$d.items
+    className: styles$e.items
   }, items.map(function (it, i) {
     var _ref3;
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames__default["default"]([styles$d.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$d.prev, i < index), _defineProperty__default["default"](_ref3, styles$d.current, i === index), _defineProperty__default["default"](_ref3, styles$d.next, i > index), _ref3)])
+      className: classNames__default["default"]([styles$e.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$e.prev, i < index), _defineProperty__default["default"](_ref3, styles$e.current, i === index), _defineProperty__default["default"](_ref3, styles$e.next, i > index), _ref3)])
     }, it);
   })), children);
 };
@@ -3257,7 +3260,7 @@ var Slideshow = function Slideshow(_ref) {
 Slideshow.propTypes = propTypes$c;
 Slideshow.defaultProps = defaultProps$c;
 
-var styles$c = {"icon":"micromag-core-placeholders-icon"};
+var styles$d = {"icon":"micromag-core-placeholders-icon"};
 
 /* eslint-disable react/prop-types */
 var AdFrame = function AdFrame(_ref) {
@@ -3270,7 +3273,7 @@ var AdFrame = function AdFrame(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faAd.faAd,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
@@ -3285,7 +3288,7 @@ var AdImage = function AdImage(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
@@ -3302,11 +3305,11 @@ var Audio = function Audio(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faMusic.faMusic,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
-var styles$b = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$c = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$b = {
   lines: PropTypes__default["default"].number,
@@ -3335,11 +3338,11 @@ var PlaceholderText = function PlaceholderText(_ref) {
   var lineHeight = height !== null && isNumber__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '90%';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)])
   }, _toConsumableArray__default["default"](Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "line-".concat(index),
-      className: styles$b.line,
+      className: styles$c.line,
       style: {
         width: index % 2 === 0 ? width : oddWidth,
         height: lineHeight,
@@ -3382,38 +3385,38 @@ var Image = function Image(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Line = function Line(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.shortText]),
+    className: classNames__default["default"]([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 1
   }));
 };
 
-var styles$a = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
+var styles$b = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 var Map = function Map(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-    className: styles$a.icon
+    className: styles$b.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-    className: styles$a.icon
+    className: styles$b.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-    className: styles$a.icon
+    className: styles$b.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
@@ -3422,18 +3425,18 @@ var MapPath = function MapPath(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "70%",
-    className: classNames__default["default"]([props.className, styles$c.mapPath])
+    className: classNames__default["default"]([props.className, styles$d.mapPath])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faMapMarkedAlt.faMapMarkedAlt,
     size: "lg",
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Quote = function Quote(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.subtitle]),
+    className: classNames__default["default"]([props.className, styles$d.subtitle]),
     height: 0.5,
     lines: 6
   }));
@@ -3442,7 +3445,7 @@ var Quote = function Quote(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var ShortText = function ShortText(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.shortText]),
+    className: classNames__default["default"]([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 2
   }));
@@ -3451,7 +3454,7 @@ var ShortText = function ShortText(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Subtitle = function Subtitle(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.subtitle]),
+    className: classNames__default["default"]([props.className, styles$d.subtitle]),
     height: 0.3,
     lines: 1
   }));
@@ -3470,21 +3473,21 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames__default["default"]([props.className, styles$c.text])
+    className: classNames__default["default"]([props.className, styles$d.text])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Timeline = function Timeline(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.timeline])
+    className: classNames__default["default"]([props.className, styles$d.timeline])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title$1 = function Title(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$c.title]),
+    className: classNames__default["default"]([props.className, styles$d.title]),
     height: 0.5,
     lines: 2,
     lineMargin: 4
@@ -3502,11 +3505,11 @@ var Video = function Video(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faVideo.faVideo,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
-var styles$9 = {"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"};
+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"};
 
 var Video360 = function Video360(_ref) {
   var width = _ref.width,
@@ -3515,13 +3518,13 @@ var Video360 = function Video360(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    boxClassName: styles$9.box
+    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    boxClassName: styles$a.box
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faVideo.faVideo,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$9.label
+    className: styles$a.label
   }, "360"));
 };
 
@@ -3536,14 +3539,14 @@ var VideoLoop = function VideoLoop(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faPlay.faPlay,
-    className: styles$c.icon
+    className: styles$d.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faRedo.faRedo,
-    className: styles$c.icon
+    className: styles$d.icon
   }));
 };
 
-var styles$8 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
+var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
 var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 var propTypes$a = {
@@ -3640,16 +3643,16 @@ var ScreenSizer = function ScreenSizer(_ref) {
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    styles: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    styles: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
     ref: !hasSize ? refContainer : null
   }, hasFrameSize ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.frame,
+    className: styles$9.frame,
     style: {
       width: frameWidth,
       height: frameHeight
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.screen,
+    className: styles$9.screen,
     style: {
       width: screenWidth,
       height: screenHeight,
@@ -3666,7 +3669,7 @@ var ScreenSizer = function ScreenSizer(_ref) {
 ScreenSizer.propTypes = propTypes$a;
 ScreenSizer.defaultProps = defaultProps$a;
 
-var styles$7 = {"container":"micromag-core-screens-screen-container"};
+var styles$8 = {"container":"micromag-core-screens-screen-container"};
 
 var propTypes$9 = {
   screen: core.PropTypes.storyComponent.isRequired,
@@ -3713,7 +3716,7 @@ var Screen = function Screen(_ref) {
     renderContext: renderContext,
     screenState: screenState
   }, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$7.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
     active: active,
     current: current,
@@ -3727,7 +3730,7 @@ Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
 var Screen$1 = /*#__PURE__*/React__default["default"].memo(Screen);
 
-var styles$6 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
+var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
 
 var _excluded$1 = ["screen", "layout", "screenWidth", "screenHeight", "screenState", "withSize", "className"];
 var propTypes$8 = {
@@ -3763,7 +3766,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     renderContext: "placeholder",
     screenState: screenState,
     layout: layout,
-    className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
+    className: classNames__default["default"]([styles$7.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
   return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
@@ -3776,7 +3779,7 @@ ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder);
 
-var styles$5 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
+var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
@@ -3816,7 +3819,7 @@ var ScreenPreview = function ScreenPreview(_ref) {
     screenState: screenState,
     width: !withSize ? width : undefined,
     height: !withSize ? height : undefined,
-    className: classNames__default["default"]([styles$5.screen, _defineProperty__default["default"]({}, className, !withSize)])
+    className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
   }, props));
   var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
     className: className,
@@ -3832,19 +3835,19 @@ ScreenPreview.propTypes = propTypes$7;
 ScreenPreview.defaultProps = defaultProps$7;
 var Preview = /*#__PURE__*/React__default["default"].memo(ScreenPreview);
 
-var styles$4 = {"container":"micromag-core-placeholders-conversation-container","icon":"micromag-core-placeholders-conversation-icon","message":"micromag-core-placeholders-conversation-message","placeholderMessage0":"micromag-core-placeholders-conversation-placeholderMessage0","placeholderMessage1":"micromag-core-placeholders-conversation-placeholderMessage1","placeholderMessage2":"micromag-core-placeholders-conversation-placeholderMessage2","placeholderMessage3":"micromag-core-placeholders-conversation-placeholderMessage3"};
+var styles$5 = {"container":"micromag-core-placeholders-conversation-container","icon":"micromag-core-placeholders-conversation-icon","message":"micromag-core-placeholders-conversation-message","placeholderMessage0":"micromag-core-placeholders-conversation-placeholderMessage0","placeholderMessage1":"micromag-core-placeholders-conversation-placeholderMessage1","placeholderMessage2":"micromag-core-placeholders-conversation-placeholderMessage2","placeholderMessage3":"micromag-core-placeholders-conversation-placeholderMessage3"};
 
 var Conversation = function Conversation() {
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4.container
+    className: styles$5.container
   }, _toConsumableArray__default["default"](Array(4)).map(function (e, idx) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "message-".concat(idx + 1),
-      className: classNames__default["default"]([styles$4.message, styles$4["placeholderMessage".concat(idx)]])
+      className: classNames__default["default"]([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
     });
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCommentDots.faCommentDots,
-    className: styles$4.icon
+    className: styles$5.icon
   }));
 };
 
@@ -3863,7 +3866,7 @@ var InputText = function InputText(_ref) {
   });
 };
 
-var styles$3 = {"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 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 _ref2;
@@ -3876,38 +3879,47 @@ var Answer$1 = function Answer(_ref) {
       _ref$good = _ref.good,
       good = _ref$good === void 0 ? true : _ref$good;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$3.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$3.good, good), _ref2)])
+    className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$4.good, good), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3.answer
+    className: styles$4.answer
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    className: styles$3.answerIcon,
+    className: styles$4.answerIcon,
     icon: good ? faCheck.faCheck : faTimes.faTimes
   })), /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
-    className: styles$3.block
+    className: styles$4.block
   }, /*#__PURE__*/React__default["default"].createElement(PlaceholderText, {
     line: 1,
     height: "0.2em"
   })));
 };
 
+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"};
+
 var Title = function Title(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, props.className, props.className !== null)]),
+    boxClassName: styles$3.box
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
-    className: styles$c.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$3.icon
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
-    className: styles$c.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$3.icon
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
-    className: styles$c.icon
-  }));
+    className: styles$3.icon
+  })));
 };
 
 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"};