@micromag/core 0.3.311 → 0.3.318

package/lib/components.js

@@ -89,23 +89,21 @@ var propTypes$L = {
   children: core.PropTypes.label.isRequired,
   isHtml: PropTypes__default["default"].bool,
   values: PropTypes__default["default"].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 ? reactIntl.FormattedMessage : reactIntl.FormattedMessage;
   return utils.isMessage(children) ? /*#__PURE__*/React__default["default"].createElement(Message, Object.assign({
     values: values
   }, children)) : children;
 };
-
 Label.propTypes = propTypes$L;
 Label.defaultProps = defaultProps$L;
 
@@ -143,9 +141,9 @@ var propTypes$K = {
   onClick: PropTypes__default["default"].func,
   refButton: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].shape({
     current: PropTypes__default["default"].any // eslint-disable-line
-
   })])
 };
+
 var defaultProps$K = {
   type: 'button',
   theme: null,
@@ -177,41 +175,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__default["default"](_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__default["default"](_ref, _excluded$b);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -233,7 +228,6 @@ var Button$1 = function Button(_ref) {
   var buttonClassNames = classNames__default["default"]([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
   }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$w.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$w.withText, text !== null), _defineProperty__default["default"](_ref8, styles$w.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$w.isSmall, small), _defineProperty__default["default"](_ref8, styles$w.isBig, big), _defineProperty__default["default"](_ref8, styles$w.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$w.asLink, asLink), _defineProperty__default["default"](_ref8, styles$w.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$w.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
-
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
@@ -253,7 +247,6 @@ var Button$1 = function Button(_ref) {
       tabIndex: focusable ? '' : '-1'
     }, content);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
     type: type,
     className: buttonClassNames,
@@ -263,7 +256,6 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-
 Button$1.propTypes = propTypes$K;
 Button$1.defaultProps = defaultProps$K;
 
@@ -288,29 +280,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__default["default"].createElement("div", {
     className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
-
     var _button$className = button.className,
-        customClassName = _button$className === void 0 ? null : _button$className,
-        _button$onClick = button.onClick,
-        _onClick = _button$onClick === void 0 ? null : _button$onClick,
-        _button$theme = button.theme,
-        buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$a);
-
+      customClassName = _button$className === void 0 ? null : _button$className,
+      _button$onClick = button.onClick,
+      _onClick = _button$onClick === void 0 ? null : _button$onClick,
+      _button$theme = button.theme,
+      buttonTheme = _button$theme === void 0 ? null : _button$theme,
+      buttonProps = _objectWithoutProperties__default["default"](button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
       className: classNames__default["default"]([styles$v.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
@@ -318,7 +307,6 @@ var Buttons = function Buttons(_ref) {
         if (_onClick !== null) {
           _onClick(e, button, index);
         }
-
         if (onClickButton !== null) {
           onClickButton(e, button, index);
         }
@@ -328,7 +316,6 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-
 Buttons.propTypes = propTypes$J;
 Buttons.defaultProps = defaultProps$J;
 
@@ -339,11 +326,9 @@ var propTypes$I = {
 var defaultProps$I = {
   className: null
 };
-
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
-
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
   return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
     size: "sm",
@@ -353,14 +338,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__default["default"].string,
   // .isRequired,
@@ -373,8 +357,8 @@ var propTypes$H = {
   gotoFieldForm: PropTypes__default["default"].func.isRequired,
   closeFieldForm: PropTypes__default["default"].func.isRequired,
   fieldContext: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
-
 };
+
 var defaultProps$H = {
   name: null,
   form: null,
@@ -385,51 +369,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 = contexts.useFieldsManager();
   var field = utils.getFieldFromPath(name.split('.'), fields, fieldsManager);
-
   var _ref2 = field || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$8);
-
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$8);
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
-
   var fieldData = fieldDefinition || _objectSpread__default["default"]({}, field);
-
   var _ref3 = fieldData || {},
-      _ref3$component = _ref3.component,
-      fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
-      _ref3.id;
-      _ref3.settings;
-      var definitionProps = _objectWithoutProperties__default["default"](_ref3, _excluded2);
-
+    _ref3$component = _ref3.component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
+    _ref3.id;
+    _ref3.settings;
+    var definitionProps = _objectWithoutProperties__default["default"](_ref3, _excluded2);
   var FieldComponent = contexts.useFieldComponent(fieldComponent);
   var FormComponent = utils.getComponentFromName(form, formComponents);
   var fieldValue = get__default["default"](value, name, null);
-
   var onFieldChange = function onFieldChange(newFieldValue) {
     // const { name, fields: subFields = null } = field || {};
-    var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
+    var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue
+    // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
     );
 
     if (onChange !== null) {
       onChange(newValue);
     }
   };
-
   var closeForm = React.useCallback(function () {
     return closeFieldForm(name, form);
   }, [name, form, closeFieldForm]);
@@ -441,7 +418,6 @@ var FieldForm = function FieldForm(_ref) {
     closeFieldForm: closeFieldForm,
     closeForm: closeForm
   };
-
   if (form !== null) {
     return FormComponent !== null ? /*#__PURE__*/React__default["default"].createElement(contexts.FieldContextProvider, {
       context: fieldContext
@@ -450,9 +426,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__default["default"].createElement(contexts.FieldContextProvider, {
     context: fieldContext
   }, /*#__PURE__*/React__default["default"].createElement(FieldComponent, Object.assign({
@@ -461,7 +437,6 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-
 FieldForm.propTypes = propTypes$H;
 FieldForm.defaultProps = defaultProps$H;
 
@@ -523,49 +498,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 = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      complete = _useState2[0],
-      setComplete = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    complete = _useState2[0],
+    setComplete = _useState2[1];
   React.useEffect(function () {
     var id = null;
-
     if (complete) {
       id = setTimeout(function () {
         setComplete(false);
       }, 3000);
     }
-
     return function () {
       clearTimeout(id);
     };
@@ -574,68 +543,61 @@ var Form = function Form(_ref) {
     if (onComplete !== null) {
       onComplete(data);
     }
-
     if (!withoutComplete) {
       setComplete(true);
     }
   }, [onComplete, setComplete]);
-
   var _useForm = hooks.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 = contexts.useFieldComponent('fields');
-
   React.useEffect(function () {
     if (onResponse !== null) {
       onResponse(response);
-
       if (onMessage !== null && response && response.message) {
         onMessage(response.message);
       }
     }
   }, [response, onResponse, onMessage]);
   var canSave = utils.validateFields(fields, value);
-
   var _useState3 = React.useState([]),
-      _useState4 = _slicedToArray__default["default"](_useState3, 2),
-      fieldPaths = _useState4[0],
-      setFieldPaths = _useState4[1];
-
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    fieldPaths = _useState4[0],
+    setFieldPaths = _useState4[1];
   var gotoFieldForm = React.useCallback(function (field) {
     var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
     setFieldPaths([].concat(_toConsumableArray__default["default"](fieldPaths), [fieldKey]));
-
     if (onOpenFieldForm !== null) {
       onOpenFieldForm();
     }
   }, [fieldPaths, setFieldPaths]);
   var closeFieldForm = React.useCallback(function () {
     var newFields = _toConsumableArray__default["default"](fieldPaths);
-
     newFields.pop();
     setFieldPaths(_toConsumableArray__default["default"](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,
@@ -705,7 +667,6 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-
 Form.propTypes = propTypes$G;
 Form.defaultProps = defaultProps$G;
 
@@ -730,17 +691,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__default["default"](_ref, _excluded$7);
-
+    external = _ref.external,
+    children = _ref.children,
+    target = _ref.target,
+    rel = _ref.rel,
+    className = _ref.className,
+    withoutStyle = _ref.withoutStyle,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
     className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
     href: href,
@@ -751,7 +710,6 @@ var Link = function Link(_ref) {
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
-
 Link.propTypes = propTypes$F;
 Link.defaultProps = defaultProps$F;
 
@@ -811,40 +769,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__default["default"](_ref2, _excluded$6);
-
+      _ref2$className = _ref2.className,
+      linkClassName = _ref2$className === void 0 ? null : _ref2$className,
+      linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
     return /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
       className: classNames__default["default"](['card-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)])
@@ -885,14 +840,12 @@ var Card = function Card(_ref) {
     className: classNames__default["default"](['card-footer', _defineProperty__default["default"]({}, footerClassName, footerClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, footer)) : null);
   var cardClassName = classNames__default["default"](['card', (_ref10 = {}, _defineProperty__default["default"](_ref10, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), _defineProperty__default["default"](_ref10, 'bg-dark', imageOverlay || theme === 'dark'), _defineProperty__default["default"](_ref10, 'text-dark', theme === 'light'), _defineProperty__default["default"](_ref10, 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), _defineProperty__default["default"](_ref10, className, className !== null), _ref10)]);
-
   if (href !== null) {
     return /*#__PURE__*/React__default["default"].createElement(Link, {
       href: href,
       className: cardClassName
     }, cardInner);
   }
-
   if (onClick !== null) {
     return /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
@@ -900,12 +853,10 @@ var Card = function Card(_ref) {
       onClick: onClick
     }, cardInner);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: cardClassName
   }, cardInner);
 };
-
 Card.propTypes = propTypes$E;
 Card.defaultProps = defaultProps$E;
 
@@ -919,11 +870,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__default["default"].createElement("svg", {
     className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
     width: "38",
@@ -978,7 +928,6 @@ var Spinner = function Spinner(_ref) {
     repeatCount: "indefinite"
   }) : null))));
 };
-
 Spinner.propTypes = propTypes$D;
 Spinner.defaultProps = defaultProps$D;
 
@@ -997,19 +946,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__default["default"](_ref, _excluded$5);
-
+    loading = _ref.loading,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
     className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React__default["default"].createElement(Spinner, null) : children);
 };
-
 FormPanel.propTypes = propTypes$C;
 FormPanel.defaultProps = defaultProps$C;
 
@@ -1031,14 +977,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__default["default"].createElement("nav", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement("ol", {
@@ -1050,13 +995,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__default["default"].createElement("li", {
       className: classNames__default["default"](['breadcrumb-item', (_ref3 = {
         active: active
@@ -1072,7 +1016,6 @@ var Breadcrumb = function Breadcrumb(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement(Label, null, label)) : null);
   })));
 };
-
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
 
@@ -1097,32 +1040,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 = React.useRef(null);
-
   var _useState = React.useState(visible),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      enabled = _useState2[0],
-      setEnabled = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    enabled = _useState2[0],
+    setEnabled = _useState2[1];
   var onDocumentClick = React.useCallback(function (e) {
     if (refContainer.current && !refContainer.current.contains(e.currentTarget) && onClickOutside !== null) {
       onClickOutside(e);
     }
   }, [refContainer.current, onClickOutside]);
-  hooks.useDocumentEvent('click', onDocumentClick, enabled); // Delay the outside click detection
+  hooks.useDocumentEvent('click', onDocumentClick, enabled);
 
+  // Delay the outside click detection
   React.useEffect(function () {
     var id = setTimeout(function () {
       setEnabled(visible);
@@ -1136,23 +1076,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__default["default"](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__default["default"](it, _excluded$4);
     var ItemComponent = 'div';
-
     if (type === 'link') {
       ItemComponent = Link;
     } else if (type === 'button') {
@@ -1162,12 +1099,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);
       }
@@ -1184,7 +1119,6 @@ var Dropdown = function Dropdown(_ref) {
     }, itemProps), label !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : itemChildren)) : null;
   }));
 };
-
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
 
@@ -1227,63 +1161,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 = React.useState(items.map(function () {
-    return false;
-  })),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      dropdownsVisible = _useState2[0],
-      setDropdownsVisible = _useState2[1];
-
+      return false;
+    })),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    dropdownsVisible = _useState2[0],
+    setDropdownsVisible = _useState2[1];
   var ListComponent = linkAsItem ? 'div' : tagName;
   return /*#__PURE__*/React__default["default"].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__default["default"](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__default["default"](it, _excluded$3);
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
       setDropdownsVisible([].concat(_toConsumableArray__default["default"](dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray__default["default"](dropdownsVisible.slice(index + 1))));
-
       if (customOnClick !== null) {
         customOnClick(e);
       }
@@ -1331,7 +1259,6 @@ var Menu = function Menu(_ref) {
     }) : null);
   }));
 };
-
 Menu.propTypes = propTypes$z;
 Menu.defaultProps = defaultProps$z;
 
@@ -1369,30 +1296,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 = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      menuVisible = _useState2[0],
-      setMenuVisible = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    menuVisible = _useState2[0],
+    setMenuVisible = _useState2[1];
   var onClickMenu = React.useCallback(function () {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
@@ -1428,7 +1351,6 @@ var Navbar = function Navbar(_ref) {
     className: classNames__default["default"](['navbar-collapse', 'collapse', styles$q.collapse, (_ref6 = {}, _defineProperty__default["default"](_ref6, collapseClassName, collapseClassName !== null), _defineProperty__default["default"](_ref6, "show", menuVisible), _ref6)])
   }, children) : children));
 };
-
 Navbar.propTypes = propTypes$y;
 Navbar.defaultProps = defaultProps$y;
 
@@ -1472,25 +1394,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 = React.useCallback(function (currentPage) {
     return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
   }, [url]);
-
   var pages = _toConsumableArray__default["default"](Array(total).keys()).map(function (it) {
     return it + 1;
   });
-
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
@@ -1534,7 +1453,6 @@ var PaginationMenu = function PaginationMenu(_ref) {
     className: classNames__default["default"](['page-link', _defineProperty__default["default"]({}, linkClassName, linkClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, messages.next))) : null));
 };
-
 PaginationMenu.propTypes = propTypes$x;
 PaginationMenu.defaultProps = defaultProps$x;
 
@@ -1558,15 +1476,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement(Buttons, {
@@ -1579,7 +1496,6 @@ var TabsMenu = function TabsMenu(_ref) {
     buttonClassName: classNames__default["default"]([styles$o.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)])
   }));
 };
-
 TabsMenu.propTypes = propTypes$w;
 TabsMenu.defaultProps = defaultProps$w;
 
@@ -1593,11 +1509,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 = React.useRef(null);
   React.useEffect(function () {
     setModalsContainer(containerRef.current);
@@ -1609,7 +1524,6 @@ var ModalsContainer = function ModalsContainer(_ref) {
     ref: containerRef
   }));
 };
-
 ModalsContainer.propTypes = propTypes$v;
 ModalsContainer.defaultProps = defaultProps$v;
 var Modals = contexts.withModals(ModalsContainer);
@@ -1635,14 +1549,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 = React.useMemo(function () {
     return id || "element-".concat(new Date().getTime());
   }, [id]);
@@ -1650,7 +1563,6 @@ var ElementPortal = function ElementPortal(_ref) {
     if (register !== null) {
       register(finalId, data);
     }
-
     return function () {
       if (unregister !== null) {
         unregister(finalId);
@@ -1659,7 +1571,6 @@ var ElementPortal = function ElementPortal(_ref) {
   }, [finalId, data]);
   return container !== null ? /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container) : null;
 };
-
 ElementPortal.propTypes = propTypes$u;
 ElementPortal.defaultProps = defaultProps$u;
 
@@ -1675,19 +1586,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 = contexts.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__default["default"].createElement(ElementPortal, {
     id: id,
     data: data,
@@ -1696,7 +1604,6 @@ var ModalPortal = function ModalPortal(_ref) {
     unregister: unregister
   }, children);
 };
-
 ModalPortal.propTypes = propTypes$t;
 ModalPortal.defaultProps = defaultProps$t;
 
@@ -1712,12 +1619,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 = React.useMemo(function () {
     return id || utils.getDisplayName(children.type);
   }, [id, children.type]);
@@ -1735,7 +1641,6 @@ var Modal = function Modal(_ref) {
     className: classNames__default["default"]([styles$m.inner, 'bg-dark'])
   }, children)));
 };
-
 Modal.propTypes = propTypes$s;
 Modal.defaultProps = defaultProps$s;
 
@@ -1761,22 +1666,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__default["default"].createElement("div", {
     className: classNames__default["default"](['modal-dialog', styles$l.container, _defineProperty__default["default"]({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-header', 'p-2', styles$l.header, {// 'bg-dark': theme === 'dark',
+    className: classNames__default["default"](['modal-header', 'p-2', styles$l.header, {
+      // 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1788,7 +1693,8 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-body', 'p-2', styles$l.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames__default["default"](['modal-body', 'p-2', styles$l.body, {
+      // [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
       // 'bg-dark': theme === 'dark',
     }])
@@ -1799,7 +1705,6 @@ var ModalDialog = function ModalDialog(_ref) {
     className: styles$l.buttons
   }) : null) : null));
 };
-
 ModalDialog.propTypes = propTypes$r;
 ModalDialog.defaultProps = defaultProps$r;
 
@@ -1826,13 +1731,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 = React.useCallback(function (response) {
     if (onUploaded !== null) {
       onUploaded(response);
@@ -1846,7 +1750,6 @@ var UploadModal = function UploadModal(_ref2) {
         return t !== null;
       });
     }
-
     return ['image', 'video', 'audio'].indexOf(type) !== -1 ? ["".concat(type, "/*")] : null;
   }, [type]);
   var uppy = contexts.useUppy({
@@ -1869,7 +1772,6 @@ var UploadModal = function UploadModal(_ref2) {
     plugins: sources
   })) : null;
 };
-
 UploadModal.propTypes = propTypes$q;
 UploadModal.defaultProps = defaultProps$q;
 
@@ -1885,11 +1787,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 = React.useRef(null);
   React.useEffect(function () {
     setPanelsContainer(containerRef.current);
@@ -1901,7 +1802,6 @@ var PanelsContainer = function PanelsContainer(_ref) {
     ref: containerRef
   }));
 };
-
 PanelsContainer.propTypes = propTypes$p;
 PanelsContainer.defaultProps = defaultProps$p;
 var Panels = contexts.withPanels(PanelsContainer);
@@ -1918,25 +1818,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 = contexts.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__default["default"].createElement(ElementPortal, {
     id: id,
     data: data,
@@ -1945,7 +1841,6 @@ var PanelPortal = function PanelPortal(_ref) {
     unregister: unregister
   }, children);
 };
-
 PanelPortal.propTypes = propTypes$o;
 PanelPortal.defaultProps = defaultProps$o;
 
@@ -1962,11 +1857,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 = React.useMemo(function () {
     return id || utils.getDisplayName(children.type);
   }, [id, children.type]);
@@ -1982,7 +1876,6 @@ var Panel = function Panel(_ref) {
     className: styles$j.container
   }, children));
 };
-
 Panel.propTypes = propTypes$n;
 Panel.defaultProps = defaultProps$n;
 
@@ -2006,23 +1899,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 = React.useState(false),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      opened = _useState2[0],
-      setOpened = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
   var onClick = React.useCallback(function () {
     return setOpened(!opened);
   }, [opened, setOpened]);
@@ -2044,7 +1933,6 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     className: classNames__default["default"]([styles$i.content, _defineProperty__default["default"]({}, contentClassName, contentClassName !== null)])
   }, children));
 };
-
 CollapsablePanel.propTypes = propTypes$m;
 CollapsablePanel.defaultProps = defaultProps$m;
 
@@ -2060,12 +1948,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__default["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     width: "42.9",
@@ -2098,7 +1985,6 @@ var Close = function Close(_ref) {
     d: "M0.3,0l13.7,14.2"
   })))));
 };
-
 Close.propTypes = propTypes$l;
 Close.defaultProps = defaultProps$l;
 
@@ -2113,11 +1999,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 = React.useMemo(function () {
     return dayjs__default["default"](date).toDate();
   }, [date]);
@@ -2130,7 +2015,6 @@ var Date$1 = function Date(_ref) {
     value: dateObject
   }) : null);
 };
-
 Date$1.propTypes = propTypes$k;
 Date$1.defaultProps = defaultProps$k;
 
@@ -2155,47 +2039,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 = hooks.useIntersectionObserver({
-    threshold: threshold
-  }),
-      ref = _useIntersectionObser.ref,
-      isIntersecting = _useIntersectionObser.entry.isIntersecting;
-
+      threshold: threshold
+    }),
+    ref = _useIntersectionObser.ref,
+    isIntersecting = _useIntersectionObser.entry.isIntersecting;
   var enteredRef = React.useRef(false);
   var triggerChange = React.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__default["default"](callback, throttleDelay, {
       trailing: true,
       leading: true
@@ -2205,7 +2081,6 @@ var Detector = function Detector(_ref) {
     if (disabled) {
       return function () {};
     }
-
     triggerChange(isIntersecting);
     return function () {
       if (throttleDelay !== null) {
@@ -2218,7 +2093,6 @@ var Detector = function Detector(_ref) {
     ref: ref
   }, children);
 };
-
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
@@ -2242,17 +2116,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _defineProperty__default["default"](_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2263,12 +2135,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__default["default"].string.isRequired,
   components: PropTypes__default["default"].object.isRequired,
@@ -2278,44 +2151,37 @@ var propTypes$h = {
   isPlaceholder: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   placeholderProps: PropTypes__default["default"].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__default["default"].createElement(PlaceholderBlock, placeholderProps);
   }
-
   var RealComponent = components[utils.pascalCase(name)];
-
   if (!RealComponent) {
     return 'Bad component';
   }
-
   return /*#__PURE__*/React__default["default"].createElement(RealComponent, Object.assign({}, props, {
     className: className
   }));
 };
-
 ElementComponent.propTypes = propTypes$h;
 ElementComponent.defaultProps = defaultProps$h;
 
@@ -2333,60 +2199,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$g.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$g.middle
   }, /*#__PURE__*/React__default["default"].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__default["default"](format) ? format.format : format;
     var formatExtension = isObject__default["default"](format) ? format.name : format;
     var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
-
     if (file !== null) {
       return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
     }
-
     var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
     var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
-
     if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
       return [].concat(_toConsumableArray__default["default"](currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
     }
-
     return currentUrls;
   }, []);
   return urls;
 };
-
 var propTypes$f = {
   fonts: core.PropTypes.fonts,
   formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
@@ -2404,35 +2259,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__default["default"](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__default["default"](fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray__default["default"]((variants || []).map(function (_ref6) {
       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;
     })));
@@ -2443,7 +2293,6 @@ var FontFaces = function FontFaces(_ref4) {
     type: "text/css"
   }, fontFaces.join('\n')) : null;
 };
-
 FontFaces.propTypes = propTypes$f;
 FontFaces.defaultProps = defaultProps$f;
 
@@ -2469,16 +2318,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__default["default"].createElement("div", {
     className: classNames__default["default"](['card', styles$f.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
@@ -2495,14 +2343,12 @@ var Media = function Media(_ref) {
     className: classNames__default["default"](['mt-0', 'text-truncate', styles$f.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children) : null);
 };
-
 Media.propTypes = propTypes$e;
 Media.defaultProps = defaultProps$e;
 
 /**
  * Core
  */
-
 PropTypes__default["default"].shape({
   listen: PropTypes__default["default"].func.isRequired,
   push: PropTypes__default["default"].func.isRequired
@@ -2530,7 +2376,6 @@ var label = PropTypes__default["default"].oneOfType([message, PropTypes__default
 PropTypes__default["default"].oneOf([401, 403, 404, 500]);
 PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
   current: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
-
 }), PropTypes__default["default"].func]);
 var target = PropTypes__default["default"].oneOf(['_blank', '_self', '_parent']);
 var interaction = PropTypes__default["default"].oneOf(['tap', 'swipe']);
@@ -2540,10 +2385,10 @@ PropTypes__default["default"].shape({
   currentTime: PropTypes__default["default"].number,
   duration: PropTypes__default["default"].number
 });
+
 /**
  * Site
  */
-
 PropTypes__default["default"].shape({
   id: PropTypes__default["default"].number,
   firstname: PropTypes__default["default"].string,
@@ -2590,10 +2435,10 @@ PropTypes__default["default"].oneOf(['lg', 'sm', null]);
 PropTypes__default["default"].oneOf(['start', 'end']);
 var component = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].func]);
 PropTypes__default["default"].objectOf(component);
+
 /**
  * Forms
  */
-
 var errors = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]);
 PropTypes__default["default"].objectOf(errors);
 var selectOption = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
@@ -2607,10 +2452,10 @@ var formField = PropTypes__default["default"].shape({
   component: component
 });
 PropTypes__default["default"].arrayOf(formField);
+
 /**
  * Medias
  */
-
 var mediaMetadataShape = {
   filename: PropTypes__default["default"].string,
   size: PropTypes__default["default"].number,
@@ -2668,15 +2513,17 @@ PropTypes__default["default"].arrayOf(audioMedia);
 var closedCaptionsMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
   type: PropTypes__default["default"].oneOf(['closed-captions'])
 }));
+
 /**
  * Style
  */
 
-var font = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
+PropTypes__default["default"].shape({
   type: PropTypes__default["default"].oneOf(['system', 'google', 'custom']),
   name: PropTypes__default["default"].string,
   media: fontMedia
-})]);
+});
+var font = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].string]);
 PropTypes__default["default"].arrayOf(font);
 var textAlign = PropTypes__default["default"].oneOf(['left', 'right', 'center']);
 var color = PropTypes__default["default"].shape({
@@ -2731,6 +2578,7 @@ PropTypes__default["default"].shape({
   horizontalPosition: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
   verticalPosition: PropTypes__default["default"].oneOf(['top', 'center', 'bottom'])
 });
+
 /**
  * Elements
  */
@@ -2854,6 +2702,7 @@ PropTypes__default["default"].shape({
   textStyle: textStyle,
   messages: conversationMessages
 });
+
 /**
  * Definitions
  */
@@ -2883,10 +2732,10 @@ var fieldDefinition = PropTypes__default["default"].shape({
   fields: fields
 });
 PropTypes__default["default"].arrayOf(fieldDefinition);
+
 /**
  * Components
  */
-
 var storyComponentShape = {
   type: PropTypes__default["default"].string.isRequired
 };
@@ -2898,7 +2747,6 @@ var screenComponents = PropTypes__default["default"].arrayOf(screenComponent);
 /**
  * Theme
  */
-
 var theme = PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,
   textStyles: PropTypes__default["default"].objectOf(textStyle),
@@ -2910,9 +2758,11 @@ var theme = PropTypes__default["default"].shape({
 PropTypes__default["default"].shape(_objectSpread__default["default"]({
   logo: imageMedia
 }, theme));
+
 /**
  * Branding
  */
+
 // export const branding = PropTypes.shape({
 //     logo: imageMedia,
 //     primaryColor: color,
@@ -2924,27 +2774,26 @@ PropTypes__default["default"].shape(_objectSpread__default["default"]({
 /**
  * Metadata
  */
-
 var metadata = PropTypes__default["default"].shape({
   description: PropTypes__default["default"].string,
   shareUrl: PropTypes__default["default"].string,
   shareImage: imageMedia,
   favIcon: imageMedia
 });
+
 /**
  * Story
  */
-
 PropTypes__default["default"].shape({
   id: PropTypes__default["default"].string,
   theme: theme,
   components: screenComponents,
   metadata: metadata
 });
+
 /**
  * Render
  */
-
 var deviceScreen = PropTypes__default["default"].shape({
   name: PropTypes__default["default"].string.isRequired,
   mediaQuery: PropTypes__default["default"].string
@@ -2958,6 +2807,7 @@ PropTypes__default["default"].shape({
   landscape: PropTypes__default["default"].bool
 });
 PropTypes__default["default"].oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+
 /**
  * Screens
  */
@@ -2984,12 +2834,15 @@ var slide = PropTypes__default["default"].shape({
   image: imageMedia,
   text: PropTypes__default["default"].string
 });
-PropTypes__default["default"].arrayOf(slide); // export const imageStyle = PropTypes.shape({
+PropTypes__default["default"].arrayOf(slide);
+
+// export const imageStyle = PropTypes.shape({
 //     alt: PropTypes.string,
 //     fit: PropTypes.object,
 // });
 
 PropTypes__default["default"].shape({});
+
 /**
  * Transitions
  */
@@ -3006,6 +2859,7 @@ PropTypes__default["default"].shape({
   "in": transition,
   out: transition
 });
+
 /**
  * Search
  */
@@ -3015,6 +2869,7 @@ var searchFilter = PropTypes__default["default"].shape({
   value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number])
 });
 PropTypes__default["default"].arrayOf(searchFilter);
+
 /**
  * Payments
  */
@@ -3027,6 +2882,7 @@ var paymentItem = PropTypes__default["default"].shape({
   amount: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 });
 PropTypes__default["default"].arrayOf(paymentItem);
+
 /**
  * Page Metadada
  */
@@ -3073,53 +2929,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__default["default"].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default["default"].createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React__default["default"].createElement("meta", {
     name: "description",
     content: description
@@ -3188,11 +3037,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__default["default"].arrayOf(PropTypes__default["default"].node),
@@ -3212,24 +3060,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 = React.useState(0),
-      _useState2 = _slicedToArray__default["default"](_useState, 2),
-      index = _useState2[0],
-      setIndex = _useState2[1];
-
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
   React.useEffect(function () {
     var id = null;
-
     if (auto) {
       id = setTimeout(function () {
         if (index < items.length - 1) {
@@ -3241,7 +3085,6 @@ var Slideshow = function Slideshow(_ref) {
         }
       }, delay);
     }
-
     return function () {
       clearTimeout(id);
     };
@@ -3257,14 +3100,12 @@ var Slideshow = function Slideshow(_ref) {
     className: styles$e.items
   }, items.map(function (it, i) {
     var _ref3;
-
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "slide-".concat(i + 1),
       className: classNames__default["default"]([styles$e.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$e.prev, i < index), _defineProperty__default["default"](_ref3, styles$e.current, i === index), _defineProperty__default["default"](_ref3, styles$e.next, i > index), _ref3)])
     }, it);
   })), children);
 };
-
 Slideshow.propTypes = propTypes$c;
 Slideshow.defaultProps = defaultProps$c;
 
@@ -3273,8 +3114,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3288,8 +3129,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3303,10 +3144,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3337,17 +3178,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__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '80%';
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3365,17 +3204,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__default["default"].createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3390,10 +3228,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__default["default"](_ref, _excluded$2);
-
+    height = _ref.height,
+    className = _ref.className,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
@@ -3476,16 +3313,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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
     height: height,
     lines: lines,
@@ -3504,11 +3340,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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames__default["default"]([props.className, styles$d.title]),
     height: height,
@@ -3520,8 +3356,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3536,8 +3372,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3554,8 +3390,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__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
@@ -3589,72 +3425,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 = hooks.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 = React.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 = size.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 = size.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 = React.useMemo(function () {
     return {
       screen: 'mobile',
@@ -3688,7 +3514,6 @@ var ScreenSizer = function ScreenSizer(_ref) {
     height: screenHeight
   })))) : null);
 };
-
 ScreenSizer.propTypes = propTypes$a;
 ScreenSizer.defaultProps = defaultProps$a;
 
@@ -3717,26 +3542,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 ? utils.getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = contexts.useScreenComponent(type);
-  var ScreenComponent = CustomScreenComponent || ContextScreenComponent; // Comment
+  var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
+
+  // Comment
 
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
@@ -3753,7 +3577,6 @@ var Screen = function Screen(_ref) {
     className: className
   }, component));
 };
-
 Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
 var Screen$1 = /*#__PURE__*/React__default["default"].memo(Screen);
@@ -3778,17 +3601,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__default["default"](_ref, _excluded$1);
-
+    layout = _ref.layout,
+    screenWidth = _ref.screenWidth,
+    screenHeight = _ref.screenHeight,
+    screenState = _ref.screenState,
+    withSize = _ref.withSize,
+    className = _ref.className,
+    props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
   var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "placeholder",
@@ -3802,7 +3623,6 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     screenHeight: screenHeight
   }, screenElement) : screenElement;
 };
-
 ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React__default["default"].memo(ScreenPlaceholder);
@@ -3829,18 +3649,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__default["default"](_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__default["default"](_ref, _excluded);
   var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
@@ -3858,7 +3676,6 @@ var ScreenPreview = function ScreenPreview(_ref) {
   }, screenElement) : screenElement;
   return screenWithSize;
 };
-
 ScreenPreview.propTypes = propTypes$7;
 ScreenPreview.defaultProps = defaultProps$7;
 var Preview = /*#__PURE__*/React__default["default"].memo(ScreenPreview);
@@ -3882,10 +3699,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__default["default"].createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3898,14 +3715,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$4.good, good), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3954,10 +3770,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
@@ -4024,40 +3840,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 = contexts.useScreenRenderContext(),
-      isPlaceholder = _useScreenRenderConte.isPlaceholder,
-      isEdit = _useScreenRenderConte.isEdit,
-      isPreview = _useScreenRenderConte.isPreview;
-
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isPreview = _useScreenRenderConte.isPreview;
   if (isPlaceholder) {
     var PlaceholderComponent = isString__default["default"](placeholder) ? utils.getComponentFromName(placeholder, Placeholders) : null;
     return PlaceholderComponent !== null ? /*#__PURE__*/React__default["default"].createElement(PlaceholderComponent, placeholderProps) : placeholder;
   }
-
   if (isEdit && isEmpty) {
     return empty !== null ? empty : /*#__PURE__*/React__default["default"].createElement(Empty, {
       className: emptyClassName
     }, emptyLabel);
   }
-
   if (isPreview && preview !== null) {
     return preview;
   }
-
   return children;
 };
-
 ScreenElement.propTypes = propTypes$6;
 ScreenElement.defaultProps = defaultProps$6;
 
@@ -4072,11 +3881,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__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$1.container, _defineProperty__default["default"]({}, className, className)])
   }, screens.map(function (screen) {
@@ -4088,7 +3896,6 @@ var Screens = function Screens(_ref) {
     });
   }));
 };
-
 Screens.propTypes = propTypes$5;
 Screens.defaultProps = defaultProps$5;
 
@@ -4097,12 +3904,20 @@ var styles = {"container":"micromag-core-transitions-transition-container","full
 var propTypes$4 = {
   fullscreen: PropTypes__default["default"].bool,
   from: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  // eslint-disable-line react/forbid-prop-types
   to: PropTypes__default["default"].objectOf(PropTypes__default["default"].any),
+  // eslint-disable-line react/forbid-prop-types
   playing: PropTypes__default["default"].bool,
   direction: PropTypes__default["default"].oneOf(['in', 'out']),
   delay: PropTypes__default["default"].number,
+  reversible: PropTypes__default["default"].bool,
   duration: PropTypes__default["default"].number,
   easing: PropTypes__default["default"].func,
+  config: PropTypes__default["default"].shape({
+    mass: PropTypes__default["default"].number,
+    friction: PropTypes__default["default"].number,
+    tension: PropTypes__default["default"].number
+  }),
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   onStart: PropTypes__default["default"].func,
@@ -4115,84 +3930,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 = _ref.config,
+    children = _ref.children,
+    className = _ref.className,
+    onStart = _ref.onStart,
+    onComplete = _ref.onComplete;
   var _useSpring = core$1.useSpring(function () {
-    return {};
-  }),
-      _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
-      springProps = _useSpring2[0],
-      setSpringProps = _useSpring2[1];
-
+      return {};
+    }),
+    _useSpring2 = _slicedToArray__default["default"](_useSpring, 2),
+    springProps = _useSpring2[0],
+    setSpringProps = _useSpring2[1];
   React.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 && web.config[easing] ? web.config[easing] || null : config;
     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, from, to, setSpringProps, onStart, onComplete]);
   return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     style: _objectSpread__default["default"]({}, springProps),
     className: classNames__default["default"]([styles.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles.fullscreen, fullscreen), _ref2)])
   }, children);
 }
-
 Transition.propTypes = propTypes$4;
 Transition.defaultProps = defaultProps$4;
 
 /* eslint-disable react/jsx-props-no-spreading */
-
 function Fade(props) {
   var from = React.useMemo(function () {
     return {
@@ -4211,7 +4013,6 @@ function Fade(props) {
 }
 
 /* eslint-disable react/jsx-props-no-spreading */
-
 function Scale(props) {
   var from = React.useMemo(function () {
     return {
@@ -4239,6 +4040,7 @@ var propTypes$3 = {
   playing: PropTypes__default["default"].bool,
   delay: PropTypes__default["default"].number,
   transitions: core.PropTypes.transitions,
+  onComplete: PropTypes__default["default"].func,
   disabled: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node
 };
@@ -4247,21 +4049,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 = contexts.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 = {
@@ -4280,30 +4083,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 ? utils.getComponentFromName(transitionInName, TransitionComponents, null) : null;
   var TransitionOut = finalTransitionOut !== null && !sameTransitionInOut ? utils.getComponentFromName(transitionOutName, TransitionComponents, null) : null;
   var transitionInProps = finalTransitionIn !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, finalTransitionIn), {}, {
     name: undefined,
-    delay: delay
+    delay: delay,
+    onComplete: onComplete
   }) : null;
   var transitionOutProps = finalTransitionOut !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, finalTransitionOut), {}, {
     name: undefined,
-    delay: delay
+    delay: delay,
+    onComplete: onComplete
   }) : null;
   var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React__default["default"].createElement(TransitionOut, Object.assign({
     fullscreen: fullscreen,
@@ -4316,7 +4118,6 @@ function Transitions(_ref) {
     direction: !sameTransitionInOut ? 'in' : null
   }, transitionInProps), renderTransitionOut) : renderTransitionOut;
 }
-
 Transitions.propTypes = propTypes$3;
 Transitions.defaultProps = defaultProps$3;
 
@@ -4338,32 +4139,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__default["default"].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__default["default"].createElement(Transitions, {
       transitions: transitions,
       delay: delay + validIndex * stagger,
@@ -4375,7 +4171,6 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
   });
   return elements;
 };
-
 TransitionsStagger.propTypes = propTypes$2;
 TransitionsStagger.defaultProps = defaultProps$2;
 
@@ -4389,18 +4184,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__default["default"].createElement("style", {
     type: "text/css"
   }, "".concat([selector, highlightSelector].filter(function (it) {
     return it !== null;
   }).join(' '), "{").concat(utils.convertStyleToString(style), "}")) : null;
 };
-
 HighlightStyle.propTypes = propTypes$1;
 HighlightStyle.defaultProps = defaultProps$1;
 
@@ -4414,18 +4207,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__default["default"].createElement("style", {
     type: "text/css"
   }, "".concat([selector, linkSelector].filter(function (it) {
     return it !== null;
   }).join(' '), "{").concat(utils.convertStyleToString(style), "}")) : null;
 };
-
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;