@micromag/core 0.3.311 → 0.3.318

package/es/components.js

@@ -41,30 +41,28 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 import { useSpring } from '@react-spring/core';
-import { animated } from '@react-spring/web';
+import { config, animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$L = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
-
 };
+
 var defaultProps$L = {
   isHtml: false,
   values: {}
 };
-
 var Label = function Label(_ref) {
   var children = _ref.children,
-      isHtml = _ref.isHtml,
-      values = _ref.values;
+    isHtml = _ref.isHtml,
+    values = _ref.values;
   var Message = isHtml ? FormattedMessage : FormattedMessage;
   return isMessage(children) ? /*#__PURE__*/React.createElement(Message, Object.assign({
     values: values
   }, children)) : children;
 };
-
 Label.propTypes = propTypes$L;
 Label.defaultProps = defaultProps$L;
 
@@ -102,9 +100,9 @@ var propTypes$K = {
   onClick: PropTypes$1.func,
   refButton: PropTypes$1.oneOfType([PropTypes$1.func, PropTypes$1.shape({
     current: PropTypes$1.any // eslint-disable-line
-
   })])
 };
+
 var defaultProps$K = {
   type: 'button',
   theme: null,
@@ -136,41 +134,38 @@ var defaultProps$K = {
   onClick: null,
   refButton: null
 };
-
 var Button$1 = function Button(_ref) {
   var _ref7, _ref8;
-
   var type = _ref.type,
-      theme = _ref.theme,
-      size = _ref.size,
-      href = _ref.href,
-      external = _ref.external,
-      direct = _ref.direct,
-      target = _ref.target,
-      label = _ref.label,
-      children = _ref.children,
-      focusable = _ref.focusable,
-      active = _ref.active,
-      icon = _ref.icon,
-      iconPosition = _ref.iconPosition,
-      disabled = _ref.disabled,
-      loading = _ref.loading,
-      disableOnLoading = _ref.disableOnLoading,
-      small = _ref.small,
-      big = _ref.big,
-      withShadow = _ref.withShadow,
-      withoutStyle = _ref.withoutStyle,
-      withoutBootstrapStyles = _ref.withoutBootstrapStyles,
-      withoutTheme = _ref.withoutTheme,
-      asLink = _ref.asLink,
-      outline = _ref.outline,
-      onClick = _ref.onClick,
-      className = _ref.className,
-      iconClassName = _ref.iconClassName,
-      labelClassName = _ref.labelClassName,
-      refButton = _ref.refButton,
-      props = _objectWithoutProperties(_ref, _excluded$b);
-
+    theme = _ref.theme,
+    size = _ref.size,
+    href = _ref.href,
+    external = _ref.external,
+    direct = _ref.direct,
+    target = _ref.target,
+    label = _ref.label,
+    children = _ref.children,
+    focusable = _ref.focusable,
+    active = _ref.active,
+    icon = _ref.icon,
+    iconPosition = _ref.iconPosition,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    disableOnLoading = _ref.disableOnLoading,
+    small = _ref.small,
+    big = _ref.big,
+    withShadow = _ref.withShadow,
+    withoutStyle = _ref.withoutStyle,
+    withoutBootstrapStyles = _ref.withoutBootstrapStyles,
+    withoutTheme = _ref.withoutTheme,
+    asLink = _ref.asLink,
+    outline = _ref.outline,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    iconClassName = _ref.iconClassName,
+    labelClassName = _ref.labelClassName,
+    refButton = _ref.refButton,
+    props = _objectWithoutProperties(_ref, _excluded$b);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -192,7 +187,6 @@ var Button$1 = function Button(_ref) {
   var buttonClassNames = classNames([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
   }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty(_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$w.withIcon, hasIcon), _defineProperty(_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$w.withText, text !== null), _defineProperty(_ref8, styles$w.withShadow, withShadow), _defineProperty(_ref8, styles$w.isSmall, small), _defineProperty(_ref8, styles$w.isBig, big), _defineProperty(_ref8, styles$w.isLink, href !== null), _defineProperty(_ref8, styles$w.asLink, asLink), _defineProperty(_ref8, styles$w.isDisabled, disabled), _defineProperty(_ref8, styles$w.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
-
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
@@ -212,7 +206,6 @@ var Button$1 = function Button(_ref) {
       tabIndex: focusable ? '' : '-1'
     }, content);
   }
-
   return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
     type: type,
     className: buttonClassNames,
@@ -222,7 +215,6 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-
 Button$1.propTypes = propTypes$K;
 Button$1.defaultProps = defaultProps$K;
 
@@ -247,29 +239,26 @@ var defaultProps$J = {
   className: null,
   buttonClassName: null
 };
-
 var Buttons = function Buttons(_ref) {
   var buttons = _ref.buttons,
-      size = _ref.size,
-      theme = _ref.theme,
-      renderButton = _ref.renderButton,
-      onClickButton = _ref.onClickButton,
-      buttonClassName = _ref.buttonClassName,
-      className = _ref.className;
+    size = _ref.size,
+    theme = _ref.theme,
+    renderButton = _ref.renderButton,
+    onClickButton = _ref.onClickButton,
+    buttonClassName = _ref.buttonClassName,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$v.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(button, _excluded$a);
-
+      customClassName = _button$className === void 0 ? null : _button$className,
+      _button$onClick = button.onClick,
+      _onClick = _button$onClick === void 0 ? null : _button$onClick,
+      _button$theme = button.theme,
+      buttonTheme = _button$theme === void 0 ? null : _button$theme,
+      buttonProps = _objectWithoutProperties(button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
       className: classNames([styles$v.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
@@ -277,7 +266,6 @@ var Buttons = function Buttons(_ref) {
         if (_onClick !== null) {
           _onClick(e, button, index);
         }
-
         if (onClickButton !== null) {
           onClickButton(e, button, index);
         }
@@ -287,7 +275,6 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-
 Buttons.propTypes = propTypes$J;
 Buttons.defaultProps = defaultProps$J;
 
@@ -298,11 +285,9 @@ var propTypes$I = {
 var defaultProps$I = {
   className: null
 };
-
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$9);
-
+    props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
     size: "sm",
@@ -312,14 +297,13 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-
 BackButton.propTypes = propTypes$I;
 BackButton.defaultProps = defaultProps$I;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var _excluded$8 = ["type"],
-    _excluded2 = ["component", "id", "settings"];
+  _excluded2 = ["component", "id", "settings"];
 var propTypes$H = {
   name: PropTypes$1.string,
   // .isRequired,
@@ -332,8 +316,8 @@ var propTypes$H = {
   gotoFieldForm: PropTypes$1.func.isRequired,
   closeFieldForm: PropTypes$1.func.isRequired,
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
-
 };
+
 var defaultProps$H = {
   name: null,
   form: null,
@@ -344,51 +328,44 @@ var defaultProps$H = {
   onChange: null,
   fieldContext: null
 };
-
 var FieldForm = function FieldForm(_ref) {
   var name = _ref.name,
-      value = _ref.value,
-      form = _ref.form,
-      formComponents = _ref.formComponents,
-      fields = _ref.fields,
-      className = _ref.className,
-      onChange = _ref.onChange,
-      gotoFieldForm = _ref.gotoFieldForm,
-      closeFieldForm = _ref.closeFieldForm,
-      fieldContext = _ref.fieldContext;
+    value = _ref.value,
+    form = _ref.form,
+    formComponents = _ref.formComponents,
+    fields = _ref.fields,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    gotoFieldForm = _ref.gotoFieldForm,
+    closeFieldForm = _ref.closeFieldForm,
+    fieldContext = _ref.fieldContext;
   var fieldsManager = useFieldsManager();
   var field = getFieldFromPath(name.split('.'), fields, fieldsManager);
-
   var _ref2 = field || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
-
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
-
   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(_ref3, _excluded2);
-
+    _ref3$component = _ref3.component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
+    _ref3.id;
+    _ref3.settings;
+    var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
   var FieldComponent = useFieldComponent(fieldComponent);
   var FormComponent = getComponentFromName(form, formComponents);
   var fieldValue = get(value, name, null);
-
   var onFieldChange = function onFieldChange(newFieldValue) {
     // const { name, fields: subFields = null } = field || {};
-    var newValue = setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
+    var newValue = setFieldValue(value, name.split('.'), newFieldValue
+    // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
     );
 
     if (onChange !== null) {
       onChange(newValue);
     }
   };
-
   var closeForm = useCallback(function () {
     return closeFieldForm(name, form);
   }, [name, form, closeFieldForm]);
@@ -400,7 +377,6 @@ var FieldForm = function FieldForm(_ref) {
     closeFieldForm: closeFieldForm,
     closeForm: closeForm
   };
-
   if (form !== null) {
     return FormComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
       context: fieldContext
@@ -409,9 +385,9 @@ var FieldForm = function FieldForm(_ref) {
     }, formProps, {
       className: className
     }))) : null;
-  } // Use field component with isForm props
-
+  }
 
+  // Use field component with isForm props
   return FieldComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
     context: fieldContext
   }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
@@ -420,7 +396,6 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-
 FieldForm.propTypes = propTypes$H;
 FieldForm.defaultProps = defaultProps$H;
 
@@ -482,49 +457,43 @@ var defaultProps$G = {
   actionsClassName: null,
   cancelClassName: null
 };
-
 var Form = function Form(_ref) {
   var _ref4;
-
   var action = _ref.action,
-      method = _ref.method,
-      initialFields = _ref.fields,
-      initialValue = _ref.initialValue,
-      postForm = _ref.postForm,
-      submitButtonLabel = _ref.submitButtonLabel,
-      submitButtonLoadingLabel = _ref.submitButtonLoadingLabel,
-      buttons = _ref.buttons,
-      children = _ref.children,
-      actionsAlign = _ref.actionsAlign,
-      withoutActions = _ref.withoutActions,
-      withoutComplete = _ref.withoutComplete,
-      withoutBackButton = _ref.withoutBackButton,
-      onComplete = _ref.onComplete,
-      onResponse = _ref.onResponse,
-      onMessage = _ref.onMessage,
-      onCancel = _ref.onCancel,
-      onCancelHref = _ref.onCancelHref,
-      onOpenFieldForm = _ref.onOpenFieldForm,
-      onCloseFieldForm = _ref.onCloseFieldForm,
-      className = _ref.className,
-      fieldsClassName = _ref.fieldsClassName,
-      actionsClassName = _ref.actionsClassName,
-      cancelClassName = _ref.cancelClassName;
-
+    method = _ref.method,
+    initialFields = _ref.fields,
+    initialValue = _ref.initialValue,
+    postForm = _ref.postForm,
+    submitButtonLabel = _ref.submitButtonLabel,
+    submitButtonLoadingLabel = _ref.submitButtonLoadingLabel,
+    buttons = _ref.buttons,
+    children = _ref.children,
+    actionsAlign = _ref.actionsAlign,
+    withoutActions = _ref.withoutActions,
+    withoutComplete = _ref.withoutComplete,
+    withoutBackButton = _ref.withoutBackButton,
+    onComplete = _ref.onComplete,
+    onResponse = _ref.onResponse,
+    onMessage = _ref.onMessage,
+    onCancel = _ref.onCancel,
+    onCancelHref = _ref.onCancelHref,
+    onOpenFieldForm = _ref.onOpenFieldForm,
+    onCloseFieldForm = _ref.onCloseFieldForm,
+    className = _ref.className,
+    fieldsClassName = _ref.fieldsClassName,
+    actionsClassName = _ref.actionsClassName,
+    cancelClassName = _ref.cancelClassName;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      complete = _useState2[0],
-      setComplete = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    complete = _useState2[0],
+    setComplete = _useState2[1];
   useEffect(function () {
     var id = null;
-
     if (complete) {
       id = setTimeout(function () {
         setComplete(false);
       }, 3000);
     }
-
     return function () {
       clearTimeout(id);
     };
@@ -533,68 +502,61 @@ var Form = function Form(_ref) {
     if (onComplete !== null) {
       onComplete(data);
     }
-
     if (!withoutComplete) {
       setComplete(true);
     }
   }, [onComplete, setComplete]);
-
   var _useForm = useForm({
-    value: initialValue,
-    action: action,
-    fields: initialFields,
-    postForm: postForm,
-    onComplete: onCompleteForm
-  }),
-      onSubmit = _useForm.onSubmit,
-      fields = _useForm.fields,
-      status = _useForm.status,
-      value = _useForm.value,
-      setValue = _useForm.setValue,
-      errors = _useForm.errors,
-      response = _useForm.response,
-      generalError = _useForm.generalError;
-
+      value: initialValue,
+      action: action,
+      fields: initialFields,
+      postForm: postForm,
+      onComplete: onCompleteForm
+    }),
+    onSubmit = _useForm.onSubmit,
+    fields = _useForm.fields,
+    status = _useForm.status,
+    value = _useForm.value,
+    setValue = _useForm.setValue,
+    errors = _useForm.errors,
+    response = _useForm.response,
+    generalError = _useForm.generalError;
   var FieldsComponent = useFieldComponent('fields');
-
   useEffect(function () {
     if (onResponse !== null) {
       onResponse(response);
-
       if (onMessage !== null && response && response.message) {
         onMessage(response.message);
       }
     }
   }, [response, onResponse, onMessage]);
   var canSave = validateFields(fields, value);
-
   var _useState3 = useState([]),
-      _useState4 = _slicedToArray(_useState3, 2),
-      fieldPaths = _useState4[0],
-      setFieldPaths = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    fieldPaths = _useState4[0],
+    setFieldPaths = _useState4[1];
   var gotoFieldForm = 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(fieldPaths), [fieldKey]));
-
     if (onOpenFieldForm !== null) {
       onOpenFieldForm();
     }
   }, [fieldPaths, setFieldPaths]);
   var closeFieldForm = useCallback(function () {
     var newFields = _toConsumableArray(fieldPaths);
-
     newFields.pop();
     setFieldPaths(_toConsumableArray(newFields));
-
     if (onCloseFieldForm !== null) {
       onCloseFieldForm();
     }
-  }, [fieldPaths, setFieldPaths]); // The last path
+  }, [fieldPaths, setFieldPaths]);
 
+  // The last path
   var fieldParams = fieldPaths.length > 0 ? fieldPaths[fieldPaths.length - 1] : null;
-  var fieldName = fieldParams !== null ? fieldParams.replace(/\//g, '.') : null; // Get transition value
+  var fieldName = fieldParams !== null ? fieldParams.replace(/\//g, '.') : null;
+
+  // Get transition value
   // const { name: transitionName, timeout: transitionTimeout } = useFormTransition(
   //     fieldPaths,
   //     styles,
@@ -664,7 +626,6 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-
 Form.propTypes = propTypes$G;
 Form.defaultProps = defaultProps$G;
 
@@ -689,17 +650,15 @@ var defaultProps$F = {
   withoutStyle: false,
   className: null
 };
-
 var Link = function Link(_ref) {
   var href = _ref.href,
-      external = _ref.external,
-      children = _ref.children,
-      target = _ref.target,
-      rel = _ref.rel,
-      className = _ref.className,
-      withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties(_ref, _excluded$7);
-
+    external = _ref.external,
+    children = _ref.children,
+    target = _ref.target,
+    rel = _ref.rel,
+    className = _ref.className,
+    withoutStyle = _ref.withoutStyle,
+    props = _objectWithoutProperties(_ref, _excluded$7);
   return external ? /*#__PURE__*/React.createElement("a", Object.assign({
     className: classNames([className, _defineProperty({}, styles$t.withoutStyle, withoutStyle)]),
     href: href,
@@ -710,7 +669,6 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
-
 Link.propTypes = propTypes$F;
 Link.defaultProps = defaultProps$F;
 
@@ -770,40 +728,37 @@ var defaultProps$E = {
   onClickBody: null,
   onClickFooter: null
 };
-
 var Card = function Card(_ref) {
   var _ref10;
-
   var href = _ref.href,
-      header = _ref.header,
-      image = _ref.image,
-      imageAlt = _ref.imageAlt,
-      imageOverlay = _ref.imageOverlay,
-      beforeBody = _ref.beforeBody,
-      title = _ref.title,
-      subtitle = _ref.subtitle,
-      children = _ref.children,
-      afterBody = _ref.afterBody,
-      links = _ref.links,
-      linksInSameBody = _ref.linksInSameBody,
-      footer = _ref.footer,
-      theme = _ref.theme,
-      className = _ref.className,
-      imageClassName = _ref.imageClassName,
-      headerClassName = _ref.headerClassName,
-      titleClassName = _ref.titleClassName,
-      subtitleClassName = _ref.subtitleClassName,
-      bodyClassName = _ref.bodyClassName,
-      footerClassName = _ref.footerClassName,
-      onClick = _ref.onClick,
-      onClickBody = _ref.onClickBody,
-      onClickFooter = _ref.onClickFooter;
+    header = _ref.header,
+    image = _ref.image,
+    imageAlt = _ref.imageAlt,
+    imageOverlay = _ref.imageOverlay,
+    beforeBody = _ref.beforeBody,
+    title = _ref.title,
+    subtitle = _ref.subtitle,
+    children = _ref.children,
+    afterBody = _ref.afterBody,
+    links = _ref.links,
+    linksInSameBody = _ref.linksInSameBody,
+    footer = _ref.footer,
+    theme = _ref.theme,
+    className = _ref.className,
+    imageClassName = _ref.imageClassName,
+    headerClassName = _ref.headerClassName,
+    titleClassName = _ref.titleClassName,
+    subtitleClassName = _ref.subtitleClassName,
+    bodyClassName = _ref.bodyClassName,
+    footerClassName = _ref.footerClassName,
+    onClick = _ref.onClick,
+    onClickBody = _ref.onClickBody,
+    onClickFooter = _ref.onClickFooter;
   var linksElements = (links || []).map(function (_ref2, index) {
     var label = _ref2.label,
-        _ref2$className = _ref2.className,
-        linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties(_ref2, _excluded$6);
-
+      _ref2$className = _ref2.className,
+      linkClassName = _ref2$className === void 0 ? null : _ref2$className,
+      linkProps = _objectWithoutProperties(_ref2, _excluded$6);
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
       className: classNames(['card-link', _defineProperty({}, linkClassName, linkClassName !== null)])
@@ -844,14 +799,12 @@ var Card = function Card(_ref) {
     className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
   var cardClassName = classNames(['card', (_ref10 = {}, _defineProperty(_ref10, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), _defineProperty(_ref10, 'bg-dark', imageOverlay || theme === 'dark'), _defineProperty(_ref10, 'text-dark', theme === 'light'), _defineProperty(_ref10, 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), _defineProperty(_ref10, className, className !== null), _ref10)]);
-
   if (href !== null) {
     return /*#__PURE__*/React.createElement(Link, {
       href: href,
       className: cardClassName
     }, cardInner);
   }
-
   if (onClick !== null) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
@@ -859,12 +812,10 @@ var Card = function Card(_ref) {
       onClick: onClick
     }, cardInner);
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: cardClassName
   }, cardInner);
 };
-
 Card.propTypes = propTypes$E;
 Card.defaultProps = defaultProps$E;
 
@@ -878,11 +829,10 @@ var defaultProps$D = {
   color: 'currentColor',
   className: null
 };
-
 var Spinner = function Spinner(_ref) {
   var animated = _ref.animated,
-      color = _ref.color,
-      className = _ref.className;
+    color = _ref.color,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     className: classNames([_defineProperty({}, className, className !== null)]),
     width: "38",
@@ -937,7 +887,6 @@ var Spinner = function Spinner(_ref) {
     repeatCount: "indefinite"
   }) : null))));
 };
-
 Spinner.propTypes = propTypes$D;
 Spinner.defaultProps = defaultProps$D;
 
@@ -956,19 +905,16 @@ var defaultProps$C = {
   children: null,
   className: null
 };
-
 var FormPanel = function FormPanel(_ref) {
   var description = _ref.description,
-      loading = _ref.loading,
-      children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$5);
-
+    loading = _ref.loading,
+    children = _ref.children,
+    className = _ref.className,
+    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$C;
 FormPanel.defaultProps = defaultProps$C;
 
@@ -990,14 +936,13 @@ var defaultProps$B = {
   noWrap: false,
   className: null
 };
-
 var Breadcrumb = function Breadcrumb(_ref) {
   var items = _ref.items,
-      theme = _ref.theme,
-      separator = _ref.separator,
-      withoutBar = _ref.withoutBar,
-      noWrap = _ref.noWrap,
-      className = _ref.className;
+    theme = _ref.theme,
+    separator = _ref.separator,
+    withoutBar = _ref.withoutBar,
+    noWrap = _ref.noWrap,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("nav", {
     className: className
   }, /*#__PURE__*/React.createElement("ol", {
@@ -1009,13 +954,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
     }])
   }, 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;
+      label = _ref2.label,
+      _ref2$active = _ref2.active,
+      active = _ref2$active === void 0 ? false : _ref2$active,
+      _ref2$onClick = _ref2.onClick,
+      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
     return /*#__PURE__*/React.createElement("li", {
       className: classNames(['breadcrumb-item', (_ref3 = {
         active: active
@@ -1031,7 +975,6 @@ var Breadcrumb = function Breadcrumb(_ref) {
     }, /*#__PURE__*/React.createElement(Label, null, label)) : null);
   })));
 };
-
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
 
@@ -1056,32 +999,29 @@ var defaultProps$A = {
   onClickItem: null,
   onClickOutside: null
 };
-
 var Dropdown = function Dropdown(_ref) {
   var _ref2;
-
   var items = _ref.items,
-      children = _ref.children,
-      visible = _ref.visible,
-      align = _ref.align,
-      className = _ref.className,
-      itemClassName = _ref.itemClassName,
-      onClickItem = _ref.onClickItem,
-      onClickOutside = _ref.onClickOutside;
+    children = _ref.children,
+    visible = _ref.visible,
+    align = _ref.align,
+    className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    onClickItem = _ref.onClickItem,
+    onClickOutside = _ref.onClickOutside;
   var refContainer = useRef(null);
-
   var _useState = useState(visible),
-      _useState2 = _slicedToArray(_useState, 2),
-      enabled = _useState2[0],
-      setEnabled = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    enabled = _useState2[0],
+    setEnabled = _useState2[1];
   var onDocumentClick = useCallback(function (e) {
     if (refContainer.current && !refContainer.current.contains(e.currentTarget) && onClickOutside !== null) {
       onClickOutside(e);
     }
   }, [refContainer.current, onClickOutside]);
-  useDocumentEvent('click', onDocumentClick, enabled); // Delay the outside click detection
+  useDocumentEvent('click', onDocumentClick, enabled);
 
+  // Delay the outside click detection
   useEffect(function () {
     var id = setTimeout(function () {
       setEnabled(visible);
@@ -1095,23 +1035,20 @@ var Dropdown = function Dropdown(_ref) {
     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,
-        customClassName = _it$className === void 0 ? null : _it$className,
-        _it$label = it.label,
-        label = _it$label === void 0 ? null : _it$label,
-        _it$children = it.children,
-        itemChildren = _it$children === void 0 ? null : _it$children,
-        _it$onClick = it.onClick,
-        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        _it$active = it.active,
-        active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties(it, _excluded$4);
-
+      type = _it$type === void 0 ? 'link' : _it$type,
+      _it$className = it.className,
+      customClassName = _it$className === void 0 ? null : _it$className,
+      _it$label = it.label,
+      label = _it$label === void 0 ? null : _it$label,
+      _it$children = it.children,
+      itemChildren = _it$children === void 0 ? null : _it$children,
+      _it$onClick = it.onClick,
+      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      _it$active = it.active,
+      active = _it$active === void 0 ? false : _it$active,
+      itemProps = _objectWithoutProperties(it, _excluded$4);
     var ItemComponent = 'div';
-
     if (type === 'link') {
       ItemComponent = Link;
     } else if (type === 'button') {
@@ -1121,12 +1058,10 @@ var Dropdown = function Dropdown(_ref) {
     } else if (type === 'divider') {
       ItemComponent = 'hr';
     }
-
     var finalOnClickItem = customOnClick !== null || type === 'link' && onClickItem !== null ? function (e) {
       if (customOnClick !== null) {
         customOnClick(e);
       }
-
       if (type === 'link' && onClickItem !== null) {
         onClickItem(e);
       }
@@ -1143,7 +1078,6 @@ var Dropdown = function Dropdown(_ref) {
     }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
   }));
 };
-
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
 
@@ -1186,63 +1120,57 @@ var defaultProps$z = {
   dropdownLinkClassName: null,
   dropdownAlign: null
 };
-
 var Menu = function Menu(_ref) {
   var items = _ref.items,
-      tagName = _ref.tagName,
-      itemTagName = _ref.itemTagName,
-      children = _ref.children,
-      linkAsItem = _ref.linkAsItem,
-      className = _ref.className,
-      itemClassName = _ref.itemClassName,
-      linkClassName = _ref.linkClassName,
-      hasSubMenuClassName = _ref.hasSubMenuClassName,
-      subMenuClassName = _ref.subMenuClassName,
-      subMenuItemClassName = _ref.subMenuItemClassName,
-      subMenuLinkClassName = _ref.subMenuLinkClassName,
-      hasDropdownClassName = _ref.hasDropdownClassName,
-      dropdownClassName = _ref.dropdownClassName,
-      dropdownItemClassName = _ref.dropdownItemClassName,
-      dropdownLinkClassName = _ref.dropdownLinkClassName,
-      dropdownAlign = _ref.dropdownAlign;
-
+    tagName = _ref.tagName,
+    itemTagName = _ref.itemTagName,
+    children = _ref.children,
+    linkAsItem = _ref.linkAsItem,
+    className = _ref.className,
+    itemClassName = _ref.itemClassName,
+    linkClassName = _ref.linkClassName,
+    hasSubMenuClassName = _ref.hasSubMenuClassName,
+    subMenuClassName = _ref.subMenuClassName,
+    subMenuItemClassName = _ref.subMenuItemClassName,
+    subMenuLinkClassName = _ref.subMenuLinkClassName,
+    hasDropdownClassName = _ref.hasDropdownClassName,
+    dropdownClassName = _ref.dropdownClassName,
+    dropdownItemClassName = _ref.dropdownItemClassName,
+    dropdownLinkClassName = _ref.dropdownLinkClassName,
+    dropdownAlign = _ref.dropdownAlign;
   var _useState = useState(items.map(function () {
-    return false;
-  })),
-      _useState2 = _slicedToArray(_useState, 2),
-      dropdownsVisible = _useState2[0],
-      setDropdownsVisible = _useState2[1];
-
+      return false;
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    dropdownsVisible = _useState2[0],
+    setDropdownsVisible = _useState2[1];
   var ListComponent = linkAsItem ? 'div' : tagName;
   return /*#__PURE__*/React.createElement(ListComponent, {
     className: className
   }, children !== null ? children : items.map(function (it, index) {
     var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7, _classNames8;
-
     var id = it.id,
-        _it$className = it.className,
-        customClassName = _it$className === void 0 ? null : _it$className,
-        _it$linkClassName = it.linkClassName,
-        customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
-        _it$href = it.href,
-        href = _it$href === void 0 ? null : _it$href,
-        label = it.label,
-        _it$external = it.external,
-        external = _it$external === void 0 ? false : _it$external,
-        _it$items = it.items,
-        subItems = _it$items === void 0 ? null : _it$items,
-        _it$dropdown = it.dropdown,
-        dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
-        _it$active = it.active,
-        active = _it$active === void 0 ? false : _it$active,
-        _it$onClick = it.onClick,
-        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties(it, _excluded$3);
-
+      _it$className = it.className,
+      customClassName = _it$className === void 0 ? null : _it$className,
+      _it$linkClassName = it.linkClassName,
+      customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
+      _it$href = it.href,
+      href = _it$href === void 0 ? null : _it$href,
+      label = it.label,
+      _it$external = it.external,
+      external = _it$external === void 0 ? false : _it$external,
+      _it$items = it.items,
+      subItems = _it$items === void 0 ? null : _it$items,
+      _it$dropdown = it.dropdown,
+      dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
+      _it$active = it.active,
+      active = _it$active === void 0 ? false : _it$active,
+      _it$onClick = it.onClick,
+      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      itemProps = _objectWithoutProperties(it, _excluded$3);
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
       setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
-
       if (customOnClick !== null) {
         customOnClick(e);
       }
@@ -1290,7 +1218,6 @@ var Menu = function Menu(_ref) {
     }) : null);
   }));
 };
-
 Menu.propTypes = propTypes$z;
 Menu.defaultProps = defaultProps$z;
 
@@ -1328,30 +1255,26 @@ var defaultProps$y = {
   breadCrumbsClassName: null,
   collapseClassName: null
 };
-
 var Navbar = function Navbar(_ref) {
   var _ref2, _ref6;
-
   var brand = _ref.brand,
-      brandLink = _ref.brandLink,
-      breadcrumbs = _ref.breadcrumbs,
-      theme = _ref.theme,
-      size = _ref.size,
-      compact = _ref.compact,
-      noWrap = _ref.noWrap,
-      withoutCollapse = _ref.withoutCollapse,
-      withoutCollapseToggle = _ref.withoutCollapseToggle,
-      children = _ref.children,
-      className = _ref.className,
-      brandClassName = _ref.brandClassName,
-      breadCrumbsClassName = _ref.breadCrumbsClassName,
-      collapseClassName = _ref.collapseClassName;
-
+    brandLink = _ref.brandLink,
+    breadcrumbs = _ref.breadcrumbs,
+    theme = _ref.theme,
+    size = _ref.size,
+    compact = _ref.compact,
+    noWrap = _ref.noWrap,
+    withoutCollapse = _ref.withoutCollapse,
+    withoutCollapseToggle = _ref.withoutCollapseToggle,
+    children = _ref.children,
+    className = _ref.className,
+    brandClassName = _ref.brandClassName,
+    breadCrumbsClassName = _ref.breadCrumbsClassName,
+    collapseClassName = _ref.collapseClassName;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      menuVisible = _useState2[0],
-      setMenuVisible = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    menuVisible = _useState2[0],
+    setMenuVisible = _useState2[1];
   var onClickMenu = useCallback(function () {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
@@ -1387,7 +1310,6 @@ var Navbar = function Navbar(_ref) {
     className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, (_ref6 = {}, _defineProperty(_ref6, collapseClassName, collapseClassName !== null), _defineProperty(_ref6, "show", menuVisible), _ref6)])
   }, children) : children));
 };
-
 Navbar.propTypes = propTypes$y;
 Navbar.defaultProps = defaultProps$y;
 
@@ -1431,25 +1353,22 @@ var defaultProps$x = {
   linkClassName: null,
   onClickPage: null
 };
-
 var PaginationMenu = function PaginationMenu(_ref) {
   var page = _ref.page,
-      total = _ref.total,
-      url = _ref.url,
-      withPreviousNext = _ref.withPreviousNext,
-      className = _ref.className,
-      paginationClassName = _ref.paginationClassName,
-      itemClassName = _ref.itemClassName,
-      linkClassName = _ref.linkClassName,
-      onClickPage = _ref.onClickPage;
+    total = _ref.total,
+    url = _ref.url,
+    withPreviousNext = _ref.withPreviousNext,
+    className = _ref.className,
+    paginationClassName = _ref.paginationClassName,
+    itemClassName = _ref.itemClassName,
+    linkClassName = _ref.linkClassName,
+    onClickPage = _ref.onClickPage;
   var getUrl = useCallback(function (currentPage) {
     return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
   }, [url]);
-
   var pages = _toConsumableArray(Array(total).keys()).map(function (it) {
     return it + 1;
   });
-
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {
@@ -1493,7 +1412,6 @@ var PaginationMenu = function PaginationMenu(_ref) {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
 };
-
 PaginationMenu.propTypes = propTypes$x;
 PaginationMenu.defaultProps = defaultProps$x;
 
@@ -1517,15 +1435,14 @@ var defaultProps$w = {
   className: null,
   onClickItem: null
 };
-
 var TabsMenu = function TabsMenu(_ref) {
   var items = _ref.items,
-      size = _ref.size,
-      theme = _ref.theme,
-      renderItemButton = _ref.renderItemButton,
-      buttonClassName = _ref.buttonClassName,
-      className = _ref.className,
-      onClickItem = _ref.onClickItem;
+    size = _ref.size,
+    theme = _ref.theme,
+    renderItemButton = _ref.renderItemButton,
+    buttonClassName = _ref.buttonClassName,
+    className = _ref.className,
+    onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$o.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement(Buttons, {
@@ -1538,7 +1455,6 @@ var TabsMenu = function TabsMenu(_ref) {
     buttonClassName: classNames([styles$o.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
   }));
 };
-
 TabsMenu.propTypes = propTypes$w;
 TabsMenu.defaultProps = defaultProps$w;
 
@@ -1552,11 +1468,10 @@ var propTypes$v = {
 var defaultProps$v = {
   className: null
 };
-
 var ModalsContainer = function ModalsContainer(_ref) {
   var modals = _ref.modals,
-      setModalsContainer = _ref.setModalsContainer,
-      className = _ref.className;
+    setModalsContainer = _ref.setModalsContainer,
+    className = _ref.className;
   var containerRef = useRef(null);
   useEffect(function () {
     setModalsContainer(containerRef.current);
@@ -1568,7 +1483,6 @@ var ModalsContainer = function ModalsContainer(_ref) {
     ref: containerRef
   }));
 };
-
 ModalsContainer.propTypes = propTypes$v;
 ModalsContainer.defaultProps = defaultProps$v;
 var Modals = withModals(ModalsContainer);
@@ -1594,14 +1508,13 @@ var defaultProps$u = {
   unregister: null,
   children: null
 };
-
 var ElementPortal = function ElementPortal(_ref) {
   var id = _ref.id,
-      data = _ref.data,
-      children = _ref.children,
-      container = _ref.container,
-      register = _ref.register,
-      unregister = _ref.unregister;
+    data = _ref.data,
+    children = _ref.children,
+    container = _ref.container,
+    register = _ref.register,
+    unregister = _ref.unregister;
   var finalId = useMemo(function () {
     return id || "element-".concat(new Date().getTime());
   }, [id]);
@@ -1609,7 +1522,6 @@ var ElementPortal = function ElementPortal(_ref) {
     if (register !== null) {
       register(finalId, data);
     }
-
     return function () {
       if (unregister !== null) {
         unregister(finalId);
@@ -1618,7 +1530,6 @@ var ElementPortal = function ElementPortal(_ref) {
   }, [finalId, data]);
   return container !== null ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
 };
-
 ElementPortal.propTypes = propTypes$u;
 ElementPortal.defaultProps = defaultProps$u;
 
@@ -1634,19 +1545,16 @@ var defaultProps$t = {
   data: null,
   children: null
 };
-
 var ModalPortal = function ModalPortal(_ref) {
   var id = _ref.id,
-      data = _ref.data,
-      children = _ref.children;
-
+    data = _ref.data,
+    children = _ref.children;
   var _useModals = useModals(),
-      container = _useModals.container,
-      _useModals$register = _useModals.register,
-      register = _useModals$register === void 0 ? null : _useModals$register,
-      _useModals$unregister = _useModals.unregister,
-      unregister = _useModals$unregister === void 0 ? null : _useModals$unregister;
-
+    container = _useModals.container,
+    _useModals$register = _useModals.register,
+    register = _useModals$register === void 0 ? null : _useModals$register,
+    _useModals$unregister = _useModals.unregister,
+    unregister = _useModals$unregister === void 0 ? null : _useModals$unregister;
   return /*#__PURE__*/React.createElement(ElementPortal, {
     id: id,
     data: data,
@@ -1655,7 +1563,6 @@ var ModalPortal = function ModalPortal(_ref) {
     unregister: unregister
   }, children);
 };
-
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
 
@@ -1671,12 +1578,11 @@ var defaultProps$s = {
   position: 'center',
   children: null
 };
-
 var Modal = function Modal(_ref) {
   var id = _ref.id,
-      children = _ref.children,
-      position = _ref.position,
-      title = _ref.title;
+    children = _ref.children,
+    position = _ref.position,
+    title = _ref.title;
   var finalId = useMemo(function () {
     return id || getDisplayName(children.type);
   }, [id, children.type]);
@@ -1694,7 +1600,6 @@ var Modal = function Modal(_ref) {
     className: classNames([styles$m.inner, 'bg-dark'])
   }, children)));
 };
-
 Modal.propTypes = propTypes$s;
 Modal.defaultProps = defaultProps$s;
 
@@ -1720,22 +1625,22 @@ var defaultProps$r = {
   onClickClose: null,
   className: null
 };
-
 var ModalDialog = function ModalDialog(_ref) {
   var title = _ref.title,
-      header = _ref.header,
-      children = _ref.children,
-      buttons = _ref.buttons,
-      footer = _ref.footer,
-      onClickClose = _ref.onClickClose,
-      className = _ref.className;
+    header = _ref.header,
+    children = _ref.children,
+    buttons = _ref.buttons,
+    footer = _ref.footer,
+    onClickClose = _ref.onClickClose,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-dialog', styles$l.container, _defineProperty({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', 'p-2', styles$l.header, {// 'bg-dark': theme === 'dark',
+    className: classNames(['modal-header', 'p-2', styles$l.header, {
+      // 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1747,7 +1652,8 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', 'p-2', styles$l.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames(['modal-body', 'p-2', styles$l.body, {
+      // [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
       // 'bg-dark': theme === 'dark',
     }])
@@ -1758,7 +1664,6 @@ var ModalDialog = function ModalDialog(_ref) {
     className: styles$l.buttons
   }) : null) : null));
 };
-
 ModalDialog.propTypes = propTypes$r;
 ModalDialog.defaultProps = defaultProps$r;
 
@@ -1785,13 +1690,12 @@ var defaultProps$q = {
   onUploaded: null,
   onRequestClose: null
 };
-
 var UploadModal = function UploadModal(_ref2) {
   var type = _ref2.type,
-      opened = _ref2.opened,
-      sources = _ref2.sources,
-      onUploaded = _ref2.onUploaded,
-      onRequestClose = _ref2.onRequestClose;
+    opened = _ref2.opened,
+    sources = _ref2.sources,
+    onUploaded = _ref2.onUploaded,
+    onRequestClose = _ref2.onRequestClose;
   var onUppyComplete = useCallback(function (response) {
     if (onUploaded !== null) {
       onUploaded(response);
@@ -1805,7 +1709,6 @@ var UploadModal = function UploadModal(_ref2) {
         return t !== null;
       });
     }
-
     return ['image', 'video', 'audio'].indexOf(type) !== -1 ? ["".concat(type, "/*")] : null;
   }, [type]);
   var uppy = useUppy({
@@ -1828,7 +1731,6 @@ var UploadModal = function UploadModal(_ref2) {
     plugins: sources
   })) : null;
 };
-
 UploadModal.propTypes = propTypes$q;
 UploadModal.defaultProps = defaultProps$q;
 
@@ -1844,11 +1746,10 @@ var defaultProps$p = {
   setPanelsContainer: null,
   className: null
 };
-
 var PanelsContainer = function PanelsContainer(_ref) {
   var panels = _ref.panels,
-      setPanelsContainer = _ref.setPanelsContainer,
-      className = _ref.className;
+    setPanelsContainer = _ref.setPanelsContainer,
+    className = _ref.className;
   var containerRef = useRef(null);
   useEffect(function () {
     setPanelsContainer(containerRef.current);
@@ -1860,7 +1761,6 @@ var PanelsContainer = function PanelsContainer(_ref) {
     ref: containerRef
   }));
 };
-
 PanelsContainer.propTypes = propTypes$p;
 PanelsContainer.defaultProps = defaultProps$p;
 var Panels = withPanels(PanelsContainer);
@@ -1877,25 +1777,21 @@ var defaultProps$o = {
   data: null,
   children: null
 };
-
 var PanelPortal = function PanelPortal(_ref) {
   var id = _ref.id,
-      data = _ref.data,
-      children = _ref.children;
-
+    data = _ref.data,
+    children = _ref.children;
   var _usePanels = usePanels(),
-      _usePanels$panels = _usePanels.panels,
-      panels = _usePanels$panels === void 0 ? null : _usePanels$panels,
-      container = _usePanels.container,
-      _usePanels$register = _usePanels.register,
-      register = _usePanels$register === void 0 ? null : _usePanels$register,
-      _usePanels$unregister = _usePanels.unregister,
-      unregister = _usePanels$unregister === void 0 ? null : _usePanels$unregister;
-
+    _usePanels$panels = _usePanels.panels,
+    panels = _usePanels$panels === void 0 ? null : _usePanels$panels,
+    container = _usePanels.container,
+    _usePanels$register = _usePanels.register,
+    register = _usePanels$register === void 0 ? null : _usePanels$register,
+    _usePanels$unregister = _usePanels.unregister,
+    unregister = _usePanels$unregister === void 0 ? null : _usePanels$unregister;
   if (panels === null) {
     return children;
   }
-
   return /*#__PURE__*/React.createElement(ElementPortal, {
     id: id,
     data: data,
@@ -1904,7 +1800,6 @@ var PanelPortal = function PanelPortal(_ref) {
     unregister: unregister
   }, children);
 };
-
 PanelPortal.propTypes = propTypes$o;
 PanelPortal.defaultProps = defaultProps$o;
 
@@ -1921,11 +1816,10 @@ var defaultProps$n = {
   title: null,
   children: null
 };
-
 var Panel = function Panel(_ref) {
   var id = _ref.id,
-      children = _ref.children,
-      title = _ref.title;
+    children = _ref.children,
+    title = _ref.title;
   var finalId = useMemo(function () {
     return id || getDisplayName(children.type);
   }, [id, children.type]);
@@ -1941,7 +1835,6 @@ var Panel = function Panel(_ref) {
     className: styles$j.container
   }, children));
 };
-
 Panel.propTypes = propTypes$n;
 Panel.defaultProps = defaultProps$n;
 
@@ -1965,23 +1858,19 @@ var defaultProps$m = {
   openedClassName: null,
   buttonClassName: null
 };
-
 var CollapsablePanel = function CollapsablePanel(_ref) {
   var _ref2;
-
   var title = _ref.title,
-      children = _ref.children,
-      className = _ref.className,
-      topClassName = _ref.topClassName,
-      contentClassName = _ref.contentClassName,
-      openedClassName = _ref.openedClassName,
-      buttonClassName = _ref.buttonClassName;
-
+    children = _ref.children,
+    className = _ref.className,
+    topClassName = _ref.topClassName,
+    contentClassName = _ref.contentClassName,
+    openedClassName = _ref.openedClassName,
+    buttonClassName = _ref.buttonClassName;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      opened = _useState2[0],
-      setOpened = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
   var onClick = useCallback(function () {
     return setOpened(!opened);
   }, [opened, setOpened]);
@@ -2003,7 +1892,6 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     className: classNames([styles$i.content, _defineProperty({}, contentClassName, contentClassName !== null)])
   }, children));
 };
-
 CollapsablePanel.propTypes = propTypes$m;
 CollapsablePanel.defaultProps = defaultProps$m;
 
@@ -2019,12 +1907,11 @@ var defaultProps$l = {
   fill: '#fff',
   className: null
 };
-
 var Close = function Close(_ref) {
   var stroke = _ref.stroke,
-      border = _ref.border,
-      fill = _ref.fill,
-      className = _ref.className;
+    border = _ref.border,
+    fill = _ref.fill,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "42.9",
@@ -2057,7 +1944,6 @@ var Close = function Close(_ref) {
     d: "M0.3,0l13.7,14.2"
   })))));
 };
-
 Close.propTypes = propTypes$l;
 Close.defaultProps = defaultProps$l;
 
@@ -2072,11 +1958,10 @@ var defaultProps$k = {
   withTime: false,
   timeSeparator: ', '
 };
-
 var Date$1 = function Date(_ref) {
   var date = _ref.date,
-      withTime = _ref.withTime,
-      timeSeparator = _ref.timeSeparator;
+    withTime = _ref.withTime,
+    timeSeparator = _ref.timeSeparator;
   var dateObject = useMemo(function () {
     return dayjs(date).toDate();
   }, [date]);
@@ -2089,7 +1974,6 @@ var Date$1 = function Date(_ref) {
     value: dateObject
   }) : null);
 };
-
 Date$1.propTypes = propTypes$k;
 Date$1.defaultProps = defaultProps$k;
 
@@ -2114,47 +1998,39 @@ var defaultProps$j = {
   children: null,
   className: null
 };
-
 var Detector = function Detector(_ref) {
   var throttleDelay = _ref.throttleDelay,
-      threshold = _ref.threshold,
-      onEnter = _ref.onEnter,
-      onLeave = _ref.onLeave,
-      onChange = _ref.onChange,
-      disabled = _ref.disabled,
-      children = _ref.children,
-      className = _ref.className;
-
+    threshold = _ref.threshold,
+    onEnter = _ref.onEnter,
+    onLeave = _ref.onLeave,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled,
+    children = _ref.children,
+    className = _ref.className;
   var _useIntersectionObser = useIntersectionObserver({
-    threshold: threshold
-  }),
-      ref = _useIntersectionObser.ref,
-      isIntersecting = _useIntersectionObser.entry.isIntersecting;
-
+      threshold: threshold
+    }),
+    ref = _useIntersectionObser.ref,
+    isIntersecting = _useIntersectionObser.entry.isIntersecting;
   var enteredRef = useRef(false);
   var triggerChange = useMemo(function () {
     var callback = function callback(intersecting) {
       var entered = enteredRef.current;
-
       if (onEnter !== null && intersecting && !entered) {
         onEnter();
       }
-
       if (onLeave !== null && !intersecting && entered) {
         onLeave();
       }
-
       if (onChange !== null) {
         onChange(intersecting);
       }
-
       if (intersecting && !entered) {
         enteredRef.current = true;
       } else if (!intersecting && entered) {
         enteredRef.current = false;
       }
     };
-
     return throttleDelay !== null ? throttle(callback, throttleDelay, {
       trailing: true,
       leading: true
@@ -2164,7 +2040,6 @@ var Detector = function Detector(_ref) {
     if (disabled) {
       return function () {};
     }
-
     triggerChange(isIntersecting);
     return function () {
       if (throttleDelay !== null) {
@@ -2177,7 +2052,6 @@ var Detector = function Detector(_ref) {
     ref: ref
   }, children);
 };
-
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
@@ -2201,17 +2075,15 @@ var defaultProps$i = {
   children: null,
   withInvertedColors: true
 };
-
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
   var _ref2;
-
   var width = _ref.width,
-      height = _ref.height,
-      outline = _ref.outline,
-      className = _ref.className,
-      boxClassName = _ref.boxClassName,
-      withInvertedColors = _ref.withInvertedColors,
-      children = _ref.children;
+    height = _ref.height,
+    outline = _ref.outline,
+    className = _ref.className,
+    boxClassName = _ref.boxClassName,
+    withInvertedColors = _ref.withInvertedColors,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$h.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$h.outline, outline), _defineProperty(_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
@@ -2222,12 +2094,13 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
     }
   }, children));
 };
-
 PlaceholderBlock.propTypes = propTypes$i;
 PlaceholderBlock.defaultProps = defaultProps$i;
 
 /* eslint-disable react/jsx-props-no-spreading */
 
+// import { PropTypes as MicromagPropTypes } from '@micromag/core';
+
 var propTypes$h = {
   name: PropTypes$1.string.isRequired,
   components: PropTypes$1.object.isRequired,
@@ -2237,44 +2110,37 @@ var propTypes$h = {
   isPlaceholder: PropTypes$1.bool,
   className: PropTypes$1.string,
   placeholderProps: PropTypes$1.object // eslint-disable-line
-
 };
+
 var defaultProps$h = {
   props: {},
   isPlaceholder: false,
   className: null,
   placeholderProps: null
 };
-
 var ElementComponent = function ElementComponent(_ref) {
   var name = _ref.name,
-      components = _ref.components,
-      props = _ref.props,
-      isPlaceholder = _ref.isPlaceholder,
-      className = _ref.className,
-      placeholderProps = _ref.placeholderProps;
-
+    components = _ref.components,
+    props = _ref.props,
+    isPlaceholder = _ref.isPlaceholder,
+    className = _ref.className,
+    placeholderProps = _ref.placeholderProps;
   if (!name) {
     return 'Bad component name';
   }
-
   if (isPlaceholder) {
     // TODO: figure out what this did
     // const PlaceholderComponent = Placeholders[pascalCase(name)];
     return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
   }
-
   var RealComponent = components[pascalCase(name)];
-
   if (!RealComponent) {
     return 'Bad component';
   }
-
   return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
     className: className
   }));
 };
-
 ElementComponent.propTypes = propTypes$h;
 ElementComponent.defaultProps = defaultProps$h;
 
@@ -2292,60 +2158,49 @@ var defaultProps$g = {
   light: false,
   className: null
 };
-
 var Empty = function Empty(_ref) {
   var _ref2;
-
   var children = _ref.children,
-      withoutBorder = _ref.withoutBorder,
-      light = _ref.light,
-      className = _ref.className;
+    withoutBorder = _ref.withoutBorder,
+    light = _ref.light,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$g.light, light), _defineProperty(_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.middle
   }, /*#__PURE__*/React.createElement(Label, null, children)));
 };
-
 Empty.propTypes = propTypes$g;
 Empty.defaultProps = defaultProps$g;
 
 var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
   var _ref = media || {},
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? {} : _ref$files;
-
+    _ref$files = _ref.files,
+    files = _ref$files === void 0 ? {} : _ref$files;
   var _ref2 = files || {},
-      _ref2$original = _ref2.original,
-      originalFile = _ref2$original === void 0 ? null : _ref2$original;
-
+    _ref2$original = _ref2.original,
+    originalFile = _ref2$original === void 0 ? null : _ref2$original;
   var _ref3 = originalFile || {},
-      _ref3$name = _ref3.name,
-      originalName = _ref3$name === void 0 ? null : _ref3$name,
-      _ref3$mime = _ref3.mime,
-      originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
-
+    _ref3$name = _ref3.name,
+    originalName = _ref3$name === void 0 ? null : _ref3$name,
+    _ref3$mime = _ref3.mime,
+    originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
   var urls = formats.reduce(function (currentUrls, 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(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(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
     }
-
     return currentUrls;
   }, []);
   return urls;
 };
-
 var propTypes$f = {
   fonts: PropTypes.fonts,
   formats: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
@@ -2363,35 +2218,30 @@ var defaultProps$f = {
     format: 'truetype'
   }, 'svg']
 };
-
 var FontFaces = function FontFaces(_ref4) {
   var fonts = _ref4.fonts,
-      formats = _ref4.formats;
+    formats = _ref4.formats;
   var fontFaces = (fonts || []).filter(function (it) {
     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,
-        _ref5$media = _ref5.media,
-        media = _ref5$media === void 0 ? null : _ref5$media,
-        _ref5$variants = _ref5.variants,
-        variants = _ref5$variants === void 0 ? [] : _ref5$variants;
-
+      name = _ref5$name === void 0 ? null : _ref5$name,
+      _ref5$media = _ref5.media,
+      media = _ref5$media === void 0 ? null : _ref5$media,
+      _ref5$variants = _ref5.variants,
+      variants = _ref5$variants === void 0 ? [] : _ref5$variants;
     if (name === null) {
       return fontFontFaces;
     }
-
     var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
     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,
-          variantMedia = _ref6$media === void 0 ? null : _ref6$media;
-
+        style = _ref6.style,
+        _ref6$media = _ref6.media,
+        variantMedia = _ref6$media === void 0 ? null : _ref6$media;
       if (variantMedia == null) {
         return null;
       }
-
       var variantUrls = getUrlsFromMedia(variantMedia, formats);
       return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
     })));
@@ -2402,7 +2252,6 @@ var FontFaces = function FontFaces(_ref4) {
     type: "text/css"
   }, fontFaces.join('\n')) : null;
 };
-
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
 
@@ -2428,16 +2277,15 @@ var defaultProps$e = {
   bodyClassName: null,
   titleClassName: null
 };
-
 var Media = function Media(_ref) {
   var thumbnail = _ref.thumbnail,
-      thumbnailAlign = _ref.thumbnailAlign,
-      children = _ref.children,
-      title = _ref.title,
-      className = _ref.className,
-      thumbnailClassName = _ref.thumbnailClassName,
-      bodyClassName = _ref.bodyClassName,
-      titleClassName = _ref.titleClassName;
+    thumbnailAlign = _ref.thumbnailAlign,
+    children = _ref.children,
+    title = _ref.title,
+    className = _ref.className,
+    thumbnailClassName = _ref.thumbnailClassName,
+    bodyClassName = _ref.bodyClassName,
+    titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
@@ -2454,14 +2302,12 @@ var Media = function Media(_ref) {
     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;
 
 /**
  * Core
  */
-
 PropTypes$1.shape({
   listen: PropTypes$1.func.isRequired,
   push: PropTypes$1.func.isRequired
@@ -2489,7 +2335,6 @@ var label = PropTypes$1.oneOfType([message, PropTypes$1.node]);
 PropTypes$1.oneOf([401, 403, 404, 500]);
 PropTypes$1.oneOfType([PropTypes$1.shape({
   current: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
-
 }), PropTypes$1.func]);
 var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
 var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
@@ -2499,10 +2344,10 @@ PropTypes$1.shape({
   currentTime: PropTypes$1.number,
   duration: PropTypes$1.number
 });
+
 /**
  * Site
  */
-
 PropTypes$1.shape({
   id: PropTypes$1.number,
   firstname: PropTypes$1.string,
@@ -2549,10 +2394,10 @@ PropTypes$1.oneOf(['lg', 'sm', null]);
 PropTypes$1.oneOf(['start', 'end']);
 var component = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.func]);
 PropTypes$1.objectOf(component);
+
 /**
  * Forms
  */
-
 var errors = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.string)]);
 PropTypes$1.objectOf(errors);
 var selectOption = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
@@ -2566,10 +2411,10 @@ var formField = PropTypes$1.shape({
   component: component
 });
 PropTypes$1.arrayOf(formField);
+
 /**
  * Medias
  */
-
 var mediaMetadataShape = {
   filename: PropTypes$1.string,
   size: PropTypes$1.number,
@@ -2627,15 +2472,17 @@ PropTypes$1.arrayOf(audioMedia);
 var closedCaptionsMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
   type: PropTypes$1.oneOf(['closed-captions'])
 }));
+
 /**
  * Style
  */
 
-var font = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+PropTypes$1.shape({
   type: PropTypes$1.oneOf(['system', 'google', 'custom']),
   name: PropTypes$1.string,
   media: fontMedia
-})]);
+});
+var font = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.string]);
 PropTypes$1.arrayOf(font);
 var textAlign = PropTypes$1.oneOf(['left', 'right', 'center']);
 var color = PropTypes$1.shape({
@@ -2690,6 +2537,7 @@ PropTypes$1.shape({
   horizontalPosition: PropTypes$1.oneOf(['left', 'center', 'right']),
   verticalPosition: PropTypes$1.oneOf(['top', 'center', 'bottom'])
 });
+
 /**
  * Elements
  */
@@ -2813,6 +2661,7 @@ PropTypes$1.shape({
   textStyle: textStyle,
   messages: conversationMessages
 });
+
 /**
  * Definitions
  */
@@ -2842,10 +2691,10 @@ var fieldDefinition = PropTypes$1.shape({
   fields: fields
 });
 PropTypes$1.arrayOf(fieldDefinition);
+
 /**
  * Components
  */
-
 var storyComponentShape = {
   type: PropTypes$1.string.isRequired
 };
@@ -2857,7 +2706,6 @@ var screenComponents = PropTypes$1.arrayOf(screenComponent);
 /**
  * Theme
  */
-
 var theme = PropTypes$1.shape({
   id: PropTypes$1.string,
   textStyles: PropTypes$1.objectOf(textStyle),
@@ -2869,9 +2717,11 @@ var theme = PropTypes$1.shape({
 PropTypes$1.shape(_objectSpread({
   logo: imageMedia
 }, theme));
+
 /**
  * Branding
  */
+
 // export const branding = PropTypes.shape({
 //     logo: imageMedia,
 //     primaryColor: color,
@@ -2883,27 +2733,26 @@ PropTypes$1.shape(_objectSpread({
 /**
  * Metadata
  */
-
 var metadata = PropTypes$1.shape({
   description: PropTypes$1.string,
   shareUrl: PropTypes$1.string,
   shareImage: imageMedia,
   favIcon: imageMedia
 });
+
 /**
  * Story
  */
-
 PropTypes$1.shape({
   id: PropTypes$1.string,
   theme: theme,
   components: screenComponents,
   metadata: metadata
 });
+
 /**
  * Render
  */
-
 var deviceScreen = PropTypes$1.shape({
   name: PropTypes$1.string.isRequired,
   mediaQuery: PropTypes$1.string
@@ -2917,6 +2766,7 @@ PropTypes$1.shape({
   landscape: PropTypes$1.bool
 });
 PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+
 /**
  * Screens
  */
@@ -2943,12 +2793,15 @@ var slide = PropTypes$1.shape({
   image: imageMedia,
   text: PropTypes$1.string
 });
-PropTypes$1.arrayOf(slide); // export const imageStyle = PropTypes.shape({
+PropTypes$1.arrayOf(slide);
+
+// export const imageStyle = PropTypes.shape({
 //     alt: PropTypes.string,
 //     fit: PropTypes.object,
 // });
 
 PropTypes$1.shape({});
+
 /**
  * Transitions
  */
@@ -2965,6 +2818,7 @@ PropTypes$1.shape({
   "in": transition,
   out: transition
 });
+
 /**
  * Search
  */
@@ -2974,6 +2828,7 @@ var searchFilter = PropTypes$1.shape({
   value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.number])
 });
 PropTypes$1.arrayOf(searchFilter);
+
 /**
  * Payments
  */
@@ -2986,6 +2841,7 @@ var paymentItem = PropTypes$1.shape({
   amount: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])
 });
 PropTypes$1.arrayOf(paymentItem);
+
 /**
  * Page Metadada
  */
@@ -3032,53 +2888,46 @@ var defaultProps$d = {
   suffix: 'Micromag',
   children: null
 };
-
 var Meta = function Meta(_ref) {
   var title = _ref.title,
-      url = _ref.url,
-      metadata = _ref.metadata,
-      fullTitle = _ref.fullTitle,
-      suffix = _ref.suffix,
-      children = _ref.children;
-
+    url = _ref.url,
+    metadata = _ref.metadata,
+    fullTitle = _ref.fullTitle,
+    suffix = _ref.suffix,
+    children = _ref.children;
   var _ref2 = metadata || {},
-      _ref2$canonical = _ref2.canonical,
-      canonical = _ref2$canonical === void 0 ? null : _ref2$canonical,
-      _ref2$description = _ref2.description,
-      description = _ref2$description === void 0 ? null : _ref2$description,
-      _ref2$keywords = _ref2.keywords,
-      keywords = _ref2$keywords === void 0 ? null : _ref2$keywords,
-      _ref2$image = _ref2.image,
-      image = _ref2$image === void 0 ? null : _ref2$image,
-      _ref2$favicon = _ref2.favicon,
-      favicon = _ref2$favicon === void 0 ? null : _ref2$favicon,
-      _ref2$rssUrl = _ref2.rssUrl,
-      rssUrl = _ref2$rssUrl === void 0 ? null : _ref2$rssUrl,
-      _ref2$atomUrl = _ref2.atomUrl,
-      atomUrl = _ref2$atomUrl === void 0 ? null : _ref2$atomUrl,
-      _ref2$microformats = _ref2.microformats,
-      microformats = _ref2$microformats === void 0 ? [] : _ref2$microformats,
-      _ref2$language = _ref2.language,
-      language = _ref2$language === void 0 ? null : _ref2$language;
-
+    _ref2$canonical = _ref2.canonical,
+    canonical = _ref2$canonical === void 0 ? null : _ref2$canonical,
+    _ref2$description = _ref2.description,
+    description = _ref2$description === void 0 ? null : _ref2$description,
+    _ref2$keywords = _ref2.keywords,
+    keywords = _ref2$keywords === void 0 ? null : _ref2$keywords,
+    _ref2$image = _ref2.image,
+    image = _ref2$image === void 0 ? null : _ref2$image,
+    _ref2$favicon = _ref2.favicon,
+    favicon = _ref2$favicon === void 0 ? null : _ref2$favicon,
+    _ref2$rssUrl = _ref2.rssUrl,
+    rssUrl = _ref2$rssUrl === void 0 ? null : _ref2$rssUrl,
+    _ref2$atomUrl = _ref2.atomUrl,
+    atomUrl = _ref2$atomUrl === void 0 ? null : _ref2$atomUrl,
+    _ref2$microformats = _ref2.microformats,
+    microformats = _ref2$microformats === void 0 ? [] : _ref2$microformats,
+    _ref2$language = _ref2.language,
+    language = _ref2$language === void 0 ? null : _ref2$language;
   var realTitle = title !== null ? "".concat(title, " | ").concat(suffix) : fullTitle;
-
   var _ref3 = image || {},
-      _ref3$url = _ref3.url,
-      imageUrl = _ref3$url === void 0 ? null : _ref3$url,
-      _ref3$metadata = _ref3.metadata,
-      imageMetadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
-
+    _ref3$url = _ref3.url,
+    imageUrl = _ref3$url === void 0 ? null : _ref3$url,
+    _ref3$metadata = _ref3.metadata,
+    imageMetadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
   var _ref4 = imageMetadata || {},
-      _ref4$width = _ref4.width,
-      imageWidth = _ref4$width === void 0 ? null : _ref4$width,
-      _ref4$height = _ref4.height,
-      imageHeight = _ref4$height === void 0 ? null : _ref4$height;
-
+    _ref4$width = _ref4.width,
+    imageWidth = _ref4$width === void 0 ? null : _ref4$width,
+    _ref4$height = _ref4.height,
+    imageHeight = _ref4$height === void 0 ? null : _ref4$height;
   var _ref5 = favicon || {},
-      _ref5$url = _ref5.url,
-      faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
-
+    _ref5$url = _ref5.url,
+    faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
   return /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "description",
     content: description
@@ -3147,11 +2996,10 @@ var Meta = function Meta(_ref) {
     }, JSON.stringify(it));
   }), children);
 };
-
 Meta.propTypes = propTypes$d;
 Meta.defaultProps = defaultProps$d;
 
-var styles$e = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
+var 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$1.arrayOf(PropTypes$1.node),
@@ -3171,24 +3019,20 @@ var defaultProps$c = {
   className: null,
   children: null
 };
-
 var Slideshow = function Slideshow(_ref) {
   var items = _ref.items,
-      auto = _ref.auto,
-      delay = _ref.delay,
-      width = _ref.width,
-      height = _ref.height,
-      className = _ref.className,
-      children = _ref.children;
-
+    auto = _ref.auto,
+    delay = _ref.delay,
+    width = _ref.width,
+    height = _ref.height,
+    className = _ref.className,
+    children = _ref.children;
   var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      index = _useState2[0],
-      setIndex = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
   useEffect(function () {
     var id = null;
-
     if (auto) {
       id = setTimeout(function () {
         if (index < items.length - 1) {
@@ -3200,7 +3044,6 @@ var Slideshow = function Slideshow(_ref) {
         }
       }, delay);
     }
-
     return function () {
       clearTimeout(id);
     };
@@ -3216,14 +3059,12 @@ var Slideshow = function Slideshow(_ref) {
     className: styles$e.items
   }, items.map(function (it, i) {
     var _ref3;
-
     return /*#__PURE__*/React.createElement("div", {
       key: "slide-".concat(i + 1),
       className: classNames([styles$e.item, (_ref3 = {}, _defineProperty(_ref3, styles$e.prev, i < index), _defineProperty(_ref3, styles$e.current, i === index), _defineProperty(_ref3, styles$e.next, i > index), _ref3)])
     }, it);
   })), children);
 };
-
 Slideshow.propTypes = propTypes$c;
 Slideshow.defaultProps = defaultProps$c;
 
@@ -3232,8 +3073,8 @@ var styles$d = {"icon":"micromag-core-placeholders-icon"};
 /* eslint-disable react/prop-types */
 var AdFrame = function AdFrame(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className;
+    height = _ref.height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3247,8 +3088,8 @@ var AdFrame = function AdFrame(_ref) {
 /* eslint-disable react/prop-types */
 var AdImage = function AdImage(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className;
+    height = _ref.height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3262,10 +3103,10 @@ var AdImage = function AdImage(_ref) {
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Audio = function Audio(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '100%' : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '2em' : _ref$height,
-      className = _ref.className;
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '2em' : _ref$height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3296,17 +3137,15 @@ var defaultProps$b = {
   className: null,
   withInvertedColors: true
 };
-
 var PlaceholderText = function PlaceholderText(_ref) {
   var _ref2;
-
   var lines = _ref.lines,
-      lineMargin = _ref.lineMargin,
-      width = _ref.width,
-      height = _ref.height,
-      fontSize = _ref.fontSize,
-      className = _ref.className,
-      withInvertedColors = _ref.withInvertedColors;
+    lineMargin = _ref.lineMargin,
+    width = _ref.width,
+    height = _ref.height,
+    fontSize = _ref.fontSize,
+    className = _ref.className,
+    withInvertedColors = _ref.withInvertedColors;
   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", {
@@ -3324,17 +3163,16 @@ var PlaceholderText = function PlaceholderText(_ref) {
     });
   }));
 };
-
 PlaceholderText.propTypes = propTypes$b;
 PlaceholderText.defaultProps = defaultProps$b;
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Button = function Button(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '75%' : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '0.4em' : _ref$height,
-      className = _ref.className;
+    width = _ref$width === void 0 ? '75%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '0.4em' : _ref$height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3349,10 +3187,9 @@ var Button = function Button(_ref) {
 var _excluded$2 = ["width", "height", "className"];
 var Image = function Image(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$2);
-
+    height = _ref.height,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
@@ -3435,16 +3272,15 @@ var Subtitle = function Subtitle(props) {
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
-
 var TextPlaceholder = function TextPlaceholder(props) {
   var _props$className = props.className,
-      className = _props$className === void 0 ? null : _props$className,
-      _props$height = props.height,
-      height = _props$height === void 0 ? 0.2 : _props$height,
-      _props$lines = props.lines,
-      lines = _props$lines === void 0 ? 4 : _props$lines,
-      _props$lineMargin = props.lineMargin,
-      lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
+    className = _props$className === void 0 ? null : _props$className,
+    _props$height = props.height,
+    height = _props$height === void 0 ? 0.2 : _props$height,
+    _props$lines = props.lines,
+    lines = _props$lines === void 0 ? 4 : _props$lines,
+    _props$lineMargin = props.lineMargin,
+    lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     height: height,
     lines: lines,
@@ -3463,11 +3299,11 @@ var Timeline = function Timeline(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title$1 = function Title(props) {
   var _props$height = props.height,
-      height = _props$height === void 0 ? 0.5 : _props$height,
-      _props$lines = props.lines,
-      lines = _props$lines === void 0 ? 2 : _props$lines,
-      _props$lineMargin = props.lineMargin,
-      lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
+    height = _props$height === void 0 ? 0.5 : _props$height,
+    _props$lines = props.lines,
+    lines = _props$lines === void 0 ? 2 : _props$lines,
+    _props$lineMargin = props.lineMargin,
+    lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames([props.className, styles$d.title]),
     height: height,
@@ -3479,8 +3315,8 @@ var Title$1 = function Title(props) {
 /* eslint-disable react/prop-types */
 var Video = function Video(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className;
+    height = _ref.height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3495,8 +3331,8 @@ var styles$a = {"container":"micromag-core-placeholders-video-360-container","bo
 
 var Video360 = function Video360(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className;
+    height = _ref.height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3513,8 +3349,8 @@ var Video360 = function Video360(_ref) {
 /* eslint-disable react/prop-types */
 var VideoLoop = function VideoLoop(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      className = _ref.className;
+    height = _ref.height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3548,72 +3384,62 @@ var defaultProps$a = {
   screenHeight: 480,
   className: null
 };
-
 var ScreenSizer = function ScreenSizer(_ref) {
   var width = _ref.width,
-      height = _ref.height,
-      fit = _ref.fit,
-      screenWidth = _ref.screenWidth,
-      screenHeight = _ref.screenHeight,
-      className = _ref.className,
-      children = _ref.children;
+    height = _ref.height,
+    fit = _ref.fit,
+    screenWidth = _ref.screenWidth,
+    screenHeight = _ref.screenHeight,
+    className = _ref.className,
+    children = _ref.children;
   var hasSize = width !== null || height !== null;
-
   var _useDimensionObserver = useDimensionObserver(),
-      refContainer = _useDimensionObserver.ref,
-      _useDimensionObserver2 = _useDimensionObserver.width,
-      calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
-      _useDimensionObserver3 = _useDimensionObserver.height,
-      calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
-
+    refContainer = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.width,
+    calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+    _useDimensionObserver3 = _useDimensionObserver.height,
+    calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
   var _useMemo = useMemo(function () {
-    var containerWidth = width || calculatedWidth || null;
-    var containerHeight = height || calculatedHeight || null;
-
-    if (containerWidth === null && containerHeight === null) {
-      return {};
-    }
-
-    var screenRatio = screenWidth / screenHeight;
-    var finalContainerWidth = hasSize ? width || containerHeight * screenRatio : containerWidth;
-    var finalContainerHeight = hasSize ? height || containerWidth / screenRatio : containerWidth / screenRatio;
-
-    if (fit === null) {
-      var _screenScale = finalContainerWidth / screenWidth;
-
+      var containerWidth = width || calculatedWidth || null;
+      var containerHeight = height || calculatedHeight || null;
+      if (containerWidth === null && containerHeight === null) {
+        return {};
+      }
+      var screenRatio = screenWidth / screenHeight;
+      var finalContainerWidth = hasSize ? width || containerHeight * screenRatio : containerWidth;
+      var finalContainerHeight = hasSize ? height || containerWidth / screenRatio : containerWidth / screenRatio;
+      if (fit === null) {
+        var _screenScale = finalContainerWidth / screenWidth;
+        return {
+          width: finalContainerWidth,
+          height: finalContainerHeight,
+          scale: _screenScale,
+          transform: "scale(".concat(_screenScale, ")")
+        };
+      }
+      var _getSizeWithinBounds = getSizeWithinBounds(screenWidth, screenHeight, finalContainerWidth, finalContainerHeight, {
+          cover: fit === 'cover'
+        }),
+        screenScaledWidth = _getSizeWithinBounds.width,
+        screenScaledHeight = _getSizeWithinBounds.height,
+        screenScale = _getSizeWithinBounds.scale;
+      var x = (finalContainerWidth - screenScaledWidth) / 2;
+      var y = (finalContainerHeight - screenScaledHeight) / 2;
       return {
         width: finalContainerWidth,
         height: finalContainerHeight,
-        scale: _screenScale,
-        transform: "scale(".concat(_screenScale, ")")
+        scale: screenScale,
+        transform: "scale(".concat(screenScale, ") translate(").concat(x, "px, ").concat(y, "px)")
       };
-    }
-
-    var _getSizeWithinBounds = getSizeWithinBounds(screenWidth, screenHeight, finalContainerWidth, finalContainerHeight, {
-      cover: fit === 'cover'
-    }),
-        screenScaledWidth = _getSizeWithinBounds.width,
-        screenScaledHeight = _getSizeWithinBounds.height,
-        screenScale = _getSizeWithinBounds.scale;
-
-    var x = (finalContainerWidth - screenScaledWidth) / 2;
-    var y = (finalContainerHeight - screenScaledHeight) / 2;
-    return {
-      width: finalContainerWidth,
-      height: finalContainerHeight,
-      scale: screenScale,
-      transform: "scale(".concat(screenScale, ") translate(").concat(x, "px, ").concat(y, "px)")
-    };
-  }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight, hasSize]),
-      _useMemo$width = _useMemo.width,
-      frameWidth = _useMemo$width === void 0 ? null : _useMemo$width,
-      _useMemo$height = _useMemo.height,
-      frameHeight = _useMemo$height === void 0 ? null : _useMemo$height,
-      _useMemo$scale = _useMemo.scale,
-      frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
-      _useMemo$transform = _useMemo.transform,
-      screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
-
+    }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight, hasSize]),
+    _useMemo$width = _useMemo.width,
+    frameWidth = _useMemo$width === void 0 ? null : _useMemo$width,
+    _useMemo$height = _useMemo.height,
+    frameHeight = _useMemo$height === void 0 ? null : _useMemo$height,
+    _useMemo$scale = _useMemo.scale,
+    frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
+    _useMemo$transform = _useMemo.transform,
+    screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
   var screenSize = useMemo(function () {
     return {
       screen: 'mobile',
@@ -3647,7 +3473,6 @@ var ScreenSizer = function ScreenSizer(_ref) {
     height: screenHeight
   })))) : null);
 };
-
 ScreenSizer.propTypes = propTypes$a;
 ScreenSizer.defaultProps = defaultProps$a;
 
@@ -3676,26 +3501,25 @@ var defaultProps$9 = {
   className: null,
   mediaRef: null
 };
-
 var Screen = function Screen(_ref) {
   var screen = _ref.screen,
-      renderContext = _ref.renderContext,
-      screenState = _ref.screenState,
-      index = _ref.index,
-      active = _ref.active,
-      current = _ref.current,
-      components = _ref.components,
-      component = _ref.component,
-      className = _ref.className,
-      mediaRef = _ref.mediaRef;
-
+    renderContext = _ref.renderContext,
+    screenState = _ref.screenState,
+    index = _ref.index,
+    active = _ref.active,
+    current = _ref.current,
+    components = _ref.components,
+    component = _ref.component,
+    className = _ref.className,
+    mediaRef = _ref.mediaRef;
   var _ref2 = screen || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type;
-
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type;
   var CustomScreenComponent = components !== null ? getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = useScreenComponent(type);
-  var ScreenComponent = CustomScreenComponent || ContextScreenComponent; // Comment
+  var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
+
+  // Comment
 
   return /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen,
@@ -3712,7 +3536,6 @@ var Screen = function Screen(_ref) {
     className: className
   }, component));
 };
-
 Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
 var Screen$1 = /*#__PURE__*/React.memo(Screen);
@@ -3737,17 +3560,15 @@ var defaultProps$8 = {
   withSize: false,
   className: null
 };
-
 var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
   var screen = _ref.screen,
-      layout = _ref.layout,
-      screenWidth = _ref.screenWidth,
-      screenHeight = _ref.screenHeight,
-      screenState = _ref.screenState,
-      withSize = _ref.withSize,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1);
-
+    layout = _ref.layout,
+    screenWidth = _ref.screenWidth,
+    screenHeight = _ref.screenHeight,
+    screenState = _ref.screenState,
+    withSize = _ref.withSize,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
   var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "placeholder",
@@ -3761,7 +3582,6 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     screenHeight: screenHeight
   }, screenElement) : screenElement;
 };
-
 ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
@@ -3788,18 +3608,16 @@ var defaultProps$7 = {
   className: null,
   withSize: false
 };
-
 var ScreenPreview = function ScreenPreview(_ref) {
   var screen = _ref.screen,
-      screenState = _ref.screenState,
-      width = _ref.width,
-      height = _ref.height,
-      screenWidth = _ref.screenWidth,
-      screenHeight = _ref.screenHeight,
-      className = _ref.className,
-      withSize = _ref.withSize,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    screenState = _ref.screenState,
+    width = _ref.width,
+    height = _ref.height,
+    screenWidth = _ref.screenWidth,
+    screenHeight = _ref.screenHeight,
+    className = _ref.className,
+    withSize = _ref.withSize,
+    props = _objectWithoutProperties(_ref, _excluded);
   var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
@@ -3817,7 +3635,6 @@ var ScreenPreview = function ScreenPreview(_ref) {
   }, screenElement) : screenElement;
   return screenWithSize;
 };
-
 ScreenPreview.propTypes = propTypes$7;
 ScreenPreview.defaultProps = defaultProps$7;
 var Preview = /*#__PURE__*/React.memo(ScreenPreview);
@@ -3841,10 +3658,10 @@ var Conversation = function Conversation() {
 /* eslint-disable react/prop-types */
 var InputText = function InputText(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '75%' : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '0.5em' : _ref$height,
-      className = _ref.className;
+    width = _ref$width === void 0 ? '75%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '0.5em' : _ref$height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3857,14 +3674,13 @@ var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","
 
 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,
-      height = _ref$height === void 0 ? '0.3em' : _ref$height,
-      className = _ref.className,
-      _ref$good = _ref.good,
-      good = _ref$good === void 0 ? true : _ref$good;
+    width = _ref$width === void 0 ? '75%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '0.3em' : _ref$height,
+    className = _ref.className,
+    _ref$good = _ref.good,
+    good = _ref$good === void 0 ? true : _ref$good;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.good, good), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
@@ -3913,10 +3729,10 @@ var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container"
 
 var Answer = function Answer(_ref) {
   var _ref$width = _ref.width,
-      width = _ref$width === void 0 ? '75%' : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? '0.3em' : _ref$height,
-      className = _ref.className;
+    width = _ref$width === void 0 ? '75%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '0.3em' : _ref$height,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
@@ -3983,40 +3799,33 @@ var defaultProps$6 = {
   placeholderProps: null,
   emptyClassName: null
 };
-
 var ScreenElement = function ScreenElement(_ref) {
   var children = _ref.children,
-      placeholder = _ref.placeholder,
-      empty = _ref.empty,
-      emptyLabel = _ref.emptyLabel,
-      preview = _ref.preview,
-      isEmpty = _ref.isEmpty,
-      placeholderProps = _ref.placeholderProps,
-      emptyClassName = _ref.emptyClassName;
-
+    placeholder = _ref.placeholder,
+    empty = _ref.empty,
+    emptyLabel = _ref.emptyLabel,
+    preview = _ref.preview,
+    isEmpty = _ref.isEmpty,
+    placeholderProps = _ref.placeholderProps,
+    emptyClassName = _ref.emptyClassName;
   var _useScreenRenderConte = useScreenRenderContext(),
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isPreview = _useScreenRenderConte.isPreview;
-
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isPreview = _useScreenRenderConte.isPreview;
   if (isPlaceholder) {
     var PlaceholderComponent = isString(placeholder) ? getComponentFromName(placeholder, Placeholders) : null;
     return PlaceholderComponent !== null ? /*#__PURE__*/React.createElement(PlaceholderComponent, placeholderProps) : placeholder;
   }
-
   if (isEdit && isEmpty) {
     return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty, {
       className: emptyClassName
     }, emptyLabel);
   }
-
   if (isPreview && preview !== null) {
     return preview;
   }
-
   return children;
 };
-
 ScreenElement.propTypes = propTypes$6;
 ScreenElement.defaultProps = defaultProps$6;
 
@@ -4031,11 +3840,10 @@ var defaultProps$5 = {
   screen: null,
   className: null
 };
-
 var Screens = function Screens(_ref) {
   var screens = _ref.screens,
-      screenId = _ref.screen,
-      className = _ref.className;
+    screenId = _ref.screen,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.container, _defineProperty({}, className, className)])
   }, screens.map(function (screen) {
@@ -4047,7 +3855,6 @@ var Screens = function Screens(_ref) {
     });
   }));
 };
-
 Screens.propTypes = propTypes$5;
 Screens.defaultProps = defaultProps$5;
 
@@ -4056,12 +3863,20 @@ var styles = {"container":"micromag-core-transitions-transition-container","full
 var propTypes$4 = {
   fullscreen: PropTypes$1.bool,
   from: PropTypes$1.objectOf(PropTypes$1.any),
+  // eslint-disable-line react/forbid-prop-types
   to: PropTypes$1.objectOf(PropTypes$1.any),
+  // eslint-disable-line react/forbid-prop-types
   playing: PropTypes$1.bool,
   direction: PropTypes$1.oneOf(['in', 'out']),
   delay: PropTypes$1.number,
+  reversible: PropTypes$1.bool,
   duration: PropTypes$1.number,
   easing: PropTypes$1.func,
+  config: PropTypes$1.shape({
+    mass: PropTypes$1.number,
+    friction: PropTypes$1.number,
+    tension: PropTypes$1.number
+  }),
   children: PropTypes$1.node,
   className: PropTypes$1.string,
   onStart: PropTypes$1.func,
@@ -4074,84 +3889,71 @@ var defaultProps$4 = {
   playing: false,
   direction: null,
   delay: 0,
+  reversible: true,
   duration: undefined,
   easing: undefined,
+  config: null,
   children: null,
   className: null,
   onStart: null,
   onComplete: null
 };
-
 function Transition(_ref) {
   var _ref2;
-
   var fullscreen = _ref.fullscreen,
-      from = _ref.from,
-      to = _ref.to,
-      playing = _ref.playing,
-      direction = _ref.direction,
-      delay = _ref.delay,
-      duration = _ref.duration,
-      easing = _ref.easing,
-      children = _ref.children,
-      className = _ref.className,
-      onStart = _ref.onStart,
-      onComplete = _ref.onComplete;
-
+    from = _ref.from,
+    to = _ref.to,
+    playing = _ref.playing,
+    direction = _ref.direction,
+    delay = _ref.delay,
+    reversible = _ref.reversible,
+    duration = _ref.duration,
+    easing = _ref.easing,
+    config$1 = _ref.config,
+    children = _ref.children,
+    className = _ref.className,
+    onStart = _ref.onStart,
+    onComplete = _ref.onComplete;
   var _useSpring = useSpring(function () {
-    return {};
-  }),
-      _useSpring2 = _slicedToArray(_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
+      return {};
+    }),
+    _useSpring2 = _slicedToArray(_useSpring, 2),
+    springProps = _useSpring2[0],
+    setSpringProps = _useSpring2[1];
   useEffect(function () {
     var immediate = !playing && direction === 'in' || playing && direction === 'out';
     var finalPlaying = immediate || playing;
-    var reset = playing && !immediate;
+    var reset = reversible && playing && !immediate;
     var finalDuration = duration !== null ? duration : undefined;
+    var withDelay = delay > 0 && playing && direction !== 'out';
+    var finalConfig = easing !== null && config[easing] ? config[easing] || null : config$1;
     var props = {
-      from: from,
+      from: finalPlaying ? from : to,
       to: finalPlaying ? to : from,
+      immediate: immediate,
+      delay: withDelay ? delay : null,
       reset: reset,
       onStart: onStart,
       onRest: onComplete,
-      config: {
+      config: finalConfig !== null ? finalConfig : {
         duration: immediate ? 0 : finalDuration
       }
     };
-    var withDelay = delay > 0 && playing && direction !== 'out';
-    var timeout = null;
-
-    if (withDelay) {
-      setSpringProps.start({
-        to: from,
-        immediate: true
-      });
-      timeout = setTimeout(function () {
-        setSpringProps.start(props);
-      }, delay);
-    } else {
+    // Reversible always toggles between from-to (playing) to-from (!playing)
+    if (finalPlaying || reversible) {
       setSpringProps.start(props);
     }
-
-    return function () {
-      if (timeout !== null) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [playing, direction, delay, duration, easing, from, to, setSpringProps, onStart, onComplete]);
+    // console.log('fx', { reset, finalPlaying, immediate, reversible });
+  }, [playing, direction, delay, duration, reversible, easing, config$1, from, to, setSpringProps, onStart, onComplete]);
   return /*#__PURE__*/React.createElement(animated.div, {
     style: _objectSpread({}, springProps),
     className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.fullscreen, fullscreen), _ref2)])
   }, children);
 }
-
 Transition.propTypes = propTypes$4;
 Transition.defaultProps = defaultProps$4;
 
 /* eslint-disable react/jsx-props-no-spreading */
-
 function Fade(props) {
   var from = useMemo(function () {
     return {
@@ -4170,7 +3972,6 @@ function Fade(props) {
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-
 function Scale(props) {
   var from = useMemo(function () {
     return {
@@ -4198,6 +3999,7 @@ var propTypes$3 = {
   playing: PropTypes$1.bool,
   delay: PropTypes$1.number,
   transitions: PropTypes.transitions,
+  onComplete: PropTypes$1.func,
   disabled: PropTypes$1.bool,
   children: PropTypes$1.node
 };
@@ -4206,21 +4008,22 @@ var defaultProps$3 = {
   playing: false,
   delay: 0,
   transitions: null,
+  onComplete: null,
   disabled: false,
   children: null
 };
-
 function Transitions(_ref) {
   var fullscreen = _ref.fullscreen,
-      playing = _ref.playing,
-      delay = _ref.delay,
-      transitions = _ref.transitions,
-      disabled = _ref.disabled,
-      children = _ref.children;
-
+    playing = _ref.playing,
+    delay = _ref.delay,
+    transitions = _ref.transitions,
+    onComplete = _ref.onComplete,
+    disabled = _ref.disabled,
+    children = _ref.children;
   var _useScreenSize = useScreenSize(),
-      _useScreenSize$landsc = _useScreenSize.landscape,
-      landscape = _useScreenSize$landsc === void 0 ? false : _useScreenSize$landsc;
+    _useScreenSize$landsc = _useScreenSize.landscape,
+    landscape = _useScreenSize$landsc === void 0 ? true : _useScreenSize$landsc;
+  // console.log({ landscape });
 
   var finalPlaying = playing || landscape;
   var finalTransitions = {
@@ -4239,30 +4042,29 @@ function Transitions(_ref) {
     } : currentTransition;
   });
   var _finalTransitions$in = finalTransitions["in"],
-      transitionIn = _finalTransitions$in === void 0 ? null : _finalTransitions$in,
-      _finalTransitions$out = finalTransitions.out,
-      transitionOut = _finalTransitions$out === void 0 ? null : _finalTransitions$out;
+    transitionIn = _finalTransitions$in === void 0 ? null : _finalTransitions$in,
+    _finalTransitions$out = finalTransitions.out,
+    transitionOut = _finalTransitions$out === void 0 ? null : _finalTransitions$out;
   var finalTransitionIn = transitionIn !== null ? transitionIn : transitionOut;
   var finalTransitionOut = transitionOut !== null ? transitionOut : transitionIn;
-
   var _ref2 = finalTransitionIn || {},
-      _ref2$name = _ref2.name,
-      transitionInName = _ref2$name === void 0 ? null : _ref2$name;
-
+    _ref2$name = _ref2.name,
+    transitionInName = _ref2$name === void 0 ? null : _ref2$name;
   var _ref3 = finalTransitionOut || {},
-      _ref3$name = _ref3.name,
-      transitionOutName = _ref3$name === void 0 ? null : _ref3$name;
-
+    _ref3$name = _ref3.name,
+    transitionOutName = _ref3$name === void 0 ? null : _ref3$name;
   var sameTransitionInOut = transitionInName === transitionOutName;
   var TransitionIn = finalTransitionIn !== null ? getComponentFromName(transitionInName, TransitionComponents, null) : null;
   var TransitionOut = finalTransitionOut !== null && !sameTransitionInOut ? getComponentFromName(transitionOutName, TransitionComponents, null) : null;
   var transitionInProps = finalTransitionIn !== null ? _objectSpread(_objectSpread({}, finalTransitionIn), {}, {
     name: undefined,
-    delay: delay
+    delay: delay,
+    onComplete: onComplete
   }) : null;
   var transitionOutProps = finalTransitionOut !== null ? _objectSpread(_objectSpread({}, finalTransitionOut), {}, {
     name: undefined,
-    delay: delay
+    delay: delay,
+    onComplete: onComplete
   }) : null;
   var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionOut, Object.assign({
     fullscreen: fullscreen,
@@ -4275,7 +4077,6 @@ function Transitions(_ref) {
     direction: !sameTransitionInOut ? 'in' : null
   }, transitionInProps), renderTransitionOut) : renderTransitionOut;
 }
-
 Transitions.propTypes = propTypes$3;
 Transitions.defaultProps = defaultProps$3;
 
@@ -4297,32 +4098,27 @@ var defaultProps$2 = {
   fullscreen: false,
   children: null
 };
-
 var TransitionsStagger = function TransitionsStagger(_ref) {
   var transitions = _ref.transitions,
-      stagger = _ref.stagger,
-      playing = _ref.playing,
-      disabled = _ref.disabled,
-      delay = _ref.delay,
-      fullscreen = _ref.fullscreen,
-      children = _ref.children;
+    stagger = _ref.stagger,
+    playing = _ref.playing,
+    disabled = _ref.disabled,
+    delay = _ref.delay,
+    fullscreen = _ref.fullscreen,
+    children = _ref.children;
   var validIndex = 0;
   var elements = React.Children.map(children, function (child) {
     if (!child) {
       return null;
     }
-
     var _child$type = child.type,
-        type = _child$type === void 0 ? null : _child$type;
-
+      type = _child$type === void 0 ? null : _child$type;
     var _ref2 = type || {},
-        _ref2$withoutTransiti = _ref2.withoutTransitionsWrapper,
-        withoutTransitionsWrapper = _ref2$withoutTransiti === void 0 ? false : _ref2$withoutTransiti;
-
+      _ref2$withoutTransiti = _ref2.withoutTransitionsWrapper,
+      withoutTransitionsWrapper = _ref2$withoutTransiti === void 0 ? false : _ref2$withoutTransiti;
     if (disabled || withoutTransitionsWrapper) {
       return child;
     }
-
     var el = /*#__PURE__*/React.createElement(Transitions, {
       transitions: transitions,
       delay: delay + validIndex * stagger,
@@ -4334,7 +4130,6 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
   });
   return elements;
 };
-
 TransitionsStagger.propTypes = propTypes$2;
 TransitionsStagger.defaultProps = defaultProps$2;
 
@@ -4348,18 +4143,16 @@ var defaultProps$1 = {
   highlightSelector: 'mark',
   style: null
 };
-
 var HighlightStyle = function HighlightStyle(_ref) {
   var selector = _ref.selector,
-      highlightSelector = _ref.highlightSelector,
-      style = _ref.style;
+    highlightSelector = _ref.highlightSelector,
+    style = _ref.style;
   return style !== null ? /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, "".concat([selector, highlightSelector].filter(function (it) {
     return it !== null;
   }).join(' '), "{").concat(convertStyleToString(style), "}")) : null;
 };
-
 HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
 
@@ -4373,18 +4166,16 @@ var defaultProps = {
   linkSelector: 'a',
   style: null
 };
-
 var LinkStyle = function LinkStyle(_ref) {
   var selector = _ref.selector,
-      linkSelector = _ref.linkSelector,
-      style = _ref.style;
+    linkSelector = _ref.linkSelector,
+    style = _ref.style;
   return style !== null ? /*#__PURE__*/React.createElement("style", {
     type: "text/css"
   }, "".concat([selector, linkSelector].filter(function (it) {
     return it !== null;
   }).join(' '), "{").concat(convertStyleToString(style), "}")) : null;
 };
-
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;