@micromag/core 0.3.61 → 0.3.64

package/es/contexts.js

@@ -492,7 +492,7 @@ var propTypes$b = {
   customFonts: PropTypes$1.fonts
 };
 var defaultProps$b = {
-  systemFonts: ['Arial', 'Courier', 'Georgia', 'Times New Roman', 'Verdana'],
+  systemFonts: ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Verdana'],
   customFonts: null
 };
 var FontsProvider = function FontsProvider(_ref4) {

package/es/index.js

@@ -23,6 +23,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import 'slugify';
 import uniqBy from 'lodash/uniqBy';
 import _typeof from '@babel/runtime/helpers/typeof';
+import isEmpty from 'lodash/isEmpty';
 import uniq from 'lodash/uniq';
 import { Tracking as Tracking$1 } from '@folklore/tracking';
 
@@ -1157,7 +1158,7 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$2 = ["medias"];
+var _excluded$3 = ["medias"];
 
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
@@ -1225,7 +1226,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
             themeMedias = _this$toPath.medias,
-            newTheme = _objectWithoutProperties(_this$toPath, _excluded$2);
+            newTheme = _objectWithoutProperties(_this$toPath, _excluded$3);
 
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
@@ -1474,6 +1475,8 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   return ScreensManager;
 }(DefinitionsManager);
 
+var _excluded$2 = ["textStyle", "color", "boxStyle"];
+
 var ThemeParser = /*#__PURE__*/function () {
   function ThemeParser(_ref) {
     var screensManager = _ref.screensManager;
@@ -1526,7 +1529,9 @@ var ThemeParser = /*#__PURE__*/function () {
           _theme$colors = theme.colors,
           themeColors = _theme$colors === void 0 ? {} : _theme$colors,
           _theme$textStyles = theme.textStyles,
-          themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles;
+          themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
+          _theme$boxStyles = theme.boxStyles,
+          themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
 
@@ -1534,7 +1539,7 @@ var ThemeParser = /*#__PURE__*/function () {
             definition = _this$getDefinitionBy.definition,
             themeScreen = _this$getDefinitionBy.themeScreen;
 
-        var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles); // Only switch screen if it has changed
+        var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles); // Only switch screen if it has changed
 
 
         return newScreen !== screen || themeScreen !== null ? [].concat(_toConsumableArray(currentComponents.slice(0, index)), [_objectSpread(_objectSpread({}, themeScreen), newScreen)], _toConsumableArray(currentComponents.slice(index + 1))) : currentComponents;
@@ -1545,7 +1550,7 @@ var ThemeParser = /*#__PURE__*/function () {
     }
   }, {
     key: "parseScreen",
-    value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextSyle) {
+    value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
 
       var _definition$fields = definition.fields,
@@ -1565,7 +1570,7 @@ var ThemeParser = /*#__PURE__*/function () {
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
 
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextSyle); // Only switch field if it has changed
+        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles); // Only switch field if it has changed
 
 
         return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
@@ -1575,23 +1580,36 @@ var ThemeParser = /*#__PURE__*/function () {
 
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles) {
+    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _definition$theme = definition.theme,
-          fieldTheme = _definition$theme === void 0 ? {} : _definition$theme; // @TODO very sloow
+          fieldTheme = _definition$theme === void 0 ? null : _definition$theme; // Early return
+
+      if (fieldTheme === null || !isObject(fieldTheme)) {
+        return value;
+      } // @TODO very sloow
+
 
       if (isArray(value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
+            // Early return
+            if (!isObject(innerField[innerFieldName])) {
+              return newInnerField;
+            }
+
             var _ref3 = fieldTheme[innerFieldName] || {},
                 _ref3$textStyle = _ref3.textStyle,
                 innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
                 _ref3$color = _ref3.color,
-                innerFieldColor = _ref3$color === void 0 ? null : _ref3$color; // Early return
+                innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
+                _ref3$boxStyle = _ref3.boxStyle,
+                innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle; // Early return, no theme
 
 
-            if (!isObject(innerField[innerFieldName])) {
+            if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
-            } // Color
+            } // TODO: replace this with the recursive parseValue...
+            // Color
 
 
             var colorValue = innerFieldColor !== null ? {
@@ -1601,23 +1619,65 @@ var ThemeParser = /*#__PURE__*/function () {
             var textStyleValue = innerFieldTextStyle !== null ? {
               textStyle: _objectSpread(_objectSpread({}, innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null), innerField[innerFieldName].textStyle || null)
             } : null;
+            var boxStyleValue = innerFieldBoxStyle !== null ? {
+              boxStyle: _objectSpread(_objectSpread({}, innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null), innerField[innerFieldName].boxStyle || null)
+            } : null;
 
-            if (colorValue === null && textStyleValue === null) {
+            if (colorValue === null && textStyleValue === null && boxStyleValue === null) {
               return newInnerField;
             }
 
-            return _objectSpread(_objectSpread({}, newInnerField), {}, _defineProperty({}, innerFieldName, _objectSpread(_objectSpread(_objectSpread({}, colorValue), innerField[innerFieldName]), textStyleValue)));
+            return _objectSpread(_objectSpread({}, newInnerField), {}, _defineProperty({}, innerFieldName, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), innerField[innerFieldName]), textStyleValue), boxStyleValue)));
           }, innerField) : innerField;
         });
         return newFieldValue;
       }
 
-      if (isObject(value) && !isArray(value)) {
+      if (isObject(value)) {
+        return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
+
+      return value;
+    } // eslint-disable-next-line class-methods-use-this
+
+  }, {
+    key: "parseValue",
+    value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
+
+      if (isObject(initialValue) || isObject(fieldTheme)) {
+        var value = initialValue || null;
+
         var _ref4 = fieldTheme || {},
             _ref4$textStyle = _ref4.textStyle,
             fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
             _ref4$color = _ref4.color,
-            fieldColorName = _ref4$color === void 0 ? null : _ref4$color; // Color
+            fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
+            _ref4$boxStyle = _ref4.boxStyle,
+            fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
+            otherProps = _objectWithoutProperties(_ref4, _excluded$2);
+
+        if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
+          return value;
+        }
+
+        var complexValue = null;
+
+        if (!isEmpty(otherProps)) {
+          complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
+            var innerValue = value !== null ? value[key] || null : null;
+
+            var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+            return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
+          }, {});
+        }
+
+        var _ref6 = value || {},
+            _ref6$textStyle = _ref6.textStyle,
+            valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
+            _ref6$boxStyle = _ref6.boxStyle,
+            valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle; // Color
 
 
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
@@ -1628,13 +1688,19 @@ var ThemeParser = /*#__PURE__*/function () {
         var fieldTextStyle = fieldTextStyleName !== null && themeTextStyles !== null ? themeTextStyles[fieldTextStyleName] || null : null;
         var fieldThemeComponentTextStyle = themeValue !== null ? themeValue.textStyle || null : null;
         var textStyleValue = fieldTextStyle !== null || fieldThemeComponentTextStyle !== null ? {
-          textStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldTextStyle), fieldThemeComponentTextStyle), value.textStyle || null)
+          textStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldTextStyle), fieldThemeComponentTextStyle), valueTextStyle || null)
+        } : null; // Box style
+
+        var fieldBoxStyle = fieldBoxStyleName !== null && themeBoxStyles !== null ? themeBoxStyles[fieldBoxStyleName] || null : null;
+        var fieldThemeComponentBoxStyle = themeValue !== null ? themeValue.boxStyle || null : null;
+        var boxStyleValue = fieldBoxStyle !== null || fieldThemeComponentBoxStyle !== null ? {
+          boxStyle: _objectSpread(_objectSpread(_objectSpread({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
         } : null; // Only change value if something is overrided
 
-        return colorValue !== null || themeValue !== null || textStyleValue !== null ? _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), themeValue), value), textStyleValue) : value;
+        return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
       }
 
-      return value;
+      return initialValue;
     }
   }]);
 

package/es/utils.js

@@ -430,7 +430,8 @@ var getStyleFromBox = function getStyleFromBox(value) {
       backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo,
       _value$borderRadius = value.borderRadius,
       borderRadius = _value$borderRadius === void 0 ? null : _value$borderRadius,
-      padding = value.padding,
+      _value$padding = value.padding,
+      paddingValue = _value$padding === void 0 ? null : _value$padding,
       _value$borderWidth = value.borderWidth,
       borderWidth = _value$borderWidth === void 0 ? null : _value$borderWidth,
       _value$borderStyle = value.borderStyle,
@@ -442,9 +443,28 @@ var getStyleFromBox = function getStyleFromBox(value) {
     style: borderStyle,
     color: borderColor
   };
+
+  var _ref = isObject(paddingValue) ? paddingValue : {
+    padding: paddingValue
+  },
+      _ref$top = _ref.top,
+      paddingTop = _ref$top === void 0 ? null : _ref$top,
+      _ref$right = _ref.right,
+      paddingRight = _ref$right === void 0 ? null : _ref$right,
+      _ref$bottom = _ref.bottom,
+      paddingBottom = _ref$bottom === void 0 ? null : _ref$bottom,
+      _ref$left = _ref.left,
+      paddingLeft = _ref$left === void 0 ? null : _ref$left,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? null : _ref$padding;
+
   return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
     borderRadius: borderRadius
   } : null), getStyleFromBorder(border)), {}, {
+    paddingTop: paddingTop,
+    paddingRight: paddingRight,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
     padding: padding
   });
 };

package/lib/contexts.js

@@ -527,7 +527,7 @@ var propTypes$b = {
   customFonts: core.PropTypes.fonts
 };
 var defaultProps$b = {
-  systemFonts: ['Arial', 'Courier', 'Georgia', 'Times New Roman', 'Verdana'],
+  systemFonts: ['Arial', 'Courier New', 'Georgia', 'Times New Roman', 'Verdana'],
   customFonts: null
 };
 var FontsProvider = function FontsProvider(_ref4) {

package/lib/index.js

@@ -27,6 +27,7 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 require('slugify');
 var uniqBy = require('lodash/uniqBy');
 var _typeof = require('@babel/runtime/helpers/typeof');
+var isEmpty = require('lodash/isEmpty');
 var uniq = require('lodash/uniq');
 var tracking = require('@folklore/tracking');
 
@@ -50,6 +51,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var uniqBy__default = /*#__PURE__*/_interopDefaultLegacy(uniqBy);
 var _typeof__default = /*#__PURE__*/_interopDefaultLegacy(_typeof);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var uniq__default = /*#__PURE__*/_interopDefaultLegacy(uniq);
 
 /**
@@ -1183,7 +1185,7 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   return FieldsManager;
 }(DefinitionsManager);
 
-var _excluded$2 = ["medias"];
+var _excluded$3 = ["medias"];
 
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
@@ -1251,7 +1253,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
             themeMedias = _this$toPath.medias,
-            newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$2);
+            newTheme = _objectWithoutProperties__default["default"](_this$toPath, _excluded$3);
 
         return medias !== null || themeMedias !== null ? _objectSpread__default["default"](_objectSpread__default["default"]({}, story), {}, {
           theme: newTheme,
@@ -1500,6 +1502,8 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   return ScreensManager;
 }(DefinitionsManager);
 
+var _excluded$2 = ["textStyle", "color", "boxStyle"];
+
 var ThemeParser = /*#__PURE__*/function () {
   function ThemeParser(_ref) {
     var screensManager = _ref.screensManager;
@@ -1552,7 +1556,9 @@ var ThemeParser = /*#__PURE__*/function () {
           _theme$colors = theme.colors,
           themeColors = _theme$colors === void 0 ? {} : _theme$colors,
           _theme$textStyles = theme.textStyles,
-          themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles;
+          themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
+          _theme$boxStyles = theme.boxStyles,
+          themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
       var newComponents = components.reduce(function (currentComponents, screen, index) {
         var type = screen.type;
 
@@ -1560,7 +1566,7 @@ var ThemeParser = /*#__PURE__*/function () {
             definition = _this$getDefinitionBy.definition,
             themeScreen = _this$getDefinitionBy.themeScreen;
 
-        var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles); // Only switch screen if it has changed
+        var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles); // Only switch screen if it has changed
 
 
         return newScreen !== screen || themeScreen !== null ? [].concat(_toConsumableArray__default["default"](currentComponents.slice(0, index)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, themeScreen), newScreen)], _toConsumableArray__default["default"](currentComponents.slice(index + 1))) : currentComponents;
@@ -1571,7 +1577,7 @@ var ThemeParser = /*#__PURE__*/function () {
     }
   }, {
     key: "parseScreen",
-    value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextSyle) {
+    value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
 
       var _definition$fields = definition.fields,
@@ -1591,7 +1597,7 @@ var ThemeParser = /*#__PURE__*/function () {
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
 
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextSyle); // Only switch field if it has changed
+        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles); // Only switch field if it has changed
 
 
         return newFieldValue !== fieldValue ? _objectSpread__default["default"](_objectSpread__default["default"]({}, currentValue), {}, _defineProperty__default["default"]({}, key, newFieldValue)) : currentValue;
@@ -1601,23 +1607,36 @@ var ThemeParser = /*#__PURE__*/function () {
 
   }, {
     key: "parseField",
-    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles) {
+    value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _definition$theme = definition.theme,
-          fieldTheme = _definition$theme === void 0 ? {} : _definition$theme; // @TODO very sloow
+          fieldTheme = _definition$theme === void 0 ? null : _definition$theme; // Early return
+
+      if (fieldTheme === null || !isObject__default["default"](fieldTheme)) {
+        return value;
+      } // @TODO very sloow
+
 
       if (isArray__default["default"](value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
+            // Early return
+            if (!isObject__default["default"](innerField[innerFieldName])) {
+              return newInnerField;
+            }
+
             var _ref3 = fieldTheme[innerFieldName] || {},
                 _ref3$textStyle = _ref3.textStyle,
                 innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
                 _ref3$color = _ref3.color,
-                innerFieldColor = _ref3$color === void 0 ? null : _ref3$color; // Early return
+                innerFieldColor = _ref3$color === void 0 ? null : _ref3$color,
+                _ref3$boxStyle = _ref3.boxStyle,
+                innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle; // Early return, no theme
 
 
-            if (!isObject__default["default"](innerField[innerFieldName])) {
+            if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
-            } // Color
+            } // TODO: replace this with the recursive parseValue...
+            // Color
 
 
             var colorValue = innerFieldColor !== null ? {
@@ -1627,23 +1646,65 @@ var ThemeParser = /*#__PURE__*/function () {
             var textStyleValue = innerFieldTextStyle !== null ? {
               textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null), innerField[innerFieldName].textStyle || null)
             } : null;
+            var boxStyleValue = innerFieldBoxStyle !== null ? {
+              boxStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null), innerField[innerFieldName].boxStyle || null)
+            } : null;
 
-            if (colorValue === null && textStyleValue === null) {
+            if (colorValue === null && textStyleValue === null && boxStyleValue === null) {
               return newInnerField;
             }
 
-            return _objectSpread__default["default"](_objectSpread__default["default"]({}, newInnerField), {}, _defineProperty__default["default"]({}, innerFieldName, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), innerField[innerFieldName]), textStyleValue)));
+            return _objectSpread__default["default"](_objectSpread__default["default"]({}, newInnerField), {}, _defineProperty__default["default"]({}, innerFieldName, _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), innerField[innerFieldName]), textStyleValue), boxStyleValue)));
           }, innerField) : innerField;
         });
         return newFieldValue;
       }
 
-      if (isObject__default["default"](value) && !isArray__default["default"](value)) {
+      if (isObject__default["default"](value)) {
+        return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }
+
+      return value;
+    } // eslint-disable-next-line class-methods-use-this
+
+  }, {
+    key: "parseValue",
+    value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+      var _this3 = this;
+
+      if (isObject__default["default"](initialValue) || isObject__default["default"](fieldTheme)) {
+        var value = initialValue || null;
+
         var _ref4 = fieldTheme || {},
             _ref4$textStyle = _ref4.textStyle,
             fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
             _ref4$color = _ref4.color,
-            fieldColorName = _ref4$color === void 0 ? null : _ref4$color; // Color
+            fieldColorName = _ref4$color === void 0 ? null : _ref4$color,
+            _ref4$boxStyle = _ref4.boxStyle,
+            fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
+            otherProps = _objectWithoutProperties__default["default"](_ref4, _excluded$2);
+
+        if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty__default["default"](otherProps) && !isObject__default["default"](fieldTheme)) {
+          return value;
+        }
+
+        var complexValue = null;
+
+        if (!isEmpty__default["default"](otherProps)) {
+          complexValue = Object.keys(fieldTheme).reduce(function (newObject, key) {
+            var innerValue = value !== null ? value[key] || null : null;
+
+            var newValue = _this3.parseValue(innerValue, fieldTheme[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+
+            return _objectSpread__default["default"](_objectSpread__default["default"]({}, newObject), newValue !== null ? _defineProperty__default["default"]({}, key, newValue) : null);
+          }, {});
+        }
+
+        var _ref6 = value || {},
+            _ref6$textStyle = _ref6.textStyle,
+            valueTextStyle = _ref6$textStyle === void 0 ? null : _ref6$textStyle,
+            _ref6$boxStyle = _ref6.boxStyle,
+            valueBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle; // Color
 
 
         var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
@@ -1654,13 +1715,19 @@ var ThemeParser = /*#__PURE__*/function () {
         var fieldTextStyle = fieldTextStyleName !== null && themeTextStyles !== null ? themeTextStyles[fieldTextStyleName] || null : null;
         var fieldThemeComponentTextStyle = themeValue !== null ? themeValue.textStyle || null : null;
         var textStyleValue = fieldTextStyle !== null || fieldThemeComponentTextStyle !== null ? {
-          textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldTextStyle), fieldThemeComponentTextStyle), value.textStyle || null)
+          textStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldTextStyle), fieldThemeComponentTextStyle), valueTextStyle || null)
+        } : null; // Box style
+
+        var fieldBoxStyle = fieldBoxStyleName !== null && themeBoxStyles !== null ? themeBoxStyles[fieldBoxStyleName] || null : null;
+        var fieldThemeComponentBoxStyle = themeValue !== null ? themeValue.boxStyle || null : null;
+        var boxStyleValue = fieldBoxStyle !== null || fieldThemeComponentBoxStyle !== null ? {
+          boxStyle: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
         } : null; // Only change value if something is overrided
 
-        return colorValue !== null || themeValue !== null || textStyleValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), themeValue), value), textStyleValue) : value;
+        return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, colorValue), themeValue), value), boxStyleValue), textStyleValue), complexValue) : value;
       }
 
-      return value;
+      return initialValue;
     }
   }]);
 

package/lib/utils.js

@@ -447,7 +447,8 @@ var getStyleFromBox = function getStyleFromBox(value) {
       backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo,
       _value$borderRadius = value.borderRadius,
       borderRadius = _value$borderRadius === void 0 ? null : _value$borderRadius,
-      padding = value.padding,
+      _value$padding = value.padding,
+      paddingValue = _value$padding === void 0 ? null : _value$padding,
       _value$borderWidth = value.borderWidth,
       borderWidth = _value$borderWidth === void 0 ? null : _value$borderWidth,
       _value$borderStyle = value.borderStyle,
@@ -459,9 +460,28 @@ var getStyleFromBox = function getStyleFromBox(value) {
     style: borderStyle,
     color: borderColor
   };
+
+  var _ref = isObject__default["default"](paddingValue) ? paddingValue : {
+    padding: paddingValue
+  },
+      _ref$top = _ref.top,
+      paddingTop = _ref$top === void 0 ? null : _ref$top,
+      _ref$right = _ref.right,
+      paddingRight = _ref$right === void 0 ? null : _ref$right,
+      _ref$bottom = _ref.bottom,
+      paddingBottom = _ref$bottom === void 0 ? null : _ref$bottom,
+      _ref$left = _ref.left,
+      paddingLeft = _ref$left === void 0 ? null : _ref$left,
+      _ref$padding = _ref.padding,
+      padding = _ref$padding === void 0 ? null : _ref$padding;
+
   return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
     borderRadius: borderRadius
   } : null), getStyleFromBorder(border)), {}, {
+    paddingTop: paddingTop,
+    paddingRight: paddingRight,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
     padding: padding
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.61",
+    "version": "0.3.64",
     "description": "",
     "keywords": [
         "javascript"
@@ -132,5 +132,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d6066e12f37c8516f07172ea225667d28dca6434"
+    "gitHead": "b0da130454a8615d3fd00a3d380f438863b35334"
 }