@micromag/core 0.3.7 → 0.3.14

package/lib/components.js

@@ -29,6 +29,7 @@ var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
 require('snake-case');
 var isNumber = require('lodash/isNumber');
+var size = require('@folklore/size');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 
@@ -52,13 +53,13 @@ var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$J = {
+var propTypes$K = {
   children: core.PropTypes.label.isRequired,
   isHtml: PropTypes__default["default"].bool,
   values: PropTypes__default["default"].object // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$J = {
+var defaultProps$K = {
   isHtml: false,
   values: {}
 };
@@ -73,13 +74,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 _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__default["default"].string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
@@ -112,7 +113,7 @@ var propTypes$I = {
 
   })])
 };
-var defaultProps$I = {
+var defaultProps$J = {
   type: 'button',
   theme: null,
   size: null,
@@ -174,7 +175,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
@@ -228,13 +229,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 _excluded$7 = ["className", "onClick", "theme"];
-var propTypes$H = {
+var _excluded$9 = ["className", "onClick", "theme"];
+var propTypes$I = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
@@ -243,7 +244,7 @@ var propTypes$H = {
   className: PropTypes__default["default"].string,
   buttonClassName: PropTypes__default["default"].string
 };
-var defaultProps$H = {
+var defaultProps$I = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -273,7 +274,7 @@ 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__default["default"](button, _excluded$7);
+        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$9);
 
     var fixedProps = {
       key: "button-".concat(index),
@@ -293,20 +294,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__default["default"].string
 };
-var defaultProps$G = {
+var defaultProps$H = {
   className: null
 };
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
 
   return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
@@ -318,12 +319,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__default["default"].string,
   // .isRequired,
   value: core.PropTypes.component,
@@ -337,7 +338,7 @@ var propTypes$F = {
   fieldContext: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$F = {
+var defaultProps$G = {
   name: null,
   form: null,
   formComponents: {},
@@ -365,7 +366,7 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$5);
+      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$7);
 
   var _ref3 = (type !== null ? fieldsManager.getDefinition(type) || null : null) || _objectSpread__default["default"]({}, field),
       _ref3$component = _ref3.component,
@@ -418,12 +419,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 propTypes$E = {
+var propTypes$F = {
   action: PropTypes__default["default"].string.isRequired,
   method: PropTypes__default["default"].string,
   fields: core.PropTypes.formFields,
@@ -450,7 +451,7 @@ var propTypes$E = {
   actionsClassName: PropTypes__default["default"].string,
   cancelClassName: PropTypes__default["default"].string
 };
-var defaultProps$E = {
+var defaultProps$F = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -663,13 +664,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 _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__default["default"].string,
   external: PropTypes__default["default"].bool,
   target: PropTypes__default["default"].string,
@@ -678,7 +679,7 @@ var propTypes$D = {
   withoutStyle: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$D = {
+var defaultProps$E = {
   href: '',
   external: false,
   target: '_blank',
@@ -696,7 +697,7 @@ var Link = function Link(_ref) {
       rel = _ref.rel,
       className = _ref.className,
       withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
 
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
     className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$r.withoutStyle, withoutStyle)]),
@@ -709,11 +710,11 @@ var Link = function Link(_ref) {
   }, props), /*#__PURE__*/React__default["default"].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__default["default"].string,
   header: PropTypes__default["default"].node,
   image: PropTypes__default["default"].node,
@@ -742,7 +743,7 @@ var propTypes$C = {
   onClickBody: PropTypes__default["default"].func,
   onClickFooter: PropTypes__default["default"].func
 };
-var defaultProps$C = {
+var defaultProps$D = {
   href: null,
   header: null,
   image: null,
@@ -800,7 +801,7 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
         _ref2$className = _ref2.className,
         linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$3);
+        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -863,15 +864,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__default["default"].bool,
   color: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string
 };
-var defaultProps$B = {
+var defaultProps$C = {
   animated: true,
   color: 'currentColor',
   className: null
@@ -936,19 +937,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 _excluded$2 = ["description", "loading", "children", "className"];
-var propTypes$A = {
+var _excluded$4 = ["description", "loading", "children", "className"];
+var propTypes$B = {
   description: PropTypes__default["default"].node,
   loading: PropTypes__default["default"].bool,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string
 };
-var defaultProps$A = {
+var defaultProps$B = {
   description: null,
   loading: false,
   children: null,
@@ -960,19 +961,19 @@ var FormPanel = function FormPanel(_ref) {
       loading = _ref.loading,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
     className: classNames__default["default"]([styles$q.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React__default["default"].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 propTypes$z = {
+var propTypes$A = {
   items: core.PropTypes.menuItems,
   theme: core.PropTypes.bootstrapThemes,
   separator: PropTypes__default["default"].oneOf([null, 'arrow']),
@@ -980,7 +981,7 @@ var propTypes$z = {
   noWrap: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$z = {
+var defaultProps$A = {
   items: [],
   theme: null,
   separator: null,
@@ -1030,13 +1031,11 @@ 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 _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: core.PropTypes.menuItems,
   children: PropTypes__default["default"].node,
   visible: PropTypes__default["default"].bool,
@@ -1046,7 +1045,7 @@ var propTypes$y = {
   onClickItem: PropTypes__default["default"].func,
   onClickOutside: PropTypes__default["default"].func
 };
-var defaultProps$y = {
+var defaultProps$z = {
   items: [],
   children: null,
   visible: false,
@@ -1076,7 +1075,7 @@ var Dropdown = function Dropdown(_ref) {
   }, [refContainer.current, onClickOutside]);
   hooks.useDocumentEvent('click', onDocumentClick, visible);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['dropdown-menu', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$o[align], align !== null), _defineProperty__default["default"](_ref2, "show", visible), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+    className: classNames__default["default"](['dropdown-menu', (_ref2 = {}, _defineProperty__default["default"](_ref2, "dropdown-menu-".concat(align), align !== null), _defineProperty__default["default"](_ref2, "show", visible), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _ref3;
@@ -1094,7 +1093,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__default["default"](it, _excluded$1);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
 
     var ItemComponent = 'div';
 
@@ -1130,11 +1129,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: core.PropTypes.menuItems,
   tagName: PropTypes__default["default"].string,
   itemTagName: PropTypes__default["default"].string,
@@ -1153,7 +1152,7 @@ var propTypes$x = {
   dropdownLinkClassName: PropTypes__default["default"].string,
   dropdownAlign: core.PropTypes.dropdownAlign
 };
-var defaultProps$x = {
+var defaultProps$y = {
   items: [],
   tagName: 'ul',
   itemTagName: 'li',
@@ -1223,7 +1222,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__default["default"](it, _excluded);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$2);
 
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -1277,10 +1276,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__default["default"].node,
   brandLink: PropTypes__default["default"].string,
   breadcrumbs: PropTypes__default["default"].node,
@@ -1294,7 +1293,7 @@ var propTypes$w = {
   brandClassName: PropTypes__default["default"].string,
   breadCrumbsClassName: PropTypes__default["default"].string
 };
-var defaultProps$w = {
+var defaultProps$x = {
   brand: null,
   brandLink: null,
   breadcrumbs: null,
@@ -1368,10 +1367,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 = reactIntl.defineMessages({
   previous: {
@@ -1389,7 +1388,7 @@ var messages = reactIntl.defineMessages({
     }]
   }
 });
-var propTypes$v = {
+var propTypes$w = {
   page: PropTypes__default["default"].number,
   total: PropTypes__default["default"].number,
   url: PropTypes__default["default"].string,
@@ -1400,7 +1399,7 @@ var propTypes$v = {
   linkClassName: PropTypes__default["default"].string,
   onClickPage: PropTypes__default["default"].func
 };
-var defaultProps$v = {
+var defaultProps$w = {
   page: 1,
   total: 1,
   url: null,
@@ -1431,7 +1430,7 @@ var PaginationMenu = function PaginationMenu(_ref) {
   });
 
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$n.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classNames__default["default"](['pagination', _defineProperty__default["default"]({}, paginationClassName, paginationClassName !== null)])
   }, withPreviousNext ? /*#__PURE__*/React__default["default"].createElement("li", {
@@ -1474,12 +1473,12 @@ var PaginationMenu = function PaginationMenu(_ref) {
   }, /*#__PURE__*/React__default["default"].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: core.PropTypes.menuItems,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
@@ -1488,7 +1487,7 @@ var propTypes$u = {
   className: PropTypes__default["default"].string,
   onClickItem: PropTypes__default["default"].func
 };
-var defaultProps$u = {
+var defaultProps$v = {
   items: [],
   size: null,
   theme: 'secondary',
@@ -1507,29 +1506,29 @@ var TabsMenu = function TabsMenu(_ref) {
       className = _ref.className,
       onClickItem = _ref.onClickItem;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$m.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$n.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: items,
     size: size,
     theme: theme,
     renderButton: renderItemButton,
     onClickButton: onClickItem,
-    className: styles$m.buttons,
-    buttonClassName: classNames__default["default"]([styles$m.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)])
+    className: styles$n.buttons,
+    buttonClassName: classNames__default["default"]([styles$n.button, _defineProperty__default["default"]({}, 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: core.PropTypes.modals.isRequired,
   setModalsContainer: PropTypes__default["default"].func.isRequired,
   className: PropTypes__default["default"].string
 };
-var defaultProps$t = {
+var defaultProps$u = {
   className: null
 };
 
@@ -1542,19 +1541,19 @@ var ModalsContainer = function ModalsContainer(_ref) {
     setModalsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$l.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$m.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$l.modals, _defineProperty__default["default"]({}, styles$l.hasModals, modals.length > 0)]),
+    className: classNames__default["default"]([styles$m.modals, _defineProperty__default["default"]({}, 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 = contexts.withModals(ModalsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$s = {
+var propTypes$t = {
   id: PropTypes__default["default"].string,
   data: PropTypes__default["default"].object,
   // eslint-disable-line react/forbid-prop-types
@@ -1564,7 +1563,7 @@ var propTypes$s = {
   unregister: PropTypes__default["default"].func,
   children: PropTypes__default["default"].node
 };
-var defaultProps$s = {
+var defaultProps$t = {
   id: null,
   data: null,
   container: null,
@@ -1597,17 +1596,17 @@ var ElementPortal = function ElementPortal(_ref) {
   return container !== null ? /*#__PURE__*/ReactDOM__default["default"].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__default["default"].string,
   data: PropTypes__default["default"].object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes__default["default"].node
 };
-var defaultProps$r = {
+var defaultProps$s = {
   id: null,
   data: null,
   children: null
@@ -1634,18 +1633,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__default["default"].string,
   title: PropTypes__default["default"].string,
   position: PropTypes__default["default"].oneOf(['center', 'top']),
   children: PropTypes__default["default"].node
 };
-var defaultProps$q = {
+var defaultProps$r = {
   id: null,
   title: null,
   position: 'center',
@@ -1669,18 +1668,18 @@ var Modal = function Modal(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$k.container, _defineProperty__default["default"]({}, styles$k[position], position !== null)])
+    className: classNames__default["default"]([styles$l.container, _defineProperty__default["default"]({}, styles$l[position], position !== null)])
   }, /*#__PURE__*/React__default["default"].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: core.PropTypes.label,
   header: PropTypes__default["default"].node,
   children: PropTypes__default["default"].node,
@@ -1690,7 +1689,7 @@ var propTypes$p = {
   onClickClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$p = {
+var defaultProps$q = {
   title: null,
   header: null,
   children: null,
@@ -1710,12 +1709,12 @@ var ModalDialog = function ModalDialog(_ref) {
       onClickClose = _ref.onClickClose,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-dialog', styles$j.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"](['modal-dialog', styles$k.container, _defineProperty__default["default"]({}, className, className)]),
     role: "dialog"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-header', styles$j.header, {// 'bg-dark': theme === 'dark',
+    className: classNames__default["default"](['modal-header', styles$k.header, {// 'bg-dark': theme === 'dark',
       // 'border-dark': theme === 'dark',
       // 'text-light': theme === 'dark',
     }])
@@ -1727,28 +1726,28 @@ var ModalDialog = function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClickClose
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-body', styles$j.body, {// [`bg-${theme}`]: theme !== null,
+    className: classNames__default["default"](['modal-body', styles$k.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
     }])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['modal-footer', styles$j.footer])
+    className: classNames__default["default"](['modal-footer', styles$k.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React__default["default"].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__default["default"].oneOfType([core.PropTypes.mediaTypes, PropTypes__default["default"].array]),
   opened: PropTypes__default["default"].bool,
   sources: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   onUploaded: PropTypes__default["default"].func,
   onRequestClose: PropTypes__default["default"].func
 };
-var defaultProps$o = {
+var defaultProps$p = {
   type: null,
   opened: false,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
@@ -1797,17 +1796,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: core.PropTypes.panels,
   setPanelsContainer: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
-var defaultProps$n = {
+var defaultProps$o = {
   panels: [],
   setPanelsContainer: null,
   className: null
@@ -1822,25 +1821,25 @@ var PanelsContainer = function PanelsContainer(_ref) {
     setPanelsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$j.container, _defineProperty__default["default"]({}, className, className)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$i.panels, _defineProperty__default["default"]({}, styles$i.hasPanels, panels.length > 0)]),
+    className: classNames__default["default"]([styles$j.panels, _defineProperty__default["default"]({}, 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 = contexts.withPanels(PanelsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$m = {
+var propTypes$n = {
   id: PropTypes__default["default"].string,
   data: PropTypes__default["default"].object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes__default["default"].node
 };
-var defaultProps$m = {
+var defaultProps$n = {
   id: null,
   data: null,
   children: null
@@ -1873,18 +1872,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__default["default"].string,
   title: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node
 };
-var defaultProps$l = {
+var defaultProps$m = {
   id: null,
   title: null,
   children: null
@@ -1906,16 +1905,16 @@ var Panel = function Panel(_ref) {
     id: finalId,
     data: data
   }, /*#__PURE__*/React__default["default"].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__default["default"].node,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
@@ -1924,7 +1923,7 @@ var propTypes$k = {
   openedClassName: PropTypes__default["default"].string,
   buttonClassName: PropTypes__default["default"].string
 };
-var defaultProps$k = {
+var defaultProps$l = {
   title: null,
   children: null,
   className: null,
@@ -1954,34 +1953,34 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.isOpened, opened), _defineProperty__default["default"](_ref2, openedClassName, opened && openedClassName !== null), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$h.isOpened, opened), _defineProperty__default["default"](_ref2, openedClassName, opened && openedClassName !== null), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.top, _defineProperty__default["default"]({}, topClassName, topClassName !== null)])
+    className: classNames__default["default"]([styles$h.top, _defineProperty__default["default"]({}, topClassName, topClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
     withoutStyle: true,
-    className: classNames__default["default"]([styles$g.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
+    className: classNames__default["default"]([styles$h.button, _defineProperty__default["default"]({}, buttonClassName, buttonClassName !== null)]),
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
       icon: opened ? freeSolidSvgIcons.faAngleUp : freeSolidSvgIcons.faAngleDown,
-      className: styles$g.icon
+      className: styles$h.icon
     }),
     iconPosition: "right",
-    labelClassName: styles$g.label,
+    labelClassName: styles$h.label,
     onClick: onClick
   }, title)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.content, _defineProperty__default["default"]({}, contentClassName, contentClassName !== null)])
+    className: classNames__default["default"]([styles$h.content, _defineProperty__default["default"]({}, 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__default["default"].string,
   withTime: PropTypes__default["default"].bool,
   timeSeparator: PropTypes__default["default"].node
 };
-var defaultProps$j = {
+var defaultProps$k = {
   date: null,
   withTime: false,
   timeSeparator: ', '
@@ -2004,11 +2003,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__default["default"].number,
   threshold: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number),
   onEnter: PropTypes__default["default"].func,
@@ -2018,7 +2017,7 @@ var propTypes$i = {
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string
 };
-var defaultProps$i = {
+var defaultProps$j = {
   throttleDelay: null,
   threshold: undefined,
   onEnter: null,
@@ -2092,12 +2091,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__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   outline: PropTypes__default["default"].bool,
@@ -2105,7 +2104,7 @@ var propTypes$h = {
   boxClassName: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node
 };
-var defaultProps$h = {
+var defaultProps$i = {
   width: '100%',
   height: '3em',
   outline: false,
@@ -2124,9 +2123,9 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       boxClassName = _ref.boxClassName,
       children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$f.outline, outline), _ref2)])
+    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$g.outline, outline), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$f.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
+    className: classNames__default["default"]([styles$g.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
     style: {
       width: width,
       height: height
@@ -2134,12 +2133,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__default["default"].string.isRequired,
   components: PropTypes__default["default"].object.isRequired,
   // eslint-disable-line
@@ -2150,7 +2149,7 @@ var propTypes$g = {
   placeholderProps: PropTypes__default["default"].object // eslint-disable-line
 
 };
-var defaultProps$g = {
+var defaultProps$h = {
   props: {},
   isPlaceholder: false,
   className: null,
@@ -2186,18 +2185,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__default["default"].node,
   withoutBorder: PropTypes__default["default"].bool,
   light: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string
 };
-var defaultProps$f = {
+var defaultProps$g = {
   children: null,
   withoutBorder: false,
   light: false,
@@ -2212,23 +2211,23 @@ var Empty = function Empty(_ref) {
       light = _ref.light,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$e.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$e.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$e.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
+    className: classNames__default["default"]([styles$f.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$f.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$f.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$e.middle
+    className: styles$f.middle
   }, /*#__PURE__*/React__default["default"].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: core.PropTypes.fonts,
   formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
     name: PropTypes__default["default"].string,
     format: PropTypes__default["default"].string
   })]))
 };
-var defaultProps$e = {
+var defaultProps$f = {
   fonts: [],
   formats: ['eot', 'woff2', 'woff', {
     name: 'otf',
@@ -2269,12 +2268,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__default["default"].node,
   thumbnailAlign: PropTypes__default["default"].oneOf(['top', 'center', 'bottom']),
   children: PropTypes__default["default"].node,
@@ -2284,7 +2283,7 @@ var propTypes$d = {
   bodyClassName: PropTypes__default["default"].string,
   titleClassName: PropTypes__default["default"].string
 };
-var defaultProps$d = {
+var defaultProps$e = {
   thumbnail: null,
   thumbnailAlign: 'top',
   children: null,
@@ -2305,24 +2304,24 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card', styles$d.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"](['card', styles$e.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames__default["default"](['me-3', styles$d.thumbnail, _defineProperty__default["default"]({
+    className: classNames__default["default"](['me-3', styles$e.thumbnail, _defineProperty__default["default"]({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
   }) : thumbnail, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-body', styles$d.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
+    className: classNames__default["default"](['card-body', styles$e.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
-    className: classNames__default["default"](['mt-0', styles$d.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
+    className: classNames__default["default"](['mt-0', styles$e.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children));
 };
 
-Media.propTypes = propTypes$d;
-Media.defaultProps = defaultProps$d;
+Media.propTypes = propTypes$e;
+Media.defaultProps = defaultProps$e;
 
 /**
  * Core
@@ -2856,7 +2855,7 @@ var pageMetadata = PropTypes__default["default"].shape({
 });
 
 /* eslint-disable react/no-array-index-key */
-var propTypes$c = {
+var propTypes$d = {
   title: PropTypes__default["default"].string,
   url: PropTypes__default["default"].string,
   metadata: pageMetadata,
@@ -2864,7 +2863,7 @@ var propTypes$c = {
   suffix: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node
 };
-var defaultProps$c = {
+var defaultProps$d = {
   title: null,
   url: null,
   metadata: null,
@@ -2988,12 +2987,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__default["default"].arrayOf(PropTypes__default["default"].node),
   auto: PropTypes__default["default"].bool,
   delay: PropTypes__default["default"].number,
@@ -3002,7 +3001,7 @@ var propTypes$b = {
   className: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node
 };
-var defaultProps$b = {
+var defaultProps$c = {
   items: [],
   auto: true,
   delay: 5000,
@@ -3050,24 +3049,24 @@ var Slideshow = function Slideshow(_ref) {
     height: height
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)]),
+    className: classNames__default["default"]([styles$d.container, _defineProperty__default["default"]({}, className, className)]),
     style: style
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$c.items
+    className: styles$d.items
   }, items.map(function (it, i) {
     var _ref3;
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames__default["default"]([styles$c.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$c.prev, i < index), _defineProperty__default["default"](_ref3, styles$c.current, i === index), _defineProperty__default["default"](_ref3, styles$c.next, i > index), _ref3)])
+      className: classNames__default["default"]([styles$d.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, styles$d.prev, i < index), _defineProperty__default["default"](_ref3, styles$d.current, i === index), _defineProperty__default["default"](_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) {
@@ -3080,7 +3079,7 @@ var AdFrame = function AdFrame(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faAd,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -3095,7 +3094,7 @@ var AdImage = function AdImage(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faImage,
-    className: styles$b.icon
+    className: styles$c.icon
   }));
 };
 
@@ -3112,13 +3111,13 @@ var Audio = function Audio(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.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__default["default"].number,
   lineMargin: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -3126,7 +3125,7 @@ var propTypes$a = {
   fontSize: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string
 };
-var defaultProps$a = {
+var defaultProps$b = {
   lines: 1,
   lineMargin: 1,
   width: '100%',
@@ -3145,11 +3144,11 @@ var PlaceholderText = function PlaceholderText(_ref) {
   var lineHeight = height !== null && isNumber__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '90%';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$b.container, _defineProperty__default["default"]({}, className, className)])
   }, _toConsumableArray__default["default"](Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "line-".concat(index),
-      className: styles$a.line,
+      className: styles$b.line,
       style: {
         width: index % 2 === 0 ? width : oddWidth,
         height: lineHeight,
@@ -3160,8 +3159,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) {
@@ -3192,38 +3191,38 @@ var Image = function Image(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.shortText]),
+    className: classNames__default["default"]([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__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "100%",
-    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
+    className: classNames__default["default"]([styles$a.container, _defineProperty__default["default"]({}, props.className, props.className !== null)])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
-    className: styles$9.icon
+    className: styles$a.icon
   }));
 };
 
@@ -3232,18 +3231,18 @@ var MapPath = function MapPath(props) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: "100%",
     height: "70%",
-    className: classNames__default["default"]([props.className, styles$b.mapPath])
+    className: classNames__default["default"]([props.className, styles$c.mapPath])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.subtitle]),
+    className: classNames__default["default"]([props.className, styles$c.subtitle]),
     height: 0.5,
     lines: 6
   }));
@@ -3252,7 +3251,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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.shortText]),
+    className: classNames__default["default"]([props.className, styles$c.shortText]),
     height: 0.2,
     lines: 2
   }));
@@ -3261,7 +3260,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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.subtitle]),
+    className: classNames__default["default"]([props.className, styles$c.subtitle]),
     height: 0.3,
     lines: 1
   }));
@@ -3280,21 +3279,21 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames__default["default"]([props.className, styles$b.text])
+    className: classNames__default["default"]([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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.timeline])
+    className: classNames__default["default"]([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__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
-    className: classNames__default["default"]([props.className, styles$b.title]),
+    className: classNames__default["default"]([props.className, styles$c.title]),
     height: 0.5,
     lines: 2,
     lineMargin: 4
@@ -3312,11 +3311,11 @@ var Video = function Video(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.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,
@@ -3325,13 +3324,13 @@ var Video360 = function Video360(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)]),
-    boxClassName: styles$8.box
+    className: classNames__default["default"]([styles$9.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    boxClassName: styles$9.box
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faVideo,
-    className: styles$8.icon
+    className: styles$9.icon
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8.label
+    className: styles$9.label
   }, "360"));
 };
 
@@ -3346,13 +3345,133 @@ var VideoLoop = function VideoLoop(_ref) {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faPlay,
-    className: styles$b.icon
+    className: styles$c.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.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__default["default"].number,
+  height: PropTypes__default["default"].number,
+  fit: PropTypes__default["default"].oneOf([null, 'cover', 'contain']),
+  screenWidth: PropTypes__default["default"].number,
+  screenHeight: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string,
+  children: PropTypes__default["default"].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 = hooks.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 = 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,
+        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,
+      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$transform = _useMemo.transform,
+      screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
+
+  var screenSize = React.useMemo(function () {
+    return {
+      screen: 'mobile',
+      screens: ['mobile'],
+      width: screenWidth,
+      height: screenHeight
+    };
+  }, [screenWidth, screenHeight]);
+  var hasFrameSize = frameWidth !== null && frameHeight !== null;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    styles: classNames__default["default"]([styles$8.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    ref: !hasSize ? refContainer : null
+  }, hasFrameSize ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.frame,
+    style: {
+      width: frameWidth,
+      height: frameHeight
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$8.screen,
+    style: {
+      width: screenWidth,
+      height: screenHeight,
+      transform: screenTransform
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
+    size: screenSize
+  }, /*#__PURE__*/React__default["default"].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 = {
@@ -3426,70 +3545,76 @@ Screen.propTypes = propTypes$9;
 Screen.defaultProps = defaultProps$9;
 var Screen$1 = /*#__PURE__*/React__default["default"].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: core.PropTypes.component.isRequired,
   layout: PropTypes__default["default"].string,
+  screenWidth: PropTypes__default["default"].number,
+  screenHeight: PropTypes__default["default"].number,
   screenState: PropTypes__default["default"].string,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
+  withSize: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].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 = React.useMemo(function () {
-    return {
-      screen: 'mobile',
-      screens: ['mobile'],
-      width: width,
-      height: height
-    };
-  }, [width, height]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
-    data: screen,
-    renderContext: "placeholder",
-    screenState: screenState
-  }, /*#__PURE__*/React__default["default"].createElement(Screen$1, {
+      withSize = _ref.withSize,
+      className = _ref.className,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+
+  var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
+    renderContext: "placeholder",
+    screenState: screenState,
     layout: layout,
-    className: classNames__default["default"]([styles$6.container, _defineProperty__default["default"]({}, className, className !== null)])
-  })));
+    className: classNames__default["default"]([styles$6.screen, _defineProperty__default["default"]({}, className, !withSize)])
+  }, props));
+  return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight
+  }, screenElement) : screenElement;
 };
 
 ScreenPlaceholder.propTypes = propTypes$8;
 ScreenPlaceholder.defaultProps = defaultProps$8;
 var Placeholder = /*#__PURE__*/React__default["default"].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: core.PropTypes.component.isRequired,
   screenState: PropTypes__default["default"].string,
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string
+  screenWidth: PropTypes__default["default"].number,
+  screenHeight: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string,
+  withSize: PropTypes__default["default"].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) {
@@ -3497,26 +3622,27 @@ var ScreenPreview = function ScreenPreview(_ref) {
       screenState = _ref.screenState,
       width = _ref.width,
       height = _ref.height,
-      className = _ref.className;
-  var screenSize = React.useMemo(function () {
-    return {
-      screen: 'mobile',
-      screens: ['mobile'],
-      width: width,
-      height: height
-    };
-  }, [width, height]);
-  return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
-    size: screenSize
-  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
-    data: screen,
-    renderContext: "preview",
-    screenState: screenState
-  }, /*#__PURE__*/React__default["default"].createElement(Screen$1, {
+      screenWidth = _ref.screenWidth,
+      screenHeight = _ref.screenHeight,
+      className = _ref.className,
+      withSize = _ref.withSize,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded);
+
+  var screenElement = /*#__PURE__*/React__default["default"].createElement(Screen$1, Object.assign({
     screen: screen,
     renderContext: "preview",
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)])
-  })));
+    screenState: screenState,
+    width: !withSize ? width : undefined,
+    height: !withSize ? height : undefined,
+    className: classNames__default["default"]([styles$5.screen, _defineProperty__default["default"]({}, className, !withSize)])
+  }, props));
+  return withSize ? /*#__PURE__*/React__default["default"].createElement(ScreenSizer, {
+    className: className,
+    screenWidth: screenWidth,
+    screenHeight: screenHeight,
+    width: width,
+    height: height
+  }, screenElement) : screenElement;
 };
 
 ScreenPreview.propTypes = propTypes$7;
@@ -4114,6 +4240,7 @@ exports.Screen = Screen$1;
 exports.ScreenElement = ScreenElement;
 exports.ScreenPlaceholder = Placeholder;
 exports.ScreenPreview = Preview;
+exports.ScreenSizer = ScreenSizer;
 exports.Screens = Screens;
 exports.Slideshow = Slideshow;
 exports.Spinner = Spinner;