@micromag/core 0.4.48 → 0.4.50

package/es/components.js

@@ -1,4 +1,5 @@
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -7,11 +8,11 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Link as Link$1 } from 'wouter';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
+import React, { useCallback, useState, useEffect, useRef, createElement, useMemo } from 'react';
 import dayjs from 'dayjs';
 import throttle from 'lodash/throttle';
 import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver, useDevicePixelRatio } from '@micromag/core/hooks';
@@ -41,7 +42,6 @@ import { getSizeWithinBounds } from '@folklore/size';
 import { useSpringRef, useSpring } from '@react-spring/core';
 import { config, animated } from '@react-spring/web';
 
-/* eslint-disable react/jsx-props-no-spreading */
 var emptyObject$2 = {};
 function Label(_ref) {
   var children = _ref.children,
@@ -50,7 +50,7 @@ function Label(_ref) {
     _ref$values = _ref.values,
     values = _ref$values === void 0 ? emptyObject$2 : _ref$values;
   var Message = isHtml ? FormattedMessage : FormattedMessage;
-  return isMessage(children) ? /*#__PURE__*/React.createElement(Message, Object.assign({
+  return isMessage(children) ? /*#__PURE__*/jsx(Message, _objectSpread({
     values: values
   }, children)) : children;
 }
@@ -120,22 +120,35 @@ function Button$1(_ref) {
     refButton = _ref$refButton === void 0 ? null : _ref$refButton,
     props = _objectWithoutProperties(_ref, _excluded$c);
   var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
+  var text = finalLabel !== null ? /*#__PURE__*/jsx(Label, {
+    children: finalLabel
+  }) : null;
   var hasChildren = label !== null && children !== null;
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
-  var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.icon, iconClassName])
-  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.label, labelClassName])
-  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.left, iconPosition === 'left' ? iconClassName : null])
-  }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.center, labelClassName])
-  }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.right, iconPosition === 'right' ? iconClassName : null])
-  }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
+  var content = /*#__PURE__*/jsxs(Fragment, {
+    children: [hasInlineIcon ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("span", {
+        className: classNames([styles$y.icon, iconClassName]),
+        children: icon
+      }), text !== null ? /*#__PURE__*/jsx("span", {
+        className: classNames([styles$y.label, labelClassName]),
+        children: text
+      }) : null]
+    }) : null, hasIconColumns ? /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx("span", {
+        className: classNames([styles$y.left, iconPosition === 'left' ? iconClassName : null]),
+        children: iconPosition === 'left' ? icon : null
+      }), /*#__PURE__*/jsx("span", {
+        className: classNames([styles$y.center, labelClassName]),
+        children: text
+      }), /*#__PURE__*/jsx("span", {
+        className: classNames([styles$y.right, iconPosition === 'right' ? iconClassName : null]),
+        children: iconPosition === 'right' ? icon : null
+      }), hasChildren ? children : null]
+    }) : null, !hasIcon ? text : null, hasChildren ? children : null]
+  });
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
     btn: withStyle
@@ -144,29 +157,32 @@ function Button$1(_ref) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
     }, styles$y.linkDisabled, disabled)]);
-    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
+    return external || direct ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({}, props), {}, {
       href: disabled ? null : href,
       className: linkClassNames,
       onClick: onClick,
       target: external ? target : null,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(Link$1, {
+      tabIndex: focusable ? '' : '-1',
+      children: content
+    })) : /*#__PURE__*/jsx(Link$1, {
       href: href,
       className: linkClassNames,
       onClick: onClick,
       ref: refButton,
-      tabIndex: focusable ? '' : '-1'
-    }, content);
+      tabIndex: focusable ? '' : '-1',
+      children: content
+    });
   }
-  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
+  return /*#__PURE__*/jsx("button", _objectSpread(_objectSpread({}, props), {}, {
     type: type,
     className: buttonClassNames,
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
     ref: refButton,
-    tabIndex: focusable ? '0' : '-1'
-  }), content);
+    tabIndex: focusable ? '0' : '-1',
+    children: content
+  }));
 }
 
 var styles$x = {"container":"micromag-core-buttons-container"};
@@ -188,38 +204,37 @@ function Buttons(_ref) {
     buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, className]),
-    role: "group"
-  }, buttons.map(function (button, index) {
-    var id = button.id;
-      button.name;
-      var _button$className = button.className,
-      customClassName = _button$className === void 0 ? null : _button$className,
-      _button$onClick = button.onClick,
-      _onClick = _button$onClick === void 0 ? null : _button$onClick,
-      _button$theme = button.theme,
-      buttonTheme = _button$theme === void 0 ? null : _button$theme,
-      buttonProps = _objectWithoutProperties(button, _excluded$b);
-    var fixedProps = {
-      className: classNames([styles$x.button, customClassName, buttonClassName, {}]),
-      onClick: function onClick(e) {
-        if (_onClick !== null) {
-          _onClick(e, button, index);
-        }
-        if (onClickButton !== null) {
-          onClickButton(e, button, index);
-        }
-      },
-      theme: buttonTheme || theme
-    };
-    var buttonKey = id || "button-".concat(index);
-    return renderButton !== null ? renderButton(button, index, _objectSpread({
-      key: buttonKey
-    }, fixedProps)) : /*#__PURE__*/React.createElement(Button$1, Object.assign({
-      key: buttonKey
-    }, fixedProps, buttonProps));
-  }));
+    role: "group",
+    children: buttons.map(function (button, index) {
+      var id = button.id;
+        button.name;
+        var _button$className = button.className,
+        customClassName = _button$className === void 0 ? null : _button$className,
+        _button$onClick = button.onClick,
+        _onClick = _button$onClick === void 0 ? null : _button$onClick,
+        _button$theme = button.theme,
+        buttonTheme = _button$theme === void 0 ? null : _button$theme,
+        buttonProps = _objectWithoutProperties(button, _excluded$b);
+      var fixedProps = {
+        className: classNames([styles$x.button, customClassName, buttonClassName, {}]),
+        onClick: function onClick(e) {
+          if (_onClick !== null) {
+            _onClick(e, button, index);
+          }
+          if (onClickButton !== null) {
+            onClickButton(e, button, index);
+          }
+        },
+        theme: buttonTheme || theme
+      };
+      var buttonKey = id || "button-".concat(index);
+      return renderButton !== null ? renderButton(button, index, _objectSpread({
+        key: buttonKey
+      }, fixedProps)) : /*#__PURE__*/jsx(Button$1, _objectSpread(_objectSpread({}, fixedProps), buttonProps), buttonKey);
+    })
+  });
 }
 
 var _excluded$a = ["className"];
@@ -227,10 +242,10 @@ function BackButton(_ref) {
   var _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
+  return /*#__PURE__*/jsx(Button$1, _objectSpread({
     className: classNames(['px-2', className]),
     size: "sm",
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
       icon: faAngleLeft,
       size: "lg"
     })
@@ -246,13 +261,15 @@ function ClearButton(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/React.createElement("button", Object.assign({
+  return /*#__PURE__*/jsx("button", _objectSpread(_objectSpread({
     className: classNames([styles$w.container, className]),
     onClick: onClick
-  }, props), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$w.icon,
-    icon: faClose,
-    size: "md"
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      className: styles$w.icon,
+      icon: faClose,
+      size: "md"
+    })
   }));
 }
 
@@ -318,25 +335,27 @@ function FieldForm(_ref) {
     closeForm: closeForm
   };
   if (form !== null) {
-    return FormComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
-      context: fieldContext
-    }, /*#__PURE__*/React.createElement(FormComponent, Object.assign({
-      field: field
-    }, formProps, {
-      className: className
-    }))) : null;
+    return FormComponent !== null ? /*#__PURE__*/jsx(FieldContextProvider, {
+      context: fieldContext,
+      children: /*#__PURE__*/jsx(FormComponent, _objectSpread(_objectSpread({
+        field: field
+      }, formProps), {}, {
+        className: className
+      }))
+    }) : null;
   }
   var _ref4 = parentField || {},
     itemsProps = _ref4.itemsProps;
 
   // Use field component with isForm props
-  return FieldComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
-    context: fieldContext
-  }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
-    className: className
-  }, definitionProps, fieldProps, itemsProps, {
-    isForm: true
-  }, formProps))) : null;
+  return FieldComponent !== null ? /*#__PURE__*/jsx(FieldContextProvider, {
+    context: fieldContext,
+    children: /*#__PURE__*/jsx(FieldComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+      className: className
+    }, definitionProps), fieldProps), itemsProps), {}, {
+      isForm: true
+    }, formProps))
+  }) : null;
 }
 
 var styles$v = {"container":"micromag-core-forms-form-container","panel":"micromag-core-forms-form-panel","actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
@@ -353,7 +372,7 @@ function Form(_ref) {
     _ref$postForm = _ref.postForm,
     postForm = _ref$postForm === void 0 ? null : _ref$postForm,
     _ref$submitButtonLabe = _ref.submitButtonLabel,
-    submitButtonLabel = _ref$submitButtonLabe === void 0 ? /*#__PURE__*/React.createElement(FormattedMessage, {
+    submitButtonLabel = _ref$submitButtonLabe === void 0 ? /*#__PURE__*/jsx(FormattedMessage, {
       id: "ZLDmja",
       defaultMessage: [{
         "type": 0,
@@ -480,72 +499,79 @@ function Form(_ref) {
   //     styles,
   // );
 
-  return /*#__PURE__*/React.createElement("form", {
+  return /*#__PURE__*/jsxs("form", {
     action: action,
     className: classNames([styles$v.container, className, {
       // 'was-validated': status !== null,
     }]),
     method: method,
-    onSubmit: onSubmit
-  }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: "mb-2"
-  }, /*#__PURE__*/React.createElement(BackButton, {
-    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, {
-    name: fieldName,
-    fields: fields,
-    value: value,
-    onChange: setValue,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    fieldContext: fieldContext
-  })) : null, FieldsComponent && fields !== null && fields.length > 0 && fieldParams === null ? /*#__PURE__*/React.createElement(FieldsComponent, {
-    fields: fields,
-    value: value,
-    errors: errors,
-    onChange: setValue,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    className: classNames([styles$v.fields, fieldsClassName])
-  }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
-    className: "text-danger my-1"
-  }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$v.actions, actionsClassName, _defineProperty({}, styles$v[actionsAlign], actionsAlign)])
-  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
-    type: "button",
-    onClick: onCancel,
-    href: onCancelHref,
-    theme: cancelButtonTheme || 'secondary',
-    outline: true,
-    disabled: status === 'loading',
-    className: classNames(['me-2', cancelClassName])
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "PyxZY2",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cancel"
-    }]
-  })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    buttons: buttons,
-    className: styles$v.buttons
-  }) : /*#__PURE__*/React.createElement(Button$1, {
-    type: "submit",
-    theme: submitButtonTheme || 'primary',
-    disabled: status === 'loading' || !canSave
-  }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React.createElement("p", {
-    className: "text-success mx-2 my-1"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
-    id: "BpZoQZ",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Success"
-    }]
-  })) : null) : null);
+    onSubmit: onSubmit,
+    children: [!withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/jsx("div", {
+      className: "mb-2",
+      children: /*#__PURE__*/jsx(BackButton, {
+        theme: "secondary",
+        outline: true,
+        onClick: closeFieldForm
+      })
+    }) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/jsx("div", {
+      className: classNames(['w-100', styles$v.panel]),
+      children: /*#__PURE__*/jsx(FieldForm, {
+        name: fieldName,
+        fields: fields,
+        value: value,
+        onChange: setValue,
+        gotoFieldForm: gotoFieldForm,
+        closeFieldForm: closeFieldForm,
+        fieldContext: fieldContext
+      })
+    }, "field") : null, FieldsComponent && fields !== null && fields.length > 0 && fieldParams === null ? /*#__PURE__*/jsx(FieldsComponent, {
+      fields: fields,
+      value: value,
+      errors: errors,
+      onChange: setValue,
+      gotoFieldForm: gotoFieldForm,
+      closeFieldForm: closeFieldForm,
+      className: classNames([styles$v.fields, fieldsClassName])
+    }) : null, generalError ? /*#__PURE__*/jsx("p", {
+      className: "text-danger my-1",
+      children: generalError
+    }) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/jsxs("div", {
+      className: classNames([styles$v.actions, actionsClassName, _defineProperty({}, styles$v[actionsAlign], actionsAlign)]),
+      children: [onCancel !== null || onCancelHref !== null ? /*#__PURE__*/jsx(Button$1, {
+        type: "button",
+        onClick: onCancel,
+        href: onCancelHref,
+        theme: cancelButtonTheme || 'secondary',
+        outline: true,
+        disabled: status === 'loading',
+        className: classNames(['me-2', cancelClassName]),
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "PyxZY2",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Cancel"
+          }]
+        })
+      }) : null, buttons !== null ? /*#__PURE__*/jsx(Buttons, {
+        buttons: buttons,
+        className: styles$v.buttons
+      }) : /*#__PURE__*/jsx(Button$1, {
+        type: "submit",
+        theme: submitButtonTheme || 'primary',
+        disabled: status === 'loading' || !canSave,
+        children: status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel
+      }), complete ? /*#__PURE__*/jsx("p", {
+        className: "text-success mx-2 my-1",
+        children: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "BpZoQZ",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Success"
+          }]
+        })
+      }) : null]
+    }) : null]
+  });
 }
 
 var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
@@ -567,15 +593,23 @@ function Link(_ref) {
     _ref$withoutStyle = _ref.withoutStyle,
     withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
     props = _objectWithoutProperties(_ref, _excluded$7);
-  return external ? /*#__PURE__*/React.createElement("a", Object.assign({
+  return external ? /*#__PURE__*/jsx("a", _objectSpread(_objectSpread({
     className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
-  }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(Link$1, Object.assign({
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Label, {
+      children: children
+    })
+  })) : /*#__PURE__*/jsx(Link$1, _objectSpread(_objectSpread({
     className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     href: href
-  }, props), /*#__PURE__*/React.createElement(Label, null, children));
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Label, {
+      children: children
+    })
+  }));
 }
 
 var _excluded$6 = ["label", "className"];
@@ -633,62 +667,89 @@ 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({
-      key: "link-".concat(label, "-").concat(index),
+    return /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({
       className: classNames(['card-link', linkClassName])
-    }, linkProps), label);
+    }, linkProps), {}, {
+      children: label
+    }), "link-".concat(label, "-").concat(index));
+  });
+  var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/jsxs(Fragment, {
+    children: [title !== null ? /*#__PURE__*/jsx("h5", {
+      className: classNames(['card-title', titleClassName]),
+      children: /*#__PURE__*/jsx(Label, {
+        children: title
+      })
+    }) : null, subtitle !== null ? /*#__PURE__*/jsx("h6", {
+      className: classNames(['card-subtitle', subtitleClassName]),
+      children: /*#__PURE__*/jsx(Label, {
+        children: subtitle
+      })
+    }) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/jsx("div", {
+      className: "d-flex",
+      children: linksElements
+    }) : null]
+  }) : null;
+  var cardInner = /*#__PURE__*/jsxs(Fragment, {
+    children: [header !== null ? /*#__PURE__*/jsx("div", {
+      className: classNames(['card-header', headerClassName]),
+      children: /*#__PURE__*/jsx(Label, {
+        children: header
+      })
+    }) : null, typeof image === 'string' ? /*#__PURE__*/jsx("img", {
+      src: image,
+      alt: imageAlt,
+      className: classNames(['card-img-top', imageClassName])
+    }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: classNames([bodyClassName, {
+        'card-body': !imageOverlay,
+        'card-img-overlay': imageOverlay
+      }]),
+      onClick: onClickBody,
+      children: bodyInner
+    }) : /*#__PURE__*/jsx("div", {
+      className: classNames([bodyClassName, {
+        'card-body': !imageOverlay,
+        'card-img-overlay': imageOverlay
+      }]),
+      children: bodyInner
+    }) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/jsx("div", {
+      className: "card-body",
+      children: linksElements
+    }) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: classNames(['card-footer', footerClassName]),
+      onClick: onClickFooter,
+      children: /*#__PURE__*/jsx(Label, {
+        children: footer
+      })
+    }) : /*#__PURE__*/jsx("div", {
+      className: classNames(['card-footer', footerClassName]),
+      children: /*#__PURE__*/jsx(Label, {
+        children: footer
+      })
+    }) : null]
   });
-  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', titleClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
-    className: classNames(['card-subtitle', subtitleClassName])
-  }, /*#__PURE__*/React.createElement(Label, 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', headerClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: imageAlt,
-    className: classNames(['card-img-top', imageClassName])
-  }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames([bodyClassName, {
-      'card-body': !imageOverlay,
-      'card-img-overlay': imageOverlay
-    }]),
-    onClick: onClickBody
-  }, bodyInner) : /*#__PURE__*/React.createElement("div", {
-    className: classNames([bodyClassName, {
-      'card-body': !imageOverlay,
-      'card-img-overlay': imageOverlay
-    }])
-  }, bodyInner) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/React.createElement("div", {
-    className: "card-body"
-  }, linksElements) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: classNames(['card-footer', footerClassName]),
-    onClick: onClickFooter
-  }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-footer', footerClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
   var cardClassName = classNames(['card', _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]);
   if (href !== null) {
-    return /*#__PURE__*/React.createElement(Link, {
+    return /*#__PURE__*/jsx(Link, {
       href: href,
-      className: cardClassName
-    }, cardInner);
+      className: cardClassName,
+      children: cardInner
+    });
   }
   if (onClick !== null) {
-    return /*#__PURE__*/React.createElement("button", {
+    return /*#__PURE__*/jsx("button", {
       type: "button",
       className: classNames(['p-0', 'text-start', cardClassName]),
-      onClick: onClick
-    }, cardInner);
+      onClick: onClick,
+      children: cardInner
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: cardClassName
-  }, cardInner);
+  return /*#__PURE__*/jsx("div", {
+    className: cardClassName,
+    children: cardInner
+  });
 }
 
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated"};
@@ -702,21 +763,22 @@ function Spinner(_ref) {
     strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     className: classNames([styles$t.container, className, _defineProperty({}, styles$t.animated, animated)]),
     width: "40",
     height: "40",
     viewBox: "0 0 40 40",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    className: styles$t.path,
-    cx: "20",
-    cy: "20",
-    r: "12",
-    fill: "none",
-    stroke: color,
-    strokeWidth: strokeWidth
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/jsx("circle", {
+      className: styles$t.path,
+      cx: "20",
+      cy: "20",
+      r: "12",
+      fill: "none",
+      stroke: color,
+      strokeWidth: strokeWidth
+    })
+  });
 }
 
 var styles$s = {"container":"micromag-core-forms-form-panel-container"};
@@ -732,9 +794,11 @@ function FormPanel(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/React.createElement(Card, Object.assign({
+  return /*#__PURE__*/jsxs(Card, _objectSpread(_objectSpread({
     className: classNames([styles$s.container, className])
-  }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
+  }, props), {}, {
+    children: [description, loading ? /*#__PURE__*/jsx(Spinner, {}) : children]
+  }));
 }
 
 function ArrowIcon(_ref) {
@@ -742,19 +806,20 @@ function ArrowIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     width: "20",
     height: "14",
     viewBox: "0 0 20 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M13.353 0.371014L19.319 6.33704C19.6851 6.70314 19.6851 7.29671 19.319 7.66282L13.353 13.6288C12.9869 13.9949 12.3933 13.9949 12.0272 13.6288C11.6611 13.2627 11.6611 12.6692 12.0272 12.3031L16.3929 7.9374H0V6.06246H16.3929L12.0272 1.6968C11.6611 1.33069 11.6611 0.737119 12.0272 0.371014C12.3933 0.0049094 12.9869 0.0049094 13.353 0.371014Z",
-    fill: color
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M13.353 0.371014L19.319 6.33704C19.6851 6.70314 19.6851 7.29671 19.319 7.66282L13.353 13.6288C12.9869 13.9949 12.3933 13.9949 12.0272 13.6288C11.6611 13.2627 11.6611 12.6692 12.0272 12.3031L16.3929 7.9374H0V6.06246H16.3929L12.0272 1.6968C11.6611 1.33069 11.6611 0.737119 12.0272 0.371014C12.3933 0.0049094 12.9869 0.0049094 13.353 0.371014Z",
+      fill: color
+    })
+  });
 }
 
 function CloseIcon(_ref) {
@@ -762,24 +827,25 @@ function CloseIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     width: "22",
     height: "22",
     viewBox: "0 0 22 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M1 1L21 21",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M1 21L21 0.999998",
-    stroke: color,
-    strokeWidth: "1.5",
-    strokeLinecap: "round"
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M1 1L21 21",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M1 21L21 0.999998",
+      stroke: color,
+      strokeWidth: "1.5",
+      strokeLinecap: "round"
+    })]
+  });
 }
 
 function FullscreenIcon(_ref) {
@@ -787,17 +853,18 @@ function FullscreenIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     width: "16",
     height: "14",
     viewBox: "0 0 16 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
-    fill: color
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx("path", {
+      d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
+      fill: color
+    })
+  });
 }
 
 function LinkIcon(_ref) {
@@ -805,26 +872,27 @@ function LinkIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
-    stroke: color,
-    strokeWidth: "1.25",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
-    stroke: color,
-    strokeWidth: "1.25",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
+      stroke: color,
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
+      stroke: color,
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
 }
 
 function MuteIcon(_ref) {
@@ -832,23 +900,24 @@ function MuteIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     width: "26",
     height: "26",
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M18 18.6875C21.3137 18.6875 24 16.0012 24 12.6875C24 9.37379 21.3137 6.6875 18 6.6875",
-    stroke: color
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
-    stroke: color
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+      fill: color
+    }), /*#__PURE__*/jsx("path", {
+      d: "M18 18.6875C21.3137 18.6875 24 16.0012 24 12.6875C24 9.37379 21.3137 6.6875 18 6.6875",
+      stroke: color
+    }), /*#__PURE__*/jsx("path", {
+      d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
+      stroke: color
+    })]
+  });
 }
 
 function PauseIcon(_ref) {
@@ -856,25 +925,26 @@ function PauseIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     className: className,
     width: "14",
     height: "18",
     viewBox: "0 0 14 18",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("rect", {
-    width: "6",
-    height: "18",
-    rx: "2",
-    fill: color
-  }), /*#__PURE__*/React.createElement("rect", {
-    x: "8",
-    width: "6",
-    height: "18",
-    rx: "2",
-    fill: color
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/jsx("rect", {
+      width: "6",
+      height: "18",
+      rx: "2",
+      fill: color
+    }), /*#__PURE__*/jsx("rect", {
+      x: "8",
+      width: "6",
+      height: "18",
+      rx: "2",
+      fill: color
+    })]
+  });
 }
 
 function PlayIcon(_ref) {
@@ -882,18 +952,19 @@ function PlayIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     width: "40",
     height: "45.1",
     viewBox: "0 0 40 45.1",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
-    fill: color,
-    stroke: color
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx("path", {
+      d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
+      fill: color,
+      stroke: color
+    })
+  });
 }
 
 function UnmuteIcon(_ref) {
@@ -901,22 +972,23 @@ function UnmuteIcon(_ref) {
     color = _ref$color === void 0 ? '#fff' : _ref$color,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsxs("svg", {
     width: "26",
     height: "26",
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    className: className
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
-    fill: color
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M20.8536 13.3946L23 15.5411L23.7071 14.834L21.5607 12.6875L23.7071 10.5411L23 9.83398L20.8536 11.9804L18.7071 9.83398L18 10.5411L20.1464 12.6875L18 14.834L18.7071 15.5411L20.8536 13.3946Z",
-    fill: color
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+      fill: color
+    }), /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20.8536 13.3946L23 15.5411L23.7071 14.834L21.5607 12.6875L23.7071 10.5411L23 9.83398L20.8536 11.9804L18.7071 9.83398L18 10.5411L20.1464 12.6875L18 14.834L18.7071 15.5411L20.8536 13.3946Z",
+      fill: color
+    })]
+  });
 }
 
 var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
@@ -935,36 +1007,46 @@ function Breadcrumb(_ref) {
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("nav", {
-    className: className
-  }, /*#__PURE__*/React.createElement("ol", {
-    className: classNames([styles$r.container, 'breadcrumb', 'mb-0', {
-      'p-0': withoutBar,
-      'bg-transparent': withoutBar,
-      'rounded-0': withoutBar,
-      'flex-nowrap': noWrap
-    }])
-  }, items.map(function (_ref2, index) {
-    var url = _ref2.url,
-      label = _ref2.label,
-      _ref2$active = _ref2.active,
-      active = _ref2$active === void 0 ? false : _ref2$active,
-      _ref2$onClick = _ref2.onClick,
-      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
-    return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
-        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, {
-      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, {
-      onClick: onClick,
-      className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
-    }, /*#__PURE__*/React.createElement(Label, null, label)) : null);
-  })));
+  return /*#__PURE__*/jsx("nav", {
+    className: className,
+    children: /*#__PURE__*/jsx("ol", {
+      className: classNames([styles$r.container, 'breadcrumb', 'mb-0', {
+        'p-0': withoutBar,
+        'bg-transparent': withoutBar,
+        'rounded-0': withoutBar,
+        'flex-nowrap': noWrap
+      }]),
+      children: items.map(function (_ref2, index) {
+        var url = _ref2.url,
+          label = _ref2.label,
+          _ref2$active = _ref2.active,
+          active = _ref2$active === void 0 ? false : _ref2$active,
+          _ref2$onClick = _ref2.onClick,
+          onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
+        return /*#__PURE__*/jsxs("li", {
+          className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
+            active: active
+          }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
+          children: [active ? /*#__PURE__*/jsx(Label, {
+            children: label
+          }) : null, !active && url ? /*#__PURE__*/jsx(Link$1, {
+            href: url,
+            onClick: onClick,
+            className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)]),
+            children: /*#__PURE__*/jsx(Label, {
+              children: label
+            })
+          }) : null, !active && onClick ? /*#__PURE__*/jsx(Button$1, {
+            onClick: onClick,
+            className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)]),
+            children: /*#__PURE__*/jsx(Label, {
+              children: label
+            })
+          }) : null]
+        }, "item-".concat(index));
+      })
+    })
+  });
 }
 
 var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
@@ -1007,53 +1089,58 @@ function Dropdown(_ref) {
       clearTimeout(id);
     };
   }, [visible, setEnabled]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames(['dropdown-menu', _defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className]),
-    ref: refContainer
-  }, children !== null ? children : items.map(function (it, index) {
-    var _it$type = it.type,
-      type = _it$type === void 0 ? 'link' : _it$type,
-      _it$className = it.className,
-      customClassName = _it$className === void 0 ? null : _it$className,
-      _it$label = it.label,
-      label = _it$label === void 0 ? null : _it$label,
-      _it$children = it.children,
-      itemChildren = _it$children === void 0 ? null : _it$children,
-      _it$onClick = it.onClick,
-      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-      _it$active = it.active,
-      active = _it$active === void 0 ? false : _it$active,
-      itemProps = _objectWithoutProperties(it, _excluded$4);
-    var ItemComponent = 'div';
-    if (type === 'link') {
-      ItemComponent = Link;
-    } else if (type === 'button') {
-      ItemComponent = 'button';
-    } else if (type === 'header') {
-      ItemComponent = 'h6';
-    } else if (type === 'divider') {
-      ItemComponent = 'hr';
-    }
-    var finalOnClickItem = customOnClick !== null || type === 'link' && onClickItem !== null ? function (e) {
-      if (customOnClick !== null) {
-        customOnClick(e);
-      }
-      if (type === 'link' && onClickItem !== null) {
-        onClickItem(e);
+    ref: refContainer,
+    children: children !== null ? children : items.map(function (it, index) {
+      var _it$type = it.type,
+        type = _it$type === void 0 ? 'link' : _it$type,
+        _it$className = it.className,
+        customClassName = _it$className === void 0 ? null : _it$className,
+        _it$label = it.label,
+        label = _it$label === void 0 ? null : _it$label,
+        _it$children = it.children,
+        itemChildren = _it$children === void 0 ? null : _it$children,
+        _it$onClick = it.onClick,
+        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+        _it$active = it.active,
+        active = _it$active === void 0 ? false : _it$active,
+        itemProps = _objectWithoutProperties(it, _excluded$4);
+      var ItemComponent = 'div';
+      if (type === 'link') {
+        ItemComponent = Link;
+      } else if (type === 'button') {
+        ItemComponent = 'button';
+      } else if (type === 'header') {
+        ItemComponent = 'h6';
+      } else if (type === 'divider') {
+        ItemComponent = 'hr';
       }
-    } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
-      key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
-    }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
-      className: classNames([customClassName, itemClassName, {
-        'dropdown-item': type === 'link' || type === 'button',
-        'dropdown-divider': type === 'divider',
-        'dropdown-header': type === 'header',
-        active: active
-      }]),
-      onClick: finalOnClickItem
-    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
-  }));
+      var finalOnClickItem = customOnClick !== null || type === 'link' && onClickItem !== null ? function (e) {
+        if (customOnClick !== null) {
+          customOnClick(e);
+        }
+        if (type === 'link' && onClickItem !== null) {
+          onClickItem(e);
+        }
+      } : null;
+      return ItemComponent !== null ? /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(ItemComponent, _objectSpread(_objectSpread({
+          className: classNames([customClassName, itemClassName, {
+            'dropdown-item': type === 'link' || type === 'button',
+            'dropdown-divider': type === 'divider',
+            'dropdown-header': type === 'header',
+            active: active
+          }]),
+          onClick: finalOnClickItem
+        }, itemProps), {}, {
+          children: label !== null ? /*#__PURE__*/jsx(Label, {
+            children: label
+          }) : itemChildren
+        }))
+      }, "item-".concat(index + 1, "-").concat(label, "-").concat(type)) : null;
+    })
+  });
 }
 
 var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
@@ -1100,81 +1187,84 @@ function Menu(_ref) {
     dropdownsVisible = _useState2[0],
     setDropdownsVisible = _useState2[1];
   var ListComponent = linkAsItem ? 'div' : tagName;
-  return /*#__PURE__*/React.createElement(ListComponent, {
-    className: className
-  }, children !== null ? children : items.map(function (it, index) {
-    var id = it.id,
-      _it$className = it.className,
-      customClassName = _it$className === void 0 ? null : _it$className,
-      _it$linkClassName = it.linkClassName,
-      customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
-      _it$href = it.href,
-      href = _it$href === void 0 ? null : _it$href,
-      label = it.label,
-      _it$external = it.external,
-      external = _it$external === void 0 ? false : _it$external,
-      _it$items = it.items,
-      subItems = _it$items === void 0 ? null : _it$items,
-      _it$dropdown = it.dropdown,
-      dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
-      _it$active = it.active,
-      active = _it$active === void 0 ? false : _it$active,
-      _it$onClick = it.onClick,
-      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-      itemProps = _objectWithoutProperties(it, _excluded$3);
-    var onClickItem = dropdown !== null ? function (e) {
-      e.preventDefault();
-      setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
-      if (customOnClick !== null) {
-        customOnClick(e);
-      }
-    } : customOnClick;
-    var closeDropdown = dropdown !== null ? function () {
-      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, {
-      key: "item-".concat(id || index),
-      onClick: onClickItem,
-      href: href,
-      external: external,
-      className: classNames([itemClassName, customClassName, linkClassName, customLinkClassName, {
-        active: active
-      }])
-    }), label) : /*#__PURE__*/React.createElement(ItemComponent, {
-      key: "item-".concat(id || index),
-      className: classNames([itemClassName, customClassName, _defineProperty(_defineProperty({
-        dropdown: dropdown !== null,
-        active: active
-      }, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null)])
-    }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
-      onClick: onClickItem,
-      href: href,
-      external: external,
-      className: classNames([linkClassName, customLinkClassName, {
-        'dropdown-toggle': dropdown !== null
-      }])
-    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
-      onClick: onClickItem,
-      className: classNames([linkClassName, customLinkClassName, {
-        'dropdown-toggle': dropdown !== null
-      }])
-    }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
-      items: subItems,
-      className: subMenuClassName,
-      itemClassName: classNames([subMenuItemClassName, _defineProperty({}, itemClassName, subMenuItemClassName === null && itemClassName !== null)]),
-      linkClassName: classNames([subMenuLinkClassName, _defineProperty({}, linkClassName, subMenuLinkClassName === null && linkClassName !== null)])
-    }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
-      items: dropdown,
-      visible: dropdownsVisible[index] || false,
-      className: dropdownClassName,
-      itemClassName: classNames([dropdownItemClassName, _defineProperty({}, itemClassName, dropdownItemClassName === null && itemClassName !== null)]),
-      linkClassName: classNames([dropdownLinkClassName, _defineProperty({}, linkClassName, dropdownLinkClassName === null && linkClassName !== null)]),
-      align: dropdownAlign,
-      onClickItem: closeDropdown,
-      onClickOutside: closeDropdown
-    }) : null);
-  }));
+  return /*#__PURE__*/jsx(ListComponent, {
+    className: className,
+    children: children !== null ? children : items.map(function (it, index) {
+      var id = it.id,
+        _it$className = it.className,
+        customClassName = _it$className === void 0 ? null : _it$className,
+        _it$linkClassName = it.linkClassName,
+        customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
+        _it$href = it.href,
+        href = _it$href === void 0 ? null : _it$href,
+        label = it.label,
+        _it$external = it.external,
+        external = _it$external === void 0 ? false : _it$external,
+        _it$items = it.items,
+        subItems = _it$items === void 0 ? null : _it$items,
+        _it$dropdown = it.dropdown,
+        dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
+        _it$active = it.active,
+        active = _it$active === void 0 ? false : _it$active,
+        _it$onClick = it.onClick,
+        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+        itemProps = _objectWithoutProperties(it, _excluded$3);
+      var onClickItem = dropdown !== null ? function (e) {
+        e.preventDefault();
+        setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
+        if (customOnClick !== null) {
+          customOnClick(e);
+        }
+      } : customOnClick;
+      var closeDropdown = dropdown !== null ? function () {
+        setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
+      } : null;
+      var ItemComponent = itemTagName;
+      return linkAsItem ? /*#__PURE__*/createElement(Link, _objectSpread(_objectSpread({}, itemProps), {}, {
+        key: "item-".concat(id || index),
+        onClick: onClickItem,
+        href: href,
+        external: external,
+        className: classNames([itemClassName, customClassName, linkClassName, customLinkClassName, {
+          active: active
+        }])
+      }), label) : /*#__PURE__*/jsxs(ItemComponent, {
+        className: classNames([itemClassName, customClassName, _defineProperty(_defineProperty({
+          dropdown: dropdown !== null,
+          active: active
+        }, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null)]),
+        children: [href !== null ? /*#__PURE__*/jsx(Link, _objectSpread(_objectSpread({}, itemProps), {}, {
+          onClick: onClickItem,
+          href: href,
+          external: external,
+          className: classNames([linkClassName, customLinkClassName, {
+            'dropdown-toggle': dropdown !== null
+          }]),
+          children: label
+        })) : null, href === null && onClickItem !== null ? /*#__PURE__*/jsx(Button$1, _objectSpread(_objectSpread({}, itemProps), {}, {
+          onClick: onClickItem,
+          className: classNames([linkClassName, customLinkClassName, {
+            'dropdown-toggle': dropdown !== null
+          }]),
+          children: label
+        })) : null, subItems !== null ? /*#__PURE__*/jsx(Menu, {
+          items: subItems,
+          className: subMenuClassName,
+          itemClassName: classNames([subMenuItemClassName, _defineProperty({}, itemClassName, subMenuItemClassName === null && itemClassName !== null)]),
+          linkClassName: classNames([subMenuLinkClassName, _defineProperty({}, linkClassName, subMenuLinkClassName === null && linkClassName !== null)])
+        }) : null, dropdown !== null ? /*#__PURE__*/jsx(Dropdown, {
+          items: dropdown,
+          visible: dropdownsVisible[index] || false,
+          className: dropdownClassName,
+          itemClassName: classNames([dropdownItemClassName, _defineProperty({}, itemClassName, dropdownItemClassName === null && itemClassName !== null)]),
+          linkClassName: classNames([dropdownLinkClassName, _defineProperty({}, linkClassName, dropdownLinkClassName === null && linkClassName !== null)]),
+          align: dropdownAlign,
+          onClickItem: closeDropdown,
+          onClickOutside: closeDropdown
+        }) : null]
+      }, "item-".concat(id || index));
+    })
+  });
 }
 
 var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
@@ -1215,39 +1305,46 @@ function Navbar(_ref) {
   var onClickMenu = useCallback(function () {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
-  return /*#__PURE__*/React.createElement("nav", {
-    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['container-fluid', {
-      'px-0': compact
-    }])
-  }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['navbar-brand', brandClassName, {
-      'py-0': compact
-    }]),
-    href: brandLink
-  }, brand) : null, brand !== null && brandLink === null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames(['navbar-brand', brandClassName, {
-      'py-0': compact
-    }])
-  }, brand) : null, breadcrumbs !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames(['navbar-breadcrumbs', breadCrumbsClassName, {
-      'py-0': compact
-    }])
-  }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React.createElement(Button$1, {
-    className: "navbar-toggler",
-    onClick: onClickMenu,
-    withoutTheme: true,
-    "aria-controls": "navbarSupportedContent",
-    "aria-expanded": "false",
-    "aria-label": "Toggle navigation"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "navbar-toggler-icon"
-  })) : null, !withoutCollapse ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, collapseClassName, {
-      show: menuVisible
-    }])
-  }, children) : children));
+  return /*#__PURE__*/jsx("nav", {
+    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className]),
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames(['container-fluid', {
+        'px-0': compact
+      }]),
+      children: [brand !== null && brandLink !== null ? /*#__PURE__*/jsx(Link, {
+        className: classNames(['navbar-brand', brandClassName, {
+          'py-0': compact
+        }]),
+        href: brandLink,
+        children: brand
+      }) : null, brand !== null && brandLink === null ? /*#__PURE__*/jsx("span", {
+        className: classNames(['navbar-brand', brandClassName, {
+          'py-0': compact
+        }]),
+        children: brand
+      }) : null, breadcrumbs !== null ? /*#__PURE__*/jsx("span", {
+        className: classNames(['navbar-breadcrumbs', breadCrumbsClassName, {
+          'py-0': compact
+        }]),
+        children: breadcrumbs
+      }) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/jsx(Button$1, {
+        className: "navbar-toggler",
+        onClick: onClickMenu,
+        withoutTheme: true,
+        "aria-controls": "navbarSupportedContent",
+        "aria-expanded": "false",
+        "aria-label": "Toggle navigation",
+        children: /*#__PURE__*/jsx("span", {
+          className: "navbar-toggler-icon"
+        })
+      }) : null, !withoutCollapse ? /*#__PURE__*/jsx("div", {
+        className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, collapseClassName, {
+          show: menuVisible
+        }]),
+        children: children
+      }) : children]
+    })
+  });
 }
 
 var styles$p = {"container":"micromag-core-menus-pagination-container"};
@@ -1326,48 +1423,61 @@ function PaginationMenu(_ref) {
     return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray(selectedPages), [pageNumber]) : selectedPages;
   }, []) : pageNumbers;
   var pages = strippedPages.length > 0 ? strippedPages : [1];
-  return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$p.container, className])
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: classNames(['pagination', paginationClassName])
-  }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
-    className: classNames(['page-item', itemClassName, {
-      disabled: page <= 1
-    }])
-  }, page > 1 ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['page-link', linkClassName]),
-    href: getUrl(page - 1),
-    onClick: onClickPage !== null ? function () {
-      return onClickPage(page - 1);
-    } : null
-  }, messages.previous) : /*#__PURE__*/React.createElement("span", {
-    className: classNames(['page-link', linkClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: "page-".concat(pageNumber),
-      className: classNames(['page-item', itemClassName, {
-        active: pageNumber === page
-      }])
-    }, /*#__PURE__*/React.createElement(Link, {
-      className: classNames(['page-link', linkClassName]),
-      href: getUrl(pageNumber),
-      onClick: onClickPage !== null ? function () {
-        return onClickPage(pageNumber);
-      } : null
-    }, pageNumber));
-  }), withPreviousNext ? /*#__PURE__*/React.createElement("li", {
-    className: classNames(['page-item', itemClassName, {
-      disabled: page >= total
-    }])
-  }, page < total ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['page-link', linkClassName]),
-    href: getUrl(page + 1),
-    onClick: onClickPage !== null ? function () {
-      return onClickPage(page + 1);
-    } : null
-  }, messages.next) : /*#__PURE__*/React.createElement("span", {
-    className: classNames(['page-link', linkClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
+  return /*#__PURE__*/jsx("nav", {
+    className: classNames([styles$p.container, className]),
+    children: /*#__PURE__*/jsxs("ul", {
+      className: classNames(['pagination', paginationClassName]),
+      children: [withPreviousNext ? /*#__PURE__*/jsx("li", {
+        className: classNames(['page-item', itemClassName, {
+          disabled: page <= 1
+        }]),
+        children: page > 1 ? /*#__PURE__*/jsx(Link, {
+          className: classNames(['page-link', linkClassName]),
+          href: getUrl(page - 1),
+          onClick: onClickPage !== null ? function () {
+            return onClickPage(page - 1);
+          } : null,
+          children: messages.previous
+        }) : /*#__PURE__*/jsx("span", {
+          className: classNames(['page-link', linkClassName]),
+          children: /*#__PURE__*/jsx(Label, {
+            children: messages.previous
+          })
+        })
+      }) : null, pages.map(function (pageNumber) {
+        return /*#__PURE__*/jsx("li", {
+          className: classNames(['page-item', itemClassName, {
+            active: pageNumber === page
+          }]),
+          children: /*#__PURE__*/jsx(Link, {
+            className: classNames(['page-link', linkClassName]),
+            href: getUrl(pageNumber),
+            onClick: onClickPage !== null ? function () {
+              return onClickPage(pageNumber);
+            } : null,
+            children: pageNumber
+          })
+        }, "page-".concat(pageNumber));
+      }), withPreviousNext ? /*#__PURE__*/jsx("li", {
+        className: classNames(['page-item', itemClassName, {
+          disabled: page >= total
+        }]),
+        children: page < total ? /*#__PURE__*/jsx(Link, {
+          className: classNames(['page-link', linkClassName]),
+          href: getUrl(page + 1),
+          onClick: onClickPage !== null ? function () {
+            return onClickPage(page + 1);
+          } : null,
+          children: messages.next
+        }) : /*#__PURE__*/jsx("span", {
+          className: classNames(['page-link', linkClassName]),
+          children: /*#__PURE__*/jsx(Label, {
+            children: messages.next
+          })
+        })
+      }) : null]
+    })
+  });
 }
 
 var styles$o = {"container":"micromag-core-menus-tabs-container"};
@@ -1389,17 +1499,18 @@ function TabsMenu(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$onClickItem = _ref.onClickItem,
     onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$o.container, className])
-  }, /*#__PURE__*/React.createElement(Buttons, {
-    buttons: items,
-    size: size,
-    theme: theme,
-    renderButton: renderItemButton,
-    onClickButton: onClickItem,
-    className: styles$o.buttons,
-    buttonClassName: classNames([styles$o.button, buttonClassName])
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$o.container, className]),
+    children: /*#__PURE__*/jsx(Buttons, {
+      buttons: items,
+      size: size,
+      theme: theme,
+      renderButton: renderItemButton,
+      onClickButton: onClickItem,
+      className: styles$o.buttons,
+      buttonClassName: classNames([styles$o.button, buttonClassName])
+    })
+  });
 }
 
 var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
@@ -1413,12 +1524,13 @@ function ModalsContainer(_ref) {
   useEffect(function () {
     setModalsContainer(containerRef.current);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$n.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
-    ref: containerRef
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$n.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
+      ref: containerRef
+    })
+  });
 }
 var Modals = withModals(ModalsContainer);
 
@@ -1466,13 +1578,14 @@ 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__*/jsx(ElementPortal, {
     id: id,
     data: data,
     container: container,
     register: register,
-    unregister: unregister
-  }, children);
+    unregister: unregister,
+    children: children
+  });
 }
 
 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"};
@@ -1494,14 +1607,17 @@ function Modal(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React.createElement(ModalPortal, {
+  return /*#__PURE__*/jsx(ModalPortal, {
     id: finalId,
-    data: data
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$m.container, _defineProperty({}, styles$m[position], position !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$m.inner, 'bg-dark', 'rounded'])
-  }, children)));
+    data: data,
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames([styles$m.container, _defineProperty({}, styles$m[position], position !== null)]),
+      children: /*#__PURE__*/jsx("div", {
+        className: classNames([styles$m.inner, 'bg-dark', 'rounded']),
+        children: children
+      })
+    })
+  });
 }
 
 var styles$l = {"container":"micromag-core-modals-dialog-container"};
@@ -1525,28 +1641,36 @@ function ModalDialog(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     _ref$bodyClassName = _ref.bodyClassName,
     bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles$l.container, 'modal-dialog', className, _defineProperty({}, "modal-".concat(size), size !== null)]),
-    role: "dialog"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "modal-content"
-  }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header])
-  }, /*#__PURE__*/React.createElement("h5", {
-    className: "modal-title"
-  }, /*#__PURE__*/React.createElement(Label, null, title)), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "btn btn-close p-2",
-    "aria-label": "Close",
-    onClick: onClose
-  })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', 'p-2', bodyClassName])
-  }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-footer', 'p-2', styles$l.footer])
-  }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
-    buttons: buttons,
-    className: styles$l.buttons
-  }) : null) : null));
+    role: "dialog",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "modal-content",
+      children: [header || /*#__PURE__*/jsxs("div", {
+        className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header]),
+        children: [/*#__PURE__*/jsx("h5", {
+          className: "modal-title",
+          children: /*#__PURE__*/jsx(Label, {
+            children: title
+          })
+        }), /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "btn btn-close p-2",
+          "aria-label": "Close",
+          onClick: onClose
+        })]
+      }), /*#__PURE__*/jsx("div", {
+        className: classNames(['modal-body', 'p-2', bodyClassName]),
+        children: children
+      }), footer !== null || buttons !== null ? /*#__PURE__*/jsxs("div", {
+        className: classNames(['modal-footer', 'p-2', styles$l.footer]),
+        children: [footer, buttons !== null ? /*#__PURE__*/jsx(Buttons, {
+          buttons: buttons,
+          className: styles$l.buttons
+        }) : null]
+      }) : null]
+    })
+  });
 }
 
 var styles$k = {"container":"micromag-core-panels-container"};
@@ -1563,12 +1687,13 @@ function PanelsContainer(_ref) {
   useEffect(function () {
     setPanelsContainer(containerRef.current);
   }, []);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.container, className])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
-    ref: containerRef
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$k.container, className]),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
+      ref: containerRef
+    })
+  });
 }
 var Panels = withPanels(PanelsContainer);
 
@@ -1591,13 +1716,14 @@ function PanelPortal(_ref) {
   if (panels === null) {
     return children;
   }
-  return /*#__PURE__*/React.createElement(ElementPortal, {
+  return /*#__PURE__*/jsx(ElementPortal, {
     id: id,
     data: data,
     container: container,
     register: register,
-    unregister: unregister
-  }, children);
+    unregister: unregister,
+    children: children
+  });
 }
 
 var styles$j = {"container":"micromag-core-panels-panel-container"};
@@ -1618,12 +1744,14 @@ function Panel(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React.createElement(PanelPortal, {
+  return /*#__PURE__*/jsx(PanelPortal, {
     id: finalId,
-    data: data
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$j.container
-  }, children));
+    data: data,
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$j.container,
+      children: children
+    })
+  });
 }
 
 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"};
@@ -1650,23 +1778,27 @@ function CollapsablePanel(_ref) {
   var onClick = useCallback(function () {
     return setOpened(!opened);
   }, [opened, setOpened]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, className, _defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.top, topClassName])
-  }, /*#__PURE__*/React.createElement(Button$1, {
-    withoutStyle: true,
-    className: classNames([styles$i.button, buttonClassName]),
-    icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-      icon: opened ? faAngleUp : faAngleDown,
-      className: styles$i.icon
-    }),
-    iconPosition: "right",
-    labelClassName: styles$i.label,
-    onClick: onClick
-  }, title)), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.content, contentClassName])
-  }, children));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$i.container, className, _defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null)]),
+    children: [/*#__PURE__*/jsx("div", {
+      className: classNames([styles$i.top, topClassName]),
+      children: /*#__PURE__*/jsx(Button$1, {
+        withoutStyle: true,
+        className: classNames([styles$i.button, buttonClassName]),
+        icon: /*#__PURE__*/jsx(FontAwesomeIcon, {
+          icon: opened ? faAngleUp : faAngleDown,
+          className: styles$i.icon
+        }),
+        iconPosition: "right",
+        labelClassName: styles$i.label,
+        onClick: onClick,
+        children: title
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: classNames([styles$i.content, contentClassName]),
+      children: children
+    })]
+  });
 }
 
 function Close(_ref) {
@@ -1678,37 +1810,41 @@ function Close(_ref) {
     fill = _ref$fill === void 0 ? '#fff' : _ref$fill,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("svg", {
+  return /*#__PURE__*/jsx("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "42.9",
     height: "42.9",
     viewBox: "0 0 42.9 42.9",
-    className: className
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(-352.531 -47.531)"
-  }, border ? /*#__PURE__*/React.createElement("path", {
-    fill: border,
-    d: "M374,47.5c11.9,0,21.5,9.6,21.5,21.5s-9.6,21.5-21.5,21.5s-21.5-9.6-21.5-21.5c0,0,0,0,0,0 C352.5,57.1,362.1,47.5,374,47.5z"
-  }) : null, /*#__PURE__*/React.createElement("path", {
-    fill: fill,
-    d: "M374,50c10.5,0,19,8.5,19,19s-8.5,19-19,19s-19-8.5-19-19S363.5,50,374,50z"
-  }), /*#__PURE__*/React.createElement("g", {
-    transform: "translate(366.893 61.893)"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(0 0)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fill: fill,
-    stroke: stroke,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    d: "M14.2,0.3L0,13.9"
-  }), /*#__PURE__*/React.createElement("path", {
-    fill: fill,
-    stroke: stroke,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    d: "M0.3,0l13.7,14.2"
-  })))));
+    className: className,
+    children: /*#__PURE__*/jsxs("g", {
+      transform: "translate(-352.531 -47.531)",
+      children: [border ? /*#__PURE__*/jsx("path", {
+        fill: border,
+        d: "M374,47.5c11.9,0,21.5,9.6,21.5,21.5s-9.6,21.5-21.5,21.5s-21.5-9.6-21.5-21.5c0,0,0,0,0,0 C352.5,57.1,362.1,47.5,374,47.5z"
+      }) : null, /*#__PURE__*/jsx("path", {
+        fill: fill,
+        d: "M374,50c10.5,0,19,8.5,19,19s-8.5,19-19,19s-19-8.5-19-19S363.5,50,374,50z"
+      }), /*#__PURE__*/jsx("g", {
+        transform: "translate(366.893 61.893)",
+        children: /*#__PURE__*/jsxs("g", {
+          transform: "translate(0 0)",
+          children: [/*#__PURE__*/jsx("path", {
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            d: "M14.2,0.3L0,13.9"
+          }), /*#__PURE__*/jsx("path", {
+            fill: fill,
+            stroke: stroke,
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            d: "M0.3,0l13.7,14.2"
+          })]
+        })
+      })]
+    })
+  });
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -1722,14 +1858,16 @@ function Date$1(_ref) {
   var dateObject = useMemo(function () {
     return dayjs(date).toDate();
   }, [date]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedDate, {
-    value: dateObject,
-    year: "numeric",
-    month: "long",
-    day: "2-digit"
-  }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/React.createElement(FormattedTime, {
-    value: dateObject
-  }) : null);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(FormattedDate, {
+      value: dateObject,
+      year: "numeric",
+      month: "long",
+      day: "2-digit"
+    }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/jsx(FormattedTime, {
+      value: dateObject
+    }) : null]
+  });
 }
 
 /* eslint-disable react/no-danger */
@@ -1790,10 +1928,11 @@ function Detector(_ref) {
       }
     };
   }, [throttleDelay, isIntersecting, disabled, triggerChange]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: className,
-    ref: ref
-  }, children);
+    ref: ref,
+    children: children
+  });
 }
 
 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"};
@@ -1813,18 +1952,19 @@ function PlaceholderBlock(_ref) {
     withInvertedColors = _ref$withInvertedColo === void 0 ? true : _ref$withInvertedColo,
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, className, _defineProperty(_defineProperty({}, styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.box, boxClassName]),
-    style: {
-      width: width,
-      height: height
-    }
-  }, children));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$h.container, className, _defineProperty(_defineProperty({}, styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)]),
+    children: /*#__PURE__*/jsx("div", {
+      className: classNames([styles$h.box, boxClassName]),
+      style: {
+        width: width,
+        height: height
+      },
+      children: children
+    })
+  });
 }
 
-/* eslint-disable react/jsx-props-no-spreading */
 var emptyObject = {};
 function ElementComponent(_ref) {
   var name = _ref.name,
@@ -1843,13 +1983,13 @@ function ElementComponent(_ref) {
   if (isPlaceholder) {
     // TODO: figure out what this did
     // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
+    return /*#__PURE__*/jsx(PlaceholderBlock, _objectSpread({}, placeholderProps));
   }
   var RealComponent = components[pascalCase(name)];
   if (!RealComponent) {
     return 'Bad component';
   }
-  return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(RealComponent, _objectSpread(_objectSpread({}, props), {}, {
     className: className
   }));
 }
@@ -1865,11 +2005,15 @@ function Empty(_ref) {
     light = _ref$light === void 0 ? false : _ref$light,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, className, _defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.middle
-  }, /*#__PURE__*/React.createElement(Label, null, children)));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$g.container, className, _defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light)]),
+    children: /*#__PURE__*/jsx("div", {
+      className: styles$g.middle,
+      children: /*#__PURE__*/jsx(Label, {
+        children: children
+      })
+    })
+  });
 }
 
 var emptyArray$1 = [];
@@ -1968,7 +2112,7 @@ function FontFaces(_ref4) {
     //     }),
     // ];
   }, {});
-  return Object.keys(fontFaces).length > 0 ? /*#__PURE__*/React.createElement("style", {
+  return Object.keys(fontFaces).length > 0 ? /*#__PURE__*/jsx("style", {
     type: "text/css",
     dangerouslySetInnerHTML: {
       __html: Object.keys(fontFaces).map(function (it) {
@@ -2000,21 +2144,26 @@ function Media(_ref) {
     bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName,
     _ref$titleClassName = _ref.titleClassName,
     titleClassName = _ref$titleClassName === void 0 ? null : _ref$titleClassName;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card', styles$f.container, className])
-  }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
-    src: thumbnail,
-    alt: title,
-    className: classNames(['me-3', styles$f.thumbnail, thumbnailClassName, {
-      'align-self-start': thumbnailAlign === 'top',
-      'align-self-center': thumbnailAlign === 'center',
-      'align-self-end': thumbnailAlign === 'bottom'
-    }])
-  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-body', styles$f.body, bodyClassName])
-  }, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['mt-0', 'text-truncate', styles$f.title, titleClassName])
-  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames(['card', styles$f.container, className]),
+    children: [typeof thumbnail === 'string' ? /*#__PURE__*/jsx("img", {
+      src: thumbnail,
+      alt: title,
+      className: classNames(['me-3', styles$f.thumbnail, thumbnailClassName, {
+        'align-self-start': thumbnailAlign === 'top',
+        'align-self-center': thumbnailAlign === 'center',
+        'align-self-end': thumbnailAlign === 'bottom'
+      }])
+    }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/jsxs("div", {
+      className: classNames(['card-body', styles$f.body, bodyClassName]),
+      children: [title !== null ? /*#__PURE__*/jsx("h5", {
+        className: classNames(['mt-0', 'text-truncate', styles$f.title, titleClassName]),
+        children: /*#__PURE__*/jsx(Label, {
+          children: title
+        })
+      }) : null, children]
+    }) : null]
+  });
 }
 
 /* eslint-disable react/no-array-index-key */
@@ -2064,74 +2213,78 @@ function Meta(_ref) {
   var _ref5 = favicon || {},
     _ref5$url = _ref5.url,
     faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React.createElement("meta", {
-    name: "description",
-    content: description
-  }) : null, language !== null ? /*#__PURE__*/React.createElement("meta", {
-    name: "language",
-    content: language
-  }) : null, keywords !== null && isString(keywords) ? /*#__PURE__*/React.createElement("meta", {
-    name: "keywords",
-    content: keywords
-  }) : null, keywords !== null && isArray(keywords) ? /*#__PURE__*/React.createElement("meta", {
-    name: "keywords",
-    content: keywords.join(',')
-  }) : null, canonical !== null ? /*#__PURE__*/React.createElement("link", {
-    rel: "canonical",
-    href: canonical
-  }) : null, faviconUrl !== null ? /*#__PURE__*/React.createElement("link", {
-    rel: "icon",
-    type: "image/png",
-    href: faviconUrl
-  }) : null, rssUrl !== null ? /*#__PURE__*/React.createElement("link", {
-    rel: "alternate",
-    type: "application/rss+xml",
-    href: rssUrl
-  }) : null, atomUrl !== null ? /*#__PURE__*/React.createElement("link", {
-    rel: "alternate",
-    type: "application/atom+xml",
-    href: atomUrl
-  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:image",
-    content: imageUrl
-  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:image:url",
-    content: imageUrl
-  }) : null, imageWidth !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:image:width",
-    content: imageWidth
-  }) : null, imageHeight !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:image:height",
-    content: imageHeight
-  }) : null, realTitle !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:title",
-    content: realTitle
-  }) : null, description !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:description",
-    content: description
-  }) : null, url !== null ? /*#__PURE__*/React.createElement("meta", {
-    property: "og:url",
-    content: url
-  }) : null, /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:card",
-    content: imageUrl !== null ? 'summary_large_image' : 'summary'
-  }), realTitle !== null ? /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:title",
-    content: realTitle
-  }) : null, description !== null ? /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:description",
-    content: description
-  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
-    name: "twitter:image",
-    content: imageUrl
-  }) : null, (microformats || []).map(function (it) {
-    return /*#__PURE__*/React.createElement("script", {
-      type: "application/ld+json",
-      id: "".concat(it["@type"], "-").concat(it.identifier),
-      key: "microformat-".concat(it["@type"], "-").concat(it.identifier),
-      async: true
-    }, JSON.stringify(it));
-  }), children);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("title", {
+      children: realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'
+    }), description !== null ? /*#__PURE__*/jsx("meta", {
+      name: "description",
+      content: description
+    }) : null, language !== null ? /*#__PURE__*/jsx("meta", {
+      name: "language",
+      content: language
+    }) : null, keywords !== null && isString(keywords) ? /*#__PURE__*/jsx("meta", {
+      name: "keywords",
+      content: keywords
+    }) : null, keywords !== null && isArray(keywords) ? /*#__PURE__*/jsx("meta", {
+      name: "keywords",
+      content: keywords.join(',')
+    }) : null, canonical !== null ? /*#__PURE__*/jsx("link", {
+      rel: "canonical",
+      href: canonical
+    }) : null, faviconUrl !== null ? /*#__PURE__*/jsx("link", {
+      rel: "icon",
+      type: "image/png",
+      href: faviconUrl
+    }) : null, rssUrl !== null ? /*#__PURE__*/jsx("link", {
+      rel: "alternate",
+      type: "application/rss+xml",
+      href: rssUrl
+    }) : null, atomUrl !== null ? /*#__PURE__*/jsx("link", {
+      rel: "alternate",
+      type: "application/atom+xml",
+      href: atomUrl
+    }) : null, imageUrl !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:image",
+      content: imageUrl
+    }) : null, imageUrl !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:image:url",
+      content: imageUrl
+    }) : null, imageWidth !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:image:width",
+      content: imageWidth
+    }) : null, imageHeight !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:image:height",
+      content: imageHeight
+    }) : null, realTitle !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:title",
+      content: realTitle
+    }) : null, description !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:description",
+      content: description
+    }) : null, url !== null ? /*#__PURE__*/jsx("meta", {
+      property: "og:url",
+      content: url
+    }) : null, /*#__PURE__*/jsx("meta", {
+      name: "twitter:card",
+      content: imageUrl !== null ? 'summary_large_image' : 'summary'
+    }), realTitle !== null ? /*#__PURE__*/jsx("meta", {
+      name: "twitter:title",
+      content: realTitle
+    }) : null, description !== null ? /*#__PURE__*/jsx("meta", {
+      name: "twitter:description",
+      content: description
+    }) : null, imageUrl !== null ? /*#__PURE__*/jsx("meta", {
+      name: "twitter:image",
+      content: imageUrl
+    }) : null, (microformats || []).map(function (it) {
+      return /*#__PURE__*/jsx("script", {
+        type: "application/ld+json",
+        id: "".concat(it["@type"], "-").concat(it.identifier),
+        async: true,
+        children: JSON.stringify(it)
+      }, "microformat-".concat(it["@type"], "-").concat(it.identifier));
+    }), children]
+  });
 }
 
 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"};
@@ -2177,17 +2330,19 @@ function Slideshow(_ref) {
     width: width,
     height: height
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classNames([styles$e.container, className]),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$e.items
-  }, items.map(function (it, i) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "slide-".concat(i + 1),
-      className: classNames([styles$e.item, _defineProperty(_defineProperty(_defineProperty({}, styles$e.prev, i < index), styles$e.current, i === index), styles$e.next, i > index)])
-    }, it);
-  })), children);
+    style: style,
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles$e.items,
+      children: items.map(function (it, i) {
+        return /*#__PURE__*/jsx("div", {
+          className: classNames([styles$e.item, _defineProperty(_defineProperty(_defineProperty({}, styles$e.prev, i < index), styles$e.current, i === index), styles$e.next, i > index)]),
+          children: it
+        }, "slide-".concat(i + 1));
+      })
+    }), children]
+  });
 }
 
 var styles$d = {"icon":"micromag-core-placeholders-icon"};
@@ -2197,14 +2352,15 @@ function AdFrame(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/jsx(PlaceholderBlock, {
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faAd,
-    className: styles$d.icon
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faAd,
+      className: styles$d.icon
+    })
+  });
 }
 
 /* eslint-disable react/prop-types */
@@ -2212,14 +2368,15 @@ function AdImage(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/jsx(PlaceholderBlock, {
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faImage,
-    className: styles$d.icon
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faImage,
+      className: styles$d.icon
+    })
+  });
 }
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
@@ -2229,14 +2386,15 @@ 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__*/jsx(PlaceholderBlock, {
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faMusic,
-    className: styles$d.icon
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faMusic,
+      className: styles$d.icon
+    })
+  });
 }
 
 var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
@@ -2258,20 +2416,20 @@ function PlaceholderText(_ref) {
     withInvertedColors = _ref$withInvertedColo === void 0 ? true : _ref$withInvertedColo;
   var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber(width) ? width * 0.9 : '80%';
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, className, _defineProperty({}, styles$c.withInvertedColors, withInvertedColors)])
-  }, _toConsumableArray(Array(lines)).map(function (e, index) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "line-".concat(index),
-      className: styles$c.line,
-      style: {
-        width: index % 2 === 0 ? width : oddWidth,
-        height: lineHeight,
-        marginTop: lineMargin,
-        marginBottom: lineMargin
-      }
-    });
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$c.container, className, _defineProperty({}, styles$c.withInvertedColors, withInvertedColors)]),
+    children: _toConsumableArray(Array(lines)).map(function (e, index) {
+      return /*#__PURE__*/jsx("div", {
+        className: styles$c.line,
+        style: {
+          width: index % 2 === 0 ? width : oddWidth,
+          height: lineHeight,
+          marginTop: lineMargin,
+          marginBottom: lineMargin
+        }
+      }, "line-".concat(index));
+    })
+  });
 }
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
@@ -2281,15 +2439,16 @@ 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__*/jsx(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
-    line: 1,
-    height: "0.1em"
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx(PlaceholderText, {
+      line: 1,
+      height: "0.1em"
+    })
+  });
 }
 
 var _excluded$2 = ["width", "height", "className"];
@@ -2298,19 +2457,19 @@ function Image(_ref) {
     height = _ref.height,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
     width: width,
     height: height,
-    className: className
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faImage,
-    className: styles$d.icon
+    className: className,
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faImage,
+      className: styles$d.icon
+    })
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function Line(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 1
@@ -2320,66 +2479,63 @@ function Line(props) {
 var styles$b = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 function Map(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/jsxs(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
-    className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)])
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$b.icon
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$b.icon
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$b.icon
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$b.icon
+    className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)]),
+    children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: props.withImages ? faImage : faMapMarkerAlt,
+      className: styles$b.icon
+    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: props.withImages ? faImage : faMapMarkerAlt,
+      className: styles$b.icon
+    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: props.withImages ? faImage : faMapMarkerAlt,
+      className: styles$b.icon
+    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: props.withImages ? faImage : faMapMarkerAlt,
+      className: styles$b.icon
+    })]
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function MapPath(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "70%",
-    className: classNames([props.className, styles$d.mapPath])
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faMapMarkedAlt,
-    size: "lg",
-    className: styles$d.icon
+    className: classNames([props.className, styles$d.mapPath]),
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faMapMarkedAlt,
+      size: "lg",
+      className: styles$d.icon
+    })
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function Quote(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.subtitle]),
     height: 0.5,
     lines: 6
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function ShortText(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 2
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function Subtitle(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.subtitle]),
     height: 0.3,
     lines: 1
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function TextPlaceholder(props) {
   var _props$className = props.className,
     className = _props$className === void 0 ? null : _props$className,
@@ -2389,7 +2545,7 @@ 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__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
@@ -2397,14 +2553,12 @@ function TextPlaceholder(props) {
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function Timeline(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.timeline])
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 function Title$1(props) {
   var _props$height = props.height,
     height = _props$height === void 0 ? 0.5 : _props$height,
@@ -2412,7 +2566,7 @@ function Title$1(props) {
     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__*/jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
     className: classNames([props.className, styles$d.title]),
     height: height,
     lines: lines,
@@ -2425,14 +2579,15 @@ function Video(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/jsx(PlaceholderBlock, {
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faVideo,
-    className: styles$d.icon
-  }));
+    className: className,
+    children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faVideo,
+      className: styles$d.icon
+    })
+  });
 }
 
 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"};
@@ -2442,17 +2597,19 @@ function Video360(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/jsxs(PlaceholderBlock, {
     width: width,
     height: height,
     className: classNames([styles$a.container, className]),
-    boxClassName: styles$a.box
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faVideo,
-    className: styles$a.icon
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$a.label
-  }, "360"));
+    boxClassName: styles$a.box,
+    children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faVideo,
+      className: styles$a.icon
+    }), /*#__PURE__*/jsx("div", {
+      className: styles$a.label,
+      children: "360"
+    })]
+  });
 }
 
 /* eslint-disable react/prop-types */
@@ -2460,17 +2617,18 @@ function VideoLoop(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+  return /*#__PURE__*/jsxs(PlaceholderBlock, {
     width: width,
     height: height,
-    className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faPlay,
-    className: styles$d.icon
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faRedo,
-    className: styles$d.icon
-  }));
+    className: className,
+    children: [/*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faPlay,
+      className: styles$d.icon
+    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faRedo,
+      className: styles$d.icon
+    })]
+  });
 }
 
 var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
@@ -2550,33 +2708,36 @@ function ScreenSizer(_ref) {
     };
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: classNames([styles$9.container, className]),
-    ref: !hasSize ? refContainer : null
-  }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
-    className: styles$9.frame,
-    style: {
-      width: frameWidth,
-      height: frameHeight
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$9.screen,
-    style: {
-      width: screenWidth,
-      height: screenHeight,
-      transform: screenTransform
-    }
-  }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.cloneElement(children, {
-    width: screenWidth,
-    height: screenHeight
-  })))) : null);
+    ref: !hasSize ? refContainer : null,
+    children: hasFrameSize ? /*#__PURE__*/jsx("div", {
+      className: styles$9.frame,
+      style: {
+        width: frameWidth,
+        height: frameHeight
+      },
+      children: /*#__PURE__*/jsx("div", {
+        className: styles$9.screen,
+        style: {
+          width: screenWidth,
+          height: screenHeight,
+          transform: screenTransform
+        },
+        children: /*#__PURE__*/jsx(ScreenSizeProvider, {
+          size: screenSize,
+          children: /*#__PURE__*/React.cloneElement(children, {
+            width: screenWidth,
+            height: screenHeight
+          })
+        })
+      })
+    }) : null
+  });
 }
 
 var styles$8 = {"container":"micromag-core-screens-screen-container"};
 
-/* eslint-disable react/jsx-props-no-spreading */
 function Screen(_ref) {
   var screen = _ref.screen,
     _ref$renderContext = _ref.renderContext,
@@ -2605,21 +2766,24 @@ function Screen(_ref) {
   var CustomScreenComponent = components !== null ? getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = useScreenComponent(type);
   var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
-  return /*#__PURE__*/React.createElement(ScreenProvider, {
+  return /*#__PURE__*/jsx(ScreenProvider, {
     data: screen,
     renderContext: renderContext,
-    screenState: screenState
-  }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, className])
-  }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
-    index: index,
-    active: active,
-    current: current,
-    preload: preload,
-    mediaRef: mediaRef
-  }))) : /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, component));
+    screenState: screenState,
+    children: ScreenComponent !== null ? /*#__PURE__*/jsx("div", {
+      className: classNames([styles$8.container, className]),
+      children: /*#__PURE__*/jsx(ScreenComponent, _objectSpread(_objectSpread({}, screen), {}, {
+        index: index,
+        active: active,
+        current: current,
+        preload: preload,
+        mediaRef: mediaRef
+      }))
+    }) : /*#__PURE__*/jsx("div", {
+      className: className,
+      children: component
+    })
+  });
 }
 
 var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
@@ -2640,18 +2804,19 @@ function ScreenPlaceholder(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$1);
-  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
+  var screenElement = /*#__PURE__*/jsx(Screen, _objectSpread({
     screen: screen,
     renderContext: "placeholder",
     screenState: screenState,
     layout: layout,
     className: classNames([styles$7.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+  return withSize ? /*#__PURE__*/jsx(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
-    screenHeight: screenHeight
-  }, screenElement) : screenElement;
+    screenHeight: screenHeight,
+    children: screenElement
+  }) : screenElement;
 }
 
 var styles$6 = {"screen":"micromag-core-screens-preview-screen"};
@@ -2677,7 +2842,7 @@ function ScreenPreview(_ref) {
     _ref$hidden = _ref.hidden,
     hidden = _ref$hidden === void 0 ? false : _ref$hidden,
     props = _objectWithoutProperties(_ref, _excluded);
-  var screenElement = /*#__PURE__*/React.createElement(Screen, Object.assign({
+  var screenElement = /*#__PURE__*/jsx(Screen, _objectSpread({
     screen: screen,
     renderContext: "preview",
     screenState: screenState,
@@ -2685,32 +2850,33 @@ function ScreenPreview(_ref) {
     height: !withSize ? height : undefined,
     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 element = !hidden ? screenElement : /*#__PURE__*/jsx("div", {});
+  var screenWithSize = withSize ? /*#__PURE__*/jsx(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
     width: width,
     height: height,
-    fit: fit
-  }, element) : element;
+    fit: fit,
+    children: element
+  }) : element;
   return screenWithSize;
 }
 
 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"};
 
 function Conversation() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles$5.container
-  }, _toConsumableArray(Array(4)).map(function (e, idx) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "message-".concat(idx + 1),
-      className: classNames([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
-    });
-  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faCommentDots,
-    className: styles$5.icon
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: styles$5.container,
+    children: [_toConsumableArray(Array(4)).map(function (e, idx) {
+      return /*#__PURE__*/jsx("div", {
+        className: classNames([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
+      }, "message-".concat(idx + 1));
+    }), /*#__PURE__*/jsx(FontAwesomeIcon, {
+      icon: faCommentDots,
+      className: styles$5.icon
+    })]
+  });
 }
 
 /* eslint-disable react/prop-types */
@@ -2720,7 +2886,7 @@ 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__*/jsx(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
@@ -2738,48 +2904,55 @@ function Answer$1(_ref) {
     className = _ref.className,
     _ref$good = _ref.good,
     good = _ref$good === void 0 ? true : _ref$good;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.good, good)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.answer
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$4.answerIcon,
-    icon: good ? faCheck : faTimes
-  })), /*#__PURE__*/React.createElement(PlaceholderBlock, {
-    outline: true,
-    width: width,
-    height: height,
-    className: styles$4.block
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
-    line: 1,
-    height: "0.2em"
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.good, good)]),
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles$4.answer,
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        className: styles$4.answerIcon,
+        icon: good ? faCheck : faTimes
+      })
+    }), /*#__PURE__*/jsx(PlaceholderBlock, {
+      outline: true,
+      width: width,
+      height: height,
+      className: styles$4.block,
+      children: /*#__PURE__*/jsx(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"};
 
 function Title(props) {
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/jsxs(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
     width: "100%",
     height: "100%",
     className: classNames([styles$3.container, _defineProperty({}, props.className, props.className !== null)]),
-    boxClassName: styles$3.box
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.item
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faCircle,
-    className: styles$3.icon
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.item
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faCircle,
-    className: styles$3.icon
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$3.item
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    icon: faCircle,
-    className: styles$3.icon
-  })));
+    boxClassName: styles$3.box,
+    children: [/*#__PURE__*/jsx("div", {
+      className: styles$3.item,
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: faCircle,
+        className: styles$3.icon
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: styles$3.item,
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: faCircle,
+        className: styles$3.icon
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: styles$3.item,
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        icon: faCircle,
+        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"};
@@ -2791,22 +2964,25 @@ function Answer(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.3em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, className])
-  }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
-    outline: true,
-    width: width,
-    height: height,
-    className: styles$2.block
-  }, /*#__PURE__*/React.createElement(PlaceholderText, {
-    line: 1,
-    height: "0.2em"
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$2.percent
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
-    className: styles$2.percentIcon,
-    icon: faPercent
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: classNames([styles$2.container, className]),
+    children: [/*#__PURE__*/jsx(PlaceholderBlock, {
+      outline: true,
+      width: width,
+      height: height,
+      className: styles$2.block,
+      children: /*#__PURE__*/jsx(PlaceholderText, {
+        line: 1,
+        height: "0.2em"
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: styles$2.percent,
+      children: /*#__PURE__*/jsx(FontAwesomeIcon, {
+        className: styles$2.percentIcon,
+        icon: faPercent
+      })
+    })]
+  });
 }
 
 var Placeholders = /*#__PURE__*/Object.freeze({
@@ -2835,7 +3011,6 @@ var Placeholders = /*#__PURE__*/Object.freeze({
     VideoLoop: VideoLoop
 });
 
-/* eslint-disable react/jsx-props-no-spreading */
 function ScreenElement(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children,
@@ -2859,12 +3034,13 @@ function ScreenElement(_ref) {
     isPreview = _useScreenRenderConte.isPreview;
   if (isPlaceholder) {
     var PlaceholderComponent = isString(placeholder) ? getComponentFromName(placeholder, Placeholders) : null;
-    return PlaceholderComponent !== null ? /*#__PURE__*/React.createElement(PlaceholderComponent, placeholderProps) : placeholder;
+    return PlaceholderComponent !== null ? /*#__PURE__*/jsx(PlaceholderComponent, _objectSpread({}, placeholderProps)) : placeholder;
   }
   if (isEdit && isEmpty) {
-    return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty, {
-      className: emptyClassName
-    }, emptyLabel);
+    return empty !== null ? empty : /*#__PURE__*/jsx(Empty, {
+      className: emptyClassName,
+      children: emptyLabel
+    });
   }
   if (isPreview && preview !== null) {
     return preview;
@@ -2880,16 +3056,16 @@ function Screens(_ref) {
     screenId = _ref$screen === void 0 ? null : _ref$screen,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, className])
-  }, screens.map(function (screen) {
-    var id = screen.id;
-    return /*#__PURE__*/React.createElement(Screen, {
-      key: "screen-".concat(id),
-      screen: screen,
-      className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
-    });
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: classNames([styles$1.container, className]),
+    children: screens.map(function (screen) {
+      var id = screen.id;
+      return /*#__PURE__*/jsx(Screen, {
+        screen: screen,
+        className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
+      }, "screen-".concat(id));
+    })
+  });
 }
 
 var styles = {"container":"micromag-core-transitions-transition-container","fullscreen":"micromag-core-transitions-transition-fullscreen"};
@@ -2959,13 +3135,13 @@ function Transition(_ref) {
     }
     // console.log('fx', { reset, finalPlaying, immediate, reversible });
   }, [playing, direction, delay, duration, reversible, easing, config$1, from, to, setSpringProps, onStart, onComplete]);
-  return /*#__PURE__*/React.createElement(animated.div, {
+  return /*#__PURE__*/jsx(animated.div, {
     style: _objectSpread({}, springProps),
-    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)])
-  }, children);
+    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
+    children: children
+  });
 }
 
-/* eslint-disable react/jsx-props-no-spreading */
 function Fade(props) {
   var from = useMemo(function () {
     return {
@@ -2977,13 +3153,12 @@ function Fade(props) {
       opacity: 1
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(Transition, _objectSpread(_objectSpread({}, props), {}, {
     from: from,
     to: to
   }));
 }
 
-/* eslint-disable react/jsx-props-no-spreading */
 function Scale(props) {
   var from = useMemo(function () {
     return {
@@ -2995,7 +3170,7 @@ function Scale(props) {
       transform: 'scale(1)'
     };
   }, []);
-  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
+  return /*#__PURE__*/jsx(Transition, _objectSpread(_objectSpread({}, props), {}, {
     from: from,
     to: to
   }));
@@ -3065,16 +3240,20 @@ function Transitions(_ref) {
     delay: delay,
     onComplete: onComplete
   }) : null;
-  var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionOut, Object.assign({
+  var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/jsx(TransitionOut, _objectSpread(_objectSpread({
     fullscreen: fullscreen,
     playing: finalPlaying,
     direction: "out"
-  }, transitionOutProps), children) : children;
-  return TransitionIn !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionIn, Object.assign({
+  }, transitionOutProps), {}, {
+    children: children
+  })) : children;
+  return TransitionIn !== null && !disabled ? /*#__PURE__*/jsx(TransitionIn, _objectSpread(_objectSpread({
     fullscreen: fullscreen,
     playing: finalPlaying,
     direction: !sameTransitionInOut ? 'in' : null
-  }, transitionInProps), renderTransitionOut) : renderTransitionOut;
+  }, transitionInProps), {}, {
+    children: renderTransitionOut
+  })) : renderTransitionOut;
 }
 
 function TransitionsStagger(_ref) {
@@ -3105,12 +3284,13 @@ function TransitionsStagger(_ref) {
     if (disabled || withoutTransitionsWrapper) {
       return child;
     }
-    var el = /*#__PURE__*/React.createElement(Transitions, {
+    var el = /*#__PURE__*/jsx(Transitions, {
       transitions: transitions,
       delay: delay + validIndex * stagger,
       playing: playing,
-      fullscreen: fullscreen
-    }, child);
+      fullscreen: fullscreen,
+      children: child
+    });
     validIndex += 1;
     return el;
   });
@@ -3124,7 +3304,7 @@ function HighlightStyle(_ref) {
     highlightSelector = _ref$highlightSelecto === void 0 ? 'mark' : _ref$highlightSelecto,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? null : _ref$style;
-  return style !== null ? /*#__PURE__*/React.createElement("style", {
+  return style !== null ? /*#__PURE__*/jsx("style", {
     type: "text/css",
     dangerouslySetInnerHTML: {
       __html: "".concat([selector, highlightSelector].filter(function (it) {
@@ -3141,7 +3321,7 @@ function LinkStyle(_ref) {
     linkSelector = _ref$linkSelector === void 0 ? 'a' : _ref$linkSelector,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? null : _ref$style;
-  return style !== null ? /*#__PURE__*/React.createElement("style", {
+  return style !== null ? /*#__PURE__*/jsx("style", {
     type: "text/css",
     dangerouslySetInnerHTML: {
       __html: "".concat([selector, linkSelector].filter(function (it) {