@micromag/core 0.3.767 → 0.3.769

package/lib/components.js

@@ -0,0 +1,4500 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var wouter = require('wouter');
+var core = require('@micromag/core');
+var reactIntl = require('react-intl');
+var utils = require('@micromag/core/utils');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
+var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
+var faClose = require('@fortawesome/free-solid-svg-icons/faClose');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var hooks = require('@micromag/core/hooks');
+var contexts = require('@micromag/core/contexts');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var get = require('lodash/get');
+var queryString = require('query-string');
+var reactDom = require('react-dom');
+var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
+var faAngleUp = require('@fortawesome/free-solid-svg-icons/faAngleUp');
+var dayjs = require('dayjs');
+var throttle = require('lodash/throttle');
+var isObject = require('lodash/isObject');
+var reactHelmet = require('react-helmet');
+var isString = require('lodash/isString');
+var isArray = require('lodash/isArray');
+var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
+var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
+var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
+var isNumber = require('lodash/isNumber');
+var faMapMarkerAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkerAlt');
+var faMapMarkedAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkedAlt');
+var faVideo = require('@fortawesome/free-solid-svg-icons/faVideo');
+var faPlay = require('@fortawesome/free-solid-svg-icons/faPlay');
+var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
+var size = require('@folklore/size');
+var faCommentDots = require('@fortawesome/free-solid-svg-icons/faCommentDots');
+var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
+var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
+var faCircle = require('@fortawesome/free-solid-svg-icons/faCircle');
+var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
+var core$1 = require('@react-spring/core');
+var web = require('@react-spring/web');
+
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$T = {
+  children: core.PropTypes.label.isRequired,
+  isHtml: PropTypes.bool,
+  values: PropTypes.object // eslint-disable-line react/forbid-prop-types
+};
+var defaultProps$T = {
+  isHtml: false,
+  values: {}
+};
+var Label = function Label(_ref) {
+  var children = _ref.children,
+    isHtml = _ref.isHtml,
+    values = _ref.values;
+  var Message = isHtml ? reactIntl.FormattedMessage : reactIntl.FormattedMessage;
+  return utils.isMessage(children) ? /*#__PURE__*/React.createElement(Message, Object.assign({
+    values: values
+  }, children)) : children;
+};
+Label.propTypes = propTypes$T;
+Label.defaultProps = defaultProps$T;
+
+var styles$y = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+
+var _excluded$c = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$S = {
+  type: PropTypes.string,
+  theme: core.PropTypes.buttonTheme,
+  size: core.PropTypes.buttonSize,
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  direct: PropTypes.bool,
+  target: PropTypes.string,
+  label: core.PropTypes.label,
+  children: core.PropTypes.label,
+  focusable: PropTypes.bool,
+  active: PropTypes.bool,
+  icon: PropTypes.node,
+  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  disableOnLoading: PropTypes.bool,
+  small: PropTypes.bool,
+  big: PropTypes.bool,
+  withShadow: PropTypes.bool,
+  withoutStyle: PropTypes.bool,
+  withoutBootstrapStyles: PropTypes.bool,
+  withoutTheme: PropTypes.bool,
+  outline: PropTypes.bool,
+  asLink: PropTypes.bool,
+  className: PropTypes.string,
+  iconClassName: PropTypes.string,
+  labelClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any // eslint-disable-line
+  })])
+};
+var defaultProps$S = {
+  type: 'button',
+  theme: null,
+  size: null,
+  href: null,
+  external: false,
+  direct: false,
+  target: '_blank',
+  label: null,
+  children: null,
+  focusable: true,
+  active: false,
+  icon: null,
+  iconPosition: 'inline',
+  disabled: false,
+  loading: false,
+  disableOnLoading: true,
+  small: false,
+  big: false,
+  withShadow: false,
+  withoutStyle: false,
+  withoutBootstrapStyles: false,
+  withoutTheme: false,
+  outline: false,
+  asLink: false,
+  className: null,
+  iconClassName: null,
+  labelClassName: null,
+  onClick: null,
+  refButton: null
+};
+var Button$1 = function Button(_ref) {
+  var _ref8;
+  var type = _ref.type,
+    theme = _ref.theme,
+    size = _ref.size,
+    href = _ref.href,
+    external = _ref.external,
+    direct = _ref.direct,
+    target = _ref.target,
+    label = _ref.label,
+    children = _ref.children,
+    focusable = _ref.focusable,
+    active = _ref.active,
+    icon = _ref.icon,
+    iconPosition = _ref.iconPosition,
+    disabled = _ref.disabled,
+    loading = _ref.loading,
+    disableOnLoading = _ref.disableOnLoading,
+    small = _ref.small,
+    big = _ref.big,
+    withShadow = _ref.withShadow,
+    withoutStyle = _ref.withoutStyle,
+    withoutBootstrapStyles = _ref.withoutBootstrapStyles,
+    withoutTheme = _ref.withoutTheme,
+    asLink = _ref.asLink,
+    outline = _ref.outline,
+    onClick = _ref.onClick,
+    className = _ref.className,
+    iconClassName = _ref.iconClassName,
+    labelClassName = _ref.labelClassName,
+    refButton = _ref.refButton,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var finalLabel = label || children;
+  var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
+  var hasChildren = label !== null && children !== null;
+  var hasIcon = icon !== null;
+  var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
+  var hasIconColumns = hasIcon && !hasInlineIcon;
+  var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$y.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+  }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$y.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$y.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+  }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$y.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+  }, text), /*#__PURE__*/React.createElement("span", {
+    className: classNames([styles$y.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+  }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
+  var withStyle = !withoutTheme && !withoutStyle && !asLink;
+  var buttonClassNames = classNames([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
+    btn: withStyle
+  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$y.container, (_ref8 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref8, styles$y.withoutStyle, withoutStyle), styles$y.withIcon, hasIcon), styles$y.withIconColumns, hasIconColumns), styles$y.withText, text !== null), styles$y.withShadow, withShadow), styles$y.isSmall, small), styles$y.isBig, big), styles$y.isLink, href !== null), styles$y.asLink, asLink), styles$y.isDisabled, disabled), _defineProperty(_defineProperty(_ref8, styles$y.isLoading, loading), className, className !== null))]);
+  if (href !== null) {
+    var linkClassNames = classNames([buttonClassNames, _defineProperty({
+      disabled: disabled
+    }, styles$y.linkDisabled, disabled)]);
+    return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
+      href: disabled ? null : href,
+      className: linkClassNames,
+      onClick: onClick,
+      target: external ? target : null,
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
+    }), content) : /*#__PURE__*/React.createElement(wouter.Link, {
+      href: href,
+      className: linkClassNames,
+      onClick: onClick,
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
+    }, content);
+  }
+  return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
+    type: type,
+    className: buttonClassNames,
+    onClick: onClick,
+    disabled: disabled || disableOnLoading && loading,
+    ref: refButton,
+    tabIndex: focusable ? '0' : '-1'
+  }), content);
+};
+Button$1.propTypes = propTypes$S;
+Button$1.defaultProps = defaultProps$S;
+
+var styles$x = {};
+
+var _excluded$b = ["className", "onClick", "theme"];
+var propTypes$R = {
+  buttons: core.PropTypes.buttons,
+  size: core.PropTypes.buttonSize,
+  theme: core.PropTypes.buttonTheme,
+  renderButton: PropTypes.func,
+  onClickButton: PropTypes.func,
+  className: PropTypes.string,
+  buttonClassName: PropTypes.string
+};
+var defaultProps$R = {
+  buttons: [],
+  size: null,
+  theme: undefined,
+  renderButton: null,
+  onClickButton: null,
+  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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
+    role: "group"
+  }, buttons.map(function (button, index) {
+    var _button$className = button.className,
+      customClassName = _button$className === void 0 ? null : _button$className,
+      _button$onClick = button.onClick,
+      _onClick = _button$onClick === void 0 ? null : _button$onClick,
+      _button$theme = button.theme,
+      buttonTheme = _button$theme === void 0 ? null : _button$theme,
+      buttonProps = _objectWithoutProperties(button, _excluded$b);
+    var fixedProps = {
+      key: "button-".concat(index),
+      className: classNames([styles$x.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
+      onClick: function onClick(e) {
+        if (_onClick !== null) {
+          _onClick(e, button, index);
+        }
+        if (onClickButton !== null) {
+          onClickButton(e, button, index);
+        }
+      },
+      theme: buttonTheme || theme
+    };
+    return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
+  }));
+};
+Buttons.propTypes = propTypes$R;
+Buttons.defaultProps = defaultProps$R;
+
+var _excluded$a = ["className"];
+var propTypes$Q = {
+  className: PropTypes.string
+};
+var defaultProps$Q = {
+  className: null
+};
+var BackButton = function BackButton(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$a);
+  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
+    className: classNames(['px-2', _defineProperty({}, className, className)]),
+    size: "sm",
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: faAngleLeft.faAngleLeft,
+      size: "lg"
+    })
+  }, props));
+};
+BackButton.propTypes = propTypes$Q;
+BackButton.defaultProps = defaultProps$Q;
+
+var styles$w = {"container":"micromag-core-buttons-clear-container","icon":"micromag-core-buttons-clear-icon"};
+
+var _excluded$9 = ["onClick", "className"];
+var propTypes$P = {
+  onClick: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$P = {
+  onClick: null,
+  className: null
+};
+var ClearButton = function ClearButton(_ref) {
+  var onClick = _ref.onClick,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    className: classNames([styles$w.container, _defineProperty({}, className, className)]),
+    onClick: onClick
+  }, props), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$w.icon,
+    icon: faClose.faClose,
+    size: "md"
+  }));
+};
+ClearButton.propTypes = propTypes$P;
+ClearButton.defaultProps = defaultProps$P;
+
+var _excluded$8 = ["type"],
+  _excluded2 = ["component", "id", "settings"];
+var propTypes$O = {
+  name: PropTypes.string,
+  // .isRequired,
+  value: core.PropTypes.component,
+  form: PropTypes.string,
+  formComponents: core.PropTypes.components,
+  fields: core.PropTypes.fields,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  gotoFieldForm: PropTypes.func.isRequired,
+  closeFieldForm: PropTypes.func.isRequired,
+  fieldContext: PropTypes.any // eslint-disable-line react/forbid-prop-types
+};
+var defaultProps$O = {
+  name: null,
+  form: null,
+  formComponents: {},
+  fields: [],
+  value: null,
+  className: null,
+  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;
+  var fieldsManager = contexts.useFieldsManager();
+  var field = utils.getFieldFromPath(name.split('.'), fields, fieldsManager);
+  var parentField = name.match(/\.[0-9]+$/) !== null ? utils.getFieldFromPath(name.split('.').slice(0, -1), fields, fieldsManager) : null;
+  var _ref2 = field || {},
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? null : _ref2$type,
+    fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
+  var fieldDefinition = fieldsManager.getDefinition(type) || null;
+  var fieldData = fieldDefinition || _objectSpread({}, field);
+  var _ref3 = fieldData || {},
+    _ref3$component = _ref3.component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
+    _ref3.id;
+    _ref3.settings;
+    var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
+  var FieldComponent = contexts.useFieldComponent(fieldComponent);
+  var FormComponent = utils.getComponentFromName(form, formComponents);
+  var fieldValue = get(value, name, null);
+  var onFieldChange = function onFieldChange(newFieldValue) {
+    // const { name, fields: subFields = null } = field || {};
+    var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue
+    // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
+    );
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  };
+  var closeForm = React.useCallback(function () {
+    return closeFieldForm(name, form);
+  }, [name, form, closeFieldForm]);
+  var formProps = {
+    name: name,
+    value: fieldValue,
+    onChange: onFieldChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    closeForm: closeForm
+  };
+  if (form !== null) {
+    return FormComponent !== null ? /*#__PURE__*/React.createElement(contexts.FieldContextProvider, {
+      context: fieldContext
+    }, /*#__PURE__*/React.createElement(FormComponent, Object.assign({
+      field: field
+    }, formProps, {
+      className: className
+    }))) : null;
+  }
+  var _ref4 = parentField || {},
+    itemsProps = _ref4.itemsProps;
+
+  // Use field component with isForm props
+  return FieldComponent !== null ? /*#__PURE__*/React.createElement(contexts.FieldContextProvider, {
+    context: fieldContext
+  }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
+    className: className
+  }, definitionProps, fieldProps, itemsProps, {
+    isForm: true
+  }, formProps))) : null;
+};
+FieldForm.propTypes = propTypes$O;
+FieldForm.defaultProps = defaultProps$O;
+
+var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+
+var propTypes$N = {
+  action: PropTypes.string.isRequired,
+  method: PropTypes.string,
+  fields: core.PropTypes.formFields,
+  initialValue: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  postForm: PropTypes.func,
+  submitButtonLabel: core.PropTypes.label,
+  submitButtonLoadingLabel: core.PropTypes.label,
+  submitButtonTheme: PropTypes.string,
+  cancelButtonTheme: PropTypes.string,
+  buttons: core.PropTypes.buttons,
+  children: PropTypes.node,
+  actionsAlign: PropTypes.oneOf(['left', 'right']),
+  withoutActions: PropTypes.bool,
+  withoutComplete: PropTypes.bool,
+  withoutBackButton: PropTypes.bool,
+  onComplete: PropTypes.func,
+  onResponse: PropTypes.func,
+  onMessage: PropTypes.func,
+  onCancel: PropTypes.func,
+  onCancelHref: PropTypes.string,
+  onOpenFieldForm: PropTypes.func,
+  onCloseFieldForm: PropTypes.func,
+  className: PropTypes.string,
+  fieldsClassName: PropTypes.string,
+  actionsClassName: PropTypes.string,
+  cancelClassName: PropTypes.string
+};
+var defaultProps$N = {
+  method: 'POST',
+  fields: [],
+  initialValue: null,
+  postForm: null,
+  submitButtonLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "ZLDmja",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Submit"
+    }]
+  }),
+  submitButtonLoadingLabel: null,
+  submitButtonTheme: null,
+  cancelButtonTheme: null,
+  buttons: null,
+  children: null,
+  actionsAlign: 'left',
+  withoutActions: false,
+  withoutComplete: false,
+  withoutBackButton: false,
+  onComplete: null,
+  onResponse: null,
+  onMessage: null,
+  onCancel: null,
+  onCancelHref: null,
+  onOpenFieldForm: null,
+  onCloseFieldForm: null,
+  className: null,
+  fieldsClassName: null,
+  actionsClassName: null,
+  cancelClassName: null
+};
+var Form = function Form(_ref) {
+  var action = _ref.action,
+    method = _ref.method,
+    initialFields = _ref.fields,
+    initialValue = _ref.initialValue,
+    postForm = _ref.postForm,
+    submitButtonLabel = _ref.submitButtonLabel,
+    submitButtonLoadingLabel = _ref.submitButtonLoadingLabel,
+    submitButtonTheme = _ref.submitButtonTheme,
+    cancelButtonTheme = _ref.cancelButtonTheme,
+    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(_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);
+    };
+  }, [complete]);
+  var onCompleteForm = React.useCallback(function (data) {
+    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;
+  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(_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(fieldPaths), [fieldKey]));
+    if (onOpenFieldForm !== null) {
+      onOpenFieldForm();
+    }
+  }, [fieldPaths, setFieldPaths]);
+  var closeFieldForm = React.useCallback(function () {
+    var newFields = _toConsumableArray(fieldPaths);
+    newFields.pop();
+    setFieldPaths(_toConsumableArray(newFields));
+    if (onCloseFieldForm !== null) {
+      onCloseFieldForm();
+    }
+  }, [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
+  // const { name: transitionName, timeout: transitionTimeout } = useFormTransition(
+  //     fieldPaths,
+  //     styles,
+  // );
+
+  return /*#__PURE__*/React.createElement("form", {
+    action: action,
+    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
+    method: method,
+    onSubmit: onSubmit
+  }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/React.createElement(BackButton, {
+    theme: "secondary",
+    outline: true,
+    onClick: closeFieldForm
+  })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['w-100', styles$v.panel]),
+    key: "field"
+  }, /*#__PURE__*/React.createElement(FieldForm, {
+    name: fieldName,
+    fields: fields,
+    value: value,
+    onChange: setValue,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm
+  })) : null, FieldsComponent && fields !== null && fields.length > 0 && fieldParams === null ? /*#__PURE__*/React.createElement(FieldsComponent, {
+    fields: fields,
+    value: value,
+    errors: errors,
+    onChange: setValue,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    className: classNames([styles$v.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+  }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
+    className: "text-danger my-1"
+  }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$v.actions, _defineProperty(_defineProperty({}, styles$v[actionsAlign], actionsAlign), actionsClassName, actionsClassName !== null)])
+  }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
+    type: "button",
+    onClick: onCancel,
+    href: onCancelHref,
+    theme: cancelButtonTheme || 'secondary',
+    outline: true,
+    disabled: status === 'loading',
+    className: classNames(['me-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "PyxZY2",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Cancel"
+    }]
+  })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    buttons: buttons,
+    className: styles$v.buttons
+  }) : /*#__PURE__*/React.createElement(Button$1, {
+    type: "submit",
+    theme: submitButtonTheme || 'primary',
+    disabled: status === 'loading' || !canSave
+  }, status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel), complete ? /*#__PURE__*/React.createElement("p", {
+    className: "text-success mx-2 my-1"
+  }, /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
+    id: "BpZoQZ",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Success"
+    }]
+  })) : null) : null);
+};
+Form.propTypes = propTypes$N;
+Form.defaultProps = defaultProps$N;
+
+var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+
+var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
+var propTypes$M = {
+  href: PropTypes.string,
+  external: PropTypes.bool,
+  target: PropTypes.string,
+  children: core.PropTypes.label,
+  rel: PropTypes.string,
+  withoutStyle: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$M = {
+  href: '',
+  external: false,
+  target: '_blank',
+  rel: 'noopener noreferrer',
+  children: null,
+  withoutStyle: false,
+  className: null
+};
+var Link = function Link(_ref) {
+  var href = _ref.href,
+    external = _ref.external,
+    children = _ref.children,
+    target = _ref.target,
+    rel = _ref.rel,
+    className = _ref.className,
+    withoutStyle = _ref.withoutStyle,
+    props = _objectWithoutProperties(_ref, _excluded$7);
+  return external ? /*#__PURE__*/React.createElement("a", Object.assign({
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
+    href: href,
+    target: target,
+    rel: rel
+  }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(wouter.Link, Object.assign({
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
+    href: href
+  }, props), /*#__PURE__*/React.createElement(Label, null, children));
+};
+Link.propTypes = propTypes$M;
+Link.defaultProps = defaultProps$M;
+
+var _excluded$6 = ["label", "className"];
+var propTypes$L = {
+  href: PropTypes.string,
+  header: PropTypes.node,
+  image: PropTypes.node,
+  imageAlt: PropTypes.string,
+  imageOverlay: PropTypes.bool,
+  beforeBody: PropTypes.node,
+  title: core.PropTypes.label,
+  subtitle: core.PropTypes.label,
+  children: PropTypes.node,
+  afterBody: PropTypes.node,
+  links: PropTypes.arrayOf(PropTypes.shape({
+    label: core.PropTypes.label,
+    href: PropTypes.string
+  })),
+  linksInSameBody: PropTypes.bool,
+  footer: PropTypes.node,
+  theme: PropTypes.oneOf([null, 'dark', 'primary', 'light']),
+  className: PropTypes.string,
+  imageClassName: PropTypes.string,
+  headerClassName: PropTypes.string,
+  titleClassName: PropTypes.string,
+  subtitleClassName: PropTypes.string,
+  bodyClassName: PropTypes.string,
+  footerClassName: PropTypes.string,
+  onClick: PropTypes.func,
+  onClickBody: PropTypes.func,
+  onClickFooter: PropTypes.func
+};
+var defaultProps$L = {
+  href: null,
+  header: null,
+  image: null,
+  imageAlt: null,
+  imageOverlay: false,
+  beforeBody: null,
+  title: null,
+  subtitle: null,
+  children: null,
+  afterBody: null,
+  links: null,
+  linksInSameBody: false,
+  footer: null,
+  theme: null,
+  className: null,
+  imageClassName: null,
+  headerClassName: null,
+  titleClassName: null,
+  subtitleClassName: null,
+  bodyClassName: null,
+  footerClassName: null,
+  onClick: null,
+  onClickBody: null,
+  onClickFooter: null
+};
+var Card = function Card(_ref) {
+  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;
+  var linksElements = (links || []).map(function (_ref2, index) {
+    var label = _ref2.label,
+      _ref2$className = _ref2.className,
+      linkClassName = _ref2$className === void 0 ? null : _ref2$className,
+      linkProps = _objectWithoutProperties(_ref2, _excluded$6);
+    return /*#__PURE__*/React.createElement(Link, Object.assign({
+      key: "link-".concat(label, "-").concat(index),
+      className: classNames(['card-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+    }, linkProps), label);
+  });
+  var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/React.createElement(React.Fragment, null, title !== null ? /*#__PURE__*/React.createElement("h5", {
+    className: classNames(['card-title', _defineProperty({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
+    className: classNames(['card-subtitle', _defineProperty({}, subtitleClassName, subtitleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, subtitle)) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
+  }, linksElements) : null) : null;
+  var cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, header !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-header', _defineProperty({}, headerClassName, headerClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: image,
+    alt: imageAlt,
+    className: classNames(['card-img-top', _defineProperty({}, imageClassName, imageClassName !== null)])
+  }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames(_defineProperty({
+      'card-body': !imageOverlay,
+      'card-img-overlay': imageOverlay
+    }, bodyClassName, bodyClassName !== null)),
+    onClick: onClickBody
+  }, bodyInner) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(_defineProperty({
+      'card-body': !imageOverlay,
+      'card-img-overlay': imageOverlay
+    }, bodyClassName, bodyClassName !== null))
+  }, bodyInner) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/React.createElement("div", {
+    className: "card-body"
+  }, linksElements) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)]),
+    onClick: onClickFooter
+  }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className, className !== null)]);
+  if (href !== null) {
+    return /*#__PURE__*/React.createElement(Link, {
+      href: href,
+      className: cardClassName
+    }, cardInner);
+  }
+  if (onClick !== null) {
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: classNames(['p-0', 'text-start', cardClassName]),
+      onClick: onClick
+    }, cardInner);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: cardClassName
+  }, cardInner);
+};
+Card.propTypes = propTypes$L;
+Card.defaultProps = defaultProps$L;
+
+var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated"};
+
+var propTypes$K = {
+  animated: PropTypes.bool,
+  color: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  className: PropTypes.string
+};
+var defaultProps$K = {
+  animated: true,
+  color: 'currentColor',
+  strokeWidth: 3,
+  className: null
+};
+var Spinner = function Spinner(_ref) {
+  var animated = _ref.animated,
+    color = _ref.color,
+    strokeWidth = _ref.strokeWidth,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: classNames([styles$t.container, _defineProperty(_defineProperty({}, styles$t.animated, animated), className, className !== null)]),
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: styles$t.path,
+    cx: "20",
+    cy: "20",
+    r: "12",
+    fill: "none",
+    stroke: color,
+    strokeWidth: strokeWidth
+  }));
+};
+Spinner.propTypes = propTypes$K;
+Spinner.defaultProps = defaultProps$K;
+
+var styles$s = {};
+
+var _excluded$5 = ["description", "loading", "children", "className"];
+var propTypes$J = {
+  description: PropTypes.node,
+  loading: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+var defaultProps$J = {
+  description: null,
+  loading: false,
+  children: null,
+  className: null
+};
+var FormPanel = function FormPanel(_ref) {
+  var description = _ref.description,
+    loading = _ref.loading,
+    children = _ref.children,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$5);
+  return /*#__PURE__*/React.createElement(Card, Object.assign({
+    className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
+  }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
+};
+FormPanel.propTypes = propTypes$J;
+FormPanel.defaultProps = defaultProps$J;
+
+var propTypes$I = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$I = {
+  className: null,
+  color: '#fff'
+};
+var ArrowIcon = function ArrowIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "14",
+    viewBox: "0 0 20 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M13.353 0.371014L19.319 6.33704C19.6851 6.70314 19.6851 7.29671 19.319 7.66282L13.353 13.6288C12.9869 13.9949 12.3933 13.9949 12.0272 13.6288C11.6611 13.2627 11.6611 12.6692 12.0272 12.3031L16.3929 7.9374H0V6.06246H16.3929L12.0272 1.6968C11.6611 1.33069 11.6611 0.737119 12.0272 0.371014C12.3933 0.0049094 12.9869 0.0049094 13.353 0.371014Z",
+    fill: color
+  }));
+};
+ArrowIcon.propTypes = propTypes$I;
+ArrowIcon.defaultProps = defaultProps$I;
+
+var propTypes$H = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$H = {
+  className: null,
+  color: '#fff'
+};
+var CloseIcon = function CloseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "22",
+    height: "22",
+    viewBox: "0 0 22 22",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 1L21 21",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 21L21 0.999998",
+    stroke: color,
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+CloseIcon.propTypes = propTypes$H;
+CloseIcon.defaultProps = defaultProps$H;
+
+var propTypes$G = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$G = {
+  className: null,
+  color: '#fff'
+};
+var FullscreenIcon = function FullscreenIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "14",
+    viewBox: "0 0 16 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
+    fill: color
+  }));
+};
+FullscreenIcon.propTypes = propTypes$G;
+FullscreenIcon.defaultProps = defaultProps$G;
+
+var propTypes$F = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$F = {
+  className: null,
+  color: '#fff'
+};
+var LinkIcon = function LinkIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
+    stroke: color,
+    strokeWidth: "1.25",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+LinkIcon.propTypes = propTypes$F;
+LinkIcon.defaultProps = defaultProps$F;
+
+var propTypes$E = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$E = {
+  className: null,
+  color: '#fff'
+};
+var MuteIcon = function MuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18 18.6875C21.3137 18.6875 24 16.0012 24 12.6875C24 9.37379 21.3137 6.6875 18 6.6875",
+    stroke: color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
+    stroke: color
+  }));
+};
+MuteIcon.propTypes = propTypes$E;
+MuteIcon.defaultProps = defaultProps$E;
+
+var propTypes$D = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$D = {
+  className: null,
+  color: '#fff'
+};
+var PauseIcon = function PauseIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    className: className,
+    width: "14",
+    height: "18",
+    viewBox: "0 0 14 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }), /*#__PURE__*/React.createElement("rect", {
+    x: "8",
+    width: "6",
+    height: "18",
+    rx: "2",
+    fill: color
+  }));
+};
+PauseIcon.propTypes = propTypes$D;
+PauseIcon.defaultProps = defaultProps$D;
+
+var propTypes$C = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$C = {
+  className: null,
+  color: '#fff'
+};
+var PlayIcon = function PlayIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "40",
+    height: "45.1",
+    viewBox: "0 0 40 45.1",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
+    fill: color,
+    stroke: color
+  }));
+};
+PlayIcon.propTypes = propTypes$C;
+PlayIcon.defaultProps = defaultProps$C;
+
+var propTypes$B = {
+  className: PropTypes.string,
+  color: PropTypes.string
+};
+var defaultProps$B = {
+  className: null,
+  color: '#fff'
+};
+var UnmuteIcon = function UnmuteIcon(_ref) {
+  var color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "26",
+    height: "26",
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
+    fill: color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.8536 13.3946L23 15.5411L23.7071 14.834L21.5607 12.6875L23.7071 10.5411L23 9.83398L20.8536 11.9804L18.7071 9.83398L18 10.5411L20.1464 12.6875L18 14.834L18.7071 15.5411L20.8536 13.3946Z",
+    fill: color
+  }));
+};
+UnmuteIcon.propTypes = propTypes$B;
+UnmuteIcon.defaultProps = defaultProps$B;
+
+var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
+
+var propTypes$A = {
+  items: core.PropTypes.menuItems,
+  theme: core.PropTypes.bootstrapThemes,
+  separator: PropTypes.oneOf([null, 'arrow']),
+  withoutBar: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$A = {
+  items: [],
+  theme: null,
+  separator: null,
+  withoutBar: false,
+  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;
+  return /*#__PURE__*/React.createElement("nav", {
+    className: className
+  }, /*#__PURE__*/React.createElement("ol", {
+    className: classNames([styles$r.container, 'breadcrumb', 'mb-0', {
+      'p-0': withoutBar,
+      'bg-transparent': withoutBar,
+      'rounded-0': withoutBar,
+      'flex-nowrap': noWrap
+    }])
+  }, items.map(function (_ref2, index) {
+    var url = _ref2.url,
+      label = _ref2.label,
+      _ref2$active = _ref2.active,
+      active = _ref2$active === void 0 ? false : _ref2$active,
+      _ref2$onClick = _ref2.onClick,
+      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
+    return /*#__PURE__*/React.createElement("li", {
+      className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
+        active: active
+      }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
+      key: "item-".concat(index)
+    }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(wouter.Link, {
+      href: url,
+      onClick: onClick,
+      className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
+    }, /*#__PURE__*/React.createElement(Label, null, label)) : null, !active && onClick ? /*#__PURE__*/React.createElement(Button$1, {
+      onClick: onClick,
+      className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)])
+    }, /*#__PURE__*/React.createElement(Label, null, label)) : null);
+  })));
+};
+Breadcrumb.propTypes = propTypes$A;
+Breadcrumb.defaultProps = defaultProps$A;
+
+var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
+var propTypes$z = {
+  items: core.PropTypes.menuItems,
+  children: PropTypes.node,
+  visible: PropTypes.bool,
+  align: core.PropTypes.dropdownAlign,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  onClickItem: PropTypes.func,
+  onClickOutside: PropTypes.func
+};
+var defaultProps$z = {
+  items: [],
+  children: null,
+  visible: false,
+  align: null,
+  className: null,
+  itemClassName: null,
+  onClickItem: null,
+  onClickOutside: null
+};
+var Dropdown = function Dropdown(_ref) {
+  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;
+  var refContainer = React.useRef(null);
+  var _useState = React.useState(visible),
+    _useState2 = _slicedToArray(_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
+  React.useEffect(function () {
+    var id = setTimeout(function () {
+      setEnabled(visible);
+    }, 100);
+    return function () {
+      clearTimeout(id);
+    };
+  }, [visible, setEnabled]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className, className !== null)]),
+    ref: refContainer
+  }, children !== null ? children : items.map(function (it, index) {
+    var _it$type = it.type,
+      type = _it$type === void 0 ? 'link' : _it$type,
+      _it$className = it.className,
+      customClassName = _it$className === void 0 ? null : _it$className,
+      _it$label = it.label,
+      label = _it$label === void 0 ? null : _it$label,
+      _it$children = it.children,
+      itemChildren = _it$children === void 0 ? null : _it$children,
+      _it$onClick = it.onClick,
+      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      _it$active = it.active,
+      active = _it$active === void 0 ? false : _it$active,
+      itemProps = _objectWithoutProperties(it, _excluded$4);
+    var ItemComponent = 'div';
+    if (type === 'link') {
+      ItemComponent = Link;
+    } else if (type === 'button') {
+      ItemComponent = 'button';
+    } else if (type === 'header') {
+      ItemComponent = 'h6';
+    } else if (type === 'divider') {
+      ItemComponent = 'hr';
+    }
+    var finalOnClickItem = customOnClick !== null || type === 'link' && onClickItem !== null ? function (e) {
+      if (customOnClick !== null) {
+        customOnClick(e);
+      }
+      if (type === 'link' && onClickItem !== null) {
+        onClickItem(e);
+      }
+    } : null;
+    return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
+      key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
+    }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
+      className: classNames([_defineProperty(_defineProperty({
+        'dropdown-item': type === 'link' || type === 'button',
+        'dropdown-divider': type === 'divider',
+        'dropdown-header': type === 'header',
+        active: active
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null)]),
+      onClick: finalOnClickItem
+    }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
+  }));
+};
+Dropdown.propTypes = propTypes$z;
+Dropdown.defaultProps = defaultProps$z;
+
+var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
+var propTypes$y = {
+  items: core.PropTypes.menuItems,
+  tagName: PropTypes.string,
+  itemTagName: PropTypes.string,
+  children: PropTypes.node,
+  linkAsItem: PropTypes.bool,
+  className: PropTypes.string,
+  itemClassName: PropTypes.string,
+  linkClassName: PropTypes.string,
+  hasSubMenuClassName: PropTypes.string,
+  subMenuClassName: PropTypes.string,
+  subMenuItemClassName: PropTypes.string,
+  subMenuLinkClassName: PropTypes.string,
+  hasDropdownClassName: PropTypes.string,
+  dropdownClassName: PropTypes.string,
+  dropdownItemClassName: PropTypes.string,
+  dropdownLinkClassName: PropTypes.string,
+  dropdownAlign: core.PropTypes.dropdownAlign
+};
+var defaultProps$y = {
+  items: [],
+  tagName: 'ul',
+  itemTagName: 'li',
+  children: null,
+  linkAsItem: false,
+  className: null,
+  itemClassName: null,
+  linkClassName: null,
+  hasSubMenuClassName: null,
+  subMenuClassName: null,
+  subMenuItemClassName: null,
+  subMenuLinkClassName: null,
+  hasDropdownClassName: null,
+  dropdownClassName: null,
+  dropdownItemClassName: null,
+  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;
+  var _useState = React.useState(items.map(function () {
+      return false;
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    dropdownsVisible = _useState2[0],
+    setDropdownsVisible = _useState2[1];
+  var ListComponent = linkAsItem ? 'div' : tagName;
+  return /*#__PURE__*/React.createElement(ListComponent, {
+    className: className
+  }, children !== null ? children : items.map(function (it, index) {
+    var id = it.id,
+      _it$className = it.className,
+      customClassName = _it$className === void 0 ? null : _it$className,
+      _it$linkClassName = it.linkClassName,
+      customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
+      _it$href = it.href,
+      href = _it$href === void 0 ? null : _it$href,
+      label = it.label,
+      _it$external = it.external,
+      external = _it$external === void 0 ? false : _it$external,
+      _it$items = it.items,
+      subItems = _it$items === void 0 ? null : _it$items,
+      _it$dropdown = it.dropdown,
+      dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
+      _it$active = it.active,
+      active = _it$active === void 0 ? false : _it$active,
+      _it$onClick = it.onClick,
+      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      itemProps = _objectWithoutProperties(it, _excluded$3);
+    var onClickItem = dropdown !== null ? function (e) {
+      e.preventDefault();
+      setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
+      if (customOnClick !== null) {
+        customOnClick(e);
+      }
+    } : customOnClick;
+    var closeDropdown = dropdown !== null ? function () {
+      setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
+    } : null;
+    var ItemComponent = itemTagName;
+    return linkAsItem ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
+      key: "item-".concat(id || index),
+      onClick: onClickItem,
+      href: href,
+      external: external,
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+        active: active
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), linkClassName, linkClassName !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : /*#__PURE__*/React.createElement(ItemComponent, {
+      key: "item-".concat(id || index),
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+        dropdown: dropdown !== null,
+        active: active
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null))
+    }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
+      onClick: onClickItem,
+      href: href,
+      external: external,
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
+      onClick: onClickItem,
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+    }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(_Menu, {
+      items: subItems,
+      className: subMenuClassName,
+      itemClassName: classNames(_defineProperty(_defineProperty({}, subMenuItemClassName, subMenuItemClassName !== null), itemClassName, subMenuItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, subMenuLinkClassName, subMenuLinkClassName !== null), linkClassName, subMenuLinkClassName === null && linkClassName !== null))
+    }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
+      items: dropdown,
+      visible: dropdownsVisible[index] || false,
+      className: dropdownClassName,
+      itemClassName: classNames(_defineProperty(_defineProperty({}, dropdownItemClassName, dropdownItemClassName !== null), itemClassName, dropdownItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, dropdownLinkClassName, dropdownLinkClassName !== null), linkClassName, dropdownLinkClassName === null && linkClassName !== null)),
+      align: dropdownAlign,
+      onClickItem: closeDropdown,
+      onClickOutside: closeDropdown
+    }) : null);
+  }));
+};
+_Menu.propTypes = propTypes$y;
+_Menu.defaultProps = defaultProps$y;
+
+var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
+
+var propTypes$x = {
+  brand: PropTypes.node,
+  brandLink: PropTypes.string,
+  breadcrumbs: PropTypes.node,
+  theme: PropTypes.oneOf(['light', 'dark', 'primary', null]),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  compact: PropTypes.bool,
+  noWrap: PropTypes.bool,
+  withoutCollapse: PropTypes.bool,
+  withoutCollapseToggle: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  brandClassName: PropTypes.string,
+  breadCrumbsClassName: PropTypes.string,
+  collapseClassName: PropTypes.string
+};
+var defaultProps$x = {
+  brand: null,
+  brandLink: null,
+  breadcrumbs: null,
+  theme: null,
+  size: 'md',
+  compact: false,
+  noWrap: false,
+  withoutCollapse: false,
+  withoutCollapseToggle: false,
+  children: null,
+  className: null,
+  brandClassName: null,
+  breadCrumbsClassName: null,
+  collapseClassName: null
+};
+var Navbar = function Navbar(_ref) {
+  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;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    menuVisible = _useState2[0],
+    setMenuVisible = _useState2[1];
+  var onClickMenu = React.useCallback(function () {
+    return setMenuVisible(!menuVisible);
+  }, [setMenuVisible, menuVisible]);
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(['container-fluid', {
+      'px-0': compact
+    }])
+  }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['navbar-brand', _defineProperty({
+      'py-0': compact
+    }, brandClassName, brandClassName !== null)]),
+    href: brandLink
+  }, brand) : null, brand !== null && brandLink === null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames(['navbar-brand', _defineProperty({
+      'py-0': compact
+    }, brandClassName, brandClassName !== null)])
+  }, brand) : null, breadcrumbs !== null ? /*#__PURE__*/React.createElement("span", {
+    className: classNames(['navbar-breadcrumbs', _defineProperty({
+      'py-0': compact
+    }, breadCrumbsClassName, breadCrumbsClassName !== null)])
+  }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React.createElement(Button$1, {
+    className: "navbar-toggler",
+    onClick: onClickMenu,
+    withoutTheme: true,
+    "aria-controls": "navbarSupportedContent",
+    "aria-expanded": "false",
+    "aria-label": "Toggle navigation"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "navbar-toggler-icon"
+  })) : null, !withoutCollapse ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, _defineProperty(_defineProperty({}, collapseClassName, collapseClassName !== null), "show", menuVisible)])
+  }, children) : children));
+};
+Navbar.propTypes = propTypes$x;
+Navbar.defaultProps = defaultProps$x;
+
+var styles$p = {};
+
+var messages = reactIntl.defineMessages({
+  previous: {
+    id: "menus.pagination.previous",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Previous"
+    }]
+  },
+  next: {
+    id: "menus.pagination.next",
+    defaultMessage: [{
+      "type": 0,
+      "value": "next"
+    }]
+  }
+});
+var propTypes$w = {
+  page: PropTypes.number,
+  lastPage: PropTypes.number,
+  maxPages: PropTypes.number,
+  total: PropTypes.number,
+  url: PropTypes.string,
+  query: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  withPreviousNext: PropTypes.bool,
+  className: PropTypes.string,
+  paginationClassName: PropTypes.string,
+  itemClassName: PropTypes.string,
+  linkClassName: PropTypes.string,
+  onClickPage: PropTypes.func
+};
+var defaultProps$w = {
+  page: 1,
+  lastPage: 1,
+  maxPages: 10,
+  total: 1,
+  url: null,
+  query: null,
+  withPreviousNext: false,
+  className: null,
+  paginationClassName: null,
+  itemClassName: null,
+  linkClassName: null,
+  onClickPage: null
+};
+var PaginationMenu = function PaginationMenu(_ref) {
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
+    url = _ref.url,
+    query = _ref.query,
+    withPreviousNext = _ref.withPreviousNext,
+    className = _ref.className,
+    paginationClassName = _ref.paginationClassName,
+    itemClassName = _ref.itemClassName,
+    linkClassName = _ref.linkClassName,
+    onClickPage = _ref.onClickPage;
+  var getUrl = React.useCallback(function (currentPage) {
+    return url !== null ? "".concat(url, "?").concat(queryString.stringify(_objectSpread(_objectSpread({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
+  });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray(selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray(selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
+  return /*#__PURE__*/React.createElement("nav", {
+    className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: classNames(['pagination', _defineProperty({}, paginationClassName, paginationClassName !== null)])
+  }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
+    className: classNames(['page-item', _defineProperty({
+      disabled: page <= 1
+    }, itemClassName, itemClassName !== null)])
+  }, page > 1 ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+    href: getUrl(page - 1),
+    onClick: onClickPage !== null ? function () {
+      return onClickPage(page - 1);
+    } : null
+  }, messages.previous) : /*#__PURE__*/React.createElement("span", {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "page-".concat(pageNumber),
+      className: classNames(['page-item', _defineProperty({
+        active: pageNumber === page
+      }, itemClassName, itemClassName !== null)])
+    }, /*#__PURE__*/React.createElement(Link, {
+      className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+      href: getUrl(pageNumber),
+      onClick: onClickPage !== null ? function () {
+        return onClickPage(pageNumber);
+      } : null
+    }, pageNumber));
+  }), withPreviousNext ? /*#__PURE__*/React.createElement("li", {
+    className: classNames(['page-item', _defineProperty({
+      disabled: page >= total
+    }, itemClassName, itemClassName !== null)])
+  }, page < total ? /*#__PURE__*/React.createElement(Link, {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+    href: getUrl(page + 1),
+    onClick: onClickPage !== null ? function () {
+      return onClickPage(page + 1);
+    } : null
+  }, messages.next) : /*#__PURE__*/React.createElement("span", {
+    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
+};
+PaginationMenu.propTypes = propTypes$w;
+PaginationMenu.defaultProps = defaultProps$w;
+
+var styles$o = {"container":"micromag-core-menus-tabs-container"};
+
+var propTypes$v = {
+  items: core.PropTypes.menuItems,
+  size: core.PropTypes.buttonSize,
+  theme: core.PropTypes.buttonTheme,
+  renderItemButton: PropTypes.func,
+  buttonClassName: PropTypes.string,
+  className: PropTypes.string,
+  onClickItem: PropTypes.func
+};
+var defaultProps$v = {
+  items: [],
+  size: null,
+  theme: 'secondary',
+  renderItemButton: null,
+  buttonClassName: null,
+  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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$o.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement(Buttons, {
+    buttons: items,
+    size: size,
+    theme: theme,
+    renderButton: renderItemButton,
+    onClickButton: onClickItem,
+    className: styles$o.buttons,
+    buttonClassName: classNames([styles$o.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
+  }));
+};
+TabsMenu.propTypes = propTypes$v;
+TabsMenu.defaultProps = defaultProps$v;
+
+var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
+
+var propTypes$u = {
+  modals: core.PropTypes.modals.isRequired,
+  setModalsContainer: PropTypes.func.isRequired,
+  className: PropTypes.string
+};
+var defaultProps$u = {
+  className: null
+};
+var ModalsContainer = function ModalsContainer(_ref) {
+  var modals = _ref.modals,
+    setModalsContainer = _ref.setModalsContainer,
+    className = _ref.className;
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    setModalsContainer(containerRef.current);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$n.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
+    ref: containerRef
+  }));
+};
+ModalsContainer.propTypes = propTypes$u;
+ModalsContainer.defaultProps = defaultProps$u;
+var Modals = contexts.withModals(ModalsContainer);
+
+/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
+var propTypes$t = {
+  id: PropTypes.string,
+  data: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  container: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  register: PropTypes.func,
+  unregister: PropTypes.func,
+  children: PropTypes.node
+};
+var defaultProps$t = {
+  id: null,
+  data: null,
+  container: null,
+  register: null,
+  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;
+  var finalId = React.useMemo(function () {
+    return id || "element-".concat(new Date().getTime());
+  }, [id]);
+  React.useEffect(function () {
+    if (register !== null) {
+      register(finalId, data);
+    }
+    return function () {
+      if (unregister !== null) {
+        unregister(finalId);
+      }
+    };
+  }, [finalId, data]);
+  return container !== null ? /*#__PURE__*/reactDom.createPortal(children, container) : null;
+};
+ElementPortal.propTypes = propTypes$t;
+ElementPortal.defaultProps = defaultProps$t;
+
+/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
+var propTypes$s = {
+  id: PropTypes.string,
+  data: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.node
+};
+var defaultProps$s = {
+  id: null,
+  data: null,
+  children: null
+};
+var ModalPortal = function ModalPortal(_ref) {
+  var id = _ref.id,
+    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;
+  return /*#__PURE__*/React.createElement(ElementPortal, {
+    id: id,
+    data: data,
+    container: container,
+    register: register,
+    unregister: unregister
+  }, children);
+};
+ModalPortal.propTypes = propTypes$s;
+ModalPortal.defaultProps = defaultProps$s;
+
+var styles$m = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+
+var propTypes$r = {
+  id: PropTypes.string,
+  title: PropTypes.string,
+  position: PropTypes.oneOf(['center', 'top']),
+  children: PropTypes.node
+};
+var defaultProps$r = {
+  id: null,
+  title: null,
+  position: 'center',
+  children: null
+};
+var Modal = function Modal(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    position = _ref.position,
+    title = _ref.title;
+  var finalId = React.useMemo(function () {
+    return id || utils.getDisplayName(children.type);
+  }, [id, children.type]);
+  var data = React.useMemo(function () {
+    return {
+      title: title
+    };
+  }, [title]);
+  return /*#__PURE__*/React.createElement(ModalPortal, {
+    id: finalId,
+    data: data
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$m.container, _defineProperty({}, styles$m[position], position !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$m.inner, 'bg-dark', 'rounded'])
+  }, children)));
+};
+Modal.propTypes = propTypes$r;
+Modal.defaultProps = defaultProps$r;
+
+var styles$l = {"container":"micromag-core-modals-dialog-container"};
+
+var propTypes$q = {
+  title: core.PropTypes.label,
+  header: PropTypes.node,
+  children: PropTypes.node,
+  footer: PropTypes.node,
+  size: PropTypes.string,
+  buttons: core.PropTypes.buttons,
+  onClose: PropTypes.func,
+  className: PropTypes.string,
+  bodyClassName: PropTypes.string
+};
+var defaultProps$q = {
+  title: null,
+  header: null,
+  children: null,
+  footer: null,
+  size: null,
+  buttons: null,
+  onClose: null,
+  className: null,
+  bodyClassName: null
+};
+var ModalDialog = function ModalDialog(_ref) {
+  var title = _ref.title,
+    header = _ref.header,
+    children = _ref.children,
+    buttons = _ref.buttons,
+    footer = _ref.footer,
+    size = _ref.size,
+    onClose = _ref.onClose,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$l.container, 'modal-dialog', _defineProperty(_defineProperty({}, "modal-".concat(size), size !== null), className, className)]),
+    role: "dialog"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "modal-content"
+  }, header || /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header])
+  }, /*#__PURE__*/React.createElement("h5", {
+    className: "modal-title"
+  }, /*#__PURE__*/React.createElement(Label, null, title)), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "btn btn-close p-2",
+    "aria-label": "Close",
+    onClick: onClose
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-body', 'p-2', _defineProperty({}, bodyClassName, bodyClassName !== null)])
+  }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['modal-footer', 'p-2', styles$l.footer])
+  }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
+    buttons: buttons,
+    className: styles$l.buttons
+  }) : null) : null));
+};
+ModalDialog.propTypes = propTypes$q;
+ModalDialog.defaultProps = defaultProps$q;
+
+var styles$k = {"container":"micromag-core-panels-container"};
+
+var propTypes$p = {
+  panels: core.PropTypes.panels,
+  setPanelsContainer: PropTypes.func,
+  className: PropTypes.string
+};
+var defaultProps$p = {
+  panels: [],
+  setPanelsContainer: null,
+  className: null
+};
+var PanelsContainer = function PanelsContainer(_ref) {
+  var panels = _ref.panels,
+    setPanelsContainer = _ref.setPanelsContainer,
+    className = _ref.className;
+  var containerRef = React.useRef(null);
+  React.useEffect(function () {
+    setPanelsContainer(containerRef.current);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$k.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
+    ref: containerRef
+  }));
+};
+PanelsContainer.propTypes = propTypes$p;
+PanelsContainer.defaultProps = defaultProps$p;
+var Panels = contexts.withPanels(PanelsContainer);
+
+/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
+var propTypes$o = {
+  id: PropTypes.string,
+  data: PropTypes.object,
+  // eslint-disable-line react/forbid-prop-types
+  children: PropTypes.node
+};
+var defaultProps$o = {
+  id: null,
+  data: null,
+  children: null
+};
+var PanelPortal = function PanelPortal(_ref) {
+  var id = _ref.id,
+    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;
+  if (panels === null) {
+    return children;
+  }
+  return /*#__PURE__*/React.createElement(ElementPortal, {
+    id: id,
+    data: data,
+    container: container,
+    register: register,
+    unregister: unregister
+  }, children);
+};
+PanelPortal.propTypes = propTypes$o;
+PanelPortal.defaultProps = defaultProps$o;
+
+var styles$j = {"container":"micromag-core-panels-panel-container"};
+
+/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
+var propTypes$n = {
+  id: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.node
+};
+var defaultProps$n = {
+  id: null,
+  title: null,
+  children: null
+};
+var Panel = function Panel(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    title = _ref.title;
+  var finalId = React.useMemo(function () {
+    return id || utils.getDisplayName(children.type);
+  }, [id, children.type]);
+  var data = React.useMemo(function () {
+    return {
+      title: title
+    };
+  }, [title]);
+  return /*#__PURE__*/React.createElement(PanelPortal, {
+    id: finalId,
+    data: data
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$j.container
+  }, children));
+};
+Panel.propTypes = propTypes$n;
+Panel.defaultProps = defaultProps$n;
+
+var styles$i = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
+
+var propTypes$m = {
+  title: PropTypes.node,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  topClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
+  openedClassName: PropTypes.string,
+  buttonClassName: PropTypes.string
+};
+var defaultProps$m = {
+  title: null,
+  children: null,
+  className: null,
+  topClassName: null,
+  contentClassName: null,
+  openedClassName: null,
+  buttonClassName: null
+};
+var CollapsablePanel = function CollapsablePanel(_ref) {
+  var title = _ref.title,
+    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(_useState, 2),
+    opened = _useState2[0],
+    setOpened = _useState2[1];
+  var onClick = React.useCallback(function () {
+    return setOpened(!opened);
+  }, [opened, setOpened]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.container, _defineProperty(_defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null), className, className !== null)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.top, _defineProperty({}, topClassName, topClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Button$1, {
+    withoutStyle: true,
+    className: classNames([styles$i.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
+    icon: /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+      icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
+      className: styles$i.icon
+    }),
+    iconPosition: "right",
+    labelClassName: styles$i.label,
+    onClick: onClick
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$i.content, _defineProperty({}, contentClassName, contentClassName !== null)])
+  }, children));
+};
+CollapsablePanel.propTypes = propTypes$m;
+CollapsablePanel.defaultProps = defaultProps$m;
+
+var propTypes$l = {
+  stroke: PropTypes.string,
+  border: PropTypes.string,
+  fill: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$l = {
+  stroke: 'currentColor',
+  border: 'rgba(0,0,0,0.67)',
+  fill: '#fff',
+  className: null
+};
+var Close = function Close(_ref) {
+  var stroke = _ref.stroke,
+    border = _ref.border,
+    fill = _ref.fill,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "42.9",
+    height: "42.9",
+    viewBox: "0 0 42.9 42.9",
+    className: className
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-352.531 -47.531)"
+  }, border ? /*#__PURE__*/React.createElement("path", {
+    fill: border,
+    d: "M374,47.5c11.9,0,21.5,9.6,21.5,21.5s-9.6,21.5-21.5,21.5s-21.5-9.6-21.5-21.5c0,0,0,0,0,0 C352.5,57.1,362.1,47.5,374,47.5z"
+  }) : null, /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    d: "M374,50c10.5,0,19,8.5,19,19s-8.5,19-19,19s-19-8.5-19-19S363.5,50,374,50z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(366.893 61.893)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 0)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    d: "M14.2,0.3L0,13.9"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    d: "M0.3,0l13.7,14.2"
+  })))));
+};
+Close.propTypes = propTypes$l;
+Close.defaultProps = defaultProps$l;
+
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$k = {
+  date: PropTypes.string,
+  withTime: PropTypes.bool,
+  timeSeparator: PropTypes.node
+};
+var defaultProps$k = {
+  date: null,
+  withTime: false,
+  timeSeparator: ', '
+};
+var Date$1 = function Date(_ref) {
+  var date = _ref.date,
+    withTime = _ref.withTime,
+    timeSeparator = _ref.timeSeparator;
+  var dateObject = React.useMemo(function () {
+    return dayjs(date).toDate();
+  }, [date]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(reactIntl.FormattedDate, {
+    value: dateObject,
+    year: "numeric",
+    month: "long",
+    day: "2-digit"
+  }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/React.createElement(reactIntl.FormattedTime, {
+    value: dateObject
+  }) : null);
+};
+Date$1.propTypes = propTypes$k;
+Date$1.defaultProps = defaultProps$k;
+
+/* eslint-disable react/no-danger */
+var propTypes$j = {
+  throttleDelay: PropTypes.number,
+  threshold: PropTypes.arrayOf(PropTypes.number),
+  onEnter: PropTypes.func,
+  onLeave: PropTypes.func,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string
+};
+var defaultProps$j = {
+  throttleDelay: null,
+  threshold: undefined,
+  onEnter: null,
+  onLeave: null,
+  onChange: null,
+  disabled: false,
+  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;
+  var _useIntersectionObser = hooks.useIntersectionObserver({
+      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(callback, throttleDelay, {
+      trailing: true,
+      leading: true
+    }) : callback;
+  }, [throttleDelay, onEnter, onLeave, onChange]);
+  React.useEffect(function () {
+    if (disabled) {
+      return function () {};
+    }
+    triggerChange(isIntersecting);
+    return function () {
+      if (throttleDelay !== null) {
+        triggerChange.cancel();
+      }
+    };
+  }, [throttleDelay, isIntersecting, disabled, triggerChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: className,
+    ref: ref
+  }, children);
+};
+Detector.propTypes = propTypes$j;
+Detector.defaultProps = defaultProps$j;
+
+var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
+
+var propTypes$i = {
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  outline: PropTypes.bool,
+  className: PropTypes.string,
+  boxClassName: PropTypes.string,
+  children: PropTypes.node,
+  withInvertedColors: PropTypes.bool
+};
+var defaultProps$i = {
+  width: '100%',
+  height: '3em',
+  outline: false,
+  className: null,
+  boxClassName: null,
+  children: null,
+  withInvertedColors: true
+};
+var PlaceholderBlock = function PlaceholderBlock(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    outline = _ref.outline,
+    className = _ref.className,
+    boxClassName = _ref.boxClassName,
+    withInvertedColors = _ref.withInvertedColors,
+    children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$h.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$h.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
+    style: {
+      width: width,
+      height: height
+    }
+  }, 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.string.isRequired,
+  components: PropTypes.object.isRequired,
+  // eslint-disable-line
+  props: PropTypes.object,
+  // eslint-disable-line
+  isPlaceholder: PropTypes.bool,
+  className: PropTypes.string,
+  placeholderProps: PropTypes.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;
+  if (!name) {
+    return 'Bad component name';
+  }
+  if (isPlaceholder) {
+    // TODO: figure out what this did
+    // const PlaceholderComponent = Placeholders[pascalCase(name)];
+    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
+  }
+  var RealComponent = components[utils.pascalCase(name)];
+  if (!RealComponent) {
+    return 'Bad component';
+  }
+  return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
+    className: className
+  }));
+};
+ElementComponent.propTypes = propTypes$h;
+ElementComponent.defaultProps = defaultProps$h;
+
+var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder"};
+
+var propTypes$g = {
+  children: PropTypes.node,
+  withoutBorder: PropTypes.bool,
+  light: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$g = {
+  children: null,
+  withoutBorder: false,
+  light: false,
+  className: null
+};
+var Empty = function Empty(_ref) {
+  var children = _ref.children,
+    withoutBorder = _ref.withoutBorder,
+    light = _ref.light,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$g.container, _defineProperty(_defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light), className, className)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.middle
+  }, /*#__PURE__*/React.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;
+  var _ref2 = files || {},
+    _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;
+  var urls = formats.reduce(function (currentUrls, format) {
+    var finalFormat = isObject(format) ? format.format : format;
+    var formatExtension = isObject(format) ? format.name : format;
+    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
+    if (file !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+    var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
+    var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
+    if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+    return currentUrls;
+  }, []);
+  return urls;
+};
+var propTypes$f = {
+  fonts: core.PropTypes.fonts,
+  formats: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    name: PropTypes.string,
+    format: PropTypes.string
+  })]))
+};
+var defaultProps$f = {
+  fonts: [],
+  formats: ['eot', 'woff2', 'woff', {
+    name: 'otf',
+    format: 'opentype'
+  }, {
+    name: 'ttf',
+    format: 'truetype'
+  }, 'svg']
+};
+var FontFaces = function FontFaces(_ref4) {
+  var fonts = _ref4.fonts,
+    formats = _ref4.formats;
+  var fontFaces = (fonts || []).filter(function (it) {
+    return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
+  }).reduce(function (fontFontFaces, _ref5) {
+    var _ref5$name = _ref5.name,
+      name = _ref5$name === void 0 ? null : _ref5$name,
+      _ref5$media = _ref5.media,
+      media = _ref5$media === void 0 ? null : _ref5$media,
+      _ref5$variants = _ref5.variants,
+      variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+    if (name === null) {
+      return fontFontFaces;
+    }
+    var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
+    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
+      var weight = _ref6.weight,
+        style = _ref6.style,
+        _ref6$media = _ref6.media,
+        variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+      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;
+    })));
+  }, []).filter(function (it) {
+    return it !== null;
+  });
+  return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: fontFaces.join('\n')
+    }
+  }) : null;
+};
+FontFaces.propTypes = propTypes$f;
+FontFaces.defaultProps = defaultProps$f;
+
+var styles$f = {};
+
+var propTypes$e = {
+  thumbnail: PropTypes.node,
+  thumbnailAlign: PropTypes.oneOf(['top', 'center', 'bottom']),
+  children: PropTypes.node,
+  title: core.PropTypes.label,
+  className: PropTypes.string,
+  thumbnailClassName: PropTypes.string,
+  bodyClassName: PropTypes.string,
+  titleClassName: PropTypes.string
+};
+var defaultProps$e = {
+  thumbnail: null,
+  thumbnailAlign: 'top',
+  children: null,
+  title: null,
+  className: null,
+  thumbnailClassName: null,
+  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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
+  }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: thumbnail,
+    alt: title,
+    className: classNames(['me-3', styles$f.thumbnail, _defineProperty({
+      'align-self-start': thumbnailAlign === 'top',
+      'align-self-center': thumbnailAlign === 'center',
+      'align-self-end': thumbnailAlign === 'bottom'
+    }, thumbnailClassName, thumbnailClassName !== null)])
+  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+  }, title !== null ? /*#__PURE__*/React.createElement("h5", {
+    className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
+};
+Media.propTypes = propTypes$e;
+Media.defaultProps = defaultProps$e;
+
+/**
+ * Core
+ */
+PropTypes.shape({
+  listen: PropTypes.func.isRequired,
+  push: PropTypes.func.isRequired
+});
+PropTypes.shape({
+  pathname: PropTypes.string,
+  search: PropTypes.string
+});
+PropTypes.shape({
+  locale: PropTypes.string.isRequired,
+  formatMessage: PropTypes.func.isRequired
+});
+var defaultMessageContent = PropTypes.shape({
+  type: PropTypes.number,
+  value: PropTypes.string
+});
+var defaultMessage = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(defaultMessageContent)]);
+var message = PropTypes.shape({
+  id: PropTypes.string,
+  defaultMessage: defaultMessage.isRequired,
+  description: PropTypes.string
+});
+var text = PropTypes.oneOfType([message, PropTypes.string]);
+var label = PropTypes.oneOfType([message, PropTypes.node]);
+PropTypes.oneOf([401, 403, 404, 500]);
+PropTypes.oneOfType([PropTypes.shape({
+  current: PropTypes.any // eslint-disable-line react/forbid-prop-types
+}), PropTypes.func]);
+var target = PropTypes.oneOf(['_blank', '_self', '_parent']);
+var interaction = PropTypes.oneOf(['tap', 'swipe']);
+PropTypes.arrayOf(interaction);
+PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]));
+PropTypes.shape({
+  currentTime: PropTypes.number,
+  duration: PropTypes.number
+});
+
+/**
+ * Site
+ */
+PropTypes.shape({
+  id: PropTypes.number,
+  firstname: PropTypes.string,
+  lastname: PropTypes.string,
+  email: PropTypes.string,
+  gender: PropTypes.string,
+  birthdate: PropTypes.string
+});
+var menuItem = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  label: label,
+  url: PropTypes.string,
+  external: PropTypes.bool,
+  active: PropTypes.bool
+});
+PropTypes.arrayOf(menuItem);
+var breadcrumb = PropTypes.shape({
+  label: label,
+  url: PropTypes.string
+});
+PropTypes.arrayOf(breadcrumb);
+var device = PropTypes.shape({
+  id: PropTypes.string.isRequired
+});
+PropTypes.arrayOf(device);
+var modal = PropTypes.shape({
+  id: PropTypes.string.isRequired
+});
+PropTypes.arrayOf(modal);
+var panel = PropTypes.shape({
+  id: PropTypes.string.isRequired
+});
+PropTypes.arrayOf(panel);
+var button = PropTypes.shape({
+  label: label,
+  onClick: PropTypes.func
+});
+PropTypes.arrayOf(button);
+var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+PropTypes.oneOf(bootstrapThemeStrings);
+PropTypes.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
+PropTypes.oneOf(['lg', 'sm', null]);
+PropTypes.oneOf(['lg', 'sm', null]);
+PropTypes.oneOf(['start', 'end']);
+var component = PropTypes.oneOfType([PropTypes.object, PropTypes.func]);
+PropTypes.objectOf(component);
+
+/**
+ * Forms
+ */
+var errors = PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]);
+PropTypes.objectOf(errors);
+var selectOption = PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+  value: PropTypes.any,
+  // eslint-disable-line
+  label: label
+})]);
+PropTypes.arrayOf(selectOption);
+var formField = PropTypes.shape({
+  name: PropTypes.string,
+  component: component
+});
+PropTypes.arrayOf(formField);
+
+/**
+ * Medias
+ */
+var mediaMetadataShape = {
+  filename: PropTypes.string,
+  size: PropTypes.number,
+  mime: PropTypes.string
+};
+var mediaFile = PropTypes.shape({
+  id: PropTypes.string,
+  handle: PropTypes.string,
+  type: PropTypes.string,
+  mime: PropTypes.string,
+  url: PropTypes.string
+});
+var mediaShape = {
+  id: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  // .isRequired,
+  thumbnail_url: PropTypes.string,
+  name: PropTypes.string,
+  metadata: PropTypes.shape(_objectSpread({}, mediaMetadataShape)),
+  files: PropTypes.objectOf(mediaFile)
+};
+var media = PropTypes.shape(mediaShape);
+PropTypes.arrayOf(media);
+PropTypes.oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
+var imageMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['image', 'video']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes.number,
+    height: PropTypes.number
+  }))
+}));
+PropTypes.arrayOf(imageMedia);
+var fontMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['font']),
+  metadata: PropTypes.shape(_objectSpread({}, mediaMetadataShape))
+}));
+PropTypes.arrayOf(fontMedia);
+var videoMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['video']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes.number,
+    height: PropTypes.number,
+    duration: PropTypes.number
+  }))
+}));
+PropTypes.arrayOf(videoMedia);
+var audioMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['audio']),
+  metadata: PropTypes.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    duration: PropTypes.number
+  }))
+}));
+PropTypes.arrayOf(audioMedia);
+var closedCaptionsMedia = PropTypes.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes.oneOf(['closed-captions'])
+}));
+
+/**
+ * Style
+ */
+
+PropTypes.shape({
+  type: PropTypes.oneOf(['system', 'google', 'custom']),
+  name: PropTypes.string,
+  media: fontMedia
+});
+var font = PropTypes.oneOfType([PropTypes.object, PropTypes.string]);
+PropTypes.arrayOf(font);
+var textAlign = PropTypes.oneOf(['left', 'right', 'center']);
+var colorObject = PropTypes.shape({
+  color: PropTypes.string,
+  alpha: PropTypes.number
+});
+var color = PropTypes.oneOfType([colorObject, PropTypes.string]);
+var textStyle = PropTypes.shape({
+  fontFamily: font,
+  fontSize: PropTypes.number,
+  fontStyle: PropTypes.shape({
+    bold: PropTypes.bool,
+    italic: PropTypes.bool,
+    underline: PropTypes.bool,
+    upperCase: PropTypes.bool
+  }),
+  align: textAlign,
+  color: color,
+  letterSpacing: PropTypes.number,
+  lineHeight: PropTypes.number
+});
+var borderTypes = PropTypes.oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
+var shadowType = PropTypes.shape({
+  shadowDistance: PropTypes.number,
+  shadowBlur: PropTypes.number,
+  shadowColor: color
+});
+PropTypes.shape({
+  width: PropTypes.number,
+  style: borderTypes,
+  radius: PropTypes.number,
+  color: color
+});
+var boxStyle = PropTypes.shape({
+  backgroundColor: color,
+  borderRadius: PropTypes.number,
+  borderWidth: PropTypes.number,
+  borderColor: color,
+  borderStyle: borderTypes,
+  shadow: shadowType
+});
+PropTypes.shape({
+  top: PropTypes.number,
+  bottom: PropTypes.number
+});
+PropTypes.arrayOf(PropTypes.shape({
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  columns: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)])
+}));
+var objectFitSize = PropTypes.oneOf(['cover', 'contain', null]);
+PropTypes.shape({
+  fit: objectFitSize,
+  horizontalPosition: PropTypes.oneOf(['left', 'center', 'right']),
+  verticalPosition: PropTypes.oneOf(['top', 'center', 'bottom'])
+});
+
+/**
+ * Elements
+ */
+
+var textElement = PropTypes.shape({
+  body: PropTypes.string,
+  textStyle: textStyle
+});
+var headingElement = textElement;
+PropTypes.shape({
+  label: PropTypes.string,
+  textStyle: textStyle
+});
+var imageElement = PropTypes.shape({
+  media: imageMedia
+});
+PropTypes.arrayOf(imageElement);
+PropTypes.shape({
+  media: videoMedia,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  closedCaptions: closedCaptionsMedia,
+  withSeekBar: PropTypes.bool,
+  withControls: PropTypes.bool
+});
+var visualElement = PropTypes.shape({
+  media: imageMedia
+});
+PropTypes.arrayOf(visualElement);
+PropTypes.shape({
+  media: audioMedia,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  closedCaptions: closedCaptionsMedia,
+  withPlayPause: PropTypes.bool
+});
+PropTypes.shape({
+  media: closedCaptionsMedia
+});
+var backgroundElement = PropTypes.shape({
+  color: color,
+  image: imageMedia,
+  video: videoMedia
+});
+var imageElementWithCaption = PropTypes.shape({
+  image: imageMedia,
+  caption: textElement
+});
+PropTypes.arrayOf(imageElementWithCaption);
+var stackDirection = PropTypes.oneOf(['horizontal', 'vertical']);
+var stackAlign = PropTypes.oneOf(['start', 'center', 'end']);
+var stackSpacing = PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['between', 'evenly', 'around'])]);
+PropTypes.shape({
+  direction: stackDirection,
+  align: stackAlign,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  spacing: stackSpacing,
+  reverse: PropTypes.bool
+});
+PropTypes.shape({
+  layout: PropTypes.arrayOf(PropTypes.string),
+  spacing: PropTypes.number
+});
+var geoPosition = PropTypes.shape({
+  lat: PropTypes.number,
+  lng: PropTypes.number
+});
+var markerShape = {
+  id: PropTypes.number,
+  geoPosition: geoPosition,
+  title: headingElement,
+  subtitle: headingElement,
+  description: textElement
+};
+var marker = PropTypes.shape(_objectSpread({}, markerShape));
+PropTypes.arrayOf(marker);
+var markerWithImage = PropTypes.shape(_objectSpread(_objectSpread({}, markerShape), {}, {
+  image: imageMedia
+}));
+PropTypes.arrayOf(markerWithImage);
+var answerShape = {
+  id: PropTypes.string,
+  label: textElement
+};
+var answer = PropTypes.shape(_objectSpread({}, answerShape));
+var quizAnswer = PropTypes.shape(_objectSpread(_objectSpread({}, answerShape), {}, {
+  good: PropTypes.bool
+}));
+PropTypes.arrayOf(answer);
+PropTypes.arrayOf(quizAnswer);
+var callToActionTypes = PropTypes.oneOf(['swipe-up', 'button']);
+var callToAction = PropTypes.shape({
+  active: PropTypes.bool,
+  type: callToActionTypes,
+  url: PropTypes.string,
+  label: textElement,
+  buttonStyle: boxStyle
+});
+PropTypes.shape({
+  active: PropTypes.bool,
+  label: textElement,
+  boxStyle: boxStyle
+});
+PropTypes.shape({
+  active: PropTypes.bool
+});
+var speaker = PropTypes.shape({
+  id: PropTypes.string,
+  name: PropTypes.string,
+  avatar: imageMedia,
+  side: PropTypes.oneOf(['left', 'right']),
+  color: color
+});
+var speakers = PropTypes.arrayOf(speaker);
+var conversationMessage = PropTypes.shape({
+  speaker: PropTypes.string,
+  message: PropTypes.string,
+  image: imageMedia,
+  audio: audioMedia,
+  timingOverrides: PropTypes.shape({
+    enabled: PropTypes.bool,
+    appearDelay: PropTypes.number,
+    writingStateDuration: PropTypes.number
+  })
+});
+var conversationMessages = PropTypes.arrayOf(conversationMessage);
+PropTypes.shape({
+  speakers: speakers,
+  textStyle: textStyle,
+  messages: conversationMessages
+});
+
+/**
+ * Definitions
+ */
+
+var fieldShape = {
+  name: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  label: text
+};
+var field = PropTypes.shape(_objectSpread(_objectSpread({}, fieldShape), {}, {
+  isSection: PropTypes.bool,
+  fields: PropTypes.arrayOf(PropTypes.shape(fieldShape))
+}));
+var fields = PropTypes.arrayOf(field);
+var screenDefinition = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['screen']).isRequired,
+  title: text.isRequired,
+  layouts: PropTypes.arrayOf(PropTypes.string),
+  fields: fields
+});
+PropTypes.arrayOf(screenDefinition);
+var fieldDefinition = PropTypes.shape({
+  id: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(['field']).isRequired,
+  title: text.isRequired,
+  fields: fields
+});
+PropTypes.arrayOf(fieldDefinition);
+
+/**
+ * Components
+ */
+var storyComponentShape = {
+  type: PropTypes.string.isRequired
+};
+var storyComponent = PropTypes.shape(_objectSpread({}, storyComponentShape));
+PropTypes.arrayOf(storyComponent);
+var screenComponent = PropTypes.shape(_objectSpread({}, storyComponentShape));
+var screenComponents = PropTypes.arrayOf(screenComponent);
+
+/**
+ * Theme
+ */
+var theme = PropTypes.shape({
+  id: PropTypes.string,
+  textStyles: PropTypes.objectOf(textStyle),
+  // renamed to textstyles
+  background: backgroundElement,
+  colors: PropTypes.objectOf(color),
+  components: screenComponents
+});
+PropTypes.shape(_objectSpread({
+  logo: imageMedia
+}, theme));
+
+/**
+ * Branding
+ */
+
+// export const branding = PropTypes.shape({
+//     logo: imageMedia,
+//     primaryColor: color,
+//     secondaryColor: color,
+//     backgroundColor: color,
+//     textStyle,
+// });
+
+/**
+ * Metadata
+ */
+var metadata = PropTypes.shape({
+  description: PropTypes.string,
+  shareUrl: PropTypes.string,
+  shareImage: imageMedia,
+  favIcon: imageMedia
+});
+var tag = PropTypes.shape({
+  label: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+});
+PropTypes.arrayOf(tag);
+
+/**
+ * Story
+ */
+PropTypes.shape({
+  id: PropTypes.string,
+  theme: theme,
+  components: screenComponents,
+  metadata: metadata
+});
+
+/**
+ * Render
+ */
+var deviceScreen = PropTypes.shape({
+  name: PropTypes.string.isRequired,
+  mediaQuery: PropTypes.string
+});
+PropTypes.arrayOf(deviceScreen);
+PropTypes.shape({
+  screen: PropTypes.string,
+  screens: PropTypes.arrayOf(PropTypes.string),
+  width: PropTypes.number,
+  height: PropTypes.number,
+  landscape: PropTypes.bool
+});
+PropTypes.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+
+/**
+ * Screens
+ */
+
+PropTypes.shape({
+  width: PropTypes.number,
+  height: PropTypes.number
+});
+PropTypes.shape({
+  width: PropTypes.number,
+  height: PropTypes.number,
+  url: PropTypes.string,
+  target: target,
+  iframe: PropTypes.string,
+  image: imageMedia
+});
+PropTypes.shape({
+  src: PropTypes.string,
+  track: PropTypes.string,
+  trackLng: PropTypes.number,
+  controls: PropTypes.bool
+});
+var slide = PropTypes.shape({
+  image: imageMedia,
+  text: PropTypes.string
+});
+PropTypes.arrayOf(slide);
+
+// export const imageStyle = PropTypes.shape({
+//     alt: PropTypes.string,
+//     fit: PropTypes.object,
+// });
+
+PropTypes.shape({});
+
+/**
+ * Transitions
+ */
+
+var transitionName = PropTypes.oneOf(['fade', 'scale', 'slide']);
+var transitionParams = {
+  duration: PropTypes.number,
+  easing: PropTypes.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
+};
+var transition = PropTypes.oneOfType([transitionName.isRequired, PropTypes.shape(_objectSpread({
+  name: transitionName.isRequired
+}, transitionParams))]);
+PropTypes.shape({
+  "in": transition,
+  out: transition
+});
+
+/**
+ * Search
+ */
+
+var searchFilter = PropTypes.shape({
+  type: PropTypes.string,
+  value: PropTypes.oneOf([PropTypes.string, PropTypes.number])
+});
+PropTypes.arrayOf(searchFilter);
+
+/**
+ * Payments
+ */
+
+var paymentItem = PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  date: PropTypes.string,
+  type: PropTypes.string,
+  invoice_link: PropTypes.string,
+  amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+});
+PropTypes.arrayOf(paymentItem);
+
+/**
+ * Page Metadada
+ */
+
+var pageMetadata = PropTypes.shape({
+  canonical: PropTypes.string,
+  description: PropTypes.string,
+  keywords: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  image: PropTypes.shape({
+    url: PropTypes.string
+  }),
+  favicon: PropTypes.shape({
+    url: PropTypes.string
+  }),
+  rssUrl: PropTypes.string,
+  atomUrl: PropTypes.string,
+  microformats: PropTypes.arrayOf(PropTypes.shape({}))
+});
+PropTypes.shape({
+  name: textElement,
+  avatar: PropTypes.shape({
+    url: PropTypes.string
+  })
+});
+PropTypes.shape({
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  name: PropTypes.string
+});
+var badge = PropTypes.shape({
+  label: textElement,
+  buttonStyle: boxStyle
+});
+PropTypes.shape({
+  active: PropTypes.bool,
+  placeholder: textElement,
+  textStyle: textStyle,
+  boxStyle: boxStyle
+});
+PropTypes.shape({
+  badge: badge
+});
+PropTypes.shape({
+  callToAction: callToAction
+});
+PropTypes.shape();
+PropTypes.shape({
+  file: closedCaptionsMedia,
+  textStyle: textStyle,
+  boxStyle: boxStyle
+});
+
+/* eslint-disable react/no-array-index-key */
+var propTypes$d = {
+  title: PropTypes.string,
+  url: PropTypes.string,
+  metadata: pageMetadata,
+  fullTitle: PropTypes.string,
+  suffix: PropTypes.string,
+  children: PropTypes.node
+};
+var defaultProps$d = {
+  title: null,
+  url: null,
+  metadata: null,
+  fullTitle: null,
+  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;
+  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;
+  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;
+  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;
+  var _ref5 = favicon || {},
+    _ref5$url = _ref5.url,
+    faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
+  return /*#__PURE__*/React.createElement(reactHelmet.Helmet, null, /*#__PURE__*/React.createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    content: description
+  }) : null, language !== null ? /*#__PURE__*/React.createElement("meta", {
+    name: "language",
+    content: language
+  }) : null, keywords !== null && isString(keywords) ? /*#__PURE__*/React.createElement("meta", {
+    name: "keywords",
+    content: keywords
+  }) : null, keywords !== null && isArray(keywords) ? /*#__PURE__*/React.createElement("meta", {
+    name: "keywords",
+    content: keywords.join(',')
+  }) : null, canonical !== null ? /*#__PURE__*/React.createElement("link", {
+    rel: "canonical",
+    href: canonical
+  }) : null, faviconUrl !== null ? /*#__PURE__*/React.createElement("link", {
+    rel: "icon",
+    type: "image/png",
+    href: faviconUrl
+  }) : null, rssUrl !== null ? /*#__PURE__*/React.createElement("link", {
+    rel: "alternate",
+    type: "application/rss+xml",
+    href: rssUrl
+  }) : null, atomUrl !== null ? /*#__PURE__*/React.createElement("link", {
+    rel: "alternate",
+    type: "application/atom+xml",
+    href: atomUrl
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:image",
+    content: imageUrl
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:image:url",
+    content: imageUrl
+  }) : null, imageWidth !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:image:width",
+    content: imageWidth
+  }) : null, imageHeight !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:image:height",
+    content: imageHeight
+  }) : null, /*#__PURE__*/React.createElement("meta", {
+    property: "og:title",
+    content: realTitle
+  }), description !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:description",
+    content: description
+  }) : null, url !== null ? /*#__PURE__*/React.createElement("meta", {
+    property: "og:url",
+    content: url
+  }) : null, /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:card",
+    content: imageUrl !== null ? 'summary_large_image' : 'summary'
+  }), /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:title",
+    content: realTitle
+  }), description !== null ? /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:description",
+    content: description
+  }) : null, imageUrl !== null ? /*#__PURE__*/React.createElement("meta", {
+    name: "twitter:image",
+    content: imageUrl
+  }) : null, (microformats || []).map(function (it) {
+    return /*#__PURE__*/React.createElement("script", {
+      type: "application/ld+json",
+      id: "".concat(it["@type"], "-").concat(it.identifier),
+      key: "microformat-".concat(it["@type"], "-").concat(it.identifier)
+    }, JSON.stringify(it));
+  }), children);
+};
+Meta.propTypes = propTypes$d;
+Meta.defaultProps = defaultProps$d;
+
+var styles$e = {"container":"micromag-core-partials-slideshow-container","items":"micromag-core-partials-slideshow-items","item":"micromag-core-partials-slideshow-item","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
+
+var propTypes$c = {
+  items: PropTypes.arrayOf(PropTypes.node),
+  auto: PropTypes.bool,
+  delay: PropTypes.number,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+  children: PropTypes.node
+};
+var defaultProps$c = {
+  items: [],
+  auto: true,
+  delay: 5000,
+  width: null,
+  height: null,
+  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;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  React.useEffect(function () {
+    var id = null;
+    if (auto) {
+      id = setTimeout(function () {
+        if (index < items.length - 1) {
+          setIndex(function (i) {
+            return i + 1;
+          });
+        } else {
+          setIndex(0);
+        }
+      }, delay);
+    }
+    return function () {
+      clearTimeout(id);
+    };
+  }, [index, items, auto, delay]);
+  var style = {
+    width: width,
+    height: height
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$e.container, _defineProperty({}, className, className)]),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$e.items
+  }, items.map(function (it, i) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "slide-".concat(i + 1),
+      className: classNames([styles$e.item, _defineProperty(_defineProperty(_defineProperty({}, styles$e.prev, i < index), styles$e.current, i === index), styles$e.next, i > index)])
+    }, it);
+  })), children);
+};
+Slideshow.propTypes = propTypes$c;
+Slideshow.defaultProps = defaultProps$c;
+
+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;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faAd.faAd,
+    className: styles$d.icon
+  }));
+};
+
+/* eslint-disable react/prop-types */
+var AdImage = function AdImage(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faImage.faImage,
+    className: styles$d.icon
+  }));
+};
+
+/* 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;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faMusic.faMusic,
+    className: styles$d.icon
+  }));
+};
+
+var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
+
+var propTypes$b = {
+  lines: PropTypes.number,
+  lineMargin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  fontSize: PropTypes.number,
+  className: PropTypes.string,
+  withInvertedColors: PropTypes.bool
+};
+var defaultProps$b = {
+  lines: 1,
+  lineMargin: 1,
+  width: '100%',
+  height: null,
+  fontSize: 16,
+  className: null,
+  withInvertedColors: true
+};
+var PlaceholderText = function PlaceholderText(_ref) {
+  var lines = _ref.lines,
+    lineMargin = _ref.lineMargin,
+    width = _ref.width,
+    height = _ref.height,
+    fontSize = _ref.fontSize,
+    className = _ref.className,
+    withInvertedColors = _ref.withInvertedColors;
+  var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
+  var oddWidth = isNumber(width) ? width * 0.9 : '80%';
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$c.container, _defineProperty(_defineProperty({}, className, className), styles$c.withInvertedColors, withInvertedColors)])
+  }, _toConsumableArray(Array(lines)).map(function (e, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "line-".concat(index),
+      className: styles$c.line,
+      style: {
+        width: index % 2 === 0 ? width : oddWidth,
+        height: lineHeight,
+        marginTop: lineMargin,
+        marginBottom: lineMargin
+      }
+    });
+  }));
+};
+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;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    outline: true,
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+    line: 1,
+    height: "0.1em"
+  }));
+};
+
+var _excluded$2 = ["width", "height", "className"];
+var Image = function Image(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: width,
+    height: height,
+    className: className
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faImage.faImage,
+    className: styles$d.icon
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var Line = function Line(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.shortText]),
+    height: 0.2,
+    lines: 1
+  }));
+};
+
+var styles$b = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
+
+var Map = function Map(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: "100%",
+    height: "100%",
+    className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)])
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
+    className: styles$b.icon
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
+    className: styles$b.icon
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
+    className: styles$b.icon
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
+    className: styles$b.icon
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var MapPath = function MapPath(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: "100%",
+    height: "70%",
+    className: classNames([props.className, styles$d.mapPath])
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faMapMarkedAlt.faMapMarkedAlt,
+    size: "lg",
+    className: styles$d.icon
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var Quote = function Quote(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.subtitle]),
+    height: 0.5,
+    lines: 6
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var ShortText = function ShortText(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.shortText]),
+    height: 0.2,
+    lines: 2
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var Subtitle = function Subtitle(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.subtitle]),
+    height: 0.3,
+    lines: 1
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+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;
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    height: height,
+    lines: lines,
+    lineMargin: lineMargin,
+    className: classNames([className, styles$d.text])
+  }));
+};
+
+/* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
+var Timeline = function Timeline(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.timeline])
+  }));
+};
+
+/* 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;
+  return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
+    className: classNames([props.className, styles$d.title]),
+    height: height,
+    lines: lines,
+    lineMargin: lineMargin
+  }));
+};
+
+/* eslint-disable react/prop-types */
+var Video = function Video(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faVideo.faVideo,
+    className: styles$d.icon
+  }));
+};
+
+var styles$a = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
+
+var Video360 = function Video360(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
+    boxClassName: styles$a.box
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faVideo.faVideo,
+    className: styles$a.icon
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$a.label
+  }, "360"));
+};
+
+/* eslint-disable react/prop-types */
+var VideoLoop = function VideoLoop(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    width: width,
+    height: height,
+    className: className
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faPlay.faPlay,
+    className: styles$d.icon
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faRedo.faRedo,
+    className: styles$d.icon
+  }));
+};
+
+var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
+
+var propTypes$a = {
+  width: PropTypes.number,
+  height: PropTypes.number,
+  fit: PropTypes.oneOf([null, 'cover', 'contain']),
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  className: PropTypes.string,
+  children: PropTypes.node.isRequired
+};
+var defaultProps$a = {
+  width: null,
+  height: null,
+  fit: null,
+  screenWidth: 320,
+  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;
+  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;
+  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;
+        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, ") 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;
+  var devicePixelRatio = hooks.useDevicePixelRatio();
+  var screenSize = React.useMemo(function () {
+    return {
+      screen: 'mobile',
+      screens: ['mobile'],
+      width: screenWidth,
+      height: screenHeight,
+      resolution: frameScale !== null ? frameScale * devicePixelRatio : devicePixelRatio
+    };
+  }, [screenWidth, screenHeight, frameScale]);
+  var hasFrameSize = frameWidth !== null && frameHeight !== null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    ref: !hasSize ? refContainer : null
+  }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
+    className: styles$9.frame,
+    style: {
+      width: frameWidth,
+      height: frameHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$9.screen,
+    style: {
+      width: screenWidth,
+      height: screenHeight,
+      transform: screenTransform
+    }
+  }, /*#__PURE__*/React.createElement(contexts.ScreenSizeProvider, {
+    size: screenSize
+  }, /*#__PURE__*/React.cloneElement(children, {
+    width: screenWidth,
+    height: screenHeight
+  })))) : null);
+};
+ScreenSizer.propTypes = propTypes$a;
+ScreenSizer.defaultProps = defaultProps$a;
+
+var styles$8 = {"container":"micromag-core-screens-screen-container"};
+
+var propTypes$9 = {
+  screen: core.PropTypes.storyComponent.isRequired,
+  renderContext: core.PropTypes.renderContext,
+  screenState: PropTypes.string,
+  index: PropTypes.number,
+  active: PropTypes.bool,
+  preload: PropTypes.bool,
+  current: PropTypes.bool,
+  component: PropTypes.node,
+  components: core.PropTypes.components,
+  className: PropTypes.string,
+  mediaRef: PropTypes.func
+};
+var defaultProps$9 = {
+  active: true,
+  renderContext: null,
+  screenState: null,
+  index: null,
+  current: false,
+  preload: true,
+  component: null,
+  components: null,
+  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,
+    preload = _ref.preload,
+    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;
+  var CustomScreenComponent = components !== null ? utils.getComponentFromName(type, components) || null : null;
+  var ContextScreenComponent = contexts.useScreenComponent(type);
+  var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
+  return /*#__PURE__*/React.createElement(contexts.ScreenProvider, {
+    data: screen,
+    renderContext: renderContext,
+    screenState: screenState
+  }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
+    index: index,
+    active: active,
+    current: current,
+    preload: preload,
+    mediaRef: mediaRef
+  }))) : /*#__PURE__*/React.createElement("div", {
+    className: className
+  }, component));
+};
+Screen.propTypes = propTypes$9;
+Screen.defaultProps = defaultProps$9;
+var Screen$1 = /*#__PURE__*/React.memo(Screen);
+
+var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
+
+var _excluded$1 = ["screen", "layout", "screenWidth", "screenHeight", "screenState", "withSize", "className"];
+var propTypes$8 = {
+  screen: core.PropTypes.component.isRequired,
+  layout: PropTypes.string,
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  screenState: PropTypes.string,
+  withSize: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps$8 = {
+  layout: undefined,
+  screenState: null,
+  screenWidth: 100,
+  screenHeight: 150,
+  withSize: false,
+  className: null
+};
+var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
+  var screen = _ref.screen,
+    layout = _ref.layout,
+    screenWidth = _ref.screenWidth,
+    screenHeight = _ref.screenHeight,
+    screenState = _ref.screenState,
+    withSize = _ref.withSize,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
+    screen: screen,
+    renderContext: "placeholder",
+    screenState: screenState,
+    layout: layout,
+    className: classNames([styles$7.screen, _defineProperty({}, className, !withSize)])
+  }, props));
+  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight
+  }, screenElement) : screenElement;
+};
+ScreenPlaceholder.propTypes = propTypes$8;
+ScreenPlaceholder.defaultProps = defaultProps$8;
+var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
+
+var styles$6 = {"screen":"micromag-core-screens-preview-screen"};
+
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "fit", "hidden"];
+var propTypes$7 = {
+  screen: core.PropTypes.component.isRequired,
+  screenState: PropTypes.string,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  screenWidth: PropTypes.number,
+  screenHeight: PropTypes.number,
+  className: PropTypes.string,
+  withSize: PropTypes.bool,
+  hidden: PropTypes.bool
+};
+var defaultProps$7 = {
+  screenState: null,
+  width: undefined,
+  height: undefined,
+  screenWidth: undefined,
+  screenHeight: undefined,
+  className: null,
+  withSize: false,
+  hidden: 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,
+    fit = _ref.fit,
+    hidden = _ref.hidden,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
+    screen: screen,
+    renderContext: "preview",
+    screenState: screenState,
+    width: !withSize ? width : undefined,
+    height: !withSize ? height : undefined,
+    className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
+  }, props));
+  var element = !hidden ? screenElement : /*#__PURE__*/React.createElement("div", null);
+  var screenWithSize = withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    width: width,
+    height: height,
+    fit: fit
+  }, element) : element;
+  return screenWithSize;
+};
+ScreenPreview.propTypes = propTypes$7;
+ScreenPreview.defaultProps = defaultProps$7;
+var Preview = /*#__PURE__*/React.memo(ScreenPreview);
+
+var styles$5 = {"container":"micromag-core-placeholders-conversation-container","icon":"micromag-core-placeholders-conversation-icon","message":"micromag-core-placeholders-conversation-message","placeholderMessage0":"micromag-core-placeholders-conversation-placeholderMessage0","placeholderMessage1":"micromag-core-placeholders-conversation-placeholderMessage1","placeholderMessage2":"micromag-core-placeholders-conversation-placeholderMessage2","placeholderMessage3":"micromag-core-placeholders-conversation-placeholderMessage3"};
+
+var Conversation = function Conversation() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles$5.container
+  }, _toConsumableArray(Array(4)).map(function (e, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: "message-".concat(idx + 1),
+      className: classNames([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
+    });
+  }), /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCommentDots.faCommentDots,
+    className: styles$5.icon
+  }));
+};
+
+/* 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;
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    outline: true,
+    width: width,
+    height: height,
+    className: className
+  });
+};
+
+var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","block":"micromag-core-placeholders-quiz-answer-block","answer":"micromag-core-placeholders-quiz-answer-answer","answerIcon":"micromag-core-placeholders-quiz-answer-answerIcon","good":"micromag-core-placeholders-quiz-answer-good"};
+
+var Answer$1 = function Answer(_ref) {
+  var _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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container, _defineProperty(_defineProperty({}, className, className !== null), styles$4.good, good)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$4.answer
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$4.answerIcon,
+    icon: good ? faCheck.faCheck : faTimes.faTimes
+  })), /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    outline: true,
+    width: width,
+    height: height,
+    className: styles$4.block
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+    line: 1,
+    height: "0.2em"
+  })));
+};
+
+var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item"};
+
+var Title = function Title(props) {
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
+    width: "100%",
+    height: "100%",
+    className: classNames([styles$3.container, _defineProperty({}, props.className, props.className !== null)]),
+    boxClassName: styles$3.box
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$3.icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$3.icon
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$3.item
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faCircle.faCircle,
+    className: styles$3.icon
+  })));
+};
+
+var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container","block":"micromag-core-placeholders-survey-answer-block","percent":"micromag-core-placeholders-survey-answer-percent","percentIcon":"micromag-core-placeholders-survey-answer-percentIcon"};
+
+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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
+  }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
+    outline: true,
+    width: width,
+    height: height,
+    className: styles$2.block
+  }, /*#__PURE__*/React.createElement(PlaceholderText, {
+    line: 1,
+    height: "0.2em"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$2.percent
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    className: styles$2.percentIcon,
+    icon: faPercent.faPercent
+  })));
+};
+
+var Placeholders = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AdFrame: AdFrame,
+    AdImage: AdImage,
+    Audio: Audio,
+    Button: Button,
+    Conversation: Conversation,
+    Image: Image,
+    InputText: InputText,
+    Line: Line,
+    Map: Map,
+    MapPath: MapPath,
+    QuizAnswer: Answer$1,
+    Quote: Quote,
+    ShareOptions: Title,
+    ShortText: ShortText,
+    Subtitle: Subtitle,
+    SurveyAnswer: Answer,
+    Text: TextPlaceholder,
+    Timeline: Timeline,
+    Title: Title$1,
+    Video: Video,
+    Video360: Video360,
+    VideoLoop: VideoLoop
+});
+
+/* eslint-disable react/jsx-props-no-spreading */
+var propTypes$6 = {
+  children: PropTypes.node,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  preview: PropTypes.node,
+  empty: PropTypes.node,
+  emptyLabel: core.PropTypes.label,
+  isEmpty: PropTypes.bool,
+  placeholderProps: PropTypes.object,
+  // eslint-disable-line
+  emptyClassName: PropTypes.string
+};
+var defaultProps$6 = {
+  children: null,
+  placeholder: null,
+  preview: null,
+  empty: null,
+  emptyLabel: null,
+  isEmpty: false,
+  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;
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit,
+    isPreview = _useScreenRenderConte.isPreview;
+  if (isPlaceholder) {
+    var PlaceholderComponent = isString(placeholder) ? utils.getComponentFromName(placeholder, Placeholders) : null;
+    return PlaceholderComponent !== null ? /*#__PURE__*/React.createElement(PlaceholderComponent, placeholderProps) : placeholder;
+  }
+  if (isEdit && isEmpty) {
+    return empty !== null ? empty : /*#__PURE__*/React.createElement(Empty, {
+      className: emptyClassName
+    }, emptyLabel);
+  }
+  if (isPreview && preview !== null) {
+    return preview;
+  }
+  return children;
+};
+ScreenElement.propTypes = propTypes$6;
+ScreenElement.defaultProps = defaultProps$6;
+
+var styles$1 = {"container":"micromag-core-screens-container","screen":"micromag-core-screens-screen","visible":"micromag-core-screens-visible"};
+
+var propTypes$5 = {
+  screens: core.PropTypes.storyComponents.isRequired,
+  screen: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$5 = {
+  screen: null,
+  className: null
+};
+var Screens = function Screens(_ref) {
+  var screens = _ref.screens,
+    screenId = _ref.screen,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$1.container, _defineProperty({}, className, className)])
+  }, screens.map(function (screen) {
+    var id = screen.id;
+    return /*#__PURE__*/React.createElement(Screen$1, {
+      key: "screen-".concat(id),
+      screen: screen,
+      className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
+    });
+  }));
+};
+Screens.propTypes = propTypes$5;
+Screens.defaultProps = defaultProps$5;
+
+var styles = {"container":"micromag-core-transitions-transition-container","fullscreen":"micromag-core-transitions-transition-fullscreen"};
+
+var propTypes$4 = {
+  fullscreen: PropTypes.bool,
+  from: PropTypes.objectOf(PropTypes.any),
+  // eslint-disable-line react/forbid-prop-types
+  to: PropTypes.objectOf(PropTypes.any),
+  // eslint-disable-line react/forbid-prop-types
+  playing: PropTypes.bool,
+  direction: PropTypes.oneOf(['in', 'out']),
+  delay: PropTypes.number,
+  reversible: PropTypes.bool,
+  duration: PropTypes.number,
+  easing: PropTypes.func,
+  config: PropTypes.shape({
+    mass: PropTypes.number,
+    friction: PropTypes.number,
+    tension: PropTypes.number
+  }),
+  children: PropTypes.node,
+  className: PropTypes.string,
+  onStart: PropTypes.func,
+  onComplete: PropTypes.func
+};
+var defaultProps$4 = {
+  fullscreen: false,
+  from: null,
+  to: null,
+  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 fullscreen = _ref.fullscreen,
+    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(_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 = 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: finalPlaying ? from : to,
+      to: finalPlaying ? to : from,
+      immediate: immediate,
+      delay: withDelay ? delay : null,
+      reset: reset,
+      onStart: onStart,
+      onRest: onComplete,
+      config: finalConfig !== null ? finalConfig : {
+        duration: immediate ? 0 : finalDuration
+      }
+    };
+    // Reversible always toggles between from-to (playing) to-from (!playing)
+    if (finalPlaying || reversible) {
+      setSpringProps.start(props);
+    }
+    // console.log('fx', { reset, finalPlaying, immediate, reversible });
+  }, [playing, direction, delay, duration, reversible, easing, config, from, to, setSpringProps, onStart, onComplete]);
+  return /*#__PURE__*/React.createElement(web.animated.div, {
+    style: _objectSpread({}, springProps),
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.fullscreen, fullscreen)])
+  }, children);
+}
+Transition.propTypes = propTypes$4;
+Transition.defaultProps = defaultProps$4;
+
+/* eslint-disable react/jsx-props-no-spreading */
+function Fade(props) {
+  var from = React.useMemo(function () {
+    return {
+      opacity: 0
+    };
+  }, []);
+  var to = React.useMemo(function () {
+    return {
+      opacity: 1
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
+    from: from,
+    to: to
+  }));
+}
+
+/* eslint-disable react/jsx-props-no-spreading */
+function Scale(props) {
+  var from = React.useMemo(function () {
+    return {
+      transform: 'scale(0)'
+    };
+  }, []);
+  var to = React.useMemo(function () {
+    return {
+      transform: 'scale(1)'
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Transition, Object.assign({}, props, {
+    from: from,
+    to: to
+  }));
+}
+
+var TransitionComponents = {
+  Fade: Fade,
+  Scale: Scale
+};
+
+var propTypes$3 = {
+  fullscreen: PropTypes.bool,
+  playing: PropTypes.bool,
+  delay: PropTypes.number,
+  transitions: core.PropTypes.transitions,
+  onComplete: PropTypes.func,
+  disabled: PropTypes.bool,
+  children: PropTypes.node
+};
+var defaultProps$3 = {
+  fullscreen: false,
+  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,
+    onComplete = _ref.onComplete,
+    disabled = _ref.disabled,
+    children = _ref.children;
+  var _useScreenSize = contexts.useScreenSize(),
+    _useScreenSize$landsc = _useScreenSize.landscape,
+    landscape = _useScreenSize$landsc === void 0 ? true : _useScreenSize$landsc;
+  var finalPlaying = playing || landscape;
+  var finalTransitions = {
+    "in": null,
+    out: null
+  };
+  var defaultTransitions = {
+    "in": 'fade',
+    out: 'fade'
+  };
+  var transitionsObject = transitions !== null ? transitions : defaultTransitions;
+  Object.keys(transitionsObject).forEach(function (transitionKey) {
+    var currentTransition = transitionsObject[transitionKey];
+    finalTransitions[transitionKey] = typeof currentTransition === 'string' ? {
+      name: currentTransition
+    } : 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;
+  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;
+  var _ref3 = finalTransitionOut || {},
+    _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(_objectSpread({}, finalTransitionIn), {}, {
+    name: undefined,
+    delay: delay,
+    onComplete: onComplete
+  }) : null;
+  var transitionOutProps = finalTransitionOut !== null ? _objectSpread(_objectSpread({}, finalTransitionOut), {}, {
+    name: undefined,
+    delay: delay,
+    onComplete: onComplete
+  }) : null;
+  var renderTransitionOut = TransitionOut !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionOut, Object.assign({
+    fullscreen: fullscreen,
+    playing: finalPlaying,
+    direction: "out"
+  }, transitionOutProps), children) : children;
+  return TransitionIn !== null && !disabled ? /*#__PURE__*/React.createElement(TransitionIn, Object.assign({
+    fullscreen: fullscreen,
+    playing: finalPlaying,
+    direction: !sameTransitionInOut ? 'in' : null
+  }, transitionInProps), renderTransitionOut) : renderTransitionOut;
+}
+Transitions.propTypes = propTypes$3;
+Transitions.defaultProps = defaultProps$3;
+
+var propTypes$2 = {
+  transitions: core.PropTypes.transitions,
+  stagger: PropTypes.number,
+  playing: PropTypes.bool,
+  disabled: PropTypes.bool,
+  delay: PropTypes.number,
+  fullscreen: PropTypes.bool,
+  children: PropTypes.node
+};
+var defaultProps$2 = {
+  transitions: null,
+  stagger: 0,
+  playing: false,
+  disabled: false,
+  delay: 0,
+  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;
+  var validIndex = 0;
+  var elements = React.Children.map(children, function (child) {
+    if (!child) {
+      return null;
+    }
+    var _child$type = child.type,
+      type = _child$type === void 0 ? null : _child$type;
+    var _ref2 = type || {},
+      _ref2$withoutTransiti = _ref2.withoutTransitionsWrapper,
+      withoutTransitionsWrapper = _ref2$withoutTransiti === void 0 ? false : _ref2$withoutTransiti;
+    if (disabled || withoutTransitionsWrapper) {
+      return child;
+    }
+    var el = /*#__PURE__*/React.createElement(Transitions, {
+      transitions: transitions,
+      delay: delay + validIndex * stagger,
+      playing: playing,
+      fullscreen: fullscreen
+    }, child);
+    validIndex += 1;
+    return el;
+  });
+  return elements;
+};
+TransitionsStagger.propTypes = propTypes$2;
+TransitionsStagger.defaultProps = defaultProps$2;
+
+var propTypes$1 = {
+  selector: PropTypes.string,
+  highlightSelector: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+};
+var defaultProps$1 = {
+  selector: null,
+  highlightSelector: 'mark',
+  style: null
+};
+var HighlightStyle = function HighlightStyle(_ref) {
+  var selector = _ref.selector,
+    highlightSelector = _ref.highlightSelector,
+    style = _ref.style;
+  return style !== null ? /*#__PURE__*/React.createElement("style", {
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: "".concat([selector, highlightSelector].filter(function (it) {
+        return it !== null;
+      }).join(' '), "{").concat(utils.convertStyleToString(style), "}")
+    }
+  }) : null;
+};
+HighlightStyle.propTypes = propTypes$1;
+HighlightStyle.defaultProps = defaultProps$1;
+
+var propTypes = {
+  selector: PropTypes.string,
+  linkSelector: PropTypes.string,
+  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))
+};
+var defaultProps = {
+  selector: null,
+  linkSelector: 'a',
+  style: null
+};
+var LinkStyle = function LinkStyle(_ref) {
+  var selector = _ref.selector,
+    linkSelector = _ref.linkSelector,
+    style = _ref.style;
+  return style !== null ? /*#__PURE__*/React.createElement("style", {
+    type: "text/css",
+    dangerouslySetInnerHTML: {
+      __html: "".concat([selector, linkSelector].filter(function (it) {
+        return it !== null;
+      }).join(' '), "{").concat(utils.convertStyleToString(style), "}")
+    }
+  }) : null;
+};
+LinkStyle.propTypes = propTypes;
+LinkStyle.defaultProps = defaultProps;
+
+exports.ArrowIcon = ArrowIcon;
+exports.BackButton = BackButton;
+exports.Breadcrumb = Breadcrumb;
+exports.Button = Button$1;
+exports.Buttons = Buttons;
+exports.Card = Card;
+exports.ClearButton = ClearButton;
+exports.Close = Close;
+exports.CloseIcon = CloseIcon;
+exports.CollapsablePanel = CollapsablePanel;
+exports.Date = Date$1;
+exports.Detector = Detector;
+exports.DropdownMenu = Dropdown;
+exports.Element = ElementComponent;
+exports.Empty = Empty;
+exports.FieldForm = FieldForm;
+exports.FontFaces = FontFaces;
+exports.Form = Form;
+exports.FormPanel = FormPanel;
+exports.FullscreenIcon = FullscreenIcon;
+exports.HighlightStyle = HighlightStyle;
+exports.Label = Label;
+exports.Link = Link;
+exports.LinkIcon = LinkIcon;
+exports.LinkStyle = LinkStyle;
+exports.Media = Media;
+exports.Menu = _Menu;
+exports.Meta = Meta;
+exports.Modal = Modal;
+exports.ModalDialog = ModalDialog;
+exports.ModalPortal = ModalPortal;
+exports.Modals = Modals;
+exports.MuteIcon = MuteIcon;
+exports.Navbar = Navbar;
+exports.Pagination = PaginationMenu;
+exports.Panel = Panel;
+exports.PanelPortal = PanelPortal;
+exports.Panels = Panels;
+exports.PauseIcon = PauseIcon;
+exports.PlaceholderAdFrame = AdFrame;
+exports.PlaceholderAdImage = AdImage;
+exports.PlaceholderAudio = Audio;
+exports.PlaceholderButton = Button;
+exports.PlaceholderImage = Image;
+exports.PlaceholderLine = Line;
+exports.PlaceholderMap = Map;
+exports.PlaceholderMapPath = MapPath;
+exports.PlaceholderQuote = Quote;
+exports.PlaceholderShortText = ShortText;
+exports.PlaceholderSubtitle = Subtitle;
+exports.PlaceholderText = TextPlaceholder;
+exports.PlaceholderTimeline = Timeline;
+exports.PlaceholderTitle = Title$1;
+exports.PlaceholderVideo = Video;
+exports.PlaceholderVideo360 = Video360;
+exports.PlaceholderVideoLoop = VideoLoop;
+exports.PlayIcon = PlayIcon;
+exports.Screen = Screen$1;
+exports.ScreenElement = ScreenElement;
+exports.ScreenPlaceholder = Placeholder;
+exports.ScreenPreview = Preview;
+exports.ScreenSizer = ScreenSizer;
+exports.Screens = Screens;
+exports.Slideshow = Slideshow;
+exports.Spinner = Spinner;
+exports.Tabs = TabsMenu;
+exports.Transitions = Transitions;
+exports.TransitionsStagger = TransitionsStagger;
+exports.UnmuteIcon = UnmuteIcon;