@micromag/core 0.4.69 → 0.4.74

package/es/utils.js

@@ -2,28 +2,17 @@ import isString from 'lodash/isString';
 import isNumber from 'lodash/isNumber';
 import { kebabCase, pascalCase, snakeCase } from 'change-case';
 export { camelCase, pascalCase, snakeCase } from 'change-case';
-import _regenerator from '@babel/runtime/helpers/regenerator';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import isObject from 'lodash/isObject';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import tinycolor from 'tinycolor2';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import isArray from 'lodash/isArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import slugify from 'slugify';
 
 function addNonBreakingSpaces(text) {
   return isString(text) ? text.replace(/«\s/g, '« ').replace(/\s»/g, ' »').replace(/\s:\s/g, ' : ') : text;
 }
 
-var convertStyleToString = function convertStyleToString(style) {
-  return style !== null ? Object.keys(style).map(function (key) {
-    return "".concat(kebabCase(key), ":").concat(isNumber(style[key]) ? "".concat(style[key], "px") : style[key], ";");
-  }).join('\n') : '';
-};
+const convertStyleToString = style => style !== null ? Object.keys(style).map(key => `${kebabCase(key)}:${isNumber(style[key]) ? `${style[key]}px` : style[key]};`).join('\n') : '';
 
 /*! clipboard-copy. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
@@ -33,143 +22,82 @@ var convertStyleToString = function convertStyleToString(style) {
 function makeError() {
   return new DOMException('The request is not allowed', 'NotAllowedError');
 }
-function copyClipboardApi(_x) {
-  return _copyClipboardApi.apply(this, arguments);
-}
-function _copyClipboardApi() {
-  _copyClipboardApi = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(text) {
-    return _regenerator().w(function (_context) {
-      while (1) switch (_context.n) {
-        case 0:
-          if (navigator.clipboard) {
-            _context.n = 1;
-            break;
-          }
-          throw makeError();
-        case 1:
-          return _context.a(2, navigator.clipboard.writeText(text));
-      }
-    }, _callee);
-  }));
-  return _copyClipboardApi.apply(this, arguments);
-}
-function copyExecCommand(_x2) {
-  return _copyExecCommand.apply(this, arguments);
-}
-function _copyExecCommand() {
-  _copyExecCommand = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(text) {
-    var span, selection, range, success;
-    return _regenerator().w(function (_context2) {
-      while (1) switch (_context2.n) {
-        case 0:
-          // Put the text to copy into a <span>
-          span = document.createElement('span');
-          span.textContent = text;
-
-          // Preserve consecutive spaces and newlines
-          span.style.whiteSpace = 'pre';
-          span.style.webkitUserSelect = 'auto';
-          span.style.userSelect = 'all';
-
-          // Add the <span> to the page
-          document.body.appendChild(span);
-
-          // Make a selection object representing the range of text selected by the user
-          selection = window.getSelection();
-          range = window.document.createRange();
-          selection.removeAllRanges();
-          range.selectNode(span);
-          selection.addRange(range);
-
-          // Copy text to the clipboard
-          success = false;
-          try {
-            success = window.document.execCommand('copy');
-          } finally {
-            // Cleanup
-            selection.removeAllRanges();
-            window.document.body.removeChild(span);
-          }
-          if (success) {
-            _context2.n = 1;
-            break;
-          }
-          throw makeError();
-        case 1:
-          return _context2.a(2);
-      }
-    }, _callee2);
-  }));
-  return _copyExecCommand.apply(this, arguments);
+async function copyClipboardApi(text) {
+  // Use the Async Clipboard API when available. Requires a secure browsing
+  // context (i.e. HTTPS)
+  if (!navigator.clipboard) {
+    throw makeError();
+  }
+  return navigator.clipboard.writeText(text);
 }
-function copyToClipboard(_x3) {
-  return _copyToClipboard.apply(this, arguments);
+async function copyExecCommand(text) {
+  // Put the text to copy into a <span>
+  const span = document.createElement('span');
+  span.textContent = text;
+
+  // Preserve consecutive spaces and newlines
+  span.style.whiteSpace = 'pre';
+  span.style.webkitUserSelect = 'auto';
+  span.style.userSelect = 'all';
+
+  // Add the <span> to the page
+  document.body.appendChild(span);
+
+  // Make a selection object representing the range of text selected by the user
+  const selection = window.getSelection();
+  const range = window.document.createRange();
+  selection.removeAllRanges();
+  range.selectNode(span);
+  selection.addRange(range);
+
+  // Copy text to the clipboard
+  let success = false;
+  try {
+    success = window.document.execCommand('copy');
+  } finally {
+    // Cleanup
+    selection.removeAllRanges();
+    window.document.body.removeChild(span);
+  }
+  if (!success) throw makeError();
 }
-function _copyToClipboard() {
-  _copyToClipboard = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(text) {
-    var _t, _t2;
-    return _regenerator().w(function (_context3) {
-      while (1) switch (_context3.p = _context3.n) {
-        case 0:
-          _context3.p = 0;
-          _context3.n = 1;
-          return copyClipboardApi(text);
-        case 1:
-          _context3.n = 6;
-          break;
-        case 2:
-          _context3.p = 2;
-          _t = _context3.v;
-          _context3.p = 3;
-          _context3.n = 4;
-          return copyExecCommand(text);
-        case 4:
-          _context3.n = 6;
-          break;
-        case 5:
-          _context3.p = 5;
-          _t2 = _context3.v;
-          throw _t2 || _t || makeError();
-        case 6:
-          return _context3.a(2);
-      }
-    }, _callee3, null, [[3, 5], [0, 2]]);
-  }));
-  return _copyToClipboard.apply(this, arguments);
+async function copyToClipboard(text) {
+  try {
+    await copyClipboardApi(text);
+  } catch (err) {
+    // ...Otherwise, use document.execCommand() fallback
+    try {
+      await copyExecCommand(text);
+    } catch (err2) {
+      throw err2 || err || makeError();
+    }
+  }
 }
 
-var createNullableOnChange = function createNullableOnChange() {
-  var onChange = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  return function (newValue) {
-    var nullableValue = newValue;
-    if (isObject(newValue)) {
-      var allNull = Object.keys(newValue).reduce(function (acc, key) {
-        return acc && newValue[key] === null;
-      }, true);
-      if (allNull) {
-        nullableValue = null;
-      }
+const createNullableOnChange = (onChange = null) => newValue => {
+  let nullableValue = newValue;
+  if (isObject(newValue)) {
+    const allNull = Object.keys(newValue).reduce((acc, key) => acc && newValue[key] === null, true);
+    if (allNull) {
+      nullableValue = null;
     }
-    if (onChange !== null) {
-      onChange(nullableValue);
-    }
-  };
+  }
+  if (onChange !== null) {
+    onChange(nullableValue);
+  }
 };
 
-var createUseEvent = function createUseEvent(eventsManager) {
-  return function (event, callback) {
-    var enabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-    useEffect(function () {
+const createUseEvent = eventsManager => (event, callback, enabled = true) => {
+  useEffect(() => {
+    if (enabled && eventsManager !== null) {
+      eventsManager.subscribe(event, callback);
+    }
+    return () => {
       if (enabled && eventsManager !== null) {
-        eventsManager.subscribe(event, callback);
+        eventsManager.unsubscribe(event, callback);
       }
-      return function () {
-        if (enabled && eventsManager !== null) {
-          eventsManager.unsubscribe(event, callback);
-        }
-      };
-    }, [eventsManager, event, callback, enabled]);
-  };
+    };
+  }, [eventsManager, event, callback, enabled]);
 };
 
 function cssEscape(value) {
@@ -177,121 +105,59 @@ function cssEscape(value) {
 }
 
 /* eslint-disable */
-var easings = {
-  linear: function linear(x) {
-    return x;
-  },
-  easeInQuad: function easeInQuad(x) {
-    return x * x;
-  },
-  easeOutQuad: function easeOutQuad(x) {
-    return 1 - (1 - x) * (1 - x);
-  },
-  easeInOutQuad: function easeInOutQuad(x) {
-    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
-  },
-  easeInCubic: function easeInCubic(x) {
-    return x * x * x;
-  },
-  easeOutCubic: function easeOutCubic(x) {
-    return 1 - Math.pow(1 - x, 3);
-  },
-  easeInOutCubic: function easeInOutCubic(x) {
-    return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
-  },
-  easeInQuart: function easeInQuart(x) {
-    return x * x * x * x;
-  },
-  easeOutQuart: function easeOutQuart(x) {
-    return 1 - Math.pow(1 - x, 4);
-  },
-  easeInOutQuart: function easeInOutQuart(x) {
-    return x < 0.5 ? 8 * x * x * x * x : 1 - Math.pow(-2 * x + 2, 4) / 2;
-  },
-  easeInQuint: function easeInQuint(x) {
-    return x * x * x * x * x;
-  },
-  easeOutQuint: function easeOutQuint(x) {
-    return 1 - Math.pow(1 - x, 5);
-  },
-  easeInOutQuint: function easeInOutQuint(x) {
-    return x < 0.5 ? 16 * x * x * x * x * x : 1 - Math.pow(-2 * x + 2, 5) / 2;
-  },
-  easeInSine: function easeInSine(x) {
-    return 1 - Math.cos(x * Math.PI / 2);
-  },
-  easeOutSine: function easeOutSine(x) {
-    return Math.sin(x * Math.PI / 2);
-  },
-  easeInOutSine: function easeInOutSine(x) {
-    return -(Math.cos(Math.PI * x) - 1) / 2;
-  },
-  easeInExpo: function easeInExpo(x) {
-    return x === 0 ? 0 : Math.pow(2, 10 * x - 10);
-  },
-  easeOutExpo: function easeOutExpo(x) {
-    return x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
-  },
-  easeInOutExpo: function easeInOutExpo(x) {
-    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? Math.pow(2, 20 * x - 10) / 2 : (2 - Math.pow(2, -20 * x + 10)) / 2;
-  },
-  easeInCirc: function easeInCirc(x) {
-    return 1 - Math.sqrt(1 - Math.pow(x, 2));
-  },
-  easeOutCirc: function easeOutCirc(x) {
-    return Math.sqrt(1 - Math.pow(x - 1, 2));
-  },
-  easeInOutCirc: function easeInOutCirc(x) {
-    return x < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * x, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * x + 2, 2)) + 1) / 2;
-  },
-  easeInBack: function easeInBack(x) {
-    return c3 * x * x * x - c1 * x * x;
-  },
-  easeOutBack: function easeOutBack(x) {
-    return 1 + c3 * Math.pow(x - 1, 3) + c1 * Math.pow(x - 1, 2);
-  },
-  easeInOutBack: function easeInOutBack(x) {
-    return x < 0.5 ? Math.pow(2 * x, 2) * ((c2 + 1) * 2 * x - c2) / 2 : (Math.pow(2 * x - 2, 2) * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2;
-  },
-  easeInElastic: function easeInElastic(x) {
-    return x === 0 ? 0 : x === 1 ? 1 : -Math.pow(2, 10 * x - 10) * Math.sin((x * 10 - 10.75) * c4);
-  },
-  easeOutElastic: function easeOutElastic(x) {
-    return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
-  },
-  easeInOutElastic: function easeInOutElastic(x) {
-    return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(Math.pow(2, 20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : Math.pow(2, -20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1;
-  }
+const easings = {
+  linear: x => x,
+  easeInQuad: x => x * x,
+  easeOutQuad: x => 1 - (1 - x) * (1 - x),
+  easeInOutQuad: x => x < 0.5 ? 2 * x * x : 1 - (-2 * x + 2) ** 2 / 2,
+  easeInCubic: x => x * x * x,
+  easeOutCubic: x => 1 - (1 - x) ** 3,
+  easeInOutCubic: x => x < 0.5 ? 4 * x * x * x : 1 - (-2 * x + 2) ** 3 / 2,
+  easeInQuart: x => x * x * x * x,
+  easeOutQuart: x => 1 - (1 - x) ** 4,
+  easeInOutQuart: x => x < 0.5 ? 8 * x * x * x * x : 1 - (-2 * x + 2) ** 4 / 2,
+  easeInQuint: x => x * x * x * x * x,
+  easeOutQuint: x => 1 - (1 - x) ** 5,
+  easeInOutQuint: x => x < 0.5 ? 16 * x * x * x * x * x : 1 - (-2 * x + 2) ** 5 / 2,
+  easeInSine: x => 1 - Math.cos(x * Math.PI / 2),
+  easeOutSine: x => Math.sin(x * Math.PI / 2),
+  easeInOutSine: x => -(Math.cos(Math.PI * x) - 1) / 2,
+  easeInExpo: x => x === 0 ? 0 : 2 ** (10 * x - 10),
+  easeOutExpo: x => x === 1 ? 1 : 1 - 2 ** (-10 * x),
+  easeInOutExpo: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? 2 ** (20 * x - 10) / 2 : (2 - 2 ** (-20 * x + 10)) / 2,
+  easeInCirc: x => 1 - Math.sqrt(1 - x ** 2),
+  easeOutCirc: x => Math.sqrt(1 - (x - 1) ** 2),
+  easeInOutCirc: x => x < 0.5 ? (1 - Math.sqrt(1 - (2 * x) ** 2)) / 2 : (Math.sqrt(1 - (-2 * x + 2) ** 2) + 1) / 2,
+  easeInBack: x => c3 * x * x * x - c1 * x * x,
+  easeOutBack: x => 1 + c3 * (x - 1) ** 3 + c1 * (x - 1) ** 2,
+  easeInOutBack: x => x < 0.5 ? (2 * x) ** 2 * ((c2 + 1) * 2 * x - c2) / 2 : ((2 * x - 2) ** 2 * ((c2 + 1) * (x * 2 - 2) + c2) + 2) / 2,
+  easeInElastic: x => x === 0 ? 0 : x === 1 ? 1 : -(2 ** (10 * x - 10)) * Math.sin((x * 10 - 10.75) * c4),
+  easeOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : 2 ** (-10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1,
+  easeInOutElastic: x => x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? -(2 ** (20 * x - 10) * Math.sin((20 * x - 11.125) * c5)) / 2 : 2 ** (-20 * x + 10) * Math.sin((20 * x - 11.125) * c5) / 2 + 1
 };
 
-var getColorAsString = function getColorAsString() {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var overideAlpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+const getColorAsString = (value = null, overideAlpha = null) => {
   if (value === null) {
     return null;
   }
-  var _ref = isString(value) ? {
-      color: value
-    } : value,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? null : _ref$color,
-    _ref$alpha = _ref.alpha,
-    alpha = _ref$alpha === void 0 ? null : _ref$alpha;
+  const {
+    color = null,
+    alpha = null
+  } = isString(value) ? {
+    color: value
+  } : value;
   return alpha !== null || overideAlpha !== null ? tinycolor(color).setAlpha(overideAlpha !== null ? overideAlpha : alpha).toRgbString() : color;
 };
 
-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;
 };
 
-var deviceScreens = [{
+const deviceScreens = [{
   name: 'mobile'
 }, {
   name: 'small',
@@ -308,299 +174,274 @@ var deviceScreens = [{
 }];
 
 // eslint-disable-next-line import/prefer-default-export
-var getDeviceScreens = function getDeviceScreens() {
-  return deviceScreens;
-};
+const getDeviceScreens = () => deviceScreens;
 
-var getDisplayName = function getDisplayName(_ref) {
-  var _ref$displayName = _ref.displayName,
-    displayName = _ref$displayName === void 0 ? null : _ref$displayName,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? null : _ref$name;
-  return displayName || name || 'Component';
-};
+const getDisplayName = ({
+  displayName = null,
+  name = null
+}) => displayName || name || 'Component';
 
-var _getFieldByName = function getFieldByName(fields, name) {
-  return fields.reduce(function (foundField, it) {
-    if (foundField !== null) {
-      return foundField;
-    }
-    var _it$name = it.name,
-      fieldName = _it$name === void 0 ? null : _it$name,
-      _it$fields = it.fields,
-      subFields = _it$fields === void 0 ? [] : _it$fields;
-    if (name !== null && fieldName === name) {
-      return it;
-    }
-    return _getFieldByName(subFields, name);
-  }, null);
-};
+const getFieldByName = (fields, name) => fields.reduce((foundField, it) => {
+  if (foundField !== null) {
+    return foundField;
+  }
+  const {
+    name: fieldName = null,
+    fields: subFields = []
+  } = it;
+  if (name !== null && fieldName === name) {
+    return it;
+  }
+  return getFieldByName(subFields, name);
+}, null);
 
-var getFieldFromPath = function getFieldFromPath(path, fields, fieldManager) {
-  return (isArray(path) ? path : [path]).reduce(function (foundField, key) {
-    if (foundField === null) {
-      return null;
-    }
-    var _foundField$type = foundField.type,
-      type = _foundField$type === void 0 ? null : _foundField$type,
-      _foundField$fields = foundField.fields,
-      fieldFields = _foundField$fields === void 0 ? null : _foundField$fields,
-      _foundField$field = foundField.field,
-      field = _foundField$field === void 0 ? null : _foundField$field,
-      _foundField$itemsFiel = foundField.itemsField,
-      itemsField = _foundField$itemsFiel === void 0 ? null : _foundField$itemsFiel;
-    var finalType = field !== null ? field.type || type : type;
-    var definition = fieldManager.getDefinition(finalType);
-    var _ref = finalType !== null ? definition : foundField,
-      _ref$fields = _ref.fields,
-      subFields = _ref$fields === void 0 ? null : _ref$fields,
-      _ref$settings = _ref.settings,
-      settings = _ref$settings === void 0 ? null : _ref$settings,
-      _ref$itemsField = _ref.itemsField,
-      defItemsField = _ref$itemsField === void 0 ? null : _ref$itemsField;
-    var finalItemsField = itemsField || defItemsField;
-    if (finalItemsField !== null && key.match(/^[0-9]+$/)) {
-      return _objectSpread(_objectSpread({}, finalItemsField), {}, {
-        name: path.join('/'),
-        listItems: true
-      });
-    }
-    return _getFieldByName([].concat(_toConsumableArray(fieldFields || []), _toConsumableArray(subFields || []), _toConsumableArray(settings || [])), key);
-  }, {
-    fields: fields
-  });
-};
+const getFieldFromPath = (path, fields, fieldManager) => (isArray(path) ? path : [path]).reduce((foundField, key) => {
+  if (foundField === null) {
+    return null;
+  }
+  const {
+    type = null,
+    fields: fieldFields = null,
+    field = null,
+    itemsField = null
+  } = foundField;
+  const finalType = field !== null ? field.type || type : type;
+  const definition = fieldManager.getDefinition(finalType);
+  const {
+    fields: subFields = null,
+    settings = null,
+    itemsField: defItemsField = null
+  } = finalType !== null ? definition : foundField;
+  const finalItemsField = itemsField || defItemsField;
+  if (finalItemsField !== null && key.match(/^[0-9]+$/)) {
+    return {
+      ...finalItemsField,
+      name: path.join('/'),
+      listItems: true
+    };
+  }
+  return getFieldByName([...(fieldFields || []), ...(subFields || []), ...(settings || [])], key);
+}, {
+  fields
+});
 
-var getFileName = function getFileName() {
-  var url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+const getFileName = (url = null) => {
   if (url === null || typeof url.match === 'undefined') {
     return null;
   }
   return url.match(/([^/]+)(\?.*)?$/)[1] || url;
 };
 
-var getFontFamily = function getFontFamily(value) {
+const getFontFamily = value => {
   if (value == null) {
     return null;
   }
-  var _ref = isObject(value) ? value : {
-      name: value
-    },
-    name = _ref.name,
-    _ref$fallback = _ref.fallback,
-    fallback = _ref$fallback === void 0 ? null : _ref$fallback;
-  return [name, fallback].filter(function (it) {
-    return it !== null;
-  }).map(function (it) {
-    return "\"".concat(it, "\"");
-  }).join(', ');
+  const {
+    name,
+    fallback = null
+  } = isObject(value) ? value : {
+    name: value
+  };
+  return [name, fallback].filter(it => it !== null).map(it => `"${it}"`).join(', ');
 };
 
-var _excluded$1 = ["isPreview", "isView", "current", "openWebView", "enableInteraction", "disableInteraction"];
-var getFooterProps = function getFooterProps() {
-  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    _ref$isPreview = _ref.isPreview,
-    isPreview = _ref$isPreview === void 0 ? false : _ref$isPreview,
-    _ref$isView = _ref.isView,
-    isView = _ref$isView === void 0 ? false : _ref$isView,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? false : _ref$current,
-    _ref$openWebView = _ref.openWebView,
-    openWebView = _ref$openWebView === void 0 ? false : _ref$openWebView,
-    _ref$enableInteractio = _ref.enableInteraction,
-    enableInteraction = _ref$enableInteractio === void 0 ? true : _ref$enableInteractio,
-    _ref$disableInteracti = _ref.disableInteraction,
-    disableInteraction = _ref$disableInteracti === void 0 ? false : _ref$disableInteracti,
-    otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  var _ref2 = footer || {},
-    _ref2$callToAction = _ref2.callToAction,
-    callToAction = _ref2$callToAction === void 0 ? null : _ref2$callToAction;
-  var footerProps = useMemo(function () {
-    return {
-      callToAction: _objectSpread(_objectSpread({}, callToAction), {}, {
-        animationDisabled: isPreview,
-        focusable: current && isView,
-        openWebView: openWebView,
-        enableInteraction: enableInteraction,
-        disableInteraction: disableInteraction
-      }, otherProps)
-    };
-  }, [callToAction, isPreview, isView, current, enableInteraction, disableInteraction, otherProps]);
-  return footerProps;
-};
+function getFooterProps(footer = {}, {
+  isPreview = false,
+  isView = false,
+  current = false,
+  openWebView = false,
+  enableInteraction = true,
+  disableInteraction = false,
+  ...otherProps
+} = {}) {
+  const {
+    callToAction = null
+  } = footer || {};
+  return {
+    callToAction: {
+      ...callToAction,
+      animationDisabled: isPreview,
+      focusable: current && isView,
+      openWebView,
+      enableInteraction,
+      disableInteraction,
+      ...otherProps
+    }
+  };
+}
 
-var getGridLayoutName = function getGridLayoutName(layout) {
-  return layout.map(function (it) {
-    return "".concat(it.rows, "_").concat(it.columns.join('_'));
-  }).join('|');
-};
+const getGridLayoutName = layout => layout.map(it => `${it.rows}_${it.columns.join('_')}`).join('|');
 
-var getRemainder = function getRemainder(number) {
-  var remainder = number - Math.floor(number);
+const getRemainder = number => {
+  const remainder = number - Math.floor(number);
   return remainder.toFixed(4);
 };
-var largestRemainderRound = function largestRemainderRound(numbers, desiredTotal) {
+const largestRemainderRound = (numbers, desiredTotal) => {
   if (!isArray(numbers) || numbers.length < 1) return numbers;
-  var result = numbers.map(function (number, index) {
-    return {
-      floor: Math.floor(number) || 0,
-      remainder: getRemainder(number),
-      index: index
-    };
-  }).sort(function (a, b) {
-    return b.remainder - a.remainder;
-  });
-  var lowerSum = result.reduce(function (sum, current) {
-    return sum + current.floor;
-  }, 0);
-  var delta = desiredTotal - lowerSum;
-  for (var i = 0; i < delta; i += 1) {
+  const result = numbers.map((number, index) => ({
+    floor: Math.floor(number) || 0,
+    remainder: getRemainder(number),
+    index
+  })).sort((a, b) => b.remainder - a.remainder);
+  const lowerSum = result.reduce((sum, current) => sum + current.floor, 0);
+  const delta = desiredTotal - lowerSum;
+  for (let i = 0; i < delta; i += 1) {
     if (result[i]) {
       result[i].floor += 1;
     }
   }
-  return result.sort(function (a, b) {
-    return a.index - b.index;
-  }).map(function (res) {
-    return res.floor;
-  });
+  return result.sort((a, b) => a.index - b.index).map(res => res.floor);
 };
 
-var _excluded = ["image", "video", "media", "color"];
-var getLayersFromBackground = function getLayersFromBackground() {
-  var background = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+const getLayersFromBackground = (background = null) => {
   if (background === null) {
     return [];
   }
-  return (isArray(background) ? background : [background]).reduce(function (layers, _ref) {
-    var _ref$image = _ref.image,
-      image = _ref$image === void 0 ? null : _ref$image,
-      _ref$video = _ref.video,
-      video = _ref$video === void 0 ? null : _ref$video,
-      _ref$media = _ref.media,
-      media = _ref$media === void 0 ? null : _ref$media,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? null : _ref$color,
-      data = _objectWithoutProperties(_ref, _excluded);
+  return (isArray(background) ? background : [background]).reduce((layers, {
+    image = null,
+    video = null,
+    media = null,
+    color = null,
+    ...data
+  }) => {
     if (image === null && video === null && color === null) {
       return layers;
     }
     if (image !== null && video !== null) {
-      return [].concat(_toConsumableArray(layers), [_objectSpread({
-        media: image
-      }, data), _objectSpread({
+      return [...layers, {
+        media: image,
+        ...data
+      }, {
         media: video,
-        color: color
-      }, data)]);
+        color,
+        ...data
+      }];
     }
-    return [].concat(_toConsumableArray(layers), [_objectSpread({
+    return [...layers, {
       media: media || image || video,
-      color: color
-    }, data)]);
+      color,
+      ...data
+    }];
   }, []);
 };
 
-var getMediaFilesAsArray = function getMediaFilesAsArray(files) {
-  return files !== null && isArray(files) ? files : Object.keys(files || {}).reduce(function (newFiles, key) {
-    return [].concat(_toConsumableArray(newFiles), [_objectSpread({
-      handle: key
-    }, files[key])]);
-  }, []);
-};
+const getMediaFilesAsArray = files => files !== null && isArray(files) ? files : Object.keys(files || {}).reduce((newFiles, key) => [...newFiles, {
+  handle: key,
+  ...files[key]
+}], []);
+
+function getMediaThumbnail(media, thumbnail = null) {
+  if (isObject(thumbnail)) {
+    return thumbnail;
+  }
+  const {
+    thumbnail_url: defaultThumbnailUrl = null,
+    files = null,
+    metadata = null
+  } = media || {};
+  const {
+    width: mediaWidth,
+    height: mediaHeight
+  } = metadata || {};
+  const filesArray = getMediaFilesAsArray(files) || [];
+  const {
+    url = null
+  } = (thumbnail !== null ? filesArray.find(({
+    handle
+  }) => handle === thumbnail) || null : null) || {};
+  return url !== null || defaultThumbnailUrl !== null ? {
+    url: url || defaultThumbnailUrl,
+    metadata: {
+      width: mediaWidth,
+      height: mediaHeight
+    }
+  } : null;
+}
 
 // eslint-disable-next-line import/prefer-default-export
-var getOptimalImageUrl = function getOptimalImageUrl() {
-  var media = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var containerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var containerHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
-    _ref$resolution = _ref.resolution,
-    resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
-    _ref$maxDiff = _ref.maxDiff,
-    maxDiff = _ref$maxDiff === void 0 ? 800 : _ref$maxDiff,
-    _ref$supportsWebp = _ref.supportsWebp,
-    supportsWebp = _ref$supportsWebp === void 0 ? false : _ref$supportsWebp;
-  var _ref2 = media || {},
-    _ref2$sizes = _ref2.sizes,
-    sizes = _ref2$sizes === void 0 ? null : _ref2$sizes,
-    _ref2$url = _ref2.url,
-    defaultUrl = _ref2$url === void 0 ? null : _ref2$url,
-    _ref2$webp_url = _ref2.webp_url,
-    defaultWebpUrl = _ref2$webp_url === void 0 ? null : _ref2$webp_url,
-    _ref2$metadata = _ref2.metadata,
-    _ref2$metadata2 = _ref2$metadata === void 0 ? {} : _ref2$metadata,
-    imgWidth = _ref2$metadata2.width,
-    imgHeight = _ref2$metadata2.height;
-  var finalDefaultUrl = supportsWebp && defaultWebpUrl !== null ? defaultWebpUrl : defaultUrl;
+const getOptimalImageUrl = (media = null, containerWidth = null, containerHeight = null, {
+  resolution = 1,
+  maxDiff = 800,
+  supportsWebp = false
+} = {}) => {
+  const {
+    sizes = null,
+    url: defaultUrl = null,
+    webp_url: defaultWebpUrl = null,
+    metadata: {
+      width: imgWidth,
+      height: imgHeight
+    } = {}
+  } = media || {};
+  const finalDefaultUrl = supportsWebp && defaultWebpUrl !== null ? defaultWebpUrl : defaultUrl;
   if (sizes === null || containerWidth === null && containerHeight === null) {
     return finalDefaultUrl;
   }
-  var finalSizes = _objectSpread({
+  const finalSizes = {
     original: {
       url: finalDefaultUrl,
       width: imgWidth,
       height: imgHeight
+    },
+    ...sizes
+  };
+  const finalContainerWidth = containerWidth !== null && resolution !== null ? containerWidth * resolution : containerWidth;
+  const finalContainerHeight = containerHeight !== null && resolution !== null ? containerHeight * resolution : containerHeight;
+  const {
+    url: finalUrl
+  } = Object.keys(finalSizes).reduce((acc, key) => {
+    const {
+      diff: currentDiff,
+      isLarger: currentIsLarger,
+      size: currentSize
+    } = acc;
+    const {
+      url,
+      webp_url: webpUrl = null,
+      width = null,
+      height = null
+    } = finalSizes[key];
+    const sizeUrl = supportsWebp && webpUrl !== null ? webpUrl : url;
+    const diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
+    const diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
+    const isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
+    let diff = [diffWidth, diffHeight].reduce((total, value) => value !== null ? (total || 0) + Math.abs(value) : total, null);
+    if (diff === null) {
+      diff = Infinity;
     }
-  }, sizes);
-  var finalContainerWidth = containerWidth !== null && resolution !== null ? containerWidth * resolution : containerWidth;
-  var finalContainerHeight = containerHeight !== null && resolution !== null ? containerHeight * resolution : containerHeight;
-  var _Object$keys$reduce = Object.keys(finalSizes).reduce(function (acc, key) {
-      var currentDiff = acc.diff,
-        currentIsLarger = acc.isLarger,
-        currentSize = acc.size;
-      var _finalSizes$key = finalSizes[key],
-        url = _finalSizes$key.url,
-        _finalSizes$key$webp_ = _finalSizes$key.webp_url,
-        webpUrl = _finalSizes$key$webp_ === void 0 ? null : _finalSizes$key$webp_,
-        _finalSizes$key$width = _finalSizes$key.width,
-        width = _finalSizes$key$width === void 0 ? null : _finalSizes$key$width,
-        _finalSizes$key$heigh = _finalSizes$key.height,
-        height = _finalSizes$key$heigh === void 0 ? null : _finalSizes$key$heigh;
-      var sizeUrl = supportsWebp && webpUrl !== null ? webpUrl : url;
-      var diffWidth = width !== null && finalContainerWidth !== null ? width - finalContainerWidth : null;
-      var diffHeight = height !== null && finalContainerHeight !== null ? height - finalContainerHeight : null;
-      var isLarger = (diffWidth === null || diffWidth >= 0) && (diffHeight === null || diffHeight >= 0);
-      var diff = [diffWidth, diffHeight].reduce(function (total, value) {
-        return value !== null ? (total || 0) + Math.abs(value) : total;
-      }, null);
-      if (diff === null) {
-        diff = Infinity;
-      }
-      var size = (width || 0) + (height || 0);
-      var sizeIsLarger = size > currentSize;
-      if (
-      // Difference is lower and image is larger
-      diff < currentDiff && isLarger ||
-      // Difference is lower and current is not larger or diff is greater than max
-      diff < currentDiff && (!currentIsLarger && sizeIsLarger || currentDiff > maxDiff) ||
-      // Image is larger and diff is smaller than max
-      diff <= maxDiff && !currentIsLarger && isLarger ||
-      // Image is larger than previous
-      diff <= maxDiff && !currentIsLarger && !isLarger && sizeIsLarger) {
-        return {
-          key: key,
-          url: sizeUrl,
-          diff: diff,
-          isLarger: isLarger
-        };
-      }
-      return acc;
-    }, {
-      key: null,
-      url: finalDefaultUrl,
-      diff: Infinity,
-      isLarger: false,
-      size: 0
-    }),
-    finalUrl = _Object$keys$reduce.url;
+    const size = (width || 0) + (height || 0);
+    const sizeIsLarger = size > currentSize;
+    if (
+    // Difference is lower and image is larger
+    diff < currentDiff && isLarger ||
+    // Difference is lower and current is not larger or diff is greater than max
+    diff < currentDiff && (!currentIsLarger && sizeIsLarger || currentDiff > maxDiff) ||
+    // Image is larger and diff is smaller than max
+    diff <= maxDiff && !currentIsLarger && isLarger ||
+    // Image is larger than previous
+    diff <= maxDiff && !currentIsLarger && !isLarger && sizeIsLarger) {
+      return {
+        key,
+        url: sizeUrl,
+        diff,
+        isLarger
+      };
+    }
+    return acc;
+  }, {
+    key: null,
+    url: finalDefaultUrl,
+    diff: Infinity,
+    isLarger: false,
+    size: 0
+  });
   return finalUrl;
 };
 
-var getSecondsFromTime = function getSecondsFromTime(time) {
-  var t = time.split(':');
+const getSecondsFromTime = time => {
+  const t = time.split(':');
   try {
-    var s = t[2].split(',');
+    let s = t[2].split(',');
     if (s.length === 1) {
       s = t[2].split('.');
     }
@@ -610,72 +451,62 @@ var getSecondsFromTime = function getSecondsFromTime(time) {
   }
 };
 
-var getScreenExtraField = function getScreenExtraField(intl) {
-  return {
-    name: 'parameters',
-    type: 'parameters',
-    label: intl.formatMessage({
-      id: "8A8cuq",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Parameters"
-      }]
-    })
-  };
-};
+const getScreenExtraField = intl => ({
+  name: 'parameters',
+  type: 'parameters',
+  label: intl.formatMessage({
+    id: "8A8cuq",
+    defaultMessage: "Parameters"
+  })
+});
 
 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];
 }
 
 function getShadowCoords(angle, distance) {
-  var x = (Math.cos(angle) * distance).toFixed(3);
-  var y = (Math.sin(angle) * distance).toFixed(3);
+  const x = (Math.cos(angle) * distance).toFixed(3);
+  const y = (Math.sin(angle) * distance).toFixed(3);
   return {
-    x: x,
-    y: y
+    x,
+    y
   };
 }
 
@@ -691,18 +522,16 @@ function getAlignItems(vertical) {
   if (vertical === 'bottom') return 'flex-end';
   return null;
 }
-var getStyleFromAlignment = function getStyleFromAlignment(value) {
-  var invertAxis = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var defaultAlignment = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+const getStyleFromAlignment = (value, invertAxis = false, defaultAlignment = null) => {
   if (value === null) {
     return null;
   }
-  var _value$horizontal = value.horizontal,
-    horizontal = _value$horizontal === void 0 ? null : _value$horizontal,
-    _value$vertical = value.vertical,
-    vertical = _value$vertical === void 0 ? null : _value$vertical;
-  var justifyContent = getJustifyContent(horizontal);
-  var alignItems = getAlignItems(vertical);
+  const {
+    horizontal = null,
+    vertical = null
+  } = value;
+  const justifyContent = getJustifyContent(horizontal);
+  const alignItems = getAlignItems(vertical);
   if (invertAxis) {
     return {
       justifyContent: alignItems || defaultAlignment,
@@ -715,417 +544,419 @@ var getStyleFromAlignment = function getStyleFromAlignment(value) {
   };
 };
 
-var getStyleFromColor = function getStyleFromColor() {
-  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
-  var overideAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-  var color = getColorAsString(value, overideAlpha);
-  return color !== null ? _defineProperty({}, property, color) : null;
+const getStyleFromColor = (value = null, property = 'backgroundColor', overideAlpha = null) => {
+  const color = getColorAsString(value, overideAlpha);
+  return color !== null ? {
+    [property]: color
+  } : null;
 };
 
-var getStyleFromBorder = function getStyleFromBorder(value) {
+const getStyleFromBorder = value => {
   if (value == null) {
     return null;
   }
-  var _value$width = value.width,
-    width = _value$width === void 0 ? null : _value$width,
-    _value$style = value.style,
-    borderStyle = _value$style === void 0 ? null : _value$style,
-    _value$color = value.color,
-    color = _value$color === void 0 ? null : _value$color;
-  return _objectSpread(_objectSpread(_objectSpread({}, width !== null ? {
-    borderWidth: width
-  } : null), borderStyle !== null ? {
-    borderStyle: borderStyle
-  } : null), getStyleFromColor(color, 'borderColor'));
+  const {
+    width = null,
+    style: borderStyle = null,
+    color = null
+  } = value;
+  return {
+    ...(width !== null ? {
+      borderWidth: width
+    } : null),
+    ...(borderStyle !== null ? {
+      borderStyle
+    } : null),
+    ...getStyleFromColor(color, 'borderColor')
+  };
 };
 
-var getStyleFromShadow = function getStyleFromShadow(value) {
+const getStyleFromShadow = value => {
   if (value == null) {
     return null;
   }
-  var _ref = value || {},
-    _ref$shadowAngle = _ref.shadowAngle,
-    shadowAngle = _ref$shadowAngle === void 0 ? null : _ref$shadowAngle,
-    _ref$shadowDistance = _ref.shadowDistance,
-    shadowDistance = _ref$shadowDistance === void 0 ? null : _ref$shadowDistance,
-    _ref$shadowBlur = _ref.shadowBlur,
-    shadowBlur = _ref$shadowBlur === void 0 ? null : _ref$shadowBlur,
-    _ref$shadowColor = _ref.shadowColor,
-    shadowColor = _ref$shadowColor === void 0 ? null : _ref$shadowColor;
+  const {
+    shadowAngle = null,
+    shadowDistance = null,
+    shadowBlur = null,
+    shadowColor = null
+  } = value || {};
   if (!shadowAngle) return null;
-  var blur = shadowBlur || '0';
-  var color = getColorAsString(shadowColor) || '#000000';
-  var _getShadowCoords = getShadowCoords(shadowAngle, shadowDistance),
-    x = _getShadowCoords.x,
-    y = _getShadowCoords.y;
-  var boxShadow = "".concat(x, "px ").concat(y, "px ").concat(blur, "px 0 ").concat(color);
+  const blur = shadowBlur || '0';
+  const color = getColorAsString(shadowColor) || '#000000';
+  const {
+    x,
+    y
+  } = getShadowCoords(shadowAngle, shadowDistance);
+  const boxShadow = `${x}px ${y}px ${blur}px 0 ${color}`;
   return {
-    boxShadow: boxShadow
+    boxShadow
   };
 };
 
 // @todo hmm, gotta find a better way to handle this
-var getStyleFromBox = function getStyleFromBox(value) {
+const getStyleFromBox = value => {
   if (value === null) {
     return null;
   }
-  var _value$backgroundColo = value.backgroundColor,
-    backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo,
-    _value$borderRadius = value.borderRadius,
-    borderRadius = _value$borderRadius === void 0 ? null : _value$borderRadius,
-    _value$padding = value.padding,
-    padding = _value$padding === void 0 ? null : _value$padding,
-    _value$paddingTop = value.paddingTop,
-    paddingTop = _value$paddingTop === void 0 ? null : _value$paddingTop,
-    _value$paddingRight = value.paddingRight,
-    paddingRight = _value$paddingRight === void 0 ? null : _value$paddingRight,
-    _value$paddingBottom = value.paddingBottom,
-    paddingBottom = _value$paddingBottom === void 0 ? null : _value$paddingBottom,
-    _value$paddingLeft = value.paddingLeft,
-    paddingLeft = _value$paddingLeft === void 0 ? null : _value$paddingLeft,
-    _value$borderWidth = value.borderWidth,
-    borderWidth = _value$borderWidth === void 0 ? null : _value$borderWidth,
-    _value$borderStyle = value.borderStyle,
-    borderStyle = _value$borderStyle === void 0 ? null : _value$borderStyle,
-    _value$borderColor = value.borderColor,
-    borderColor = _value$borderColor === void 0 ? null : _value$borderColor,
-    _value$shadowAngle = value.shadowAngle,
-    shadowAngle = _value$shadowAngle === void 0 ? null : _value$shadowAngle,
-    _value$shadowDistance = value.shadowDistance,
-    shadowDistance = _value$shadowDistance === void 0 ? null : _value$shadowDistance,
-    _value$shadowBlur = value.shadowBlur,
-    shadowBlur = _value$shadowBlur === void 0 ? null : _value$shadowBlur,
-    _value$shadowColor = value.shadowColor,
-    shadowColor = _value$shadowColor === void 0 ? null : _value$shadowColor;
-  var border = {
+  const {
+    backgroundColor = null,
+    borderRadius = null,
+    padding = null,
+    paddingTop = null,
+    paddingRight = null,
+    paddingBottom = null,
+    paddingLeft = null,
+    borderWidth = null,
+    borderStyle = null,
+    borderColor = null,
+    shadowAngle = null,
+    shadowDistance = null,
+    shadowBlur = null,
+    shadowColor = null
+  } = value;
+  const border = {
     width: borderWidth,
     style: borderStyle,
     color: borderColor
   };
-  var shadow = {
-    shadowAngle: shadowAngle,
-    shadowDistance: shadowDistance,
-    shadowBlur: shadowBlur,
-    shadowColor: shadowColor
+  const shadow = {
+    shadowAngle,
+    shadowDistance,
+    shadowBlur,
+    shadowColor
   };
-  var _ref = isObject(padding) ? padding : {
-      padding: padding
-    },
-    _ref$top = _ref.top,
-    paddingValueTop = _ref$top === void 0 ? null : _ref$top,
-    _ref$right = _ref.right,
-    paddingValueRight = _ref$right === void 0 ? null : _ref$right,
-    _ref$bottom = _ref.bottom,
-    paddingValueBottom = _ref$bottom === void 0 ? null : _ref$bottom,
-    _ref$left = _ref.left,
-    paddingValueLeft = _ref$left === void 0 ? null : _ref$left,
-    _ref$padding = _ref.padding,
-    paddingValue = _ref$padding === void 0 ? null : _ref$padding;
-  var basePadding = padding || paddingValue;
-  var hasBasePadding = basePadding !== null;
-  var topVal = paddingTop || paddingValueTop;
-  var rightVal = paddingRight || paddingValueRight;
-  var bottomVal = paddingBottom || paddingValueBottom;
-  var leftVal = paddingLeft || paddingValueLeft;
-  var hasAnyIndividual = topVal !== null || rightVal !== null || bottomVal !== null || leftVal !== null;
+  const {
+    top: paddingValueTop = null,
+    right: paddingValueRight = null,
+    bottom: paddingValueBottom = null,
+    left: paddingValueLeft = null,
+    padding: paddingValue = null
+  } = isObject(padding) ? padding : {
+    padding
+  };
+  const basePadding = padding || paddingValue;
+  const hasBasePadding = basePadding !== null;
+  const topVal = paddingTop || paddingValueTop;
+  const rightVal = paddingRight || paddingValueRight;
+  const bottomVal = paddingBottom || paddingValueBottom;
+  const leftVal = paddingLeft || paddingValueLeft;
+  const hasAnyIndividual = topVal !== null || rightVal !== null || bottomVal !== null || leftVal !== null;
 
   // Avoid mixing shorthand `padding` with longhand `paddingTop`/etc — React warns about this
-  var paddingStyles = hasBasePadding && hasAnyIndividual ? {
-    paddingTop: topVal !== null && topVal !== void 0 ? topVal : basePadding,
-    paddingRight: rightVal !== null && rightVal !== void 0 ? rightVal : basePadding,
-    paddingBottom: bottomVal !== null && bottomVal !== void 0 ? bottomVal : basePadding,
-    paddingLeft: leftVal !== null && leftVal !== void 0 ? leftVal : basePadding
-  } : _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, hasBasePadding ? {
-    padding: basePadding
-  } : null), topVal !== null ? {
-    paddingTop: topVal
-  } : null), rightVal !== null ? {
-    paddingRight: rightVal
-  } : null), bottomVal !== null ? {
-    paddingBottom: bottomVal
-  } : null), leftVal !== null ? {
-    paddingLeft: leftVal
-  } : null);
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
-    borderRadius: borderRadius
-  } : null), getStyleFromBorder(border)), getStyleFromShadow(shadow)), paddingStyles);
+  const paddingStyles = hasBasePadding && hasAnyIndividual ? {
+    paddingTop: topVal ?? basePadding,
+    paddingRight: rightVal ?? basePadding,
+    paddingBottom: bottomVal ?? basePadding,
+    paddingLeft: leftVal ?? basePadding
+  } : {
+    ...(hasBasePadding ? {
+      padding: basePadding
+    } : null),
+    ...(topVal !== null ? {
+      paddingTop: topVal
+    } : null),
+    ...(rightVal !== null ? {
+      paddingRight: rightVal
+    } : null),
+    ...(bottomVal !== null ? {
+      paddingBottom: bottomVal
+    } : null),
+    ...(leftVal !== null ? {
+      paddingLeft: leftVal
+    } : null)
+  };
+  return {
+    ...getStyleFromColor(backgroundColor, 'backgroundColor'),
+    ...(borderRadius !== null ? {
+      borderRadius
+    } : null),
+    ...getStyleFromBorder(border),
+    ...getStyleFromShadow(shadow),
+    ...paddingStyles
+  };
 };
 
-var getStyleFromContainer = function getStyleFromContainer(value) {
+const getStyleFromContainer = value => {
   if (value == null) {
     return null;
   }
-  var _value$size = value.size,
-    size = _value$size === void 0 ? {} : _value$size,
-    _value$backgroundColo = value.backgroundColor,
-    backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo;
-  var _size$width = size.width,
-    width = _size$width === void 0 ? null : _size$width,
-    _size$height = size.height,
-    height = _size$height === void 0 ? null : _size$height;
-  return _objectSpread(_objectSpread(_objectSpread({}, width ? {
-    width: "".concat(width, "%")
-  } : null), height ? {
-    height: "".concat(height, "%")
-  } : null), getStyleFromColor(backgroundColor, 'backgroundColor'));
+  const {
+    size = {},
+    backgroundColor = null
+  } = value;
+  const {
+    width = null,
+    height = null
+  } = size;
+  return {
+    // DO NOT OVERRIDE
+    ...(width ? {
+      width: `${width}%`
+    } : null),
+    ...(height ? {
+      height: `${height}%`
+    } : null),
+    ...getStyleFromColor(backgroundColor, 'backgroundColor')
+  };
 };
 
-var getStyleFromHighlight = function getStyleFromHighlight(value) {
+const getStyleFromHighlight = value => {
   if (value == null) {
     return null;
   }
-  var _value$textColor = value.textColor,
-    textColor = _value$textColor === void 0 ? null : _value$textColor,
-    _value$color = value.color,
-    color = _value$color === void 0 ? null : _value$color;
-  var colorString = color !== null ? getColorAsString(color) : null;
-  var boxShadow = colorString !== null ? "0.05em 0px 0px ".concat(colorString, ", -0.05em 0px 0px ").concat(colorString) : null;
-  return color !== null || textColor !== null ? _objectSpread(_objectSpread(_objectSpread({}, color !== null ? getStyleFromColor(color, 'backgroundColor') : null), textColor !== null ? getStyleFromColor(textColor, 'color') : null), color !== null ? {
-    boxShadow: boxShadow,
-    mozBoxShadow: boxShadow,
-    msBoxShadow: boxShadow,
-    webkitBoxShadow: boxShadow
-  } : null) : null;
+  const {
+    textColor = null,
+    color = null
+  } = value;
+  const colorString = color !== null ? getColorAsString(color) : null;
+  const boxShadow = colorString !== null ? `0.05em 0px 0px ${colorString}, -0.05em 0px 0px ${colorString}` : null;
+  return color !== null || textColor !== null ? {
+    ...(color !== null ? getStyleFromColor(color, 'backgroundColor') : null),
+    ...(textColor !== null ? getStyleFromColor(textColor, 'color') : null),
+    ...(color !== null ? {
+      boxShadow,
+      mozBoxShadow: boxShadow,
+      msBoxShadow: boxShadow,
+      webkitBoxShadow: boxShadow
+    } : null)
+  } : null;
 };
 
-var getStyleFromImage = function getStyleFromImage(value) {
+const getStyleFromImage = value => {
   if (value == null) {
     return null;
   }
-  var _value$fit = value.fit,
-    fit = _value$fit === void 0 ? {} : _value$fit,
-    _value$backgroundColo = value.backgroundColor,
-    backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo;
-  var _fit$size = fit.size,
-    size = _fit$size === void 0 ? null : _fit$size,
-    _fit$position = fit.position,
-    position = _fit$position === void 0 ? {} : _fit$position;
-  var _position$axisAlign = position.axisAlign,
-    axisAlign = _position$axisAlign === void 0 ? null : _position$axisAlign,
-    _position$crossAlign = position.crossAlign,
-    crossAlign = _position$crossAlign === void 0 ? null : _position$crossAlign;
-  return _objectSpread(_objectSpread(_objectSpread({}, size !== null ? {
-    objectFit: size
-  } : null), axisAlign !== null && crossAlign !== null ? {
-    objectPosition: "".concat(axisAlign, " ").concat(crossAlign)
-  } : null), getStyleFromColor(backgroundColor, 'backgroundColor'));
+  const {
+    fit = {},
+    backgroundColor = null
+  } = value;
+  const {
+    size = null,
+    position = {}
+  } = fit;
+  const {
+    axisAlign = null,
+    crossAlign = null
+  } = position;
+  return {
+    ...(size !== null ? {
+      objectFit: size
+    } : null),
+    ...(axisAlign !== null && crossAlign !== null ? {
+      objectPosition: `${axisAlign} ${crossAlign}`
+    } : null),
+    ...getStyleFromColor(backgroundColor, 'backgroundColor')
+  };
 };
 
-var getStyleFromLink = function getStyleFromLink(value) {
+const getStyleFromLink = value => {
   if (value == null) {
     return null;
   }
-  var _value$color = value.color,
-    color = _value$color === void 0 ? null : _value$color,
-    fontStyle = value.fontStyle;
-  var _ref = fontStyle || {},
-    _ref$italic = _ref.italic,
-    italic = _ref$italic === void 0 ? false : _ref$italic,
-    _ref$bold = _ref.bold,
-    bold = _ref$bold === void 0 ? false : _ref$bold,
-    _ref$underline = _ref.underline,
-    underline = _ref$underline === void 0 ? false : _ref$underline;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, color !== null ? getStyleFromColor(color, 'color') : null), italic ? {
-    fontStyle: 'italic'
-  } : null), bold ? {
-    fontWeight: 'bold'
-  } : null), underline ? {
-    textDecoration: 'underline'
-  } : null);
+  const {
+    color = null,
+    fontStyle
+  } = value;
+  const {
+    italic = false,
+    bold = false,
+    underline = false
+  } = fontStyle || {};
+  return {
+    ...(color !== null ? getStyleFromColor(color, 'color') : null),
+    ...(italic ? {
+      fontStyle: 'italic'
+    } : null),
+    ...(bold ? {
+      fontWeight: 'bold'
+    } : null),
+    ...(underline ? {
+      textDecoration: 'underline'
+    } : null)
+  };
 };
 
-var getStyleFromText = function getStyleFromText(value) {
+const getStyleFromText = value => {
   if (value == null) {
     return null;
   }
-  var _value$fontFamily = value.fontFamily,
-    fontFamily = _value$fontFamily === void 0 ? null : _value$fontFamily,
-    _value$fontSize = value.fontSize,
-    fontSize = _value$fontSize === void 0 ? null : _value$fontSize,
-    _value$fontStyle = value.fontStyle,
-    fontStyle = _value$fontStyle === void 0 ? null : _value$fontStyle,
-    _value$fontWeight = value.fontWeight,
-    fontWeight = _value$fontWeight === void 0 ? null : _value$fontWeight,
-    _value$lineHeight = value.lineHeight,
-    lineHeight = _value$lineHeight === void 0 ? null : _value$lineHeight,
-    _value$letterSpacing = value.letterSpacing,
-    letterSpacing = _value$letterSpacing === void 0 ? null : _value$letterSpacing,
-    _value$align = value.align,
-    textAlign = _value$align === void 0 ? null : _value$align,
-    _value$color = value.color,
-    color = _value$color === void 0 ? null : _value$color;
-  var _ref = fontStyle || {},
-    _ref$italic = _ref.italic,
-    italic = _ref$italic === void 0 ? false : _ref$italic,
-    _ref$bold = _ref.bold,
-    bold = _ref$bold === void 0 ? false : _ref$bold,
-    _ref$underline = _ref.underline,
-    underline = _ref$underline === void 0 ? false : _ref$underline,
-    _ref$transform = _ref.transform,
-    textTransform = _ref$transform === void 0 ? null : _ref$transform,
-    _ref$outline = _ref.outline,
-    outline = _ref$outline === void 0 ? false : _ref$outline;
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    fontFamily: getFontFamily(fontFamily)
-  }, fontSize !== null ? {
-    fontSize: fontSize
-  } : null), italic ? {
-    fontStyle: 'italic'
-  } : null), bold ? {
-    fontWeight: 'bold'
-  } : null), fontWeight !== null ? {
-    fontWeight: fontWeight
-  } : null), underline ? {
-    textDecoration: 'underline'
-  } : null), textTransform !== null ? {
-    textTransform: textTransform
-  } : null), textAlign !== null ? {
-    textAlign: textAlign
-  } : null), lineHeight !== null ? {
-    lineHeight: lineHeight
-  } : null), letterSpacing !== null ? {
-    letterSpacing: letterSpacing
-  } : null), getStyleFromColor(color, 'color')), outline ? {
-    WebkitTextStroke: "2px ".concat(getColorAsString(color, 'color')),
-    color: 'transparent'
-  } : null);
+  const {
+    fontFamily = null,
+    fontSize = null,
+    fontStyle = null,
+    fontWeight = null,
+    lineHeight = null,
+    letterSpacing = null,
+    align: textAlign = null,
+    color = null
+  } = value;
+  const {
+    italic = false,
+    bold = false,
+    underline = false,
+    transform: textTransform = null,
+    outline = false
+  } = fontStyle || {};
+  return {
+    fontFamily: getFontFamily(fontFamily),
+    ...(fontSize !== null ? {
+      fontSize
+    } : null),
+    ...(italic ? {
+      fontStyle: 'italic'
+    } : null),
+    ...(bold ? {
+      fontWeight: 'bold'
+    } : null),
+    ...(fontWeight !== null ? {
+      fontWeight
+    } : null),
+    ...(underline ? {
+      textDecoration: 'underline'
+    } : null),
+    ...(textTransform !== null ? {
+      textTransform
+    } : null),
+    ...(textAlign !== null ? {
+      textAlign
+    } : null),
+    ...(lineHeight !== null ? {
+      lineHeight
+    } : null),
+    ...(letterSpacing !== null ? {
+      letterSpacing
+    } : null),
+    ...getStyleFromColor(color, 'color'),
+    ...(outline ? {
+      WebkitTextStroke: `2px ${getColorAsString(color, 'color')}`,
+      color: 'transparent'
+    } : null)
+  };
 };
 
-var getStyleFromMargin = function getStyleFromMargin(value) {
+const getStyleFromMargin = value => {
   if (value == null) {
     return null;
   }
-  var _value$top = value.top,
-    marginTop = _value$top === void 0 ? null : _value$top,
-    _value$bottom = value.bottom,
-    marginBottom = _value$bottom === void 0 ? null : _value$bottom;
-  return _objectSpread(_objectSpread({}, marginTop !== null ? {
-    marginTop: marginTop
-  } : null), marginBottom !== null ? {
-    marginBottom: marginBottom
-  } : null);
+  const {
+    top: marginTop = null,
+    bottom: marginBottom = null
+  } = value;
+  return {
+    ...(marginTop !== null ? {
+      marginTop
+    } : null),
+    ...(marginBottom !== null ? {
+      marginBottom
+    } : null)
+  };
 };
 
 // const possibleMimes = ['video/webm', 'video/mp4', 'video/ogg', 'application/vnd.apple.mpegurl'];
-var possibleMimes = ['video/mp4'];
-var supportedMimes = null;
-function getVideoSupportedMimes() {
-  var mimes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : possibleMimes;
+const possibleMimes = ['video/mp4'];
+let supportedMimes = null;
+function getVideoSupportedMimes(mimes = possibleMimes) {
   if (supportedMimes === null) {
-    var video = document.createElement('video');
-    supportedMimes = (mimes || possibleMimes).filter(function (mime) {
-      return video.canPlayType(mime) !== '';
-    });
+    const video = document.createElement('video');
+    supportedMimes = (mimes || possibleMimes).filter(mime => video.canPlayType(mime) !== '');
   }
   return supportedMimes;
 }
 
-var getLayoutParts = function getLayoutParts() {
-  var layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-  var _ref = layout !== null && layout.indexOf('-') !== false ? layout.split('-') : [layout, null, null],
-    _ref2 = _slicedToArray(_ref, 3),
-    horizontal = _ref2[0],
-    vertical = _ref2[1],
-    suffix = _ref2[2];
+const getLayoutParts = (layout = null) => {
+  const [horizontal, vertical, suffix] = layout !== null && layout.indexOf('-') !== false ? layout.split('-') : [layout, null, null];
   return {
-    horizontal: horizontal,
-    vertical: vertical,
-    suffix: suffix
+    horizontal,
+    vertical,
+    suffix
   };
 };
 
-var isHeaderFilled = function isHeaderFilled() {
-  var header = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const isHeaderFilled = (header = {}) => {
   if (header === null || typeof header === 'undefined') {
     return false;
   }
-  var _ref = header || {},
-    _ref$badge = _ref.badge,
-    badge = _ref$badge === void 0 ? null : _ref$badge;
-  var _ref2 = badge || {},
-    _ref2$active = _ref2.active,
-    badgeActive = _ref2$active === void 0 ? false : _ref2$active,
-    _ref2$label = _ref2.label,
-    label = _ref2$label === void 0 ? null : _ref2$label;
-  var _ref3 = label || {},
-    _ref3$body = _ref3.body,
-    body = _ref3$body === void 0 ? null : _ref3$body;
+  const {
+    badge = null
+  } = header || {};
+  const {
+    active: badgeActive = false,
+    label = null
+  } = badge || {};
+  const {
+    body = null
+  } = label || {};
   return badgeActive && body !== null;
 };
 
-var isFooterFilled = function isFooterFilled() {
-  var footer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+const isFooterFilled = (footer = {}) => {
   if (footer === null || typeof footer === 'undefined') {
     return false;
   }
-  var _ref = footer || {},
-    _ref$callToAction = _ref.callToAction,
-    callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction;
-  var _ref2 = callToAction || {},
-    _ref2$active = _ref2.active,
-    callToActionActive = _ref2$active === void 0 ? false : _ref2$active,
-    _ref2$label = _ref2.label,
-    label = _ref2$label === void 0 ? null : _ref2$label;
-  var _ref3 = label || {},
-    _ref3$body = _ref3.body,
-    body = _ref3$body === void 0 ? null : _ref3$body;
+  const {
+    callToAction = null
+  } = footer || {};
+  const {
+    active: callToActionActive = false,
+    label = null
+  } = callToAction || {};
+  const {
+    body = null
+  } = label || {};
   return callToActionActive && body !== null;
 };
 
-var isMessage = function isMessage(message) {
-  return isObject(message) && typeof message.defaultMessage !== 'undefined';
-};
+function isMessage(message) {
+  return message !== null && isObject(message) && typeof message.id !== 'undefined';
+}
 
-var isIos = function isIos() {
-  return ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
-  // iPad on iOS 13 detection
-  navigator.userAgent.includes('Mac') && 'ontouchend' in document;
-};
+const isIos = () => ['iPad Simulator', 'iPhone Simulator', 'iPod Simulator', 'iPad', 'iPhone', 'iPod'].includes(navigator.platform) ||
+// iPad on iOS 13 detection
+navigator.userAgent.includes('Mac') && 'ontouchend' in document;
 
-var isImageFilled = function isImageFilled(image) {
+const isImageFilled = image => {
   if (image === null || typeof image === 'undefined') {
     return false;
   }
-  var _ref = image || {},
-    _ref$media = _ref.media,
-    media = _ref$media === void 0 ? null : _ref$media,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? null : _ref$url;
+  const {
+    media = null,
+    url = null
+  } = image || {};
   return media !== null || url !== null;
 };
 
-var isTextFilled$1 = function isTextFilled(text) {
+const isTextFilled$1 = text => {
   if (text === null || typeof text === 'undefined') {
     return false;
   }
-  var _ref = text || {},
-    _ref$label = _ref.label,
-    label = _ref$label === void 0 ? null : _ref$label;
-  var _ref2 = label || {},
-    _ref2$length = _ref2.length,
-    length = _ref2$length === void 0 ? 0 : _ref2$length;
+  const {
+    label = null
+  } = text || {};
+  const {
+    length = 0
+  } = label || {};
   return typeof length === 'number' && length > 0;
 };
 
-var isTextFilled = function isTextFilled(text) {
+const isTextFilled = text => {
   if (text === null || typeof text === 'undefined') {
     return false;
   }
-  var _ref = text || {},
-    _ref$body = _ref.body,
-    body = _ref$body === void 0 ? null : _ref$body;
-  var _ref2 = body || {},
-    _ref2$length = _ref2.length,
-    length = _ref2$length === void 0 ? 0 : _ref2$length;
+  const {
+    body = null
+  } = text || {};
+  const {
+    length = 0
+  } = body || {};
   return typeof length === 'number' && length > 0;
 };
 
-var isValidUrl = function isValidUrl(string) {
+const isValidUrl = string => {
   if (string === null || typeof string === 'undefined') {
     return false;
   }
-  var url;
+  let url;
   try {
     url = new URL(string);
   } catch (_) {
@@ -1134,20 +965,28 @@ var isValidUrl = function isValidUrl(string) {
   return url.protocol === 'http:' || url.protocol === 'https:';
 };
 
-var createSchemaId = function createSchemaId(id) {
-  return "https://schemas.micromag.ca/0.1/".concat(id, ".json");
-};
+function mergeRefs(...refs) {
+  return value => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
 
-var schemaId = function schemaId(str) {
-  return createSchemaId(str.join('/'));
-};
+const createSchemaId = id => `https://schemas.micromag.ca/0.1/${id}.json`;
 
-var _setValue = function setValue(value, keyParts, fieldValue) {
-  var key = keyParts.shift();
-  var isArray = key.match(/^[0-9]+$/) !== null;
+const schemaId = str => createSchemaId(str.join('/'));
+
+const setValue = (value, keyParts, fieldValue) => {
+  const key = keyParts.shift();
+  const isArray = key.match(/^[0-9]+$/) !== null;
   if (value !== null || fieldValue !== null) {
     if (isArray) {
-      var index = parseInt(key, 10);
+      const index = parseInt(key, 10);
       // TODO: fix this with an explicit delete
       // instead on splicing out the element on null fieldValue
       // const newArrayValue =
@@ -1165,17 +1004,19 @@ var _setValue = function setValue(value, keyParts, fieldValue) {
       //           ]
       //         : [...value.slice(0, index), ...value.slice(index + 1)];
 
-      var newArrayValue = [].concat(_toConsumableArray(value.slice(0, index)), [keyParts.length > 0 ? _setValue(value !== null ? value[index] || null : null, keyParts, fieldValue) : fieldValue], _toConsumableArray(value.slice(index + 1)));
+      const newArrayValue = [...value.slice(0, index), keyParts.length > 0 ? setValue(value !== null ? value[index] || null : null, keyParts, fieldValue) : fieldValue, ...value.slice(index + 1)];
       return newArrayValue.length > 0 ? newArrayValue : null;
     }
-    return _objectSpread(_objectSpread({}, value), {}, _defineProperty({}, key, keyParts.length > 0 ? _setValue(value !== null ? value[key] || null : null, keyParts, fieldValue) : fieldValue));
+    return {
+      ...value,
+      [key]: keyParts.length > 0 ? setValue(value !== null ? value[key] || null : null, keyParts, fieldValue) : fieldValue
+    };
   }
   return null;
 };
 
-var slug = function slug(str) {
-  var separator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var toSlug;
+const slug = (str, separator = null) => {
+  let toSlug;
   if (separator === '-') {
     toSlug = kebabCase(str);
   } else {
@@ -1186,29 +1027,23 @@ var slug = function slug(str) {
   });
 };
 
-var unique = function unique(arrArg) {
-  return arrArg !== null ? arrArg.filter(function (elem, pos, arr) {
-    return arr.indexOf(elem) === pos;
-  }) : [];
-};
+const unique = arrArg => arrArg !== null ? arrArg.filter((elem, pos, arr) => arr.indexOf(elem) === pos) : [];
 
-var _validateFields = function validateFields(fields, value) {
-  return fields.reduce(function (acc, field) {
-    if (acc === true) {
-      if (field.type === 'fields' && field.fields) {
-        return _validateFields(field.fields, value);
-      }
-      var val = value && value[field.name] ? value[field.name] : false;
-      return !(field.required && !val);
+const validateFields = (fields, value) => fields.reduce((acc, field) => {
+  if (acc === true) {
+    if (field.type === 'fields' && field.fields) {
+      return validateFields(field.fields, value);
     }
-    return acc;
-  }, true);
-};
+    const val = value && value[field.name] ? value[field.name] : false;
+    return !(field.required && !val);
+  }
+  return acc;
+}, true);
 
-var getContrastingColor = function getContrastingColor(backgroundColor) {
-  var _ref = backgroundColor || {},
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'white' : _ref$color;
+const getContrastingColor = backgroundColor => {
+  const {
+    color = 'white'
+  } = backgroundColor || {};
   if (tinycolor.equals(color, tinycolor('white'))) {
     return '#A13DFF';
   }
@@ -1218,4 +1053,35 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { addNonBreakingSpaces, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, cssEscape, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, _getFieldByName as getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getFooterProps, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getScreenFieldsWithStates, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isFooterFilled, isHeaderFilled, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, _setValue as setFieldValue, slug, unique, _validateFields as validateFields };
+function getMediaCurrentTime(media, tsOffset = 0) {
+  return media !== null ? Math.max((media?.currentTime || 0) - tsOffset, 0) : 0;
+}
+function getMediaDuration(media, tsOffset = 0) {
+  return media !== null ? Math.max((media?.duration || 0) - tsOffset, 0) : 0;
+}
+function getMediaTimestampOffset(media, attributeName = 'data-ts-offset') {
+  return media !== null && media.hasAttribute(attributeName) ? parseFloat(media.getAttribute(attributeName)) : 0;
+}
+function getMediaIsMuted(media) {
+  return media !== null && (media.muted || media.volume === 0);
+}
+function getMediaIsPlaying(media) {
+  return media !== null && !!(media.currentTime > 0 && !media.paused && !media.ended && media.readyState > 2);
+}
+function getMediaIsBuffering(media) {
+  return media !== null && (media.networkState === media.NETWORK_LOADING || media.readyState < media.HAVE_FUTURE_DATA);
+}
+function getMediaIsReady(media) {
+  return media !== null && media.readyState >= 0;
+}
+function getMediaSrc(media) {
+  return media !== null ? media.currentSrc || media.src : null;
+}
+function getMediaHasAudio(media) {
+  return media !== null && (media.tagName.toLowerCase() === 'audio' || media.dataset.hasAudio === 'true');
+}
+function getMediaFilename(src) {
+  return src !== null ? src.split('/')[src.split('/').length - 1].split('#')[0] || null : null;
+}
+
+export { addNonBreakingSpaces, convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, cssEscape, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getFooterProps, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaCurrentTime, getMediaDuration, getMediaFilename, getMediaFilesAsArray, getMediaHasAudio, getMediaIsBuffering, getMediaIsMuted, getMediaIsPlaying, getMediaIsReady, getMediaSrc, getMediaThumbnail, getMediaTimestampOffset, getOptimalImageUrl, getScreenExtraField, getScreenFieldsWithStates, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isFooterFilled, isHeaderFilled, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, mergeRefs, schemaId, setValue as setFieldValue, slug, unique, validateFields };