@micromag/core 0.3.108 → 0.3.112

package/es/components.js

@@ -2,13 +2,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useRef, useMemo, Suspense } from 'react';
 import { Link as Link$1 } from 'react-router-dom';
 import { PropTypes } from '@micromag/core';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faAngleUp, faAngleDown, faAd, faImage, faMusic, faMapMarkerAlt, faMapMarkedAlt, faVideo, faPlay, faRedo, faCommentDots, faCheck, faTimes, faPercent } from '@fortawesome/free-solid-svg-icons';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
@@ -16,16 +16,29 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useResizeObserver }
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import ReactDOM from 'react-dom';
-import { DashboardModal } from '@uppy/react';
 import isArray from 'lodash/isArray';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
 import dayjs from 'dayjs';
 import throttle from 'lodash/throttle';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
 import 'snake-case';
+import { faAd } from '@fortawesome/free-solid-svg-icons/faAd';
+import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
+import { faMusic } from '@fortawesome/free-solid-svg-icons/faMusic';
 import isNumber from 'lodash/isNumber';
+import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkerAlt';
+import { faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkedAlt';
+import { faVideo } from '@fortawesome/free-solid-svg-icons/faVideo';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
+import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { getSizeWithinBounds } from '@folklore/size';
+import { faCommentDots } from '@fortawesome/free-solid-svg-icons/faCommentDots';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 
@@ -1745,6 +1758,14 @@ ModalDialog.propTypes = propTypes$q;
 ModalDialog.defaultProps = defaultProps$q;
 
 // import classNames from 'classnames';
+var DashboardModal = /*#__PURE__*/React.lazy(function () {
+  return import('@uppy/react').then(function (_ref) {
+    var Component = _ref.DashboardModal;
+    return {
+      "default": Component
+    };
+  });
+});
 var propTypes$p = {
   type: PropTypes$1.oneOfType([PropTypes.mediaTypes, PropTypes$1.array]),
   opened: PropTypes$1.bool,
@@ -1760,12 +1781,12 @@ var defaultProps$p = {
   onRequestClose: null
 };
 
-var UploadModal = function UploadModal(_ref) {
-  var type = _ref.type,
-      opened = _ref.opened,
-      sources = _ref.sources,
-      onUploaded = _ref.onUploaded,
-      onRequestClose = _ref.onRequestClose;
+var UploadModal = function UploadModal(_ref2) {
+  var type = _ref2.type,
+      opened = _ref2.opened,
+      sources = _ref2.sources,
+      onUploaded = _ref2.onUploaded,
+      onRequestClose = _ref2.onRequestClose;
   var onUppyComplete = useCallback(function (response) {
     if (onUploaded !== null) {
       onUploaded(response);
@@ -1792,13 +1813,15 @@ var UploadModal = function UploadModal(_ref) {
       uppy.reset();
     }
   }, [uppy, opened]);
-  return uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
+  return uppy !== null ? /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(DashboardModal, {
     uppy: uppy,
     open: opened,
     closeAfterFinish: true,
     onRequestClose: onRequestClose,
     plugins: sources
-  }) : null;
+  })) : null;
 };
 
 UploadModal.propTypes = propTypes$p;
@@ -2628,7 +2651,7 @@ PropTypes$1.shape({
   loop: PropTypes$1.bool,
   closedCaptions: closedCaptionsMedia,
   withSeekBar: PropTypes$1.bool,
-  withPlayPause: PropTypes$1.bool
+  withControls: PropTypes$1.bool
 });
 var visualElement = PropTypes$1.shape({
   media: imageMedia

package/es/index.js

@@ -287,7 +287,7 @@ var videoElement = PropTypes$1.shape({
   loop: PropTypes$1.bool,
   closedCaptions: closedCaptionsMedia,
   withSeekBar: PropTypes$1.bool,
-  withPlayPause: PropTypes$1.bool
+  withControls: PropTypes$1.bool
 });
 var visualElement = PropTypes$1.shape({
   media: imageMedia

package/es/utils.js

@@ -404,6 +404,15 @@ var getScreenExtraField = function getScreenExtraField(intl) {
   };
 };
 
+function getShadowCoords(angle, distance) {
+  var x = (Math.cos(angle) * distance).toFixed(3);
+  var y = (Math.sin(angle) * distance).toFixed(3);
+  return {
+    x: x,
+    y: y
+  };
+}
+
 var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
@@ -436,17 +445,24 @@ var getStyleFromShadow = function getStyleFromShadow(value) {
   }
 
   var _ref = value || {},
-      _ref$shadowHorizontal = _ref.shadowHorizontalOffset,
-      shadowHorizontalOffset = _ref$shadowHorizontal === void 0 ? 0 : _ref$shadowHorizontal,
-      _ref$shadowVerticalOf = _ref.shadowVerticalOffset,
-      shadowVerticalOffset = _ref$shadowVerticalOf === void 0 ? 0 : _ref$shadowVerticalOf,
+      _ref$shadowAngle = _ref.shadowAngle,
+      shadowAngle = _ref$shadowAngle === void 0 ? null : _ref$shadowAngle,
+      _ref$shadowDistance = _ref.shadowDistance,
+      shadowDistance = _ref$shadowDistance === void 0 ? null : _ref$shadowDistance,
       _ref$shadowBlur = _ref.shadowBlur,
-      shadowBlur = _ref$shadowBlur === void 0 ? 0 : _ref$shadowBlur,
+      shadowBlur = _ref$shadowBlur === void 0 ? null : _ref$shadowBlur,
       _ref$shadowColor = _ref.shadowColor,
-      shadowColor = _ref$shadowColor === void 0 ? '#000000' : _ref$shadowColor;
+      shadowColor = _ref$shadowColor === void 0 ? null : _ref$shadowColor;
+
+  if (!shadowAngle) return null;
+  var blur = shadowBlur || '0';
+  var color = getColorAsString(shadowColor) || '#000000';
+
+  var _getShadowCoords = getShadowCoords(shadowAngle, shadowDistance),
+      x = _getShadowCoords.x,
+      y = _getShadowCoords.y;
 
-  var color = getColorAsString(shadowColor);
-  var boxShadow = "".concat(shadowHorizontalOffset, "px ").concat(shadowVerticalOffset, "px ").concat(shadowBlur, "px 0 ").concat(color);
+  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(blur, "px 0 ").concat(color);
   return {
     boxShadow: boxShadow
   };
@@ -477,10 +493,10 @@ var getStyleFromBox = function getStyleFromBox(value) {
       borderStyle = _value$borderStyle === void 0 ? null : _value$borderStyle,
       _value$borderColor = value.borderColor,
       borderColor = _value$borderColor === void 0 ? null : _value$borderColor,
-      _value$shadowHorizont = value.shadowHorizontalOffset,
-      shadowHorizontalOffset = _value$shadowHorizont === void 0 ? null : _value$shadowHorizont,
-      _value$shadowVertical = value.shadowVerticalOffset,
-      shadowVerticalOffset = _value$shadowVertical === void 0 ? null : _value$shadowVertical,
+      _value$shadowAngle = value.shadowAngle,
+      shadowAngle = _value$shadowAngle === void 0 ? null : _value$shadowAngle,
+      _value$shadowDistance = value.shadowDistance,
+      shadowDistance = _value$shadowDistance === void 0 ? null : _value$shadowDistance,
       _value$shadowBlur = value.shadowBlur,
       shadowBlur = _value$shadowBlur === void 0 ? null : _value$shadowBlur,
       _value$shadowColor = value.shadowColor,
@@ -491,8 +507,8 @@ var getStyleFromBox = function getStyleFromBox(value) {
     color: borderColor
   };
   var shadow = {
-    shadowHorizontalOffset: shadowHorizontalOffset,
-    shadowVerticalOffset: shadowVerticalOffset,
+    shadowAngle: shadowAngle,
+    shadowDistance: shadowDistance,
     shadowBlur: shadowBlur,
     shadowColor: shadowColor
   };
@@ -836,4 +852,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -12,7 +12,7 @@ var core = require('@micromag/core');
 var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var contexts = require('@micromag/core/contexts');
@@ -20,21 +20,52 @@ var hooks = require('@micromag/core/hooks');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
 var ReactDOM = require('react-dom');
-var react = require('@uppy/react');
 var isArray = require('lodash/isArray');
+var faAngleDown = require('@fortawesome/free-solid-svg-icons/faAngleDown');
+var faAngleUp = require('@fortawesome/free-solid-svg-icons/faAngleUp');
 var dayjs = require('dayjs');
 var throttle = require('lodash/throttle');
 var isObject = require('lodash/isObject');
 var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
 require('snake-case');
+var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
+var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
+var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
 var isNumber = require('lodash/isNumber');
+var faMapMarkerAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkerAlt');
+var faMapMarkedAlt = require('@fortawesome/free-solid-svg-icons/faMapMarkedAlt');
+var faVideo = require('@fortawesome/free-solid-svg-icons/faVideo');
+var faPlay = require('@fortawesome/free-solid-svg-icons/faPlay');
+var faRedo = require('@fortawesome/free-solid-svg-icons/faRedo');
 var size = require('@folklore/size');
+var faCommentDots = require('@fortawesome/free-solid-svg-icons/faCommentDots');
+var faCheck = require('@fortawesome/free-solid-svg-icons/faCheck');
+var faTimes = require('@fortawesome/free-solid-svg-icons/faTimes');
+var faPercent = require('@fortawesome/free-solid-svg-icons/faPercent');
 var core$1 = require('@react-spring/core');
 var web = require('@react-spring/web');
 
 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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
@@ -313,7 +344,7 @@ var BackButton = function BackButton(_ref) {
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
     size: "sm",
     icon: /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-      icon: freeSolidSvgIcons.faAngleLeft,
+      icon: faAngleLeft.faAngleLeft,
       size: "lg"
     })
   }, props));
@@ -1768,6 +1799,14 @@ ModalDialog.propTypes = propTypes$q;
 ModalDialog.defaultProps = defaultProps$q;
 
 // import classNames from 'classnames';
+var DashboardModal = /*#__PURE__*/React__default["default"].lazy(function () {
+  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/react')); }).then(function (_ref) {
+    var Component = _ref.DashboardModal;
+    return {
+      "default": Component
+    };
+  });
+});
 var propTypes$p = {
   type: PropTypes__default["default"].oneOfType([core.PropTypes.mediaTypes, PropTypes__default["default"].array]),
   opened: PropTypes__default["default"].bool,
@@ -1783,12 +1822,12 @@ var defaultProps$p = {
   onRequestClose: null
 };
 
-var UploadModal = function UploadModal(_ref) {
-  var type = _ref.type,
-      opened = _ref.opened,
-      sources = _ref.sources,
-      onUploaded = _ref.onUploaded,
-      onRequestClose = _ref.onRequestClose;
+var UploadModal = function UploadModal(_ref2) {
+  var type = _ref2.type,
+      opened = _ref2.opened,
+      sources = _ref2.sources,
+      onUploaded = _ref2.onUploaded,
+      onRequestClose = _ref2.onRequestClose;
   var onUppyComplete = React.useCallback(function (response) {
     if (onUploaded !== null) {
       onUploaded(response);
@@ -1815,13 +1854,15 @@ var UploadModal = function UploadModal(_ref) {
       uppy.reset();
     }
   }, [uppy, opened]);
-  return uppy !== null ? /*#__PURE__*/React__default["default"].createElement(react.DashboardModal, {
+  return uppy !== null ? /*#__PURE__*/React__default["default"].createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React__default["default"].createElement("div", null)
+  }, /*#__PURE__*/React__default["default"].createElement(DashboardModal, {
     uppy: uppy,
     open: opened,
     closeAfterFinish: true,
     onRequestClose: onRequestClose,
     plugins: sources
-  }) : null;
+  })) : null;
 };
 
 UploadModal.propTypes = propTypes$p;
@@ -1988,7 +2029,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     withoutStyle: true,
     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,
+      icon: opened ? faAngleUp.faAngleUp : faAngleDown.faAngleDown,
       className: styles$h.icon
     }),
     iconPosition: "right",
@@ -2651,7 +2692,7 @@ PropTypes__default["default"].shape({
   loop: PropTypes__default["default"].bool,
   closedCaptions: closedCaptionsMedia,
   withSeekBar: PropTypes__default["default"].bool,
-  withPlayPause: PropTypes__default["default"].bool
+  withControls: PropTypes__default["default"].bool
 });
 var visualElement = PropTypes__default["default"].shape({
   media: imageMedia
@@ -3168,7 +3209,7 @@ var AdFrame = function AdFrame(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faAd,
+    icon: faAd.faAd,
     className: styles$c.icon
   }));
 };
@@ -3183,7 +3224,7 @@ var AdImage = function AdImage(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faImage,
+    icon: faImage.faImage,
     className: styles$c.icon
   }));
 };
@@ -3200,7 +3241,7 @@ var Audio = function Audio(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faMusic,
+    icon: faMusic.faMusic,
     className: styles$c.icon
   }));
 };
@@ -3280,7 +3321,7 @@ var Image = function Image(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faImage,
+    icon: faImage.faImage,
     className: styles$c.icon
   }));
 };
@@ -3302,16 +3343,16 @@ var Map = function Map(props) {
     height: "100%",
     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,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: props.withImages ? freeSolidSvgIcons.faImage : freeSolidSvgIcons.faMapMarkerAlt,
+    icon: props.withImages ? faImage.faImage : faMapMarkerAlt.faMapMarkerAlt,
     className: styles$a.icon
   }));
 };
@@ -3323,7 +3364,7 @@ var MapPath = function MapPath(props) {
     height: "70%",
     className: classNames__default["default"]([props.className, styles$c.mapPath])
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faMapMarkedAlt,
+    icon: faMapMarkedAlt.faMapMarkedAlt,
     size: "lg",
     className: styles$c.icon
   }));
@@ -3400,7 +3441,7 @@ var Video = function Video(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faVideo,
+    icon: faVideo.faVideo,
     className: styles$c.icon
   }));
 };
@@ -3417,7 +3458,7 @@ var Video360 = function Video360(_ref) {
     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,
+    icon: faVideo.faVideo,
     className: styles$9.icon
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$9.label
@@ -3434,10 +3475,10 @@ var VideoLoop = function VideoLoop(_ref) {
     height: height,
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faPlay,
+    icon: faPlay.faPlay,
     className: styles$c.icon
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faRedo,
+    icon: faRedo.faRedo,
     className: styles$c.icon
   }));
 };
@@ -3761,7 +3802,7 @@ var Conversation = function Conversation() {
       className: classNames__default["default"]([styles$4.message, styles$4["placeholderMessage".concat(idx)]])
     });
   }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
-    icon: freeSolidSvgIcons.faCommentDots,
+    icon: faCommentDots.faCommentDots,
     className: styles$4.icon
   }));
 };
@@ -3799,7 +3840,7 @@ var Answer$1 = function Answer(_ref) {
     className: styles$3.answer
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$3.answerIcon,
-    icon: good ? freeSolidSvgIcons.faCheck : freeSolidSvgIcons.faTimes
+    icon: good ? faCheck.faCheck : faTimes.faTimes
   })), /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -3833,7 +3874,7 @@ var Answer = function Answer(_ref) {
     className: styles$2.percent
   }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     className: styles$2.percentIcon,
-    icon: freeSolidSvgIcons.faPercent
+    icon: faPercent.faPercent
   })));
 };
 

package/lib/index.js

@@ -314,7 +314,7 @@ var videoElement = PropTypes__default["default"].shape({
   loop: PropTypes__default["default"].bool,
   closedCaptions: closedCaptionsMedia,
   withSeekBar: PropTypes__default["default"].bool,
-  withPlayPause: PropTypes__default["default"].bool
+  withControls: PropTypes__default["default"].bool
 });
 var visualElement = PropTypes__default["default"].shape({
   media: imageMedia

package/lib/utils.js

@@ -421,6 +421,15 @@ var getScreenExtraField = function getScreenExtraField(intl) {
   };
 };
 
+function getShadowCoords(angle, distance) {
+  var x = (Math.cos(angle) * distance).toFixed(3);
+  var y = (Math.sin(angle) * distance).toFixed(3);
+  return {
+    x: x,
+    y: y
+  };
+}
+
 var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
@@ -453,17 +462,24 @@ var getStyleFromShadow = function getStyleFromShadow(value) {
   }
 
   var _ref = value || {},
-      _ref$shadowHorizontal = _ref.shadowHorizontalOffset,
-      shadowHorizontalOffset = _ref$shadowHorizontal === void 0 ? 0 : _ref$shadowHorizontal,
-      _ref$shadowVerticalOf = _ref.shadowVerticalOffset,
-      shadowVerticalOffset = _ref$shadowVerticalOf === void 0 ? 0 : _ref$shadowVerticalOf,
+      _ref$shadowAngle = _ref.shadowAngle,
+      shadowAngle = _ref$shadowAngle === void 0 ? null : _ref$shadowAngle,
+      _ref$shadowDistance = _ref.shadowDistance,
+      shadowDistance = _ref$shadowDistance === void 0 ? null : _ref$shadowDistance,
       _ref$shadowBlur = _ref.shadowBlur,
-      shadowBlur = _ref$shadowBlur === void 0 ? 0 : _ref$shadowBlur,
+      shadowBlur = _ref$shadowBlur === void 0 ? null : _ref$shadowBlur,
       _ref$shadowColor = _ref.shadowColor,
-      shadowColor = _ref$shadowColor === void 0 ? '#000000' : _ref$shadowColor;
+      shadowColor = _ref$shadowColor === void 0 ? null : _ref$shadowColor;
+
+  if (!shadowAngle) return null;
+  var blur = shadowBlur || '0';
+  var color = getColorAsString(shadowColor) || '#000000';
+
+  var _getShadowCoords = getShadowCoords(shadowAngle, shadowDistance),
+      x = _getShadowCoords.x,
+      y = _getShadowCoords.y;
 
-  var color = getColorAsString(shadowColor);
-  var boxShadow = "".concat(shadowHorizontalOffset, "px ").concat(shadowVerticalOffset, "px ").concat(shadowBlur, "px 0 ").concat(color);
+  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(blur, "px 0 ").concat(color);
   return {
     boxShadow: boxShadow
   };
@@ -494,10 +510,10 @@ var getStyleFromBox = function getStyleFromBox(value) {
       borderStyle = _value$borderStyle === void 0 ? null : _value$borderStyle,
       _value$borderColor = value.borderColor,
       borderColor = _value$borderColor === void 0 ? null : _value$borderColor,
-      _value$shadowHorizont = value.shadowHorizontalOffset,
-      shadowHorizontalOffset = _value$shadowHorizont === void 0 ? null : _value$shadowHorizont,
-      _value$shadowVertical = value.shadowVerticalOffset,
-      shadowVerticalOffset = _value$shadowVertical === void 0 ? null : _value$shadowVertical,
+      _value$shadowAngle = value.shadowAngle,
+      shadowAngle = _value$shadowAngle === void 0 ? null : _value$shadowAngle,
+      _value$shadowDistance = value.shadowDistance,
+      shadowDistance = _value$shadowDistance === void 0 ? null : _value$shadowDistance,
       _value$shadowBlur = value.shadowBlur,
       shadowBlur = _value$shadowBlur === void 0 ? null : _value$shadowBlur,
       _value$shadowColor = value.shadowColor,
@@ -508,8 +524,8 @@ var getStyleFromBox = function getStyleFromBox(value) {
     color: borderColor
   };
   var shadow = {
-    shadowHorizontalOffset: shadowHorizontalOffset,
-    shadowVerticalOffset: shadowVerticalOffset,
+    shadowAngle: shadowAngle,
+    shadowDistance: shadowDistance,
     shadowBlur: shadowBlur,
     shadowColor: shadowColor
   };
@@ -881,6 +897,7 @@ exports.getMediaFilesAsArray = getMediaFilesAsArray;
 exports.getOptimalImageUrl = getOptimalImageUrl;
 exports.getScreenExtraField = getScreenExtraField;
 exports.getSecondsFromTime = getSecondsFromTime;
+exports.getShadowCoords = getShadowCoords;
 exports.getStyleFromBorder = getStyleFromBorder;
 exports.getStyleFromBox = getStyleFromBox;
 exports.getStyleFromColor = getStyleFromColor;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.108",
+    "version": "0.3.112",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d7681b84be82b08eff5ed444f910ed367f235f4e"
+    "gitHead": "f85362071b76115397f9a77537ac6e66b91f59f3"
 }