@micromag/screen-gallery 0.3.148 → 0.3.153

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-gallery-container .micromag-screen-gallery-content,.micromag-screen-gallery-container .micromag-screen-gallery-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-gallery-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{position:relative;padding:6px}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-container .micromag-screen-gallery-grid{position:relative;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}
+.micromag-screen-gallery-container .micromag-screen-gallery-content,.micromag-screen-gallery-container .micromag-screen-gallery-image{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-gallery-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-gallery-disabled.micromag-screen-gallery-container{overflow:hidden;pointer-events:none}.micromag-screen-gallery-hidden.micromag-screen-gallery-container{display:none;visibility:hidden}.micromag-screen-gallery-placeholder.micromag-screen-gallery-container .micromag-screen-gallery-content{position:relative;padding:6px}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-gallery-container .micromag-screen-gallery-grid{position:relative;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-placeholder{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption,.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{width:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyImage{height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-emptyCaption{height:50px;margin-top:10px}.micromag-screen-gallery-container .micromag-screen-gallery-gridItem{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-screen-gallery-container .micromag-screen-gallery-imageContainer{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-gallery-container .micromag-screen-gallery-callToAction{position:absolute;bottom:0;left:0;width:100%;-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out, -webkit-transform .2s ease-out}.micromag-screen-gallery-container .micromag-screen-gallery-caption{padding:10px 0}.micromag-screen-gallery-container .micromag-screen-gallery-content{-webkit-transition:padding-bottom .2s ease-out;-o-transition:padding-bottom .2s ease-out;transition:padding-bottom .2s ease-out}

package/es/index.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Transitions, ScreenElement } from '@micromag/core/components';
-import { useScreenSize, useViewer, useScreenRenderContext } from '@micromag/core/contexts';
-import { useResizeObserver } from '@micromag/core/hooks';
+import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
+import { useDimensionObserver } from '@micromag/core/hooks';
 import { isImageFilled, isTextFilled } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import CallToAction from '@micromag/element-call-to-action';
@@ -191,7 +191,7 @@ var layoutProps = {
   }
 };
 
-var styles = {"container":"micromag-screen-gallery-container","content":"micromag-screen-gallery-content","image":"micromag-screen-gallery-image","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","emptyCaption":"micromag-screen-gallery-emptyCaption","emptyImage":"micromag-screen-gallery-emptyImage","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","caption":"micromag-screen-gallery-caption"};
+var styles = {"container":"micromag-screen-gallery-container","content":"micromag-screen-gallery-content","image":"micromag-screen-gallery-image","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","emptyCaption":"micromag-screen-gallery-emptyCaption","emptyImage":"micromag-screen-gallery-emptyImage","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
 
 var propTypes = {
   layout: PropTypes.oneOf([// 2
@@ -210,8 +210,6 @@ var propTypes = {
   active: PropTypes.bool,
   transitions: PropTypes$1.transitions,
   transitionStagger: PropTypes.number,
-  enableInteraction: PropTypes.func,
-  disableInteraction: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps = {
@@ -226,13 +224,11 @@ var defaultProps = {
   active: true,
   transitions: null,
   transitionStagger: 50,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
 var GalleryScreen = function GalleryScreen(_ref) {
-  var _ref6;
+  var _ref5;
 
   var layout = _ref.layout,
       images = _ref.images,
@@ -245,18 +241,25 @@ var GalleryScreen = function GalleryScreen(_ref) {
       captionMaxLines = _ref.captionMaxLines,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _usePlaybackContext = usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = usePlaybackMediaRef(current);
 
   var _useScreenRenderConte = useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
@@ -301,15 +304,12 @@ var GalleryScreen = function GalleryScreen(_ref) {
       imagesSizes = _useState4[0],
       setImagesSizes = _useState4[1];
 
-  var _useResizeObserver = useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = contentRect || {},
-      _ref3$width = _ref3.width,
-      contentWidth = _ref3$width === void 0 ? null : _ref3$width,
-      _ref3$height = _ref3.height,
-      contentHeight = _ref3$height === void 0 ? null : _ref3$height;
+  var _useDimensionObserver = useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      contentWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+      _useDimensionObserver3 = _useDimensionObserver.height,
+      contentHeight = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
 
   useEffect(function () {
     if (imagesEl.current.length) {
@@ -322,15 +322,15 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }
   }, [contentWidth, contentHeight, layout, setImagesSizes]); // Call to Action
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var _ref3 = callToAction || {},
+      _ref3$active = _ref3.active,
+      hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
 
-  var _useResizeObserver2 = useResizeObserver(),
-      callToActionRef = _useResizeObserver2.ref,
-      callToActionRect = _useResizeObserver2.entry.contentRect;
+  var _useDimensionObserver4 = useDimensionObserver(),
+      callToActionRef = _useDimensionObserver4.ref,
+      _useDimensionObserver5 = _useDimensionObserver4.height,
+      callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5; // items
 
-  var _ref4 = callToActionRect || {},
-      _ref4$height = _ref4.height,
-      callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
 
   var items = _toConsumableArray(Array(gridSpaces)).map(function (item, itemI) {
     var image = images !== null ? images[itemI] : null;
@@ -339,9 +339,9 @@ var GalleryScreen = function GalleryScreen(_ref) {
       media: image
     };
 
-    var _ref5 = finalImage || {},
-        _ref5$caption = _ref5.caption,
-        caption = _ref5$caption === void 0 ? null : _ref5$caption;
+    var _ref4 = finalImage || {},
+        _ref4$caption = _ref4.caption,
+        caption = _ref4$caption === void 0 ? null : _ref4$caption;
 
     var hasImage = isImageFilled(finalImage);
     var hasCaption = isTextFilled(caption);
@@ -410,7 +410,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
   });
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
+    className: classNames([styles.container, (_ref5 = {}, _defineProperty(_ref5, className, className !== null), _defineProperty(_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
@@ -418,15 +418,17 @@ var GalleryScreen = function GalleryScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.content,
     style: {
-      paddingTop: menuOverScreen && !isPreview ? menuSize : null,
-      paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
+      paddingTop: !isPreview ? viewerTopHeight : null,
+      paddingBottom: (hasCallToAction ? callToActionHeight : 0) + (!isPreview ? viewerBottomHeight : 0)
     },
     ref: contentRef
   }, /*#__PURE__*/React.createElement(Grid, Object.assign({
@@ -434,22 +436,20 @@ var GalleryScreen = function GalleryScreen(_ref) {
     spacing: finalSpacing,
     items: items
   }, grid)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    className: styles.callToAction,
+    ref: callToActionRef,
     style: {
-      marginTop: -finalSpacing
+      paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+      paddingTop: finalSpacing / 2,
+      paddingBottom: finalSpacing / 2,
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
-  }, /*#__PURE__*/React.createElement(CallToAction, {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    callToAction: callToAction,
+  }, /*#__PURE__*/React.createElement(CallToAction, Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)));
+    openWebView: openWebView
+  }))) : null)));
 };
 
 GalleryScreen.propTypes = propTypes;

package/lib/index.js

@@ -213,7 +213,7 @@ var layoutProps = {
   }
 };
 
-var styles = {"container":"micromag-screen-gallery-container","content":"micromag-screen-gallery-content","image":"micromag-screen-gallery-image","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","emptyCaption":"micromag-screen-gallery-emptyCaption","emptyImage":"micromag-screen-gallery-emptyImage","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","caption":"micromag-screen-gallery-caption"};
+var styles = {"container":"micromag-screen-gallery-container","content":"micromag-screen-gallery-content","image":"micromag-screen-gallery-image","disabled":"micromag-screen-gallery-disabled","hidden":"micromag-screen-gallery-hidden","placeholder":"micromag-screen-gallery-placeholder","emptyCaption":"micromag-screen-gallery-emptyCaption","emptyImage":"micromag-screen-gallery-emptyImage","grid":"micromag-screen-gallery-grid","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","callToAction":"micromag-screen-gallery-callToAction","caption":"micromag-screen-gallery-caption"};
 
 var propTypes = {
   layout: PropTypes__default["default"].oneOf([// 2
@@ -232,8 +232,6 @@ var propTypes = {
   active: PropTypes__default["default"].bool,
   transitions: core.PropTypes.transitions,
   transitionStagger: PropTypes__default["default"].number,
-  enableInteraction: PropTypes__default["default"].func,
-  disableInteraction: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
 };
 var defaultProps = {
@@ -248,13 +246,11 @@ var defaultProps = {
   active: true,
   transitions: null,
   transitionStagger: 50,
-  enableInteraction: null,
-  disableInteraction: null,
   className: null
 };
 
 var GalleryScreen = function GalleryScreen(_ref) {
-  var _ref6;
+  var _ref5;
 
   var layout = _ref.layout,
       images = _ref.images,
@@ -267,18 +263,25 @@ var GalleryScreen = function GalleryScreen(_ref) {
       captionMaxLines = _ref.captionMaxLines,
       transitions = _ref.transitions,
       transitionStagger = _ref.transitionStagger,
-      enableInteraction = _ref.enableInteraction,
-      disableInteraction = _ref.disableInteraction,
       className = _ref.className;
 
   var _useScreenSize = contexts.useScreenSize(),
       width = _useScreenSize.width,
       height = _useScreenSize.height,
-      menuOverScreen = _useScreenSize.menuOverScreen,
       resolution = _useScreenSize.resolution;
 
-  var _useViewer = contexts.useViewer(),
-      menuSize = _useViewer.menuSize;
+  var _useViewerContext = contexts.useViewerContext(),
+      viewerTopHeight = _useViewerContext.topHeight,
+      viewerBottomHeight = _useViewerContext.bottomHeight,
+      viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+
+  var _useViewerWebView = contexts.useViewerWebView(),
+      openWebView = _useViewerWebView.open;
+
+  var _usePlaybackContext = contexts.usePlaybackContext(),
+      muted = _usePlaybackContext.muted;
+
+  var mediaRef = contexts.usePlaybackMediaRef(current);
 
   var _useScreenRenderConte = contexts.useScreenRenderContext(),
       isView = _useScreenRenderConte.isView,
@@ -323,15 +326,12 @@ var GalleryScreen = function GalleryScreen(_ref) {
       imagesSizes = _useState4[0],
       setImagesSizes = _useState4[1];
 
-  var _useResizeObserver = hooks.useResizeObserver(),
-      contentRef = _useResizeObserver.ref,
-      contentRect = _useResizeObserver.entry.contentRect;
-
-  var _ref3 = contentRect || {},
-      _ref3$width = _ref3.width,
-      contentWidth = _ref3$width === void 0 ? null : _ref3$width,
-      _ref3$height = _ref3.height,
-      contentHeight = _ref3$height === void 0 ? null : _ref3$height;
+  var _useDimensionObserver = hooks.useDimensionObserver(),
+      contentRef = _useDimensionObserver.ref,
+      _useDimensionObserver2 = _useDimensionObserver.width,
+      contentWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
+      _useDimensionObserver3 = _useDimensionObserver.height,
+      contentHeight = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
 
   React.useEffect(function () {
     if (imagesEl.current.length) {
@@ -344,15 +344,15 @@ var GalleryScreen = function GalleryScreen(_ref) {
     }
   }, [contentWidth, contentHeight, layout, setImagesSizes]); // Call to Action
 
-  var hasCallToAction = callToAction !== null && callToAction.active === true;
+  var _ref3 = callToAction || {},
+      _ref3$active = _ref3.active,
+      hasCallToAction = _ref3$active === void 0 ? false : _ref3$active;
 
-  var _useResizeObserver2 = hooks.useResizeObserver(),
-      callToActionRef = _useResizeObserver2.ref,
-      callToActionRect = _useResizeObserver2.entry.contentRect;
+  var _useDimensionObserver4 = hooks.useDimensionObserver(),
+      callToActionRef = _useDimensionObserver4.ref,
+      _useDimensionObserver5 = _useDimensionObserver4.height,
+      callToActionHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5; // items
 
-  var _ref4 = callToActionRect || {},
-      _ref4$height = _ref4.height,
-      callToActionHeight = _ref4$height === void 0 ? 0 : _ref4$height;
 
   var items = _toConsumableArray__default["default"](Array(gridSpaces)).map(function (item, itemI) {
     var image = images !== null ? images[itemI] : null;
@@ -361,9 +361,9 @@ var GalleryScreen = function GalleryScreen(_ref) {
       media: image
     };
 
-    var _ref5 = finalImage || {},
-        _ref5$caption = _ref5.caption,
-        caption = _ref5$caption === void 0 ? null : _ref5$caption;
+    var _ref4 = finalImage || {},
+        _ref4$caption = _ref4.caption,
+        caption = _ref4$caption === void 0 ? null : _ref4$caption;
 
     var hasImage = utils.isImageFilled(finalImage);
     var hasCaption = utils.isTextFilled(caption);
@@ -432,7 +432,7 @@ var GalleryScreen = function GalleryScreen(_ref) {
   });
 
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
+    className: classNames__default["default"]([styles.container, (_ref5 = {}, _defineProperty__default["default"](_ref5, className, className !== null), _defineProperty__default["default"](_ref5, styles.isPlaceholder, isPlaceholder), _ref5)]),
     "data-screen-ready": ready
   }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
     background: background,
@@ -440,15 +440,17 @@ var GalleryScreen = function GalleryScreen(_ref) {
     height: height,
     resolution: resolution,
     playing: backgroundPlaying,
-    shouldLoad: mediaShouldLoad
+    muted: muted,
+    shouldLoad: mediaShouldLoad,
+    mediaRef: mediaRef
   }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
     height: height
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.content,
     style: {
-      paddingTop: menuOverScreen && !isPreview ? menuSize : null,
-      paddingBottom: hasCallToAction ? callToActionHeight - finalSpacing : 0
+      paddingTop: !isPreview ? viewerTopHeight : null,
+      paddingBottom: (hasCallToAction ? callToActionHeight : 0) + (!isPreview ? viewerBottomHeight : 0)
     },
     ref: contentRef
   }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], Object.assign({
@@ -456,22 +458,20 @@ var GalleryScreen = function GalleryScreen(_ref) {
     spacing: finalSpacing,
     items: items
   }, grid)), !isPlaceholder && hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.callToAction,
+    ref: callToActionRef,
     style: {
-      marginTop: -finalSpacing
+      paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+      paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+      paddingTop: finalSpacing / 2,
+      paddingBottom: finalSpacing / 2,
+      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
     }
-  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
-    ref: callToActionRef,
-    className: styles.callToAction,
-    callToAction: callToAction,
+  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], Object.assign({}, callToAction, {
     animationDisabled: isPreview,
     focusable: current && isView,
-    screenSize: {
-      width: width,
-      height: height
-    },
-    enableInteraction: enableInteraction,
-    disableInteraction: disableInteraction
-  })) : null)));
+    openWebView: openWebView
+  }))) : null)));
 };
 
 GalleryScreen.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-gallery",
-    "version": "0.3.148",
+    "version": "0.3.153",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,15 +49,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.148",
-        "@micromag/element-background": "^0.3.148",
-        "@micromag/element-call-to-action": "^0.3.148",
-        "@micromag/element-container": "^0.3.148",
-        "@micromag/element-grid": "^0.3.148",
-        "@micromag/element-layout": "^0.3.148",
-        "@micromag/element-text": "^0.3.148",
-        "@micromag/element-visual": "^0.3.148",
-        "@micromag/transforms": "^0.3.148",
+        "@micromag/core": "^0.3.153",
+        "@micromag/element-background": "^0.3.153",
+        "@micromag/element-call-to-action": "^0.3.153",
+        "@micromag/element-container": "^0.3.153",
+        "@micromag/element-grid": "^0.3.153",
+        "@micromag/element-layout": "^0.3.153",
+        "@micromag/element-text": "^0.3.153",
+        "@micromag/element-visual": "^0.3.153",
+        "@micromag/transforms": "^0.3.153",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -67,5 +67,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "b10cd7739e7de8595c26acc0e08d6e84220be17c"
+    "gitHead": "3832de24bc306639b162f9778b3250ce1d05b2aa"
 }