@micromag/core 0.4.71 → 0.4.77

package/es/index.js

@@ -1,1102 +1,910 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
-import _createClass from '@babel/runtime/helpers/createClass';
 import isArray from 'lodash/isArray';
 import isObject from 'lodash/isObject';
 import uniqWith from 'lodash/uniqWith';
 import sortBy from 'lodash/sortBy';
-import _callSuper from '@babel/runtime/helpers/callSuper';
-import _inherits from '@babel/runtime/helpers/inherits';
 import EventEmitter from 'wolfy87-eventemitter';
 import { pascalCase } from 'change-case';
 import uniqBy from 'lodash/uniqBy';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import uniq from 'lodash/uniq';
-import _typeof from '@babel/runtime/helpers/typeof';
 import isString from 'lodash/isString';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import isEmpty from 'lodash/isEmpty';
 import { Tracking as Tracking$1 } from '@folklore/tracking';
 
-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;
-    _classCallCheck(this, ColorsParser);
+const sortedColors = colors => sortBy(colors, ['color', 'alpha']);
+const uniqueColors = colors => uniqWith(colors, (colorA, colorB) => colorA.alpha === colorB.alpha && colorA.color === colorB.color);
+class ColorsParser {
+  constructor({
+    fieldsManager,
+    screensManager
+  }) {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
   }
 
   // Convert medias object to path
-  return _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;
-      var _components$reduce = components.reduce(function (_ref3, screen) {
-          var _ref3$colors = _ref3.colors,
-            currentColors = _ref3$colors === void 0 ? null : _ref3$colors;
-          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),
-            newColors = _ColorsParser$getColo.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;
-        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$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;
-        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]+")) : []));
-      }, []);
-    }
-  }], [{
-    key: "fieldIsColor",
-    value: function fieldIsColor(_ref5) {
-      var _ref5$id = _ref5.id,
-        id = _ref5$id === void 0 ? null : _ref5$id;
-      return id === 'color';
+  parse(story) {
+    if (story === null) {
+      return story;
+    }
+    const {
+      theme = null,
+      components = []
+    } = story || {};
+    const {
+      colors
+    } = components.reduce(({
+      colors: currentColors = null
+    }, screen) => {
+      const {
+        type
+      } = screen;
+      const {
+        fields = []
+      } = this.screensManager.getDefinition(type) || {};
+      const fieldsPattern = this.getColorFieldPatterns(fields);
+      const {
+        colors: newColors
+      } = ColorsParser.getColorsFromPath(screen, fieldsPattern);
+      return {
+        colors: [...currentColors, ...newColors]
+      };
+    }, {
+      colors: []
+    });
+    if (theme !== null) {
+      const themeColors = this.parse(theme);
+      return colors !== null || themeColors !== null ? uniqueColors([...sortedColors(themeColors || []), ...sortedColors(colors || [])]) : [];
     }
-  }, {
-    key: "getColorsFromPath",
-    value: function getColorsFromPath(data, patterns) {
-      var colors = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var dataIsArray = isArray(data);
-      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;
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, false);
-        var value = data[key];
-        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) {
-              return i > 0 ? hex + hex : hex;
-            }).join('').toUpperCase();
-            color = {
-              alpha: value.alpha || 1,
-              color: innerColor
-            };
-          } else if (value.color) {
-            color = {
-              alpha: value.alpha,
-              color: value.color.toUpperCase()
-            };
-          }
-        } else if (isObject(value) || isArray(value)) {
-          var subReturn = ColorsParser.getColorsFromPath(value, patterns, colors, path);
-          newValue = subReturn.data;
-          subColors = subReturn.colors;
-        } else {
-          newValue = value;
+    return colors !== null ? sortedColors(uniqueColors(colors || [])) : [];
+  }
+  getColorFieldPatterns(fields, namePrefix = null) {
+    return fields.reduce((patterns, field) => {
+      const {
+        name = null,
+        type = null
+      } = field;
+      const path = [namePrefix, name].filter(it => it !== null).join('\\.');
+      const fieldDefinition = {
+        ...(type !== null ? this.fieldsManager.getDefinition(type) : null),
+        ...field
+      };
+      // also check settings fields
+      const {
+        fields: subFields = [],
+        itemsField = null,
+        settings = []
+      } = fieldDefinition;
+      return [...patterns, ...(ColorsParser.fieldIsColor(fieldDefinition) ? [new RegExp(`^${path}$`)] : []), ...this.getColorFieldPatterns(subFields, path), ...this.getColorFieldPatterns(settings, path), ...(itemsField !== null ? this.getColorFieldPatterns([itemsField], `${path}\\.[0-9]+`) : [])];
+    }, []);
+  }
+  static fieldIsColor({
+    id = null
+  }) {
+    return id === 'color';
+  }
+  static getColorsFromPath(data, patterns, colors = null, keyPrefix = null) {
+    const dataIsArray = isArray(data);
+    const keys = dataIsArray ? [...data.keys()] : Object.keys(data);
+    return keys.reduce(({
+      data: currentData,
+      colors: currentColors = null
+    }, key) => {
+      const path = [keyPrefix, key].filter(it => it !== null).join('.');
+      const patternMatch = patterns.reduce((found, pattern) => found || pattern.test(path), false);
+      const value = data[key];
+      let color = null;
+      let newValue = null;
+      let subColors = null;
+      if (patternMatch && isObject(value)) {
+        if (value.color && value.color.length === 4) {
+          const innerColor = value.color.split('').map((hex, i) => i > 0 ? hex + hex : hex).join('').toUpperCase();
+          color = {
+            alpha: value.alpha || 1,
+            color: innerColor
+          };
+        } else if (value.color) {
+          color = {
+            alpha: value.alpha,
+            color: value.color.toUpperCase()
+          };
         }
-        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 || []))
-        };
-      }, {
-        data: keys.length === 0 ? data : null,
-        colors: colors
-      });
-    }
-  }]);
-}();
+      } else if (isObject(value) || isArray(value)) {
+        const subReturn = ColorsParser.getColorsFromPath(value, patterns, colors, path);
+        newValue = subReturn.data;
+        subColors = subReturn.colors;
+      } else {
+        newValue = value;
+      }
+      return {
+        data: dataIsArray ? [...(currentData || []), newValue] : {
+          ...currentData,
+          [key]: newValue
+        },
+        colors: color !== null ? [...(currentColors || []), ...(subColors || []), color] : [...(currentColors || []), ...(subColors || [])]
+      };
+    }, {
+      data: keys.length === 0 ? data : null,
+      colors
+    });
+  }
+}
 
-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;
+const getComponentFromName = (name = null, components, defaultComponent = null) => {
   if (components === null || name === null) {
     return defaultComponent;
   }
-  var pascalName = pascalCase(name);
+  const pascalName = pascalCase(name);
   return components[pascalName] || components[name] || defaultComponent;
 };
 
 function getScreenFieldsWithStates(definition) {
-  var _ref = definition || {},
-    _ref$fields = _ref.fields,
-    screenFields = _ref$fields === void 0 ? null : _ref$fields,
-    _ref$states = _ref.states,
-    states = _ref$states === void 0 ? null : _ref$states;
+  const {
+    fields: screenFields = null,
+    states = null
+  } = definition || {};
   if (states === null) {
     return screenFields;
   }
-  var extraFields = states.reduce(function (statesFields, current) {
-    var _ref2 = current || {},
-      id = _ref2.id,
-      _ref2$fields = _ref2.fields,
-      fields = _ref2$fields === void 0 ? [] : _ref2$fields,
-      _ref2$repeatable = _ref2.repeatable,
-      repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
-      _ref2$fieldName = _ref2.fieldName,
-      fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
-      label = _ref2.label,
-      _ref2$defaultValue = _ref2.defaultValue,
-      defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
-    return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
+  const extraFields = states.reduce((statesFields, current) => {
+    const {
+      id,
+      fields = [],
+      repeatable = false,
+      fieldName = null,
+      label,
+      defaultValue = null
+    } = current || {};
+    return [...statesFields, ...(repeatable ? [{
       type: 'items',
       name: fieldName || id,
-      label: label,
-      defaultValue: defaultValue,
+      label,
+      defaultValue,
       stateId: id,
       itemsField: {
-        label: label,
+        label,
         type: 'fields',
-        fields: fields
+        fields
       }
-    }] : []), _toConsumableArray(!repeatable && fieldName !== null ? [{
+    }] : []), ...(!repeatable && fieldName !== null ? [{
       type: 'fields',
       name: fieldName,
       stateId: id,
-      fields: fields
-    }] : []), _toConsumableArray(!repeatable && fieldName === null ? fields.map(function (it) {
-      return _objectSpread(_objectSpread({}, it), {}, {
-        stateId: id
-      });
-    }) : []));
+      fields
+    }] : []), ...(!repeatable && fieldName === null ? fields.map(it => ({
+      ...it,
+      stateId: id
+    })) : [])];
   }, []);
-  return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
+  return [...extraFields, ...screenFields];
 }
 
-var ComponentsManager = /*#__PURE__*/function (_EventEmitter) {
-  function ComponentsManager() {
-    var _this;
-    var components = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _classCallCheck(this, ComponentsManager);
-    _this = _callSuper(this, ComponentsManager);
-    _this.components = components;
-    return _this;
-  }
-  _inherits(ComponentsManager, _EventEmitter);
-  return _createClass(ComponentsManager, [{
-    key: "addComponent",
-    value: function addComponent(name, component) {
-      var namespace = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      return this.addComponents(_defineProperty({}, name, component), namespace);
-    }
-  }, {
-    key: "addComponents",
-    value: function addComponents(components) {
-      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var newComponents = namespace !== null ? Object.keys(components).reduce(function (componentsMaps, name) {
-        return _objectSpread(_objectSpread({}, componentsMaps), {}, _defineProperty({}, "".concat(namespace, ".").concat(name), components[name]));
-      }, {}) : components;
-      this.components = _objectSpread(_objectSpread({}, this.components), newComponents);
-      this.emit('change');
-      return this;
-    }
-  }, {
-    key: "merge",
-    value: function merge(manager) {
-      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      return this.addComponents(manager.getComponents(), namespace);
-    }
-  }, {
-    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]));
-      }, {});
+class ComponentsManager extends EventEmitter {
+  constructor(components = {}) {
+    super();
+    this.components = components;
+  }
+  addComponent(name, component, namespace = null) {
+    return this.addComponents({
+      [name]: component
+    }, namespace);
+  }
+  addComponents(components, namespace = null) {
+    const newComponents = namespace !== null ? Object.keys(components).reduce((componentsMaps, name) => ({
+      ...componentsMaps,
+      [`${namespace}.${name}`]: components[name]
+    }), {}) : components;
+    this.components = {
+      ...this.components,
+      ...newComponents
+    };
+    this.emit('change');
+    return this;
+  }
+  merge(manager, namespace = null) {
+    return this.addComponents(manager.getComponents(), namespace);
+  }
+  addNamespace(namespace) {
+    if (namespace === null) {
       return this;
     }
-  }, {
-    key: "getComponent",
-    value: function getComponent(name) {
-      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var components = this.getComponents(namespace);
-      return getComponentFromName(name, components);
-    }
-  }, {
-    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, "\\.(.*)$"));
-        var matches = pattern.exec(name);
-        return matches !== null ? _objectSpread(_objectSpread({}, componentsMap), {}, _defineProperty({}, matches[1], _this3.components[name])) : componentsMap;
-      }, {}) : this.components;
-    }
-  }, {
-    key: "hasComponent",
-    value: function hasComponent(name) {
-      var namespace = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      return this.components !== null && typeof this.components[namespace !== null ? "".concat(namespace, ".").concat(name) : name] !== 'undefined';
-    }
-  }]);
-}(EventEmitter);
+    this.components = Object.keys(this.components).reduce((componentsMap, name) => ({
+      ...componentsMap,
+      [`${namespace}.${name}`]: this.components[name]
+    }), {});
+    return this;
+  }
+  getComponent(name, namespace = null) {
+    const components = this.getComponents(namespace);
+    return getComponentFromName(name, components);
+  }
+  getComponents(namespace = null) {
+    return namespace !== null ? Object.keys(this.components || {}).reduce((componentsMap, name) => {
+      const pattern = new RegExp(`^${namespace}\\.(.*)$`);
+      const matches = pattern.exec(name);
+      return matches !== null ? {
+        ...componentsMap,
+        [matches[1]]: this.components[name]
+      } : componentsMap;
+    }, {}) : this.components;
+  }
+  hasComponent(name, namespace = null) {
+    return this.components !== null && typeof this.components[namespace !== null ? `${namespace}.${name}` : name] !== 'undefined';
+  }
+}
 
-var DefinitionsManager = /*#__PURE__*/function (_EventEmitter) {
-  function DefinitionsManager() {
-    var _this;
-    var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    _classCallCheck(this, DefinitionsManager);
-    _this = _callSuper(this, DefinitionsManager);
-    _this.definitions = definitions || [];
-    return _this;
-  }
-  _inherits(DefinitionsManager, _EventEmitter);
-  return _createClass(DefinitionsManager, [{
-    key: "addDefinition",
-    value: function addDefinition(definition) {
-      this.addDefinitions(isArray(definition) ? definition : [definition]);
-      return this;
-    }
-  }, {
-    key: "addDefinitions",
-    value: function addDefinitions(definitions) {
-      this.definitions = uniqBy([].concat(_toConsumableArray(definitions), _toConsumableArray(this.definitions)), function (it) {
-        return it.id;
-      });
-      this.emit('change');
-      return this;
-    }
-  }, {
-    key: "merge",
-    value: function merge(manager) {
-      return this.addDefinitions(manager.getDefinitions());
-    }
-  }, {
-    key: "filter",
-    value: function filter(_filter) {
-      // this.definitions = this.definitions.filter(filter);
-      // return this;
-      return new DefinitionsManager(this.definitions.filter(_filter));
-    }
-  }, {
-    key: "getDefinition",
-    value: function getDefinition(id) {
-      if (id === null) {
-        return null;
-      }
-      return this.definitions.find(function (it) {
-        return it.id === id;
-      }) || null;
-    }
-  }, {
-    key: "getDefinitions",
-    value: function getDefinitions() {
-      return this.definitions;
-    }
-  }, {
-    key: "hasDefinition",
-    value: function hasDefinition(id) {
-      return this.getDefinition(id) !== null;
-    }
-  }, {
-    key: "getComponent",
-    value: function getComponent(id) {
-      var _ref = this.getDefinition(id) || {},
-        _ref$component = _ref.component,
-        component = _ref$component === void 0 ? null : _ref$component;
-      return component;
-    }
-  }, {
-    key: "getComponents",
-    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;
-        return component !== null ? _objectSpread(_objectSpread({}, allComponents), {}, _defineProperty({}, id, component)) : allComponents;
-      }, {});
+class DefinitionsManager extends EventEmitter {
+  constructor(definitions = []) {
+    super();
+    this.definitions = definitions || [];
+  }
+  addDefinition(definition) {
+    this.addDefinitions(isArray(definition) ? definition : [definition]);
+    return this;
+  }
+  addDefinitions(definitions) {
+    this.definitions = uniqBy([...definitions, ...this.definitions], it => it.id);
+    this.emit('change');
+    return this;
+  }
+  merge(manager) {
+    return this.addDefinitions(manager.getDefinitions());
+  }
+  filter(filter) {
+    // this.definitions = this.definitions.filter(filter);
+    // return this;
+    return new DefinitionsManager(this.definitions.filter(filter));
+  }
+  getDefinition(id) {
+    if (id === null) {
+      return null;
     }
-  }]);
-}(EventEmitter);
+    return this.definitions.find(it => it.id === id) || null;
+  }
+  getDefinitions() {
+    return this.definitions;
+  }
+  hasDefinition(id) {
+    return this.getDefinition(id) !== null;
+  }
+  getComponent(id) {
+    const {
+      component = null
+    } = this.getDefinition(id) || {};
+    return component;
+  }
+  getComponents() {
+    return this.definitions.reduce((allComponents, {
+      id,
+      component = null
+    }) => component !== null ? {
+      ...allComponents,
+      [id]: component
+    } : allComponents, {});
+  }
+}
 
-var EventsManager = /*#__PURE__*/function (_EventEmitter) {
-  function EventsManager(element) {
-    var _this;
-    _classCallCheck(this, EventsManager);
-    _this = _callSuper(this, EventsManager);
-    _this.element = element;
-    _this.events = {};
-    _this.listeners = {};
-    return _this;
-  }
-  _inherits(EventsManager, _EventEmitter);
-  return _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);
-      }
-    }
-  }, {
-    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);
-      }
+class EventsManager extends EventEmitter {
+  constructor(element) {
+    super();
+    this.element = element;
+    this.events = {};
+    this.listeners = {};
+  }
+  subscribe(event, callback) {
+    this.on(event, callback);
+    this.events = {
+      ...this.events,
+      [event]: [...(this.events[event] || []), callback]
+    };
+    if (this.events[event].length === 1) {
+      this.addEventListener(event);
     }
-  }, {
-    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));
+  }
+  unsubscribe(event, callback) {
+    this.off(event, callback);
+    this.events = Object.keys(this.events).reduce((newEvents, eventName) => {
+      if (eventName !== event) {
+        return {
+          ...newEvents,
+          [eventName]: this.events[eventName]
         };
       }
-      this.element.addEventListener(event, this.listeners[event]);
+      const newListeners = this.events[eventName].filter(listener => listener !== callback);
+      return newListeners.length > 0 ? {
+        ...newEvents,
+        [eventName]: newListeners
+      } : newEvents;
+    }, {});
+    if (typeof this.events[event] === 'undefined') {
+      this.removeEventListener(event);
     }
-  }, {
-    key: "removeEventListener",
-    value: function removeEventListener(event) {
-      this.element.removeEventListener(event, this.listeners[event]);
+  }
+  addEventListener(event) {
+    if (typeof this.listeners[event] === 'undefined') {
+      this.listeners[event] = (...args) => this.emit(event, ...args);
     }
-  }]);
-}(EventEmitter);
+    this.element.addEventListener(event, this.listeners[event]);
+  }
+  removeEventListener(event) {
+    this.element.removeEventListener(event, this.listeners[event]);
+  }
+}
 
-var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
-  function FieldsManager() {
-    _classCallCheck(this, FieldsManager);
-    return _callSuper(this, FieldsManager, arguments);
-  }
-  _inherits(FieldsManager, _DefinitionsManager);
-  return _createClass(FieldsManager, [{
-    key: "filter",
-    value: function filter(_filter) {
-      return new FieldsManager(this.definitions.filter(_filter));
-    }
-  }]);
-}(DefinitionsManager);
+class FieldsManager extends DefinitionsManager {
+  filter(filter) {
+    return new FieldsManager(this.definitions.filter(filter));
+  }
+}
 
-var _excluded$8 = ["medias"],
-  _excluded2$3 = ["medias"];
-var MediasParser = /*#__PURE__*/function () {
-  function MediasParser(_ref) {
-    var fieldsManager = _ref.fieldsManager,
-      screensManager = _ref.screensManager,
-      _ref$fieldsPattern = _ref.fieldsPattern,
-      fieldsPattern = _ref$fieldsPattern === void 0 ? {} : _ref$fieldsPattern;
-    _classCallCheck(this, MediasParser);
+class MediasParser {
+  constructor({
+    fieldsManager,
+    screensManager,
+    fieldsPattern = {}
+  }) {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = fieldsPattern || {};
     this.parsedThemesCache = {};
   }
-  return _createClass(MediasParser, [{
-    key: "getParsedStoryTheme",
-    value: function getParsedStoryTheme(storyId, theme) {
-      if (typeof this.parsedThemesCache[storyId] === 'undefined') {
-        var _this$toPath = this.toPath(theme),
-          themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties(_this$toPath, _excluded$8);
-        this.parsedThemesCache[storyId] = {
-          themeMedias: themeMedias,
-          newTheme: newTheme
-        };
-      }
-      return this.parsedThemesCache[storyId];
+  getParsedStoryTheme(storyId, theme) {
+    if (typeof this.parsedThemesCache[storyId] === 'undefined') {
+      const {
+        medias: themeMedias,
+        ...newTheme
+      } = this.toPath(theme);
+      this.parsedThemesCache[storyId] = {
+        themeMedias,
+        newTheme
+      };
     }
-  }, {
-    key: "getFieldsPatternByScreen",
-    value: function getFieldsPatternByScreen(type) {
-      if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
-        this.fieldsPatternCache[type] = this.getFieldsPattern(fields || []);
-      }
-      return this.fieldsPatternCache[type];
+    return this.parsedThemesCache[storyId];
+  }
+  getFieldsPatternByScreen(type) {
+    if (typeof this.fieldsPatternCache[type] === 'undefined') {
+      const fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
+      this.fieldsPatternCache[type] = this.getFieldsPattern(fields || []);
     }
+    return this.fieldsPatternCache[type];
+  }
 
-    // Convert medias object to path
-  }, {
-    key: "toPath",
-    value: function toPath(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
-      var _ref2 = story || {},
-        _ref2$id = _ref2.id,
-        storyId = _ref2$id === void 0 ? null : _ref2$id,
-        _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 previousComponents = _ref3.components,
-            currentMedias = _ref3.medias;
-          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;
-      if (theme !== null) {
-        var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
-          themeMedias = _this$getParsedStoryT.medias,
-          newTheme = _objectWithoutProperties(_this$getParsedStoryT, _excluded2$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), {}, {
+  // Convert medias object to path
+  toPath(story) {
+    if (story === null) {
+      return story;
+    }
+    const {
+      id: storyId = null,
+      theme = null,
+      components = []
+    } = story || {};
+    const {
+      components: newComponents,
+      medias
+    } = components.reduce(({
+      components: previousComponents,
+      medias: currentMedias
+    }, screen) => {
+      const {
+        type
+      } = screen;
+      const fieldsPattern = this.getFieldsPatternByScreen(type);
+      const {
+        data: newScreen,
+        medias: newMedias
+      } = MediasParser.replaceMediasWithPaths(screen, fieldsPattern);
+      return {
+        components: [...previousComponents, newScreen],
+        medias: {
+          ...currentMedias,
+          ...newMedias
+        }
+      };
+    }, {
+      components: [],
+      medias: null
+    });
+    if (theme !== null) {
+      const {
+        medias: themeMedias,
+        ...newTheme
+      } = this.getParsedStoryTheme(storyId, theme);
+      return medias !== null || themeMedias !== null ? {
+        ...story,
+        theme: newTheme,
         components: newComponents,
-        medias: medias
-      }) : story;
+        medias: {
+          ...themeMedias,
+          ...medias
+        }
+      } : story;
     }
+    return medias !== null ? {
+      ...story,
+      components: newComponents,
+      medias
+    } : story;
+  }
 
-    // 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 _ref4 = story || {},
-        _ref4$theme = _ref4.theme,
-        theme = _ref4$theme === void 0 ? null : _ref4$theme,
-        _ref4$components = _ref4.components,
-        components = _ref4$components === void 0 ? [] : _ref4$components,
-        _ref4$medias = _ref4.medias,
-        medias = _ref4$medias === void 0 ? defaultMedias : _ref4$medias;
-      if (medias === null && theme === null) {
-        return story;
-      }
+  // Convert path to medias object
+  fromPath(story, defaultMedias = null) {
+    if (story === null) {
+      return story;
+    }
+    const {
+      theme = null,
+      components = [],
+      medias = defaultMedias
+    } = story || {};
+    if (medias === null && theme === null) {
+      return story;
+    }
 
-      // Replace path with medias objects
-      // const newComponents =
-      //     medias !== null
-      //         ? components.map((screen) => {
-      //               const { type } = screen;
-      //               const fieldsPattern = this.getFieldsPatternByScreen(type);
-      //               return MediasParser.replacePathsWithMedias(screen, medias, fieldsPattern);
-      //           })
-      //         : components;
+    // Replace path with medias objects
+    // const newComponents =
+    //     medias !== null
+    //         ? components.map((screen) => {
+    //               const { type } = screen;
+    //               const fieldsPattern = this.getFieldsPatternByScreen(type);
+    //               return MediasParser.replacePathsWithMedias(screen, medias, fieldsPattern);
+    //           })
+    //         : components;
 
-      // Faster parsing with data only
-      var componentsPattern = MediasParser.getMediaPatternsFromData(components);
-      var newComponents = medias !== null && componentsPattern.length > 0 ? MediasParser.replacePathsWithMedias(components, medias, componentsPattern) : components;
+    // Faster parsing with data only
+    const componentsPattern = MediasParser.getMediaPatternsFromData(components);
+    const 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), {}, {
-          theme: newTheme,
-          components: newComponents
-        }) : story;
-      }
-      return newComponents !== components ? _objectSpread(_objectSpread({}, story), {}, {
+    // Replace path with medias object in theme
+    if (theme !== null) {
+      const newTheme = this.fromPath(theme, medias);
+      return newTheme !== theme || newComponents !== components ? {
+        ...story,
+        theme: newTheme,
         components: newComponents
-      }) : story;
+      } : story;
     }
-  }, {
-    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;
-        var path = [namePrefix, name].filter(function (it) {
-          return it !== null && it !== '';
-        }).join('\\.');
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
+    return newComponents !== components ? {
+      ...story,
+      components: newComponents
+    } : story;
+  }
+  getFieldsPattern(fields, namePrefix = null) {
+    return (fields || []).reduce((patterns, field) => {
+      const {
+        name = null,
+        type = null
+      } = field;
+      const path = [namePrefix, name].filter(it => it !== null && it !== '').join('\\.');
+      const fieldDefinition = {
+        ...(type !== null ? this.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;
-        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.getFieldsPattern(subFields, path)), _toConsumableArray(_this2.getFieldsPattern(settings, path)), _toConsumableArray(itemsField !== null ? _this2.getFieldsPattern([itemsField], "".concat(path, "\\.[0-9]+")) : []));
-      }, []);
-    }
-  }], [{
-    key: "fieldIsMedia",
-    value: function fieldIsMedia(_ref5) {
-      var _ref5$media = _ref5.media,
-        media = _ref5$media === void 0 ? false : _ref5$media;
-      return media;
-    }
-  }, {
-    key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref6) {
-      var _ref6$id = _ref6.id,
-        id = _ref6$id === void 0 ? null : _ref6$id;
-      return id === 'font-family';
-    }
-  }, {
-    key: "replacePathsWithMedias",
-    value: function replacePathsWithMedias(data, medias, patterns) {
-      var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var dataIsArray = isArray(data);
-      return MediasParser.keys(data).reduce(function (newData, key) {
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, 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 ? [] : {});
-    }
-  }, {
-    key: "getMediaPath",
-    value: function getMediaPath(_ref7) {
-      var _ref7$id = _ref7.id,
-        id = _ref7$id === void 0 ? null : _ref7$id;
-      return id !== null ? "media://".concat(id) : null;
-    }
-  }, {
-    key: "replaceMediasWithPaths",
-    value: function replaceMediasWithPaths(data, patterns) {
-      var medias = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var keyPrefix = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var dataIsArray = isArray(data);
-      var dataKeys = MediasParser.keys(data);
-      return dataKeys.reduce(function (_ref8, key) {
-        var currentData = _ref8.data,
-          currentMedias = _ref8.medias;
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, false);
-        var value = data[key];
-        var newValue;
-        var media = null;
-        var subMedias = null;
-        if (patternMatch && isObject(value)) {
-          var mediaPath = MediasParser.getMediaPath(value);
-          newValue = mediaPath !== null ? mediaPath : value;
-          media = mediaPath !== null ? value : null;
-        } else if (isObject(value) || isArray(value)) {
-          var subReturn = MediasParser.replaceMediasWithPaths(value, patterns, medias, path);
-          newValue = subReturn.data;
-          subMedias = subReturn.medias;
-        } else {
-          newValue = value;
+      // also check settings fields
+      const {
+        fields: subFields = [],
+        itemsField = null,
+        settings = []
+      } = fieldDefinition;
+      return [...patterns, ...(MediasParser.fieldIsMedia(fieldDefinition) ? [new RegExp(`^${path}$`)] : []), ...(MediasParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp(`^${path}\\.media$`), new RegExp(`^${path}\\.variants\\.[0-9]+\\.media$`)] : []), ...this.getFieldsPattern(subFields, path), ...this.getFieldsPattern(settings, path), ...(itemsField !== null ? this.getFieldsPattern([itemsField], `${path}\\.[0-9]+`) : [])];
+    }, []);
+  }
+  static fieldIsMedia({
+    media = false
+  }) {
+    return media;
+  }
+  static fieldIsFontFamily({
+    id = null
+  }) {
+    return id === 'font-family';
+  }
+  static replacePathsWithMedias(data, medias, patterns, keyPrefix = null) {
+    const dataIsArray = isArray(data);
+    return MediasParser.keys(data).reduce((newData, key) => {
+      const path = [keyPrefix, key].filter(it => it !== null).join('.');
+      const patternMatch = patterns.reduce((found, pattern) => found || pattern.test(path), false);
+      const value = data[key];
+      let 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 ? [...newData, newValue] : {
+        ...newData,
+        [key]: newValue
+      };
+    }, dataIsArray ? [] : {});
+  }
+  static getMediaPath({
+    id = null
+  }) {
+    return id !== null ? `media://${id}` : null;
+  }
+  static replaceMediasWithPaths(data, patterns, medias = null, keyPrefix = null) {
+    const dataIsArray = isArray(data);
+    const dataKeys = MediasParser.keys(data);
+    return dataKeys.reduce(({
+      data: currentData,
+      medias: currentMedias
+    }, key) => {
+      const path = [keyPrefix, key].filter(it => it !== null).join('.');
+      const patternMatch = patterns.reduce((found, pattern) => found || pattern.test(path), false);
+      const value = data[key];
+      let newValue;
+      let media = null;
+      let subMedias = null;
+      if (patternMatch && isObject(value)) {
+        const mediaPath = MediasParser.getMediaPath(value);
+        newValue = mediaPath !== null ? mediaPath : value;
+        media = mediaPath !== null ? value : null;
+      } else if (isObject(value) || isArray(value)) {
+        const subReturn = MediasParser.replaceMediasWithPaths(value, patterns, medias, path);
+        newValue = subReturn.data;
+        subMedias = subReturn.medias;
+      } else {
+        newValue = value;
+      }
+      return {
+        data: dataIsArray ? [...(currentData || []), newValue] : {
+          ...currentData,
+          [key]: newValue
+        },
+        medias: media !== null ? {
+          ...currentMedias,
+          ...subMedias,
+          [newValue]: media
+        } : {
+          ...currentMedias,
+          ...subMedias
         }
+      };
+    }, {
+      data: dataKeys.length === 0 ? data : null,
+      medias
+    });
+  }
+  static getMediaPatternsFromData(obj) {
+    const dotObj = MediasParser.dot(obj);
+    return Object.keys(dotObj).filter(key => isString(dotObj[key]) && dotObj[key].match(/^media:\/\/([^/]+)$/) !== null).map(it => new RegExp(`^${it}$`));
+  }
+  static dot(obj) {
+    return MediasParser.keys(obj).reduce((acc, key) => {
+      if (typeof obj[key] !== 'object' || !obj[key]) {
         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)
+          ...acc,
+          [key]: obj[key]
         };
-      }, {
-        data: dataKeys.length === 0 ? data : null,
-        medias: medias
-      });
-    }
-  }, {
-    key: "getMediaPatternsFromData",
-    value: function getMediaPatternsFromData(obj) {
-      var dotObj = MediasParser.dot(obj);
-      return Object.keys(dotObj).filter(function (key) {
-        return isString(dotObj[key]) && dotObj[key].match(/^media:\/\/([^/]+)$/) !== null;
-      }).map(function (it) {
-        return new RegExp("^".concat(it, "$"));
-      });
-    }
-  }, {
-    key: "dot",
-    value: function dot(obj) {
-      return MediasParser.keys(obj).reduce(function (acc, key) {
-        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]));
-        }, {}));
-      }, {});
-    }
-  }, {
-    key: "keys",
-    value: function keys(obj) {
-      return isArray(obj) ? _toConsumableArray(obj.keys()) : Object.keys(obj);
-    }
-  }]);
-}();
-
-var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
-  function ScreensManager() {
-    var _this;
-    var definitions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    _classCallCheck(this, ScreensManager);
-    _this = _callSuper(this, ScreensManager, [definitions]);
-    _this.fieldsPattern = null;
-    return _this;
-  }
-  _inherits(ScreensManager, _DefinitionsManager);
-  return _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;
-      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;
-      return layouts;
-    }
-  }, {
-    key: "getFieldsPattern",
-    value: function getFieldsPattern() {
-      return this.fieldsPattern;
-    }
-  }, {
-    key: "setFieldsPattern",
-    value: function setFieldsPattern(fieldsPattern) {
-      this.fieldsPattern = fieldsPattern;
-    }
-  }, {
-    key: "filter",
-    value: function filter(_filter) {
-      return new ScreensManager(this.definitions.filter(_filter));
-      // this.definitions = this.definitions.filter(filter);
-      // return this;
-    }
-  }, {
-    key: "merge",
-    value: function merge(manager) {
-      var newFieldsPattern = manager.getFieldsPattern();
-      if (newFieldsPattern !== null && this.fieldsPattern === null) {
-        this.fieldsPattern = newFieldsPattern;
       }
-      return this.addDefinitions(manager.getDefinitions());
+      const flattenedChild = MediasParser.dot(obj[key]);
+      return {
+        ...acc,
+        ...MediasParser.keys(flattenedChild).reduce((childAcc, childKey) => ({
+          ...childAcc,
+          [`${key}.${childKey}`]: flattenedChild[childKey]
+        }), {})
+      };
+    }, {});
+  }
+  static keys(obj) {
+    return isArray(obj) ? [...obj.keys()] : Object.keys(obj);
+  }
+}
+
+class ScreensManager extends DefinitionsManager {
+  constructor(definitions = []) {
+    super(definitions);
+    this.fieldsPattern = null;
+  }
+  getFields(id) {
+    const {
+      fields = null
+    } = this.getDefinition(id) || {};
+    return fields;
+  }
+  getLayouts(id) {
+    const {
+      layouts = null
+    } = this.getDefinition(id) || {};
+    return layouts;
+  }
+  getFieldsPattern() {
+    return this.fieldsPattern;
+  }
+  setFieldsPattern(fieldsPattern) {
+    this.fieldsPattern = fieldsPattern;
+  }
+  filter(filter) {
+    return new ScreensManager(this.definitions.filter(filter));
+    // this.definitions = this.definitions.filter(filter);
+    // return this;
+  }
+  merge(manager) {
+    const newFieldsPattern = manager.getFieldsPattern();
+    if (newFieldsPattern !== null && this.fieldsPattern === null) {
+      this.fieldsPattern = newFieldsPattern;
     }
-  }]);
-}(DefinitionsManager);
+    return this.addDefinitions(manager.getDefinitions());
+  }
+}
 
-var _excluded$7 = ["fonts"];
-var FontsParser = /*#__PURE__*/function () {
-  function FontsParser(_ref) {
-    var fieldsManager = _ref.fieldsManager,
-      screensManager = _ref.screensManager,
-      _ref$fieldsPattern = _ref.fieldsPattern,
-      fieldsPattern = _ref$fieldsPattern === void 0 ? {} : _ref$fieldsPattern;
-    _classCallCheck(this, FontsParser);
+class FontsParser {
+  constructor({
+    fieldsManager,
+    screensManager,
+    fieldsPattern = {}
+  }) {
     this.fieldsManager = fieldsManager;
     this.screensManager = screensManager;
     this.fieldsPatternCache = fieldsPattern || {};
   }
-  return _createClass(FontsParser, [{
-    key: "getFieldsPatternByScreen",
-    value: function getFieldsPatternByScreen(type) {
-      if (typeof this.fieldsPatternCache[type] === 'undefined') {
-        var fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
-        this.fieldsPatternCache[type] = this.getFieldsPattern(fields || []);
-      }
-      return this.fieldsPatternCache[type];
+  getFieldsPatternByScreen(type) {
+    if (typeof this.fieldsPatternCache[type] === 'undefined') {
+      const fields = getScreenFieldsWithStates(this.screensManager.getDefinition(type) || {});
+      this.fieldsPatternCache[type] = this.getFieldsPattern(fields || []);
     }
+    return this.fieldsPatternCache[type];
+  }
 
-    // Extract fonts
-  }, {
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
+  // Extract fonts
+  parse(story) {
+    if (story === null) {
+      return story;
+    }
 
-      // Extract fonts from screen
-      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;
-      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 screen
+    const {
+      theme = null,
+      components = []
+    } = story || {};
+    const fonts = uniq(components.reduce((currentFonts, screen) => {
+      const {
+        type
+      } = screen;
+      const fieldsPattern = this.getFieldsPatternByScreen(type);
+      const newFonts = FontsParser.extractFontsWithPaths(screen, fieldsPattern);
+      return newFonts.length > 0 ? [...currentFonts, ...newFonts] : currentFonts;
+    }, []), '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$7);
-        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;
-    }
-  }, {
-    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;
-        var path = [namePrefix, name].filter(function (it) {
-          return it !== null && it !== '';
-        }).join('\\.');
-        var fieldDefinition = _objectSpread(_objectSpread({}, type !== null ? _this2.fieldsManager.getDefinition(type) : null), field);
+    // Extract fonts from theme
+    if (theme !== null) {
+      const {
+        fonts: themeFonts = [],
+        ...newTheme
+      } = this.parse(theme);
+      return fonts.length > 0 || themeFonts.length > 0 ? {
+        ...story,
+        theme: newTheme,
+        fonts: uniq([...themeFonts, ...fonts], 'name')
+      } : story;
+    }
+    return fonts.length > 0 ? {
+      ...story,
+      fonts
+    } : story;
+  }
+  getFieldsPattern(fields, namePrefix = null) {
+    return (fields || []).reduce((patterns, field) => {
+      const {
+        name = null,
+        type = null
+      } = field;
+      const path = [namePrefix, name].filter(it => it !== null && it !== '').join('\\.');
+      const fieldDefinition = {
+        ...(type !== null ? this.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;
-        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]+")) : []));
-      }, []);
-    }
-  }], [{
-    key: "fieldIsFontFamily",
-    value: function fieldIsFontFamily(_ref3) {
-      var _ref3$id = _ref3.id,
-        id = _ref3$id === void 0 ? null : _ref3$id;
-      return id === 'font-family';
-    }
-  }, {
-    key: "valueIsFont",
-    value: function valueIsFont(_ref4) {
-      var _ref4$type = _ref4.type,
-        type = _ref4$type === void 0 ? null : _ref4$type;
-      return type === 'custom' || type === 'google';
-    }
-  }, {
-    key: "extractFontsWithPaths",
-    value: function extractFontsWithPaths(data, patterns) {
-      var keyPrefix = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var dataIsArray = isArray(data);
-      var keys = dataIsArray ? _toConsumableArray(data.keys()) : Object.keys(data);
-      return keys.reduce(function (currentFonts, key) {
-        var path = [keyPrefix, key].filter(function (it) {
-          return it !== null;
-        }).join('.');
-        var patternMatch = patterns.reduce(function (found, pattern) {
-          return found || pattern.test(path);
-        }, false);
-        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;
-      }, []);
-    }
-  }]);
-}();
+      // also check settings fields
+      const {
+        fields: subFields = [],
+        itemsField = null,
+        settings = []
+      } = fieldDefinition;
+      return [...patterns, ...(FontsParser.fieldIsFontFamily(fieldDefinition) ? [new RegExp(`^${path}$`)] : []), ...this.getFieldsPattern(subFields, path), ...this.getFieldsPattern(settings, path), ...(itemsField !== null ? this.getFieldsPattern([itemsField], `${path}\\.[0-9]+`) : [])];
+    }, []);
+  }
+  static fieldIsFontFamily({
+    id = null
+  }) {
+    return id === 'font-family';
+  }
+  static valueIsFont({
+    type = null
+  }) {
+    return type === 'custom' || type === 'google';
+  }
+  static extractFontsWithPaths(data, patterns, keyPrefix = null) {
+    const dataIsArray = isArray(data);
+    const keys = dataIsArray ? [...data.keys()] : Object.keys(data);
+    return keys.reduce((currentFonts, key) => {
+      const path = [keyPrefix, key].filter(it => it !== null).join('.');
+      const patternMatch = patterns.reduce((found, pattern) => found || pattern.test(path), false);
+      const value = data[key];
+      let font = null;
+      let 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 ? [...currentFonts, ...(subFonts || []), ...(font !== null ? [font] : [])] : currentFonts;
+    }, []);
+  }
+}
 
-var _excluded$6 = ["shareIncentive", "callToAction"];
 /* eslint-disable class-methods-use-this */
-var ShareCall = /*#__PURE__*/function () {
-  function ShareCall() {
-    _classCallCheck(this, ShareCall);
-  }
-  return _createClass(ShareCall, [{
-    key: "test",
-    value: function test(screen) {
-      var _ref = screen || {},
-        _ref$shareIncentive = _ref.shareIncentive,
-        shareIncentive = _ref$shareIncentive === void 0 ? null : _ref$shareIncentive,
-        _ref$callToAction = _ref.callToAction,
-        callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction;
-      if (shareIncentive === null && callToAction === null) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "parse",
-    value: function parse(screen) {
-      var _ref2 = screen || {},
-        _ref2$shareIncentive = _ref2.shareIncentive,
-        shareIncentive = _ref2$shareIncentive === void 0 ? null : _ref2$shareIncentive,
-        _ref2$callToAction = _ref2.callToAction,
-        callToAction = _ref2$callToAction === void 0 ? null : _ref2$callToAction,
-        restScreen = _objectWithoutProperties(_ref2, _excluded$6);
-      var _ref3 = screen || {},
-        _ref3$header = _ref3.header,
-        header = _ref3$header === void 0 ? null : _ref3$header,
-        _ref3$footer = _ref3.footer,
-        footer = _ref3$footer === void 0 ? null : _ref3$footer;
+class ShareCall {
+  test(screen) {
+    const {
+      shareIncentive = null,
+      callToAction = null
+    } = screen || {};
+    if (shareIncentive === null && callToAction === null) {
+      return false;
+    }
+    return true;
+  }
+  parse(screen) {
+    const {
+      shareIncentive = null,
+      callToAction = null,
+      ...restScreen
+    } = screen || {};
+    const {
+      header = null,
+      footer = null
+    } = screen || {};
 
-      // Carful for recursivity here cause same key name
-      var newHeader = shareIncentive !== null ? _objectSpread(_objectSpread({}, shareIncentive !== null ? {
-        shareIncentive: shareIncentive
-      } : null), header !== null ? {
-        header: header
-      } : null) : header;
-      var newFooter = callToAction !== null ? _objectSpread(_objectSpread({}, callToAction !== null ? {
-        callToAction: callToAction
-      } : null), footer !== null ? {
-        footer: footer
-      } : null) : footer;
-      var newScreen = _objectSpread(_objectSpread(_objectSpread({}, restScreen), newHeader !== null ? {
+    // Carful for recursivity here cause same key name
+    const newHeader = shareIncentive !== null ? {
+      ...(shareIncentive !== null ? {
+        shareIncentive
+      } : null),
+      ...(header !== null ? {
+        header
+      } : null)
+    } : header;
+    const newFooter = callToAction !== null ? {
+      ...(callToAction !== null ? {
+        callToAction
+      } : null),
+      ...(footer !== null ? {
+        footer
+      } : null)
+    } : footer;
+    const newScreen = {
+      ...restScreen,
+      ...(newHeader !== null ? {
         header: newHeader
-      } : null), newFooter !== null ? {
+      } : null),
+      ...(newFooter !== null ? {
         footer: newFooter
-      } : null);
-      return newScreen;
-    }
-  }]);
-}();
+      } : null)
+    };
+    return newScreen;
+  }
+}
 ShareCall.prototype.priority = 0;
 
-var _excluded$5 = ["answers"],
-  _excluded2$2 = ["customAnswerLabel"];
 /* eslint-disable class-methods-use-this */
-var CustomAnswerLabel = /*#__PURE__*/function () {
-  function CustomAnswerLabel() {
-    _classCallCheck(this, CustomAnswerLabel);
-  }
-  return _createClass(CustomAnswerLabel, [{
-    key: "test",
-    value: function test(screen) {
-      var _ref = screen || {},
-        _ref$answers = _ref.answers,
-        answers = _ref$answers === void 0 ? null : _ref$answers;
-      if (answers === null || answers.length === 0) {
-        return false;
-      }
-      var hasCustomAnswerLabel = (answers || []).some(function () {
-        var answer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-        return answer !== null && typeof answer.customAnswerLabel !== 'undefined';
-      });
-      if (!hasCustomAnswerLabel) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "parse",
-    value: function parse(screen) {
-      var _ref2 = screen || {},
-        _ref2$answers = _ref2.answers,
-        answers = _ref2$answers === void 0 ? null : _ref2$answers,
-        restScreen = _objectWithoutProperties(_ref2, _excluded$5);
-      return _objectSpread(_objectSpread({}, restScreen), {}, {
-        answers: answers.map(function () {
-          var answer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-          if (answer === null || typeof answer.customAnswerLabel === 'undefined') {
-            return answer;
-          }
-          var _ref3 = answer || {},
-            customAnswerLabel = _ref3.customAnswerLabel,
-            restAnswer = _objectWithoutProperties(_ref3, _excluded2$2);
-          return _objectSpread(_objectSpread({}, restAnswer), {}, {
-            result: customAnswerLabel
-          });
-        })
-      });
-    }
-  }]);
-}();
+class CustomAnswerLabel {
+  test(screen) {
+    const {
+      answers = null
+    } = screen || {};
+    if (answers === null || answers.length === 0) {
+      return false;
+    }
+    const hasCustomAnswerLabel = (answers || []).some((answer = null) => answer !== null && typeof answer.customAnswerLabel !== 'undefined');
+    if (!hasCustomAnswerLabel) {
+      return false;
+    }
+    return true;
+  }
+  parse(screen) {
+    const {
+      answers = null,
+      ...restScreen
+    } = screen || {};
+    return {
+      ...restScreen,
+      answers: answers.map((answer = null) => {
+        if (answer === null || typeof answer.customAnswerLabel === 'undefined') {
+          return answer;
+        }
+        const {
+          customAnswerLabel,
+          ...restAnswer
+        } = answer || {};
+        return {
+          ...restAnswer,
+          result: customAnswerLabel
+        };
+      })
+    };
+  }
+}
 CustomAnswerLabel.prototype.priority = 1;
 
-var _excluded$4 = ["items"],
-  _excluded2$1 = ["label", "textStyle"];
-
 /* eslint-disable class-methods-use-this */
-var KeypadItemLabel = /*#__PURE__*/function () {
-  function KeypadItemLabel() {
-    _classCallCheck(this, KeypadItemLabel);
-  }
-  return _createClass(KeypadItemLabel, [{
-    key: "test",
-    value: function test(screen) {
-      var _ref = screen || {},
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? null : _ref$type,
-        _ref$items = _ref.items,
-        items = _ref$items === void 0 ? null : _ref$items;
-      if (type !== 'keypad' || items === null || items.length === 0) {
-        return false;
-      }
-      var hasStringItemLabel = (items || []).some(function () {
-        var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-        return item !== null && isString(item === null || item === void 0 ? void 0 : item.label);
-      });
-      if (!hasStringItemLabel) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "parse",
-    value: function parse(screen) {
-      var _ref2 = screen || {},
-        _ref2$items = _ref2.items,
-        items = _ref2$items === void 0 ? null : _ref2$items,
-        restScreen = _objectWithoutProperties(_ref2, _excluded$4);
-      return _objectSpread(_objectSpread({}, restScreen), {}, {
-        items: items.map(function () {
-          var item = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-          if (item === null || !isString(item === null || item === void 0 ? void 0 : item.label)) {
-            return item;
+class KeypadItemLabel {
+  test(screen) {
+    const {
+      type = null,
+      items = null
+    } = screen || {};
+    if (type !== 'keypad' || items === null || items.length === 0) {
+      return false;
+    }
+    const hasStringItemLabel = (items || []).some((item = null) => item !== null && isString(item?.label));
+    if (!hasStringItemLabel) {
+      return false;
+    }
+    return true;
+  }
+  parse(screen) {
+    const {
+      items = null,
+      ...restScreen
+    } = screen || {};
+    return {
+      ...restScreen,
+      items: items.map((item = null) => {
+        if (item === null || !isString(item?.label)) {
+          return item;
+        }
+        const {
+          label,
+          textStyle,
+          ...restAnswer
+        } = item || {};
+        return {
+          ...restAnswer,
+          label: {
+            body: label,
+            textStyle
           }
-          var _ref3 = item || {},
-            label = _ref3.label,
-            textStyle = _ref3.textStyle,
-            restAnswer = _objectWithoutProperties(_ref3, _excluded2$1);
-          return _objectSpread(_objectSpread({}, restAnswer), {}, {
-            label: {
-              body: label,
-              textStyle: textStyle
-            }
-          });
-        })
-      });
-    }
-  }]);
-}();
+        };
+      })
+    };
+  }
+}
 KeypadItemLabel.prototype.priority = 1;
 
-var _excluded$3 = ["keypadSettings"];
 /* eslint-disable class-methods-use-this */
-var KeypadSettings = /*#__PURE__*/function () {
-  function KeypadSettings() {
-    _classCallCheck(this, KeypadSettings);
-  }
-  return _createClass(KeypadSettings, [{
-    key: "test",
-    value: function test(screen) {
-      var _ref = screen || {},
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? null : _ref$type,
-        _ref$keypadSettings = _ref.keypadSettings,
-        keypadSettings = _ref$keypadSettings === void 0 ? null : _ref$keypadSettings;
-      if (type !== 'keypad' || keypadSettings === null) {
-        return false;
-      }
-      var _ref2 = keypadSettings || {},
-        _ref2$layout = _ref2.layout,
-        keypadSettingsLayout = _ref2$layout === void 0 ? null : _ref2$layout;
-      if (keypadSettingsLayout === null) {
-        return false;
-      }
-      return true;
-    }
-  }, {
-    key: "parse",
-    value: function parse(screen) {
-      var _ref3 = screen || {},
-        _ref3$keypadSettings = _ref3.keypadSettings,
-        keypadSettings = _ref3$keypadSettings === void 0 ? null : _ref3$keypadSettings,
-        restScreen = _objectWithoutProperties(_ref3, _excluded$3);
-      var _ref4 = keypadSettings || {},
-        _ref4$layout = _ref4.layout,
-        keypadSettingsLayout = _ref4$layout === void 0 ? null : _ref4$layout;
-      return _objectSpread(_objectSpread({}, restScreen), {}, {
-        keypadLayout: keypadSettingsLayout
-      });
-    }
-  }]);
-}();
+class KeypadSettings {
+  test(screen) {
+    const {
+      type = null,
+      keypadSettings = null
+    } = screen || {};
+    if (type !== 'keypad' || keypadSettings === null) {
+      return false;
+    }
+    const {
+      layout: keypadSettingsLayout = null
+    } = keypadSettings || {};
+    if (keypadSettingsLayout === null) {
+      return false;
+    }
+    return true;
+  }
+  parse(screen) {
+    const {
+      keypadSettings = null,
+      ...restScreen
+    } = screen || {};
+    const {
+      layout: keypadSettingsLayout = null
+    } = keypadSettings || {};
+    return {
+      ...restScreen,
+      keypadLayout: keypadSettingsLayout
+    };
+  }
+}
 KeypadSettings.prototype.priority = 1;
 
 // export { default as ButtonPadding } from './ButtonPadding';
@@ -1109,16 +917,13 @@ var migrations = /*#__PURE__*/Object.freeze({
     ShareCall: ShareCall
 });
 
-var _excluded$2 = ["components"];
-var MigrationsParser = /*#__PURE__*/function () {
-  function MigrationsParser(_ref) {
-    var screensManager = _ref.screensManager;
-    _classCallCheck(this, MigrationsParser);
+class MigrationsParser {
+  constructor({
+    screensManager
+  }) {
     this.screensManager = screensManager;
-    this.parsers = Object.keys(migrations).map(function (migration) {
-      return new migrations[migration]();
-    });
-    this.parsers.sort(function (a, b) {
+    this.parsers = Object.keys(migrations).map(migration => new migrations[migration]());
+    this.parsers.sort((a, b) => {
       if (a.priority === undefined || b.priority === undefined) {
         return 0;
       }
@@ -1130,572 +935,526 @@ var MigrationsParser = /*#__PURE__*/function () {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  return _createClass(MigrationsParser, [{
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
-      var _ref2 = story || {},
-        _ref2$components = _ref2.components,
-        components = _ref2$components === void 0 ? [] : _ref2$components,
-        restStory = _objectWithoutProperties(_ref2, _excluded$2);
-      var finalComponents = components.reduce(function (currentComponents, screen) {
-        var newScreen = _this.parsers.reduce(function (currentScreen, parser) {
-          if (parser.test(currentScreen, story)) {
-            return parser.parse(currentScreen, story);
-          }
-          return currentScreen;
-        }, screen);
-        return [].concat(_toConsumableArray(currentComponents), [newScreen]);
-      }, []);
-      return _objectSpread(_objectSpread({}, restStory), {}, {
-        components: finalComponents
-      });
-    }
-  }]);
-}();
+  parse(story) {
+    if (story === null) {
+      return story;
+    }
+    const {
+      components = [],
+      ...restStory
+    } = story || {};
+    const finalComponents = components.reduce((currentComponents, screen) => {
+      const newScreen = this.parsers.reduce((currentScreen, parser) => {
+        if (parser.test(currentScreen, story)) {
+          return parser.parse(currentScreen, story);
+        }
+        return currentScreen;
+      }, screen);
+      return [...currentComponents, newScreen];
+    }, []);
+    return {
+      ...restStory,
+      components: finalComponents
+    };
+  }
+}
 
-var _excluded$1 = ["textStyle", "color", "boxStyle"];
-var ThemeParser = /*#__PURE__*/function () {
-  function ThemeParser(_ref) {
-    var screensManager = _ref.screensManager;
-    _classCallCheck(this, ThemeParser);
+class ThemeParser {
+  constructor({
+    screensManager
+  }) {
     this.screensManager = screensManager;
     this.definitionCache = {};
     this.fieldsCache = {};
   }
-  return _createClass(ThemeParser, [{
-    key: "getDefinitionByScreen",
-    value: function getDefinitionByScreen(type, themeComponents) {
-      if (typeof this.definitionCache[type] === 'undefined') {
-        var definition = this.screensManager.getDefinition(type) || {};
-        var themeScreen = themeComponents.find(function (it) {
-          return it.type === type;
-        }) || null;
-        this.definitionCache[type] = {
-          definition: definition,
-          themeScreen: themeScreen
-        };
-      }
-      return this.definitionCache[type];
+  getDefinitionByScreen(type, themeComponents) {
+    if (typeof this.definitionCache[type] === 'undefined') {
+      const definition = this.screensManager.getDefinition(type) || {};
+      const themeScreen = themeComponents.find(it => it.type === type) || null;
+      this.definitionCache[type] = {
+        definition,
+        themeScreen
+      };
     }
-  }, {
-    key: "getFieldsForDefinition",
-    value: function getFieldsForDefinition(definition) {
-      var _ref2 = definition || {},
-        _ref2$id = _ref2.id,
-        definitionId = _ref2$id === void 0 ? null : _ref2$id,
-        _ref2$fields = _ref2.fields,
-        fields = _ref2$fields === void 0 ? [] : _ref2$fields,
-        _ref2$states = _ref2.states,
-        states = _ref2$states === void 0 ? [] : _ref2$states;
-      if (typeof this.fieldsCache[definitionId] === 'undefined') {
-        if (states === null || states.length === 0) {
-          this.fieldsCache[definitionId] = {
-            fields: fields
-          };
-        } else {
-          // TODO: test this
-          var finalFields = fields;
-          var repetableStates = [];
-          if (states !== null && states.length > 0) {
-            var nonRepetableStates = states.filter(function (_ref3) {
-              var _ref3$repeatable = _ref3.repeatable,
-                repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable;
-              return repeatable === false;
-            });
-            repetableStates = states.filter(function (_ref4) {
-              var _ref4$repeatable = _ref4.repeatable,
-                repeatable = _ref4$repeatable === void 0 ? false : _ref4$repeatable;
-              return repeatable === true;
-            });
-            finalFields = nonRepetableStates.reduce(function (acc, it) {
-              var _ref5 = it || {},
-                _ref5$fields = _ref5.fields,
-                itemFields = _ref5$fields === void 0 ? [] : _ref5$fields;
-              if (itemFields !== null && itemFields.length > 0) {
-                return acc.concat(itemFields);
-              }
-              return acc;
-            }, finalFields);
-          }
-          this.fieldsCache[definitionId] = {
-            fields: finalFields,
-            repetableStates: repetableStates
-          };
+    return this.definitionCache[type];
+  }
+  getFieldsForDefinition(definition) {
+    const {
+      id: definitionId = null,
+      fields = [],
+      states = []
+    } = definition || {};
+    if (typeof this.fieldsCache[definitionId] === 'undefined') {
+      if (states === null || states.length === 0) {
+        this.fieldsCache[definitionId] = {
+          fields
+        };
+      } else {
+        // TODO: test this
+        let finalFields = fields;
+        let repetableStates = [];
+        if (states !== null && states.length > 0) {
+          const nonRepetableStates = states.filter(({
+            repeatable = false
+          }) => repeatable === false);
+          repetableStates = states.filter(({
+            repeatable = false
+          }) => repeatable === true);
+          finalFields = nonRepetableStates.reduce((acc, it) => {
+            const {
+              fields: itemFields = []
+            } = it || {};
+            if (itemFields !== null && itemFields.length > 0) {
+              return acc.concat(itemFields);
+            }
+            return acc;
+          }, finalFields);
         }
+        this.fieldsCache[definitionId] = {
+          fields: finalFields,
+          repetableStates
+        };
       }
-      return this.fieldsCache[definitionId];
     }
-  }, {
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      if (story === null) {
-        return story;
-      }
-      var _ref6 = story || {},
-        _ref6$theme = _ref6.theme,
-        theme = _ref6$theme === void 0 ? null : _ref6$theme,
-        _ref6$components = _ref6.components,
-        components = _ref6$components === void 0 ? null : _ref6$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;
-
-      // Speed test
-      // const newComponents = [...components];
-      // for (let index = 0; index < components.length; index += 1) {
-      //     const screen = components[index] || {};
-      //     const { type } = screen;
-      //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
-      //     const newScreen = this.parseScreen(
-      //         definition,
-      //         screen,
-      //         themeScreen,
-      //         themeBackground,
-      //         themeColors,
-      //         themeTextStyles,
-      //         themeBoxStyles,
-      //     );
-
-      //     if (newScreen !== screen || themeScreen !== null) {
-      //         newComponents[index] = {
-      //             ...themeScreen,
-      //             ...newScreen,
-      //         };
-      //     }
-      // }
-      // story.components = newComponents;
-      // return story;
-
-      var newComponents = components.reduce(function (currentComponents, screen, index) {
-        var type = screen.type;
-        var _this$getDefinitionBy = _this.getDefinitionByScreen(type, themeComponents),
-          definition = _this$getDefinitionBy.definition;
-        var themeScreen = null;
-        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), {}, {
-        components: newComponents
-      }) : story;
-    }
-  }, {
-    key: "parseScreen",
-    value: function parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this2 = this;
-      var _this$getFieldsForDef = this.getFieldsForDefinition(definition),
-        _this$getFieldsForDef2 = _this$getFieldsForDef.fields,
-        fields = _this$getFieldsForDef2 === void 0 ? null : _this$getFieldsForDef2,
-        _this$getFieldsForDef3 = _this$getFieldsForDef.repetableStates,
-        repetableStates = _this$getFieldsForDef3 === void 0 ? null : _this$getFieldsForDef3;
-      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 repetableState = null;
-        if (repetableStates !== null && repetableStates.length > 0) {
-          repetableState = repetableStates.find(function (_ref7) {
-            var _ref7$id = _ref7.id,
-              stateId = _ref7$id === void 0 ? null : _ref7$id;
-            return stateId !== null && stateId === key;
-          }) || null;
-        }
-        var fieldDefinition = (fields || null).find(function (it) {
-          return it.name === key;
-        }) || repetableState || {};
-        var fieldValue = value[key];
-        var fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
-
-        // Try for early return
-        var _ref8 = fieldDefinition || {},
-          _ref8$theme = _ref8.theme,
-          theme = _ref8$theme === void 0 ? null : _ref8$theme;
-        if ((theme === null || !isObject(theme)) && fields === null) {
-          return _objectSpread(_objectSpread({}, currentValue), {}, _defineProperty({}, key, fieldValue));
-        }
-
-        // console.log('start', key, fieldValue);
-        var newFieldValue = _this2.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
-        // console.log('result', newFieldValue);
+    return this.fieldsCache[definitionId];
+  }
+  parse(story) {
+    if (story === null) {
+      return story;
+    }
+    const {
+      theme = null,
+      components = null
+    } = story || {};
+    if (theme === null || components === null) {
+      return story;
+    }
+    const {
+      components: themeComponents = [],
+      background: themeBackground = null,
+      colors: themeColors = {},
+      textStyles: themeTextStyles = null,
+      boxStyles: themeBoxStyles = null
+    } = theme;
 
-        // const newFieldValue = fieldValue;
+    // Speed test
+    // const newComponents = [...components];
+    // for (let index = 0; index < components.length; index += 1) {
+    //     const screen = components[index] || {};
+    //     const { type } = screen;
+    //     const { definition, themeScreen } = this.getDefinitionByScreen(type, themeComponents);
+    //     const newScreen = this.parseScreen(
+    //         definition,
+    //         screen,
+    //         themeScreen,
+    //         themeBackground,
+    //         themeColors,
+    //         themeTextStyles,
+    //         themeBoxStyles,
+    //     );
 
-        // 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;
-    }
+    //     if (newScreen !== screen || themeScreen !== null) {
+    //         newComponents[index] = {
+    //             ...themeScreen,
+    //             ...newScreen,
+    //         };
+    //     }
+    // }
+    // story.components = newComponents;
+    // return story;
 
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "parseField",
-    value: function parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this3 = this;
-      var _fieldDefinition$them = fieldDefinition.theme,
-        fieldTheme = _fieldDefinition$them === void 0 ? null : _fieldDefinition$them,
-        _fieldDefinition$fiel = fieldDefinition.fields,
-        definitionFields = _fieldDefinition$fiel === void 0 ? null : _fieldDefinition$fiel;
+    const newComponents = components.reduce((currentComponents, screen, index) => {
+      const {
+        type
+      } = screen;
+      const {
+        definition /* themeScreen */
+      } = this.getDefinitionByScreen(type, themeComponents);
+      const themeScreen = null;
+      const newScreen = this.parseScreen(definition, screen, themeScreen, themeBackground, themeColors, themeTextStyles, themeBoxStyles);
 
-      // There are sub-fields in this definition
-      if (definitionFields !== null && value !== null) {
-        return isArray(value) ? value.map(function (innerFieldValue) {
-          if (innerFieldValue === null) {
-            return innerFieldValue;
-          }
-          return _this3.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
-        }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      // Only switch screen if it has changed
+      return newScreen !== screen || themeScreen !== null ? [...currentComponents.slice(0, index), {
+        ...themeScreen,
+        ...newScreen
+      }, ...currentComponents.slice(index + 1)] : currentComponents;
+    }, components);
+    return newComponents !== components ? {
+      ...story,
+      components: newComponents
+    } : story;
+  }
+  parseScreen(definition, value, themeValue, themeBackground, themeColors, themeTextStyles, themeBoxStyles) {
+    const {
+      fields = null,
+      repetableStates = null
+    } = this.getFieldsForDefinition(definition);
+    const newThemeValue = themeValue === null && themeBackground !== null ? {} : themeValue;
+    if (themeBackground !== null && typeof newThemeValue.background !== 'undefined') {
+      newThemeValue.background = {
+        ...themeBackground,
+        ...newThemeValue.background
+      };
+    } else if (themeBackground !== null) {
+      newThemeValue.background = themeBackground;
+    }
+    const newScreenValue = Object.keys(value).reduce((currentValue, key) => {
+      let repetableState = null;
+      if (repetableStates !== null && repetableStates.length > 0) {
+        repetableState = repetableStates.find(({
+          id: stateId = null
+        }) => stateId !== null && stateId === key) || null;
       }
+      const fieldDefinition = (fields || null).find(it => it.name === key) || repetableState || {};
+      const fieldValue = value[key];
+      const fieldThemeValue = newThemeValue !== null ? newThemeValue[key] || null : null;
 
-      // Early return
-      if (fieldTheme === null || !isObject(fieldTheme)) {
-        return value;
+      // Try for early return
+      const {
+        theme = null
+      } = fieldDefinition || {};
+      if ((theme === null || !isObject(theme)) && fields === null) {
+        return {
+          ...currentValue,
+          [key]: fieldValue
+        };
       }
 
-      // @TODO very slooow...
-      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 _ref9 = fieldTheme[innerFieldName] || {},
-              _ref9$textStyle = _ref9.textStyle,
-              innerFieldTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle,
-              _ref9$color = _ref9.color,
-              innerFieldColor = _ref9$color === void 0 ? null : _ref9$color,
-              _ref9$boxStyle = _ref9.boxStyle,
-              innerFieldBoxStyle = _ref9$boxStyle === void 0 ? null : _ref9$boxStyle;
+      // console.log('start', key, fieldValue);
+      const newFieldValue = this.parseField(fieldValue, fieldDefinition, fieldThemeValue, themeColors, themeTextStyles, themeBoxStyles);
+      // console.log('result', newFieldValue);
 
-            // Early return, no theme
-            if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
-              return newInnerField;
-            }
-            var _ref0 = innerField[innerFieldName] || {},
-              _ref0$textStyle = _ref0.textStyle,
-              valueTextStyle = _ref0$textStyle === void 0 ? false : _ref0$textStyle,
-              _ref0$boxStyle = _ref0.boxStyle,
-              valueBoxStyle = _ref0$boxStyle === void 0 ? false : _ref0$boxStyle;
+      // const newFieldValue = fieldValue;
 
-            // Color
-            var colorValue = innerFieldColor !== null ? {
-              color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
-            } : null;
-
-            // Text style
-            var textStyleValue = innerFieldTextStyle !== null ? {
-              textStyle: valueTextStyle !== false ? valueTextStyle : _objectSpread(_objectSpread({}, innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null), valueTextStyle)
-            } : null;
-            var boxStyleValue = innerFieldBoxStyle !== null ? {
-              boxStyle: valueBoxStyle !== false ? valueBoxStyle : _objectSpread(_objectSpread({}, innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null), valueBoxStyle)
-            } : 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;
-    }
-  }, {
-    key: "parseInnerFields",
-    value: function parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this4 = this;
-      var newValue = Object.keys(value).reduce(function (finalValue, innerFieldName) {
-        var innerDefinition = isArray(fieldsOrDefinition) ? fieldsOrDefinition.find(function (it) {
-          return it.name === innerFieldName;
-        }) || null : fieldsOrDefinition;
-        var _ref1 = innerDefinition || {},
-          _ref1$theme = _ref1.theme,
-          idfTheme = _ref1$theme === void 0 ? null : _ref1$theme;
-        var innerValue = value[innerFieldName];
+      // Only switch field if it has changed
+      return newFieldValue !== fieldValue ? {
+        ...currentValue,
+        [key]: newFieldValue
+      } : currentValue;
+    }, value);
+    return newThemeValue !== null ? {
+      ...newThemeValue,
+      ...newScreenValue
+    } : newScreenValue;
+  }
 
-        // For items fields
-        if (innerValue !== null && innerDefinition !== null && isArray(innerValue)) {
-          // eslint-disable-next-line no-param-reassign
-          finalValue[innerFieldName] = _this4.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
-          return finalValue;
-        }
+  // eslint-disable-next-line class-methods-use-this
+  parseField(value, fieldDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    const {
+      theme: fieldTheme = null,
+      fields: definitionFields = null
+    } = fieldDefinition;
 
-        // For fields with fields
-        if (innerValue !== null && idfTheme !== null && isObject(idfTheme) && isObject(innerValue)) {
-          // eslint-disable-next-line no-param-reassign
-          finalValue[innerFieldName] = _this4.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
-          return finalValue;
+    // There are sub-fields in this definition
+    if (definitionFields !== null && value !== null) {
+      return isArray(value) ? value.map(innerFieldValue => {
+        if (innerFieldValue === null) {
+          return innerFieldValue;
         }
+        return this.parseInnerFields(innerFieldValue, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+      }) : this.parseInnerFields(value, definitionFields, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+    }
 
-        // eslint-disable-next-line no-param-reassign
-        finalValue[innerFieldName] = value[innerFieldName];
-        return finalValue;
-      }, {});
-      return newValue;
+    // Early return
+    if (fieldTheme === null || !isObject(fieldTheme)) {
+      return value;
     }
 
-    // eslint-disable-next-line class-methods-use-this
-  }, {
-    key: "parseValue",
-    value: function parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
-      var _this5 = this;
-      if (isObject(initialValue) || isObject(fieldTheme)) {
-        var value = initialValue || null;
-        var _ref10 = fieldTheme || {},
-          _ref10$textStyle = _ref10.textStyle,
-          fieldTextStyleName = _ref10$textStyle === void 0 ? null : _ref10$textStyle,
-          _ref10$color = _ref10.color,
-          fieldColorName = _ref10$color === void 0 ? null : _ref10$color,
-          _ref10$boxStyle = _ref10.boxStyle,
-          fieldBoxStyleName = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle,
-          otherProps = _objectWithoutProperties(_ref10, _excluded$1);
-        if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
-          return value;
+    // @TODO very slooow...
+    if (isArray(value)) {
+      const newFieldValue = value.map(innerField => innerField !== null ? Object.keys(innerField).reduce((newInnerField, innerFieldName) => {
+        // Early return
+        if (!isObject(innerField[innerFieldName])) {
+          return newInnerField;
         }
-        var complexValue = null;
-        if (!isEmpty(otherProps)) {
-          complexValue = Object.keys(otherProps).reduce(function (newObject, key) {
-            var innerValue = value !== null ? value[key] || null : null;
-            var newValue = _this5.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
-            return _objectSpread(_objectSpread({}, newObject), newValue !== null ? _defineProperty({}, key, newValue) : null);
-          }, {});
+        const {
+          textStyle: innerFieldTextStyle = null,
+          color: innerFieldColor = null,
+          boxStyle: innerFieldBoxStyle = null
+        } = fieldTheme[innerFieldName] || {};
+
+        // Early return, no theme
+        if (innerFieldTextStyle === null && innerFieldColor === null && innerFieldBoxStyle === null) {
+          return newInnerField;
         }
-        var _ref12 = value || {},
-          _ref12$textStyle = _ref12.textStyle,
-          valueTextStyle = _ref12$textStyle === void 0 ? false : _ref12$textStyle,
-          _ref12$boxStyle = _ref12.boxStyle,
-          valueBoxStyle = _ref12$boxStyle === void 0 ? false : _ref12$boxStyle;
+        const {
+          textStyle: valueTextStyle = false,
+          boxStyle: valueBoxStyle = false
+        } = innerField[innerFieldName] || {};
 
         // Color
-        var fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
-        var colorValue = fieldColor !== null ? {
-          color: fieldColor
+        const colorValue = innerFieldColor !== null ? {
+          color: innerFieldColor !== null && themeColors !== null ? themeColors[innerFieldColor] || null : null
         } : 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: valueTextStyle !== false ? valueTextStyle : _objectSpread(_objectSpread(_objectSpread({}, fieldTextStyle), fieldThemeComponentTextStyle), valueTextStyle || null)
+        const textStyleValue = innerFieldTextStyle !== null ? {
+          textStyle: valueTextStyle !== false ? valueTextStyle : {
+            ...(innerFieldTextStyle !== null && themeTextStyles !== null ? themeTextStyles[innerFieldTextStyle] || null : null),
+            ...valueTextStyle
+          }
         } : 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: valueBoxStyle !== false ? valueBoxStyle : _objectSpread(_objectSpread(_objectSpread({}, fieldBoxStyle), fieldThemeComponentBoxStyle), valueBoxStyle || null)
+        const boxStyleValue = innerFieldBoxStyle !== null ? {
+          boxStyle: valueBoxStyle !== false ? valueBoxStyle : {
+            ...(innerFieldBoxStyle !== null && themeBoxStyles !== null ? themeBoxStyles[innerFieldBoxStyle] || null : null),
+            ...valueBoxStyle
+          }
         } : null;
+        if (colorValue === null && textStyleValue === null && boxStyleValue === null) {
+          return newInnerField;
+        }
+        return {
+          ...newInnerField,
+          [innerFieldName]: {
+            ...colorValue,
+            ...innerField[innerFieldName],
+            ...textStyleValue,
+            ...boxStyleValue
+          }
+        };
+      }, innerField) : innerField);
+      return newFieldValue;
+    }
+    if (isObject(value)) {
+      return this.parseValue(value, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+    }
+    return value;
+  }
+  parseInnerFields(value, fieldsOrDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    const newValue = Object.keys(value).reduce((finalValue, innerFieldName) => {
+      const innerDefinition = isArray(fieldsOrDefinition) ? fieldsOrDefinition.find(it => it.name === innerFieldName) || null : fieldsOrDefinition;
+      const {
+        theme: idfTheme = null
+      } = innerDefinition || {};
+      const innerValue = value[innerFieldName];
 
-        // 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;
+      // For items fields
+      if (innerValue !== null && innerDefinition !== null && isArray(innerValue)) {
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = this.parseField(innerValue, innerDefinition, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        return finalValue;
       }
-      return initialValue;
-    }
-  }]);
-}();
 
-var StoryParser = /*#__PURE__*/function () {
-  function StoryParser(_ref) {
-    var screensManager = _ref.screensManager,
-      fieldsManager = _ref.fieldsManager,
-      fieldsPattern = _ref.fieldsPattern;
-    _classCallCheck(this, StoryParser);
-    var _ref2 = fieldsPattern || {},
-      _ref2$medias = _ref2.medias,
-      mediasPattern = _ref2$medias === void 0 ? null : _ref2$medias,
-      _ref2$fonts = _ref2.fonts,
-      fontsPattern = _ref2$fonts === void 0 ? null : _ref2$fonts;
+      // For fields with fields
+      if (innerValue !== null && idfTheme !== null && isObject(idfTheme) && isObject(innerValue)) {
+        // eslint-disable-next-line no-param-reassign
+        finalValue[innerFieldName] = this.parseValue(innerValue, idfTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles);
+        return finalValue;
+      }
+
+      // eslint-disable-next-line no-param-reassign
+      finalValue[innerFieldName] = value[innerFieldName];
+      return finalValue;
+    }, {});
+    return newValue;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  parseValue(initialValue, fieldTheme, themeValue, themeColors, themeTextStyles, themeBoxStyles) {
+    if (isObject(initialValue) || isObject(fieldTheme)) {
+      const value = initialValue || null;
+      const {
+        textStyle: fieldTextStyleName = null,
+        color: fieldColorName = null,
+        boxStyle: fieldBoxStyleName = null,
+        ...otherProps
+      } = fieldTheme || {};
+      if (fieldTextStyleName === null && fieldColorName === null && fieldBoxStyleName === null && isEmpty(otherProps) && !isObject(fieldTheme)) {
+        return value;
+      }
+      let complexValue = null;
+      if (!isEmpty(otherProps)) {
+        complexValue = Object.keys(otherProps).reduce((newObject, key) => {
+          const innerValue = value !== null ? value[key] || null : null;
+          const newValue = this.parseValue(innerValue, otherProps[key], themeValue, themeColors, themeTextStyles, themeBoxStyles);
+          return {
+            ...newObject,
+            ...(newValue !== null ? {
+              [key]: newValue
+            } : null)
+          };
+        }, {});
+      }
+      const {
+        textStyle: valueTextStyle = false,
+        boxStyle: valueBoxStyle = false
+      } = value || {};
+
+      // Color
+      const fieldColor = fieldColorName !== null && themeColors !== null ? themeColors[fieldColorName] || null : null;
+      const colorValue = fieldColor !== null ? {
+        color: fieldColor
+      } : null;
+
+      // Text style
+      const fieldTextStyle = fieldTextStyleName !== null && themeTextStyles !== null ? themeTextStyles[fieldTextStyleName] || null : null;
+      const fieldThemeComponentTextStyle = themeValue !== null ? themeValue.textStyle || null : null;
+      const textStyleValue = fieldTextStyle !== null || fieldThemeComponentTextStyle !== null ? {
+        textStyle: valueTextStyle !== false ? valueTextStyle : {
+          ...fieldTextStyle,
+          ...fieldThemeComponentTextStyle,
+          ...(valueTextStyle || null)
+        }
+      } : null;
+
+      // Box style
+      const fieldBoxStyle = fieldBoxStyleName !== null && themeBoxStyles !== null ? themeBoxStyles[fieldBoxStyleName] || null : null;
+      const fieldThemeComponentBoxStyle = themeValue !== null ? themeValue.boxStyle || null : null;
+      const boxStyleValue = fieldBoxStyle !== null || fieldThemeComponentBoxStyle !== null ? {
+        boxStyle: valueBoxStyle !== false ? valueBoxStyle : {
+          ...fieldBoxStyle,
+          ...fieldThemeComponentBoxStyle,
+          ...(valueBoxStyle || null)
+        }
+      } : null;
+
+      // Only change value if something is overrided
+      return colorValue !== null || themeValue !== null || textStyleValue !== null || boxStyleValue !== null || complexValue !== null ? {
+        ...colorValue,
+        ...themeValue,
+        ...value,
+        ...boxStyleValue,
+        ...textStyleValue,
+        ...complexValue
+      } : value;
+    }
+    return initialValue;
+  }
+}
+
+class StoryParser {
+  constructor({
+    screensManager,
+    fieldsManager,
+    fieldsPattern
+  }) {
+    const {
+      medias: mediasPattern = null,
+      fonts: fontsPattern = null
+    } = fieldsPattern || {};
     this.themeParser = new ThemeParser({
-      screensManager: screensManager
+      screensManager
     });
     this.mediasParser = new MediasParser({
-      screensManager: screensManager,
-      fieldsManager: fieldsManager,
+      screensManager,
+      fieldsManager,
       fieldsPattern: mediasPattern
     });
     this.fontsParser = new FontsParser({
-      screensManager: screensManager,
-      fieldsManager: fieldsManager,
+      screensManager,
+      fieldsManager,
       fieldsPattern: fontsPattern
     });
     this.migrationsParser = new MigrationsParser({
-      screensManager: screensManager
+      screensManager
     });
   }
-  return _createClass(StoryParser, [{
-    key: "parse",
-    value: function parse(story) {
-      var _this = this;
-      var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        _ref3$withTheme = _ref3.withTheme,
-        withTheme = _ref3$withTheme === void 0 ? true : _ref3$withTheme,
-        _ref3$withMedias = _ref3.withMedias,
-        withMedias = _ref3$withMedias === void 0 ? true : _ref3$withMedias,
-        _ref3$withFonts = _ref3.withFonts,
-        withFonts = _ref3$withFonts === void 0 ? true : _ref3$withFonts,
-        _ref3$withMigrations = _ref3.withMigrations,
-        withMigrations = _ref3$withMigrations === void 0 ? true : _ref3$withMigrations;
-      if (story === null) {
-        return story;
-      }
-      var parsers = [[withMedias, function (newStory) {
-        return _this.mediasParser.fromPath(newStory);
-      }], [withTheme, function (newStory) {
-        return _this.themeParser.parse(newStory);
-      }], [withFonts, function (newStory) {
-        return _this.fontsParser.parse(newStory);
-      }], [withMigrations, function (newStory) {
-        return _this.migrationsParser.parse(newStory);
-      }]];
-      return parsers.reduce(function (parsedStory, _ref4) {
-        var _ref5 = _slicedToArray(_ref4, 2),
-          enabled = _ref5[0],
-          parse = _ref5[1];
-        return enabled ? parse(parsedStory) : parsedStory;
-      }, story);
-    }
-  }]);
-}();
+  parse(story, {
+    withTheme = true,
+    withMedias = true,
+    withFonts = true,
+    withMigrations = true
+  } = {}) {
+    if (story === null) {
+      return story;
+    }
+    const parsers = [[withMedias, newStory => this.mediasParser.fromPath(newStory)], [withTheme, newStory => this.themeParser.parse(newStory)], [withFonts, newStory => this.fontsParser.parse(newStory)], [withMigrations, newStory => this.migrationsParser.parse(newStory)]];
+    return parsers.reduce((parsedStory, [enabled, parse]) => enabled ? parse(parsedStory) : parsedStory, story);
+  }
+}
 
-var _excluded = ["value"],
-  _excluded2 = ["value", "currentTime"];
-var Tracking = /*#__PURE__*/function (_BaseTracking) {
-  function Tracking() {
-    var _this;
-    var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    _classCallCheck(this, Tracking);
-    _this = _callSuper(this, Tracking, [opts]);
-    _this.screensViewed = [];
-    return _this;
-  }
-  _inherits(Tracking, _BaseTracking);
-  return _createClass(Tracking, [{
-    key: "trackScreenView",
-    value: function trackScreenView(screen, screenIndex) {
-      var _ref = this.variables || {},
-        _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 ? null : _ref2$metadata,
-        _ref2$parameters = _ref2.parameters,
-        _ref2$parameters2 = _ref2$parameters === void 0 ? {} : _ref2$parameters,
-        parametersMetadata = _ref2$parameters2.metadata;
-      var _ref3 = metadata || parametersMetadata || {},
-        screenTitle = _ref3.title,
-        screenDescrition = _ref3.description;
-      if (this.screensViewed.indexOf(screenId || screenIndex) === -1) {
-        this.screensViewed = [].concat(_toConsumableArray(this.screensViewed), [screenId || screenIndex]);
-      }
-      var data = {
-        event: 'screenView',
-        screenId: screenId,
-        screenType: screenType,
-        screenIndex: screenIndex,
-        screenTitle: screenTitle,
-        screenDescrition: screenDescrition,
-        screenProgress: screensCount !== null && screenIndex !== null ? (screenIndex + 1) / screensCount : null,
-        screensViewed: this.screensViewed,
-        screensViewedProgress: screensCount !== null ? this.screensViewed.length / screensCount : null
-      };
-      this.push(data);
-    }
-  }, {
-    key: "trackEvent",
-    value: function trackEvent() {
-      var category = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var label = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var _ref4 = opts || {},
-        _ref4$value = _ref4.value,
-        value = _ref4$value === void 0 ? null : _ref4$value,
-        otherOpts = _objectWithoutProperties(_ref4, _excluded);
-      var data = _objectSpread(_objectSpread({}, otherOpts || null), {}, {
-        event: 'eventInteraction',
-        eventCategory: category,
-        eventAction: action,
-        eventLabel: label,
-        eventValue: value
-      });
-      this.push(data);
-    }
-  }, {
-    key: "trackMedia",
-    value: function trackMedia() {
-      var type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      var media = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var action = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-      var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var _ref5 = opts || {},
-        _ref5$value = _ref5.value,
-        value = _ref5$value === void 0 ? null : _ref5$value,
-        _ref5$currentTime = _ref5.currentTime,
-        optsCurrentTime = _ref5$currentTime === void 0 ? null : _ref5$currentTime,
-        otherOpts = _objectWithoutProperties(_ref5, _excluded2);
-      var _ref6 = media || {},
-        _ref6$id = _ref6.id,
-        mediaId = _ref6$id === void 0 ? null : _ref6$id,
-        _ref6$url = _ref6.url,
-        mediaUrl = _ref6$url === void 0 ? null : _ref6$url,
-        _ref6$name = _ref6.name,
-        mediaName = _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;
-      var data = _objectSpread(_objectSpread({}, otherOpts || null), {}, {
-        event: 'eventInteraction',
-        eventCategory: type,
-        eventAction: action,
-        eventLabel: mediaName || mediaUrl,
-        eventValue: value,
-        mediaId: mediaId,
-        mediaUrl: mediaUrl,
-        mediaName: mediaName
-      });
-      if (duration !== null) {
-        data.mediaDuration = Math.round(duration);
-      }
-      if (currentTime !== null) {
-        data.mediaCurrentTime = Math.round(currentTime);
-      }
-      if (currentTime !== null && duration !== null && duration > 0) {
-        data.mediaProgress = currentTime / duration;
-      }
-      this.push(data);
-    }
-  }]);
-}(Tracking$1);
+/* eslint-disable no-console */
+class Tracking extends Tracking$1 {
+  constructor(opts = {}) {
+    super(opts);
+    this.screensViewed = [];
+  }
+  trackScreenView(screen, screenIndex) {
+    const {
+      screensCount = null
+    } = this.variables || {};
+    const {
+      id: screenId = null,
+      type: screenType = null,
+      metadata = null,
+      parameters: {
+        metadata: parametersMetadata
+      } = {}
+    } = screen || {};
+    const {
+      title: screenTitle,
+      description: screenDescrition
+    } = metadata || parametersMetadata || {};
+    if (this.screensViewed.indexOf(screenId || screenIndex) === -1) {
+      this.screensViewed = [...this.screensViewed, screenId || screenIndex];
+    }
+    const data = {
+      event: 'screenView',
+      screenId,
+      screenType,
+      screenIndex,
+      screenTitle,
+      screenDescrition,
+      screenProgress: screensCount !== null && screenIndex !== null ? (screenIndex + 1) / screensCount : null,
+      screensViewed: this.screensViewed,
+      screensViewedProgress: screensCount !== null ? this.screensViewed.length / screensCount : null
+    };
+    this.push(data);
+  }
+  trackEvent(category = null, action = null, label = null, opts = null) {
+    const {
+      value = null,
+      ...otherOpts
+    } = opts || {};
+    const data = {
+      ...(otherOpts || null),
+      event: 'eventInteraction',
+      eventCategory: category,
+      eventAction: action,
+      eventLabel: label,
+      eventValue: value
+    };
+    this.push(data);
+  }
+  trackMedia(type = null, media = null, action = null, opts = null) {
+    const {
+      value = null,
+      currentTime: optsCurrentTime = null,
+      ...otherOpts
+    } = opts || {};
+    const {
+      id: mediaId = null,
+      url: mediaUrl = null,
+      name: mediaName = null,
+      duration: rootDuration = null,
+      currentTime = optsCurrentTime,
+      metadata = {}
+    } = media || {};
+    const {
+      duration = rootDuration
+    } = metadata || {};
+    const data = {
+      ...(otherOpts || null),
+      event: 'eventInteraction',
+      eventCategory: type,
+      eventAction: action,
+      eventLabel: mediaName || mediaUrl,
+      eventValue: value,
+      mediaId,
+      mediaUrl,
+      mediaName
+    };
+    if (duration !== null) {
+      data.mediaDuration = Math.round(duration);
+    }
+    if (currentTime !== null) {
+      data.mediaCurrentTime = Math.round(currentTime);
+    }
+    if (currentTime !== null && duration !== null && duration > 0) {
+      data.mediaProgress = currentTime / duration;
+    }
+    this.push(data);
+  }
+}
 
 export { ColorsParser, ComponentsManager, DefinitionsManager, EventsManager, FieldsManager, FontsParser, MediasParser, ScreensManager, StoryParser, ThemeParser, Tracking };