@micromag/core 0.3.107 → 0.3.111

package/es/components.js

@@ -8,7 +8,7 @@ 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,30 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useResizeObserver }
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import ReactDOM from 'react-dom';
-import isArray from 'lodash/isArray';
 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';
 
@@ -1744,6 +1758,7 @@ var ModalDialog = function ModalDialog(_ref) {
 ModalDialog.propTypes = propTypes$q;
 ModalDialog.defaultProps = defaultProps$q;
 
+// import classNames from 'classnames';
 var propTypes$p = {
   type: PropTypes$1.oneOfType([PropTypes.mediaTypes, PropTypes$1.array]),
   opened: PropTypes$1.bool,
@@ -2627,7 +2642,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/contexts.js

@@ -1094,6 +1094,7 @@ var TrackingProvider = function TrackingProvider(_ref) {
 TrackingProvider.propTypes = propTypes$3;
 TrackingProvider.defaultProps = defaultProps$3;
 
+var _excluded$3 = ["Uppy"];
 /**
  * Locale loader
  */
@@ -1120,12 +1121,17 @@ var useUppyCore = function useUppyCore() {
     }
 
     import('@uppy/core').then(function (_ref) {
-      var Uppy = _ref.Uppy;
-      packageCache = Uppy;
+      var Uppy = _ref.Uppy,
+          other = _objectWithoutProperties(_ref, _excluded$3);
+
+      var _ref2 = other || {},
+          defaultPackage = _ref2["default"];
+
+      packageCache = Uppy || defaultPackage;
 
       if (!canceled) {
         setLoadedPackage({
-          "package": Uppy
+          "package": Uppy || defaultPackage
         });
       }
     });

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,16 +20,30 @@ var hooks = require('@micromag/core/hooks');
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
 var ReactDOM = require('react-dom');
-var isArray = require('lodash/isArray');
 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');
 
@@ -313,7 +327,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));
@@ -1767,6 +1781,7 @@ var ModalDialog = function ModalDialog(_ref) {
 ModalDialog.propTypes = propTypes$q;
 ModalDialog.defaultProps = defaultProps$q;
 
+// import classNames from 'classnames';
 var propTypes$p = {
   type: PropTypes__default["default"].oneOfType([core.PropTypes.mediaTypes, PropTypes__default["default"].array]),
   opened: PropTypes__default["default"].bool,
@@ -1987,7 +2002,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",
@@ -2650,7 +2665,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
@@ -3167,7 +3182,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
   }));
 };
@@ -3182,7 +3197,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
   }));
 };
@@ -3199,7 +3214,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
   }));
 };
@@ -3279,7 +3294,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
   }));
 };
@@ -3301,16 +3316,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
   }));
 };
@@ -3322,7 +3337,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
   }));
@@ -3399,7 +3414,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
   }));
 };
@@ -3416,7 +3431,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
@@ -3433,10 +3448,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
   }));
 };
@@ -3760,7 +3775,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
   }));
 };
@@ -3798,7 +3813,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,
@@ -3832,7 +3847,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/contexts.js

@@ -1129,6 +1129,7 @@ var TrackingProvider = function TrackingProvider(_ref) {
 TrackingProvider.propTypes = propTypes$3;
 TrackingProvider.defaultProps = defaultProps$3;
 
+var _excluded$3 = ["Uppy"];
 /**
  * Locale loader
  */
@@ -1155,12 +1156,17 @@ var useUppyCore = function useUppyCore() {
     }
 
     Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('@uppy/core')); }).then(function (_ref) {
-      var Uppy = _ref.Uppy;
-      packageCache = Uppy;
+      var Uppy = _ref.Uppy,
+          other = _objectWithoutProperties__default["default"](_ref, _excluded$3);
+
+      var _ref2 = other || {},
+          defaultPackage = _ref2["default"];
+
+      packageCache = Uppy || defaultPackage;
 
       if (!canceled) {
         setLoadedPackage({
-          "package": Uppy
+          "package": Uppy || defaultPackage
         });
       }
     });

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.107",
+    "version": "0.3.111",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "952ef450fe62328a0ae3ab6dbb3c3079bb66d17a"
+    "gitHead": "0b8e0748efe102dae09d162dc4f06a0b0797ea35"
 }