@micromag/core 0.3.420 → 0.3.429

package/lib/components.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var classNames = require('classnames');
@@ -19,6 +17,7 @@ var hooks = require('@micromag/core/hooks');
 var contexts = require('@micromag/core/contexts');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
+var queryString = require('query-string');
 var ReactDOM = require('react-dom');
 var isArray = require('lodash/isArray');
 var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
@@ -28,7 +27,6 @@ var throttle = require('lodash/throttle');
 var isObject = require('lodash/isObject');
 var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
-require('snake-case');
 var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
 var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
 var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
@@ -47,48 +45,11 @@ var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
-}
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
-var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
-var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
-var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
-var throttle__default = /*#__PURE__*/_interopDefaultLegacy(throttle);
-var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
-var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
-var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
-
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$T = {
   children: core.PropTypes.label.isRequired,
-  isHtml: PropTypes__default["default"].bool,
-  values: PropTypes__default["default"].object // eslint-disable-line react/forbid-prop-types
+  isHtml: PropTypes.bool,
+  values: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
 
 var defaultProps$T = {
@@ -100,7 +61,7 @@ var Label = function Label(_ref) {
     isHtml = _ref.isHtml,
     values = _ref.values;
   var Message = isHtml ? reactIntl.FormattedMessage : reactIntl.FormattedMessage;
-  return utils.isMessage(children) ? /*#__PURE__*/React__default["default"].createElement(Message, Object.assign({
+  return utils.isMessage(children) ? /*#__PURE__*/React.createElement(Message, Object.assign({
     values: values
   }, children)) : children;
 };
@@ -111,36 +72,36 @@ var styles$x = {"container":"micromag-core-buttons-button-container","asLink":"m
 
 var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$S = {
-  type: PropTypes__default["default"].string,
+  type: PropTypes.string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
-  href: PropTypes__default["default"].string,
-  external: PropTypes__default["default"].bool,
-  direct: PropTypes__default["default"].bool,
-  target: PropTypes__default["default"].string,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  direct: PropTypes.bool,
+  target: PropTypes.string,
   label: core.PropTypes.label,
   children: core.PropTypes.label,
-  focusable: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  icon: PropTypes__default["default"].node,
-  iconPosition: PropTypes__default["default"].oneOf(['left', 'right', 'inline']),
-  disabled: PropTypes__default["default"].bool,
-  loading: PropTypes__default["default"].bool,
-  disableOnLoading: PropTypes__default["default"].bool,
-  small: PropTypes__default["default"].bool,
-  big: PropTypes__default["default"].bool,
-  withShadow: PropTypes__default["default"].bool,
-  withoutStyle: PropTypes__default["default"].bool,
-  withoutBootstrapStyles: PropTypes__default["default"].bool,
-  withoutTheme: PropTypes__default["default"].bool,
-  outline: PropTypes__default["default"].bool,
-  asLink: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  iconClassName: PropTypes__default["default"].string,
-  labelClassName: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  refButton: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
-    current: PropTypes__default["default"].any // eslint-disable-line
+  focusable: PropTypes.bool,
+  active: PropTypes.bool,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  disableOnLoading: PropTypes.bool,
+  small: PropTypes.bool,
+  big: PropTypes.bool,
+  withShadow: PropTypes.bool,
+  withoutStyle: PropTypes.bool,
+  withoutBootstrapStyles: PropTypes.bool,
+  withoutTheme: PropTypes.bool,
+  outline: PropTypes.bool,
+  asLink: PropTypes.bool,
+  className: PropTypes.string,
+  iconClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
   })])
 };
 
@@ -176,7 +137,7 @@ var defaultProps$S = {
   refButton: null
 };
 var Button$1 = function Button(_ref) {
-  var _ref7, _ref8;
+  var _ref8;
   var type = _ref.type,
     theme = _ref.theme,
     size = _ref.size,
@@ -206,40 +167,40 @@ var Button$1 = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
+  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, 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__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$x.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
-  }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$x.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
-  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$x.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
-  }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$x.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
-  }, text), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$x.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$x.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$x.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$x.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+  }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$x.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text), /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$x.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
-  var buttonClassNames = classNames__default["default"]([!withoutBootstrapStyles ? (_ref7 = {
+  var buttonClassNames = classNames([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
     btn: withStyle
-  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$x.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$x.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$x.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$x.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$x.withText, text !== null), _defineProperty__default["default"](_ref8, styles$x.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$x.isSmall, small), _defineProperty__default["default"](_ref8, styles$x.isBig, big), _defineProperty__default["default"](_ref8, styles$x.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$x.asLink, asLink), _defineProperty__default["default"](_ref8, styles$x.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$x.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
+  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$x.container, (_ref8 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref8, styles$x.withoutStyle, withoutStyle), styles$x.withIcon, hasIcon), styles$x.withIconColumns, hasIconColumns), styles$x.withText, text !== null), styles$x.withShadow, withShadow), styles$x.isSmall, small), styles$x.isBig, big), styles$x.isLink, href !== null), styles$x.asLink, asLink), styles$x.isDisabled, disabled), _defineProperty(_defineProperty(_ref8, styles$x.isLoading, loading), className, className !== null))]);
   if (href !== null) {
-    var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
+    var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
     }, styles$x.linkDisabled, disabled)]);
-    return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
+    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
       onClick: onClick,
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+    }), content) : /*#__PURE__*/React.createElement(reactRouterDom.Link, {
       to: href,
       className: linkClassNames,
       onClick: onClick,
@@ -247,7 +208,7 @@ var Button$1 = function Button(_ref) {
       tabIndex: focusable ? '' : '-1'
     }, content);
   }
-  return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
     type: type,
     className: buttonClassNames,
     onClick: onClick,
@@ -266,10 +227,10 @@ var propTypes$R = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
-  renderButton: PropTypes__default["default"].func,
-  onClickButton: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string,
-  buttonClassName: PropTypes__default["default"].string
+  renderButton: PropTypes.func,
+  onClickButton: PropTypes.func,
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string
 };
 var defaultProps$R = {
   buttons: [],
@@ -288,21 +249,20 @@ var Buttons = function Buttons(_ref) {
     onClickButton = _ref.onClickButton,
     buttonClassName = _ref.buttonClassName,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$w.container, _defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$w.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
-    var _ref4;
     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__default["default"](button, _excluded$a);
+      buttonProps = _objectWithoutProperties(button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames__default["default"]([styles$w.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$w.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -313,7 +273,7 @@ var Buttons = function Buttons(_ref) {
       },
       theme: buttonTheme || theme
     };
-    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
+    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
 Buttons.propTypes = propTypes$R;
@@ -321,18 +281,18 @@ Buttons.defaultProps = defaultProps$R;
 
 var _excluded$9 = ["className"];
 var propTypes$Q = {
-  className: PropTypes__default["default"].string
+  className: PropTypes.string
 };
 var defaultProps$Q = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
-  return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
-    className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
+    className: classNames(['px-2', _defineProperty({}, className, className)]),
     size: "sm",
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: faAngleLeft.faAngleLeft,
       size: "lg"
     })
@@ -344,17 +304,17 @@ BackButton.defaultProps = defaultProps$Q;
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
 var propTypes$P = {
-  name: PropTypes__default["default"].string,
+  name: PropTypes.string,
   // .isRequired,
   value: core.PropTypes.component,
-  form: PropTypes__default["default"].string,
+  form: PropTypes.string,
   formComponents: core.PropTypes.components,
   fields: core.PropTypes.fields,
-  className: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
-  gotoFieldForm: PropTypes__default["default"].func.isRequired,
-  closeFieldForm: PropTypes__default["default"].func.isRequired,
-  fieldContext: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  fieldContext: PropTypes.any // eslint-disable-line react/forbid-prop-types
 };
 
 var defaultProps$P = {
@@ -383,18 +343,18 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? null : _ref2$type,
-    fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$8);
+    fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
-  var fieldData = fieldDefinition || _objectSpread__default["default"]({}, field);
+  var fieldData = fieldDefinition || _objectSpread({}, field);
   var _ref3 = fieldData || {},
     _ref3$component = _ref3.component,
     fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
     _ref3.id;
     _ref3.settings;
-    var definitionProps = _objectWithoutProperties__default["default"](_ref3, _excluded2);
+    var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
   var FieldComponent = contexts.useFieldComponent(fieldComponent);
   var FormComponent = utils.getComponentFromName(form, formComponents);
-  var fieldValue = get__default["default"](value, name, null);
+  var fieldValue = get(value, name, null);
   var onFieldChange = function onFieldChange(newFieldValue) {
     // const { name, fields: subFields = null } = field || {};
     var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue
@@ -417,9 +377,9 @@ var FieldForm = function FieldForm(_ref) {
     closeForm: closeForm
   };
   if (form !== null) {
-    return FormComponent !== null ? /*#__PURE__*/React__default["default"].createElement(contexts.FieldContextProvider, {
+    return FormComponent !== null ? /*#__PURE__*/React.createElement(contexts.FieldContextProvider, {
       context: fieldContext
-    }, /*#__PURE__*/React__default["default"].createElement(FormComponent, Object.assign({
+    }, /*#__PURE__*/React.createElement(FormComponent, Object.assign({
       field: field
     }, formProps, {
       className: className
@@ -427,9 +387,9 @@ var FieldForm = function FieldForm(_ref) {
   }
 
   // Use field component with isForm props
-  return FieldComponent !== null ? /*#__PURE__*/React__default["default"].createElement(contexts.FieldContextProvider, {
+  return FieldComponent !== null ? /*#__PURE__*/React.createElement(contexts.FieldContextProvider, {
     context: fieldContext
-  }, /*#__PURE__*/React__default["default"].createElement(FieldComponent, Object.assign({
+  }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
     className: className
   }, definitionProps, fieldProps, {
     isForm: true
@@ -441,40 +401,40 @@ FieldForm.defaultProps = defaultProps$P;
 var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var propTypes$O = {
-  action: PropTypes__default["default"].string.isRequired,
-  method: PropTypes__default["default"].string,
+  action: PropTypes.string.isRequired,
+  method: PropTypes.string,
   fields: core.PropTypes.formFields,
-  initialValue: PropTypes__default["default"].object,
+  initialValue: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  postForm: PropTypes__default["default"].func,
+  postForm: PropTypes.func,
   submitButtonLabel: core.PropTypes.label,
   submitButtonLoadingLabel: core.PropTypes.label,
-  submitButtonTheme: PropTypes__default["default"].string,
-  cancelButtonTheme: PropTypes__default["default"].string,
+  submitButtonTheme: PropTypes.string,
+  cancelButtonTheme: PropTypes.string,
   buttons: core.PropTypes.buttons,
-  children: PropTypes__default["default"].node,
-  actionsAlign: PropTypes__default["default"].oneOf(['left', 'right']),
-  withoutActions: PropTypes__default["default"].bool,
-  withoutComplete: PropTypes__default["default"].bool,
-  withoutBackButton: PropTypes__default["default"].bool,
-  onComplete: PropTypes__default["default"].func,
-  onResponse: PropTypes__default["default"].func,
-  onMessage: PropTypes__default["default"].func,
-  onCancel: PropTypes__default["default"].func,
-  onCancelHref: PropTypes__default["default"].string,
-  onOpenFieldForm: PropTypes__default["default"].func,
-  onCloseFieldForm: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string,
-  fieldsClassName: PropTypes__default["default"].string,
-  actionsClassName: PropTypes__default["default"].string,
-  cancelClassName: PropTypes__default["default"].string
+  children: PropTypes.node,
+  actionsAlign: PropTypes.oneOf(['left', 'right']),
+  withoutActions: PropTypes.bool,
+  withoutComplete: PropTypes.bool,
+  withoutBackButton: PropTypes.bool,
+  onComplete: PropTypes.func,
+  onResponse: PropTypes.func,
+  onMessage: PropTypes.func,
+  onCancel: PropTypes.func,
+  onCancelHref: PropTypes.string,
+  onOpenFieldForm: PropTypes.func,
+  onCloseFieldForm: PropTypes.func,
+  className: PropTypes.string,
+  fieldsClassName: PropTypes.string,
+  actionsClassName: PropTypes.string,
+  cancelClassName: PropTypes.string
 };
 var defaultProps$O = {
   method: 'POST',
   fields: [],
   initialValue: null,
   postForm: null,
-  submitButtonLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  submitButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "ZLDmja",
     defaultMessage: [{
       "type": 0,
@@ -503,7 +463,6 @@ var defaultProps$O = {
   cancelClassName: null
 };
 var Form = function Form(_ref) {
-  var _ref4;
   var action = _ref.action,
     method = _ref.method,
     initialFields = _ref.fields,
@@ -531,7 +490,7 @@ var Form = function Form(_ref) {
     actionsClassName = _ref.actionsClassName,
     cancelClassName = _ref.cancelClassName;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     complete = _useState2[0],
     setComplete = _useState2[1];
   React.useEffect(function () {
@@ -579,21 +538,21 @@ var Form = function Form(_ref) {
   }, [response, onResponse, onMessage]);
   var canSave = utils.validateFields(fields, value);
   var _useState3 = React.useState([]),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     fieldPaths = _useState4[0],
     setFieldPaths = _useState4[1];
   var gotoFieldForm = React.useCallback(function (field) {
     var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
-    setFieldPaths([].concat(_toConsumableArray__default["default"](fieldPaths), [fieldKey]));
+    setFieldPaths([].concat(_toConsumableArray(fieldPaths), [fieldKey]));
     if (onOpenFieldForm !== null) {
       onOpenFieldForm();
     }
   }, [fieldPaths, setFieldPaths]);
   var closeFieldForm = React.useCallback(function () {
-    var newFields = _toConsumableArray__default["default"](fieldPaths);
+    var newFields = _toConsumableArray(fieldPaths);
     newFields.pop();
-    setFieldPaths(_toConsumableArray__default["default"](newFields));
+    setFieldPaths(_toConsumableArray(newFields));
     if (onCloseFieldForm !== null) {
       onCloseFieldForm();
     }
@@ -609,63 +568,63 @@ var Form = function Form(_ref) {
   //     styles,
   // );
 
-  return /*#__PURE__*/React__default["default"].createElement("form", {
+  return /*#__PURE__*/React.createElement("form", {
     action: action,
-    className: classNames__default["default"]([styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
-  }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
     className: "mb-2"
-  }, /*#__PURE__*/React__default["default"].createElement(BackButton, {
+  }, /*#__PURE__*/React.createElement(BackButton, {
     theme: "secondary",
     outline: true,
     onClick: closeFieldForm
-  })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$v.panel]),
+  })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$v.panel]),
     key: "field"
-  }, /*#__PURE__*/React__default["default"].createElement(FieldForm, {
+  }, /*#__PURE__*/React.createElement(FieldForm, {
     name: fieldName,
     fields: fields,
     value: value,
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
-  })) : null, FieldsComponent && fields !== null && fields.length > 0 && fieldParams === null ? /*#__PURE__*/React__default["default"].createElement(FieldsComponent, {
+  })) : 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__default["default"]([styles$v.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
-  }) : null, generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
+    className: classNames([styles$v.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+  }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
     className: "text-danger my-1"
-  }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$v.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$v[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
-  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$v.actions, _defineProperty(_defineProperty({}, styles$v[actionsAlign], actionsAlign), actionsClassName, actionsClassName !== null)])
+  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
     href: onCancelHref,
     theme: cancelButtonTheme || 'secondary',
     outline: true,
     disabled: status === 'loading',
-    className: classNames__default["default"](['me-2', _defineProperty__default["default"]({}, cancelClassName, cancelClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    className: classNames(['me-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "PyxZY2",
     defaultMessage: [{
       "type": 0,
       "value": "Cancel"
     }]
-  })) : null, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
+  })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
     className: styles$v.buttons
-  }) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }) : /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
     theme: submitButtonTheme || 'primary',
     disabled: status === 'loading' || !canSave
-  }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React__default["default"].createElement("p", {
+  }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React.createElement("p", {
     className: "text-success mx-2 my-1"
-  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
     id: "BpZoQZ",
     defaultMessage: [{
       "type": 0,
@@ -680,13 +639,13 @@ var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$N = {
-  href: PropTypes__default["default"].string,
-  external: PropTypes__default["default"].bool,
-  target: PropTypes__default["default"].string,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  target: PropTypes.string,
   children: core.PropTypes.label,
-  rel: PropTypes__default["default"].string,
-  withoutStyle: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  rel: PropTypes.string,
+  withoutStyle: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$N = {
   href: '',
@@ -705,49 +664,49 @@ var Link = function Link(_ref) {
     rel = _ref.rel,
     className = _ref.className,
     withoutStyle = _ref.withoutStyle,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
-  return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$u.withoutStyle, withoutStyle)]),
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return external ? /*#__PURE__*/React.createElement("a", Object.assign({
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
-  }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children)) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$u.withoutStyle, withoutStyle)]),
+  }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(reactRouterDom.Link, Object.assign({
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     to: href
-  }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
+  }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
 Link.propTypes = propTypes$N;
 Link.defaultProps = defaultProps$N;
 
 var _excluded$6 = ["label", "className"];
 var propTypes$M = {
-  href: PropTypes__default["default"].string,
-  header: PropTypes__default["default"].node,
-  image: PropTypes__default["default"].node,
-  imageAlt: PropTypes__default["default"].string,
-  imageOverlay: PropTypes__default["default"].bool,
-  beforeBody: PropTypes__default["default"].node,
+  href: PropTypes.string,
+  header: PropTypes.node,
+  image: PropTypes.node,
+  imageAlt: PropTypes.string,
+  imageOverlay: PropTypes.bool,
+  beforeBody: PropTypes.node,
   title: core.PropTypes.label,
   subtitle: core.PropTypes.label,
-  children: PropTypes__default["default"].node,
-  afterBody: PropTypes__default["default"].node,
-  links: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+  children: PropTypes.node,
+  afterBody: PropTypes.node,
+  links: PropTypes.arrayOf(PropTypes.shape({
     label: core.PropTypes.label,
-    href: PropTypes__default["default"].string
+    href: PropTypes.string
   })),
-  linksInSameBody: PropTypes__default["default"].bool,
-  footer: PropTypes__default["default"].node,
-  theme: PropTypes__default["default"].oneOf([null, 'dark', 'primary', 'light']),
-  className: PropTypes__default["default"].string,
-  imageClassName: PropTypes__default["default"].string,
-  headerClassName: PropTypes__default["default"].string,
-  titleClassName: PropTypes__default["default"].string,
-  subtitleClassName: PropTypes__default["default"].string,
-  bodyClassName: PropTypes__default["default"].string,
-  footerClassName: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].func,
-  onClickBody: PropTypes__default["default"].func,
-  onClickFooter: PropTypes__default["default"].func
+  linksInSameBody: PropTypes.bool,
+  footer: PropTypes.node,
+  theme: PropTypes.oneOf([null, 'dark', 'primary', 'light']),
+  className: PropTypes.string,
+  imageClassName: PropTypes.string,
+  headerClassName: PropTypes.string,
+  titleClassName: PropTypes.string,
+  subtitleClassName: PropTypes.string,
+  bodyClassName: PropTypes.string,
+  footerClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  onClickBody: PropTypes.func,
+  onClickFooter: PropTypes.func
 };
 var defaultProps$M = {
   href: null,
@@ -776,7 +735,6 @@ var defaultProps$M = {
   onClickFooter: null
 };
 var Card = function Card(_ref) {
-  var _ref10;
   var href = _ref.href,
     header = _ref.header,
     image = _ref.image,
@@ -805,61 +763,61 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
       _ref2$className = _ref2.className,
       linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-      linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
-    return /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({
+      linkProps = _objectWithoutProperties(_ref2, _excluded$6);
+    return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
-      className: classNames__default["default"](['card-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)])
+      className: classNames(['card-link', _defineProperty({}, linkClassName, linkClassName !== null)])
     }, linkProps), label);
   });
-  var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
-    className: classNames__default["default"](['card-title', _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React__default["default"].createElement("h6", {
-    className: classNames__default["default"](['card-subtitle', _defineProperty__default["default"]({}, subtitleClassName, subtitleClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, subtitle)) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/React__default["default"].createElement("div", {
+  var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/React.createElement(React.Fragment, null, title !== null ? /*#__PURE__*/React.createElement("h5", {
+    className: classNames(['card-title', _defineProperty({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
+    className: classNames(['card-subtitle', _defineProperty({}, subtitleClassName, subtitleClassName !== null)])
+  }, /*#__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__default["default"].createElement(React__default["default"].Fragment, null, header !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-header', _defineProperty__default["default"]({}, headerClassName, headerClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
+  var cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, header !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-header', _defineProperty({}, headerClassName, headerClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: imageAlt,
-    className: classNames__default["default"](['card-img-top', _defineProperty__default["default"]({}, imageClassName, imageClassName !== null)])
-  }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/React__default["default"].createElement("button", {
+    className: classNames(['card-img-top', _defineProperty({}, imageClassName, imageClassName !== null)])
+  }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames__default["default"](_defineProperty__default["default"]({
+    className: classNames(_defineProperty({
       'card-body': !imageOverlay,
       'card-img-overlay': imageOverlay
     }, bodyClassName, bodyClassName !== null)),
     onClick: onClickBody
-  }, bodyInner) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](_defineProperty__default["default"]({
+  }, bodyInner) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(_defineProperty({
       'card-body': !imageOverlay,
       'card-img-overlay': imageOverlay
     }, bodyClassName, bodyClassName !== null))
-  }, bodyInner) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, bodyInner) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/React.createElement("div", {
     className: "card-body"
-  }, linksElements) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/React__default["default"].createElement("button", {
+  }, linksElements) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames__default["default"](['card-footer', _defineProperty__default["default"]({}, footerClassName, footerClassName !== null)]),
+    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)]),
     onClick: onClickFooter
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, footer)) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-footer', _defineProperty__default["default"]({}, footerClassName, footerClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, footer)) : null);
-  var cardClassName = classNames__default["default"](['card', (_ref10 = {}, _defineProperty__default["default"](_ref10, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), _defineProperty__default["default"](_ref10, 'bg-dark', imageOverlay || theme === 'dark'), _defineProperty__default["default"](_ref10, 'text-dark', theme === 'light'), _defineProperty__default["default"](_ref10, 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), _defineProperty__default["default"](_ref10, className, className !== null), _ref10)]);
+  }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className, className !== null)]);
   if (href !== null) {
-    return /*#__PURE__*/React__default["default"].createElement(Link, {
+    return /*#__PURE__*/React.createElement(Link, {
       href: href,
       className: cardClassName
     }, cardInner);
   }
   if (onClick !== null) {
-    return /*#__PURE__*/React__default["default"].createElement("button", {
+    return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: classNames__default["default"](['p-0', 'text-start', cardClassName]),
+      className: classNames(['p-0', 'text-start', cardClassName]),
       onClick: onClick
     }, cardInner);
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: cardClassName
   }, cardInner);
 };
@@ -869,10 +827,10 @@ Card.defaultProps = defaultProps$M;
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
 
 var propTypes$L = {
-  animated: PropTypes__default["default"].bool,
-  color: PropTypes__default["default"].string,
-  strokeWidth: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string
+  animated: PropTypes.bool,
+  color: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  className: PropTypes.string
 };
 var defaultProps$L = {
   animated: true,
@@ -881,18 +839,17 @@ var defaultProps$L = {
   className: null
 };
 var Spinner = function Spinner(_ref) {
-  var _ref2;
   var animated = _ref.animated,
     color = _ref.color,
     strokeWidth = _ref.strokeWidth,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$t.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$t.animated, animated), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+  return /*#__PURE__*/React.createElement("svg", {
+    className: classNames([styles$t.container, _defineProperty(_defineProperty({}, styles$t.animated, animated), className, className !== null)]),
     width: "40",
     height: "40",
     viewBox: "0 0 40 40",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+  }, /*#__PURE__*/React.createElement("circle", {
     className: styles$t.path,
     cx: "20",
     cy: "20",
@@ -909,10 +866,10 @@ var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
 var propTypes$K = {
-  description: PropTypes__default["default"].node,
-  loading: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string
+  description: PropTypes.node,
+  loading: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 var defaultProps$K = {
   description: null,
@@ -925,17 +882,17 @@ var FormPanel = function FormPanel(_ref) {
     loading = _ref.loading,
     children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
-  return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
-    className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, props), description, loading ? /*#__PURE__*/React__default["default"].createElement(Spinner, null) : children);
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/React.createElement(Card, Object.assign({
+    className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
+  }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
 FormPanel.propTypes = propTypes$K;
 FormPanel.defaultProps = defaultProps$K;
 
 var propTypes$J = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$J = {
   className: null,
@@ -944,14 +901,14 @@ var defaultProps$J = {
 var ArrowIcon = function ArrowIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "14",
     viewBox: "0 0 20 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__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",
@@ -962,8 +919,8 @@ ArrowIcon.propTypes = propTypes$J;
 ArrowIcon.defaultProps = defaultProps$J;
 
 var propTypes$I = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$I = {
   className: null,
@@ -972,19 +929,19 @@ var defaultProps$I = {
 var CloseIcon = function CloseIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "22",
     height: "22",
     viewBox: "0 0 22 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     d: "M1 1L21 21",
     stroke: color,
     strokeWidth: "1.5",
     strokeLinecap: "round"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     d: "M1 21L21 0.999998",
     stroke: color,
     strokeWidth: "1.5",
@@ -995,8 +952,8 @@ CloseIcon.propTypes = propTypes$I;
 CloseIcon.defaultProps = defaultProps$I;
 
 var propTypes$H = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$H = {
   className: null,
@@ -1005,14 +962,14 @@ var defaultProps$H = {
 var FullscreenIcon = function FullscreenIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "16",
     height: "14",
     viewBox: "0 0 16 14",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__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
   }));
@@ -1021,8 +978,8 @@ FullscreenIcon.propTypes = propTypes$H;
 FullscreenIcon.defaultProps = defaultProps$H;
 
 var propTypes$G = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$G = {
   className: null,
@@ -1031,20 +988,20 @@ var defaultProps$G = {
 var LinkIcon = function LinkIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__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__default["default"].createElement("path", {
+  }), /*#__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",
@@ -1056,8 +1013,8 @@ LinkIcon.propTypes = propTypes$G;
 LinkIcon.defaultProps = defaultProps$G;
 
 var propTypes$F = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$F = {
   className: null,
@@ -1066,20 +1023,20 @@ var defaultProps$F = {
 var MuteIcon = function MuteIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "26",
     height: "26",
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__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__default["default"].createElement("path", {
+  }), /*#__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__default["default"].createElement("path", {
+  }), /*#__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
   }));
@@ -1088,8 +1045,8 @@ MuteIcon.propTypes = propTypes$F;
 MuteIcon.defaultProps = defaultProps$F;
 
 var propTypes$E = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$E = {
   className: null,
@@ -1098,19 +1055,19 @@ var defaultProps$E = {
 var PauseIcon = function PauseIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     className: className,
     width: "14",
     height: "18",
     viewBox: "0 0 14 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("rect", {
+  }, /*#__PURE__*/React.createElement("rect", {
     width: "6",
     height: "18",
     rx: "2",
     fill: color
-  }), /*#__PURE__*/React__default["default"].createElement("rect", {
+  }), /*#__PURE__*/React.createElement("rect", {
     x: "8",
     width: "6",
     height: "18",
@@ -1122,8 +1079,8 @@ PauseIcon.propTypes = propTypes$E;
 PauseIcon.defaultProps = defaultProps$E;
 
 var propTypes$D = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$D = {
   className: null,
@@ -1132,14 +1089,14 @@ var defaultProps$D = {
 var PlayIcon = function PlayIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "20",
     height: "23",
     viewBox: "0 0 20 23",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     d: "M16.25 12.5574L2.74999 20.3516C1.74999 20.9289 0.499993 20.2073 0.499993 19.0526L0.499994 3.4641C0.499994 2.3094 1.74999 1.58771 2.74999 2.16506L16.25 9.95929C17.25 10.5366 17.25 11.98 16.25 12.5574Z",
     fill: color,
     stroke: color
@@ -1149,8 +1106,8 @@ PlayIcon.propTypes = propTypes$D;
 PlayIcon.defaultProps = defaultProps$D;
 
 var propTypes$C = {
-  className: PropTypes__default["default"].string,
-  color: PropTypes__default["default"].string
+  className: PropTypes.string,
+  color: PropTypes.string
 };
 var defaultProps$C = {
   className: null,
@@ -1159,17 +1116,17 @@ var defaultProps$C = {
 var UnmuteIcon = function UnmuteIcon(_ref) {
   var color = _ref.color,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("svg", {
     width: "26",
     height: "26",
     viewBox: "0 0 26 26",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__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__default["default"].createElement("path", {
+  }), /*#__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",
@@ -1184,10 +1141,10 @@ var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"
 var propTypes$B = {
   items: core.PropTypes.menuItems,
   theme: core.PropTypes.bootstrapThemes,
-  separator: PropTypes__default["default"].oneOf([null, 'arrow']),
-  withoutBar: PropTypes__default["default"].bool,
-  noWrap: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  separator: PropTypes.oneOf([null, 'arrow']),
+  withoutBar: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$B = {
   items: [],
@@ -1204,36 +1161,35 @@ var Breadcrumb = function Breadcrumb(_ref) {
     withoutBar = _ref.withoutBar,
     noWrap = _ref.noWrap,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("nav", {
+  return /*#__PURE__*/React.createElement("nav", {
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement("ol", {
-    className: classNames__default["default"]([styles$r.container, 'breadcrumb', 'mb-0', {
+  }, /*#__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 _ref3;
     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__default["default"].createElement("li", {
-      className: classNames__default["default"](['breadcrumb-item', (_ref3 = {
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
         active: active
-      }, _defineProperty__default["default"](_ref3, styles$r.arrow, separator === 'arrow'), _defineProperty__default["default"](_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
       key: "item-".concat(index)
-    }, active ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
+    }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(reactRouterDom.Link, {
       to: url,
       onClick: onClick,
-      className: classNames__default["default"](['font-weight-bold', 'text-decoration-none', _defineProperty__default["default"]({}, "text-".concat(theme), theme !== null)])
-    }, /*#__PURE__*/React__default["default"].createElement(Label, null, label)) : null, !active && onClick ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
+      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__default["default"](['font-weight-bold', 'text-decoration-none', _defineProperty__default["default"]({}, "text-".concat(theme), theme !== null)])
-    }, /*#__PURE__*/React__default["default"].createElement(Label, null, label)) : null);
+      className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
+    }, /*#__PURE__*/React.createElement(Label, null, label)) : null);
   })));
 };
 Breadcrumb.propTypes = propTypes$B;
@@ -1242,13 +1198,13 @@ Breadcrumb.defaultProps = defaultProps$B;
 var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
 var propTypes$A = {
   items: core.PropTypes.menuItems,
-  children: PropTypes__default["default"].node,
-  visible: PropTypes__default["default"].bool,
+  children: PropTypes.node,
+  visible: PropTypes.bool,
   align: core.PropTypes.dropdownAlign,
-  className: PropTypes__default["default"].string,
-  itemClassName: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func,
-  onClickOutside: PropTypes__default["default"].func
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  onClickItem: PropTypes.func,
+  onClickOutside: PropTypes.func
 };
 var defaultProps$A = {
   items: [],
@@ -1261,7 +1217,6 @@ var defaultProps$A = {
   onClickOutside: null
 };
 var Dropdown = function Dropdown(_ref) {
-  var _ref2;
   var items = _ref.items,
     children = _ref.children,
     visible = _ref.visible,
@@ -1272,7 +1227,7 @@ var Dropdown = function Dropdown(_ref) {
     onClickOutside = _ref.onClickOutside;
   var refContainer = React.useRef(null);
   var _useState = React.useState(visible),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     enabled = _useState2[0],
     setEnabled = _useState2[1];
   var onDocumentClick = React.useCallback(function (e) {
@@ -1291,11 +1246,10 @@ var Dropdown = function Dropdown(_ref) {
       clearTimeout(id);
     };
   }, [visible, setEnabled]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['dropdown-menu', (_ref2 = {}, _defineProperty__default["default"](_ref2, "dropdown-menu-".concat(align), align !== null), _defineProperty__default["default"](_ref2, "show", visible), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className, className !== null)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
-    var _ref3;
     var _it$type = it.type,
       type = _it$type === void 0 ? 'link' : _it$type,
       _it$className = it.className,
@@ -1308,7 +1262,7 @@ var Dropdown = function Dropdown(_ref) {
       customOnClick = _it$onClick === void 0 ? null : _it$onClick,
       _it$active = it.active,
       active = _it$active === void 0 ? false : _it$active,
-      itemProps = _objectWithoutProperties__default["default"](it, _excluded$4);
+      itemProps = _objectWithoutProperties(it, _excluded$4);
     var ItemComponent = 'div';
     if (type === 'link') {
       ItemComponent = Link;
@@ -1327,17 +1281,17 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
+    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
       key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
-    }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
-      className: classNames__default["default"]([(_ref3 = {
+    }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
+      className: classNames([_defineProperty(_defineProperty({
         'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
         'dropdown-header': type === 'header',
         active: active
-      }, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, customClassName, customClassName !== null), _ref3)]),
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null)]),
       onClick: finalOnClickItem
-    }, itemProps), label !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : itemChildren)) : null;
+    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
   }));
 };
 Dropdown.propTypes = propTypes$A;
@@ -1346,21 +1300,21 @@ Dropdown.defaultProps = defaultProps$A;
 var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
 var propTypes$z = {
   items: core.PropTypes.menuItems,
-  tagName: PropTypes__default["default"].string,
-  itemTagName: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node,
-  linkAsItem: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  itemClassName: PropTypes__default["default"].string,
-  linkClassName: PropTypes__default["default"].string,
-  hasSubMenuClassName: PropTypes__default["default"].string,
-  subMenuClassName: PropTypes__default["default"].string,
-  subMenuItemClassName: PropTypes__default["default"].string,
-  subMenuLinkClassName: PropTypes__default["default"].string,
-  hasDropdownClassName: PropTypes__default["default"].string,
-  dropdownClassName: PropTypes__default["default"].string,
-  dropdownItemClassName: PropTypes__default["default"].string,
-  dropdownLinkClassName: PropTypes__default["default"].string,
+  tagName: PropTypes.string,
+  itemTagName: PropTypes.string,
+  children: PropTypes.node,
+  linkAsItem: PropTypes.bool,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  linkClassName: PropTypes.string,
+  hasSubMenuClassName: PropTypes.string,
+  subMenuClassName: PropTypes.string,
+  subMenuItemClassName: PropTypes.string,
+  subMenuLinkClassName: PropTypes.string,
+  hasDropdownClassName: PropTypes.string,
+  dropdownClassName: PropTypes.string,
+  dropdownItemClassName: PropTypes.string,
+  dropdownLinkClassName: PropTypes.string,
   dropdownAlign: core.PropTypes.dropdownAlign
 };
 var defaultProps$z = {
@@ -1403,14 +1357,13 @@ var Menu = function Menu(_ref) {
   var _useState = React.useState(items.map(function () {
       return false;
     })),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     dropdownsVisible = _useState2[0],
     setDropdownsVisible = _useState2[1];
   var ListComponent = linkAsItem ? 'div' : tagName;
-  return /*#__PURE__*/React__default["default"].createElement(ListComponent, {
+  return /*#__PURE__*/React.createElement(ListComponent, {
     className: className
   }, children !== null ? children : items.map(function (it, index) {
-    var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7, _classNames8;
     var id = it.id,
       _it$className = it.className,
       customClassName = _it$className === void 0 ? null : _it$className,
@@ -1429,51 +1382,51 @@ var Menu = function Menu(_ref) {
       active = _it$active === void 0 ? false : _it$active,
       _it$onClick = it.onClick,
       customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-      itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
+      itemProps = _objectWithoutProperties(it, _excluded$3);
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
-      setDropdownsVisible([].concat(_toConsumableArray__default["default"](dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray__default["default"](dropdownsVisible.slice(index + 1))));
+      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__default["default"](dropdownsVisible.slice(0, index)), [false], _toConsumableArray__default["default"](dropdownsVisible.slice(index + 1))));
+      setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
     } : null;
     var ItemComponent = itemTagName;
-    return linkAsItem ? /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({}, itemProps, {
+    return linkAsItem ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
       key: "item-".concat(id || index),
       onClick: onClickItem,
       href: href,
       external: external,
-      className: classNames__default["default"]((_classNames = {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         active: active
-      }, _defineProperty__default["default"](_classNames, itemClassName, itemClassName !== null), _defineProperty__default["default"](_classNames, customClassName, customClassName !== null), _defineProperty__default["default"](_classNames, linkClassName, linkClassName !== null), _defineProperty__default["default"](_classNames, customLinkClassName, customLinkClassName !== null), _classNames))
-    }), label) : /*#__PURE__*/React__default["default"].createElement(ItemComponent, {
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), linkClassName, linkClassName !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : /*#__PURE__*/React.createElement(ItemComponent, {
       key: "item-".concat(id || index),
-      className: classNames__default["default"]((_classNames2 = {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         dropdown: dropdown !== null,
         active: active
-      }, _defineProperty__default["default"](_classNames2, itemClassName, itemClassName !== null), _defineProperty__default["default"](_classNames2, customClassName, customClassName !== null), _defineProperty__default["default"](_classNames2, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), _defineProperty__default["default"](_classNames2, hasDropdownClassName, subItems !== null && hasDropdownClassName !== null), _classNames2))
-    }, href !== null ? /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({}, itemProps, {
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null))
+    }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
       onClick: onClickItem,
       href: href,
       external: external,
-      className: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, linkClassName, linkClassName !== null), _defineProperty__default["default"](_classNames3, 'dropdown-toggle', dropdown !== null), _defineProperty__default["default"](_classNames3, customLinkClassName, customLinkClassName !== null), _classNames3))
-    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({}, itemProps, {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
       onClick: onClickItem,
-      className: classNames__default["default"]((_classNames4 = {}, _defineProperty__default["default"](_classNames4, linkClassName, linkClassName !== null), _defineProperty__default["default"](_classNames4, 'dropdown-toggle', dropdown !== null), _defineProperty__default["default"](_classNames4, customLinkClassName, customLinkClassName !== null), _classNames4))
-    }), label) : null, subItems !== null ? /*#__PURE__*/React__default["default"].createElement(Menu, {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
       items: subItems,
       className: subMenuClassName,
-      itemClassName: classNames__default["default"]((_classNames5 = {}, _defineProperty__default["default"](_classNames5, subMenuItemClassName, subMenuItemClassName !== null), _defineProperty__default["default"](_classNames5, itemClassName, subMenuItemClassName === null && itemClassName !== null), _classNames5)),
-      linkClassName: classNames__default["default"]((_classNames6 = {}, _defineProperty__default["default"](_classNames6, subMenuLinkClassName, subMenuLinkClassName !== null), _defineProperty__default["default"](_classNames6, linkClassName, subMenuLinkClassName === null && linkClassName !== null), _classNames6))
-    }) : null, dropdown !== null ? /*#__PURE__*/React__default["default"].createElement(Dropdown, {
+      itemClassName: classNames(_defineProperty(_defineProperty({}, subMenuItemClassName, subMenuItemClassName !== null), itemClassName, subMenuItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, subMenuLinkClassName, subMenuLinkClassName !== null), linkClassName, subMenuLinkClassName === null && linkClassName !== null))
+    }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
       items: dropdown,
       visible: dropdownsVisible[index] || false,
       className: dropdownClassName,
-      itemClassName: classNames__default["default"]((_classNames7 = {}, _defineProperty__default["default"](_classNames7, dropdownItemClassName, dropdownItemClassName !== null), _defineProperty__default["default"](_classNames7, itemClassName, dropdownItemClassName === null && itemClassName !== null), _classNames7)),
-      linkClassName: classNames__default["default"]((_classNames8 = {}, _defineProperty__default["default"](_classNames8, dropdownLinkClassName, dropdownLinkClassName !== null), _defineProperty__default["default"](_classNames8, linkClassName, dropdownLinkClassName === null && linkClassName !== null), _classNames8)),
+      itemClassName: classNames(_defineProperty(_defineProperty({}, dropdownItemClassName, dropdownItemClassName !== null), itemClassName, dropdownItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, dropdownLinkClassName, dropdownLinkClassName !== null), linkClassName, dropdownLinkClassName === null && linkClassName !== null)),
       align: dropdownAlign,
       onClickItem: closeDropdown,
       onClickOutside: closeDropdown
@@ -1486,20 +1439,20 @@ Menu.defaultProps = defaultProps$z;
 var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
 
 var propTypes$y = {
-  brand: PropTypes__default["default"].node,
-  brandLink: PropTypes__default["default"].string,
-  breadcrumbs: PropTypes__default["default"].node,
-  theme: PropTypes__default["default"].oneOf(['light', 'dark', 'primary', null]),
-  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
-  compact: PropTypes__default["default"].bool,
-  noWrap: PropTypes__default["default"].bool,
-  withoutCollapse: PropTypes__default["default"].bool,
-  withoutCollapseToggle: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string,
-  brandClassName: PropTypes__default["default"].string,
-  breadCrumbsClassName: PropTypes__default["default"].string,
-  collapseClassName: PropTypes__default["default"].string
+  brand: PropTypes.node,
+  brandLink: PropTypes.string,
+  breadcrumbs: PropTypes.node,
+  theme: PropTypes.oneOf(['light', 'dark', 'primary', null]),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  compact: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  withoutCollapse: PropTypes.bool,
+  withoutCollapseToggle: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  brandClassName: PropTypes.string,
+  breadCrumbsClassName: PropTypes.string,
+  collapseClassName: PropTypes.string
 };
 var defaultProps$y = {
   brand: null,
@@ -1518,7 +1471,6 @@ var defaultProps$y = {
   collapseClassName: null
 };
 var Navbar = function Navbar(_ref) {
-  var _ref2, _ref6;
   var brand = _ref.brand,
     brandLink = _ref.brandLink,
     breadcrumbs = _ref.breadcrumbs,
@@ -1534,42 +1486,42 @@ var Navbar = function Navbar(_ref) {
     breadCrumbsClassName = _ref.breadCrumbsClassName,
     collapseClassName = _ref.collapseClassName;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     menuVisible = _useState2[0],
     setMenuVisible = _useState2[1];
   var onClickMenu = React.useCallback(function () {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
-  return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"](['navbar', (_ref2 = {}, _defineProperty__default["default"](_ref2, "bg-".concat(theme), theme !== null), _defineProperty__default["default"](_ref2, "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), _defineProperty__default["default"](_ref2, "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), _defineProperty__default["default"](_ref2, "navbar-expand-".concat(size), !withoutCollapse), _defineProperty__default["default"](_ref2, 'navbar-expand', withoutCollapse), _defineProperty__default["default"](_ref2, 'py-2', compact), _defineProperty__default["default"](_ref2, 'px-2', compact), _defineProperty__default["default"](_ref2, 'flex-nowrap', noWrap), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['container-fluid', {
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames(['navbar', _defineProperty(_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, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['container-fluid', {
       'px-0': compact
     }])
-  }, brand !== null && brandLink !== null ? /*#__PURE__*/React__default["default"].createElement(Link, {
-    className: classNames__default["default"](['navbar-brand', _defineProperty__default["default"]({
+  }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['navbar-brand', _defineProperty({
       'py-0': compact
     }, brandClassName, brandClassName !== null)]),
     to: brandLink
-  }, brand) : null, brand !== null && brandLink === null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"](['navbar-brand', _defineProperty__default["default"]({
+  }, brand) : null, brand !== null && brandLink === null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames(['navbar-brand', _defineProperty({
       'py-0': compact
     }, brandClassName, brandClassName !== null)])
-  }, brand) : null, breadcrumbs !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"](['navbar-breadcrumbs', _defineProperty__default["default"]({
+  }, brand) : null, breadcrumbs !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames(['navbar-breadcrumbs', _defineProperty({
       'py-0': compact
     }, breadCrumbsClassName, breadCrumbsClassName !== null)])
-  }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, 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__default["default"].createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "navbar-toggler-icon"
-  })) : null, !withoutCollapse ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['navbar-collapse', 'collapse', styles$q.collapse, (_ref6 = {}, _defineProperty__default["default"](_ref6, collapseClassName, collapseClassName !== null), _defineProperty__default["default"](_ref6, "show", menuVisible), _ref6)])
+  })) : null, !withoutCollapse ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, _defineProperty(_defineProperty({}, collapseClassName, collapseClassName !== null), "show", menuVisible)])
   }, children) : children));
 };
 Navbar.propTypes = propTypes$y;
@@ -1594,20 +1546,27 @@ var messages = reactIntl.defineMessages({
   }
 });
 var propTypes$x = {
-  page: PropTypes__default["default"].number,
-  total: PropTypes__default["default"].number,
-  url: PropTypes__default["default"].string,
-  withPreviousNext: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  paginationClassName: PropTypes__default["default"].string,
-  itemClassName: PropTypes__default["default"].string,
-  linkClassName: PropTypes__default["default"].string,
-  onClickPage: PropTypes__default["default"].func
+  page: PropTypes.number,
+  lastPage: PropTypes.number,
+  maxPages: PropTypes.number,
+  total: PropTypes.number,
+  url: PropTypes.string,
+  query: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  withPreviousNext: PropTypes.bool,
+  className: PropTypes.string,
+  paginationClassName: PropTypes.string,
+  itemClassName: PropTypes.string,
+  linkClassName: PropTypes.string,
+  onClickPage: PropTypes.func
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1616,9 +1575,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1626,53 +1588,80 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = React.useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray__default["default"](Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString.stringify(_objectSpread(_objectSpread({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
-  return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: classNames__default["default"](['pagination', _defineProperty__default["default"]({}, paginationClassName, paginationClassName !== null)])
-  }, withPreviousNext ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: classNames__default["default"](['page-item', _defineProperty__default["default"]({
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray(selectedPages), ['...', pageNumber]);
+    }
+    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, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames(['pagination', _defineProperty({}, paginationClassName, paginationClassName !== null)])
+  }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
+    className: classNames(['page-item', _defineProperty({
       disabled: page <= 1
     }, itemClassName, itemClassName !== null)])
-  }, page > 1 ? /*#__PURE__*/React__default["default"].createElement(Link, {
-    className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)]),
+  }, page > 1 ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
     href: getUrl(page - 1),
     onClick: onClickPage !== null ? function () {
       return onClickPage(page - 1);
     } : null
-  }, messages.previous) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
-    return /*#__PURE__*/React__default["default"].createElement("li", {
+  }, messages.previous) : /*#__PURE__*/React.createElement("span", {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
+    return /*#__PURE__*/React.createElement("li", {
       key: "page-".concat(pageNumber),
-      className: classNames__default["default"](['page-item', _defineProperty__default["default"]({
+      className: classNames(['page-item', _defineProperty({
         active: pageNumber === page
       }, itemClassName, itemClassName !== null)])
-    }, /*#__PURE__*/React__default["default"].createElement(Link, {
-      className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)]),
+    }, /*#__PURE__*/React.createElement(Link, {
+      className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
       href: getUrl(pageNumber),
       onClick: onClickPage !== null ? function () {
         return onClickPage(pageNumber);
       } : null
     }, pageNumber));
-  }), withPreviousNext ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: classNames__default["default"](['page-item', _defineProperty__default["default"]({
+  }), withPreviousNext ? /*#__PURE__*/React.createElement("li", {
+    className: classNames(['page-item', _defineProperty({
       disabled: page >= total
     }, itemClassName, itemClassName !== null)])
-  }, page < total ? /*#__PURE__*/React__default["default"].createElement(Link, {
-    className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)]),
+  }, page < total ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
     href: getUrl(page + 1),
     onClick: onClickPage !== null ? function () {
       return onClickPage(page + 1);
     } : null
-  }, messages.next) : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, messages.next))) : null));
+  }, messages.next) : /*#__PURE__*/React.createElement("span", {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
 };
 PaginationMenu.propTypes = propTypes$x;
 PaginationMenu.defaultProps = defaultProps$x;
@@ -1683,10 +1672,10 @@ var propTypes$w = {
   items: core.PropTypes.menuItems,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
-  renderItemButton: PropTypes__default["default"].func,
-  buttonClassName: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string,
-  onClickItem: PropTypes__default["default"].func
+  renderItemButton: PropTypes.func,
+  buttonClassName: PropTypes.string,
+  className: PropTypes.string,
+  onClickItem: PropTypes.func
 };
 var defaultProps$w = {
   items: [],
@@ -1705,16 +1694,16 @@ var TabsMenu = function TabsMenu(_ref) {
     buttonClassName = _ref.buttonClassName,
     className = _ref.className,
     onClickItem = _ref.onClickItem;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement(Buttons, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$o.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement(Buttons, {
     buttons: items,
     size: size,
     theme: theme,
     renderButton: renderItemButton,
     onClickButton: onClickItem,
     className: styles$o.buttons,
-    buttonClassName: classNames__default["default"]([styles$o.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)])
+    buttonClassName: classNames([styles$o.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
   }));
 };
 TabsMenu.propTypes = propTypes$w;
@@ -1724,8 +1713,8 @@ var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-
 
 var propTypes$v = {
   modals: core.PropTypes.modals.isRequired,
-  setModalsContainer: PropTypes__default["default"].func.isRequired,
-  className: PropTypes__default["default"].string
+  setModalsContainer: PropTypes.func.isRequired,
+  className: PropTypes.string
 };
 var defaultProps$v = {
   className: null
@@ -1738,10 +1727,10 @@ var ModalsContainer = function ModalsContainer(_ref) {
   React.useEffect(function () {
     setModalsContainer(containerRef.current);
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$n.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$n.modals, _defineProperty__default["default"]({}, styles$n.hasModals, modals.length > 0)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$n.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
     ref: containerRef
   }));
 };
@@ -1753,14 +1742,14 @@ var styles$m = {"container":"micromag-core-modals-modal-container","center":"mic
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$u = {
-  id: PropTypes__default["default"].string,
-  data: PropTypes__default["default"].object,
+  id: PropTypes.string,
+  data: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  container: PropTypes__default["default"].object,
+  container: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  register: PropTypes__default["default"].func,
-  unregister: PropTypes__default["default"].func,
-  children: PropTypes__default["default"].node
+  register: PropTypes.func,
+  unregister: PropTypes.func,
+  children: PropTypes.node
 };
 var defaultProps$u = {
   id: null,
@@ -1790,17 +1779,17 @@ var ElementPortal = function ElementPortal(_ref) {
       }
     };
   }, [finalId, data]);
-  return container !== null ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container) : null;
+  return container !== null ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
 };
 ElementPortal.propTypes = propTypes$u;
 ElementPortal.defaultProps = defaultProps$u;
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$t = {
-  id: PropTypes__default["default"].string,
-  data: PropTypes__default["default"].object,
+  id: PropTypes.string,
+  data: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  children: PropTypes__default["default"].node
+  children: PropTypes.node
 };
 var defaultProps$t = {
   id: null,
@@ -1817,7 +1806,7 @@ var ModalPortal = function ModalPortal(_ref) {
     register = _useModals$register === void 0 ? null : _useModals$register,
     _useModals$unregister = _useModals.unregister,
     unregister = _useModals$unregister === void 0 ? null : _useModals$unregister;
-  return /*#__PURE__*/React__default["default"].createElement(ElementPortal, {
+  return /*#__PURE__*/React.createElement(ElementPortal, {
     id: id,
     data: data,
     container: container,
@@ -1829,10 +1818,10 @@ ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
 
 var propTypes$s = {
-  id: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string,
-  position: PropTypes__default["default"].oneOf(['center', 'top']),
-  children: PropTypes__default["default"].node
+  id: PropTypes.string,
+  title: PropTypes.string,
+  position: PropTypes.oneOf(['center', 'top']),
+  children: PropTypes.node
 };
 var defaultProps$s = {
   id: null,
@@ -1853,13 +1842,13 @@ var Modal = function Modal(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React__default["default"].createElement(ModalPortal, {
+  return /*#__PURE__*/React.createElement(ModalPortal, {
     id: finalId,
     data: data
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$m.container, _defineProperty__default["default"]({}, styles$m[position], position !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$m.inner, 'bg-dark'])
+  }, /*#__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'])
   }, children)));
 };
 Modal.propTypes = propTypes$s;
@@ -1869,14 +1858,14 @@ var styles$l = {"container":"micromag-core-modals-dialog-container"};
 
 var propTypes$r = {
   title: core.PropTypes.label,
-  header: PropTypes__default["default"].node,
-  children: PropTypes__default["default"].node,
-  footer: PropTypes__default["default"].node,
+  header: PropTypes.node,
+  children: PropTypes.node,
+  footer: PropTypes.node,
   buttons: core.PropTypes.buttons,
   // theme: PropTypes.oneOf([null, 'dark', 'light']),
-  onClickClose: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string,
-  bodyClassName: PropTypes__default["default"].string
+  onClickClose: PropTypes.func,
+  className: PropTypes.string,
+  bodyClassName: PropTypes.string
 };
 var defaultProps$r = {
   title: null,
@@ -1898,29 +1887,29 @@ var ModalDialog = function ModalDialog(_ref) {
     onClickClose = _ref.onClickClose,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-dialog', styles$l.container, _defineProperty__default["default"]({}, className, className)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-dialog', styles$l.container, _defineProperty({}, className, className)]),
     role: "dialog"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
-  }, header || /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-header', 'p-2', styles$l.header, {
+  }, header || /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-header', 'p-2', styles$l.header, {
       // 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
-  }, /*#__PURE__*/React__default["default"].createElement("h5", {
+  }, /*#__PURE__*/React.createElement("h5", {
     className: "modal-title"
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React.createElement(Label, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "btn-close",
     "aria-label": "Close",
     onClick: onClickClose
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-body', 'p-2', styles$l.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
-  }, children), footer !== null || buttons !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-footer', styles$l.footer])
-  }, footer, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-body', 'p-2', styles$l.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+  }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-footer', styles$l.footer])
+  }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
     className: styles$l.buttons
   }) : null) : null));
@@ -1929,8 +1918,9 @@ ModalDialog.propTypes = propTypes$r;
 ModalDialog.defaultProps = defaultProps$r;
 
 // import classNames from 'classnames';
-var DashboardModal = /*#__PURE__*/React__default["default"].lazy(function () {
-  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/react')); }).then(function (_ref) {
+// import { DashboardModal } from '@uppy/react';
+var DashboardModal = /*#__PURE__*/React.lazy(function () {
+  return import('@uppy/react').then(function (_ref) {
     var Component = _ref.DashboardModal;
     return {
       "default": Component
@@ -1938,11 +1928,11 @@ var DashboardModal = /*#__PURE__*/React__default["default"].lazy(function () {
   });
 });
 var propTypes$q = {
-  type: PropTypes__default["default"].oneOfType([core.PropTypes.mediaTypes, PropTypes__default["default"].array]),
-  opened: PropTypes__default["default"].bool,
-  sources: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  onUploaded: PropTypes__default["default"].func,
-  onRequestClose: PropTypes__default["default"].func
+  type: PropTypes.oneOfType([core.PropTypes.mediaTypes, PropTypes.array]),
+  opened: PropTypes.bool,
+  sources: PropTypes.arrayOf(PropTypes.string),
+  onUploaded: PropTypes.func,
+  onRequestClose: PropTypes.func
 };
 var defaultProps$q = {
   type: null,
@@ -1963,7 +1953,7 @@ var UploadModal = function UploadModal(_ref2) {
     }
   }, [onUploaded]);
   var fileTypes = React.useMemo(function () {
-    if (isArray__default["default"](type)) {
+    if (isArray(type)) {
       return type.map(function (t) {
         return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
       }).filter(function (t) {
@@ -1982,9 +1972,9 @@ var UploadModal = function UploadModal(_ref2) {
       uppy.reset();
     }
   }, [uppy, opened]);
-  return uppy !== null ? /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React__default["default"].createElement("div", null)
-  }, /*#__PURE__*/React__default["default"].createElement(DashboardModal, {
+  return uppy !== null ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(DashboardModal, {
     uppy: uppy,
     open: opened,
     closeAfterFinish: true,
@@ -1999,8 +1989,8 @@ var styles$k = {"container":"micromag-core-panels-container"};
 
 var propTypes$p = {
   panels: core.PropTypes.panels,
-  setPanelsContainer: PropTypes__default["default"].func,
-  className: PropTypes__default["default"].string
+  setPanelsContainer: PropTypes.func,
+  className: PropTypes.string
 };
 var defaultProps$p = {
   panels: [],
@@ -2015,10 +2005,10 @@ var PanelsContainer = function PanelsContainer(_ref) {
   React.useEffect(function () {
     setPanelsContainer(containerRef.current);
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$k.container, _defineProperty__default["default"]({}, className, className)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$k.panels, _defineProperty__default["default"]({}, styles$k.hasPanels, panels.length > 0)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$k.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
     ref: containerRef
   }));
 };
@@ -2028,10 +2018,10 @@ var Panels = contexts.withPanels(PanelsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$o = {
-  id: PropTypes__default["default"].string,
-  data: PropTypes__default["default"].object,
+  id: PropTypes.string,
+  data: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
-  children: PropTypes__default["default"].node
+  children: PropTypes.node
 };
 var defaultProps$o = {
   id: null,
@@ -2053,7 +2043,7 @@ var PanelPortal = function PanelPortal(_ref) {
   if (panels === null) {
     return children;
   }
-  return /*#__PURE__*/React__default["default"].createElement(ElementPortal, {
+  return /*#__PURE__*/React.createElement(ElementPortal, {
     id: id,
     data: data,
     container: container,
@@ -2068,9 +2058,9 @@ var styles$j = {"container":"micromag-core-panels-panel-container"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var propTypes$n = {
-  id: PropTypes__default["default"].string,
-  title: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  id: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.node
 };
 var defaultProps$n = {
   id: null,
@@ -2089,10 +2079,10 @@ var Panel = function Panel(_ref) {
       title: title
     };
   }, [title]);
-  return /*#__PURE__*/React__default["default"].createElement(PanelPortal, {
+  return /*#__PURE__*/React.createElement(PanelPortal, {
     id: finalId,
     data: data
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$j.container
   }, children));
 };
@@ -2102,13 +2092,13 @@ Panel.defaultProps = defaultProps$n;
 var styles$i = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
 
 var propTypes$m = {
-  title: PropTypes__default["default"].node,
-  children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string,
-  topClassName: PropTypes__default["default"].string,
-  contentClassName: PropTypes__default["default"].string,
-  openedClassName: PropTypes__default["default"].string,
-  buttonClassName: PropTypes__default["default"].string
+  title: PropTypes.node,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  topClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
+  openedClassName: PropTypes.string,
+  buttonClassName: PropTypes.string
 };
 var defaultProps$m = {
   title: null,
@@ -2120,7 +2110,6 @@ var defaultProps$m = {
   buttonClassName: null
 };
 var CollapsablePanel = function CollapsablePanel(_ref) {
-  var _ref2;
   var title = _ref.title,
     children = _ref.children,
     className = _ref.className,
@@ -2129,38 +2118,38 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     openedClassName = _ref.openedClassName,
     buttonClassName = _ref.buttonClassName;
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     opened = _useState2[0],
     setOpened = _useState2[1];
   var onClick = React.useCallback(function () {
     return setOpened(!opened);
   }, [opened, setOpened]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$i.isOpened, opened), _defineProperty__default["default"](_ref2, openedClassName, opened && openedClassName !== null), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.top, _defineProperty__default["default"]({}, topClassName, topClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.container, _defineProperty(_defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null), className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.top, _defineProperty({}, topClassName, topClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Button$1, {
     withoutStyle: true,
-    className: classNames__default["default"]([styles$i.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
-    icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: classNames([styles$i.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
       icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
       className: styles$i.icon
     }),
     iconPosition: "right",
     labelClassName: styles$i.label,
     onClick: onClick
-  }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.content, _defineProperty__default["default"]({}, contentClassName, contentClassName !== null)])
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.content, _defineProperty({}, contentClassName, contentClassName !== null)])
   }, children));
 };
 CollapsablePanel.propTypes = propTypes$m;
 CollapsablePanel.defaultProps = defaultProps$m;
 
 var propTypes$l = {
-  stroke: PropTypes__default["default"].string,
-  border: PropTypes__default["default"].string,
-  fill: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  stroke: PropTypes.string,
+  border: PropTypes.string,
+  fill: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$l = {
   stroke: 'currentColor',
@@ -2173,31 +2162,31 @@ var Close = function Close(_ref) {
     border = _ref.border,
     fill = _ref.fill,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("svg", {
+  return /*#__PURE__*/React.createElement("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__default["default"].createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(-352.531 -47.531)"
-  }, border ? /*#__PURE__*/React__default["default"].createElement("path", {
+  }, 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__default["default"].createElement("path", {
+  }) : 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__default["default"].createElement("g", {
+  }), /*#__PURE__*/React.createElement("g", {
     transform: "translate(366.893 61.893)"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
+  }, /*#__PURE__*/React.createElement("g", {
     transform: "translate(0 0)"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
+  }, /*#__PURE__*/React.createElement("path", {
     fill: fill,
     stroke: stroke,
     strokeWidth: "2",
     strokeLinecap: "round",
     d: "M14.2,0.3L0,13.9"
-  }), /*#__PURE__*/React__default["default"].createElement("path", {
+  }), /*#__PURE__*/React.createElement("path", {
     fill: fill,
     stroke: stroke,
     strokeWidth: "2",
@@ -2210,9 +2199,9 @@ Close.defaultProps = defaultProps$l;
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$k = {
-  date: PropTypes__default["default"].string,
-  withTime: PropTypes__default["default"].bool,
-  timeSeparator: PropTypes__default["default"].node
+  date: PropTypes.string,
+  withTime: PropTypes.bool,
+  timeSeparator: PropTypes.node
 };
 var defaultProps$k = {
   date: null,
@@ -2224,14 +2213,14 @@ var Date$1 = function Date(_ref) {
     withTime = _ref.withTime,
     timeSeparator = _ref.timeSeparator;
   var dateObject = React.useMemo(function () {
-    return dayjs__default["default"](date).toDate();
+    return dayjs(date).toDate();
   }, [date]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedDate, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reactIntl.FormattedDate, {
     value: dateObject,
     year: "numeric",
     month: "long",
     day: "2-digit"
-  }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedTime, {
+  }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/React.createElement(reactIntl.FormattedTime, {
     value: dateObject
   }) : null);
 };
@@ -2240,14 +2229,14 @@ Date$1.defaultProps = defaultProps$k;
 
 /* eslint-disable react/no-danger */
 var propTypes$j = {
-  throttleDelay: PropTypes__default["default"].number,
-  threshold: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
-  onEnter: PropTypes__default["default"].func,
-  onLeave: PropTypes__default["default"].func,
-  onChange: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string
+  throttleDelay: PropTypes.number,
+  threshold: PropTypes.arrayOf(PropTypes.number),
+  onEnter: PropTypes.func,
+  onLeave: PropTypes.func,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string
 };
 var defaultProps$j = {
   throttleDelay: null,
@@ -2292,7 +2281,7 @@ var Detector = function Detector(_ref) {
         enteredRef.current = false;
       }
     };
-    return throttleDelay !== null ? throttle__default["default"](callback, throttleDelay, {
+    return throttleDelay !== null ? throttle(callback, throttleDelay, {
       trailing: true,
       leading: true
     }) : callback;
@@ -2308,7 +2297,7 @@ var Detector = function Detector(_ref) {
       }
     };
   }, [throttleDelay, isIntersecting, disabled, triggerChange]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: className,
     ref: ref
   }, children);
@@ -2319,13 +2308,13 @@ Detector.defaultProps = defaultProps$j;
 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"};
 
 var propTypes$i = {
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  outline: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  boxClassName: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node,
-  withInvertedColors: PropTypes__default["default"].bool
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  outline: PropTypes.bool,
+  className: PropTypes.string,
+  boxClassName: PropTypes.string,
+  children: PropTypes.node,
+  withInvertedColors: PropTypes.bool
 };
 var defaultProps$i = {
   width: '100%',
@@ -2337,7 +2326,6 @@ var defaultProps$i = {
   withInvertedColors: true
 };
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
-  var _ref2;
   var width = _ref.width,
     height = _ref.height,
     outline = _ref.outline,
@@ -2345,10 +2333,10 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
     boxClassName = _ref.boxClassName,
     withInvertedColors = _ref.withInvertedColors,
     children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _defineProperty__default["default"](_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$h.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$h.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
     style: {
       width: width,
       height: height
@@ -2363,14 +2351,14 @@ PlaceholderBlock.defaultProps = defaultProps$i;
 // import { PropTypes as MicromagPropTypes } from '@micromag/core';
 
 var propTypes$h = {
-  name: PropTypes__default["default"].string.isRequired,
-  components: PropTypes__default["default"].object.isRequired,
+  name: PropTypes.string.isRequired,
+  components: PropTypes.object.isRequired,
   // eslint-disable-line
-  props: PropTypes__default["default"].object,
+  props: PropTypes.object,
   // eslint-disable-line
-  isPlaceholder: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  placeholderProps: PropTypes__default["default"].object // eslint-disable-line
+  isPlaceholder: PropTypes.bool,
+  className: PropTypes.string,
+  placeholderProps: PropTypes.object // eslint-disable-line
 };
 
 var defaultProps$h = {
@@ -2392,13 +2380,13 @@ var ElementComponent = function ElementComponent(_ref) {
   if (isPlaceholder) {
     // TODO: figure out what this did
     // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, placeholderProps);
+    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
   }
   var RealComponent = components[utils.pascalCase(name)];
   if (!RealComponent) {
     return 'Bad component';
   }
-  return /*#__PURE__*/React__default["default"].createElement(RealComponent, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
     className: className
   }));
 };
@@ -2408,10 +2396,10 @@ ElementComponent.defaultProps = defaultProps$h;
 var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
 
 var propTypes$g = {
-  children: PropTypes__default["default"].node,
-  withoutBorder: PropTypes__default["default"].bool,
-  light: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  children: PropTypes.node,
+  withoutBorder: PropTypes.bool,
+  light: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$g = {
   children: null,
@@ -2420,16 +2408,15 @@ var defaultProps$g = {
   className: null
 };
 var Empty = function Empty(_ref) {
-  var _ref2;
   var children = _ref.children,
     withoutBorder = _ref.withoutBorder,
     light = _ref.light,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$g.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$g.container, _defineProperty(_defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light), className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.middle
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, children)));
+  }, /*#__PURE__*/React.createElement(Label, null, children)));
 };
 Empty.propTypes = propTypes$g;
 Empty.defaultProps = defaultProps$g;
@@ -2447,16 +2434,16 @@ var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
     _ref3$mime = _ref3.mime,
     originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
   var urls = formats.reduce(function (currentUrls, format) {
-    var finalFormat = isObject__default["default"](format) ? format.format : format;
-    var formatExtension = isObject__default["default"](format) ? format.name : format;
+    var finalFormat = isObject(format) ? format.format : format;
+    var formatExtension = isObject(format) ? format.name : format;
     var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
     if (file !== null) {
-      return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
     }
     var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
     var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
     if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
-      return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
     }
     return currentUrls;
   }, []);
@@ -2464,9 +2451,9 @@ var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
 };
 var propTypes$f = {
   fonts: core.PropTypes.fonts,
-  formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
-    name: PropTypes__default["default"].string,
-    format: PropTypes__default["default"].string
+  formats: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    name: PropTypes.string,
+    format: PropTypes.string
   })]))
 };
 var defaultProps$f = {
@@ -2483,7 +2470,7 @@ var FontFaces = function FontFaces(_ref4) {
   var fonts = _ref4.fonts,
     formats = _ref4.formats;
   var fontFaces = (fonts || []).filter(function (it) {
-    return isObject__default["default"](it) && it.type === 'custom' && (it.media || null) !== null;
+    return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
   }).reduce(function (fontFontFaces, _ref5) {
     var _ref5$name = _ref5.name,
       name = _ref5$name === void 0 ? null : _ref5$name,
@@ -2495,7 +2482,7 @@ var FontFaces = function FontFaces(_ref4) {
       return fontFontFaces;
     }
     var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
-    return [].concat(_toConsumableArray__default["default"](fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray__default["default"]((variants || []).map(function (_ref6) {
+    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
       var weight = _ref6.weight,
         style = _ref6.style,
         _ref6$media = _ref6.media,
@@ -2509,7 +2496,7 @@ var FontFaces = function FontFaces(_ref4) {
   }, []).filter(function (it) {
     return it !== null;
   });
-  return fontFaces.length > 0 ? /*#__PURE__*/React__default["default"].createElement("style", {
+  return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, fontFaces.join('\n')) : null;
 };
@@ -2519,14 +2506,14 @@ FontFaces.defaultProps = defaultProps$f;
 var styles$f = {};
 
 var propTypes$e = {
-  thumbnail: PropTypes__default["default"].node,
-  thumbnailAlign: PropTypes__default["default"].oneOf(['top', 'center', 'bottom']),
-  children: PropTypes__default["default"].node,
+  thumbnail: PropTypes.node,
+  thumbnailAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
+  children: PropTypes.node,
   title: core.PropTypes.label,
-  className: PropTypes__default["default"].string,
-  thumbnailClassName: PropTypes__default["default"].string,
-  bodyClassName: PropTypes__default["default"].string,
-  titleClassName: PropTypes__default["default"].string
+  className: PropTypes.string,
+  thumbnailClassName: PropTypes.string,
+  bodyClassName: PropTypes.string,
+  titleClassName: PropTypes.string
 };
 var defaultProps$e = {
   thumbnail: null,
@@ -2547,21 +2534,21 @@ var Media = function Media(_ref) {
     thumbnailClassName = _ref.thumbnailClassName,
     bodyClassName = _ref.bodyClassName,
     titleClassName = _ref.titleClassName;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card', styles$f.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
+  }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames__default["default"](['me-3', styles$f.thumbnail, _defineProperty__default["default"]({
+    className: classNames(['me-3', styles$f.thumbnail, _defineProperty({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
-  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-body', styles$f.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
-  }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
-    className: classNames__default["default"](['mt-0', 'text-truncate', styles$f.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children) : null);
+  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+  }, title !== null ? /*#__PURE__*/React.createElement("h5", {
+    className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
 };
 Media.propTypes = propTypes$e;
 Media.defaultProps = defaultProps$e;
@@ -2569,358 +2556,358 @@ Media.defaultProps = defaultProps$e;
 /**
  * Core
  */
-PropTypes__default["default"].shape({
-  listen: PropTypes__default["default"].func.isRequired,
-  push: PropTypes__default["default"].func.isRequired
+PropTypes.shape({
+  listen: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired
 });
-PropTypes__default["default"].shape({
-  pathname: PropTypes__default["default"].string,
-  search: PropTypes__default["default"].string
+PropTypes.shape({
+  pathname: PropTypes.string,
+  search: PropTypes.string
 });
-PropTypes__default["default"].shape({
-  locale: PropTypes__default["default"].string.isRequired,
-  formatMessage: PropTypes__default["default"].func.isRequired
+PropTypes.shape({
+  locale: PropTypes.string.isRequired,
+  formatMessage: PropTypes.func.isRequired
 });
-var defaultMessageContent = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].number,
-  value: PropTypes__default["default"].string
+var defaultMessageContent = PropTypes.shape({
+  type: PropTypes.number,
+  value: PropTypes.string
 });
-var defaultMessage = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(defaultMessageContent)]);
-var message = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
+var defaultMessage = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(defaultMessageContent)]);
+var message = PropTypes.shape({
+  id: PropTypes.string,
   defaultMessage: defaultMessage.isRequired,
-  description: PropTypes__default["default"].string
+  description: PropTypes.string
 });
-var text = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].string]);
-var label = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].node]);
-PropTypes__default["default"].oneOf([401, 403, 404, 500]);
-PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-  current: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
-}), PropTypes__default["default"].func]);
-var target = PropTypes__default["default"].oneOf(['_blank', '_self', '_parent']);
-var interaction = PropTypes__default["default"].oneOf(['tap', 'swipe']);
-PropTypes__default["default"].arrayOf(interaction);
-PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].array]));
-PropTypes__default["default"].shape({
-  currentTime: PropTypes__default["default"].number,
-  duration: PropTypes__default["default"].number
+var text = PropTypes.oneOfType([message, PropTypes.string]);
+var label = PropTypes.oneOfType([message, PropTypes.node]);
+PropTypes.oneOf([401, 403, 404, 500]);
+PropTypes.oneOfType([PropTypes.shape({
+  current: PropTypes.any // eslint-disable-line react/forbid-prop-types
+}), PropTypes.func]);
+var target = PropTypes.oneOf(['_blank', '_self', '_parent']);
+var interaction = PropTypes.oneOf(['tap', 'swipe']);
+PropTypes.arrayOf(interaction);
+PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]));
+PropTypes.shape({
+  currentTime: PropTypes.number,
+  duration: PropTypes.number
 });
 
 /**
  * Site
  */
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].number,
-  firstname: PropTypes__default["default"].string,
-  lastname: PropTypes__default["default"].string,
-  email: PropTypes__default["default"].string,
-  gender: PropTypes__default["default"].string,
-  birthdate: PropTypes__default["default"].string
+PropTypes.shape({
+  id: PropTypes.number,
+  firstname: PropTypes.string,
+  lastname: PropTypes.string,
+  email: PropTypes.string,
+  gender: PropTypes.string,
+  birthdate: PropTypes.string
 });
-var menuItem = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
+var menuItem = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   label: label,
-  url: PropTypes__default["default"].string,
-  external: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool
+  url: PropTypes.string,
+  external: PropTypes.bool,
+  active: PropTypes.bool
 });
-PropTypes__default["default"].arrayOf(menuItem);
-var breadcrumb = PropTypes__default["default"].shape({
+PropTypes.arrayOf(menuItem);
+var breadcrumb = PropTypes.shape({
   label: label,
-  url: PropTypes__default["default"].string
+  url: PropTypes.string
 });
-PropTypes__default["default"].arrayOf(breadcrumb);
-var device = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
+PropTypes.arrayOf(breadcrumb);
+var device = PropTypes.shape({
+  id: PropTypes.string.isRequired
 });
-PropTypes__default["default"].arrayOf(device);
-var modal = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
+PropTypes.arrayOf(device);
+var modal = PropTypes.shape({
+  id: PropTypes.string.isRequired
 });
-PropTypes__default["default"].arrayOf(modal);
-var panel = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
+PropTypes.arrayOf(modal);
+var panel = PropTypes.shape({
+  id: PropTypes.string.isRequired
 });
-PropTypes__default["default"].arrayOf(panel);
-var button = PropTypes__default["default"].shape({
+PropTypes.arrayOf(panel);
+var button = PropTypes.shape({
   label: label,
-  onClick: PropTypes__default["default"].func
+  onClick: PropTypes.func
 });
-PropTypes__default["default"].arrayOf(button);
+PropTypes.arrayOf(button);
 var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-PropTypes__default["default"].oneOf(bootstrapThemeStrings);
-PropTypes__default["default"].oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
-PropTypes__default["default"].oneOf(['lg', 'sm', null]);
-PropTypes__default["default"].oneOf(['lg', 'sm', null]);
-PropTypes__default["default"].oneOf(['start', 'end']);
-var component = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].func]);
-PropTypes__default["default"].objectOf(component);
+PropTypes.oneOf(bootstrapThemeStrings);
+PropTypes.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
+PropTypes.oneOf(['lg', 'sm', null]);
+PropTypes.oneOf(['lg', 'sm', null]);
+PropTypes.oneOf(['start', 'end']);
+var component = PropTypes.oneOfType([PropTypes.object, PropTypes.func]);
+PropTypes.objectOf(component);
 
 /**
  * Forms
  */
-var errors = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]);
-PropTypes__default["default"].objectOf(errors);
-var selectOption = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
-  value: PropTypes__default["default"].any,
+var errors = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]);
+PropTypes.objectOf(errors);
+var selectOption = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+  value: PropTypes.any,
   // eslint-disable-line
   label: label
 })]);
-PropTypes__default["default"].arrayOf(selectOption);
-var formField = PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string,
+PropTypes.arrayOf(selectOption);
+var formField = PropTypes.shape({
+  name: PropTypes.string,
   component: component
 });
-PropTypes__default["default"].arrayOf(formField);
+PropTypes.arrayOf(formField);
 
 /**
  * Medias
  */
 var mediaMetadataShape = {
-  filename: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].number,
-  mime: PropTypes__default["default"].string
-};
-var mediaFile = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  handle: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string,
-  mime: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string
+  filename: PropTypes.string,
+  size: PropTypes.number,
+  mime: PropTypes.string
+};
+var mediaFile = PropTypes.shape({
+  id: PropTypes.string,
+  handle: PropTypes.string,
+  type: PropTypes.string,
+  mime: PropTypes.string,
+  url: PropTypes.string
 });
 var mediaShape = {
-  id: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string.isRequired,
-  url: PropTypes__default["default"].string,
+  id: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  url: PropTypes.string,
   // .isRequired,
-  thumbnail_url: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string,
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape)),
-  files: PropTypes__default["default"].objectOf(mediaFile)
-};
-var media = PropTypes__default["default"].shape(mediaShape);
-PropTypes__default["default"].arrayOf(media);
-PropTypes__default["default"].oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
-var imageMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['image', 'video']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number
+  thumbnail_url: PropTypes.string,
+  name: PropTypes.string,
+  metadata: PropTypes.shape(_objectSpread({}, mediaMetadataShape)),
+  files: PropTypes.objectOf(mediaFile)
+};
+var media = PropTypes.shape(mediaShape);
+PropTypes.arrayOf(media);
+PropTypes.oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
+var imageMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['image', 'video']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes.number,
+    height: PropTypes.number
   }))
 }));
-PropTypes__default["default"].arrayOf(imageMedia);
-var fontMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['font']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape))
+PropTypes.arrayOf(imageMedia);
+var fontMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['font']),
+  metadata: PropTypes.shape(_objectSpread({}, mediaMetadataShape))
 }));
-PropTypes__default["default"].arrayOf(fontMedia);
-var videoMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['video']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number,
-    duration: PropTypes__default["default"].number
+PropTypes.arrayOf(fontMedia);
+var videoMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['video']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes.number,
+    height: PropTypes.number,
+    duration: PropTypes.number
   }))
 }));
-PropTypes__default["default"].arrayOf(videoMedia);
-var audioMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['audio']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    duration: PropTypes__default["default"].number
+PropTypes.arrayOf(videoMedia);
+var audioMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['audio']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    duration: PropTypes.number
   }))
 }));
-PropTypes__default["default"].arrayOf(audioMedia);
-var closedCaptionsMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['closed-captions'])
+PropTypes.arrayOf(audioMedia);
+var closedCaptionsMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['closed-captions'])
 }));
 
 /**
  * Style
  */
 
-PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].oneOf(['system', 'google', 'custom']),
-  name: PropTypes__default["default"].string,
+PropTypes.shape({
+  type: PropTypes.oneOf(['system', 'google', 'custom']),
+  name: PropTypes.string,
   media: fontMedia
 });
-var font = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]);
-PropTypes__default["default"].arrayOf(font);
-var textAlign = PropTypes__default["default"].oneOf(['left', 'right', 'center']);
-var color = PropTypes__default["default"].shape({
-  color: PropTypes__default["default"].string,
-  alpha: PropTypes__default["default"].number
+var font = PropTypes.oneOfType([PropTypes.object, PropTypes.string]);
+PropTypes.arrayOf(font);
+var textAlign = PropTypes.oneOf(['left', 'right', 'center']);
+var color = PropTypes.shape({
+  color: PropTypes.string,
+  alpha: PropTypes.number
 });
-var textStyle = PropTypes__default["default"].shape({
+var textStyle = PropTypes.shape({
   fontFamily: font,
-  fontSize: PropTypes__default["default"].number,
-  fontStyle: PropTypes__default["default"].shape({
-    bold: PropTypes__default["default"].bool,
-    italic: PropTypes__default["default"].bool,
-    underline: PropTypes__default["default"].bool,
-    upperCase: PropTypes__default["default"].bool
+  fontSize: PropTypes.number,
+  fontStyle: PropTypes.shape({
+    bold: PropTypes.bool,
+    italic: PropTypes.bool,
+    underline: PropTypes.bool,
+    upperCase: PropTypes.bool
   }),
   align: textAlign,
   color: color,
-  letterSpacing: PropTypes__default["default"].number,
-  lineHeight: PropTypes__default["default"].number
+  letterSpacing: PropTypes.number,
+  lineHeight: PropTypes.number
 });
-var borderTypes = PropTypes__default["default"].oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
-var shadowType = PropTypes__default["default"].shape({
-  shadowDistance: PropTypes__default["default"].number,
-  shadowBlur: PropTypes__default["default"].number,
+var borderTypes = PropTypes.oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
+var shadowType = PropTypes.shape({
+  shadowDistance: PropTypes.number,
+  shadowBlur: PropTypes.number,
   shadowColor: color
 });
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
+PropTypes.shape({
+  width: PropTypes.number,
   style: borderTypes,
-  radius: PropTypes__default["default"].number,
+  radius: PropTypes.number,
   color: color
 });
-var boxStyle = PropTypes__default["default"].shape({
+var boxStyle = PropTypes.shape({
   backgroundColor: color,
-  borderRadius: PropTypes__default["default"].number,
-  borderWidth: PropTypes__default["default"].number,
+  borderRadius: PropTypes.number,
+  borderWidth: PropTypes.number,
   borderColor: color,
   borderStyle: borderTypes,
   shadow: shadowType
 });
-PropTypes__default["default"].shape({
-  top: PropTypes__default["default"].number,
-  bottom: PropTypes__default["default"].number
+PropTypes.shape({
+  top: PropTypes.number,
+  bottom: PropTypes.number
 });
-PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-  rows: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
-  columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
+PropTypes.arrayOf(PropTypes.shape({
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  columns: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
 }));
-var objectFitSize = PropTypes__default["default"].oneOf(['cover', 'contain', null]);
-PropTypes__default["default"].shape({
+var objectFitSize = PropTypes.oneOf(['cover', 'contain', null]);
+PropTypes.shape({
   fit: objectFitSize,
-  horizontalPosition: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
-  verticalPosition: PropTypes__default["default"].oneOf(['top', 'center', 'bottom'])
+  horizontalPosition: PropTypes.oneOf(['left', 'center', 'right']),
+  verticalPosition: PropTypes.oneOf(['top', 'center', 'bottom'])
 });
 
 /**
  * Elements
  */
 
-var textElement = PropTypes__default["default"].shape({
-  body: PropTypes__default["default"].string,
+var textElement = PropTypes.shape({
+  body: PropTypes.string,
   textStyle: textStyle
 });
 var headingElement = textElement;
-PropTypes__default["default"].shape({
-  label: PropTypes__default["default"].string,
+PropTypes.shape({
+  label: PropTypes.string,
   textStyle: textStyle
 });
-var imageElement = PropTypes__default["default"].shape({
+var imageElement = PropTypes.shape({
   media: imageMedia
 });
-PropTypes__default["default"].arrayOf(imageElement);
-PropTypes__default["default"].shape({
+PropTypes.arrayOf(imageElement);
+PropTypes.shape({
   media: videoMedia,
-  autoPlay: PropTypes__default["default"].bool,
-  loop: PropTypes__default["default"].bool,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
   closedCaptions: closedCaptionsMedia,
-  withSeekBar: PropTypes__default["default"].bool,
-  withControls: PropTypes__default["default"].bool
+  withSeekBar: PropTypes.bool,
+  withControls: PropTypes.bool
 });
-var visualElement = PropTypes__default["default"].shape({
+var visualElement = PropTypes.shape({
   media: imageMedia
 });
-PropTypes__default["default"].arrayOf(visualElement);
-PropTypes__default["default"].shape({
+PropTypes.arrayOf(visualElement);
+PropTypes.shape({
   media: audioMedia,
-  autoPlay: PropTypes__default["default"].bool,
-  loop: PropTypes__default["default"].bool,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
   closedCaptions: closedCaptionsMedia,
-  withPlayPause: PropTypes__default["default"].bool
+  withPlayPause: PropTypes.bool
 });
-PropTypes__default["default"].shape({
+PropTypes.shape({
   media: closedCaptionsMedia
 });
-var backgroundElement = PropTypes__default["default"].shape({
+var backgroundElement = PropTypes.shape({
   color: color,
   image: imageMedia,
   video: videoMedia
 });
-var imageElementWithCaption = PropTypes__default["default"].shape({
+var imageElementWithCaption = PropTypes.shape({
   image: imageMedia,
   caption: textElement
 });
-PropTypes__default["default"].arrayOf(imageElementWithCaption);
-var stackDirection = PropTypes__default["default"].oneOf(['horizontal', 'vertical']);
-var stackAlign = PropTypes__default["default"].oneOf(['start', 'center', 'end']);
-var stackSpacing = PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].oneOf(['between', 'evenly', 'around'])]);
-PropTypes__default["default"].shape({
+PropTypes.arrayOf(imageElementWithCaption);
+var stackDirection = PropTypes.oneOf(['horizontal', 'vertical']);
+var stackAlign = PropTypes.oneOf(['start', 'center', 'end']);
+var stackSpacing = PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['between', 'evenly', 'around'])]);
+PropTypes.shape({
   direction: stackDirection,
   align: stackAlign,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
+  width: PropTypes.number,
+  height: PropTypes.number,
   spacing: stackSpacing,
-  reverse: PropTypes__default["default"].bool
+  reverse: PropTypes.bool
 });
-PropTypes__default["default"].shape({
-  layout: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  spacing: PropTypes__default["default"].number
+PropTypes.shape({
+  layout: PropTypes.arrayOf(PropTypes.string),
+  spacing: PropTypes.number
 });
-var geoPosition = PropTypes__default["default"].shape({
-  lat: PropTypes__default["default"].number,
-  lng: PropTypes__default["default"].number
+var geoPosition = PropTypes.shape({
+  lat: PropTypes.number,
+  lng: PropTypes.number
 });
 var markerShape = {
-  id: PropTypes__default["default"].number,
+  id: PropTypes.number,
   geoPosition: geoPosition,
   title: headingElement,
   subtitle: headingElement,
   description: textElement
 };
-var marker = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, markerShape));
-PropTypes__default["default"].arrayOf(marker);
-var markerWithImage = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, markerShape), {}, {
+var marker = PropTypes.shape(_objectSpread({}, markerShape));
+PropTypes.arrayOf(marker);
+var markerWithImage = PropTypes.shape(_objectSpread(_objectSpread({}, markerShape), {}, {
   image: imageMedia
 }));
-PropTypes__default["default"].arrayOf(markerWithImage);
+PropTypes.arrayOf(markerWithImage);
 var answerShape = {
-  id: PropTypes__default["default"].string,
+  id: PropTypes.string,
   label: textElement
 };
-var answer = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, answerShape));
-var quizAnswer = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, answerShape), {}, {
-  good: PropTypes__default["default"].bool
+var answer = PropTypes.shape(_objectSpread({}, answerShape));
+var quizAnswer = PropTypes.shape(_objectSpread(_objectSpread({}, answerShape), {}, {
+  good: PropTypes.bool
 }));
-PropTypes__default["default"].arrayOf(answer);
-PropTypes__default["default"].arrayOf(quizAnswer);
-var callToActionTypes = PropTypes__default["default"].oneOf(['swipe-up', 'button']);
-var callToAction = PropTypes__default["default"].shape({
-  active: PropTypes__default["default"].bool,
+PropTypes.arrayOf(answer);
+PropTypes.arrayOf(quizAnswer);
+var callToActionTypes = PropTypes.oneOf(['swipe-up', 'button']);
+var callToAction = PropTypes.shape({
+  active: PropTypes.bool,
   type: callToActionTypes,
-  url: PropTypes__default["default"].string,
+  url: PropTypes.string,
   label: textElement,
   buttonStyle: boxStyle
 });
-PropTypes__default["default"].shape({
-  active: PropTypes__default["default"].bool,
+PropTypes.shape({
+  active: PropTypes.bool,
   label: textElement,
   boxStyle: boxStyle
 });
-PropTypes__default["default"].shape({
-  active: PropTypes__default["default"].bool
+PropTypes.shape({
+  active: PropTypes.bool
 });
-var speaker = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string,
+var speaker = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
   avatar: imageMedia,
-  side: PropTypes__default["default"].oneOf(['left', 'right']),
+  side: PropTypes.oneOf(['left', 'right']),
   color: color
 });
-var speakers = PropTypes__default["default"].arrayOf(speaker);
-var conversationMessage = PropTypes__default["default"].shape({
-  speaker: PropTypes__default["default"].string,
-  message: PropTypes__default["default"].string,
+var speakers = PropTypes.arrayOf(speaker);
+var conversationMessage = PropTypes.shape({
+  speaker: PropTypes.string,
+  message: PropTypes.string,
   image: imageMedia
 });
-var conversationMessages = PropTypes__default["default"].arrayOf(conversationMessage);
-PropTypes__default["default"].shape({
+var conversationMessages = PropTypes.arrayOf(conversationMessage);
+PropTypes.shape({
   speakers: speakers,
   textStyle: textStyle,
   messages: conversationMessages
@@ -2931,54 +2918,54 @@ PropTypes__default["default"].shape({
  */
 
 var fieldShape = {
-  name: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string.isRequired,
+  name: PropTypes.string,
+  type: PropTypes.string.isRequired,
   label: text
 };
-var field = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldShape), {}, {
-  isSection: PropTypes__default["default"].bool,
-  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape(fieldShape))
+var field = PropTypes.shape(_objectSpread(_objectSpread({}, fieldShape), {}, {
+  isSection: PropTypes.bool,
+  fields: PropTypes.arrayOf(PropTypes.shape(fieldShape))
 }));
-var fields = PropTypes__default["default"].arrayOf(field);
-var screenDefinition = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired,
-  type: PropTypes__default["default"].oneOf(['screen']).isRequired,
+var fields = PropTypes.arrayOf(field);
+var screenDefinition = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['screen']).isRequired,
   title: text.isRequired,
-  layouts: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  layouts: PropTypes.arrayOf(PropTypes.string),
   fields: fields
 });
-PropTypes__default["default"].arrayOf(screenDefinition);
-var fieldDefinition = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired,
-  type: PropTypes__default["default"].oneOf(['field']).isRequired,
+PropTypes.arrayOf(screenDefinition);
+var fieldDefinition = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['field']).isRequired,
   title: text.isRequired,
   fields: fields
 });
-PropTypes__default["default"].arrayOf(fieldDefinition);
+PropTypes.arrayOf(fieldDefinition);
 
 /**
  * Components
  */
 var storyComponentShape = {
-  type: PropTypes__default["default"].string.isRequired
+  type: PropTypes.string.isRequired
 };
-var storyComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
-PropTypes__default["default"].arrayOf(storyComponent);
-var screenComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
-var screenComponents = PropTypes__default["default"].arrayOf(screenComponent);
+var storyComponent = PropTypes.shape(_objectSpread({}, storyComponentShape));
+PropTypes.arrayOf(storyComponent);
+var screenComponent = PropTypes.shape(_objectSpread({}, storyComponentShape));
+var screenComponents = PropTypes.arrayOf(screenComponent);
 
 /**
  * Theme
  */
-var theme = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  textStyles: PropTypes__default["default"].objectOf(textStyle),
+var theme = PropTypes.shape({
+  id: PropTypes.string,
+  textStyles: PropTypes.objectOf(textStyle),
   // renamed to textstyles
   background: backgroundElement,
-  colors: PropTypes__default["default"].objectOf(color),
+  colors: PropTypes.objectOf(color),
   components: screenComponents
 });
-PropTypes__default["default"].shape(_objectSpread__default["default"]({
+PropTypes.shape(_objectSpread({
   logo: imageMedia
 }, theme));
 
@@ -2997,23 +2984,23 @@ PropTypes__default["default"].shape(_objectSpread__default["default"]({
 /**
  * Metadata
  */
-var metadata = PropTypes__default["default"].shape({
-  description: PropTypes__default["default"].string,
-  shareUrl: PropTypes__default["default"].string,
+var metadata = PropTypes.shape({
+  description: PropTypes.string,
+  shareUrl: PropTypes.string,
   shareImage: imageMedia,
   favIcon: imageMedia
 });
-var tag = PropTypes__default["default"].shape({
-  label: PropTypes__default["default"].string,
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string])
+var tag = PropTypes.shape({
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 });
-PropTypes__default["default"].arrayOf(tag);
+PropTypes.arrayOf(tag);
 
 /**
  * Story
  */
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
+PropTypes.shape({
+  id: PropTypes.string,
   theme: theme,
   components: screenComponents,
   metadata: metadata
@@ -3022,68 +3009,68 @@ PropTypes__default["default"].shape({
 /**
  * Render
  */
-var deviceScreen = PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string.isRequired,
-  mediaQuery: PropTypes__default["default"].string
+var deviceScreen = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  mediaQuery: PropTypes.string
 });
-PropTypes__default["default"].arrayOf(deviceScreen);
-PropTypes__default["default"].shape({
-  screen: PropTypes__default["default"].string,
-  screens: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  landscape: PropTypes__default["default"].bool
+PropTypes.arrayOf(deviceScreen);
+PropTypes.shape({
+  screen: PropTypes.string,
+  screens: PropTypes.arrayOf(PropTypes.string),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  landscape: PropTypes.bool
 });
-PropTypes__default["default"].oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+PropTypes.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
 
 /**
  * Screens
  */
 
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number
+PropTypes.shape({
+  width: PropTypes.number,
+  height: PropTypes.number
 });
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  url: PropTypes__default["default"].string,
+PropTypes.shape({
+  width: PropTypes.number,
+  height: PropTypes.number,
+  url: PropTypes.string,
   target: target,
-  iframe: PropTypes__default["default"].string,
+  iframe: PropTypes.string,
   image: imageMedia
 });
-PropTypes__default["default"].shape({
-  src: PropTypes__default["default"].string,
-  track: PropTypes__default["default"].string,
-  trackLng: PropTypes__default["default"].number,
-  controls: PropTypes__default["default"].bool
+PropTypes.shape({
+  src: PropTypes.string,
+  track: PropTypes.string,
+  trackLng: PropTypes.number,
+  controls: PropTypes.bool
 });
-var slide = PropTypes__default["default"].shape({
+var slide = PropTypes.shape({
   image: imageMedia,
-  text: PropTypes__default["default"].string
+  text: PropTypes.string
 });
-PropTypes__default["default"].arrayOf(slide);
+PropTypes.arrayOf(slide);
 
 // export const imageStyle = PropTypes.shape({
 //     alt: PropTypes.string,
 //     fit: PropTypes.object,
 // });
 
-PropTypes__default["default"].shape({});
+PropTypes.shape({});
 
 /**
  * Transitions
  */
 
-var transitionName = PropTypes__default["default"].oneOf(['fade', 'scale', 'slide']);
+var transitionName = PropTypes.oneOf(['fade', 'scale', 'slide']);
 var transitionParams = {
-  duration: PropTypes__default["default"].number,
-  easing: PropTypes__default["default"].oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
+  duration: PropTypes.number,
+  easing: PropTypes.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
 };
-var transition = PropTypes__default["default"].oneOfType([transitionName.isRequired, PropTypes__default["default"].shape(_objectSpread__default["default"]({
+var transition = PropTypes.oneOfType([transitionName.isRequired, PropTypes.shape(_objectSpread({
   name: transitionName.isRequired
 }, transitionParams))]);
-PropTypes__default["default"].shape({
+PropTypes.shape({
   "in": transition,
   out: transition
 });
@@ -3092,73 +3079,73 @@ PropTypes__default["default"].shape({
  * Search
  */
 
-var searchFilter = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].string,
-  value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number])
+var searchFilter = PropTypes.shape({
+  type: PropTypes.string,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.number])
 });
-PropTypes__default["default"].arrayOf(searchFilter);
+PropTypes.arrayOf(searchFilter);
 
 /**
  * Payments
  */
 
-var paymentItem = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  date: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string,
-  invoice_link: PropTypes__default["default"].string,
-  amount: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+var paymentItem = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  date: PropTypes.string,
+  type: PropTypes.string,
+  invoice_link: PropTypes.string,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 });
-PropTypes__default["default"].arrayOf(paymentItem);
+PropTypes.arrayOf(paymentItem);
 
 /**
  * Page Metadada
  */
 
-var pageMetadata = PropTypes__default["default"].shape({
-  canonical: PropTypes__default["default"].string,
-  description: PropTypes__default["default"].string,
-  keywords: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
-  image: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
+var pageMetadata = PropTypes.shape({
+  canonical: PropTypes.string,
+  description: PropTypes.string,
+  keywords: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  image: PropTypes.shape({
+    url: PropTypes.string
   }),
-  favicon: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
+  favicon: PropTypes.shape({
+    url: PropTypes.string
   }),
-  rssUrl: PropTypes__default["default"].string,
-  atomUrl: PropTypes__default["default"].string,
-  microformats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({}))
+  rssUrl: PropTypes.string,
+  atomUrl: PropTypes.string,
+  microformats: PropTypes.arrayOf(PropTypes.shape({}))
 });
-PropTypes__default["default"].shape({
+PropTypes.shape({
   name: textElement,
-  avatar: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
+  avatar: PropTypes.shape({
+    url: PropTypes.string
   })
 });
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  name: PropTypes__default["default"].string
+PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string
 });
-var badge = PropTypes__default["default"].shape({
+var badge = PropTypes.shape({
   label: textElement,
   buttonStyle: boxStyle
 });
-PropTypes__default["default"].shape({
+PropTypes.shape({
   badge: badge
 });
-PropTypes__default["default"].shape({
+PropTypes.shape({
   callToAction: callToAction
 });
-PropTypes__default["default"].shape();
+PropTypes.shape();
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {
-  title: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string,
+  title: PropTypes.string,
+  url: PropTypes.string,
   metadata: pageMetadata,
-  fullTitle: PropTypes__default["default"].string,
-  suffix: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  fullTitle: PropTypes.string,
+  suffix: PropTypes.string,
+  children: PropTypes.node
 };
 var defaultProps$d = {
   title: null,
@@ -3208,68 +3195,68 @@ var Meta = function Meta(_ref) {
   var _ref5 = favicon || {},
     _ref5$url = _ref5.url,
     faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
-  return /*#__PURE__*/React__default["default"].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default["default"].createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  return /*#__PURE__*/React.createElement(reactHelmet.Helmet, 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__default["default"].createElement("meta", {
+  }) : null, language !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "language",
     content: language
-  }) : null, keywords !== null && isString__default["default"](keywords) ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, keywords !== null && isString(keywords) ? /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
     content: keywords
-  }) : null, keywords !== null && isArray__default["default"](keywords) ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, keywords !== null && isArray(keywords) ? /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
     content: keywords.join(',')
-  }) : null, canonical !== null ? /*#__PURE__*/React__default["default"].createElement("link", {
+  }) : null, canonical !== null ? /*#__PURE__*/React.createElement("link", {
     rel: "canonical",
     href: canonical
-  }) : null, faviconUrl !== null ? /*#__PURE__*/React__default["default"].createElement("link", {
+  }) : null, faviconUrl !== null ? /*#__PURE__*/React.createElement("link", {
     rel: "icon",
     type: "image/png",
     href: faviconUrl
-  }) : null, rssUrl !== null ? /*#__PURE__*/React__default["default"].createElement("link", {
+  }) : null, rssUrl !== null ? /*#__PURE__*/React.createElement("link", {
     rel: "alternate",
     type: "application/rss+xml",
     href: rssUrl
-  }) : null, atomUrl !== null ? /*#__PURE__*/React__default["default"].createElement("link", {
+  }) : null, atomUrl !== null ? /*#__PURE__*/React.createElement("link", {
     rel: "alternate",
     type: "application/atom+xml",
     href: atomUrl
-  }) : null, imageUrl !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:image",
     content: imageUrl
-  }) : null, imageUrl !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:image:url",
     content: imageUrl
-  }) : null, imageWidth !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, imageWidth !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:image:width",
     content: imageWidth
-  }) : null, imageHeight !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, imageHeight !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:image:height",
     content: imageHeight
-  }) : null, /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, /*#__PURE__*/React.createElement("meta", {
     property: "og:title",
     content: realTitle
-  }), description !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }), description !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:description",
     content: description
-  }) : null, url !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, url !== null ? /*#__PURE__*/React.createElement("meta", {
     property: "og:url",
     content: url
-  }) : null, /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, /*#__PURE__*/React.createElement("meta", {
     name: "twitter:card",
     content: imageUrl !== null ? 'summary_large_image' : 'summary'
-  }), /*#__PURE__*/React__default["default"].createElement("meta", {
+  }), /*#__PURE__*/React.createElement("meta", {
     name: "twitter:title",
     content: realTitle
-  }), description !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }), description !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "twitter:description",
     content: description
-  }) : null, imageUrl !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "twitter:image",
     content: imageUrl
   }) : null, (microformats || []).map(function (it) {
-    return /*#__PURE__*/React__default["default"].createElement("script", {
+    return /*#__PURE__*/React.createElement("script", {
       type: "application/ld+json",
       id: "".concat(it["@type"], "-").concat(it.identifier),
       key: "microformat-".concat(it["@type"], "-").concat(it.identifier)
@@ -3282,13 +3269,13 @@ Meta.defaultProps = defaultProps$d;
 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"};
 
 var propTypes$c = {
-  items: PropTypes__default["default"].arrayOf(PropTypes__default["default"].node),
-  auto: PropTypes__default["default"].bool,
-  delay: PropTypes__default["default"].number,
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  className: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  items: PropTypes.arrayOf(PropTypes.node),
+  auto: PropTypes.bool,
+  delay: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+  children: PropTypes.node
 };
 var defaultProps$c = {
   items: [],
@@ -3308,7 +3295,7 @@ var Slideshow = function Slideshow(_ref) {
     className = _ref.className,
     children = _ref.children;
   var _useState = React.useState(0),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     index = _useState2[0],
     setIndex = _useState2[1];
   React.useEffect(function () {
@@ -3332,16 +3319,15 @@ var Slideshow = function Slideshow(_ref) {
     width: width,
     height: height
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$e.container, _defineProperty({}, className, className)]),
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$e.items
   }, items.map(function (it, i) {
-    var _ref3;
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames__default["default"]([styles$e.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$e.prev, i < index), _defineProperty__default["default"](_ref3, styles$e.current, i === index), _defineProperty__default["default"](_ref3, styles$e.next, i > index), _ref3)])
+      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);
 };
@@ -3355,11 +3341,11 @@ var AdFrame = function AdFrame(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faAd.faAd,
     className: styles$d.icon
   }));
@@ -3370,11 +3356,11 @@ var AdImage = function AdImage(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
     className: styles$d.icon
   }));
@@ -3387,11 +3373,11 @@ var Audio = function Audio(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '2em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faMusic.faMusic,
     className: styles$d.icon
   }));
@@ -3400,13 +3386,13 @@ var Audio = function Audio(_ref) {
 var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$b = {
-  lines: PropTypes__default["default"].number,
-  lineMargin: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  fontSize: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string,
-  withInvertedColors: PropTypes__default["default"].bool
+  lines: PropTypes.number,
+  lineMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  fontSize: PropTypes.number,
+  className: PropTypes.string,
+  withInvertedColors: PropTypes.bool
 };
 var defaultProps$b = {
   lines: 1,
@@ -3418,7 +3404,6 @@ var defaultProps$b = {
   withInvertedColors: true
 };
 var PlaceholderText = function PlaceholderText(_ref) {
-  var _ref2;
   var lines = _ref.lines,
     lineMargin = _ref.lineMargin,
     width = _ref.width,
@@ -3426,12 +3411,12 @@ var PlaceholderText = function PlaceholderText(_ref) {
     fontSize = _ref.fontSize,
     className = _ref.className,
     withInvertedColors = _ref.withInvertedColors;
-  var lineHeight = height !== null && isNumber__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
-  var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '80%';
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$c.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$c.withInvertedColors, withInvertedColors), _ref2)])
-  }, _toConsumableArray__default["default"](Array(lines)).map(function (e, index) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+  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, _defineProperty(_defineProperty({}, className, className), 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: {
@@ -3453,12 +3438,12 @@ var Button = function Button(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.4em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
     line: 1,
     height: "0.1em"
   }));
@@ -3469,12 +3454,12 @@ var Image = function Image(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
     className: className
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
     className: styles$d.icon
   }));
@@ -3482,8 +3467,8 @@ var Image = function Image(_ref) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Line = function Line(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.shortText]),
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 1
   }));
@@ -3492,20 +3477,20 @@ var Line = function Line(props) {
 var styles$b = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 var Map = function Map(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)])
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$b.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$b.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$b.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$b.icon
   }));
@@ -3513,11 +3498,11 @@ var Map = function Map(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var MapPath = function MapPath(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "70%",
-    className: classNames__default["default"]([props.className, styles$d.mapPath])
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+    className: classNames([props.className, styles$d.mapPath])
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faMapMarkedAlt.faMapMarkedAlt,
     size: "lg",
     className: styles$d.icon
@@ -3526,8 +3511,8 @@ var MapPath = function MapPath(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Quote = function Quote(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.subtitle]),
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.subtitle]),
     height: 0.5,
     lines: 6
   }));
@@ -3535,8 +3520,8 @@ var Quote = function Quote(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var ShortText = function ShortText(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.shortText]),
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.shortText]),
     height: 0.2,
     lines: 2
   }));
@@ -3544,8 +3529,8 @@ var ShortText = function ShortText(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Subtitle = function Subtitle(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.subtitle]),
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.subtitle]),
     height: 0.3,
     lines: 1
   }));
@@ -3561,18 +3546,18 @@ var TextPlaceholder = function TextPlaceholder(props) {
     lines = _props$lines === void 0 ? 4 : _props$lines,
     _props$lineMargin = props.lineMargin,
     lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames__default["default"]([className, styles$d.text])
+    className: classNames([className, styles$d.text])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Timeline = function Timeline(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.timeline])
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.timeline])
   }));
 };
 
@@ -3584,8 +3569,8 @@ var Title$1 = function Title(props) {
     lines = _props$lines === void 0 ? 2 : _props$lines,
     _props$lineMargin = props.lineMargin,
     lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$d.title]),
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.title]),
     height: height,
     lines: lines,
     lineMargin: lineMargin
@@ -3597,11 +3582,11 @@ var Video = function Video(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faVideo.faVideo,
     className: styles$d.icon
   }));
@@ -3613,15 +3598,15 @@ var Video360 = function Video360(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
     boxClassName: styles$a.box
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faVideo.faVideo,
     className: styles$a.icon
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$a.label
   }, "360"));
 };
@@ -3631,14 +3616,14 @@ var VideoLoop = function VideoLoop(_ref) {
   var width = _ref.width,
     height = _ref.height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faPlay.faPlay,
     className: styles$d.icon
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faRedo.faRedo,
     className: styles$d.icon
   }));
@@ -3648,13 +3633,13 @@ var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","fram
 
 var devicePixelRatio = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
 var propTypes$a = {
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  fit: PropTypes__default["default"].oneOf([null, 'cover', 'contain']),
-  screenWidth: PropTypes__default["default"].number,
-  screenHeight: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node.isRequired
+  width: PropTypes.number,
+  height: PropTypes.number,
+  fit: PropTypes.oneOf([null, 'cover', 'contain']),
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired
 };
 var defaultProps$a = {
   width: null,
@@ -3730,25 +3715,25 @@ var ScreenSizer = function ScreenSizer(_ref) {
     };
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
     ref: !hasSize ? refContainer : null
-  }, hasFrameSize ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.frame,
     style: {
       width: frameWidth,
       height: frameHeight
     }
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$9.screen,
     style: {
       width: screenWidth,
       height: screenHeight,
       transform: screenTransform
     }
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
+  }, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
     size: screenSize
-  }, /*#__PURE__*/React__default["default"].cloneElement(children, {
+  }, /*#__PURE__*/React.cloneElement(children, {
     width: screenWidth,
     height: screenHeight
   })))) : null);
@@ -3761,14 +3746,14 @@ var styles$8 = {"container":"micromag-core-screens-screen-container"};
 var propTypes$9 = {
   screen: core.PropTypes.storyComponent.isRequired,
   renderContext: core.PropTypes.renderContext,
-  screenState: PropTypes__default["default"].string,
-  index: PropTypes__default["default"].number,
-  active: PropTypes__default["default"].bool,
-  current: PropTypes__default["default"].bool,
-  component: PropTypes__default["default"].node,
+  screenState: PropTypes.string,
+  index: PropTypes.number,
+  active: PropTypes.bool,
+  current: PropTypes.bool,
+  component: PropTypes.node,
   components: core.PropTypes.components,
-  className: PropTypes__default["default"].string,
-  mediaRef: PropTypes__default["default"].func
+  className: PropTypes.string,
+  mediaRef: PropTypes.func
 };
 var defaultProps$9 = {
   active: true,
@@ -3801,36 +3786,36 @@ var Screen = function Screen(_ref) {
 
   // Comment
 
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
+  return /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
     data: screen,
     renderContext: renderContext,
     screenState: screenState
-  }, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
+  }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
     index: index,
     active: active,
     current: current,
     mediaRef: mediaRef
-  }))) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : /*#__PURE__*/React.createElement("div", {
     className: className
   }, component));
 };
 Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
-var Screen$1 = /*#__PURE__*/React__default["default"].memo(Screen);
+var Screen$1 = /*#__PURE__*/React.memo(Screen);
 
 var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
 
 var _excluded$1 = ["screen", "layout", "screenWidth", "screenHeight", "screenState", "withSize", "className"];
 var propTypes$8 = {
   screen: core.PropTypes.component.isRequired,
-  layout: PropTypes__default["default"].string,
-  screenWidth: PropTypes__default["default"].number,
-  screenHeight: PropTypes__default["default"].number,
-  screenState: PropTypes__default["default"].string,
-  withSize: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+  layout: PropTypes.string,
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  screenState: PropTypes.string,
+  withSize: PropTypes.bool,
+  className: PropTypes.string
 };
 var defaultProps$8 = {
   layout: undefined,
@@ -3848,15 +3833,15 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     screenState = _ref.screenState,
     withSize = _ref.withSize,
     className = _ref.className,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
-  var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "placeholder",
     screenState: screenState,
     layout: layout,
-    className: classNames__default["default"]([styles$7.screen, _defineProperty__default["default"]({}, className, !withSize)])
+    className: classNames([styles$7.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight
@@ -3864,21 +3849,21 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
 };
 ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
-var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder);
+var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
 var styles$6 = {"stack":"micromag-core-screens-preview-stack","stackScreen":"micromag-core-screens-preview-stackScreen","stackItem":"micromag-core-screens-preview-stackItem","screen":"micromag-core-screens-preview-screen"};
 
 var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "hidden"];
 var propTypes$7 = {
   screen: core.PropTypes.component.isRequired,
-  screenState: PropTypes__default["default"].string,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  screenWidth: PropTypes__default["default"].number,
-  screenHeight: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string,
-  withSize: PropTypes__default["default"].bool,
-  hidden: PropTypes__default["default"].bool
+  screenState: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  className: PropTypes.string,
+  withSize: PropTypes.bool,
+  hidden: PropTypes.bool
 };
 var defaultProps$7 = {
   screenState: null,
@@ -3900,17 +3885,17 @@ var ScreenPreview = function ScreenPreview(_ref) {
     className = _ref.className,
     withSize = _ref.withSize,
     hidden = _ref.hidden,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded);
-  var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
+    props = _objectWithoutProperties(_ref, _excluded);
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
     screenState: screenState,
     width: !withSize ? width : undefined,
     height: !withSize ? height : undefined,
-    className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
+    className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
   }, props));
-  var element = !hidden ? screenElement : /*#__PURE__*/React__default["default"].createElement("div", null);
-  var screenWithSize = withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+  var element = !hidden ? screenElement : /*#__PURE__*/React.createElement("div", null);
+  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
     className: className,
     screenWidth: screenWidth,
     screenHeight: screenHeight,
@@ -3921,19 +3906,19 @@ var ScreenPreview = function ScreenPreview(_ref) {
 };
 ScreenPreview.propTypes = propTypes$7;
 ScreenPreview.defaultProps = defaultProps$7;
-var Preview = /*#__PURE__*/React__default["default"].memo(ScreenPreview);
+var Preview = /*#__PURE__*/React.memo(ScreenPreview);
 
 var styles$5 = {"container":"micromag-core-placeholders-conversation-container","icon":"micromag-core-placeholders-conversation-icon","message":"micromag-core-placeholders-conversation-message","placeholderMessage0":"micromag-core-placeholders-conversation-placeholderMessage0","placeholderMessage1":"micromag-core-placeholders-conversation-placeholderMessage1","placeholderMessage2":"micromag-core-placeholders-conversation-placeholderMessage2","placeholderMessage3":"micromag-core-placeholders-conversation-placeholderMessage3"};
 
 var Conversation = function Conversation() {
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: styles$5.container
-  }, _toConsumableArray__default["default"](Array(4)).map(function (e, idx) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+  }, _toConsumableArray(Array(4)).map(function (e, idx) {
+    return /*#__PURE__*/React.createElement("div", {
       key: "message-".concat(idx + 1),
-      className: classNames__default["default"]([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
+      className: classNames([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
     });
-  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCommentDots.faCommentDots,
     className: styles$5.icon
   }));
@@ -3946,7 +3931,7 @@ var InputText = function InputText(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.5em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
@@ -3957,7 +3942,6 @@ var InputText = function InputText(_ref) {
 var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","block":"micromag-core-placeholders-quiz-answer-block","answer":"micromag-core-placeholders-quiz-answer-answer","answerIcon":"micromag-core-placeholders-quiz-answer-answerIcon","good":"micromag-core-placeholders-quiz-answer-good"};
 
 var Answer$1 = function Answer(_ref) {
-  var _ref2;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '75%' : _ref$width,
     _ref$height = _ref.height,
@@ -3965,19 +3949,19 @@ var Answer$1 = function Answer(_ref) {
     className = _ref.className,
     _ref$good = _ref.good,
     good = _ref$good === void 0 ? true : _ref$good;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$4.good, good), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty(_defineProperty({}, className, className !== null), styles$4.good, good)])
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.answer
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$4.answerIcon,
     icon: good ? faCheck.faCheck : faTimes.faTimes
-  })), /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  })), /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
     className: styles$4.block
-  }, /*#__PURE__*/React__default["default"].createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
     line: 1,
     height: "0.2em"
   })));
@@ -3986,24 +3970,24 @@ var Answer$1 = function Answer(_ref) {
 var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item","button":"micromag-core-placeholders-share-options-button"};
 
 var Title = function Title(props) {
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, props.className, props.className !== null)]),
+    className: classNames([styles$3.container, _defineProperty({}, props.className, props.className !== null)]),
     boxClassName: styles$3.box
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: styles$3.item
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
     className: styles$3.icon
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles$3.item
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
     className: styles$3.icon
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles$3.item
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faCircle.faCircle,
     className: styles$3.icon
   })));
@@ -4017,19 +4001,19 @@ var Answer = function Answer(_ref) {
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '0.3em' : _ref$height,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
     height: height,
     className: styles$2.block
-  }, /*#__PURE__*/React__default["default"].createElement(PlaceholderText, {
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
     line: 1,
     height: "0.2em"
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: styles$2.percent
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$2.percentIcon,
     icon: faPercent.faPercent
   })));
@@ -4063,15 +4047,15 @@ var Placeholders = /*#__PURE__*/Object.freeze({
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$6 = {
-  children: PropTypes__default["default"].node,
-  placeholder: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
-  preview: PropTypes__default["default"].node,
-  empty: PropTypes__default["default"].node,
+  children: PropTypes.node,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  preview: PropTypes.node,
+  empty: PropTypes.node,
   emptyLabel: core.PropTypes.label,
-  isEmpty: PropTypes__default["default"].bool,
-  placeholderProps: PropTypes__default["default"].object,
+  isEmpty: PropTypes.bool,
+  placeholderProps: PropTypes.object,
   // eslint-disable-line
-  emptyClassName: PropTypes__default["default"].string
+  emptyClassName: PropTypes.string
 };
 var defaultProps$6 = {
   children: null,
@@ -4097,11 +4081,11 @@ var ScreenElement = function ScreenElement(_ref) {
     isEdit = _useScreenRenderConte.isEdit,
     isPreview = _useScreenRenderConte.isPreview;
   if (isPlaceholder) {
-    var PlaceholderComponent = isString__default["default"](placeholder) ? utils.getComponentFromName(placeholder, Placeholders) : null;
-    return PlaceholderComponent !== null ? /*#__PURE__*/React__default["default"].createElement(PlaceholderComponent, placeholderProps) : placeholder;
+    var PlaceholderComponent = isString(placeholder) ? utils.getComponentFromName(placeholder, Placeholders) : null;
+    return PlaceholderComponent !== null ? /*#__PURE__*/React.createElement(PlaceholderComponent, placeholderProps) : placeholder;
   }
   if (isEdit && isEmpty) {
-    return empty !== null ? empty : /*#__PURE__*/React__default["default"].createElement(Empty, {
+    return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty, {
       className: emptyClassName
     }, emptyLabel);
   }
@@ -4117,8 +4101,8 @@ var styles$1 = {"container":"micromag-core-screens-container","screen":"micromag
 
 var propTypes$5 = {
   screens: core.PropTypes.storyComponents.isRequired,
-  screen: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  screen: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps$5 = {
   screen: null,
@@ -4128,14 +4112,14 @@ var Screens = function Screens(_ref) {
   var screens = _ref.screens,
     screenId = _ref.screen,
     className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)])
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.container, _defineProperty({}, className, className)])
   }, screens.map(function (screen) {
     var id = screen.id;
-    return /*#__PURE__*/React__default["default"].createElement(Screen$1, {
+    return /*#__PURE__*/React.createElement(Screen$1, {
       key: "screen-".concat(id),
       screen: screen,
-      className: classNames__default["default"]([styles$1.screen, _defineProperty__default["default"]({}, styles$1.visible, screenId === id)])
+      className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
     });
   }));
 };
@@ -4145,26 +4129,26 @@ Screens.defaultProps = defaultProps$5;
 var styles = {"container":"micromag-core-transitions-transition-container","fullscreen":"micromag-core-transitions-transition-fullscreen"};
 
 var propTypes$4 = {
-  fullscreen: PropTypes__default["default"].bool,
-  from: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  fullscreen: PropTypes.bool,
+  from: PropTypes.objectOf(PropTypes.any),
   // eslint-disable-line react/forbid-prop-types
-  to: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  to: PropTypes.objectOf(PropTypes.any),
   // eslint-disable-line react/forbid-prop-types
-  playing: PropTypes__default["default"].bool,
-  direction: PropTypes__default["default"].oneOf(['in', 'out']),
-  delay: PropTypes__default["default"].number,
-  reversible: PropTypes__default["default"].bool,
-  duration: PropTypes__default["default"].number,
-  easing: PropTypes__default["default"].func,
-  config: PropTypes__default["default"].shape({
-    mass: PropTypes__default["default"].number,
-    friction: PropTypes__default["default"].number,
-    tension: PropTypes__default["default"].number
+  playing: PropTypes.bool,
+  direction: PropTypes.oneOf(['in', 'out']),
+  delay: PropTypes.number,
+  reversible: PropTypes.bool,
+  duration: PropTypes.number,
+  easing: PropTypes.func,
+  config: PropTypes.shape({
+    mass: PropTypes.number,
+    friction: PropTypes.number,
+    tension: PropTypes.number
   }),
-  children: PropTypes__default["default"].node,
-  className: PropTypes__default["default"].string,
-  onStart: PropTypes__default["default"].func,
-  onComplete: PropTypes__default["default"].func
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onStart: PropTypes.func,
+  onComplete: PropTypes.func
 };
 var defaultProps$4 = {
   fullscreen: false,
@@ -4183,7 +4167,6 @@ var defaultProps$4 = {
   onComplete: null
 };
 function Transition(_ref) {
-  var _ref2;
   var fullscreen = _ref.fullscreen,
     from = _ref.from,
     to = _ref.to,
@@ -4201,7 +4184,7 @@ function Transition(_ref) {
   var _useSpring = core$1.useSpring(function () {
       return {};
     }),
-    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
     springProps = _useSpring2[0],
     setSpringProps = _useSpring2[1];
   React.useEffect(function () {
@@ -4229,9 +4212,9 @@ function Transition(_ref) {
     }
     // console.log('fx', { reset, finalPlaying, immediate, reversible });
   }, [playing, direction, delay, duration, reversible, easing, config, from, to, setSpringProps, onStart, onComplete]);
-  return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
-    style: _objectSpread__default["default"]({}, springProps),
-    className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.fullscreen, fullscreen), _ref2)])
+  return /*#__PURE__*/React.createElement(web.animated.div, {
+    style: _objectSpread({}, springProps),
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.fullscreen, fullscreen)])
   }, children);
 }
 Transition.propTypes = propTypes$4;
@@ -4249,7 +4232,7 @@ function Fade(props) {
       opacity: 1
     };
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(Transition, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
     from: from,
     to: to
   }));
@@ -4267,7 +4250,7 @@ function Scale(props) {
       transform: 'scale(1)'
     };
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(Transition, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
     from: from,
     to: to
   }));
@@ -4279,13 +4262,13 @@ var TransitionComponents = {
 };
 
 var propTypes$3 = {
-  fullscreen: PropTypes__default["default"].bool,
-  playing: PropTypes__default["default"].bool,
-  delay: PropTypes__default["default"].number,
+  fullscreen: PropTypes.bool,
+  playing: PropTypes.bool,
+  delay: PropTypes.number,
   transitions: core.PropTypes.transitions,
-  onComplete: PropTypes__default["default"].func,
-  disabled: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node
+  onComplete: PropTypes.func,
+  disabled: PropTypes.bool,
+  children: PropTypes.node
 };
 var defaultProps$3 = {
   fullscreen: false,
@@ -4338,22 +4321,22 @@ function Transitions(_ref) {
   var sameTransitionInOut = transitionInName === transitionOutName;
   var TransitionIn = finalTransitionIn !== null ? utils.getComponentFromName(transitionInName, TransitionComponents, null) : null;
   var TransitionOut = finalTransitionOut !== null && !sameTransitionInOut ? utils.getComponentFromName(transitionOutName, TransitionComponents, null) : null;
-  var transitionInProps = finalTransitionIn !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, finalTransitionIn), {}, {
+  var transitionInProps = finalTransitionIn !== null ? _objectSpread(_objectSpread({}, finalTransitionIn), {}, {
     name: undefined,
     delay: delay,
     onComplete: onComplete
   }) : null;
-  var transitionOutProps = finalTransitionOut !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, finalTransitionOut), {}, {
+  var transitionOutProps = finalTransitionOut !== null ? _objectSpread(_objectSpread({}, finalTransitionOut), {}, {
     name: undefined,
     delay: delay,
     onComplete: onComplete
   }) : null;
-  var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React__default["default"].createElement(TransitionOut, Object.assign({
+  var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionOut, Object.assign({
     fullscreen: fullscreen,
     playing: finalPlaying,
     direction: "out"
   }, transitionOutProps), children) : children;
-  return TransitionIn !== null && !disabled ? /*#__PURE__*/React__default["default"].createElement(TransitionIn, Object.assign({
+  return TransitionIn !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionIn, Object.assign({
     fullscreen: fullscreen,
     playing: finalPlaying,
     direction: !sameTransitionInOut ? 'in' : null
@@ -4364,12 +4347,12 @@ Transitions.defaultProps = defaultProps$3;
 
 var propTypes$2 = {
   transitions: core.PropTypes.transitions,
-  stagger: PropTypes__default["default"].number,
-  playing: PropTypes__default["default"].bool,
-  disabled: PropTypes__default["default"].bool,
-  delay: PropTypes__default["default"].number,
-  fullscreen: PropTypes__default["default"].bool,
-  children: PropTypes__default["default"].node
+  stagger: PropTypes.number,
+  playing: PropTypes.bool,
+  disabled: PropTypes.bool,
+  delay: PropTypes.number,
+  fullscreen: PropTypes.bool,
+  children: PropTypes.node
 };
 var defaultProps$2 = {
   transitions: null,
@@ -4389,7 +4372,7 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
     fullscreen = _ref.fullscreen,
     children = _ref.children;
   var validIndex = 0;
-  var elements = React__default["default"].Children.map(children, function (child) {
+  var elements = React.Children.map(children, function (child) {
     if (!child) {
       return null;
     }
@@ -4401,7 +4384,7 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
     if (disabled || withoutTransitionsWrapper) {
       return child;
     }
-    var el = /*#__PURE__*/React__default["default"].createElement(Transitions, {
+    var el = /*#__PURE__*/React.createElement(Transitions, {
       transitions: transitions,
       delay: delay + validIndex * stagger,
       playing: playing,
@@ -4416,9 +4399,9 @@ TransitionsStagger.propTypes = propTypes$2;
 TransitionsStagger.defaultProps = defaultProps$2;
 
 var propTypes$1 = {
-  selector: PropTypes__default["default"].string,
-  highlightSelector: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
+  selector: PropTypes.string,
+  highlightSelector: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
 var defaultProps$1 = {
   selector: null,
@@ -4429,7 +4412,7 @@ var HighlightStyle = function HighlightStyle(_ref) {
   var selector = _ref.selector,
     highlightSelector = _ref.highlightSelector,
     style = _ref.style;
-  return style !== null ? /*#__PURE__*/React__default["default"].createElement("style", {
+  return style !== null ? /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, "".concat([selector, highlightSelector].filter(function (it) {
     return it !== null;
@@ -4439,9 +4422,9 @@ HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
 
 var propTypes = {
-  selector: PropTypes__default["default"].string,
-  linkSelector: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]))
+  selector: PropTypes.string,
+  linkSelector: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
 };
 var defaultProps = {
   selector: null,
@@ -4452,7 +4435,7 @@ var LinkStyle = function LinkStyle(_ref) {
   var selector = _ref.selector,
     linkSelector = _ref.linkSelector,
     style = _ref.style;
-  return style !== null ? /*#__PURE__*/React__default["default"].createElement("style", {
+  return style !== null ? /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, "".concat([selector, linkSelector].filter(function (it) {
     return it !== null;