@micromag/core 0.4.71 → 0.4.77

package/lib/components.js

@@ -1,3404 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var classNames = require('classnames');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var wouter = require('wouter');
-var reactIntl = require('react-intl');
-var utils = require('@micromag/core/utils');
-var faClose = require('@fortawesome/free-solid-svg-icons/faClose');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
-var faAngleUp = require('@fortawesome/free-solid-svg-icons/faAngleUp');
-var React = require('react');
-var dayjs = require('dayjs');
-var throttle = require('lodash/throttle');
-var hooks = require('@micromag/core/hooks');
-var get = require('lodash/get');
-var contexts = require('@micromag/core/contexts');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var isObject = require('lodash/isObject');
-var isArray = require('lodash/isArray');
-var isString = require('lodash/isString');
-var reactDom = require('react-dom');
-var queryString = require('query-string');
-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 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 size = require('@folklore/size');
-var core = require('@react-spring/core');
-var web = require('@react-spring/web');
-
-var emptyObject$2 = {};
-function Label(_ref) {
-  var children = _ref.children,
-    _ref$isHtml = _ref.isHtml,
-    isHtml = _ref$isHtml === void 0 ? false : _ref$isHtml,
-    _ref$values = _ref.values,
-    values = _ref$values === void 0 ? emptyObject$2 : _ref$values;
-  var Message = isHtml ? reactIntl.FormattedMessage : reactIntl.FormattedMessage;
-  return utils.isMessage(children) ? /*#__PURE__*/jsxRuntime.jsx(Message, _objectSpread({
-    values: values
-  }, children)) : children;
-}
-
-var styles$y = {"container":"micromag-core-buttons-button-container","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withoutStyle":"micromag-core-buttons-button-withoutStyle","asLink":"micromag-core-buttons-button-asLink","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"];
-function Button$1(_ref) {
-  var _ref3;
-  var _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? null : _ref$theme,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? null : _ref$size,
-    _ref$href = _ref.href,
-    href = _ref$href === void 0 ? null : _ref$href,
-    _ref$external = _ref.external,
-    external = _ref$external === void 0 ? false : _ref$external,
-    _ref$direct = _ref.direct,
-    direct = _ref$direct === void 0 ? false : _ref$direct,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '_blank' : _ref$target,
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? null : _ref$label,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$focusable = _ref.focusable,
-    focusable = _ref$focusable === void 0 ? true : _ref$focusable,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active,
-    _ref$icon = _ref.icon,
-    icon = _ref$icon === void 0 ? null : _ref$icon,
-    _ref$iconPosition = _ref.iconPosition,
-    iconPosition = _ref$iconPosition === void 0 ? 'inline' : _ref$iconPosition,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$disableOnLoading = _ref.disableOnLoading,
-    disableOnLoading = _ref$disableOnLoading === void 0 ? true : _ref$disableOnLoading,
-    _ref$small = _ref.small,
-    small = _ref$small === void 0 ? false : _ref$small,
-    _ref$big = _ref.big,
-    big = _ref$big === void 0 ? false : _ref$big,
-    _ref$withShadow = _ref.withShadow,
-    withShadow = _ref$withShadow === void 0 ? false : _ref$withShadow,
-    _ref$withoutStyle = _ref.withoutStyle,
-    withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
-    _ref$withoutBootstrap = _ref.withoutBootstrapStyles,
-    withoutBootstrapStyles = _ref$withoutBootstrap === void 0 ? false : _ref$withoutBootstrap,
-    _ref$withoutTheme = _ref.withoutTheme,
-    withoutTheme = _ref$withoutTheme === void 0 ? false : _ref$withoutTheme,
-    _ref$asLink = _ref.asLink,
-    asLink = _ref$asLink === void 0 ? false : _ref$asLink,
-    _ref$outline = _ref.outline,
-    outline = _ref$outline === void 0 ? false : _ref$outline,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$iconClassName = _ref.iconClassName,
-    iconClassName = _ref$iconClassName === void 0 ? null : _ref$iconClassName,
-    _ref$labelClassName = _ref.labelClassName,
-    labelClassName = _ref$labelClassName === void 0 ? null : _ref$labelClassName,
-    _ref$refButton = _ref.refButton,
-    refButton = _ref$refButton === void 0 ? null : _ref$refButton,
-    props = _objectWithoutProperties(_ref, _excluded$c);
-  var finalLabel = label || children;
-  var text = finalLabel !== null ? /*#__PURE__*/jsxRuntime.jsx(Label, {
-    children: finalLabel
-  }) : null;
-  var hasChildren = label !== null && children !== null;
-  var hasIcon = icon !== null;
-  var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
-  var hasIconColumns = hasIcon && !hasInlineIcon;
-  var content = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [hasInlineIcon ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames([styles$y.icon, iconClassName]),
-        children: icon
-      }), text !== null ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames([styles$y.label, labelClassName]),
-        children: text
-      }) : null]
-    }) : null, hasIconColumns ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames([styles$y.left, iconPosition === 'left' ? iconClassName : null]),
-        children: iconPosition === 'left' ? icon : null
-      }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames([styles$y.center, labelClassName]),
-        children: text
-      }), /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames([styles$y.right, iconPosition === 'right' ? iconClassName : null]),
-        children: iconPosition === 'right' ? icon : null
-      }), hasChildren ? children : null]
-    }) : null, !hasIcon ? text : null, hasChildren ? children : null]
-  });
-  var withStyle = !withoutTheme && !withoutStyle && !asLink;
-  var buttonClassNames = classNames([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
-    btn: withStyle
-  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$y.container, (_ref3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref3, 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(_ref3, styles$y.isLoading, loading)), className]);
-  if (href !== null) {
-    var linkClassNames = classNames([buttonClassNames, _defineProperty({
-      disabled: disabled
-    }, styles$y.linkDisabled, disabled)]);
-    return external || direct ? /*#__PURE__*/jsxRuntime.jsx("a", _objectSpread(_objectSpread({}, props), {}, {
-      href: !disabled ? href : undefined,
-      className: linkClassNames,
-      onClick: onClick,
-      target: external ? target : undefined,
-      ref: refButton,
-      tabIndex: !focusable ? -1 : undefined,
-      children: content
-    })) : /*#__PURE__*/jsxRuntime.jsx(wouter.Link, {
-      href: href,
-      className: linkClassNames,
-      onClick: onClick,
-      ref: refButton,
-      tabIndex: focusable ? '' : '-1',
-      children: content
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({}, props), {}, {
-    type: type,
-    className: buttonClassNames,
-    onClick: onClick,
-    disabled: disabled || disableOnLoading && loading,
-    ref: refButton,
-    tabIndex: !focusable ? -1 : undefined,
-    children: content
-  }));
-}
-
-var styles$x = {"container":"micromag-core-buttons-container"};
-
-var _excluded$b = ["id", "name", "className", "onClick", "theme"];
-var emptyArray$9 = [];
-function Buttons(_ref) {
-  var _ref$buttons = _ref.buttons,
-    buttons = _ref$buttons === void 0 ? emptyArray$9 : _ref$buttons,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? null : _ref$size,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? undefined : _ref$theme,
-    _ref$renderButton = _ref.renderButton,
-    renderButton = _ref$renderButton === void 0 ? null : _ref$renderButton,
-    _ref$onClickButton = _ref.onClickButton,
-    onClickButton = _ref$onClickButton === void 0 ? null : _ref$onClickButton,
-    _ref$buttonClassName = _ref.buttonClassName,
-    buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, className]),
-    role: "group",
-    children: buttons.map(function (button, index) {
-      var id = button.id;
-        button.name;
-        var _button$className = button.className,
-        customClassName = _button$className === void 0 ? null : _button$className,
-        _button$onClick = button.onClick,
-        _onClick = _button$onClick === void 0 ? null : _button$onClick,
-        _button$theme = button.theme,
-        buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties(button, _excluded$b);
-      var fixedProps = {
-        className: classNames([styles$x.button, customClassName, buttonClassName, {}]),
-        onClick: function onClick(e) {
-          if (_onClick !== null) {
-            _onClick(e, button, index);
-          }
-          if (onClickButton !== null) {
-            onClickButton(e, button, index);
-          }
-        },
-        theme: buttonTheme || theme
-      };
-      var buttonKey = id || "button-".concat(index);
-      return renderButton !== null ? renderButton(button, index, _objectSpread({
-        key: buttonKey
-      }, fixedProps)) : /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread(_objectSpread({}, fixedProps), buttonProps), buttonKey);
-    })
-  });
-}
-
-var _excluded$a = ["className"];
-function BackButton(_ref) {
-  var _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$a);
-  return /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread({
-    className: classNames(['px-2', className]),
-    size: "sm",
-    icon: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faAngleLeft.faAngleLeft,
-      size: "lg"
-    })
-  }, props));
-}
-
-var styles$w = {"container":"micromag-core-buttons-clear-container","icon":"micromag-core-buttons-clear-icon"};
-
-var _excluded$9 = ["onClick", "className"];
-function ClearButton(_ref) {
-  var _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
-  return /*#__PURE__*/jsxRuntime.jsx("button", _objectSpread(_objectSpread({
-    className: classNames([styles$w.container, className]),
-    onClick: onClick
-  }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      className: styles$w.icon,
-      icon: faClose.faClose,
-      size: "md"
-    })
-  }));
-}
-
-var _excluded$8 = ["type"],
-  _excluded2 = ["component", "id", "settings"];
-var emptyArray$8 = [];
-var emptyObject$1 = {};
-function FieldForm(_ref) {
-  var _ref$name = _ref.name,
-    name = _ref$name === void 0 ? null : _ref$name,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? null : _ref$value,
-    _ref$form = _ref.form,
-    form = _ref$form === void 0 ? null : _ref$form,
-    _ref$formComponents = _ref.formComponents,
-    formComponents = _ref$formComponents === void 0 ? emptyObject$1 : _ref$formComponents,
-    _ref$fields = _ref.fields,
-    fields = _ref$fields === void 0 ? emptyArray$8 : _ref$fields,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
-    gotoFieldForm = _ref.gotoFieldForm,
-    closeFieldForm = _ref.closeFieldForm,
-    _ref$fieldContext = _ref.fieldContext,
-    fieldContext = _ref$fieldContext === void 0 ? null : _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__*/jsxRuntime.jsx(contexts.FieldContextProvider, {
-      context: fieldContext,
-      children: /*#__PURE__*/jsxRuntime.jsx(FormComponent, _objectSpread(_objectSpread({
-        field: field
-      }, formProps), {}, {
-        className: className
-      }))
-    }) : null;
-  }
-  var _ref4 = parentField || {},
-    itemsProps = _ref4.itemsProps;
-
-  // Use field component with isForm props
-  return FieldComponent !== null ? /*#__PURE__*/jsxRuntime.jsx(contexts.FieldContextProvider, {
-    context: fieldContext,
-    children: /*#__PURE__*/jsxRuntime.jsx(FieldComponent, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
-      className: className
-    }, definitionProps), fieldProps), itemsProps), {}, {
-      isForm: true
-    }, formProps))
-  }) : null;
-}
-
-var styles$v = {"container":"micromag-core-forms-form-container","panel":"micromag-core-forms-form-panel","actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
-
-var emptyArray$7 = [];
-function Form(_ref) {
-  var action = _ref.action,
-    _ref$method = _ref.method,
-    method = _ref$method === void 0 ? 'POST' : _ref$method,
-    _ref$fields = _ref.fields,
-    initialFields = _ref$fields === void 0 ? emptyArray$7 : _ref$fields,
-    _ref$initialValue = _ref.initialValue,
-    initialValue = _ref$initialValue === void 0 ? null : _ref$initialValue,
-    _ref$postForm = _ref.postForm,
-    postForm = _ref$postForm === void 0 ? null : _ref$postForm,
-    _ref$submitButtonLabe = _ref.submitButtonLabel,
-    submitButtonLabel = _ref$submitButtonLabe === void 0 ? /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-      id: "ZLDmja",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Submit"
-      }]
-    }) : _ref$submitButtonLabe,
-    _ref$submitButtonLoad = _ref.submitButtonLoadingLabel,
-    submitButtonLoadingLabel = _ref$submitButtonLoad === void 0 ? null : _ref$submitButtonLoad,
-    _ref$submitButtonThem = _ref.submitButtonTheme,
-    submitButtonTheme = _ref$submitButtonThem === void 0 ? null : _ref$submitButtonThem,
-    _ref$cancelButtonThem = _ref.cancelButtonTheme,
-    cancelButtonTheme = _ref$cancelButtonThem === void 0 ? null : _ref$cancelButtonThem,
-    _ref$buttons = _ref.buttons,
-    buttons = _ref$buttons === void 0 ? null : _ref$buttons,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$actionsAlign = _ref.actionsAlign,
-    actionsAlign = _ref$actionsAlign === void 0 ? 'left' : _ref$actionsAlign,
-    _ref$withoutActions = _ref.withoutActions,
-    withoutActions = _ref$withoutActions === void 0 ? false : _ref$withoutActions,
-    _ref$withoutComplete = _ref.withoutComplete,
-    withoutComplete = _ref$withoutComplete === void 0 ? false : _ref$withoutComplete,
-    _ref$withoutBackButto = _ref.withoutBackButton,
-    withoutBackButton = _ref$withoutBackButto === void 0 ? false : _ref$withoutBackButto,
-    _ref$onComplete = _ref.onComplete,
-    onComplete = _ref$onComplete === void 0 ? null : _ref$onComplete,
-    _ref$onResponse = _ref.onResponse,
-    onResponse = _ref$onResponse === void 0 ? null : _ref$onResponse,
-    _ref$onMessage = _ref.onMessage,
-    onMessage = _ref$onMessage === void 0 ? null : _ref$onMessage,
-    _ref$onCancel = _ref.onCancel,
-    onCancel = _ref$onCancel === void 0 ? null : _ref$onCancel,
-    _ref$onCancelHref = _ref.onCancelHref,
-    onCancelHref = _ref$onCancelHref === void 0 ? null : _ref$onCancelHref,
-    _ref$onOpenFieldForm = _ref.onOpenFieldForm,
-    onOpenFieldForm = _ref$onOpenFieldForm === void 0 ? null : _ref$onOpenFieldForm,
-    _ref$onCloseFieldForm = _ref.onCloseFieldForm,
-    onCloseFieldForm = _ref$onCloseFieldForm === void 0 ? null : _ref$onCloseFieldForm,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$fieldsClassName = _ref.fieldsClassName,
-    fieldsClassName = _ref$fieldsClassName === void 0 ? null : _ref$fieldsClassName,
-    _ref$actionsClassName = _ref.actionsClassName,
-    actionsClassName = _ref$actionsClassName === void 0 ? null : _ref$actionsClassName,
-    _ref$cancelClassName = _ref.cancelClassName,
-    cancelClassName = _ref$cancelClassName === void 0 ? null : _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 fieldContext = contexts.useFieldContext();
-  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__*/jsxRuntime.jsxs("form", {
-    action: action,
-    className: classNames([styles$v.container, className, {
-      // 'was-validated': status !== null,
-    }]),
-    method: method,
-    onSubmit: onSubmit,
-    children: [!withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "mb-2",
-      children: /*#__PURE__*/jsxRuntime.jsx(BackButton, {
-        theme: "secondary",
-        outline: true,
-        onClick: closeFieldForm
-      })
-    }) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(['w-100', styles$v.panel]),
-      children: /*#__PURE__*/jsxRuntime.jsx(FieldForm, {
-        name: fieldName,
-        fields: fields,
-        value: value,
-        onChange: setValue,
-        gotoFieldForm: gotoFieldForm,
-        closeFieldForm: closeFieldForm,
-        fieldContext: fieldContext
-      })
-    }, "field") : null, FieldsComponent && fields !== null && fields.length > 0 && fieldParams === null ? /*#__PURE__*/jsxRuntime.jsx(FieldsComponent, {
-      fields: fields,
-      value: value,
-      errors: errors,
-      onChange: setValue,
-      gotoFieldForm: gotoFieldForm,
-      closeFieldForm: closeFieldForm,
-      className: classNames([styles$v.fields, fieldsClassName])
-    }) : null, generalError ? /*#__PURE__*/jsxRuntime.jsx("p", {
-      className: "text-danger my-1",
-      children: generalError
-    }) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames([styles$v.actions, actionsClassName, _defineProperty({}, styles$v[actionsAlign], actionsAlign)]),
-      children: [onCancel !== null || onCancelHref !== null ? /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-        type: "button",
-        onClick: onCancel,
-        href: onCancelHref,
-        theme: cancelButtonTheme || 'secondary',
-        outline: true,
-        disabled: status === 'loading',
-        className: classNames(['me-2', cancelClassName]),
-        children: /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-          id: "PyxZY2",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Cancel"
-          }]
-        })
-      }) : null, buttons !== null ? /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-        buttons: buttons,
-        className: styles$v.buttons
-      }) : /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-        type: "submit",
-        theme: submitButtonTheme || 'primary',
-        disabled: status === 'loading' || !canSave,
-        children: status === 'loading' ? submitButtonLoadingLabel || submitButtonLabel : submitButtonLabel
-      }), complete ? /*#__PURE__*/jsxRuntime.jsx("p", {
-        className: "text-success mx-2 my-1",
-        children: /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedMessage, {
-          id: "BpZoQZ",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Success"
-          }]
-        })
-      }) : null]
-    }) : null]
-  });
-}
-
-var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
-
-var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-function Link(_ref) {
-  var _ref$href = _ref.href,
-    href = _ref$href === void 0 ? '' : _ref$href,
-    _ref$external = _ref.external,
-    external = _ref$external === void 0 ? false : _ref$external,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$target = _ref.target,
-    target = _ref$target === void 0 ? '_blank' : _ref$target,
-    _ref$rel = _ref.rel,
-    rel = _ref$rel === void 0 ? 'noopener noreferrer' : _ref$rel,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$withoutStyle = _ref.withoutStyle,
-    withoutStyle = _ref$withoutStyle === void 0 ? false : _ref$withoutStyle,
-    props = _objectWithoutProperties(_ref, _excluded$7);
-  return external ? /*#__PURE__*/jsxRuntime.jsx("a", _objectSpread(_objectSpread({
-    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
-    href: href,
-    target: target,
-    rel: rel
-  }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-      children: children
-    })
-  })) : /*#__PURE__*/jsxRuntime.jsx(wouter.Link, _objectSpread(_objectSpread({
-    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
-    href: href
-  }, props), {}, {
-    children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-      children: children
-    })
-  }));
-}
-
-var _excluded$6 = ["label", "className"];
-function Card(_ref) {
-  var _ref$href = _ref.href,
-    href = _ref$href === void 0 ? null : _ref$href,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$image = _ref.image,
-    image = _ref$image === void 0 ? null : _ref$image,
-    _ref$imageAlt = _ref.imageAlt,
-    imageAlt = _ref$imageAlt === void 0 ? null : _ref$imageAlt,
-    _ref$imageOverlay = _ref.imageOverlay,
-    imageOverlay = _ref$imageOverlay === void 0 ? false : _ref$imageOverlay,
-    _ref$beforeBody = _ref.beforeBody,
-    beforeBody = _ref$beforeBody === void 0 ? null : _ref$beforeBody,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$afterBody = _ref.afterBody,
-    afterBody = _ref$afterBody === void 0 ? null : _ref$afterBody,
-    _ref$links = _ref.links,
-    links = _ref$links === void 0 ? null : _ref$links,
-    _ref$linksInSameBody = _ref.linksInSameBody,
-    linksInSameBody = _ref$linksInSameBody === void 0 ? false : _ref$linksInSameBody,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? null : _ref$theme,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$imageClassName = _ref.imageClassName,
-    imageClassName = _ref$imageClassName === void 0 ? null : _ref$imageClassName,
-    _ref$headerClassName = _ref.headerClassName,
-    headerClassName = _ref$headerClassName === void 0 ? null : _ref$headerClassName,
-    _ref$titleClassName = _ref.titleClassName,
-    titleClassName = _ref$titleClassName === void 0 ? null : _ref$titleClassName,
-    _ref$subtitleClassNam = _ref.subtitleClassName,
-    subtitleClassName = _ref$subtitleClassNam === void 0 ? null : _ref$subtitleClassNam,
-    _ref$bodyClassName = _ref.bodyClassName,
-    bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName,
-    _ref$footerClassName = _ref.footerClassName,
-    footerClassName = _ref$footerClassName === void 0 ? null : _ref$footerClassName,
-    _ref$onClick = _ref.onClick,
-    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
-    _ref$onClickBody = _ref.onClickBody,
-    onClickBody = _ref$onClickBody === void 0 ? null : _ref$onClickBody,
-    _ref$onClickFooter = _ref.onClickFooter,
-    onClickFooter = _ref$onClickFooter === void 0 ? null : _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__*/jsxRuntime.jsx(Link, _objectSpread(_objectSpread({
-      className: classNames(['card-link', linkClassName])
-    }, linkProps), {}, {
-      children: label
-    }), "link-".concat(label, "-").concat(index));
-  });
-  var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [title !== null ? /*#__PURE__*/jsxRuntime.jsx("h5", {
-      className: classNames(['card-title', titleClassName]),
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: title
-      })
-    }) : null, subtitle !== null ? /*#__PURE__*/jsxRuntime.jsx("h6", {
-      className: classNames(['card-subtitle', subtitleClassName]),
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: subtitle
-      })
-    }) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "d-flex",
-      children: linksElements
-    }) : null]
-  }) : null;
-  var cardInner = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [header !== null ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(['card-header', headerClassName]),
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: header
-      })
-    }) : null, typeof image === 'string' ? /*#__PURE__*/jsxRuntime.jsx("img", {
-      src: image,
-      alt: imageAlt,
-      className: classNames(['card-img-top', imageClassName])
-    }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      className: classNames([bodyClassName, {
-        'card-body': !imageOverlay,
-        'card-img-overlay': imageOverlay
-      }]),
-      onClick: onClickBody,
-      children: bodyInner
-    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([bodyClassName, {
-        'card-body': !imageOverlay,
-        'card-img-overlay': imageOverlay
-      }]),
-      children: bodyInner
-    }) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "card-body",
-      children: linksElements
-    }) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      className: classNames(['card-footer', footerClassName]),
-      onClick: onClickFooter,
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: footer
-      })
-    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames(['card-footer', footerClassName]),
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: footer
-      })
-    }) : null]
-  });
-  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className]);
-  if (href !== null) {
-    return /*#__PURE__*/jsxRuntime.jsx(Link, {
-      href: href,
-      className: cardClassName,
-      children: cardInner
-    });
-  }
-  if (onClick !== null) {
-    return /*#__PURE__*/jsxRuntime.jsx("button", {
-      type: "button",
-      className: classNames(['p-0', 'text-start', cardClassName]),
-      onClick: onClick,
-      children: cardInner
-    });
-  }
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: cardClassName,
-    children: cardInner
-  });
-}
-
-var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated"};
-
-function Spinner(_ref) {
-  var _ref$animated = _ref.animated,
-    animated = _ref$animated === void 0 ? true : _ref$animated,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'currentColor' : _ref$color,
-    _ref$strokeWidth = _ref.strokeWidth,
-    strokeWidth = _ref$strokeWidth === void 0 ? 3 : _ref$strokeWidth,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("svg", {
-    className: classNames([styles$t.container, className, _defineProperty({}, styles$t.animated, animated)]),
-    width: "40",
-    height: "40",
-    viewBox: "0 0 40 40",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /*#__PURE__*/jsxRuntime.jsx("circle", {
-      className: styles$t.path,
-      cx: "20",
-      cy: "20",
-      r: "12",
-      fill: "none",
-      stroke: color,
-      strokeWidth: strokeWidth
-    })
-  });
-}
-
-var styles$s = {"container":"micromag-core-forms-form-panel-container"};
-
-var _excluded$5 = ["description", "loading", "children", "className"];
-function FormPanel(_ref) {
-  var _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$loading = _ref.loading,
-    loading = _ref$loading === void 0 ? false : _ref$loading,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$5);
-  return /*#__PURE__*/jsxRuntime.jsxs(Card, _objectSpread(_objectSpread({
-    className: classNames([styles$s.container, className])
-  }, props), {}, {
-    children: [description, loading ? /*#__PURE__*/jsxRuntime.jsx(Spinner, {}) : children]
-  }));
-}
-
-function ArrowIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("svg", {
-    width: "20",
-    height: "14",
-    viewBox: "0 0 20 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M13.353 0.371014L19.319 6.33704C19.6851 6.70314 19.6851 7.29671 19.319 7.66282L13.353 13.6288C12.9869 13.9949 12.3933 13.9949 12.0272 13.6288C11.6611 13.2627 11.6611 12.6692 12.0272 12.3031L16.3929 7.9374H0V6.06246H16.3929L12.0272 1.6968C11.6611 1.33069 11.6611 0.737119 12.0272 0.371014C12.3933 0.0049094 12.9869 0.0049094 13.353 0.371014Z",
-      fill: color
-    })
-  });
-}
-
-function CloseIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    width: "22",
-    height: "22",
-    viewBox: "0 0 22 22",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M1 1L21 21",
-      stroke: color,
-      strokeWidth: "1.5",
-      strokeLinecap: "round"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M1 21L21 0.999998",
-      stroke: color,
-      strokeWidth: "1.5",
-      strokeLinecap: "round"
-    })]
-  });
-}
-
-function FullscreenIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("svg", {
-    width: "16",
-    height: "14",
-    viewBox: "0 0 16 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M11.2 0H16V4.66667H14.4V1.55556H11.2V0ZM0 0H4.8V1.55556H1.6V4.66667H0V0ZM14.4 12.4444V9.33333H16V14H11.2V12.4444H14.4ZM1.6 12.4444H4.8V14H0V9.33333H1.6V12.4444Z",
-      fill: color
-    })
-  });
-}
-
-function LinkIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M6.60207 8.70208C7.75493 10.2515 9.95019 10.5697 11.4965 9.40761C11.6277 9.31077 11.7589 9.2001 11.8762 9.08251L13.9749 6.97975C15.3417 5.61018 15.3417 3.39674 13.9749 2.02717C12.608 0.657609 10.3989 0.657609 9.03205 2.02717L7.83086 3.22381",
-      stroke: color,
-      strokeWidth: "1.25",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M9.39793 7.29793C8.24507 5.74852 6.04981 5.43034 4.50345 6.59239C4.37229 6.68923 4.24113 6.7999 4.12377 6.91749L2.02515 9.02026C0.658284 10.3898 0.658284 12.6033 2.02515 13.9728C3.39201 15.3424 5.60109 15.3424 6.96795 13.9728L8.16223 12.7762",
-      stroke: color,
-      strokeWidth: "1.25",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    })]
-  });
-}
-
-function MuteIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    width: "26",
-    height: "26",
-    viewBox: "0 0 26 26",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M18 18.6875C21.3137 18.6875 24 16.0012 24 12.6875C24 9.37379 21.3137 6.6875 18 6.6875",
-      stroke: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M18 15.6875C19.6569 15.6875 21 14.3444 21 12.6875C21 11.0306 19.6569 9.6875 18 9.6875",
-      stroke: color
-    })]
-  });
-}
-
-function PauseIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    className: className,
-    width: "14",
-    height: "18",
-    viewBox: "0 0 14 18",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [/*#__PURE__*/jsxRuntime.jsx("rect", {
-      width: "6",
-      height: "18",
-      rx: "2",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("rect", {
-      x: "8",
-      width: "6",
-      height: "18",
-      rx: "2",
-      fill: color
-    })]
-  });
-}
-
-function PlayIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("svg", {
-    width: "40",
-    height: "45.1",
-    viewBox: "0 0 40 45.1",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M38.2,25.7L5.5,44.6C3,46,0,44.2,0,41.4L0,3.6c0-2.8,3-4.5,5.5-3.1l32.7,18.9C40.6,20.8,40.6,24.3,38.2,25.7z",
-      fill: color,
-      stroke: color
-    })
-  });
-}
-
-function UnmuteIcon(_ref) {
-  var _ref$color = _ref.color,
-    color = _ref$color === void 0 ? '#fff' : _ref$color,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
-    width: "26",
-    height: "26",
-    viewBox: "0 0 26 26",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    className: className,
-    children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-      d: "M7.09929 8.77987H1C0.447715 8.77987 0 9.22758 0 9.77987V15.7799C0 16.3322 0.447715 16.7799 1 16.7799H7.1076C7.35984 16.7799 7.60276 16.8752 7.78768 17.0467L14.3199 23.1062C14.9599 23.6999 16 23.246 16 22.3731V3.00199C16 2.12221 14.9458 1.67117 14.3095 2.2787L7.78983 8.50316C7.6038 8.68077 7.35649 8.77987 7.09929 8.77987Z",
-      fill: color
-    }), /*#__PURE__*/jsxRuntime.jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M20.8536 13.3946L23 15.5411L23.7071 14.834L21.5607 12.6875L23.7071 10.5411L23 9.83398L20.8536 11.9804L18.7071 9.83398L18 10.5411L20.1464 12.6875L18 14.834L18.7071 15.5411L20.8536 13.3946Z",
-      fill: color
-    })]
-  });
-}
-
-var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
-
-var emptyArray$6 = [];
-function Breadcrumb(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyArray$6 : _ref$items,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? null : _ref$theme,
-    _ref$separator = _ref.separator,
-    separator = _ref$separator === void 0 ? null : _ref$separator,
-    _ref$withoutBar = _ref.withoutBar,
-    withoutBar = _ref$withoutBar === void 0 ? false : _ref$withoutBar,
-    _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("nav", {
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx("ol", {
-      className: classNames([styles$r.container, 'breadcrumb', 'mb-0', {
-        'p-0': withoutBar,
-        'bg-transparent': withoutBar,
-        'rounded-0': withoutBar,
-        'flex-nowrap': noWrap
-      }]),
-      children: items.map(function (_ref2, index) {
-        var url = _ref2.url,
-          label = _ref2.label,
-          _ref2$active = _ref2.active,
-          active = _ref2$active === void 0 ? false : _ref2$active,
-          _ref2$onClick = _ref2.onClick,
-          onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
-        return /*#__PURE__*/jsxRuntime.jsxs("li", {
-          className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
-            active: active
-          }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
-          children: [active ? /*#__PURE__*/jsxRuntime.jsx(Label, {
-            children: label
-          }) : null, !active && url ? /*#__PURE__*/jsxRuntime.jsx(wouter.Link, {
-            href: url,
-            onClick: onClick,
-            className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)]),
-            children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-              children: label
-            })
-          }) : null, !active && onClick ? /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-            onClick: onClick,
-            className: classNames(['font-weight-bold', 'text-decoration-none', _defineProperty({}, "text-".concat(theme), theme !== null)]),
-            children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-              children: label
-            })
-          }) : null]
-        }, "item-".concat(index));
-      })
-    })
-  });
-}
-
-var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
-var emptyArray$5 = [];
-function Dropdown(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyArray$5 : _ref$items,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? false : _ref$visible,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? null : _ref$align,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$itemClassName = _ref.itemClassName,
-    itemClassName = _ref$itemClassName === void 0 ? null : _ref$itemClassName,
-    _ref$onClickItem = _ref.onClickItem,
-    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem,
-    _ref$onClickOutside = _ref.onClickOutside,
-    onClickOutside = _ref$onClickOutside === void 0 ? null : _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) && !refContainer.current.contains(e.target) && 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__*/jsxRuntime.jsx("div", {
-    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className]),
-    ref: refContainer,
-    children: children !== null ? children : items.map(function (it, index) {
-      var _it$type = it.type,
-        type = _it$type === void 0 ? 'link' : _it$type,
-        _it$className = it.className,
-        customClassName = _it$className === void 0 ? null : _it$className,
-        _it$label = it.label,
-        label = _it$label === void 0 ? null : _it$label,
-        _it$children = it.children,
-        itemChildren = _it$children === void 0 ? null : _it$children,
-        _it$onClick = it.onClick,
-        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        _it$active = it.active,
-        active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties(it, _excluded$4);
-      var ItemComponent = 'div';
-      if (type === 'link') {
-        ItemComponent = Link;
-      } else if (type === 'button') {
-        ItemComponent = 'button';
-      } else if (type === 'header') {
-        ItemComponent = 'h6';
-      } else if (type === 'divider') {
-        ItemComponent = 'hr';
-      }
-      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__*/jsxRuntime.jsx("div", {
-        children: /*#__PURE__*/jsxRuntime.jsx(ItemComponent, _objectSpread(_objectSpread({
-          className: classNames([customClassName, itemClassName, {
-            'dropdown-item': type === 'link' || type === 'button',
-            'dropdown-divider': type === 'divider',
-            'dropdown-header': type === 'header',
-            active: active
-          }]),
-          onClick: finalOnClickItem
-        }, itemProps), {}, {
-          children: label !== null ? /*#__PURE__*/jsxRuntime.jsx(Label, {
-            children: label
-          }) : itemChildren
-        }))
-      }, "item-".concat(index + 1, "-").concat(label, "-").concat(type)) : null;
-    })
-  });
-}
-
-var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
-var emptyArray$4 = [];
-function Menu(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyArray$4 : _ref$items,
-    _ref$tagName = _ref.tagName,
-    tagName = _ref$tagName === void 0 ? 'ul' : _ref$tagName,
-    _ref$itemTagName = _ref.itemTagName,
-    itemTagName = _ref$itemTagName === void 0 ? 'li' : _ref$itemTagName,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$linkAsItem = _ref.linkAsItem,
-    linkAsItem = _ref$linkAsItem === void 0 ? false : _ref$linkAsItem,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$itemClassName = _ref.itemClassName,
-    itemClassName = _ref$itemClassName === void 0 ? null : _ref$itemClassName,
-    _ref$linkClassName = _ref.linkClassName,
-    linkClassName = _ref$linkClassName === void 0 ? null : _ref$linkClassName,
-    _ref$hasSubMenuClassN = _ref.hasSubMenuClassName,
-    hasSubMenuClassName = _ref$hasSubMenuClassN === void 0 ? null : _ref$hasSubMenuClassN,
-    _ref$subMenuClassName = _ref.subMenuClassName,
-    subMenuClassName = _ref$subMenuClassName === void 0 ? null : _ref$subMenuClassName,
-    _ref$subMenuItemClass = _ref.subMenuItemClassName,
-    subMenuItemClassName = _ref$subMenuItemClass === void 0 ? null : _ref$subMenuItemClass,
-    _ref$subMenuLinkClass = _ref.subMenuLinkClassName,
-    subMenuLinkClassName = _ref$subMenuLinkClass === void 0 ? null : _ref$subMenuLinkClass,
-    _ref$hasDropdownClass = _ref.hasDropdownClassName,
-    hasDropdownClassName = _ref$hasDropdownClass === void 0 ? null : _ref$hasDropdownClass,
-    _ref$dropdownClassNam = _ref.dropdownClassName,
-    dropdownClassName = _ref$dropdownClassNam === void 0 ? null : _ref$dropdownClassNam,
-    _ref$dropdownItemClas = _ref.dropdownItemClassName,
-    dropdownItemClassName = _ref$dropdownItemClas === void 0 ? null : _ref$dropdownItemClas,
-    _ref$dropdownLinkClas = _ref.dropdownLinkClassName,
-    dropdownLinkClassName = _ref$dropdownLinkClas === void 0 ? null : _ref$dropdownLinkClas,
-    _ref$dropdownAlign = _ref.dropdownAlign,
-    dropdownAlign = _ref$dropdownAlign === void 0 ? null : _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__*/jsxRuntime.jsx(ListComponent, {
-    className: className,
-    children: children !== null ? children : items.map(function (it, index) {
-      var id = it.id,
-        _it$className = it.className,
-        customClassName = _it$className === void 0 ? null : _it$className,
-        _it$linkClassName = it.linkClassName,
-        customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
-        _it$href = it.href,
-        href = _it$href === void 0 ? null : _it$href,
-        label = it.label,
-        _it$external = it.external,
-        external = _it$external === void 0 ? false : _it$external,
-        _it$items = it.items,
-        subItems = _it$items === void 0 ? null : _it$items,
-        _it$dropdown = it.dropdown,
-        dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
-        _it$active = it.active,
-        active = _it$active === void 0 ? false : _it$active,
-        _it$onClick = it.onClick,
-        customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties(it, _excluded$3);
-      var onClickItem = dropdown !== null ? function (e) {
-        e.preventDefault();
-        setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
-        if (customOnClick !== null) {
-          customOnClick(e);
-        }
-      } : customOnClick;
-      var closeDropdown = dropdown !== null ? function () {
-        setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
-      } : null;
-      var ItemComponent = itemTagName;
-      return linkAsItem ? /*#__PURE__*/React.createElement(Link, _objectSpread(_objectSpread({}, itemProps), {}, {
-        key: "item-".concat(id || index),
-        onClick: onClickItem,
-        href: href,
-        external: external,
-        className: classNames([itemClassName, customClassName, linkClassName, customLinkClassName, {
-          active: active
-        }])
-      }), label) : /*#__PURE__*/jsxRuntime.jsxs(ItemComponent, {
-        className: classNames([itemClassName, customClassName, _defineProperty(_defineProperty({
-          dropdown: dropdown !== null,
-          active: active
-        }, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null)]),
-        children: [href !== null ? /*#__PURE__*/jsxRuntime.jsx(Link, _objectSpread(_objectSpread({}, itemProps), {}, {
-          onClick: onClickItem,
-          href: href,
-          external: external,
-          className: classNames([linkClassName, customLinkClassName, {
-            'dropdown-toggle': dropdown !== null
-          }]),
-          children: label
-        })) : null, href === null && onClickItem !== null ? /*#__PURE__*/jsxRuntime.jsx(Button$1, _objectSpread(_objectSpread({}, itemProps), {}, {
-          onClick: onClickItem,
-          className: classNames([linkClassName, customLinkClassName, {
-            'dropdown-toggle': dropdown !== null
-          }]),
-          children: label
-        })) : null, subItems !== null ? /*#__PURE__*/jsxRuntime.jsx(Menu, {
-          items: subItems,
-          className: subMenuClassName,
-          itemClassName: classNames([subMenuItemClassName, _defineProperty({}, itemClassName, subMenuItemClassName === null && itemClassName !== null)]),
-          linkClassName: classNames([subMenuLinkClassName, _defineProperty({}, linkClassName, subMenuLinkClassName === null && linkClassName !== null)])
-        }) : null, dropdown !== null ? /*#__PURE__*/jsxRuntime.jsx(Dropdown, {
-          items: dropdown,
-          visible: dropdownsVisible[index] || false,
-          className: dropdownClassName,
-          itemClassName: classNames([dropdownItemClassName, _defineProperty({}, itemClassName, dropdownItemClassName === null && itemClassName !== null)]),
-          linkClassName: classNames([dropdownLinkClassName, _defineProperty({}, linkClassName, dropdownLinkClassName === null && linkClassName !== null)]),
-          align: dropdownAlign,
-          onClickItem: closeDropdown,
-          onClickOutside: closeDropdown
-        }) : null]
-      }, "item-".concat(id || index));
-    })
-  });
-}
-
-var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
-
-function Navbar(_ref) {
-  var _ref$brand = _ref.brand,
-    brand = _ref$brand === void 0 ? null : _ref$brand,
-    _ref$brandLink = _ref.brandLink,
-    brandLink = _ref$brandLink === void 0 ? null : _ref$brandLink,
-    _ref$breadcrumbs = _ref.breadcrumbs,
-    breadcrumbs = _ref$breadcrumbs === void 0 ? null : _ref$breadcrumbs,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? null : _ref$theme,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'md' : _ref$size,
-    _ref$compact = _ref.compact,
-    compact = _ref$compact === void 0 ? false : _ref$compact,
-    _ref$noWrap = _ref.noWrap,
-    noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
-    _ref$withoutCollapse = _ref.withoutCollapse,
-    withoutCollapse = _ref$withoutCollapse === void 0 ? false : _ref$withoutCollapse,
-    _ref$withoutCollapseT = _ref.withoutCollapseToggle,
-    withoutCollapseToggle = _ref$withoutCollapseT === void 0 ? false : _ref$withoutCollapseT,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$brandClassName = _ref.brandClassName,
-    brandClassName = _ref$brandClassName === void 0 ? null : _ref$brandClassName,
-    _ref$breadCrumbsClass = _ref.breadCrumbsClassName,
-    breadCrumbsClassName = _ref$breadCrumbsClass === void 0 ? null : _ref$breadCrumbsClass,
-    _ref$collapseClassNam = _ref.collapseClassName,
-    collapseClassName = _ref$collapseClassNam === void 0 ? null : _ref$collapseClassNam;
-  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__*/jsxRuntime.jsx("nav", {
-    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className]),
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames(['container-fluid', {
-        'px-0': compact
-      }]),
-      children: [brand !== null && brandLink !== null ? /*#__PURE__*/jsxRuntime.jsx(Link, {
-        className: classNames(['navbar-brand', brandClassName, {
-          'py-0': compact
-        }]),
-        href: brandLink,
-        children: brand
-      }) : null, brand !== null && brandLink === null ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames(['navbar-brand', brandClassName, {
-          'py-0': compact
-        }]),
-        children: brand
-      }) : null, breadcrumbs !== null ? /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: classNames(['navbar-breadcrumbs', breadCrumbsClassName, {
-          'py-0': compact
-        }]),
-        children: breadcrumbs
-      }) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-        className: "navbar-toggler",
-        onClick: onClickMenu,
-        withoutTheme: true,
-        "aria-controls": "navbarSupportedContent",
-        "aria-expanded": "false",
-        "aria-label": "Toggle navigation",
-        children: /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: "navbar-toggler-icon"
-        })
-      }) : null, !withoutCollapse ? /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, collapseClassName, {
-          show: menuVisible
-        }]),
-        children: children
-      }) : children]
-    })
-  });
-}
-
-var styles$p = {"container":"micromag-core-menus-pagination-container"};
-
-var messages = reactIntl.defineMessages({
-  previous: {
-    id: "menus.pagination.previous",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Previous"
-    }]
-  },
-  next: {
-    id: "menus.pagination.next",
-    defaultMessage: [{
-      "type": 0,
-      "value": "next"
-    }]
-  }
-});
-function PaginationMenu(_ref) {
-  var _ref$page = _ref.page,
-    parentPage = _ref$page === void 0 ? 1 : _ref$page,
-    _ref$lastPage = _ref.lastPage,
-    parentLastPage = _ref$lastPage === void 0 ? 1 : _ref$lastPage,
-    _ref$maxPages = _ref.maxPages,
-    parentMaxPages = _ref$maxPages === void 0 ? 10 : _ref$maxPages,
-    _ref$total = _ref.total,
-    parentTotal = _ref$total === void 0 ? 1 : _ref$total,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$query = _ref.query,
-    query = _ref$query === void 0 ? null : _ref$query,
-    _ref$withPreviousNext = _ref.withPreviousNext,
-    withPreviousNext = _ref$withPreviousNext === void 0 ? false : _ref$withPreviousNext,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$paginationClassN = _ref.paginationClassName,
-    paginationClassName = _ref$paginationClassN === void 0 ? null : _ref$paginationClassN,
-    _ref$itemClassName = _ref.itemClassName,
-    itemClassName = _ref$itemClassName === void 0 ? null : _ref$itemClassName,
-    _ref$linkClassName = _ref.linkClassName,
-    linkClassName = _ref$linkClassName === void 0 ? null : _ref$linkClassName,
-    _ref$onClickPage = _ref.onClickPage,
-    onClickPage = _ref$onClickPage === void 0 ? null : _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__*/jsxRuntime.jsx("nav", {
-    className: classNames([styles$p.container, className]),
-    children: /*#__PURE__*/jsxRuntime.jsxs("ul", {
-      className: classNames(['pagination', paginationClassName]),
-      children: [withPreviousNext ? /*#__PURE__*/jsxRuntime.jsx("li", {
-        className: classNames(['page-item', itemClassName, {
-          disabled: page <= 1
-        }]),
-        children: page > 1 ? /*#__PURE__*/jsxRuntime.jsx(Link, {
-          className: classNames(['page-link', linkClassName]),
-          href: getUrl(page - 1),
-          onClick: onClickPage !== null ? function () {
-            return onClickPage(page - 1);
-          } : null,
-          children: messages.previous
-        }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames(['page-link', linkClassName]),
-          children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-            children: messages.previous
-          })
-        })
-      }) : null, pages.map(function (pageNumber) {
-        return /*#__PURE__*/jsxRuntime.jsx("li", {
-          className: classNames(['page-item', itemClassName, {
-            active: pageNumber === page
-          }]),
-          children: /*#__PURE__*/jsxRuntime.jsx(Link, {
-            className: classNames(['page-link', linkClassName]),
-            href: getUrl(pageNumber),
-            onClick: onClickPage !== null ? function () {
-              return onClickPage(pageNumber);
-            } : null,
-            children: pageNumber
-          })
-        }, "page-".concat(pageNumber));
-      }), withPreviousNext ? /*#__PURE__*/jsxRuntime.jsx("li", {
-        className: classNames(['page-item', itemClassName, {
-          disabled: page >= total
-        }]),
-        children: page < total ? /*#__PURE__*/jsxRuntime.jsx(Link, {
-          className: classNames(['page-link', linkClassName]),
-          href: getUrl(page + 1),
-          onClick: onClickPage !== null ? function () {
-            return onClickPage(page + 1);
-          } : null,
-          children: messages.next
-        }) : /*#__PURE__*/jsxRuntime.jsx("span", {
-          className: classNames(['page-link', linkClassName]),
-          children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-            children: messages.next
-          })
-        })
-      }) : null]
-    })
-  });
-}
-
-var styles$o = {"container":"micromag-core-menus-tabs-container"};
-
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var emptyArray$3 = [];
-function TabsMenu(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyArray$3 : _ref$items,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? null : _ref$size,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? 'secondary' : _ref$theme,
-    _ref$renderItemButton = _ref.renderItemButton,
-    renderItemButton = _ref$renderItemButton === void 0 ? null : _ref$renderItemButton,
-    _ref$buttonClassName = _ref.buttonClassName,
-    buttonClassName = _ref$buttonClassName === void 0 ? null : _ref$buttonClassName,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$onClickItem = _ref.onClickItem,
-    onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$o.container, className]),
-    children: /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-      buttons: items,
-      size: size,
-      theme: theme,
-      renderButton: renderItemButton,
-      onClickButton: onClickItem,
-      className: styles$o.buttons,
-      buttonClassName: classNames([styles$o.button, buttonClassName])
-    })
-  });
-}
-
-var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
-
-function ModalsContainer(_ref) {
-  var modals = _ref.modals,
-    setModalsContainer = _ref.setModalsContainer,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var containerRef = React.useRef(null);
-  React.useEffect(function () {
-    setModalsContainer(containerRef.current);
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$n.container, className]),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
-      ref: containerRef
-    })
-  });
-}
-var Modals = contexts.withModals(ModalsContainer);
-
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-function ElementPortal(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? null : _ref$data,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$container = _ref.container,
-    container = _ref$container === void 0 ? null : _ref$container,
-    _ref$register = _ref.register,
-    register = _ref$register === void 0 ? null : _ref$register,
-    _ref$unregister = _ref.unregister,
-    unregister = _ref$unregister === void 0 ? null : _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;
-}
-
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-function ModalPortal(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? null : _ref$data,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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__*/jsxRuntime.jsx(ElementPortal, {
-    id: id,
-    data: data,
-    container: container,
-    register: register,
-    unregister: unregister,
-    children: children
-  });
-}
-
-var styles$m = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
-
-function Modal(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'center' : _ref$position,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _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__*/jsxRuntime.jsx(ModalPortal, {
-    id: finalId,
-    data: data,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$m.container, _defineProperty({}, styles$m[position], position !== null)]),
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames([styles$m.inner, 'bg-dark', 'rounded']),
-        children: children
-      })
-    })
-  });
-}
-
-var styles$l = {"container":"micromag-core-modals-dialog-container"};
-
-function ModalDialog(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$buttons = _ref.buttons,
-    buttons = _ref$buttons === void 0 ? null : _ref$buttons,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? null : _ref$size,
-    _ref$onClose = _ref.onClose,
-    onClose = _ref$onClose === void 0 ? null : _ref$onClose,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$bodyClassName = _ref.bodyClassName,
-    bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$l.container, 'modal-dialog', className, _defineProperty({}, "modal-".concat(size), size !== null)]),
-    role: "dialog",
-    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "modal-content",
-      children: [header || /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header]),
-        children: [/*#__PURE__*/jsxRuntime.jsx("h5", {
-          className: "modal-title",
-          children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-            children: title
-          })
-        }), /*#__PURE__*/jsxRuntime.jsx("button", {
-          type: "button",
-          className: "btn btn-close p-2",
-          "aria-label": "Close",
-          onClick: onClose
-        })]
-      }), /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames(['modal-body', 'p-2', bodyClassName]),
-        children: children
-      }), footer !== null || buttons !== null ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames(['modal-footer', 'p-2', styles$l.footer]),
-        children: [footer, buttons !== null ? /*#__PURE__*/jsxRuntime.jsx(Buttons, {
-          buttons: buttons,
-          className: styles$l.buttons
-        }) : null]
-      }) : null]
-    })
-  });
-}
-
-var styles$k = {"container":"micromag-core-panels-container"};
-
-var emptyArray$2 = [];
-function PanelsContainer(_ref) {
-  var _ref$panels = _ref.panels,
-    panels = _ref$panels === void 0 ? emptyArray$2 : _ref$panels,
-    _ref$setPanelsContain = _ref.setPanelsContainer,
-    setPanelsContainer = _ref$setPanelsContain === void 0 ? null : _ref$setPanelsContain,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var containerRef = React.useRef(null);
-  React.useEffect(function () {
-    setPanelsContainer(containerRef.current);
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$k.container, className]),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
-      ref: containerRef
-    })
-  });
-}
-var Panels = contexts.withPanels(PanelsContainer);
-
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-function PanelPortal(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$data = _ref.data,
-    data = _ref$data === void 0 ? null : _ref$data,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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__*/jsxRuntime.jsx(ElementPortal, {
-    id: id,
-    data: data,
-    container: container,
-    register: register,
-    unregister: unregister,
-    children: children
-  });
-}
-
-var styles$j = {"container":"micromag-core-panels-panel-container"};
-
-/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-function Panel(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _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__*/jsxRuntime.jsx(PanelPortal, {
-    id: finalId,
-    data: data,
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$j.container,
-      children: children
-    })
-  });
-}
-
-var styles$i = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
-
-function CollapsablePanel(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$topClassName = _ref.topClassName,
-    topClassName = _ref$topClassName === void 0 ? null : _ref$topClassName,
-    _ref$contentClassName = _ref.contentClassName,
-    contentClassName = _ref$contentClassName === void 0 ? null : _ref$contentClassName,
-    _ref$openedClassName = _ref.openedClassName,
-    openedClassName = _ref$openedClassName === void 0 ? null : _ref$openedClassName,
-    _ref$buttonClassName = _ref.buttonClassName,
-    buttonClassName = _ref$buttonClassName === void 0 ? null : _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__*/jsxRuntime.jsxs("div", {
-    className: classNames([styles$i.container, className, _defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null)]),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$i.top, topClassName]),
-      children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
-        withoutStyle: true,
-        className: classNames([styles$i.button, buttonClassName]),
-        icon: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-          icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
-          className: styles$i.icon
-        }),
-        iconPosition: "right",
-        labelClassName: styles$i.label,
-        onClick: onClick,
-        children: title
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$i.content, contentClassName]),
-      children: children
-    })]
-  });
-}
-
-function Close(_ref) {
-  var _ref$stroke = _ref.stroke,
-    stroke = _ref$stroke === void 0 ? 'currentColor' : _ref$stroke,
-    _ref$border = _ref.border,
-    border = _ref$border === void 0 ? 'rgba(0,0,0,0.67)' : _ref$border,
-    _ref$fill = _ref.fill,
-    fill = _ref$fill === void 0 ? '#fff' : _ref$fill,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "42.9",
-    height: "42.9",
-    viewBox: "0 0 42.9 42.9",
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsxs("g", {
-      transform: "translate(-352.531 -47.531)",
-      children: [border ? /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: border,
-        d: "M374,47.5c11.9,0,21.5,9.6,21.5,21.5s-9.6,21.5-21.5,21.5s-21.5-9.6-21.5-21.5c0,0,0,0,0,0 C352.5,57.1,362.1,47.5,374,47.5z"
-      }) : null, /*#__PURE__*/jsxRuntime.jsx("path", {
-        fill: fill,
-        d: "M374,50c10.5,0,19,8.5,19,19s-8.5,19-19,19s-19-8.5-19-19S363.5,50,374,50z"
-      }), /*#__PURE__*/jsxRuntime.jsx("g", {
-        transform: "translate(366.893 61.893)",
-        children: /*#__PURE__*/jsxRuntime.jsxs("g", {
-          transform: "translate(0 0)",
-          children: [/*#__PURE__*/jsxRuntime.jsx("path", {
-            fill: fill,
-            stroke: stroke,
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            d: "M14.2,0.3L0,13.9"
-          }), /*#__PURE__*/jsxRuntime.jsx("path", {
-            fill: fill,
-            stroke: stroke,
-            strokeWidth: "2",
-            strokeLinecap: "round",
-            d: "M0.3,0l13.7,14.2"
-          })]
-        })
-      })]
-    })
-  });
-}
-
-/* eslint-disable react/jsx-props-no-spreading */
-function Date$1(_ref) {
-  var _ref$date = _ref.date,
-    date = _ref$date === void 0 ? null : _ref$date,
-    _ref$withTime = _ref.withTime,
-    withTime = _ref$withTime === void 0 ? false : _ref$withTime,
-    _ref$timeSeparator = _ref.timeSeparator,
-    timeSeparator = _ref$timeSeparator === void 0 ? ', ' : _ref$timeSeparator;
-  var dateObject = React.useMemo(function () {
-    return dayjs(date).toDate();
-  }, [date]);
-  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedDate, {
-      value: dateObject,
-      year: "numeric",
-      month: "long",
-      day: "2-digit"
-    }), withTime ? timeSeparator : null, withTime ? /*#__PURE__*/jsxRuntime.jsx(reactIntl.FormattedTime, {
-      value: dateObject
-    }) : null]
-  });
-}
-
-/* eslint-disable react/no-danger */
-function Detector(_ref) {
-  var _ref$throttleDelay = _ref.throttleDelay,
-    throttleDelay = _ref$throttleDelay === void 0 ? null : _ref$throttleDelay,
-    _ref$threshold = _ref.threshold,
-    threshold = _ref$threshold === void 0 ? undefined : _ref$threshold,
-    _ref$onEnter = _ref.onEnter,
-    onEnter = _ref$onEnter === void 0 ? null : _ref$onEnter,
-    _ref$onLeave = _ref.onLeave,
-    onLeave = _ref$onLeave === void 0 ? null : _ref$onLeave,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? null : _ref$onChange,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _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__*/jsxRuntime.jsx("div", {
-    className: className,
-    ref: ref,
-    children: children
-  });
-}
-
-var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
-
-function PlaceholderBlock(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '3em' : _ref$height,
-    _ref$outline = _ref.outline,
-    outline = _ref$outline === void 0 ? false : _ref$outline,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$boxClassName = _ref.boxClassName,
-    boxClassName = _ref$boxClassName === void 0 ? null : _ref$boxClassName,
-    _ref$withInvertedColo = _ref.withInvertedColors,
-    withInvertedColors = _ref$withInvertedColo === void 0 ? true : _ref$withInvertedColo,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$h.container, className, _defineProperty(_defineProperty({}, styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)]),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$h.box, boxClassName]),
-      style: {
-        width: width,
-        height: height
-      },
-      children: children
-    })
-  });
-}
-
-var emptyObject = {};
-function ElementComponent(_ref) {
-  var name = _ref.name,
-    components = _ref.components,
-    _ref$props = _ref.props,
-    props = _ref$props === void 0 ? emptyObject : _ref$props,
-    _ref$isPlaceholder = _ref.isPlaceholder,
-    isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$placeholderProps = _ref.placeholderProps,
-    placeholderProps = _ref$placeholderProps === void 0 ? null : _ref$placeholderProps;
-  if (!name) {
-    return 'Bad component name';
-  }
-  if (isPlaceholder) {
-    // TODO: figure out what this did
-    // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, _objectSpread({}, placeholderProps));
-  }
-  var RealComponent = components[utils.pascalCase(name)];
-  if (!RealComponent) {
-    return 'Bad component';
-  }
-  return /*#__PURE__*/jsxRuntime.jsx(RealComponent, _objectSpread(_objectSpread({}, props), {}, {
-    className: className
-  }));
-}
-
-var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder"};
-
-function Empty(_ref) {
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$withoutBorder = _ref.withoutBorder,
-    withoutBorder = _ref$withoutBorder === void 0 ? false : _ref$withoutBorder,
-    _ref$light = _ref.light,
-    light = _ref$light === void 0 ? false : _ref$light,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$g.container, className, _defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light)]),
-    children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$g.middle,
-      children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-        children: children
-      })
-    })
-  });
-}
-
-var emptyArray$1 = [];
-var defaultFormats = ['eot', 'woff2', 'woff', {
-  name: 'otf',
-  format: 'opentype'
-}, {
-  name: 'ttf',
-  format: 'truetype'
-}, 'svg'];
-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;
-};
-function FontFaces(_ref4) {
-  var _ref4$fonts = _ref4.fonts,
-    fonts = _ref4$fonts === void 0 ? emptyArray$1 : _ref4$fonts,
-    _ref4$formats = _ref4.formats,
-    formats = _ref4$formats === void 0 ? defaultFormats : _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;
-    var fontKey = name.toLowerCase();
-    return _objectSpread(_objectSpread({}, fontFontFaces), {}, _defineProperty({}, fontKey, urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null), variants.reduce(function (variantFontFaces, _ref6) {
-      var weight = _ref6.weight,
-        style = _ref6.style,
-        _ref6$media = _ref6.media,
-        variantMedia = _ref6$media === void 0 ? null : _ref6$media;
-      if (variantMedia == null) {
-        return variantFontFaces;
-      }
-      var variantUrls = getUrlsFromMedia(variantMedia, formats);
-      var variantKey = "".concat(fontKey, "-").concat(weight !== null ? weight : 'normal', "-").concat(style !== null ? style : 'normal');
-      return _objectSpread(_objectSpread({}, variantFontFaces), {}, _defineProperty({}, variantKey, 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));
-    }, {}));
-
-    // return [
-    //     ...fontFontFaces,
-    //     urls !== null && urls.length > 0
-    //         ? `
-    //     @font-face {
-    //         font-family: "${name}";
-    //         src: ${urls.join(',')};
-    //     }
-    // `
-    //         : null,
-    //     ...(variants || []).map(({ weight, style, media: variantMedia = null }) => {
-    //         if (variantMedia == null) {
-    //             return null;
-    //         }
-    //         const variantUrls = getUrlsFromMedia(variantMedia, formats);
-    //         return variantUrls !== null && variantUrls.length > 0
-    //             ? `
-    //     @font-face {
-    //         font-family: "${name}";
-    //         ${weight !== null ? `font-weight: ${weight};` : ''}
-    //         ${style !== null ? `font-style: ${style};` : ''}
-    //         src: ${variantUrls.join(',')};
-    //     }
-    // `
-    //             : null;
-    //     }),
-    // ];
-  }, {});
-  return Object.keys(fontFaces).length > 0 ? /*#__PURE__*/jsxRuntime.jsx("style", {
-    type: "text/css",
-    dangerouslySetInnerHTML: {
-      __html: Object.keys(fontFaces).map(function (it) {
-        return fontFaces[it];
-      }).filter(function (it) {
-        return it !== null;
-      }).join('\n')
-    }
-  }) : null;
-}
-
-var styles$f = {"container":"micromag-core-partials-media-container"};
-
-/* eslint-disable react/jsx-props-no-spreading */
-function Media(_ref) {
-  var _ref$thumbnail = _ref.thumbnail,
-    thumbnail = _ref$thumbnail === void 0 ? null : _ref$thumbnail,
-    _ref$thumbnailAlign = _ref.thumbnailAlign,
-    thumbnailAlign = _ref$thumbnailAlign === void 0 ? 'top' : _ref$thumbnailAlign,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$thumbnailClassNa = _ref.thumbnailClassName,
-    thumbnailClassName = _ref$thumbnailClassNa === void 0 ? null : _ref$thumbnailClassNa,
-    _ref$bodyClassName = _ref.bodyClassName,
-    bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName,
-    _ref$titleClassName = _ref.titleClassName,
-    titleClassName = _ref$titleClassName === void 0 ? null : _ref$titleClassName;
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classNames(['card', styles$f.container, className]),
-    children: [typeof thumbnail === 'string' ? /*#__PURE__*/jsxRuntime.jsx("img", {
-      src: thumbnail,
-      alt: title,
-      className: classNames(['me-3', styles$f.thumbnail, thumbnailClassName, {
-        'align-self-start': thumbnailAlign === 'top',
-        'align-self-center': thumbnailAlign === 'center',
-        'align-self-end': thumbnailAlign === 'bottom'
-      }])
-    }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames(['card-body', styles$f.body, bodyClassName]),
-      children: [title !== null ? /*#__PURE__*/jsxRuntime.jsx("h5", {
-        className: classNames(['mt-0', 'text-truncate', styles$f.title, titleClassName]),
-        children: /*#__PURE__*/jsxRuntime.jsx(Label, {
-          children: title
-        })
-      }) : null, children]
-    }) : null]
-  });
-}
-
-/* eslint-disable react/no-array-index-key */
-function Meta(_ref) {
-  var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url,
-    _ref$metadata = _ref.metadata,
-    metadata = _ref$metadata === void 0 ? null : _ref$metadata,
-    _ref$fullTitle = _ref.fullTitle,
-    fullTitle = _ref$fullTitle === void 0 ? null : _ref$fullTitle,
-    _ref$suffix = _ref.suffix,
-    suffix = _ref$suffix === void 0 ? 'Micromag' : _ref$suffix,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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 ? null : _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 ? null : _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__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsx("title", {
-      children: realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'
-    }), description !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "description",
-      content: description
-    }) : null, language !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "language",
-      content: language
-    }) : null, keywords !== null && isString(keywords) ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "keywords",
-      content: keywords
-    }) : null, keywords !== null && isArray(keywords) ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "keywords",
-      content: keywords.join(',')
-    }) : null, canonical !== null ? /*#__PURE__*/jsxRuntime.jsx("link", {
-      rel: "canonical",
-      href: canonical
-    }) : null, faviconUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("link", {
-      rel: "icon",
-      type: "image/png",
-      href: faviconUrl
-    }) : null, rssUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("link", {
-      rel: "alternate",
-      type: "application/rss+xml",
-      href: rssUrl
-    }) : null, atomUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("link", {
-      rel: "alternate",
-      type: "application/atom+xml",
-      href: atomUrl
-    }) : null, imageUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:image",
-      content: imageUrl
-    }) : null, imageUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:image:url",
-      content: imageUrl
-    }) : null, imageWidth !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:image:width",
-      content: imageWidth
-    }) : null, imageHeight !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:image:height",
-      content: imageHeight
-    }) : null, realTitle !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:title",
-      content: realTitle
-    }) : null, description !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:description",
-      content: description
-    }) : null, url !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      property: "og:url",
-      content: url
-    }) : null, /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "twitter:card",
-      content: imageUrl !== null ? 'summary_large_image' : 'summary'
-    }), realTitle !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "twitter:title",
-      content: realTitle
-    }) : null, description !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "twitter:description",
-      content: description
-    }) : null, imageUrl !== null ? /*#__PURE__*/jsxRuntime.jsx("meta", {
-      name: "twitter:image",
-      content: imageUrl
-    }) : null, (microformats || []).map(function (it) {
-      return /*#__PURE__*/jsxRuntime.jsx("script", {
-        type: "application/ld+json",
-        id: "".concat(it["@type"], "-").concat(it.identifier),
-        async: true,
-        children: JSON.stringify(it)
-      }, "microformat-".concat(it["@type"], "-").concat(it.identifier));
-    }), children]
-  });
-}
-
-var styles$e = {"container":"micromag-core-partials-slideshow-container","items":"micromag-core-partials-slideshow-items","item":"micromag-core-partials-slideshow-item","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
-
-var emptyArray = [];
-function Slideshow(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyArray : _ref$items,
-    _ref$auto = _ref.auto,
-    auto = _ref$auto === void 0 ? true : _ref$auto,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 5000 : _ref$delay,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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__*/jsxRuntime.jsxs("div", {
-    className: classNames([styles$e.container, className]),
-    style: style,
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$e.items,
-      children: items.map(function (it, i) {
-        return /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: classNames([styles$e.item, _defineProperty(_defineProperty(_defineProperty({}, styles$e.prev, i < index), styles$e.current, i === index), styles$e.next, i > index)]),
-          children: it
-        }, "slide-".concat(i + 1));
-      })
-    }), children]
-  });
-}
-
-var styles$d = {"icon":"micromag-core-placeholders-icon"};
-
-/* eslint-disable react/prop-types */
-function AdFrame(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className;
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faAd.faAd,
-      className: styles$d.icon
-    })
-  });
-}
-
-/* eslint-disable react/prop-types */
-function AdImage(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className;
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faImage.faImage,
-      className: styles$d.icon
-    })
-  });
-}
-
-/* eslint-disable react/destructuring-assignment, react/prop-types */
-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__*/jsxRuntime.jsx(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(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"};
-
-function PlaceholderText(_ref) {
-  var _ref$lines = _ref.lines,
-    lines = _ref$lines === void 0 ? 1 : _ref$lines,
-    _ref$lineMargin = _ref.lineMargin,
-    lineMargin = _ref$lineMargin === void 0 ? 1 : _ref$lineMargin,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 16 : _ref$fontSize,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$withInvertedColo = _ref.withInvertedColors,
-    withInvertedColors = _ref$withInvertedColo === void 0 ? true : _ref$withInvertedColo;
-  var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
-  var oddWidth = isNumber(width) ? width * 0.9 : '80%';
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$c.container, className, _defineProperty({}, styles$c.withInvertedColors, withInvertedColors)]),
-    children: _toConsumableArray(Array(lines)).map(function (e, index) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: styles$c.line,
-        style: {
-          width: index % 2 === 0 ? width : oddWidth,
-          height: lineHeight,
-          marginTop: lineMargin,
-          marginBottom: lineMargin
-        }
-      }, "line-".concat(index));
-    })
-  });
-}
-
-/* eslint-disable react/destructuring-assignment, react/prop-types */
-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__*/jsxRuntime.jsx(PlaceholderBlock, {
-    outline: true,
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, {
-      line: 1,
-      height: "0.1em"
-    })
-  });
-}
-
-var _excluded$2 = ["width", "height", "className"];
-function Image(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faImage.faImage,
-      className: styles$d.icon
-    })
-  }));
-}
-
-function Line(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, 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"};
-
-function Map(props) {
-  return /*#__PURE__*/jsxRuntime.jsxs(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
-    width: "100%",
-    height: "100%",
-    className: classNames([styles$b.container, _defineProperty({}, props.className, props.className !== null)]),
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-      className: styles$b.icon
-    }), /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-      className: styles$b.icon
-    }), /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-      className: styles$b.icon
-    }), /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
-      className: styles$b.icon
-    })]
-  }));
-}
-
-function MapPath(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
-    width: "100%",
-    height: "70%",
-    className: classNames([props.className, styles$d.mapPath]),
-    children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faMapMarkedAlt.faMapMarkedAlt,
-      size: "lg",
-      className: styles$d.icon
-    })
-  }));
-}
-
-function Quote(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    className: classNames([props.className, styles$d.subtitle]),
-    height: 0.5,
-    lines: 6
-  }));
-}
-
-function ShortText(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    className: classNames([props.className, styles$d.shortText]),
-    height: 0.2,
-    lines: 2
-  }));
-}
-
-function Subtitle(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    className: classNames([props.className, styles$d.subtitle]),
-    height: 0.3,
-    lines: 1
-  }));
-}
-
-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__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    height: height,
-    lines: lines,
-    lineMargin: lineMargin,
-    className: classNames([className, styles$d.text])
-  }));
-}
-
-function Timeline(props) {
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    className: classNames([props.className, styles$d.timeline])
-  }));
-}
-
-function Title$1(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__*/jsxRuntime.jsx(PlaceholderText, _objectSpread(_objectSpread({}, props), {}, {
-    className: classNames([props.className, styles$d.title]),
-    height: height,
-    lines: lines,
-    lineMargin: lineMargin
-  }));
-}
-
-/* eslint-disable react/prop-types */
-function Video(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className;
-  return /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: className,
-    children: /*#__PURE__*/jsxRuntime.jsx(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"};
-
-/* eslint-disable react/prop-types */
-function Video360(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className;
-  return /*#__PURE__*/jsxRuntime.jsxs(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: classNames([styles$a.container, className]),
-    boxClassName: styles$a.box,
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faVideo.faVideo,
-      className: styles$a.icon
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$a.label,
-      children: "360"
-    })]
-  });
-}
-
-/* eslint-disable react/prop-types */
-function VideoLoop(_ref) {
-  var width = _ref.width,
-    height = _ref.height,
-    className = _ref.className;
-  return /*#__PURE__*/jsxRuntime.jsxs(PlaceholderBlock, {
-    width: width,
-    height: height,
-    className: className,
-    children: [/*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faPlay.faPlay,
-      className: styles$d.icon
-    }), /*#__PURE__*/jsxRuntime.jsx(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"};
-
-/* eslint-disable react/jsx-props-no-spreading */
-function ScreenSizer(_ref) {
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$fit = _ref.fit,
-    fit = _ref$fit === void 0 ? null : _ref$fit,
-    _ref$screenWidth = _ref.screenWidth,
-    screenWidth = _ref$screenWidth === void 0 ? 320 : _ref$screenWidth,
-    _ref$screenHeight = _ref.screenHeight,
-    screenHeight = _ref$screenHeight === void 0 ? 480 : _ref$screenHeight,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _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__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$9.container, className]),
-    ref: !hasSize ? refContainer : null,
-    children: hasFrameSize ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$9.frame,
-      style: {
-        width: frameWidth,
-        height: frameHeight
-      },
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: styles$9.screen,
-        style: {
-          width: screenWidth,
-          height: screenHeight,
-          transform: screenTransform
-        },
-        children: /*#__PURE__*/jsxRuntime.jsx(contexts.ScreenSizeProvider, {
-          size: screenSize,
-          children: /*#__PURE__*/React.cloneElement(children, {
-            width: screenWidth,
-            height: screenHeight
-          })
-        })
-      })
-    }) : null
-  });
-}
-
-var styles$8 = {"container":"micromag-core-screens-screen-container"};
-
-function Screen(_ref) {
-  var screen = _ref.screen,
-    _ref$renderContext = _ref.renderContext,
-    renderContext = _ref$renderContext === void 0 ? null : _ref$renderContext,
-    _ref$screenState = _ref.screenState,
-    screenState = _ref$screenState === void 0 ? null : _ref$screenState,
-    _ref$index = _ref.index,
-    index = _ref$index === void 0 ? null : _ref$index,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? true : _ref$active,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? false : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$components = _ref.components,
-    components = _ref$components === void 0 ? null : _ref$components,
-    _ref$component = _ref.component,
-    component = _ref$component === void 0 ? null : _ref$component,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$mediaRef = _ref.mediaRef,
-    mediaRef = _ref$mediaRef === void 0 ? null : _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__*/jsxRuntime.jsx(contexts.ScreenProvider, {
-    data: screen,
-    renderContext: renderContext,
-    screenState: screenState,
-    children: ScreenComponent !== null ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames([styles$8.container, className]),
-      children: /*#__PURE__*/jsxRuntime.jsx(ScreenComponent, _objectSpread(_objectSpread({}, screen), {}, {
-        index: index,
-        active: active,
-        current: current,
-        preload: preload,
-        mediaRef: mediaRef
-      }))
-    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: className,
-      children: component
-    })
-  });
-}
-
-var styles$7 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
-
-var _excluded$1 = ["screen", "layout", "screenWidth", "screenHeight", "screenState", "withSize", "className"];
-function ScreenPlaceholder(_ref) {
-  var screen = _ref.screen,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? undefined : _ref$layout,
-    _ref$screenWidth = _ref.screenWidth,
-    screenWidth = _ref$screenWidth === void 0 ? 100 : _ref$screenWidth,
-    _ref$screenHeight = _ref.screenHeight,
-    screenHeight = _ref$screenHeight === void 0 ? 150 : _ref$screenHeight,
-    _ref$screenState = _ref.screenState,
-    screenState = _ref$screenState === void 0 ? null : _ref$screenState,
-    _ref$withSize = _ref.withSize,
-    withSize = _ref$withSize === void 0 ? false : _ref$withSize,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    props = _objectWithoutProperties(_ref, _excluded$1);
-  var screenElement = /*#__PURE__*/jsxRuntime.jsx(Screen, _objectSpread({
-    screen: screen,
-    renderContext: "placeholder",
-    screenState: screenState,
-    layout: layout,
-    className: classNames([styles$7.screen, _defineProperty({}, className, !withSize)])
-  }, props));
-  return withSize ? /*#__PURE__*/jsxRuntime.jsx(ScreenSizer, {
-    className: className,
-    screenWidth: screenWidth,
-    screenHeight: screenHeight,
-    children: screenElement
-  }) : screenElement;
-}
-
-var styles$6 = {"screen":"micromag-core-screens-preview-screen"};
-
-var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize", "fit", "hidden"];
-function ScreenPreview(_ref) {
-  var screen = _ref.screen,
-    _ref$screenState = _ref.screenState,
-    screenState = _ref$screenState === void 0 ? null : _ref$screenState,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? undefined : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? undefined : _ref$height,
-    _ref$screenWidth = _ref.screenWidth,
-    screenWidth = _ref$screenWidth === void 0 ? undefined : _ref$screenWidth,
-    _ref$screenHeight = _ref.screenHeight,
-    screenHeight = _ref$screenHeight === void 0 ? undefined : _ref$screenHeight,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$withSize = _ref.withSize,
-    withSize = _ref$withSize === void 0 ? false : _ref$withSize,
-    fit = _ref.fit,
-    _ref$hidden = _ref.hidden,
-    hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var screenElement = /*#__PURE__*/jsxRuntime.jsx(Screen, _objectSpread({
-    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__*/jsxRuntime.jsx("div", {});
-  var screenWithSize = withSize ? /*#__PURE__*/jsxRuntime.jsx(ScreenSizer, {
-    className: className,
-    screenWidth: screenWidth,
-    screenHeight: screenHeight,
-    width: width,
-    height: height,
-    fit: fit,
-    children: element
-  }) : element;
-  return screenWithSize;
-}
-
-var styles$5 = {"container":"micromag-core-placeholders-conversation-container","icon":"micromag-core-placeholders-conversation-icon","message":"micromag-core-placeholders-conversation-message","placeholderMessage0":"micromag-core-placeholders-conversation-placeholderMessage0","placeholderMessage1":"micromag-core-placeholders-conversation-placeholderMessage1","placeholderMessage2":"micromag-core-placeholders-conversation-placeholderMessage2","placeholderMessage3":"micromag-core-placeholders-conversation-placeholderMessage3"};
-
-function Conversation() {
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: styles$5.container,
-    children: [_toConsumableArray(Array(4)).map(function (e, idx) {
-      return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames([styles$5.message, styles$5["placeholderMessage".concat(idx)]])
-      }, "message-".concat(idx + 1));
-    }), /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-      icon: faCommentDots.faCommentDots,
-      className: styles$5.icon
-    })]
-  });
-}
-
-/* eslint-disable react/prop-types */
-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__*/jsxRuntime.jsx(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"};
-
-function Answer$1(_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__*/jsxRuntime.jsxs("div", {
-    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.good, good)]),
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$4.answer,
-      children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-        className: styles$4.answerIcon,
-        icon: good ? faCheck.faCheck : faTimes.faTimes
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, {
-      outline: true,
-      width: width,
-      height: height,
-      className: styles$4.block,
-      children: /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, {
-        line: 1,
-        height: "0.2em"
-      })
-    })]
-  });
-}
-
-var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item"};
-
-function Title(props) {
-  return /*#__PURE__*/jsxRuntime.jsxs(PlaceholderBlock, _objectSpread(_objectSpread({}, props), {}, {
-    width: "100%",
-    height: "100%",
-    className: classNames([styles$3.container, _defineProperty({}, props.className, props.className !== null)]),
-    boxClassName: styles$3.box,
-    children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$3.item,
-      children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-        icon: faCircle.faCircle,
-        className: styles$3.icon
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$3.item,
-      children: /*#__PURE__*/jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
-        icon: faCircle.faCircle,
-        className: styles$3.icon
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$3.item,
-      children: /*#__PURE__*/jsxRuntime.jsx(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"};
-
-/* eslint-disable react/destructuring-assignment, react/prop-types */
-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__*/jsxRuntime.jsxs("div", {
-    className: classNames([styles$2.container, className]),
-    children: [/*#__PURE__*/jsxRuntime.jsx(PlaceholderBlock, {
-      outline: true,
-      width: width,
-      height: height,
-      className: styles$2.block,
-      children: /*#__PURE__*/jsxRuntime.jsx(PlaceholderText, {
-        line: 1,
-        height: "0.2em"
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: styles$2.percent,
-      children: /*#__PURE__*/jsxRuntime.jsx(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
-});
-
-function ScreenElement(_ref) {
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? null : _ref$placeholder,
-    _ref$empty = _ref.empty,
-    empty = _ref$empty === void 0 ? null : _ref$empty,
-    _ref$emptyLabel = _ref.emptyLabel,
-    emptyLabel = _ref$emptyLabel === void 0 ? null : _ref$emptyLabel,
-    _ref$preview = _ref.preview,
-    preview = _ref$preview === void 0 ? null : _ref$preview,
-    _ref$isEmpty = _ref.isEmpty,
-    isEmpty = _ref$isEmpty === void 0 ? false : _ref$isEmpty,
-    _ref$placeholderProps = _ref.placeholderProps,
-    placeholderProps = _ref$placeholderProps === void 0 ? null : _ref$placeholderProps,
-    _ref$emptyClassName = _ref.emptyClassName,
-    emptyClassName = _ref$emptyClassName === void 0 ? null : _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__*/jsxRuntime.jsx(PlaceholderComponent, _objectSpread({}, placeholderProps)) : placeholder;
-  }
-  if (isEdit && isEmpty) {
-    return empty !== null ? empty : /*#__PURE__*/jsxRuntime.jsx(Empty, {
-      className: emptyClassName,
-      children: emptyLabel
-    });
-  }
-  if (isPreview && preview !== null) {
-    return preview;
-  }
-  return children;
-}
-
-var styles$1 = {"container":"micromag-core-screens-container","screen":"micromag-core-screens-screen","visible":"micromag-core-screens-visible"};
-
-function Screens(_ref) {
-  var screens = _ref.screens,
-    _ref$screen = _ref.screen,
-    screenId = _ref$screen === void 0 ? null : _ref$screen,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames([styles$1.container, className]),
-    children: screens.map(function (screen) {
-      var id = screen.id;
-      return /*#__PURE__*/jsxRuntime.jsx(Screen, {
-        screen: screen,
-        className: classNames([styles$1.screen, _defineProperty({}, styles$1.visible, screenId === id)])
-      }, "screen-".concat(id));
-    })
-  });
-}
-
-var styles = {"container":"micromag-core-transitions-transition-container","fullscreen":"micromag-core-transitions-transition-fullscreen"};
-
-function Transition(_ref) {
-  var _ref$fullscreen = _ref.fullscreen,
-    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
-    _ref$from = _ref.from,
-    from = _ref$from === void 0 ? null : _ref$from,
-    _ref$to = _ref.to,
-    to = _ref$to === void 0 ? null : _ref$to,
-    _ref$playing = _ref.playing,
-    playing = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? null : _ref$direction,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 0 : _ref$delay,
-    _ref$reversible = _ref.reversible,
-    reversible = _ref$reversible === void 0 ? true : _ref$reversible,
-    _ref$duration = _ref.duration,
-    duration = _ref$duration === void 0 ? undefined : _ref$duration,
-    _ref$easing = _ref.easing,
-    easing = _ref$easing === void 0 ? undefined : _ref$easing,
-    _ref$config = _ref.config,
-    config = _ref$config === void 0 ? null : _ref$config,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _ref$children,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$onStart = _ref.onStart,
-    onStart = _ref$onStart === void 0 ? null : _ref$onStart,
-    _ref$onComplete = _ref.onComplete,
-    onComplete = _ref$onComplete === void 0 ? null : _ref$onComplete;
-  // In react-spring v10, useSpring(fn) without deps resets the spring on every render
-  // via a layout effect. Passing a SpringRef prevents this reset behavior.
-  var springRef = core.useSpringRef();
-  var _useSpring = core.useSpring(function () {
-      return {
-        ref: springRef
-      };
-    }),
-    _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__*/jsxRuntime.jsx(web.animated.div, {
-    style: _objectSpread({}, springProps),
-    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)]),
-    children: children
-  });
-}
-
-function Fade(props) {
-  var from = React.useMemo(function () {
-    return {
-      opacity: 0
-    };
-  }, []);
-  var to = React.useMemo(function () {
-    return {
-      opacity: 1
-    };
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(Transition, _objectSpread(_objectSpread({}, props), {}, {
-    from: from,
-    to: to
-  }));
-}
-
-function Scale(props) {
-  var from = React.useMemo(function () {
-    return {
-      transform: 'scale(0)'
-    };
-  }, []);
-  var to = React.useMemo(function () {
-    return {
-      transform: 'scale(1)'
-    };
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsx(Transition, _objectSpread(_objectSpread({}, props), {}, {
-    from: from,
-    to: to
-  }));
-}
-
-var TransitionComponents = {
-  Fade: Fade,
-  Scale: Scale
-};
-
-function Transitions(_ref) {
-  var _ref$fullscreen = _ref.fullscreen,
-    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
-    _ref$playing = _ref.playing,
-    playing = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 0 : _ref$delay,
-    _ref$transitions = _ref.transitions,
-    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
-    _ref$onComplete = _ref.onComplete,
-    onComplete = _ref$onComplete === void 0 ? null : _ref$onComplete,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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__*/jsxRuntime.jsx(TransitionOut, _objectSpread(_objectSpread({
-    fullscreen: fullscreen,
-    playing: finalPlaying,
-    direction: "out"
-  }, transitionOutProps), {}, {
-    children: children
-  })) : children;
-  return TransitionIn !== null && !disabled ? /*#__PURE__*/jsxRuntime.jsx(TransitionIn, _objectSpread(_objectSpread({
-    fullscreen: fullscreen,
-    playing: finalPlaying,
-    direction: !sameTransitionInOut ? 'in' : null
-  }, transitionInProps), {}, {
-    children: renderTransitionOut
-  })) : renderTransitionOut;
-}
-
-function TransitionsStagger(_ref) {
-  var _ref$transitions = _ref.transitions,
-    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
-    _ref$stagger = _ref.stagger,
-    stagger = _ref$stagger === void 0 ? 0 : _ref$stagger,
-    _ref$playing = _ref.playing,
-    playing = _ref$playing === void 0 ? false : _ref$playing,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$delay = _ref.delay,
-    delay = _ref$delay === void 0 ? 0 : _ref$delay,
-    _ref$fullscreen = _ref.fullscreen,
-    fullscreen = _ref$fullscreen === void 0 ? false : _ref$fullscreen,
-    _ref$children = _ref.children,
-    children = _ref$children === void 0 ? null : _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__*/jsxRuntime.jsx(Transitions, {
-      transitions: transitions,
-      delay: delay + validIndex * stagger,
-      playing: playing,
-      fullscreen: fullscreen,
-      children: child
-    });
-    validIndex += 1;
-    return el;
-  });
-  return elements;
-}
-
-function HighlightStyle(_ref) {
-  var _ref$selector = _ref.selector,
-    selector = _ref$selector === void 0 ? null : _ref$selector,
-    _ref$highlightSelecto = _ref.highlightSelector,
-    highlightSelector = _ref$highlightSelecto === void 0 ? 'mark' : _ref$highlightSelecto,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? null : _ref$style;
-  return style !== null ? /*#__PURE__*/jsxRuntime.jsx("style", {
-    type: "text/css",
-    dangerouslySetInnerHTML: {
-      __html: "".concat([selector, highlightSelector].filter(function (it) {
-        return it !== null;
-      }).join(' '), "{").concat(utils.convertStyleToString(style), "}")
-    }
-  }) : null;
-}
-
-function LinkStyle(_ref) {
-  var _ref$selector = _ref.selector,
-    selector = _ref$selector === void 0 ? null : _ref$selector,
-    _ref$linkSelector = _ref.linkSelector,
-    linkSelector = _ref$linkSelector === void 0 ? 'a' : _ref$linkSelector,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? null : _ref$style;
-  return style !== null ? /*#__PURE__*/jsxRuntime.jsx("style", {
-    type: "text/css",
-    dangerouslySetInnerHTML: {
-      __html: "".concat([selector, linkSelector].filter(function (it) {
-        return it !== null;
-      }).join(' '), "{").concat(utils.convertStyleToString(style), "}")
-    }
-  }) : null;
-}
-
-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;
-exports.ScreenElement = ScreenElement;
-exports.ScreenPlaceholder = ScreenPlaceholder;
-exports.ScreenPreview = ScreenPreview;
-exports.ScreenSizer = ScreenSizer;
-exports.Screens = Screens;
-exports.Slideshow = Slideshow;
-exports.Spinner = Spinner;
-exports.Tabs = TabsMenu;
-exports.Transitions = Transitions;
-exports.TransitionsStagger = TransitionsStagger;
-exports.UnmuteIcon = UnmuteIcon;