@micromag/core 0.3.311 → 0.3.322

package/es/index.js

@@ -32,7 +32,6 @@ import { Tracking as Tracking$1 } from '@folklore/tracking';
 /**
  * Core
  */
-
 var history = PropTypes$1.shape({
   listen: PropTypes$1.func.isRequired,
   push: PropTypes$1.func.isRequired
@@ -60,7 +59,6 @@ var label = PropTypes$1.oneOfType([message, PropTypes$1.node]);
 var statusCode = PropTypes$1.oneOf([401, 403, 404, 500]);
 var ref = PropTypes$1.oneOfType([PropTypes$1.shape({
   current: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
-
 }), PropTypes$1.func]);
 var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
 var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
@@ -70,10 +68,10 @@ var progress = PropTypes$1.shape({
   currentTime: PropTypes$1.number,
   duration: PropTypes$1.number
 });
+
 /**
  * Site
  */
-
 var user = PropTypes$1.shape({
   id: PropTypes$1.number,
   firstname: PropTypes$1.string,
@@ -125,10 +123,10 @@ var componentNames = function componentNames(Components) {
 };
 var component = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.func]);
 var components = PropTypes$1.objectOf(component);
+
 /**
  * Forms
  */
-
 var errors = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.string)]);
 var formErrors = PropTypes$1.objectOf(errors);
 var selectOption = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
@@ -142,10 +140,10 @@ var formField = PropTypes$1.shape({
   component: component
 });
 var formFields = PropTypes$1.arrayOf(formField);
+
 /**
  * Medias
  */
-
 var mediaMetadataShape = {
   filename: PropTypes$1.string,
   size: PropTypes$1.number,
@@ -203,15 +201,17 @@ var audioMedias = PropTypes$1.arrayOf(audioMedia);
 var closedCaptionsMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
   type: PropTypes$1.oneOf(['closed-captions'])
 }));
+
 /**
  * Style
  */
 
-var font = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+var customFont = PropTypes$1.shape({
   type: PropTypes$1.oneOf(['system', 'google', 'custom']),
   name: PropTypes$1.string,
   media: fontMedia
-})]);
+});
+var font = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.string]);
 var fonts = PropTypes$1.arrayOf(font);
 var textAlign = PropTypes$1.oneOf(['left', 'right', 'center']);
 var color = PropTypes$1.shape({
@@ -266,6 +266,7 @@ var objectFit = PropTypes$1.shape({
   horizontalPosition: PropTypes$1.oneOf(['left', 'center', 'right']),
   verticalPosition: PropTypes$1.oneOf(['top', 'center', 'bottom'])
 });
+
 /**
  * Elements
  */
@@ -389,6 +390,7 @@ var conversation = PropTypes$1.shape({
   textStyle: textStyle,
   messages: conversationMessages
 });
+
 /**
  * Definitions
  */
@@ -418,10 +420,10 @@ var fieldDefinition = PropTypes$1.shape({
   fields: fields
 });
 var fieldDefinitions = PropTypes$1.arrayOf(fieldDefinition);
+
 /**
  * Components
  */
-
 var storyComponentShape = {
   type: PropTypes$1.string.isRequired
 };
@@ -434,7 +436,6 @@ var screen = screenComponent; // @NOTE should be removed
 /**
  * Theme
  */
-
 var theme = PropTypes$1.shape({
   id: PropTypes$1.string,
   textStyles: PropTypes$1.objectOf(textStyle),
@@ -446,9 +447,11 @@ var theme = PropTypes$1.shape({
 var viewerTheme = PropTypes$1.shape(_objectSpread({
   logo: imageMedia
 }, theme));
+
 /**
  * Branding
  */
+
 // export const branding = PropTypes.shape({
 //     logo: imageMedia,
 //     primaryColor: color,
@@ -460,27 +463,26 @@ var viewerTheme = PropTypes$1.shape(_objectSpread({
 /**
  * Metadata
  */
-
 var metadata = PropTypes$1.shape({
   description: PropTypes$1.string,
   shareUrl: PropTypes$1.string,
   shareImage: imageMedia,
   favIcon: imageMedia
 });
+
 /**
  * Story
  */
-
 var story = PropTypes$1.shape({
   id: PropTypes$1.string,
   theme: theme,
   components: screenComponents,
   metadata: metadata
 });
+
 /**
  * Render
  */
-
 var deviceScreen = PropTypes$1.shape({
   name: PropTypes$1.string.isRequired,
   mediaQuery: PropTypes$1.string
@@ -494,6 +496,7 @@ var screenSize = PropTypes$1.shape({
   landscape: PropTypes$1.bool
 });
 var renderContext = PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+
 /**
  * Screens
  */
@@ -520,12 +523,15 @@ var slide = PropTypes$1.shape({
   image: imageMedia,
   text: PropTypes$1.string
 });
-var slides = PropTypes$1.arrayOf(slide); // export const imageStyle = PropTypes.shape({
+var slides = PropTypes$1.arrayOf(slide);
+
+// export const imageStyle = PropTypes.shape({
 //     alt: PropTypes.string,
 //     fit: PropTypes.object,
 // });
 
 var containerStyle = PropTypes$1.shape({});
+
 /**
  * Transitions
  */
@@ -542,6 +548,7 @@ var transitions = PropTypes$1.shape({
   "in": transition,
   out: transition
 });
+
 /**
  * Search
  */
@@ -551,6 +558,7 @@ var searchFilter = PropTypes$1.shape({
   value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.number])
 });
 var searchFilters = PropTypes$1.arrayOf(searchFilter);
+
 /**
  * Payments
  */
@@ -563,6 +571,7 @@ var paymentItem = PropTypes$1.shape({
   amount: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])
 });
 var paymentItems = PropTypes$1.arrayOf(paymentItem);
+
 /**
  * Page Metadada
  */
@@ -649,6 +658,7 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     audioMedia: audioMedia,
     audioMedias: audioMedias,
     closedCaptionsMedia: closedCaptionsMedia,
+    customFont: customFont,
     font: font,
     fonts: fonts,
     textAlign: textAlign,
@@ -738,93 +748,77 @@ var PropTypes = /*#__PURE__*/Object.freeze({
 var sortedColors = function sortedColors(colors) {
   return sortBy(colors, ['color', 'alpha']);
 };
-
 var uniqueColors = function uniqueColors(colors) {
   return uniqWith(colors, function (colorA, colorB) {
     return colorA.alpha === colorB.alpha && colorA.color === colorB.color;
   });
 };
-
 var ColorsParser = /*#__PURE__*/function () {
   function ColorsParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
-        screensManager = _ref.screensManager;
-
+      screensManager = _ref.screensManager;
     _classCallCheck(this, ColorsParser);
-
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
-  } // Convert medias object to path
-
+  }
 
+  // Convert medias object to path
   _createClass(ColorsParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
-
       if (story === null) {
         return story;
       }
-
       var _ref2 = story || {},
-          _ref2$theme = _ref2.theme,
-          theme = _ref2$theme === void 0 ? null : _ref2$theme,
-          _ref2$components = _ref2.components,
-          components = _ref2$components === void 0 ? [] : _ref2$components;
-
+        _ref2$theme = _ref2.theme,
+        theme = _ref2$theme === void 0 ? null : _ref2$theme,
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? [] : _ref2$components;
       var _components$reduce = components.reduce(function (_ref3, screen) {
-        var _ref3$colors = _ref3.colors,
+          var _ref3$colors = _ref3.colors,
             currentColors = _ref3$colors === void 0 ? null : _ref3$colors;
-        var type = screen.type;
-
-        var _ref4 = _this.screensManager.getDefinition(type) || {},
+          var type = screen.type;
+          var _ref4 = _this.screensManager.getDefinition(type) || {},
             _ref4$fields = _ref4.fields,
             fields = _ref4$fields === void 0 ? [] : _ref4$fields;
-
-        var fieldsPattern = _this.getColorFieldPatterns(fields);
-
-        var _ColorsParser$getColo = ColorsParser.getColorsFromPath(screen, fieldsPattern),
+          var fieldsPattern = _this.getColorFieldPatterns(fields);
+          var _ColorsParser$getColo = ColorsParser.getColorsFromPath(screen, fieldsPattern),
             newColors = _ColorsParser$getColo.colors;
-
-        return {
-          colors: [].concat(_toConsumableArray(currentColors), _toConsumableArray(newColors))
-        };
-      }, {
-        colors: []
-      }),
-          colors = _components$reduce.colors;
-
+          return {
+            colors: [].concat(_toConsumableArray(currentColors), _toConsumableArray(newColors))
+          };
+        }, {
+          colors: []
+        }),
+        colors = _components$reduce.colors;
       if (theme !== null) {
         var themeColors = this.parse(theme);
         return colors !== null || themeColors !== null ? uniqueColors([].concat(_toConsumableArray(sortedColors(themeColors || [])), _toConsumableArray(sortedColors(colors || [])))) : [];
       }
-
       return colors !== null ? sortedColors(uniqueColors(colors || [])) : [];
     }
   }, {
     key: "getColorFieldPatterns",
     value: function getColorFieldPatterns(fields) {
       var _this2 = this;
-
       var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       return fields.reduce(function (patterns, field) {
         var _field$name = field.name,
-            name = _field$name === void 0 ? null : _field$name,
-            _field$type = field.type,
-            type = _field$type === void 0 ? null : _field$type;
+          name = _field$name === void 0 ? null : _field$name,
+          _field$type = field.type,
+          type = _field$type === void 0 ? null : _field$type;
         var path = [namePrefix, name].filter(function (it) {
           return it !== null;
         }).join('\\.');
-
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field); // also check settings fields
-
-
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
+        // also check settings fields
         var _fieldDefinition$fiel = fieldDefinition.fields,
-            subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
-            _fieldDefinition$item = fieldDefinition.itemsField,
-            itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
-            _fieldDefinition$sett = fieldDefinition.settings,
-            settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+          _fieldDefinition$item = fieldDefinition.itemsField,
+          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+          _fieldDefinition$sett = fieldDefinition.settings,
+          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
         return [].concat(_toConsumableArray(patterns), _toConsumableArray(ColorsParser.fieldIsColor(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(_this2.getColorFieldPatterns(subFields, path)), _toConsumableArray(_this2.getColorFieldPatterns(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getColorFieldPatterns([itemsField], "".concat(path, "\\.[0-9]+")) : []));
       }, []);
     }
@@ -832,7 +826,7 @@ var ColorsParser = /*#__PURE__*/function () {
     key: "fieldIsColor",
     value: function fieldIsColor(_ref5) {
       var _ref5$id = _ref5.id,
-          id = _ref5$id === void 0 ? null : _ref5$id;
+        id = _ref5$id === void 0 ? null : _ref5$id;
       return id === 'color';
     }
   }, {
@@ -844,8 +838,8 @@ var ColorsParser = /*#__PURE__*/function () {
       var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
       return keys.reduce(function (_ref6, key) {
         var currentData = _ref6.data,
-            _ref6$colors = _ref6.colors,
-            currentColors = _ref6$colors === void 0 ? null : _ref6$colors;
+          _ref6$colors = _ref6.colors,
+          currentColors = _ref6$colors === void 0 ? null : _ref6$colors;
         var path = [keyPrefix, key].filter(function (it) {
           return it !== null;
         }).join('.');
@@ -856,7 +850,6 @@ var ColorsParser = /*#__PURE__*/function () {
         var color = null;
         var newValue = null;
         var subColors = null;
-
         if (patternMatch && isObject(value)) {
           if (value.color && value.color.length === 4) {
             var innerColor = value.color.split('').map(function (hex, i) {
@@ -879,7 +872,6 @@ var ColorsParser = /*#__PURE__*/function () {
         } else {
           newValue = value;
         }
-
         return {
           data: dataIsArray ? [].concat(_toConsumableArray(currentData || []), [newValue]) : _objectSpread(_objectSpread({}, currentData), {}, _defineProperty({}, key, newValue)),
           colors: color !== null ? [].concat(_toConsumableArray(currentColors || []), _toConsumableArray(subColors || []), [color]) : [].concat(_toConsumableArray(currentColors || []), _toConsumableArray(subColors || []))
@@ -890,7 +882,6 @@ var ColorsParser = /*#__PURE__*/function () {
       });
     }
   }]);
-
   return ColorsParser;
 }();
 
@@ -898,32 +889,24 @@ var getComponentFromName = function getComponentFromName() {
   var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var components = arguments.length > 1 ? arguments[1] : undefined;
   var defaultComponent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
   if (components === null || name === null) {
     return defaultComponent;
   }
-
   var pascalName = pascalCase(name);
   return components[pascalName] || components[name] || defaultComponent;
 };
 
 var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(ComponentsManager, _EventEmitter);
-
   var _super = _createSuper(ComponentsManager);
-
   function ComponentsManager() {
     var _this;
-
     var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     _classCallCheck(this, ComponentsManager);
-
     _this = _super.call(this);
     _this.components = components;
     return _this;
   }
-
   _createClass(ComponentsManager, [{
     key: "addComponent",
     value: function addComponent(name, component) {
@@ -951,11 +934,9 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
     key: "addNamespace",
     value: function addNamespace(namespace) {
       var _this2 = this;
-
       if (namespace === null) {
         return this;
       }
-
       this.components = Object.keys(this.components).reduce(function (componentsMap, name) {
         return _objectSpread(_objectSpread({}, componentsMap), {}, _defineProperty({}, "".concat(namespace, ".").concat(name), _this2.components[name]));
       }, {});
@@ -972,7 +953,6 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
     key: "getComponents",
     value: function getComponents() {
       var _this3 = this;
-
       var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       return namespace !== null ? Object.keys(this.components || {}).reduce(function (componentsMap, name) {
         var pattern = new RegExp("^".concat(namespace, "\\.(.*)$"));
@@ -987,27 +967,20 @@ var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
       return this.components !== null && typeof this.components[namespace !== null ? "".concat(namespace, ".").concat(name) : name] !== 'undefined';
     }
   }]);
-
   return ComponentsManager;
 }(EventEmitter);
 
 var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(DefinitionsManager, _EventEmitter);
-
   var _super = _createSuper(DefinitionsManager);
-
   function DefinitionsManager() {
     var _this;
-
     var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-
     _classCallCheck(this, DefinitionsManager);
-
     _this = _super.call(this);
     _this.definitions = definitions || [];
     return _this;
   }
-
   _createClass(DefinitionsManager, [{
     key: "addDefinition",
     value: function addDefinition(definition) {
@@ -1041,7 +1014,6 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
       if (id === null) {
         return null;
       }
-
       return this.definitions.find(function (it) {
         return it.id === id;
       }) || null;
@@ -1060,9 +1032,8 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
     key: "getComponent",
     value: function getComponent(id) {
       var _ref = this.getDefinition(id) || {},
-          _ref$component = _ref.component,
-          component = _ref$component === void 0 ? null : _ref$component;
-
+        _ref$component = _ref.component,
+        component = _ref$component === void 0 ? null : _ref$component;
       return component;
     }
   }, {
@@ -1070,39 +1041,32 @@ var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
     value: function getComponents() {
       return this.definitions.reduce(function (allComponents, _ref2) {
         var id = _ref2.id,
-            _ref2$component = _ref2.component,
-            component = _ref2$component === void 0 ? null : _ref2$component;
+          _ref2$component = _ref2.component,
+          component = _ref2$component === void 0 ? null : _ref2$component;
         return component !== null ? _objectSpread(_objectSpread({}, allComponents), {}, _defineProperty({}, id, component)) : allComponents;
       }, {});
     }
   }]);
-
   return DefinitionsManager;
 }(EventEmitter);
 
 var EventsManager = /*#__PURE__*/function (_EventEmitter) {
   _inherits(EventsManager, _EventEmitter);
-
   var _super = _createSuper(EventsManager);
-
   function EventsManager(element) {
     var _this;
-
     _classCallCheck(this, EventsManager);
-
     _this = _super.call(this);
     _this.element = element;
     _this.events = {};
     _this.listeners = {};
     return _this;
   }
-
   _createClass(EventsManager, [{
     key: "subscribe",
     value: function subscribe(event, callback) {
       this.on(event, callback);
       this.events = _objectSpread(_objectSpread({}, this.events), {}, _defineProperty({}, event, [].concat(_toConsumableArray(this.events[event] || []), [callback])));
-
       if (this.events[event].length === 1) {
         this.addEventListener(event);
       }
@@ -1111,20 +1075,16 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
     key: "unsubscribe",
     value: function unsubscribe(event, callback) {
       var _this2 = this;
-
       this.off(event, callback);
       this.events = Object.keys(this.events).reduce(function (newEvents, eventName) {
         if (eventName !== event) {
           return _objectSpread(_objectSpread({}, newEvents), {}, _defineProperty({}, eventName, _this2.events[eventName]));
         }
-
         var newListeners = _this2.events[eventName].filter(function (listener) {
           return listener !== callback;
         });
-
         return newListeners.length > 0 ? _objectSpread(_objectSpread({}, newEvents), {}, _defineProperty({}, eventName, newListeners)) : newEvents;
       }, {});
-
       if (typeof this.events[event] === 'undefined') {
         this.removeEventListener(event);
       }
@@ -1133,17 +1093,14 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
     key: "addEventListener",
     value: function addEventListener(event) {
       var _this3 = this;
-
       if (typeof this.listeners[event] === 'undefined') {
         this.listeners[event] = function () {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
             args[_key] = arguments[_key];
           }
-
           return _this3.emit.apply(_this3, [event].concat(args));
         };
       }
-
       this.element.addEventListener(event, this.listeners[event]);
     }
   }, {
@@ -1152,135 +1109,116 @@ var EventsManager = /*#__PURE__*/function (_EventEmitter) {
       this.element.removeEventListener(event, this.listeners[event]);
     }
   }]);
-
   return EventsManager;
 }(EventEmitter);
 
 var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   _inherits(FieldsManager, _DefinitionsManager);
-
   var _super = _createSuper(FieldsManager);
-
   function FieldsManager() {
     _classCallCheck(this, FieldsManager);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(FieldsManager, [{
     key: "filter",
     value: function filter(_filter) {
-      return new FieldsManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
+      return new FieldsManager(this.definitions.filter(_filter));
+      // this.definitions = this.definitions.filter(filter);
       // return this;
     }
   }]);
-
   return FieldsManager;
 }(DefinitionsManager);
 
 var _excluded$3 = ["medias"];
-
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
-        screensManager = _ref.screensManager;
-
+      screensManager = _ref.screensManager;
     _classCallCheck(this, MediasParser);
-
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
   }
-
   _createClass(MediasParser, [{
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
         var _ref2 = this.screensManager.getDefinition(type) || {},
-            _ref2$fields = _ref2.fields,
-            fields = _ref2$fields === void 0 ? [] : _ref2$fields;
-
+          _ref2$fields = _ref2.fields,
+          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
         this.fieldsPatternCache[type] = this.getMediaFieldsPattern(fields);
       }
-
       return this.fieldsPatternCache[type];
-    } // Convert medias object to path
+    }
 
+    // Convert medias object to path
   }, {
     key: "toPath",
     value: function toPath(story) {
       var _this = this;
-
       if (story === null) {
         return story;
       }
-
       var _ref3 = story || {},
-          _ref3$theme = _ref3.theme,
-          theme = _ref3$theme === void 0 ? null : _ref3$theme,
-          _ref3$components = _ref3.components,
-          components = _ref3$components === void 0 ? [] : _ref3$components;
-
+        _ref3$theme = _ref3.theme,
+        theme = _ref3$theme === void 0 ? null : _ref3$theme,
+        _ref3$components = _ref3.components,
+        components = _ref3$components === void 0 ? [] : _ref3$components;
       var _components$reduce = components.reduce(function (_ref4, screen) {
-        var previousComponents = _ref4.components,
+          var previousComponents = _ref4.components,
             currentMedias = _ref4.medias;
-        var type = screen.type;
-
-        var fieldsPattern = _this.getFieldsPatternByScreen(type);
-
-        var _MediasParser$replace = MediasParser.replaceMediasWithPaths(screen, fieldsPattern),
+          var type = screen.type;
+          var fieldsPattern = _this.getFieldsPatternByScreen(type);
+          var _MediasParser$replace = MediasParser.replaceMediasWithPaths(screen, fieldsPattern),
             newScreen = _MediasParser$replace.data,
             newMedias = _MediasParser$replace.medias;
-
-        return {
-          components: [].concat(_toConsumableArray(previousComponents), [newScreen]),
-          medias: _objectSpread(_objectSpread({}, currentMedias), newMedias)
-        };
-      }, {
-        components: [],
-        medias: null
-      }),
-          newComponents = _components$reduce.components,
-          medias = _components$reduce.medias;
-
+          return {
+            components: [].concat(_toConsumableArray(previousComponents), [newScreen]),
+            medias: _objectSpread(_objectSpread({}, currentMedias), newMedias)
+          };
+        }, {
+          components: [],
+          medias: null
+        }),
+        newComponents = _components$reduce.components,
+        medias = _components$reduce.medias;
       if (theme !== null) {
         var _this$toPath = this.toPath(theme),
-            themeMedias = _this$toPath.medias,
-            newTheme = _objectWithoutProperties(_this$toPath, _excluded$3);
-
+          themeMedias = _this$toPath.medias,
+          newTheme = _objectWithoutProperties(_this$toPath, _excluded$3);
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           components: newComponents,
           medias: _objectSpread(_objectSpread({}, themeMedias), medias)
         }) : story;
       }
-
       return medias !== null ? _objectSpread(_objectSpread({}, story), {}, {
         components: newComponents,
         medias: medias
       }) : story;
-    } // Convert path to medias object
+    }
 
+    // Convert path to medias object
   }, {
     key: "fromPath",
     value: function fromPath(story) {
       var defaultMedias = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-
       if (story === null) {
         return story;
       }
-
       var _ref5 = story || {},
-          _ref5$theme = _ref5.theme,
-          theme = _ref5$theme === void 0 ? null : _ref5$theme,
-          _ref5$components = _ref5.components,
-          components = _ref5$components === void 0 ? [] : _ref5$components,
-          _ref5$medias = _ref5.medias,
-          medias = _ref5$medias === void 0 ? defaultMedias : _ref5$medias;
-
+        _ref5$theme = _ref5.theme,
+        theme = _ref5$theme === void 0 ? null : _ref5$theme,
+        _ref5$components = _ref5.components,
+        components = _ref5$components === void 0 ? [] : _ref5$components,
+        _ref5$medias = _ref5.medias,
+        medias = _ref5$medias === void 0 ? defaultMedias : _ref5$medias;
       if (medias === null && theme === null) {
         return story;
-      } // Replace path with medias objects
+      }
+
+      // Replace path with medias objects
       // const newComponents =
       //     medias !== null
       //         ? components.map((screen) => {
@@ -1289,12 +1227,12 @@ var MediasParser = /*#__PURE__*/function () {
       //               return MediasParser.replacePathsWithMedias(screen, medias, fieldsPattern);
       //           })
       //         : components;
-      // Faster parsing with data only
-
 
+      // Faster parsing with data only
       var componentsPattern = MediasParser.getMediaPatternsFromData(components);
-      var newComponents = medias !== null && componentsPattern.length > 0 ? MediasParser.replacePathsWithMedias(components, medias, componentsPattern) : components; // Replace path with medias object in theme
+      var newComponents = medias !== null && componentsPattern.length > 0 ? MediasParser.replacePathsWithMedias(components, medias, componentsPattern) : components;
 
+      // Replace path with medias object in theme
       if (theme !== null) {
         var newTheme = this.fromPath(theme, medias);
         return newTheme !== theme || newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
@@ -1302,7 +1240,6 @@ var MediasParser = /*#__PURE__*/function () {
           components: newComponents
         }) : story;
       }
-
       return newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
         components: newComponents
       }) : story;
@@ -1311,26 +1248,24 @@ var MediasParser = /*#__PURE__*/function () {
     key: "getMediaFieldsPattern",
     value: function getMediaFieldsPattern(fields) {
       var _this2 = this;
-
       var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       return fields.reduce(function (patterns, field) {
         var _field$name = field.name,
-            name = _field$name === void 0 ? null : _field$name,
-            _field$type = field.type,
-            type = _field$type === void 0 ? null : _field$type;
+          name = _field$name === void 0 ? null : _field$name,
+          _field$type = field.type,
+          type = _field$type === void 0 ? null : _field$type;
         var path = [namePrefix, name].filter(function (it) {
           return it !== null;
         }).join('\\.');
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
 
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field); // also check settings fields
-
-
+        // also check settings fields
         var _fieldDefinition$fiel = fieldDefinition.fields,
-            subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
-            _fieldDefinition$item = fieldDefinition.itemsField,
-            itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
-            _fieldDefinition$sett = fieldDefinition.settings,
-            settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+          _fieldDefinition$item = fieldDefinition.itemsField,
+          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+          _fieldDefinition$sett = fieldDefinition.settings,
+          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
         return [].concat(_toConsumableArray(patterns), _toConsumableArray(MediasParser.fieldIsMedia(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(MediasParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "\\.media$")), new RegExp("^".concat(path, "\\.variants\\.[0-9]+\\.media$"))] : []), _toConsumableArray(_this2.getMediaFieldsPattern(subFields, path)), _toConsumableArray(_this2.getMediaFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getMediaFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
       }, []);
     }
@@ -1338,14 +1273,14 @@ var MediasParser = /*#__PURE__*/function () {
     key: "fieldIsMedia",
     value: function fieldIsMedia(_ref6) {
       var _ref6$media = _ref6.media,
-          media = _ref6$media === void 0 ? false : _ref6$media;
+        media = _ref6$media === void 0 ? false : _ref6$media;
       return media;
     }
   }, {
     key: "fieldIsFontFamily",
     value: function fieldIsFontFamily(_ref7) {
       var _ref7$id = _ref7.id,
-          id = _ref7$id === void 0 ? null : _ref7$id;
+        id = _ref7$id === void 0 ? null : _ref7$id;
       return id === 'font-family';
     }
   }, {
@@ -1362,13 +1297,11 @@ var MediasParser = /*#__PURE__*/function () {
         }, false);
         var value = data[key];
         var newValue;
-
         if (patternMatch) {
           newValue = isObject(value) ? value : medias[value] || value;
         } else {
           newValue = isObject(value) || isArray(value) ? MediasParser.replacePathsWithMedias(value, medias, patterns, path) : value;
         }
-
         return dataIsArray ? [].concat(_toConsumableArray(newData), [newValue]) : _objectSpread(_objectSpread({}, newData), {}, _defineProperty({}, key, newValue));
       }, dataIsArray ? [] : {});
     }
@@ -1376,7 +1309,7 @@ var MediasParser = /*#__PURE__*/function () {
     key: "getMediaPath",
     value: function getMediaPath(_ref8) {
       var _ref8$id = _ref8.id,
-          id = _ref8$id === void 0 ? null : _ref8$id;
+        id = _ref8$id === void 0 ? null : _ref8$id;
       return id !== null ? "media://".concat(id) : null;
     }
   }, {
@@ -1388,7 +1321,7 @@ var MediasParser = /*#__PURE__*/function () {
       var dataKeys = MediasParser.keys(data);
       return dataKeys.reduce(function (_ref9, key) {
         var currentData = _ref9.data,
-            currentMedias = _ref9.medias;
+          currentMedias = _ref9.medias;
         var path = [keyPrefix, key].filter(function (it) {
           return it !== null;
         }).join('.');
@@ -1399,7 +1332,6 @@ var MediasParser = /*#__PURE__*/function () {
         var newValue;
         var media = null;
         var subMedias = null;
-
         if (patternMatch && isObject(value)) {
           var mediaPath = MediasParser.getMediaPath(value);
           newValue = mediaPath !== null ? mediaPath : value;
@@ -1411,7 +1343,6 @@ var MediasParser = /*#__PURE__*/function () {
         } else {
           newValue = value;
         }
-
         return {
           data: dataIsArray ? [].concat(_toConsumableArray(currentData || []), [newValue]) : _objectSpread(_objectSpread({}, currentData), {}, _defineProperty({}, key, newValue)),
           medias: media !== null ? _objectSpread(_objectSpread(_objectSpread({}, currentMedias), subMedias), {}, _defineProperty({}, newValue, media)) : _objectSpread(_objectSpread({}, currentMedias), subMedias)
@@ -1438,7 +1369,6 @@ var MediasParser = /*#__PURE__*/function () {
         if (_typeof(obj[key]) !== 'object' || !obj[key]) {
           return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, key, obj[key]));
         }
-
         var flattenedChild = MediasParser.dot(obj[key]);
         return _objectSpread(_objectSpread({}, acc), MediasParser.keys(flattenedChild).reduce(function (childAcc, childKey) {
           return _objectSpread(_objectSpread({}, childAcc), {}, _defineProperty({}, "".concat(key, ".").concat(childKey), flattenedChild[childKey]));
@@ -1451,62 +1381,51 @@ var MediasParser = /*#__PURE__*/function () {
       return isArray(obj) ? _toConsumableArray(obj.keys()) : Object.keys(obj);
     }
   }]);
-
   return MediasParser;
 }();
 
 var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   _inherits(ScreensManager, _DefinitionsManager);
-
   var _super = _createSuper(ScreensManager);
-
   function ScreensManager() {
     _classCallCheck(this, ScreensManager);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(ScreensManager, [{
     key: "getFields",
     value: function getFields(id) {
       var _ref = this.getDefinition(id) || {},
-          _ref$fields = _ref.fields,
-          fields = _ref$fields === void 0 ? null : _ref$fields;
-
+        _ref$fields = _ref.fields,
+        fields = _ref$fields === void 0 ? null : _ref$fields;
       return fields;
     }
   }, {
     key: "getLayouts",
     value: function getLayouts(id) {
       var _ref2 = this.getDefinition(id) || {},
-          _ref2$layouts = _ref2.layouts,
-          layouts = _ref2$layouts === void 0 ? null : _ref2$layouts;
-
+        _ref2$layouts = _ref2.layouts,
+        layouts = _ref2$layouts === void 0 ? null : _ref2$layouts;
       return layouts;
     }
   }, {
     key: "filter",
     value: function filter(_filter) {
-      return new ScreensManager(this.definitions.filter(_filter)); // this.definitions = this.definitions.filter(filter);
+      return new ScreensManager(this.definitions.filter(_filter));
+      // this.definitions = this.definitions.filter(filter);
       // return this;
     }
   }]);
-
   return ScreensManager;
 }(DefinitionsManager);
 
 var _excluded$2 = ["textStyle", "color", "boxStyle"];
-
 var ThemeParser = /*#__PURE__*/function () {
   function ThemeParser(_ref) {
     var screensManager = _ref.screensManager;
-
     _classCallCheck(this, ThemeParser);
-
     this.screensManager = screensManager;
     this.definitionCache = {};
   }
-
   _createClass(ThemeParser, [{
     key: "getDefinitionByScreen",
     value: function getDefinitionByScreen(type, themeComponents) {
@@ -1520,48 +1439,41 @@ var ThemeParser = /*#__PURE__*/function () {
           themeScreen: themeScreen
         };
       }
-
       return this.definitionCache[type];
     }
   }, {
     key: "parse",
     value: function parse(story) {
       var _this = this;
-
       if (story === null) {
         return story;
       }
-
       var _ref2 = story || {},
-          _ref2$theme = _ref2.theme,
-          theme = _ref2$theme === void 0 ? null : _ref2$theme,
-          _ref2$components = _ref2.components,
-          components = _ref2$components === void 0 ? null : _ref2$components;
-
+        _ref2$theme = _ref2.theme,
+        theme = _ref2$theme === void 0 ? null : _ref2$theme,
+        _ref2$components = _ref2.components,
+        components = _ref2$components === void 0 ? null : _ref2$components;
       if (theme === null || components === null) {
         return story;
       }
-
       var _theme$components = theme.components,
-          themeComponents = _theme$components === void 0 ? [] : _theme$components,
-          _theme$background = theme.background,
-          themeBackground = _theme$background === void 0 ? null : _theme$background,
-          _theme$colors = theme.colors,
-          themeColors = _theme$colors === void 0 ? {} : _theme$colors,
-          _theme$textStyles = theme.textStyles,
-          themeTextStyles = _theme$textStyles === void 0 ? null : _theme$textStyles,
-          _theme$boxStyles = theme.boxStyles,
-          themeBoxStyles = _theme$boxStyles === void 0 ? null : _theme$boxStyles;
+        themeComponents = _theme$components === void 0 ? [] : _theme$components,
+        _theme$background = theme.background,
+        themeBackground = _theme$background === void 0 ? null : _theme$background,
+        _theme$colors = theme.colors,
+        themeColors = _theme$colors === void 0 ? {} : _theme$colors,
+        _theme$textStyles = 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;
-
         var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
-            definition = _this$getDefinitionBy.definition,
-            themeScreen = _this$getDefinitionBy.themeScreen;
-
-        var newScreen = _this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles); // Only switch screen if it has changed
-
+          definition = _this$getDefinitionBy.definition,
+          themeScreen = _this$getDefinitionBy.themeScreen;
+        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;
       }, components);
       return newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
@@ -1572,43 +1484,41 @@ var ThemeParser = /*#__PURE__*/function () {
     key: "parseScreen",
     value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
       var _this2 = this;
-
       var _definition$fields = definition.fields,
-          fields = _definition$fields === void 0 ? [] : _definition$fields;
+        fields = _definition$fields === void 0 ? [] : _definition$fields;
       var newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
-
       if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
         newThemeValue.background = _objectSpread(_objectSpread({}, themeBackground), newThemeValue.background);
       } else if (themeBackground !== null) {
         newThemeValue.background = themeBackground;
       }
-
       var newScreenValue = Object.keys(value).reduce(function (currentValue, key) {
         var fieldDefinition = fields.find(function (it) {
           return it.name === key;
         }) || {};
         var fieldValue = value[key];
         var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
+        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
 
-        var newFieldValue = _this2.parseField(key, fieldDefinition, fieldValue, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles); // Only switch field if it has changed
-
-
+        // Only switch field if it has changed
         return newFieldValue !== fieldValue ? _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, newFieldValue)) : currentValue;
       }, value);
       return newThemeValue !== null ? _objectSpread(_objectSpread({}, newThemeValue), newScreenValue) : newScreenValue;
-    } // eslint-disable-next-line class-methods-use-this
+    }
 
+    // eslint-disable-next-line class-methods-use-this
   }, {
     key: "parseField",
     value: function parseField(key, definition, value, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
       var _definition$theme = definition.theme,
-          fieldTheme = _definition$theme === void 0 ? null : _definition$theme; // Early return
+        fieldTheme = _definition$theme === void 0 ? null : _definition$theme;
 
+      // Early return
       if (fieldTheme === null || !isObject(fieldTheme)) {
         return value;
-      } // @TODO very sloow
-
+      }
 
+      // @TODO very sloow
       if (isArray(value)) {
         var newFieldValue = value.map(function (innerField) {
           return innerField !== null ? Object.keys(innerField).reduce(function (newInnerField, innerFieldName) {
@@ -1616,182 +1526,163 @@ var ThemeParser = /*#__PURE__*/function () {
             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,
-                _ref3$boxStyle = _ref3.boxStyle,
-                innerFieldBoxStyle = _ref3$boxStyle === void 0 ? null : _ref3$boxStyle; // Early return, no theme
-
-
+              _ref3$textStyle = _ref3.textStyle,
+              innerFieldTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle,
+              _ref3$color = _ref3.color,
+              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 (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
               return newInnerField;
-            } // TODO: replace this with the recursive parseValue...
-            // Color
+            }
 
+            // TODO: replace this with the recursive parseValue...
 
+            // Color
             var colorValue = innerFieldColor !== null ? {
               color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
-            } : null; // Text style
+            } : null;
 
+            // Text style
             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 && boxStyleValue === null) {
               return newInnerField;
             }
-
             return _objectSpread(_objectSpread({}, newInnerField), {}, _defineProperty({}, innerFieldName, _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, colorValue), innerField[innerFieldName]), textStyleValue), boxStyleValue)));
           }, innerField) : innerField;
         });
         return newFieldValue;
       }
-
       if (isObject(value)) {
         return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
       }
-
       return value;
-    } // eslint-disable-next-line class-methods-use-this
+    }
 
+    // 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,
-            _ref4$boxStyle = _ref4.boxStyle,
-            fieldBoxStyleName = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-            otherProps = _objectWithoutProperties(_ref4, _excluded$2);
-
+          _ref4$textStyle = _ref4.textStyle,
+          fieldTextStyleName = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
+          _ref4$color = _ref4.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
-
+          _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;
         var colorValue = fieldColor !== null ? {
           color: fieldColor
-        } : null; // Text style
+        } : null;
 
+        // Text style
         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), valueTextStyle || null)
-        } : null; // Box style
+        } : 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
+        } : null;
 
+        // Only change value if something is overrided
         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 initialValue;
     }
   }]);
-
   return ThemeParser;
 }();
 
 var _excluded$1 = ["fonts"];
-
 var FontsParser = /*#__PURE__*/function () {
   function FontsParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
-        screensManager = _ref.screensManager;
-
+      screensManager = _ref.screensManager;
     _classCallCheck(this, FontsParser);
-
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = {};
   }
-
   _createClass(FontsParser, [{
     key: "getFieldsPatternByScreen",
     value: function getFieldsPatternByScreen(type) {
       if (typeof this.fieldsPatternCache[type] === 'undefined') {
         var _ref2 = this.screensManager.getDefinition(type) || {},
-            _ref2$fields = _ref2.fields,
-            fields = _ref2$fields === void 0 ? [] : _ref2$fields;
-
+          _ref2$fields = _ref2.fields,
+          fields = _ref2$fields === void 0 ? [] : _ref2$fields;
         this.fieldsPatternCache[type] = this.getFieldsPattern(fields);
       }
-
       return this.fieldsPatternCache[type];
-    } // Extract fonts
+    }
 
+    // Extract fonts
   }, {
     key: "parse",
     value: function parse(story) {
       var _this = this;
-
       if (story === null) {
         return story;
-      } // Extract fonts from screen
-
+      }
 
+      // Extract fonts from screen
       var _ref3 = story || {},
-          _ref3$theme = _ref3.theme,
-          theme = _ref3$theme === void 0 ? null : _ref3$theme,
-          _ref3$components = _ref3.components,
-          components = _ref3$components === void 0 ? [] : _ref3$components;
-
+        _ref3$theme = _ref3.theme,
+        theme = _ref3$theme === void 0 ? null : _ref3$theme,
+        _ref3$components = _ref3.components,
+        components = _ref3$components === void 0 ? [] : _ref3$components;
       var fonts = uniq(components.reduce(function (currentFonts, screen) {
         var type = screen.type;
-
         var fieldsPattern = _this.getFieldsPatternByScreen(type);
-
         var newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
         return newFonts.length > 0 ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(newFonts)) : currentFonts;
-      }, []), 'name'); // Extract fonts from theme
+      }, []), 'name');
 
+      // Extract fonts from theme
       if (theme !== null) {
         var _this$parse = this.parse(theme),
-            _this$parse$fonts = _this$parse.fonts,
-            themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
-            newTheme = _objectWithoutProperties(_this$parse, _excluded$1);
-
+          _this$parse$fonts = _this$parse.fonts,
+          themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
+          newTheme = _objectWithoutProperties(_this$parse, _excluded$1);
         return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           fonts: uniq([].concat(_toConsumableArray(themeFonts), _toConsumableArray(fonts)), 'name')
         }) : story;
       }
-
       return fonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
         fonts: fonts
       }) : story;
@@ -1800,26 +1691,24 @@ var FontsParser = /*#__PURE__*/function () {
     key: "getFieldsPattern",
     value: function getFieldsPattern(fields) {
       var _this2 = this;
-
       var namePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
       return fields.reduce(function (patterns, field) {
         var _field$name = field.name,
-            name = _field$name === void 0 ? null : _field$name,
-            _field$type = field.type,
-            type = _field$type === void 0 ? null : _field$type;
+          name = _field$name === void 0 ? null : _field$name,
+          _field$type = field.type,
+          type = _field$type === void 0 ? null : _field$type;
         var path = [namePrefix, name].filter(function (it) {
           return it !== null;
         }).join('\\.');
+        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
 
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field); // also check settings fields
-
-
+        // also check settings fields
         var _fieldDefinition$fiel = fieldDefinition.fields,
-            subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
-            _fieldDefinition$item = fieldDefinition.itemsField,
-            itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
-            _fieldDefinition$sett = fieldDefinition.settings,
-            settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
+          subFields = _fieldDefinition$fiel === void 0 ? [] : _fieldDefinition$fiel,
+          _fieldDefinition$item = fieldDefinition.itemsField,
+          itemsField = _fieldDefinition$item === void 0 ? null : _fieldDefinition$item,
+          _fieldDefinition$sett = fieldDefinition.settings,
+          settings = _fieldDefinition$sett === void 0 ? [] : _fieldDefinition$sett;
         return [].concat(_toConsumableArray(patterns), _toConsumableArray(FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp("^".concat(path, "$"))] : []), _toConsumableArray(_this2.getFieldsPattern(subFields, path)), _toConsumableArray(_this2.getFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
       }, []);
     }
@@ -1827,14 +1716,14 @@ var FontsParser = /*#__PURE__*/function () {
     key: "fieldIsFontFamily",
     value: function fieldIsFontFamily(_ref4) {
       var _ref4$id = _ref4.id,
-          id = _ref4$id === void 0 ? null : _ref4$id;
+        id = _ref4$id === void 0 ? null : _ref4$id;
       return id === 'font-family';
     }
   }, {
     key: "valueIsFont",
     value: function valueIsFont(_ref5) {
       var _ref5$type = _ref5.type,
-          type = _ref5$type === void 0 ? null : _ref5$type;
+        type = _ref5$type === void 0 ? null : _ref5$type;
       return type === 'custom' || type === 'google';
     }
   }, {
@@ -1853,28 +1742,23 @@ var FontsParser = /*#__PURE__*/function () {
         var value = data[key];
         var font = null;
         var subFonts = null;
-
         if (patternMatch && isObject(value) && FontsParser.valueIsFont(value)) {
           font = value;
         } else if (isObject(value) || isArray(value)) {
           subFonts = FontsParser.extractFontsWithPaths(value, patterns, path);
         }
-
         return subFonts !== null || font !== null ? [].concat(_toConsumableArray(currentFonts), _toConsumableArray(subFonts || []), _toConsumableArray(font !== null ? [font] : [])) : currentFonts;
       }, []);
     }
   }]);
-
   return FontsParser;
 }();
 
 var StoryParser = /*#__PURE__*/function () {
   function StoryParser(_ref) {
     var screensManager = _ref.screensManager,
-        fieldsManager = _ref.fieldsManager;
-
+      fieldsManager = _ref.fieldsManager;
     _classCallCheck(this, StoryParser);
-
     this.themeParser = new ThemeParser({
       screensManager: screensManager
     });
@@ -1887,24 +1771,20 @@ var StoryParser = /*#__PURE__*/function () {
       fieldsManager: fieldsManager
     });
   }
-
   _createClass(StoryParser, [{
     key: "parse",
     value: function parse(story) {
       var _this = this;
-
       var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          _ref2$withTheme = _ref2.withTheme,
-          withTheme = _ref2$withTheme === void 0 ? true : _ref2$withTheme,
-          _ref2$withMedias = _ref2.withMedias,
-          withMedias = _ref2$withMedias === void 0 ? true : _ref2$withMedias,
-          _ref2$withFonts = _ref2.withFonts,
-          withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts;
-
+        _ref2$withTheme = _ref2.withTheme,
+        withTheme = _ref2$withTheme === void 0 ? true : _ref2$withTheme,
+        _ref2$withMedias = _ref2.withMedias,
+        withMedias = _ref2$withMedias === void 0 ? true : _ref2$withMedias,
+        _ref2$withFonts = _ref2.withFonts,
+        withFonts = _ref2$withFonts === void 0 ? true : _ref2$withFonts;
       if (story === null) {
         return story;
       }
-
       var parsers = [[withMedias, function (newStory) {
         return _this.mediasParser.fromPath(newStory);
       }], [withTheme, function (newStory) {
@@ -1914,50 +1794,38 @@ var StoryParser = /*#__PURE__*/function () {
       }]];
       return parsers.reduce(function (parsedStory, _ref3) {
         var _ref4 = _slicedToArray(_ref3, 2),
-            enabled = _ref4[0],
-            parse = _ref4[1];
-
+          enabled = _ref4[0],
+          parse = _ref4[1];
         return enabled ? parse(parsedStory) : parsedStory;
       }, story);
     }
   }]);
-
   return StoryParser;
 }();
 
 var _excluded = ["value"],
-    _excluded2 = ["value", "currentTime"];
-
+  _excluded2 = ["value", "currentTime"];
 var Tracking = /*#__PURE__*/function (_BaseTracking) {
   _inherits(Tracking, _BaseTracking);
-
   var _super = _createSuper(Tracking);
-
   function Tracking() {
     var _this;
-
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
     _classCallCheck(this, Tracking);
-
     _this = _super.call(this, opts);
     var _this$options$variabl = _this.options.variables,
-        variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
+      variables = _this$options$variabl === void 0 ? null : _this$options$variabl;
     _this.variables = null;
     _this.screensViewed = [];
-
     if (variables !== null) {
       _this.setVariables(variables);
     }
-
     return _this;
   }
-
   _createClass(Tracking, [{
     key: "setVariables",
     value: function setVariables(variables) {
       this.variables = variables;
-
       if (variables !== null) {
         this.push(variables);
       }
@@ -1971,24 +1839,20 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     key: "trackScreenView",
     value: function trackScreenView(screen, screenIndex) {
       var _ref = this.variables || {},
-          _ref$screensCount = _ref.screensCount,
-          screensCount = _ref$screensCount === void 0 ? null : _ref$screensCount;
-
+        _ref$screensCount = _ref.screensCount,
+        screensCount = _ref$screensCount === void 0 ? null : _ref$screensCount;
       var _ref2 = screen || {},
-          _ref2$id = _ref2.id,
-          screenId = _ref2$id === void 0 ? null : _ref2$id,
-          _ref2$type = _ref2.type,
-          screenType = _ref2$type === void 0 ? null : _ref2$type,
-          _ref2$metadata = _ref2.metadata,
-          metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
-
+        _ref2$id = _ref2.id,
+        screenId = _ref2$id === void 0 ? null : _ref2$id,
+        _ref2$type = _ref2.type,
+        screenType = _ref2$type === void 0 ? null : _ref2$type,
+        _ref2$metadata = _ref2.metadata,
+        metadata = _ref2$metadata === void 0 ? {} : _ref2$metadata;
       var _ref3 = metadata || {},
-          screenTitle = _ref3.title;
-
+        screenTitle = _ref3.title;
       if (this.screensViewed.indexOf(screenId || screenIndex) !== -1) {
         this.screensViewed = [].concat(_toConsumableArray(this.screensViewed), [screenId || screenIndex]);
       }
-
       var data = {
         event: 'screenView',
         screenId: screenId,
@@ -2005,10 +1869,9 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
     key: "trackEvent",
     value: function trackEvent(category, action, label) {
       var _ref4 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-          _ref4$value = _ref4.value,
-          value = _ref4$value === void 0 ? null : _ref4$value,
-          opts = _objectWithoutProperties(_ref4, _excluded);
-
+        _ref4$value = _ref4.value,
+        value = _ref4$value === void 0 ? null : _ref4$value,
+        opts = _objectWithoutProperties(_ref4, _excluded);
       var data = _objectSpread(_objectSpread({}, opts), {}, {
         event: 'eventInteraction',
         eventCategory: category,
@@ -2016,37 +1879,32 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
         eventLabel: label,
         eventValue: value
       });
-
       this.push(data);
     }
   }, {
     key: "trackMedia",
     value: function trackMedia(type, media, action) {
       var _ref5 = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-          _ref5$value = _ref5.value,
-          value = _ref5$value === void 0 ? null : _ref5$value,
-          _ref5$currentTime = _ref5.currentTime,
-          optsCurrentTime = _ref5$currentTime === void 0 ? null : _ref5$currentTime,
-          opts = _objectWithoutProperties(_ref5, _excluded2);
-
+        _ref5$value = _ref5.value,
+        value = _ref5$value === void 0 ? null : _ref5$value,
+        _ref5$currentTime = _ref5.currentTime,
+        optsCurrentTime = _ref5$currentTime === void 0 ? null : _ref5$currentTime,
+        opts = _objectWithoutProperties(_ref5, _excluded2);
       var _ref6 = media || {},
-          _ref6$id = _ref6.id,
-          mediaId = _ref6$id === void 0 ? null : _ref6$id,
-          _ref6$name = _ref6.name,
-          name = _ref6$name === void 0 ? null : _ref6$name,
-          _ref6$duration = _ref6.duration,
-          rootDuration = _ref6$duration === void 0 ? null : _ref6$duration,
-          _ref6$currentTime = _ref6.currentTime,
-          currentTime = _ref6$currentTime === void 0 ? optsCurrentTime : _ref6$currentTime,
-          _ref6$metadata = _ref6.metadata,
-          metadata = _ref6$metadata === void 0 ? {} : _ref6$metadata;
-
+        _ref6$id = _ref6.id,
+        mediaId = _ref6$id === void 0 ? null : _ref6$id,
+        _ref6$name = _ref6.name,
+        name = _ref6$name === void 0 ? null : _ref6$name,
+        _ref6$duration = _ref6.duration,
+        rootDuration = _ref6$duration === void 0 ? null : _ref6$duration,
+        _ref6$currentTime = _ref6.currentTime,
+        currentTime = _ref6$currentTime === void 0 ? optsCurrentTime : _ref6$currentTime,
+        _ref6$metadata = _ref6.metadata,
+        metadata = _ref6$metadata === void 0 ? {} : _ref6$metadata;
       var _ref7 = metadata || {},
-          _ref7$duration = _ref7.duration,
-          duration = _ref7$duration === void 0 ? rootDuration : _ref7$duration;
-
+        _ref7$duration = _ref7.duration,
+        duration = _ref7$duration === void 0 ? rootDuration : _ref7$duration;
       var label = name;
-
       var data = _objectSpread(_objectSpread({}, opts), {}, {
         event: 'eventInteraction',
         eventCategory: type,
@@ -2057,11 +1915,9 @@ var Tracking = /*#__PURE__*/function (_BaseTracking) {
         mediaCurrentTime: currentTime !== null ? Math.round(currentTime) : null,
         mediaProgress: currentTime !== null && duration !== null && duration > 0 ? Math.round(currentTime / duration * 100) : null
       });
-
       this.push(data);
     }
   }]);
-
   return Tracking;
 }(Tracking$1);