@micromag/screen-image-360 0.3.77 → 0.3.78

package/assets/css/styles.css

@@ -0,0 +1 @@
+.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-image-360-container .micromag-screen-image-360-canvas,.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton,.micromag-screen-image-360-container .micromag-screen-image-360-content,.micromag-screen-image-360-container .micromag-screen-image-360-placeholder,.micromag-screen-image-360-container .micromag-screen-image-360-video{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-image-360-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-image-360-disabled.micromag-screen-image-360-container{overflow:hidden;pointer-events:none}.micromag-screen-image-360-hidden.micromag-screen-image-360-container{display:none;visibility:hidden}.micromag-screen-image-360-placeholder.micromag-screen-image-360-container .micromag-screen-image-360-content{position:relative;padding:6px}.micromag-screen-image-360-container .micromag-screen-image-360-empty{margin:5px auto;border:2px dashed #343434;color:#343434;height:100%;margin:0}.micromag-screen-image-360-container .micromag-screen-image-360-canvasButton{-ms-touch-action:none;touch-action:none}.micromag-screen-image-360-container .micromag-screen-image-360-videoContainer{position:absolute}.micromag-screen-image-360-container .micromag-screen-image-360-video{visibility:hidden}.micromag-screen-image-360-container .micromag-screen-image-360-video video{height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-mediaControls{padding:10px 20px 20px}.micromag-screen-image-360-container .micromag-screen-image-360-placeholder{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;height:100%}.micromag-screen-image-360-container .micromag-screen-image-360-bottomContent{position:absolute;bottom:0;width:100%}.micromag-screen-image-360-container.micromag-screen-image-360-showVideo .micromag-screen-image-360-video{visibility:visible}

package/es/index.js

@@ -0,0 +1,568 @@
+import { FormattedMessage, defineMessage } from 'react-intl';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { getSizeWithinBounds } from '@folklore/size';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import 'whatwg-fetch';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { ScreenElement, PlaceholderVideo360, Transitions } from '@micromag/core/components';
+import { useScreenSize, useScreenRenderContext } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useAnimationFrame } from '@micromag/core/hooks';
+import Background from '@micromag/element-background';
+import CallToAction from '@micromag/element-call-to-action';
+import Container from '@micromag/element-container';
+import Image from '@micromag/element-image';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { Video, Container as Container$1 } from '@micromag/transforms/apple-news';
+
+var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","bottomContent":"micromag-screen-image-360-bottomContent","showVideo":"micromag-screen-image-360-showVideo"};
+
+/**
+ * Locale loader
+ */
+
+var packageCache = null;
+
+var useThree = function useThree() {
+  // transport
+  var _useState = useState({
+    "package": packageCache
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      loadedPackage = _useState2[0]["package"],
+      setLoadedPackage = _useState2[1];
+
+  useEffect(function () {
+    var canceled = false;
+
+    if (loadedPackage !== null) {
+      return function () {
+        canceled = true;
+      };
+    }
+
+    import('three').then(function (_ref) {
+      var Scene = _ref.Scene,
+          PerspectiveCamera = _ref.PerspectiveCamera,
+          SphereBufferGeometry = _ref.SphereBufferGeometry,
+          VideoTexture = _ref.VideoTexture,
+          TextureLoader = _ref.TextureLoader,
+          MeshBasicMaterial = _ref.MeshBasicMaterial,
+          Mesh = _ref.Mesh,
+          WebGLRenderer = _ref.WebGLRenderer,
+          MathUtils = _ref.MathUtils;
+      packageCache = {
+        Scene: Scene,
+        PerspectiveCamera: PerspectiveCamera,
+        SphereBufferGeometry: SphereBufferGeometry,
+        VideoTexture: VideoTexture,
+        TextureLoader: TextureLoader,
+        MeshBasicMaterial: MeshBasicMaterial,
+        Mesh: Mesh,
+        WebGLRenderer: WebGLRenderer,
+        MathUtils: MathUtils
+      };
+
+      if (!canceled) {
+        setLoadedPackage({
+          "package": packageCache
+        });
+      }
+    });
+    return function () {
+      canceled = true;
+    };
+  }, [loadedPackage, setLoadedPackage]);
+  return loadedPackage;
+};
+
+var propTypes = {
+  layout: PropTypes.oneOf(['full']),
+  image: PropTypes$1.imageMedia,
+  background: PropTypes$1.backgroundElement,
+  callToAction: PropTypes$1.callToAction,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  transitions: PropTypes$1.transitions,
+  onPrevious: PropTypes.func,
+  onNext: PropTypes.func,
+  type: PropTypes.string,
+  spacing: PropTypes.number,
+  className: PropTypes.string
+};
+var defaultProps = {
+  layout: 'full',
+  image: null,
+  background: null,
+  callToAction: null,
+  current: true,
+  active: true,
+  transitions: null,
+  onPrevious: null,
+  onNext: null,
+  type: null,
+  spacing: 20,
+  className: null
+};
+
+var Image360Screen = function Image360Screen(_ref) {
+  var _ref6;
+
+  _ref.layout;
+      var image = _ref.image,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      active = _ref.active,
+      transitions = _ref.transitions,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      type = _ref.type,
+      spacing = _ref.spacing,
+      className = _ref.className;
+  var THREE = useThree();
+  var trackScreenEvent = useTrackScreenEvent(type);
+
+  var _useScreenSize = useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      landscape = _useScreenSize.landscape,
+      resolution = _useScreenSize.resolution;
+
+  var _useScreenRenderConte = useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var backgroundShouldLoad = current || active || !isView;
+  var canvasContainerRef = useRef(); // ------------------------------------
+
+  var hasMedia = image !== null;
+
+  var _useState = useState(!hasMedia),
+      _useState2 = _slicedToArray(_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var transitionPlaying = current && ready;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+
+  var _ref2 = image || {},
+      _ref2$metadata = _ref2.metadata,
+      imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
+      _ref2$url = _ref2.url,
+      imageUrl = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$thumbnail_url = _ref2.thumbnail_url,
+      thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
+
+  var hasMediaUrl = imageUrl !== null;
+
+  var _ref3 = imageMetadata || {},
+      _ref3$width = _ref3.width,
+      imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
+      _ref3$height = _ref3.height,
+      imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+
+  var hasThumbnail = thumbnailUrl !== null;
+
+  var _useState3 = useState(!hasThumbnail),
+      _useState4 = _slicedToArray(_useState3, 2),
+      posterReady = _useState4[0],
+      setPosterReady = _useState4[1];
+
+  var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
+
+  var _getSizeWithinBounds = getSizeWithinBounds(imageWidth, imageHeight, width, height, {
+    cover: true
+  }),
+      resizedImageWidth = _getSizeWithinBounds.width,
+      resizedImageHeight = _getSizeWithinBounds.height;
+
+  var resizedImageLeft = -(resizedImageWidth - width) / 2;
+  var resizedImageTop = -(resizedImageHeight - height) / 2;
+  useEffect(function () {
+    setReady(!hasMediaUrl);
+  }, [imageUrl, hasMediaUrl, setReady]);
+  useEffect(function () {
+    setPosterReady(!hasThumbnail);
+  }, [thumbnailUrl, hasThumbnail, setPosterReady]); // 3D layer  --------------------------
+
+  var canvasRef = useRef(null);
+  var camera = useRef(null);
+  var scene = useRef(null);
+  var renderer = useRef(null);
+  var lon = useRef(0);
+  var lat = useRef(0);
+  var phi = useRef(0);
+  var theta = useRef(0);
+  useRef(50);
+  var pointerDown = useRef(false);
+  var pointerDownX = useRef(0);
+  var pointerDownY = useRef(0);
+  var pointerLon = useRef(0);
+  var pointerLat = useRef(0); // render 3D frame
+
+  var render3D = useCallback(function () {
+    if (THREE === null) {
+      return;
+    }
+
+    THREE.MathUtils; // lat.current = Math.max(-85, Math.min(85, lat.current));
+    // phi.current = MathUtils.degToRad(90 - lat.current);
+    // theta.current = MathUtils.degToRad(lon.current);
+    // camera.current.position.x =
+    //     distance.current * Math.sin(phi.current) * Math.cos(theta.current);
+    // camera.current.position.y = distance.current * Math.cos(phi.current);
+    // camera.current.position.z =
+    //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
+    // camera.current.lookAt(0, 0, 0);
+
+    lat.current = Math.max(-85, Math.min(85, lat.current));
+    phi.current = THREE.MathUtils.degToRad(90 - lat.current);
+    theta.current = THREE.MathUtils.degToRad(lon.current);
+    var x = 500 * Math.sin(phi.current) * Math.cos(theta.current);
+    var y = 500 * Math.cos(phi.current);
+    var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
+    camera.current.lookAt(x, y, z);
+    renderer.current.render(scene.current, camera.current);
+  }, [THREE]); // Init 3D layer
+
+  useEffect(function () {
+    if (THREE !== null && hasMediaUrl && withSphere) {
+      var Scene = THREE.Scene,
+          PerspectiveCamera = THREE.PerspectiveCamera,
+          SphereBufferGeometry = THREE.SphereBufferGeometry,
+          MeshBasicMaterial = THREE.MeshBasicMaterial,
+          Mesh = THREE.Mesh,
+          WebGLRenderer = THREE.WebGLRenderer,
+          TextureLoader = THREE.TextureLoader;
+      var _canvasRef$current = canvasRef.current,
+          canvasWidth = _canvasRef$current.offsetWidth,
+          canvasHeight = _canvasRef$current.offsetHeight;
+      camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
+      scene.current = new Scene();
+      var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
+      geometry.scale(-1, 1, 1);
+      var texture = new TextureLoader().load(imageUrl);
+      var material = new MeshBasicMaterial({
+        map: texture
+      });
+      var mesh = new Mesh(geometry, material);
+      scene.current.add(mesh);
+      renderer.current = new WebGLRenderer({
+        canvas: canvasRef.current
+      });
+      renderer.current.setPixelRatio(typeof window !== 'undefined' ? window.devicePixelRatio : 1);
+      renderer.current.setSize(canvasWidth, canvasHeight);
+      render3D();
+    }
+
+    return function () {
+      if (withSphere) {
+        camera.current = null;
+        scene.current = null;
+        renderer.current = null;
+      }
+    };
+  }, [hasMediaUrl, withSphere, render3D, THREE]);
+  useAnimationFrame(render3D, {
+    disabled: !withSphere || THREE === null
+  }); // Resize 3D layer
+
+  useEffect(function () {
+    if (camera.current !== null && renderer.current !== null) {
+      camera.current.aspect = width / height;
+      camera.current.updateProjectionMatrix();
+      renderer.current.setSize(width, height);
+    }
+  }, [width, height]); // Pointer interaction
+
+  var togglePlayTimeout = useRef(null);
+  var onPointerDown = useCallback(function (e) {
+    pointerDown.current = true;
+    pointerDownX.current = e.clientX;
+    pointerDownY.current = e.clientY;
+    pointerLon.current = lon.current;
+    pointerLat.current = lat.current;
+  }, []);
+  var pixelsMoved = useRef(0);
+  var lastPointerClient = useRef(null);
+  var pixelsMovedTracked = useRef(false);
+  var onPointerMove = useCallback(function (e) {
+    if (pointerDown.current) {
+      var _ref4 = e || {},
+          _ref4$clientX = _ref4.clientX,
+          clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
+          _ref4$clientY = _ref4.clientY,
+          clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
+
+      var downDeltaX = pointerDownX.current - clientX;
+      var downDeltaY = pointerDownY.current - clientY;
+      lon.current = downDeltaX * 0.2 + pointerLon.current;
+      lat.current = downDeltaY * 0.2 + pointerLat.current;
+
+      var _ref5 = lastPointerClient.current || {},
+          _ref5$x = _ref5.x,
+          lastX = _ref5$x === void 0 ? clientX : _ref5$x,
+          _ref5$y = _ref5.y,
+          lastY = _ref5$y === void 0 ? clientY : _ref5$y;
+
+      var deltaX = Math.abs(lastX - clientX) || 0;
+      var deltaY = Math.abs(lastY - clientY) || 0;
+      pixelsMoved.current += deltaX + deltaY;
+
+      if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
+        trackScreenEvent('drag_sphere');
+        pixelsMovedTracked.current = true;
+      }
+
+      lastPointerClient.current = {
+        x: clientX,
+        y: clientY
+      };
+
+      if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
+        if (togglePlayTimeout.current !== null) {
+          clearTimeout(togglePlayTimeout.current);
+          togglePlayTimeout.current = null;
+        }
+      }
+    }
+  }, [width, height, trackScreenEvent]);
+  var onPointerUp = useCallback(function (e) {
+    var canvasContainer = canvasContainerRef.current;
+
+    if (pointerDown.current && canvasContainer !== null) {
+      var distX = Math.abs(pointerDownX.current - e.clientX);
+      var distY = Math.abs(pointerDownY.current - e.clientY);
+      var pixelsMovedTolerance = 3;
+      var tapNextScreenWidthPercent = 0.5;
+      var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
+      var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
+
+      if (validNavigateTap) {
+        var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
+            _canvasContainer$getB2 = _canvasContainer$getB.left,
+            containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
+            containerWidth = _canvasContainer$getB.width;
+
+        var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
+
+        if (hasTappedLeft) {
+          if (onPrevious !== null) {
+            onPrevious();
+          }
+        } else if (onNext !== null) {
+          onNext();
+        }
+      }
+
+      if (togglePlayTimeout.current !== null) {
+        clearTimeout(togglePlayTimeout.current);
+        togglePlayTimeout.current = null;
+      }
+    }
+
+    pointerDown.current = false;
+  }, [onPrevious, onNext, landscape]);
+  var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
+
+  var items = [/*#__PURE__*/React.createElement(ScreenElement, {
+    key: "video",
+    placeholder: /*#__PURE__*/React.createElement(PlaceholderVideo360, {
+      className: styles.placeholder,
+      width: "100%",
+      height: "100%"
+    }),
+    emptyClassName: styles.empty,
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "/YQ+xP",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image 360"
+      }]
+    }),
+    isEmpty: !withSphere
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    playing: transitionPlaying,
+    transitions: transitions,
+    disabled: transitionDisabled,
+    fullscreen: true
+  }, withSphere ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
+    ref: canvasRef,
+    className: styles.canvas
+  }), /*#__PURE__*/React.createElement("button", {
+    className: styles.canvasButton,
+    type: "button",
+    "aria-label": "canvas-interaction",
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    tabIndex: current && isView ? null : '-1'
+  })) : /*#__PURE__*/React.createElement("div", {
+    className: styles.videoContainer,
+    style: {
+      width: resizedImageWidth,
+      height: resizedImageHeight,
+      left: resizedImageLeft,
+      top: resizedImageTop
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    className: styles.video,
+    media: {
+      url: thumbnailUrl,
+      metadata: {
+        width: imageWidth,
+        height: imageHeight
+      }
+    },
+    width: resizedImageWidth,
+    height: resizedImageHeight,
+    resolution: resolution
+  })))), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
+    key: "bottom-content",
+    className: styles.bottomContent
+  }, /*#__PURE__*/React.createElement(Transitions, {
+    playing: transitionPlaying,
+    transitions: transitions,
+    disabled: transitionDisabled
+  }, hasCallToAction ? /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: -spacing / 2
+    }
+  }, /*#__PURE__*/React.createElement(CallToAction, {
+    callToAction: callToAction,
+    animationDisabled: isPreview,
+    focusable: current && isView,
+    screenSize: {
+      width: width,
+      height: height
+    }
+  })) : null)) : null];
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.showVideo, isPreview || isStatic || isCapture), _ref6)]),
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
+  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    shouldLoad: backgroundShouldLoad
+  }) : null, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: canvasContainerRef,
+    className: styles.videoContainer,
+    style: {
+      width: resizedImageWidth,
+      height: resizedImageHeight,
+      left: resizedImageLeft,
+      top: resizedImageTop
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, items)));
+};
+
+Image360Screen.propTypes = propTypes;
+Image360Screen.defaultProps = defaultProps;
+var Image360Screen$1 = /*#__PURE__*/React.memo(Image360Screen);
+
+var transform = function transform(newStory, _ref) {
+  var video = _ref.video;
+
+  var _ref2 = video || {},
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media;
+
+  var _Video = Video(newStory, media),
+      titleStory = _Video.story,
+      titleComponent = _Video.component;
+
+  var _Container = Container$1(titleStory, _toConsumableArray(titleComponent ? [titleComponent] : [])),
+      containerStory = _Container.story,
+      containerComponent = _Container.component;
+
+  return _objectSpread(_objectSpread({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'video-360',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      id: "+9akmg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio and Video"
+      }]
+    }),
+    order: 5
+  },
+  title: defineMessage({
+    id: "GRVidW",
+    defaultMessage: [{
+      "type": 0,
+      "value": "360 Video"
+    }]
+  }),
+  component: Image360Screen$1,
+  layouts: ['full'],
+  transforms: transforms,
+  fields: [{
+    name: 'video',
+    type: 'video-element',
+    theme: {
+      color: 'primary'
+    },
+    defaultValue: {
+      autoPlay: true
+    },
+    label: defineMessage({
+      id: "tvl2Zc",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      id: "+MPZRu",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      boxStyle: 'cta',
+      label: {
+        textStyle: 'cta'
+      }
+    }
+  }]
+};
+
+export { Image360Screen$1 as Image360Screen, definition as default };

package/lib/index.js

@@ -0,0 +1,605 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var reactIntl = require('react-intl');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var size = require('@folklore/size');
+var classNames = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+require('whatwg-fetch');
+var core = require('@micromag/core');
+var components = require('@micromag/core/components');
+var contexts = require('@micromag/core/contexts');
+var hooks = require('@micromag/core/hooks');
+var Background = require('@micromag/element-background');
+var CallToAction = require('@micromag/element-call-to-action');
+var Container = require('@micromag/element-container');
+var Image = require('@micromag/element-image');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var appleNews = require('@micromag/transforms/apple-news');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
+var CallToAction__default = /*#__PURE__*/_interopDefaultLegacy(CallToAction);
+var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
+var Image__default = /*#__PURE__*/_interopDefaultLegacy(Image);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
+var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+
+var styles = {"container":"micromag-screen-image-360-container","canvasButton":"micromag-screen-image-360-canvasButton","canvas":"micromag-screen-image-360-canvas","content":"micromag-screen-image-360-content","placeholder":"micromag-screen-image-360-placeholder","video":"micromag-screen-image-360-video","disabled":"micromag-screen-image-360-disabled","hidden":"micromag-screen-image-360-hidden","empty":"micromag-screen-image-360-empty","videoContainer":"micromag-screen-image-360-videoContainer","mediaControls":"micromag-screen-image-360-mediaControls","bottomContent":"micromag-screen-image-360-bottomContent","showVideo":"micromag-screen-image-360-showVideo"};
+
+/**
+ * Locale loader
+ */
+
+var packageCache = null;
+
+var useThree = function useThree() {
+  // transport
+  var _useState = React.useState({
+    "package": packageCache
+  }),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      loadedPackage = _useState2[0]["package"],
+      setLoadedPackage = _useState2[1];
+
+  React.useEffect(function () {
+    var canceled = false;
+
+    if (loadedPackage !== null) {
+      return function () {
+        canceled = true;
+      };
+    }
+
+    Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('three')); }).then(function (_ref) {
+      var Scene = _ref.Scene,
+          PerspectiveCamera = _ref.PerspectiveCamera,
+          SphereBufferGeometry = _ref.SphereBufferGeometry,
+          VideoTexture = _ref.VideoTexture,
+          TextureLoader = _ref.TextureLoader,
+          MeshBasicMaterial = _ref.MeshBasicMaterial,
+          Mesh = _ref.Mesh,
+          WebGLRenderer = _ref.WebGLRenderer,
+          MathUtils = _ref.MathUtils;
+      packageCache = {
+        Scene: Scene,
+        PerspectiveCamera: PerspectiveCamera,
+        SphereBufferGeometry: SphereBufferGeometry,
+        VideoTexture: VideoTexture,
+        TextureLoader: TextureLoader,
+        MeshBasicMaterial: MeshBasicMaterial,
+        Mesh: Mesh,
+        WebGLRenderer: WebGLRenderer,
+        MathUtils: MathUtils
+      };
+
+      if (!canceled) {
+        setLoadedPackage({
+          "package": packageCache
+        });
+      }
+    });
+    return function () {
+      canceled = true;
+    };
+  }, [loadedPackage, setLoadedPackage]);
+  return loadedPackage;
+};
+
+var propTypes = {
+  layout: PropTypes__default["default"].oneOf(['full']),
+  image: core.PropTypes.imageMedia,
+  background: core.PropTypes.backgroundElement,
+  callToAction: core.PropTypes.callToAction,
+  current: PropTypes__default["default"].bool,
+  active: PropTypes__default["default"].bool,
+  transitions: core.PropTypes.transitions,
+  onPrevious: PropTypes__default["default"].func,
+  onNext: PropTypes__default["default"].func,
+  type: PropTypes__default["default"].string,
+  spacing: PropTypes__default["default"].number,
+  className: PropTypes__default["default"].string
+};
+var defaultProps = {
+  layout: 'full',
+  image: null,
+  background: null,
+  callToAction: null,
+  current: true,
+  active: true,
+  transitions: null,
+  onPrevious: null,
+  onNext: null,
+  type: null,
+  spacing: 20,
+  className: null
+};
+
+var Image360Screen = function Image360Screen(_ref) {
+  var _ref6;
+
+  _ref.layout;
+      var image = _ref.image,
+      background = _ref.background,
+      callToAction = _ref.callToAction,
+      current = _ref.current,
+      active = _ref.active,
+      transitions = _ref.transitions,
+      onPrevious = _ref.onPrevious,
+      onNext = _ref.onNext,
+      type = _ref.type,
+      spacing = _ref.spacing,
+      className = _ref.className;
+  var THREE = useThree();
+  var trackScreenEvent = hooks.useTrackScreenEvent(type);
+
+  var _useScreenSize = contexts.useScreenSize(),
+      width = _useScreenSize.width,
+      height = _useScreenSize.height,
+      landscape = _useScreenSize.landscape,
+      resolution = _useScreenSize.resolution;
+
+  var _useScreenRenderConte = contexts.useScreenRenderContext(),
+      isView = _useScreenRenderConte.isView,
+      isPreview = _useScreenRenderConte.isPreview,
+      isPlaceholder = _useScreenRenderConte.isPlaceholder,
+      isEdit = _useScreenRenderConte.isEdit,
+      isStatic = _useScreenRenderConte.isStatic,
+      isCapture = _useScreenRenderConte.isCapture;
+
+  var backgroundPlaying = current && (isView || isEdit);
+  var backgroundShouldLoad = current || active || !isView;
+  var canvasContainerRef = React.useRef(); // ------------------------------------
+
+  var hasMedia = image !== null;
+
+  var _useState = React.useState(!hasMedia),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      ready = _useState2[0],
+      setReady = _useState2[1];
+
+  var transitionPlaying = current && ready;
+  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+
+  var _ref2 = image || {},
+      _ref2$metadata = _ref2.metadata,
+      imageMetadata = _ref2$metadata === void 0 ? null : _ref2$metadata,
+      _ref2$url = _ref2.url,
+      imageUrl = _ref2$url === void 0 ? null : _ref2$url,
+      _ref2$thumbnail_url = _ref2.thumbnail_url,
+      thumbnailUrl = _ref2$thumbnail_url === void 0 ? null : _ref2$thumbnail_url;
+
+  var hasMediaUrl = imageUrl !== null;
+
+  var _ref3 = imageMetadata || {},
+      _ref3$width = _ref3.width,
+      imageWidth = _ref3$width === void 0 ? 0 : _ref3$width,
+      _ref3$height = _ref3.height,
+      imageHeight = _ref3$height === void 0 ? 0 : _ref3$height;
+
+  var hasThumbnail = thumbnailUrl !== null;
+
+  var _useState3 = React.useState(!hasThumbnail),
+      _useState4 = _slicedToArray__default["default"](_useState3, 2),
+      posterReady = _useState4[0],
+      setPosterReady = _useState4[1];
+
+  var withSphere = hasMediaUrl && (isView || isEdit) && !isCapture && !isStatic;
+
+  var _getSizeWithinBounds = size.getSizeWithinBounds(imageWidth, imageHeight, width, height, {
+    cover: true
+  }),
+      resizedImageWidth = _getSizeWithinBounds.width,
+      resizedImageHeight = _getSizeWithinBounds.height;
+
+  var resizedImageLeft = -(resizedImageWidth - width) / 2;
+  var resizedImageTop = -(resizedImageHeight - height) / 2;
+  React.useEffect(function () {
+    setReady(!hasMediaUrl);
+  }, [imageUrl, hasMediaUrl, setReady]);
+  React.useEffect(function () {
+    setPosterReady(!hasThumbnail);
+  }, [thumbnailUrl, hasThumbnail, setPosterReady]); // 3D layer  --------------------------
+
+  var canvasRef = React.useRef(null);
+  var camera = React.useRef(null);
+  var scene = React.useRef(null);
+  var renderer = React.useRef(null);
+  var lon = React.useRef(0);
+  var lat = React.useRef(0);
+  var phi = React.useRef(0);
+  var theta = React.useRef(0);
+  React.useRef(50);
+  var pointerDown = React.useRef(false);
+  var pointerDownX = React.useRef(0);
+  var pointerDownY = React.useRef(0);
+  var pointerLon = React.useRef(0);
+  var pointerLat = React.useRef(0); // render 3D frame
+
+  var render3D = React.useCallback(function () {
+    if (THREE === null) {
+      return;
+    }
+
+    THREE.MathUtils; // lat.current = Math.max(-85, Math.min(85, lat.current));
+    // phi.current = MathUtils.degToRad(90 - lat.current);
+    // theta.current = MathUtils.degToRad(lon.current);
+    // camera.current.position.x =
+    //     distance.current * Math.sin(phi.current) * Math.cos(theta.current);
+    // camera.current.position.y = distance.current * Math.cos(phi.current);
+    // camera.current.position.z =
+    //     distance.current * Math.sin(phi.current) * Math.sin(theta.current);
+    // camera.current.lookAt(0, 0, 0);
+
+    lat.current = Math.max(-85, Math.min(85, lat.current));
+    phi.current = THREE.MathUtils.degToRad(90 - lat.current);
+    theta.current = THREE.MathUtils.degToRad(lon.current);
+    var x = 500 * Math.sin(phi.current) * Math.cos(theta.current);
+    var y = 500 * Math.cos(phi.current);
+    var z = 500 * Math.sin(phi.current) * Math.sin(theta.current);
+    camera.current.lookAt(x, y, z);
+    renderer.current.render(scene.current, camera.current);
+  }, [THREE]); // Init 3D layer
+
+  React.useEffect(function () {
+    if (THREE !== null && hasMediaUrl && withSphere) {
+      var Scene = THREE.Scene,
+          PerspectiveCamera = THREE.PerspectiveCamera,
+          SphereBufferGeometry = THREE.SphereBufferGeometry,
+          MeshBasicMaterial = THREE.MeshBasicMaterial,
+          Mesh = THREE.Mesh,
+          WebGLRenderer = THREE.WebGLRenderer,
+          TextureLoader = THREE.TextureLoader;
+      var _canvasRef$current = canvasRef.current,
+          canvasWidth = _canvasRef$current.offsetWidth,
+          canvasHeight = _canvasRef$current.offsetHeight;
+      camera.current = new PerspectiveCamera(50, canvasWidth / canvasHeight, 1, 1100);
+      scene.current = new Scene();
+      var geometry = new SphereBufferGeometry(500, 60, 40, 0, Math.PI * 2, Math.PI / 3, Math.PI / 3);
+      geometry.scale(-1, 1, 1);
+      var texture = new TextureLoader().load(imageUrl);
+      var material = new MeshBasicMaterial({
+        map: texture
+      });
+      var mesh = new Mesh(geometry, material);
+      scene.current.add(mesh);
+      renderer.current = new WebGLRenderer({
+        canvas: canvasRef.current
+      });
+      renderer.current.setPixelRatio(typeof window !== 'undefined' ? window.devicePixelRatio : 1);
+      renderer.current.setSize(canvasWidth, canvasHeight);
+      render3D();
+    }
+
+    return function () {
+      if (withSphere) {
+        camera.current = null;
+        scene.current = null;
+        renderer.current = null;
+      }
+    };
+  }, [hasMediaUrl, withSphere, render3D, THREE]);
+  hooks.useAnimationFrame(render3D, {
+    disabled: !withSphere || THREE === null
+  }); // Resize 3D layer
+
+  React.useEffect(function () {
+    if (camera.current !== null && renderer.current !== null) {
+      camera.current.aspect = width / height;
+      camera.current.updateProjectionMatrix();
+      renderer.current.setSize(width, height);
+    }
+  }, [width, height]); // Pointer interaction
+
+  var togglePlayTimeout = React.useRef(null);
+  var onPointerDown = React.useCallback(function (e) {
+    pointerDown.current = true;
+    pointerDownX.current = e.clientX;
+    pointerDownY.current = e.clientY;
+    pointerLon.current = lon.current;
+    pointerLat.current = lat.current;
+  }, []);
+  var pixelsMoved = React.useRef(0);
+  var lastPointerClient = React.useRef(null);
+  var pixelsMovedTracked = React.useRef(false);
+  var onPointerMove = React.useCallback(function (e) {
+    if (pointerDown.current) {
+      var _ref4 = e || {},
+          _ref4$clientX = _ref4.clientX,
+          clientX = _ref4$clientX === void 0 ? null : _ref4$clientX,
+          _ref4$clientY = _ref4.clientY,
+          clientY = _ref4$clientY === void 0 ? null : _ref4$clientY;
+
+      var downDeltaX = pointerDownX.current - clientX;
+      var downDeltaY = pointerDownY.current - clientY;
+      lon.current = downDeltaX * 0.2 + pointerLon.current;
+      lat.current = downDeltaY * 0.2 + pointerLat.current;
+
+      var _ref5 = lastPointerClient.current || {},
+          _ref5$x = _ref5.x,
+          lastX = _ref5$x === void 0 ? clientX : _ref5$x,
+          _ref5$y = _ref5.y,
+          lastY = _ref5$y === void 0 ? clientY : _ref5$y;
+
+      var deltaX = Math.abs(lastX - clientX) || 0;
+      var deltaY = Math.abs(lastY - clientY) || 0;
+      pixelsMoved.current += deltaX + deltaY;
+
+      if (!pixelsMovedTracked.current && pixelsMoved.current > Math.min(width, height)) {
+        trackScreenEvent('drag_sphere');
+        pixelsMovedTracked.current = true;
+      }
+
+      lastPointerClient.current = {
+        x: clientX,
+        y: clientY
+      };
+
+      if (Math.abs(downDeltaX) > 3 || Math.abs(downDeltaY) > 3) {
+        if (togglePlayTimeout.current !== null) {
+          clearTimeout(togglePlayTimeout.current);
+          togglePlayTimeout.current = null;
+        }
+      }
+    }
+  }, [width, height, trackScreenEvent]);
+  var onPointerUp = React.useCallback(function (e) {
+    var canvasContainer = canvasContainerRef.current;
+
+    if (pointerDown.current && canvasContainer !== null) {
+      var distX = Math.abs(pointerDownX.current - e.clientX);
+      var distY = Math.abs(pointerDownY.current - e.clientY);
+      var pixelsMovedTolerance = 3;
+      var tapNextScreenWidthPercent = 0.5;
+      var canTapToNavigate = !landscape && togglePlayTimeout.current !== null;
+      var validNavigateTap = canTapToNavigate && distX < pixelsMovedTolerance && distY < pixelsMovedTolerance;
+
+      if (validNavigateTap) {
+        var _canvasContainer$getB = canvasContainer.getBoundingClientRect(),
+            _canvasContainer$getB2 = _canvasContainer$getB.left,
+            containerX = _canvasContainer$getB2 === void 0 ? 0 : _canvasContainer$getB2,
+            containerWidth = _canvasContainer$getB.width;
+
+        var hasTappedLeft = e.clientX - containerX < containerWidth * (1 - tapNextScreenWidthPercent);
+
+        if (hasTappedLeft) {
+          if (onPrevious !== null) {
+            onPrevious();
+          }
+        } else if (onNext !== null) {
+          onNext();
+        }
+      }
+
+      if (togglePlayTimeout.current !== null) {
+        clearTimeout(togglePlayTimeout.current);
+        togglePlayTimeout.current = null;
+      }
+    }
+
+    pointerDown.current = false;
+  }, [onPrevious, onNext, landscape]);
+  var hasCallToAction = callToAction !== null && callToAction.active === true; // Building elements ------------------
+
+  var items = [/*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    key: "video",
+    placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderVideo360, {
+      className: styles.placeholder,
+      width: "100%",
+      height: "100%"
+    }),
+    emptyClassName: styles.empty,
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "/YQ+xP",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Image 360"
+      }]
+    }),
+    isEmpty: !withSphere
+  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+    playing: transitionPlaying,
+    transitions: transitions,
+    disabled: transitionDisabled,
+    fullscreen: true
+  }, withSphere ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("canvas", {
+    ref: canvasRef,
+    className: styles.canvas
+  }), /*#__PURE__*/React__default["default"].createElement("button", {
+    className: styles.canvasButton,
+    type: "button",
+    "aria-label": "canvas-interaction",
+    onPointerDown: onPointerDown,
+    onPointerMove: onPointerMove,
+    onPointerUp: onPointerUp,
+    tabIndex: current && isView ? null : '-1'
+  })) : /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.videoContainer,
+    style: {
+      width: resizedImageWidth,
+      height: resizedImageHeight,
+      left: resizedImageLeft,
+      top: resizedImageTop
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Image__default["default"], {
+    className: styles.video,
+    media: {
+      url: thumbnailUrl,
+      metadata: {
+        width: imageWidth,
+        height: imageHeight
+      }
+    },
+    width: resizedImageWidth,
+    height: resizedImageHeight,
+    resolution: resolution
+  })))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
+    key: "bottom-content",
+    className: styles.bottomContent
+  }, /*#__PURE__*/React__default["default"].createElement(components.Transitions, {
+    playing: transitionPlaying,
+    transitions: transitions,
+    disabled: transitionDisabled
+  }, hasCallToAction ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginTop: -spacing / 2
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
+    callToAction: callToAction,
+    animationDisabled: isPreview,
+    focusable: current && isView,
+    screenSize: {
+      width: width,
+      height: height
+    }
+  })) : null)) : null];
+  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.showVideo, isPreview || isStatic || isCapture), _ref6)]),
+    "data-screen-ready": (isStatic || isCapture) && posterReady || ready
+  }, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    shouldLoad: backgroundShouldLoad
+  }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: canvasContainerRef,
+    className: styles.videoContainer,
+    style: {
+      width: resizedImageWidth,
+      height: resizedImageHeight,
+      left: resizedImageLeft,
+      top: resizedImageTop
+    }
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles.content
+  }, items)));
+};
+
+Image360Screen.propTypes = propTypes;
+Image360Screen.defaultProps = defaultProps;
+var Image360Screen$1 = /*#__PURE__*/React__default["default"].memo(Image360Screen);
+
+var transform = function transform(newStory, _ref) {
+  var video = _ref.video;
+
+  var _ref2 = video || {},
+      _ref2$media = _ref2.media,
+      media = _ref2$media === void 0 ? null : _ref2$media;
+
+  var _Video = appleNews.Video(newStory, media),
+      titleStory = _Video.story,
+      titleComponent = _Video.component;
+
+  var _Container = appleNews.Container(titleStory, _toConsumableArray__default["default"](titleComponent ? [titleComponent] : [])),
+      containerStory = _Container.story,
+      containerComponent = _Container.component;
+
+  return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
+  });
+};
+
+// eslint-disable-next-line
+
+var transforms = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    appleNews: transform
+});
+
+var definition = {
+  id: 'video-360',
+  type: 'screen',
+  group: {
+    label: reactIntl.defineMessage({
+      id: "+9akmg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Audio and Video"
+      }]
+    }),
+    order: 5
+  },
+  title: reactIntl.defineMessage({
+    id: "GRVidW",
+    defaultMessage: [{
+      "type": 0,
+      "value": "360 Video"
+    }]
+  }),
+  component: Image360Screen$1,
+  layouts: ['full'],
+  transforms: transforms,
+  fields: [{
+    name: 'video',
+    type: 'video-element',
+    theme: {
+      color: 'primary'
+    },
+    defaultValue: {
+      autoPlay: true
+    },
+    label: reactIntl.defineMessage({
+      id: "tvl2Zc",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Video"
+      }]
+    })
+  }, {
+    name: 'background',
+    type: 'background',
+    label: reactIntl.defineMessage({
+      id: "+MPZRu",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'callToAction',
+    type: 'call-to-action',
+    theme: {
+      boxStyle: 'cta',
+      label: {
+        textStyle: 'cta'
+      }
+    }
+  }]
+};
+
+exports.Image360Screen = Image360Screen$1;
+exports["default"] = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image-360",
-    "version": "0.3.77",
+    "version": "0.3.78",
     "description": "",
     "keywords": [
         "javascript"
@@ -50,15 +50,15 @@
     "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.3.77",
-        "@micromag/element-background": "^0.3.77",
-        "@micromag/element-call-to-action": "^0.3.77",
-        "@micromag/element-closed-captions": "^0.3.77",
-        "@micromag/element-container": "^0.3.77",
-        "@micromag/element-image": "^0.3.77",
-        "@micromag/element-media-controls": "^0.3.77",
-        "@micromag/element-video": "^0.3.77",
-        "@micromag/transforms": "^0.3.77",
+        "@micromag/core": "^0.3.78",
+        "@micromag/element-background": "^0.3.78",
+        "@micromag/element-call-to-action": "^0.3.78",
+        "@micromag/element-closed-captions": "^0.3.78",
+        "@micromag/element-container": "^0.3.78",
+        "@micromag/element-image": "^0.3.78",
+        "@micromag/element-media-controls": "^0.3.78",
+        "@micromag/element-video": "^0.3.78",
+        "@micromag/transforms": "^0.3.78",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "12effe09a1b53e8ff487695a17d1d4fff412482e"
+    "gitHead": "68be4e95203a5c15cefe58e423fe43eb374f3a7f"
 }