@micromag/core 0.3.7 → 0.3.10

package/es/components.js

@@ -11,8 +11,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleLeft, faAngleUp, faAngleDown, faAd, faImage, faMusic, faMapMarkerAlt, faMapMarkedAlt, faVideo, faPlay, faRedo, faCommentDots, faCheck, faTimes, faPercent } from '@fortawesome/free-solid-svg-icons';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useForm, useDocumentEvent, useIntersectionObserver } from '@micromag/core/hooks';
-import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, useScreenComponent, ScreenProvider, ScreenSizeProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
+import { useForm, useDocumentEvent, useIntersectionObserver, useResizeObserver } from '@micromag/core/hooks';
+import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import ReactDOM from 'react-dom';
@@ -25,17 +25,18 @@ import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
 import 'snake-case';
 import isNumber from 'lodash/isNumber';
+import { getSizeWithinBounds } from '@folklore/size';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$J = {
+var propTypes$K = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$J = {
+var defaultProps$K = {
   isHtml: false,
   values: {}
 };
@@ -50,13 +51,13 @@ var Label = function Label(_ref) {
   }, children)) : children;
 };
 
-Label.propTypes = propTypes$J;
-Label.defaultProps = defaultProps$J;
+Label.propTypes = propTypes$K;
+Label.defaultProps = defaultProps$K;
 
-var styles$u = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+var styles$v = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
-var _excluded$8 = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$I = {
+var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$J = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -89,7 +90,7 @@ var propTypes$I = {
 
   })])
 };
-var defaultProps$I = {
+var defaultProps$J = {
   type: 'button',
   theme: null,
   size: null,
@@ -151,7 +152,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
@@ -160,25 +161,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$u.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$v.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$u.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$v.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$u.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$v.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$u.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$v.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$u.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$v.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames([(_ref7 = {
     btn: withStyle
-  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7), styles$u.container, (_ref8 = {}, _defineProperty(_ref8, styles$u.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$u.withIcon, hasIcon), _defineProperty(_ref8, styles$u.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$u.withText, text !== null), _defineProperty(_ref8, styles$u.withShadow, withShadow), _defineProperty(_ref8, styles$u.isSmall, small), _defineProperty(_ref8, styles$u.isBig, big), _defineProperty(_ref8, styles$u.isLink, href !== null), _defineProperty(_ref8, styles$u.asLink, asLink), _defineProperty(_ref8, styles$u.isDisabled, disabled), _defineProperty(_ref8, styles$u.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7), styles$v.container, (_ref8 = {}, _defineProperty(_ref8, styles$v.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$v.withIcon, hasIcon), _defineProperty(_ref8, styles$v.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$v.withText, text !== null), _defineProperty(_ref8, styles$v.withShadow, withShadow), _defineProperty(_ref8, styles$v.isSmall, small), _defineProperty(_ref8, styles$v.isBig, big), _defineProperty(_ref8, styles$v.isLink, href !== null), _defineProperty(_ref8, styles$v.asLink, asLink), _defineProperty(_ref8, styles$v.isDisabled, disabled), _defineProperty(_ref8, styles$v.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$u.linkDisabled, disabled)]);
+    }, styles$v.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -205,13 +206,13 @@ var Button$1 = function Button(_ref) {
   }), content);
 };
 
-Button$1.propTypes = propTypes$I;
-Button$1.defaultProps = defaultProps$I;
+Button$1.propTypes = propTypes$J;
+Button$1.defaultProps = defaultProps$J;
 
-var styles$t = {};
+var styles$u = {};
 
-var _excluded$7 = ["className", "onClick", "theme"];
-var propTypes$H = {
+var _excluded$9 = ["className", "onClick", "theme"];
+var propTypes$I = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -220,7 +221,7 @@ var propTypes$H = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$H = {
+var defaultProps$I = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -239,7 +240,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$t.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$u.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -250,11 +251,11 @@ var Buttons = function Buttons(_ref) {
         _onClick = _button$onClick === void 0 ? null : _button$onClick,
         _button$theme = button.theme,
         buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties(button, _excluded$7);
+        buttonProps = _objectWithoutProperties(button, _excluded$9);
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$t.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$u.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -270,20 +271,20 @@ var Buttons = function Buttons(_ref) {
   }));
 };
 
-Buttons.propTypes = propTypes$H;
-Buttons.defaultProps = defaultProps$H;
+Buttons.propTypes = propTypes$I;
+Buttons.defaultProps = defaultProps$I;
 
-var _excluded$6 = ["className"];
-var propTypes$G = {
+var _excluded$8 = ["className"];
+var propTypes$H = {
   className: PropTypes$1.string
 };
-var defaultProps$G = {
+var defaultProps$H = {
   className: null
 };
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
@@ -295,12 +296,12 @@ var BackButton = function BackButton(_ref) {
   }, props));
 };
 
-BackButton.propTypes = propTypes$G;
-BackButton.defaultProps = defaultProps$G;
+BackButton.propTypes = propTypes$H;
+BackButton.defaultProps = defaultProps$H;
 
-var _excluded$5 = ["type"],
+var _excluded$7 = ["type"],
     _excluded2 = ["component", "id", "settings"];
-var propTypes$F = {
+var propTypes$G = {
   name: PropTypes$1.string,
   // .isRequired,
   value: PropTypes.component,
@@ -314,7 +315,7 @@ var propTypes$F = {
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$F = {
+var defaultProps$G = {
   name: null,
   form: null,
   formComponents: {},
@@ -342,7 +343,7 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$5);
+      fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
 
   var _ref3 = (type !== null ? fieldsManager.getDefinition(type) || null : null) || _objectSpread({}, field),
       _ref3$component = _ref3.component,
@@ -395,12 +396,12 @@ var FieldForm = function FieldForm(_ref) {
   }, formProps))) : null;
 };
 
-FieldForm.propTypes = propTypes$F;
-FieldForm.defaultProps = defaultProps$F;
+FieldForm.propTypes = propTypes$G;
+FieldForm.defaultProps = defaultProps$G;
 
-var styles$s = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$t = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$E = {
+var propTypes$F = {
   action: PropTypes$1.string.isRequired,
   method: PropTypes$1.string,
   fields: PropTypes.formFields,
@@ -427,7 +428,7 @@ var propTypes$E = {
   actionsClassName: PropTypes$1.string,
   cancelClassName: PropTypes$1.string
 };
-var defaultProps$E = {
+var defaultProps$F = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -577,7 +578,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React.createElement("form", {
     action: action,
-    className: classNames([styles$s.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$t.container, _defineProperty({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
@@ -587,7 +588,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$s.panel]),
+    className: classNames(['w-100', styles$t.panel]),
     key: "field"
   }, /*#__PURE__*/React.createElement(FieldForm, {
     name: fieldParams.replace(/\//g, '.'),
@@ -603,11 +604,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames([styles$s.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames([styles$t.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$s.actions, (_ref4 = {}, _defineProperty(_ref4, styles$s[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames([styles$t.actions, (_ref4 = {}, _defineProperty(_ref4, styles$t[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -624,7 +625,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$s.buttons
+    className: styles$t.buttons
   }) : /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
     theme: "primary",
@@ -640,13 +641,13 @@ var Form = function Form(_ref) {
   })) : null) : null);
 };
 
-Form.propTypes = propTypes$E;
-Form.defaultProps = defaultProps$E;
+Form.propTypes = propTypes$F;
+Form.defaultProps = defaultProps$F;
 
-var styles$r = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$s = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
-var _excluded$4 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$D = {
+var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
+var propTypes$E = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
   target: PropTypes$1.string,
@@ -655,7 +656,7 @@ var propTypes$D = {
   withoutStyle: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$D = {
+var defaultProps$E = {
   href: '',
   external: false,
   target: '_blank',
@@ -673,24 +674,24 @@ var Link = function Link(_ref) {
       rel = _ref.rel,
       className = _ref.className,
       withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   return external ? /*#__PURE__*/React.createElement("a", Object.assign({
-    className: classNames([className, _defineProperty({}, styles$r.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$s.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(Link$1, Object.assign({
-    className: classNames([className, _defineProperty({}, styles$r.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$s.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
 
-Link.propTypes = propTypes$D;
-Link.defaultProps = defaultProps$D;
+Link.propTypes = propTypes$E;
+Link.defaultProps = defaultProps$E;
 
-var _excluded$3 = ["label", "className"];
-var propTypes$C = {
+var _excluded$5 = ["label", "className"];
+var propTypes$D = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
   image: PropTypes$1.node,
@@ -719,7 +720,7 @@ var propTypes$C = {
   onClickBody: PropTypes$1.func,
   onClickFooter: PropTypes$1.func
 };
-var defaultProps$C = {
+var defaultProps$D = {
   href: null,
   header: null,
   image: null,
@@ -777,7 +778,7 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
         _ref2$className = _ref2.className,
         linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties(_ref2, _excluded$3);
+        linkProps = _objectWithoutProperties(_ref2, _excluded$5);
 
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -840,15 +841,15 @@ var Card = function Card(_ref) {
   }, cardInner);
 };
 
-Card.propTypes = propTypes$C;
-Card.defaultProps = defaultProps$C;
+Card.propTypes = propTypes$D;
+Card.defaultProps = defaultProps$D;
 
-var propTypes$B = {
+var propTypes$C = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
   className: PropTypes$1.string
 };
-var defaultProps$B = {
+var defaultProps$C = {
   animated: true,
   color: 'currentColor',
   className: null
@@ -913,19 +914,19 @@ var Spinner = function Spinner(_ref) {
   }) : null))));
 };
 
-Spinner.propTypes = propTypes$B;
-Spinner.defaultProps = defaultProps$B;
+Spinner.propTypes = propTypes$C;
+Spinner.defaultProps = defaultProps$C;
 
-var styles$q = {};
+var styles$r = {};
 
-var _excluded$2 = ["description", "loading", "children", "className"];
-var propTypes$A = {
+var _excluded$4 = ["description", "loading", "children", "className"];
+var propTypes$B = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$A = {
+var defaultProps$B = {
   description: null,
   loading: false,
   children: null,
@@ -937,19 +938,19 @@ var FormPanel = function FormPanel(_ref) {
       loading = _ref.loading,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$2);
+      props = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React.createElement(Card, Object.assign({
-    className: classNames([styles$q.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$r.container, _defineProperty({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
 
-FormPanel.propTypes = propTypes$A;
-FormPanel.defaultProps = defaultProps$A;
+FormPanel.propTypes = propTypes$B;
+FormPanel.defaultProps = defaultProps$B;
 
-var styles$p = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
+var styles$q = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
-var propTypes$z = {
+var propTypes$A = {
   items: PropTypes.menuItems,
   theme: PropTypes.bootstrapThemes,
   separator: PropTypes$1.oneOf([null, 'arrow']),
@@ -957,7 +958,7 @@ var propTypes$z = {
   noWrap: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$z = {
+var defaultProps$A = {
   items: [],
   theme: null,
   separator: null,
@@ -976,7 +977,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   return /*#__PURE__*/React.createElement("nav", {
     className: className
   }, /*#__PURE__*/React.createElement("ol", {
-    className: classNames([styles$p.container, 'breadcrumb', 'mb-0', {
+    className: classNames([styles$q.container, 'breadcrumb', 'mb-0', {
       'p-0': withoutBar,
       'bg-transparent': withoutBar,
       'rounded-0': withoutBar,
@@ -994,7 +995,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return /*#__PURE__*/React.createElement("li", {
       className: classNames(['breadcrumb-item', (_ref3 = {
         active: active
-      }, _defineProperty(_ref3, styles$p.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, _defineProperty(_ref3, styles$q.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
       key: "item-".concat(index)
     }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(Link$1, {
       to: url,
@@ -1007,13 +1008,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
   })));
 };
 
-Breadcrumb.propTypes = propTypes$z;
-Breadcrumb.defaultProps = defaultProps$z;
+Breadcrumb.propTypes = propTypes$A;
+Breadcrumb.defaultProps = defaultProps$A;
 
-var styles$o = {"start":"micromag-core-menus-dropdown-start","end":"micromag-core-menus-dropdown-end"};
+var styles$p = {"start":"micromag-core-menus-dropdown-start","end":"micromag-core-menus-dropdown-end"};
 
-var _excluded$1 = ["id", "type", "className", "label", "children", "onClick", "active"];
-var propTypes$y = {
+var _excluded$3 = ["id", "type", "className", "label", "children", "onClick", "active"];
+var propTypes$z = {
   items: PropTypes.menuItems,
   children: PropTypes$1.node,
   visible: PropTypes$1.bool,
@@ -1023,7 +1024,7 @@ var propTypes$y = {
   onClickItem: PropTypes$1.func,
   onClickOutside: PropTypes$1.func
 };
-var defaultProps$y = {
+var defaultProps$z = {
   items: [],
   children: null,
   visible: false,
@@ -1053,7 +1054,7 @@ var Dropdown = function Dropdown(_ref) {
   }, [refContainer.current, onClickOutside]);
   useDocumentEvent('click', onDocumentClick, visible);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, styles$o[align], align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, styles$p[align], align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _ref3;
@@ -1071,7 +1072,7 @@ var Dropdown = function Dropdown(_ref) {
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
         _it$active = it.active,
         active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties(it, _excluded$1);
+        itemProps = _objectWithoutProperties(it, _excluded$3);
 
     var ItemComponent = 'div';
 
@@ -1107,11 +1108,11 @@ var Dropdown = function Dropdown(_ref) {
   }));
 };
 
-Dropdown.propTypes = propTypes$y;
-Dropdown.defaultProps = defaultProps$y;
+Dropdown.propTypes = propTypes$z;
+Dropdown.defaultProps = defaultProps$z;
 
-var _excluded = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
-var propTypes$x = {
+var _excluded$2 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
+var propTypes$y = {
   items: PropTypes.menuItems,
   tagName: PropTypes$1.string,
   itemTagName: PropTypes$1.string,
@@ -1130,7 +1131,7 @@ var propTypes$x = {
   dropdownLinkClassName: PropTypes$1.string,
   dropdownAlign: PropTypes.dropdownAlign
 };
-var defaultProps$x = {
+var defaultProps$y = {
   items: [],
   tagName: 'ul',
   itemTagName: 'li',
@@ -1200,7 +1201,7 @@ var Menu = function Menu(_ref) {
         active = _it$active === void 0 ? false : _it$active,
         _it$onClick = it.onClick,
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties(it, _excluded);
+        itemProps = _objectWithoutProperties(it, _excluded$2);
 
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -1254,10 +1255,10 @@ var Menu = function Menu(_ref) {
   }));
 };
 
-Menu.propTypes = propTypes$x;
-Menu.defaultProps = defaultProps$x;
+Menu.propTypes = propTypes$y;
+Menu.defaultProps = defaultProps$y;
 
-var propTypes$w = {
+var propTypes$x = {
   brand: PropTypes$1.node,
   brandLink: PropTypes$1.string,
   breadcrumbs: PropTypes$1.node,
@@ -1271,7 +1272,7 @@ var propTypes$w = {
   brandClassName: PropTypes$1.string,
   breadCrumbsClassName: PropTypes$1.string
 };
-var defaultProps$w = {
+var defaultProps$x = {
   brand: null,
   brandLink: null,
   breadcrumbs: null,
@@ -1345,10 +1346,10 @@ var Navbar = function Navbar(_ref) {
   }, children) : children));
 };
 
-Navbar.propTypes = propTypes$w;
-Navbar.defaultProps = defaultProps$w;
+Navbar.propTypes = propTypes$x;
+Navbar.defaultProps = defaultProps$x;
 
-var styles$n = {};
+var styles$o = {};
 
 var messages = defineMessages({
   previous: {
@@ -1366,7 +1367,7 @@ var messages = defineMessages({
     }]
   }
 });
-var propTypes$v = {
+var propTypes$w = {
   page: PropTypes$1.number,
   total: PropTypes$1.number,
   url: PropTypes$1.string,
@@ -1377,7 +1378,7 @@ var propTypes$v = {
   linkClassName: PropTypes$1.string,
   onClickPage: PropTypes$1.func
 };
-var defaultProps$v = {
+var defaultProps$w = {
   page: 1,
   total: 1,
   url: null,
@@ -1408,7 +1409,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
   });
 
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$n.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$o.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {
     className: classNames(['pagination', _defineProperty({}, paginationClassName, paginationClassName !== null)])
   }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
@@ -1451,12 +1452,12 @@ var PaginationMenu = function PaginationMenu(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
 };
 
-PaginationMenu.propTypes = propTypes$v;
-PaginationMenu.defaultProps = defaultProps$v;
+PaginationMenu.propTypes = propTypes$w;
+PaginationMenu.defaultProps = defaultProps$w;
 
-var styles$m = {"container":"micromag-core-menus-tabs-container"};
+var styles$n = {"container":"micromag-core-menus-tabs-container"};
 
-var propTypes$u = {
+var propTypes$v = {
   items: PropTypes.menuItems,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -1465,7 +1466,7 @@ var propTypes$u = {
   className: PropTypes$1.string,
   onClickItem: PropTypes$1.func
 };
-var defaultProps$u = {
+var defaultProps$v = {
   items: [],
   size: null,
   theme: 'secondary',
@@ -1484,29 +1485,29 @@ var TabsMenu = function TabsMenu(_ref) {
       className = _ref.className,
       onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$m.container, _defineProperty({}, className, className)])
+    className: classNames([styles$n.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement(Buttons, {
     buttons: items,
     size: size,
     theme: theme,
     renderButton: renderItemButton,
     onClickButton: onClickItem,
-    className: styles$m.buttons,
-    buttonClassName: classNames([styles$m.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
+    className: styles$n.buttons,
+    buttonClassName: classNames([styles$n.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
   }));
 };
 
-TabsMenu.propTypes = propTypes$u;
-TabsMenu.defaultProps = defaultProps$u;
+TabsMenu.propTypes = propTypes$v;
+TabsMenu.defaultProps = defaultProps$v;
 
-var styles$l = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
+var styles$m = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
-var propTypes$t = {
+var propTypes$u = {
   modals: PropTypes.modals.isRequired,
   setModalsContainer: PropTypes$1.func.isRequired,
   className: PropTypes$1.string
 };
-var defaultProps$t = {
+var defaultProps$u = {
   className: null
 };
 
@@ -1519,19 +1520,19 @@ var ModalsContainer = function ModalsContainer(_ref) {
     setModalsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$l.container, _defineProperty({}, className, className)])
+    className: classNames([styles$m.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$l.modals, _defineProperty({}, styles$l.hasModals, modals.length > 0)]),
+    className: classNames([styles$m.modals, _defineProperty({}, styles$m.hasModals, modals.length > 0)]),
     ref: containerRef
   }));
 };
 
-ModalsContainer.propTypes = propTypes$t;
-ModalsContainer.defaultProps = defaultProps$t;
+ModalsContainer.propTypes = propTypes$u;
+ModalsContainer.defaultProps = defaultProps$u;
 var Modals = withModals(ModalsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$s = {
+var propTypes$t = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
@@ -1541,7 +1542,7 @@ var propTypes$s = {
   unregister: PropTypes$1.func,
   children: PropTypes$1.node
 };
-var defaultProps$s = {
+var defaultProps$t = {
   id: null,
   data: null,
   container: null,
@@ -1574,17 +1575,17 @@ var ElementPortal = function ElementPortal(_ref) {
   return container !== null ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
 };
 
-ElementPortal.propTypes = propTypes$s;
-ElementPortal.defaultProps = defaultProps$s;
+ElementPortal.propTypes = propTypes$t;
+ElementPortal.defaultProps = defaultProps$t;
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$r = {
+var propTypes$s = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes$1.node
 };
-var defaultProps$r = {
+var defaultProps$s = {
   id: null,
   data: null,
   children: null
@@ -1611,18 +1612,18 @@ var ModalPortal = function ModalPortal(_ref) {
   }, children);
 };
 
-ModalPortal.propTypes = propTypes$r;
-ModalPortal.defaultProps = defaultProps$r;
+ModalPortal.propTypes = propTypes$s;
+ModalPortal.defaultProps = defaultProps$s;
 
-var styles$k = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
+var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
 
-var propTypes$q = {
+var propTypes$r = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
   position: PropTypes$1.oneOf(['center', 'top']),
   children: PropTypes$1.node
 };
-var defaultProps$q = {
+var defaultProps$r = {
   id: null,
   title: null,
   position: 'center',
@@ -1646,18 +1647,18 @@ var Modal = function Modal(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.container, _defineProperty({}, styles$k[position], position !== null)])
+    className: classNames([styles$l.container, _defineProperty({}, styles$l[position], position !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$k.inner
+    className: styles$l.inner
   }, children)));
 };
 
-Modal.propTypes = propTypes$q;
-Modal.defaultProps = defaultProps$q;
+Modal.propTypes = propTypes$r;
+Modal.defaultProps = defaultProps$r;
 
-var styles$j = {"container":"micromag-core-modals-dialog-container"};
+var styles$k = {"container":"micromag-core-modals-dialog-container"};
 
-var propTypes$p = {
+var propTypes$q = {
   title: PropTypes.label,
   header: PropTypes$1.node,
   children: PropTypes$1.node,
@@ -1667,7 +1668,7 @@ var propTypes$p = {
   onClickClose: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$p = {
+var defaultProps$q = {
   title: null,
   header: null,
   children: null,
@@ -1687,12 +1688,12 @@ var ModalDialog = function ModalDialog(_ref) {
       onClickClose = _ref.onClickClose,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-dialog', styles$j.container, _defineProperty({}, className, className)]),
+    className: classNames(['modal-dialog', styles$k.container, _defineProperty({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', styles$j.header, {// 'bg-dark': theme === 'dark',
+    className: classNames(['modal-header', styles$k.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1704,28 +1705,28 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', styles$j.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames(['modal-body', styles$k.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-footer', styles$j.footer])
+    className: classNames(['modal-footer', styles$k.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$j.buttons
+    className: styles$k.buttons
   }) : null) : null));
 };
 
-ModalDialog.propTypes = propTypes$p;
-ModalDialog.defaultProps = defaultProps$p;
+ModalDialog.propTypes = propTypes$q;
+ModalDialog.defaultProps = defaultProps$q;
 
-var propTypes$o = {
+var propTypes$p = {
   type: PropTypes$1.oneOfType([PropTypes.mediaTypes, PropTypes$1.array]),
   opened: PropTypes$1.bool,
   sources: PropTypes$1.arrayOf(PropTypes$1.string),
   onUploaded: PropTypes$1.func,
   onRequestClose: PropTypes$1.func
 };
-var defaultProps$o = {
+var defaultProps$p = {
   type: null,
   opened: false,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
@@ -1774,17 +1775,17 @@ var UploadModal = function UploadModal(_ref) {
   }) : null;
 };
 
-UploadModal.propTypes = propTypes$o;
-UploadModal.defaultProps = defaultProps$o;
+UploadModal.propTypes = propTypes$p;
+UploadModal.defaultProps = defaultProps$p;
 
-var styles$i = {"container":"micromag-core-panels-container"};
+var styles$j = {"container":"micromag-core-panels-container"};
 
-var propTypes$n = {
+var propTypes$o = {
   panels: PropTypes.panels,
   setPanelsContainer: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$n = {
+var defaultProps$o = {
   panels: [],
   setPanelsContainer: null,
   className: null
@@ -1799,25 +1800,25 @@ var PanelsContainer = function PanelsContainer(_ref) {
     setPanelsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, _defineProperty({}, className, className)])
+    className: classNames([styles$j.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.panels, _defineProperty({}, styles$i.hasPanels, panels.length > 0)]),
+    className: classNames([styles$j.panels, _defineProperty({}, styles$j.hasPanels, panels.length > 0)]),
     ref: containerRef
   }));
 };
 
-PanelsContainer.propTypes = propTypes$n;
-PanelsContainer.defaultProps = defaultProps$n;
+PanelsContainer.propTypes = propTypes$o;
+PanelsContainer.defaultProps = defaultProps$o;
 var Panels = withPanels(PanelsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$m = {
+var propTypes$n = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes$1.node
 };
-var defaultProps$m = {
+var defaultProps$n = {
   id: null,
   data: null,
   children: null
@@ -1850,18 +1851,18 @@ var PanelPortal = function PanelPortal(_ref) {
   }, children);
 };
 
-PanelPortal.propTypes = propTypes$m;
-PanelPortal.defaultProps = defaultProps$m;
+PanelPortal.propTypes = propTypes$n;
+PanelPortal.defaultProps = defaultProps$n;
 
-var styles$h = {"container":"micromag-core-panels-panel-container"};
+var styles$i = {"container":"micromag-core-panels-panel-container"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$l = {
+var propTypes$m = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
   children: PropTypes$1.node
 };
-var defaultProps$l = {
+var defaultProps$m = {
   id: null,
   title: null,
   children: null
@@ -1883,16 +1884,16 @@ var Panel = function Panel(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$h.container
+    className: styles$i.container
   }, children));
 };
 
-Panel.propTypes = propTypes$l;
-Panel.defaultProps = defaultProps$l;
+Panel.propTypes = propTypes$m;
+Panel.defaultProps = defaultProps$m;
 
-var styles$g = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
+var styles$h = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
 
-var propTypes$k = {
+var propTypes$l = {
   title: PropTypes$1.node,
   children: PropTypes$1.node,
   className: PropTypes$1.string,
@@ -1901,7 +1902,7 @@ var propTypes$k = {
   openedClassName: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$k = {
+var defaultProps$l = {
   title: null,
   children: null,
   className: null,
@@ -1931,34 +1932,34 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.isOpened, opened), _defineProperty(_ref2, openedClassName, opened && openedClassName !== null), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$h.container, (_ref2 = {}, _defineProperty(_ref2, styles$h.isOpened, opened), _defineProperty(_ref2, openedClassName, opened && openedClassName !== null), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.top, _defineProperty({}, topClassName, topClassName !== null)])
+    className: classNames([styles$h.top, _defineProperty({}, topClassName, topClassName !== null)])
   }, /*#__PURE__*/React.createElement(Button$1, {
     withoutStyle: true,
-    className: classNames([styles$g.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
+    className: classNames([styles$h.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: opened ? faAngleUp : faAngleDown,
-      className: styles$g.icon
+      className: styles$h.icon
     }),
     iconPosition: "right",
-    labelClassName: styles$g.label,
+    labelClassName: styles$h.label,
     onClick: onClick
   }, title)), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.content, _defineProperty({}, contentClassName, contentClassName !== null)])
+    className: classNames([styles$h.content, _defineProperty({}, contentClassName, contentClassName !== null)])
   }, children));
 };
 
-CollapsablePanel.propTypes = propTypes$k;
-CollapsablePanel.defaultProps = defaultProps$k;
+CollapsablePanel.propTypes = propTypes$l;
+CollapsablePanel.defaultProps = defaultProps$l;
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$j = {
+var propTypes$k = {
   date: PropTypes$1.string,
   withTime: PropTypes$1.bool,
   timeSeparator: PropTypes$1.node
 };
-var defaultProps$j = {
+var defaultProps$k = {
   date: null,
   withTime: false,
   timeSeparator: ', '
@@ -1981,11 +1982,11 @@ var Date$1 = function Date(_ref) {
   }) : null);
 };
 
-Date$1.propTypes = propTypes$j;
-Date$1.defaultProps = defaultProps$j;
+Date$1.propTypes = propTypes$k;
+Date$1.defaultProps = defaultProps$k;
 
 /* eslint-disable react/no-danger */
-var propTypes$i = {
+var propTypes$j = {
   throttleDelay: PropTypes$1.number,
   threshold: PropTypes$1.arrayOf(PropTypes$1.number),
   onEnter: PropTypes$1.func,
@@ -1995,7 +1996,7 @@ var propTypes$i = {
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$i = {
+var defaultProps$j = {
   throttleDelay: null,
   threshold: undefined,
   onEnter: null,
@@ -2069,12 +2070,12 @@ var Detector = function Detector(_ref) {
   }, children);
 };
 
-Detector.propTypes = propTypes$i;
-Detector.defaultProps = defaultProps$i;
+Detector.propTypes = propTypes$j;
+Detector.defaultProps = defaultProps$j;
 
-var styles$f = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$g = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
 
-var propTypes$h = {
+var propTypes$i = {
   width: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
   height: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
   outline: PropTypes$1.bool,
@@ -2082,7 +2083,7 @@ var propTypes$h = {
   boxClassName: PropTypes$1.string,
   children: PropTypes$1.node
 };
-var defaultProps$h = {
+var defaultProps$i = {
   width: '100%',
   height: '3em',
   outline: false,
@@ -2101,9 +2102,9 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       boxClassName = _ref.boxClassName,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$f.outline, outline), _ref2)])
+    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$g.outline, outline), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
+    className: classNames([styles$g.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
     style: {
       width: width,
       height: height
@@ -2111,12 +2112,12 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
   }, children));
 };
 
-PlaceholderBlock.propTypes = propTypes$h;
-PlaceholderBlock.defaultProps = defaultProps$h;
+PlaceholderBlock.propTypes = propTypes$i;
+PlaceholderBlock.defaultProps = defaultProps$i;
 
 /* eslint-disable react/jsx-props-no-spreading */
 
-var propTypes$g = {
+var propTypes$h = {
   name: PropTypes$1.string.isRequired,
   components: PropTypes$1.object.isRequired,
   // eslint-disable-line
@@ -2127,7 +2128,7 @@ var propTypes$g = {
   placeholderProps: PropTypes$1.object // eslint-disable-line
 
 };
-var defaultProps$g = {
+var defaultProps$h = {
   props: {},
   isPlaceholder: false,
   className: null,
@@ -2163,18 +2164,18 @@ var ElementComponent = function ElementComponent(_ref) {
   }));
 };
 
-ElementComponent.propTypes = propTypes$g;
-ElementComponent.defaultProps = defaultProps$g;
+ElementComponent.propTypes = propTypes$h;
+ElementComponent.defaultProps = defaultProps$h;
 
-var styles$e = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
+var styles$f = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
 
-var propTypes$f = {
+var propTypes$g = {
   children: PropTypes$1.node,
   withoutBorder: PropTypes$1.bool,
   light: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$f = {
+var defaultProps$g = {
   children: null,
   withoutBorder: false,
   light: false,
@@ -2189,23 +2190,23 @@ var Empty = function Empty(_ref) {
       light = _ref.light,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, (_ref2 = {}, _defineProperty(_ref2, styles$e.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$e.light, light), _defineProperty(_ref2, className, className), _ref2)])
+    className: classNames([styles$f.container, (_ref2 = {}, _defineProperty(_ref2, styles$f.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$f.light, light), _defineProperty(_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$e.middle
+    className: styles$f.middle
   }, /*#__PURE__*/React.createElement(Label, null, children)));
 };
 
-Empty.propTypes = propTypes$f;
-Empty.defaultProps = defaultProps$f;
+Empty.propTypes = propTypes$g;
+Empty.defaultProps = defaultProps$g;
 
-var propTypes$e = {
+var propTypes$f = {
   fonts: PropTypes.fonts,
   formats: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
     name: PropTypes$1.string,
     format: PropTypes$1.string
   })]))
 };
-var defaultProps$e = {
+var defaultProps$f = {
   fonts: [],
   formats: ['eot', 'woff2', 'woff', {
     name: 'otf',
@@ -2246,12 +2247,12 @@ var FontFaces = function FontFaces(_ref) {
   }, fontFaces.join('\n')) : null;
 };
 
-FontFaces.propTypes = propTypes$e;
-FontFaces.defaultProps = defaultProps$e;
+FontFaces.propTypes = propTypes$f;
+FontFaces.defaultProps = defaultProps$f;
 
-var styles$d = {};
+var styles$e = {};
 
-var propTypes$d = {
+var propTypes$e = {
   thumbnail: PropTypes$1.node,
   thumbnailAlign: PropTypes$1.oneOf(['top', 'center', 'bottom']),
   children: PropTypes$1.node,
@@ -2261,7 +2262,7 @@ var propTypes$d = {
   bodyClassName: PropTypes$1.string,
   titleClassName: PropTypes$1.string
 };
-var defaultProps$d = {
+var defaultProps$e = {
   thumbnail: null,
   thumbnailAlign: 'top',
   children: null,
@@ -2282,24 +2283,24 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card', styles$d.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['card', styles$e.container, _defineProperty({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames(['me-3', styles$d.thumbnail, _defineProperty({
+    className: classNames(['me-3', styles$e.thumbnail, _defineProperty({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
   }) : thumbnail, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-body', styles$d.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+    className: classNames(['card-body', styles$e.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['mt-0', styles$d.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+    className: classNames(['mt-0', styles$e.title, _defineProperty({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children));
 };
 
-Media.propTypes = propTypes$d;
-Media.defaultProps = defaultProps$d;
+Media.propTypes = propTypes$e;
+Media.defaultProps = defaultProps$e;
 
 /**
  * Core
@@ -2833,7 +2834,7 @@ var pageMetadata = PropTypes$1.shape({
 });
 
 /* eslint-disable react/no-array-index-key */
-var propTypes$c = {
+var propTypes$d = {
   title: PropTypes$1.string,
   url: PropTypes$1.string,
   metadata: pageMetadata,
@@ -2841,7 +2842,7 @@ var propTypes$c = {
   suffix: PropTypes$1.string,
   children: PropTypes$1.node
 };
-var defaultProps$c = {
+var defaultProps$d = {
   title: null,
   url: null,
   metadata: null,
@@ -2965,12 +2966,12 @@ var Meta = function Meta(_ref) {
   }), children);
 };
 
-Meta.propTypes = propTypes$c;
-Meta.defaultProps = defaultProps$c;
+Meta.propTypes = propTypes$d;
+Meta.defaultProps = defaultProps$d;
 
-var styles$c = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
+var styles$d = {"container":"micromag-core-partials-slideshow-container","item":"micromag-core-partials-slideshow-item","items":"micromag-core-partials-slideshow-items","prev":"micromag-core-partials-slideshow-prev","current":"micromag-core-partials-slideshow-current","next":"micromag-core-partials-slideshow-next"};
 
-var propTypes$b = {
+var propTypes$c = {
   items: PropTypes$1.arrayOf(PropTypes$1.node),
   auto: PropTypes$1.bool,
   delay: PropTypes$1.number,
@@ -2979,7 +2980,7 @@ var propTypes$b = {
   className: PropTypes$1.string,
   children: PropTypes$1.node
 };
-var defaultProps$b = {
+var defaultProps$c = {
   items: [],
   auto: true,
   delay: 5000,
@@ -3027,24 +3028,24 @@ var Slideshow = function Slideshow(_ref) {
     height: height
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$d.container, _defineProperty({}, className, className)]),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.items
+    className: styles$d.items
   }, items.map(function (it, i) {
     var _ref3;
 
     return /*#__PURE__*/React.createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames([styles$c.item, (_ref3 = {}, _defineProperty(_ref3, styles$c.prev, i < index), _defineProperty(_ref3, styles$c.current, i === index), _defineProperty(_ref3, styles$c.next, i > index), _ref3)])
+      className: classNames([styles$d.item, (_ref3 = {}, _defineProperty(_ref3, styles$d.prev, i < index), _defineProperty(_ref3, styles$d.current, i === index), _defineProperty(_ref3, styles$d.next, i > index), _ref3)])
     }, it);
   })), children);
 };
 
-Slideshow.propTypes = propTypes$b;
-Slideshow.defaultProps = defaultProps$b;
+Slideshow.propTypes = propTypes$c;
+Slideshow.defaultProps = defaultProps$c;
 
-var styles$b = {"icon":"micromag-core-placeholders-icon"};
+var styles$c = {"icon":"micromag-core-placeholders-icon"};
 
 /* eslint-disable react/prop-types */
 var AdFrame = function AdFrame(_ref) {
@@ -3057,7 +3058,7 @@ var AdFrame = function AdFrame(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faAd,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -3072,7 +3073,7 @@ var AdImage = function AdImage(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faImage,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -3089,13 +3090,13 @@ var Audio = function Audio(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMusic,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
-var styles$a = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$b = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
 
-var propTypes$a = {
+var propTypes$b = {
   lines: PropTypes$1.number,
   lineMargin: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
   width: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
@@ -3103,7 +3104,7 @@ var propTypes$a = {
   fontSize: PropTypes$1.number,
   className: PropTypes$1.string
 };
-var defaultProps$a = {
+var defaultProps$b = {
   lines: 1,
   lineMargin: 1,
   width: '100%',
@@ -3122,11 +3123,11 @@ var PlaceholderText = function PlaceholderText(_ref) {
   var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber(width) ? width * 0.9 : '90%';
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$a.container, _defineProperty({}, className, className)])
+    className: classNames([styles$b.container, _defineProperty({}, className, className)])
   }, _toConsumableArray(Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "line-".concat(index),
-      className: styles$a.line,
+      className: styles$b.line,
       style: {
         width: index % 2 === 0 ? width : oddWidth,
         height: lineHeight,
@@ -3137,8 +3138,8 @@ var PlaceholderText = function PlaceholderText(_ref) {
   }));
 };
 
-PlaceholderText.propTypes = propTypes$a;
-PlaceholderText.defaultProps = defaultProps$a;
+PlaceholderText.propTypes = propTypes$b;
+PlaceholderText.defaultProps = defaultProps$b;
 
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Button = function Button(_ref) {
@@ -3169,38 +3170,38 @@ var Image = function Image(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faImage,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Line = function Line(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.shortText]),
+    className: classNames([props.className, styles$c.shortText]),
     height: 0.2,
     lines: 1
   }));
 };
 
-var styles$9 = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
+var styles$a = {"container":"micromag-core-placeholders-map-container","icon":"micromag-core-placeholders-map-icon"};
 
 var Map = function Map(props) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames([styles$9.container, _defineProperty({}, props.className, props.className !== null)])
+    className: classNames([styles$a.container, _defineProperty({}, props.className, props.className !== null)])
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: props.withImages ? faImage : faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }));
 };
 
@@ -3209,18 +3210,18 @@ var MapPath = function MapPath(props) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "70%",
-    className: classNames([props.className, styles$b.mapPath])
+    className: classNames([props.className, styles$c.mapPath])
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faMapMarkedAlt,
     size: "lg",
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Quote = function Quote(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.subtitle]),
+    className: classNames([props.className, styles$c.subtitle]),
     height: 0.5,
     lines: 6
   }));
@@ -3229,7 +3230,7 @@ var Quote = function Quote(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var ShortText = function ShortText(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.shortText]),
+    className: classNames([props.className, styles$c.shortText]),
     height: 0.2,
     lines: 2
   }));
@@ -3238,7 +3239,7 @@ var ShortText = function ShortText(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Subtitle = function Subtitle(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.subtitle]),
+    className: classNames([props.className, styles$c.subtitle]),
     height: 0.3,
     lines: 1
   }));
@@ -3257,21 +3258,21 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames([props.className, styles$b.text])
+    className: classNames([props.className, styles$c.text])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Timeline = function Timeline(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.timeline])
+    className: classNames([props.className, styles$c.timeline])
   }));
 };
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title = function Title(props) {
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames([props.className, styles$b.title]),
+    className: classNames([props.className, styles$c.title]),
     height: 0.5,
     lines: 2,
     lineMargin: 4
@@ -3289,11 +3290,11 @@ var Video = function Video(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faVideo,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
-var styles$8 = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
+var styles$9 = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
 
 var Video360 = function Video360(_ref) {
   var width = _ref.width,
@@ -3302,13 +3303,13 @@ var Video360 = function Video360(_ref) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),
-    boxClassName: styles$8.box
+    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    boxClassName: styles$9.box
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faVideo,
-    className: styles$8.icon
+    className: styles$9.icon
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles$8.label
+    className: styles$9.label
   }, "360"));
 };
 
@@ -3323,13 +3324,133 @@ var VideoLoop = function VideoLoop(_ref) {
     className: className
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faPlay,
-    className: styles$b.icon
+    className: styles$c.icon
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faRedo,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
+var styles$8 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
+
+var propTypes$a = {
+  width: PropTypes$1.number,
+  height: PropTypes$1.number,
+  fit: PropTypes$1.oneOf([null, 'cover', 'contain']),
+  screenWidth: PropTypes$1.number,
+  screenHeight: PropTypes$1.number,
+  className: PropTypes$1.string,
+  children: PropTypes$1.node.isRequired
+};
+var defaultProps$a = {
+  width: null,
+  height: null,
+  fit: null,
+  screenWidth: 320,
+  screenHeight: 480,
+  className: null
+};
+
+var ScreenSizer = function ScreenSizer(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      fit = _ref.fit,
+      screenWidth = _ref.screenWidth,
+      screenHeight = _ref.screenHeight,
+      className = _ref.className,
+      children = _ref.children;
+  var hasSize = width !== null || height !== null;
+
+  var _useResizeObserver = useResizeObserver(),
+      refContainer = _useResizeObserver.ref,
+      contentRect = _useResizeObserver.entry.contentRect;
+
+  var _ref2 = contentRect || {},
+      _ref2$width = _ref2.width,
+      calculatedWidth = _ref2$width === void 0 ? 0 : _ref2$width,
+      _ref2$height = _ref2.height,
+      calculatedHeight = _ref2$height === void 0 ? 0 : _ref2$height;
+
+  var _useMemo = useMemo(function () {
+    var containerWidth = width || calculatedWidth || null;
+    var containerHeight = height || calculatedHeight || null;
+
+    if (containerWidth === null && containerHeight === null) {
+      return {};
+    }
+
+    var screenRatio = screenWidth / screenHeight;
+    var finalContainerWidth = containerWidth || containerHeight * screenRatio;
+    var finalContainerHeight = containerHeight || containerWidth / screenRatio;
+
+    if (fit === null) {
+      var _screenScale = finalContainerWidth / screenWidth;
+
+      return {
+        width: finalContainerWidth,
+        height: finalContainerHeight,
+        transform: "scale(".concat(_screenScale, ")")
+      };
+    }
+
+    var _getSizeWithinBounds = getSizeWithinBounds(screenWidth, screenHeight, finalContainerWidth, finalContainerHeight, {
+      cover: fit === 'cover'
+    }),
+        screenScaledWidth = _getSizeWithinBounds.width,
+        screenScaledHeight = _getSizeWithinBounds.height,
+        screenScale = _getSizeWithinBounds.scale;
+
+    var x = (finalContainerWidth - screenScaledWidth) / 2;
+    var y = (finalContainerHeight - screenScaledHeight) / 2;
+    return {
+      width: finalContainerWidth,
+      height: finalContainerHeight,
+      transform: "scale(".concat(screenScale, ") translate(").concat(x, "px, ").concat(y, "px)")
+    };
+  }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight]),
+      _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$transform = _useMemo.transform,
+      screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
+
+  var screenSize = useMemo(function () {
+    return {
+      screen: 'mobile',
+      screens: ['mobile'],
+      width: screenWidth,
+      height: screenHeight
+    };
+  }, [screenWidth, screenHeight]);
+  var hasFrameSize = frameWidth !== null && frameHeight !== null;
+  return /*#__PURE__*/React.createElement("div", {
+    styles: classNames([styles$8.container, _defineProperty({}, className, className !== null)]),
+    ref: !hasSize ? refContainer : null
+  }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
+    className: styles$8.frame,
+    style: {
+      width: frameWidth,
+      height: frameHeight
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$8.screen,
+    style: {
+      width: screenWidth,
+      height: screenHeight,
+      transform: screenTransform
+    }
+  }, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
+    size: screenSize
+  }, /*#__PURE__*/React.cloneElement(children, {
+    width: screenWidth,
+    height: screenHeight
+  })))) : null);
+};
+
+ScreenSizer.propTypes = propTypes$a;
+ScreenSizer.defaultProps = defaultProps$a;
+
 var styles$7 = {"container":"micromag-core-screens-screen-container"};
 
 var propTypes$9 = {
@@ -3403,70 +3524,76 @@ Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
 var Screen$1 = /*#__PURE__*/React.memo(Screen);
 
-var styles$6 = {"container":"micromag-core-screens-screen-placeholder-container"};
+var styles$6 = {"screen":"micromag-core-screens-screen-placeholder-screen"};
 
+var _excluded$1 = ["screen", "layout", "screenWidth", "screenHeight", "screenState", "withSize", "className"];
 var propTypes$8 = {
   screen: PropTypes.component.isRequired,
   layout: PropTypes$1.string,
+  screenWidth: PropTypes$1.number,
+  screenHeight: PropTypes$1.number,
   screenState: PropTypes$1.string,
-  width: PropTypes$1.number,
-  height: PropTypes$1.number,
+  withSize: PropTypes$1.bool,
   className: PropTypes$1.string
 };
 var defaultProps$8 = {
   layout: undefined,
   screenState: null,
-  width: null,
-  height: null,
+  screenWidth: 100,
+  screenHeight: 150,
+  withSize: false,
   className: null
 };
 
 var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
   var screen = _ref.screen,
       layout = _ref.layout,
-      width = _ref.width,
-      height = _ref.height,
+      screenWidth = _ref.screenWidth,
+      screenHeight = _ref.screenHeight,
       screenState = _ref.screenState,
-      className = _ref.className;
-  var screenSize = useMemo(function () {
-    return {
-      screen: 'mobile',
-      screens: ['mobile'],
-      width: width,
-      height: height
-    };
-  }, [width, height]);
-  return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen,
-    renderContext: "placeholder",
-    screenState: screenState
-  }, /*#__PURE__*/React.createElement(Screen$1, {
+      withSize = _ref.withSize,
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$1);
+
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
+    renderContext: "placeholder",
+    screenState: screenState,
     layout: layout,
-    className: classNames([styles$6.container, _defineProperty({}, className, className !== null)])
-  })));
+    className: classNames([styles$6.screen, _defineProperty({}, className, !withSize)])
+  }, props));
+  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight
+  }, screenElement) : screenElement;
 };
 
 ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React.memo(ScreenPlaceholder);
 
-var styles$5 = {"container":"micromag-core-screens-preview-container"};
+var styles$5 = {"screen":"micromag-core-screens-preview-screen"};
 
+var _excluded = ["screen", "screenState", "width", "height", "screenWidth", "screenHeight", "className", "withSize"];
 var propTypes$7 = {
   screen: PropTypes.component.isRequired,
   screenState: PropTypes$1.string,
   width: PropTypes$1.number,
   height: PropTypes$1.number,
-  className: PropTypes$1.string
+  screenWidth: PropTypes$1.number,
+  screenHeight: PropTypes$1.number,
+  className: PropTypes$1.string,
+  withSize: PropTypes$1.bool
 };
 var defaultProps$7 = {
   screenState: null,
-  width: null,
-  height: null,
-  className: null
+  width: undefined,
+  height: undefined,
+  screenWidth: undefined,
+  screenHeight: undefined,
+  className: null,
+  withSize: false
 };
 
 var ScreenPreview = function ScreenPreview(_ref) {
@@ -3474,26 +3601,27 @@ var ScreenPreview = function ScreenPreview(_ref) {
       screenState = _ref.screenState,
       width = _ref.width,
       height = _ref.height,
-      className = _ref.className;
-  var screenSize = useMemo(function () {
-    return {
-      screen: 'mobile',
-      screens: ['mobile'],
-      width: width,
-      height: height
-    };
-  }, [width, height]);
-  return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React.createElement(ScreenProvider, {
-    data: screen,
-    renderContext: "preview",
-    screenState: screenState
-  }, /*#__PURE__*/React.createElement(Screen$1, {
+      screenWidth = _ref.screenWidth,
+      screenHeight = _ref.screenHeight,
+      className = _ref.className,
+      withSize = _ref.withSize,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var screenElement = /*#__PURE__*/React.createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)])
-  })));
+    screenState: screenState,
+    width: !withSize ? width : undefined,
+    height: !withSize ? height : undefined,
+    className: classNames([styles$5.screen, _defineProperty({}, className, !withSize)])
+  }, props));
+  return withSize ? /*#__PURE__*/React.createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    width: width,
+    height: height
+  }, screenElement) : screenElement;
 };
 
 ScreenPreview.propTypes = propTypes$7;
@@ -4039,4 +4167,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };
+export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };