@micromag/core 0.3.181 → 0.3.186

package/es/components.js

@@ -5,16 +5,15 @@ import PropTypes$1 from 'prop-types';
 import React, { useCallback, useState, useEffect, useRef, useMemo, Suspense } from 'react';
 import { Link as Link$1 } from 'react-router-dom';
 import { PropTypes } from '@micromag/core';
-import { FormattedMessage, useIntl, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
+import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import 'snake-case';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver } from '@micromag/core/hooks';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import ReactDOM from 'react-dom';
 import isArray from 'lodash/isArray';
@@ -25,6 +24,7 @@ import throttle from 'lodash/throttle';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
+import 'snake-case';
 import { faAd } from '@fortawesome/free-solid-svg-icons/faAd';
 import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
 import { faMusic } from '@fortawesome/free-solid-svg-icons/faMusic';
@@ -44,13 +44,13 @@ import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$O = {
+var propTypes$L = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$O = {
+var defaultProps$L = {
   isHtml: false,
   values: {}
 };
@@ -65,13 +65,13 @@ var Label = function Label(_ref) {
   }, children)) : children;
 };
 
-Label.propTypes = propTypes$O;
-Label.defaultProps = defaultProps$O;
+Label.propTypes = propTypes$L;
+Label.defaultProps = defaultProps$L;
 
-var styles$y = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
-var _excluded$c = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "withAnimations", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$N = {
+var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var propTypes$K = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -94,7 +94,6 @@ var propTypes$N = {
   withoutStyle: PropTypes$1.bool,
   withoutBootstrapStyles: PropTypes$1.bool,
   withoutTheme: PropTypes$1.bool,
-  withAnimations: PropTypes$1.bool,
   outline: PropTypes$1.bool,
   asLink: PropTypes$1.bool,
   className: PropTypes$1.string,
@@ -106,7 +105,7 @@ var propTypes$N = {
 
   })])
 };
-var defaultProps$N = {
+var defaultProps$K = {
   type: 'button',
   theme: null,
   size: null,
@@ -129,8 +128,6 @@ var defaultProps$N = {
   withoutStyle: false,
   withoutBootstrapStyles: false,
   withoutTheme: false,
-  withAnimations: true,
-  // @todo should be false by default, probably
   outline: false,
   asLink: false,
   className: null,
@@ -165,7 +162,6 @@ var Button$1 = function Button(_ref) {
       withoutStyle = _ref.withoutStyle,
       withoutBootstrapStyles = _ref.withoutBootstrapStyles,
       withoutTheme = _ref.withoutTheme,
-      withAnimations = _ref.withAnimations,
       asLink = _ref.asLink,
       outline = _ref.outline,
       onClick = _ref.onClick,
@@ -173,7 +169,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties(_ref, _excluded$c);
+      props = _objectWithoutProperties(_ref, _excluded$a);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
@@ -182,25 +178,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$w.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$w.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.icon, styles$y.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$w.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.center, styles$y.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$w.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.icon, styles$y.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$w.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
-  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$y.container, styles$y["icon-".concat(iconPosition)], (_ref8 = {}, _defineProperty(_ref8, styles$y.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$y.withIcon, hasIcon), _defineProperty(_ref8, styles$y.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$y.withText, text !== null), _defineProperty(_ref8, styles$y.withShadow, withShadow), _defineProperty(_ref8, styles$y.withAnimations, withAnimations), _defineProperty(_ref8, styles$y.isSmall, small), _defineProperty(_ref8, styles$y.isBig, big), _defineProperty(_ref8, styles$y.isLink, href !== null), _defineProperty(_ref8, styles$y.asLink, asLink), _defineProperty(_ref8, styles$y.isDisabled, disabled), _defineProperty(_ref8, styles$y.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty(_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$w.withIcon, hasIcon), _defineProperty(_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$w.withText, text !== null), _defineProperty(_ref8, styles$w.withShadow, withShadow), _defineProperty(_ref8, styles$w.isSmall, small), _defineProperty(_ref8, styles$w.isBig, big), _defineProperty(_ref8, styles$w.isLink, href !== null), _defineProperty(_ref8, styles$w.asLink, asLink), _defineProperty(_ref8, styles$w.isDisabled, disabled), _defineProperty(_ref8, styles$w.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$y.linkDisabled, disabled)]);
+    }, styles$w.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -208,13 +204,13 @@ var Button$1 = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React.createElement(Link$1, Object.assign({}, props, {
+    }), content) : /*#__PURE__*/React.createElement(Link$1, {
       to: href,
       className: linkClassNames,
       onClick: onClick,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content);
+    }, content);
   }
 
   return /*#__PURE__*/React.createElement("button", Object.assign({}, props, {
@@ -227,13 +223,13 @@ var Button$1 = function Button(_ref) {
   }), content);
 };
 
-Button$1.propTypes = propTypes$N;
-Button$1.defaultProps = defaultProps$N;
+Button$1.propTypes = propTypes$K;
+Button$1.defaultProps = defaultProps$K;
 
-var styles$x = {};
+var styles$v = {};
 
-var _excluded$b = ["className", "onClick", "theme"];
-var propTypes$M = {
+var _excluded$9 = ["className", "onClick", "theme"];
+var propTypes$J = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -242,7 +238,7 @@ var propTypes$M = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$M = {
+var defaultProps$J = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -261,7 +257,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -272,11 +268,11 @@ var Buttons = function Buttons(_ref) {
         _onClick = _button$onClick === void 0 ? null : _button$onClick,
         _button$theme = button.theme,
         buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties(button, _excluded$b);
+        buttonProps = _objectWithoutProperties(button, _excluded$9);
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$x.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$v.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -292,20 +288,20 @@ var Buttons = function Buttons(_ref) {
   }));
 };
 
-Buttons.propTypes = propTypes$M;
-Buttons.defaultProps = defaultProps$M;
+Buttons.propTypes = propTypes$J;
+Buttons.defaultProps = defaultProps$J;
 
-var _excluded$a = ["className"];
-var propTypes$L = {
+var _excluded$8 = ["className"];
+var propTypes$I = {
   className: PropTypes$1.string
 };
-var defaultProps$L = {
+var defaultProps$I = {
   className: null
 };
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$8);
 
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
@@ -317,799 +313,112 @@ var BackButton = function BackButton(_ref) {
   }, props));
 };
 
-BackButton.propTypes = propTypes$L;
-BackButton.defaultProps = defaultProps$L;
+BackButton.propTypes = propTypes$I;
+BackButton.defaultProps = defaultProps$I;
 
-var styles$w = {"container":"micromag-core-buttons-icon-button-container","icon":"micromag-core-buttons-icon-button-icon","label":"micromag-core-buttons-icon-button-label"};
+var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var _excluded$9 = ["className", "onClick", "label", "icon", "theme"];
-var propTypes$K = {
+var _excluded$7 = ["type"],
+    _excluded2 = ["component", "id", "settings"];
+var propTypes$H = {
+  name: PropTypes$1.string,
+  // .isRequired,
+  value: PropTypes.component,
+  form: PropTypes$1.string,
+  formComponents: PropTypes.components,
+  fields: PropTypes.fields,
   className: PropTypes$1.string,
-  onClick: null,
-  label: PropTypes$1.node,
-  icon: PropTypes$1.node,
-  theme: PropTypes.viewerTheme
+  onChange: PropTypes$1.func,
+  gotoFieldForm: PropTypes$1.func.isRequired,
+  closeFieldForm: PropTypes$1.func.isRequired,
+  fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
+
 };
-var defaultProps$K = {
+var defaultProps$H = {
+  name: null,
+  form: null,
+  formComponents: {},
+  fields: [],
+  value: null,
   className: null,
-  onClick: null,
-  label: null,
-  icon: null,
-  theme: null
+  onChange: null,
+  fieldContext: null
 };
 
-var IconButton = function IconButton(_ref) {
-  var className = _ref.className,
-      onClick = _ref.onClick,
-      label = _ref.label,
-      icon = _ref.icon;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$9);
+var FieldForm = function FieldForm(_ref) {
+  var name = _ref.name,
+      value = _ref.value,
+      form = _ref.form,
+      formComponents = _ref.formComponents,
+      fields = _ref.fields,
+      className = _ref.className,
+      onChange = _ref.onChange,
+      gotoFieldForm = _ref.gotoFieldForm,
+      closeFieldForm = _ref.closeFieldForm,
+      fieldContext = _ref.fieldContext;
+  var fieldsManager = useFieldsManager();
+  var field = getFieldFromPath(name.split('.'), fields, fieldsManager);
 
-  return /*#__PURE__*/React.createElement(Button$1, Object.assign({
-    className: classNames([styles$w.container, _defineProperty({}, className, className !== null)]),
-    labelClassName: styles$w.label,
-    iconClassName: styles$w.icon,
-    label: label,
-    icon: icon,
-    onClick: onClick,
-    withoutBootstrapStyles: true
-  }, props));
-};
+  var _ref2 = field || {},
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? null : _ref2$type,
+      fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
 
-IconButton.propTypes = propTypes$K;
-IconButton.defaultProps = defaultProps$K;
+  var fieldDefinition = fieldsManager.getDefinition(type) || null;
 
-/**
- * Core
- */
+  var fieldData = fieldDefinition || _objectSpread({}, field);
 
-PropTypes$1.shape({
-  listen: PropTypes$1.func.isRequired,
-  push: PropTypes$1.func.isRequired
-});
-PropTypes$1.shape({
-  pathname: PropTypes$1.string,
-  search: PropTypes$1.string
-});
-PropTypes$1.shape({
-  locale: PropTypes$1.string.isRequired,
-  formatMessage: PropTypes$1.func.isRequired
-});
-var defaultMessageContent = PropTypes$1.shape({
-  type: PropTypes$1.number,
-  value: PropTypes$1.string
-});
-var defaultMessage = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(defaultMessageContent)]);
-var message = PropTypes$1.shape({
-  id: PropTypes$1.string,
-  defaultMessage: defaultMessage.isRequired,
-  description: PropTypes$1.string
-});
-var text = PropTypes$1.oneOfType([message, PropTypes$1.string]);
-var label = PropTypes$1.oneOfType([message, PropTypes$1.node]);
-PropTypes$1.oneOf([401, 403, 404, 500]);
-PropTypes$1.oneOfType([PropTypes$1.shape({
-  current: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
+  var _ref3 = fieldData || {},
+      _ref3$component = _ref3.component,
+      fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
+      _ref3.id;
+      _ref3.settings;
+      var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
 
-}), PropTypes$1.func]);
-var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
-var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
-PropTypes$1.arrayOf(interaction);
-PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number, PropTypes$1.array]));
-PropTypes$1.shape({
-  currentTime: PropTypes$1.number,
-  duration: PropTypes$1.number
-});
-/**
- * Site
- */
+  var FieldComponent = useFieldComponent(fieldComponent);
+  var FormComponent = getComponentFromName(form, formComponents);
+  var fieldValue = get(value, name, null);
 
-PropTypes$1.shape({
-  id: PropTypes$1.number,
-  firstname: PropTypes$1.string,
-  lastname: PropTypes$1.string,
-  email: PropTypes$1.string,
-  gender: PropTypes$1.string,
-  birthdate: PropTypes$1.string
-});
-var menuItem = PropTypes$1.shape({
-  id: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
-  label: label,
-  url: PropTypes$1.string,
-  external: PropTypes$1.bool,
-  active: PropTypes$1.bool
-});
-PropTypes$1.arrayOf(menuItem);
-var breadcrumb = PropTypes$1.shape({
-  label: label,
-  url: PropTypes$1.string
-});
-PropTypes$1.arrayOf(breadcrumb);
-var device = PropTypes$1.shape({
-  id: PropTypes$1.string.isRequired
-});
-PropTypes$1.arrayOf(device);
-var modal = PropTypes$1.shape({
-  id: PropTypes$1.string.isRequired
-});
-PropTypes$1.arrayOf(modal);
-var panel = PropTypes$1.shape({
-  id: PropTypes$1.string.isRequired
-});
-PropTypes$1.arrayOf(panel);
-var button = PropTypes$1.shape({
-  label: label,
-  onClick: PropTypes$1.func
-});
-PropTypes$1.arrayOf(button);
-var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-PropTypes$1.oneOf(bootstrapThemeStrings);
-PropTypes$1.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
-PropTypes$1.oneOf(['lg', 'sm', null]);
-PropTypes$1.oneOf(['lg', 'sm', null]);
-PropTypes$1.oneOf(['start', 'end']);
-var component = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.func]);
-PropTypes$1.objectOf(component);
-/**
- * Forms
- */
+  var onFieldChange = function onFieldChange(newFieldValue) {
+    // const { name, fields: subFields = null } = field || {};
+    var newValue = setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
+    );
 
-var errors = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.string)]);
-PropTypes$1.objectOf(errors);
-var selectOption = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
-  value: PropTypes$1.any,
-  // eslint-disable-line
-  label: label
-})]);
-PropTypes$1.arrayOf(selectOption);
-var formField = PropTypes$1.shape({
-  name: PropTypes$1.string,
-  component: component
-});
-PropTypes$1.arrayOf(formField);
-/**
- * Medias
- */
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  };
 
-var mediaMetadataShape = {
-  filename: PropTypes$1.string,
-  size: PropTypes$1.number,
-  mime: PropTypes$1.string
-};
-var mediaFile = PropTypes$1.shape({
-  id: PropTypes$1.string,
-  handle: PropTypes$1.string,
-  type: PropTypes$1.string,
-  mime: PropTypes$1.string,
-  url: PropTypes$1.string
-});
-var mediaShape = {
-  id: PropTypes$1.string,
-  type: PropTypes$1.string.isRequired,
-  url: PropTypes$1.string,
-  // .isRequired,
-  thumbnail_url: PropTypes$1.string,
-  name: PropTypes$1.string,
-  metadata: PropTypes$1.shape(_objectSpread({}, mediaMetadataShape)),
-  files: PropTypes$1.objectOf(mediaFile)
-};
-var media = PropTypes$1.shape(mediaShape);
-PropTypes$1.arrayOf(media);
-PropTypes$1.oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
-var imageMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
-  type: PropTypes$1.oneOf(['image', 'video']),
-  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
-    width: PropTypes$1.number,
-    height: PropTypes$1.number
-  }))
-}));
-PropTypes$1.arrayOf(imageMedia);
-var fontMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
-  type: PropTypes$1.oneOf(['font']),
-  metadata: PropTypes$1.shape(_objectSpread({}, mediaMetadataShape))
-}));
-PropTypes$1.arrayOf(fontMedia);
-var videoMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
-  type: PropTypes$1.oneOf(['video']),
-  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
-    width: PropTypes$1.number,
-    height: PropTypes$1.number,
-    duration: PropTypes$1.number
-  }))
-}));
-PropTypes$1.arrayOf(videoMedia);
-var audioMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
-  type: PropTypes$1.oneOf(['audio']),
-  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
-    duration: PropTypes$1.number
-  }))
-}));
-PropTypes$1.arrayOf(audioMedia);
-var closedCaptionsMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
-  type: PropTypes$1.oneOf(['closed-captions'])
-}));
-/**
- * Style
- */
-
-var font = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
-  type: PropTypes$1.oneOf(['system', 'google', 'custom']),
-  name: PropTypes$1.string,
-  media: fontMedia
-})]);
-PropTypes$1.arrayOf(font);
-var textAlign = PropTypes$1.oneOf(['left', 'right', 'center']);
-var color = PropTypes$1.shape({
-  color: PropTypes$1.string,
-  alpha: PropTypes$1.number
-});
-var textStyle = PropTypes$1.shape({
-  fontFamily: font,
-  fontSize: PropTypes$1.number,
-  fontStyle: PropTypes$1.shape({
-    bold: PropTypes$1.bool,
-    italic: PropTypes$1.bool,
-    underline: PropTypes$1.bool,
-    upperCase: PropTypes$1.bool
-  }),
-  align: textAlign,
-  color: color,
-  letterSpacing: PropTypes$1.number,
-  lineHeight: PropTypes$1.number
-});
-var borderTypes = PropTypes$1.oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
-var shadowType = PropTypes$1.shape({
-  shadowDistance: PropTypes$1.number,
-  shadowBlur: PropTypes$1.number,
-  shadowColor: color
-});
-PropTypes$1.shape({
-  width: PropTypes$1.number,
-  style: borderTypes,
-  radius: PropTypes$1.number,
-  color: color
-});
-var boxStyle = PropTypes$1.shape({
-  backgroundColor: color,
-  borderRadius: PropTypes$1.number,
-  borderWidth: PropTypes$1.number,
-  borderColor: color,
-  borderStyle: borderTypes,
-  shadow: shadowType
-});
-PropTypes$1.shape({
-  top: PropTypes$1.number,
-  bottom: PropTypes$1.number
-});
-PropTypes$1.arrayOf(PropTypes$1.shape({
-  rows: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.arrayOf(PropTypes$1.number)]),
-  columns: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.arrayOf(PropTypes$1.number)])
-}));
-var objectFitSize = PropTypes$1.oneOf(['cover', 'contain', null]);
-PropTypes$1.shape({
-  fit: objectFitSize,
-  horizontalPosition: PropTypes$1.oneOf(['left', 'center', 'right']),
-  verticalPosition: PropTypes$1.oneOf(['top', 'center', 'bottom'])
-});
-/**
- * Elements
- */
-
-var textElement = PropTypes$1.shape({
-  body: PropTypes$1.string,
-  textStyle: textStyle
-});
-var headingElement = textElement;
-PropTypes$1.shape({
-  label: PropTypes$1.string,
-  textStyle: textStyle
-});
-var imageElement = PropTypes$1.shape({
-  media: imageMedia
-});
-PropTypes$1.arrayOf(imageElement);
-PropTypes$1.shape({
-  media: videoMedia,
-  autoPlay: PropTypes$1.bool,
-  loop: PropTypes$1.bool,
-  closedCaptions: closedCaptionsMedia,
-  withSeekBar: PropTypes$1.bool,
-  withControls: PropTypes$1.bool
-});
-var visualElement = PropTypes$1.shape({
-  media: imageMedia
-});
-PropTypes$1.arrayOf(visualElement);
-PropTypes$1.shape({
-  media: audioMedia,
-  autoPlay: PropTypes$1.bool,
-  loop: PropTypes$1.bool,
-  closedCaptions: closedCaptionsMedia,
-  withPlayPause: PropTypes$1.bool
-});
-PropTypes$1.shape({
-  media: closedCaptionsMedia
-});
-var backgroundElement = PropTypes$1.shape({
-  color: color,
-  image: imageMedia,
-  video: videoMedia
-});
-var imageElementWithCaption = PropTypes$1.shape({
-  image: imageMedia,
-  caption: textElement
-});
-PropTypes$1.arrayOf(imageElementWithCaption);
-var stackDirection = PropTypes$1.oneOf(['horizontal', 'vertical']);
-var stackAlign = PropTypes$1.oneOf(['start', 'center', 'end']);
-var stackSpacing = PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.oneOf(['between', 'evenly', 'around'])]);
-PropTypes$1.shape({
-  direction: stackDirection,
-  align: stackAlign,
-  width: PropTypes$1.number,
-  height: PropTypes$1.number,
-  spacing: stackSpacing,
-  reverse: PropTypes$1.bool
-});
-PropTypes$1.shape({
-  layout: PropTypes$1.arrayOf(PropTypes$1.string),
-  spacing: PropTypes$1.number
-});
-var geoPosition = PropTypes$1.shape({
-  lat: PropTypes$1.number,
-  lng: PropTypes$1.number
-});
-var markerShape = {
-  id: PropTypes$1.number,
-  geoPosition: geoPosition,
-  title: headingElement,
-  subtitle: headingElement,
-  description: textElement
-};
-var marker = PropTypes$1.shape(_objectSpread({}, markerShape));
-PropTypes$1.arrayOf(marker);
-var markerWithImage = PropTypes$1.shape(_objectSpread(_objectSpread({}, markerShape), {}, {
-  image: imageMedia
-}));
-PropTypes$1.arrayOf(markerWithImage);
-var answerShape = {
-  id: PropTypes$1.string,
-  label: textElement
-};
-var answer = PropTypes$1.shape(_objectSpread({}, answerShape));
-var quizAnswer = PropTypes$1.shape(_objectSpread(_objectSpread({}, answerShape), {}, {
-  good: PropTypes$1.bool
-}));
-PropTypes$1.arrayOf(answer);
-PropTypes$1.arrayOf(quizAnswer);
-var callToActionTypes = PropTypes$1.oneOf(['swipe-up', 'button']);
-PropTypes$1.shape({
-  active: PropTypes$1.bool,
-  type: callToActionTypes,
-  url: PropTypes$1.string,
-  label: textElement,
-  buttonStyle: boxStyle
-});
-var speaker = PropTypes$1.shape({
-  id: PropTypes$1.string,
-  name: PropTypes$1.string,
-  avatar: imageMedia,
-  side: PropTypes$1.oneOf(['left', 'right']),
-  color: color
-});
-var speakers = PropTypes$1.arrayOf(speaker);
-var conversationMessage = PropTypes$1.shape({
-  speaker: PropTypes$1.string,
-  message: PropTypes$1.string,
-  image: imageMedia
-});
-var conversationMessages = PropTypes$1.arrayOf(conversationMessage);
-PropTypes$1.shape({
-  speakers: speakers,
-  textStyle: textStyle,
-  messages: conversationMessages
-});
-/**
- * Definitions
- */
-
-var fieldShape = {
-  name: PropTypes$1.string,
-  type: PropTypes$1.string.isRequired,
-  label: text
-};
-var field = PropTypes$1.shape(_objectSpread(_objectSpread({}, fieldShape), {}, {
-  isSection: PropTypes$1.bool,
-  fields: PropTypes$1.arrayOf(PropTypes$1.shape(fieldShape))
-}));
-var fields = PropTypes$1.arrayOf(field);
-var screenDefinition = PropTypes$1.shape({
-  id: PropTypes$1.string.isRequired,
-  type: PropTypes$1.oneOf(['screen']).isRequired,
-  title: text.isRequired,
-  layouts: PropTypes$1.arrayOf(PropTypes$1.string),
-  fields: fields
-});
-PropTypes$1.arrayOf(screenDefinition);
-var fieldDefinition = PropTypes$1.shape({
-  id: PropTypes$1.string.isRequired,
-  type: PropTypes$1.oneOf(['field']).isRequired,
-  title: text.isRequired,
-  fields: fields
-});
-PropTypes$1.arrayOf(fieldDefinition);
-/**
- * Components
- */
-
-var storyComponentShape = {
-  type: PropTypes$1.string.isRequired
-};
-var storyComponent = PropTypes$1.shape(_objectSpread({}, storyComponentShape));
-PropTypes$1.arrayOf(storyComponent);
-var screenComponent = PropTypes$1.shape(_objectSpread({}, storyComponentShape));
-var screenComponents = PropTypes$1.arrayOf(screenComponent);
-
-/**
- * Theme
- */
-
-var theme = PropTypes$1.shape({
-  id: PropTypes$1.string,
-  textStyles: PropTypes$1.objectOf(textStyle),
-  // renamed to textstyles
-  background: backgroundElement,
-  colors: PropTypes$1.objectOf(color),
-  components: screenComponents
-});
-var viewerTheme = PropTypes$1.shape(_objectSpread({
-  logo: imageMedia
-}, theme));
-/**
- * Branding
- */
-// export const branding = PropTypes.shape({
-//     logo: imageMedia,
-//     primaryColor: color,
-//     secondaryColor: color,
-//     backgroundColor: color,
-//     textStyle,
-// });
-
-/**
- * Metadata
- */
-
-var metadata = PropTypes$1.shape({
-  description: PropTypes$1.string,
-  shareUrl: PropTypes$1.string,
-  shareImage: imageMedia,
-  favIcon: imageMedia
-});
-/**
- * Story
- */
-
-PropTypes$1.shape({
-  id: PropTypes$1.string,
-  theme: theme,
-  components: screenComponents,
-  metadata: metadata
-});
-/**
- * Render
- */
-
-var deviceScreen = PropTypes$1.shape({
-  name: PropTypes$1.string.isRequired,
-  mediaQuery: PropTypes$1.string
-});
-PropTypes$1.arrayOf(deviceScreen);
-PropTypes$1.shape({
-  screen: PropTypes$1.string,
-  screens: PropTypes$1.arrayOf(PropTypes$1.string),
-  width: PropTypes$1.number,
-  height: PropTypes$1.number,
-  landscape: PropTypes$1.bool
-});
-PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
-/**
- * Screens
- */
-
-PropTypes$1.shape({
-  width: PropTypes$1.number,
-  height: PropTypes$1.number
-});
-PropTypes$1.shape({
-  width: PropTypes$1.number,
-  height: PropTypes$1.number,
-  url: PropTypes$1.string,
-  target: target,
-  iframe: PropTypes$1.string,
-  image: imageMedia
-});
-PropTypes$1.shape({
-  src: PropTypes$1.string,
-  track: PropTypes$1.string,
-  trackLng: PropTypes$1.number,
-  controls: PropTypes$1.bool
-});
-var slide = PropTypes$1.shape({
-  image: imageMedia,
-  text: PropTypes$1.string
-});
-PropTypes$1.arrayOf(slide); // export const imageStyle = PropTypes.shape({
-//     alt: PropTypes.string,
-//     fit: PropTypes.object,
-// });
-
-PropTypes$1.shape({});
-/**
- * Transitions
- */
-
-var transitionName = PropTypes$1.oneOf(['fade', 'scale', 'slide']);
-var transitionParams = {
-  duration: PropTypes$1.number,
-  easing: PropTypes$1.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
-};
-var transition = PropTypes$1.oneOfType([transitionName.isRequired, PropTypes$1.shape(_objectSpread({
-  name: transitionName.isRequired
-}, transitionParams))]);
-PropTypes$1.shape({
-  "in": transition,
-  out: transition
-});
-/**
- * Search
- */
-
-var searchFilter = PropTypes$1.shape({
-  type: PropTypes$1.string,
-  value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.number])
-});
-PropTypes$1.arrayOf(searchFilter);
-/**
- * Payments
- */
-
-var paymentItem = PropTypes$1.shape({
-  id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
-  date: PropTypes$1.string,
-  type: PropTypes$1.string,
-  invoice_link: PropTypes$1.string,
-  amount: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])
-});
-PropTypes$1.arrayOf(paymentItem);
-/**
- * Page Metadada
- */
-
-var pageMetadata = PropTypes$1.shape({
-  canonical: PropTypes$1.string,
-  description: PropTypes$1.string,
-  keywords: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.array]),
-  image: PropTypes$1.shape({
-    url: PropTypes$1.string
-  }),
-  favicon: PropTypes$1.shape({
-    url: PropTypes$1.string
-  }),
-  rssUrl: PropTypes$1.string,
-  atomUrl: PropTypes$1.string,
-  microformats: PropTypes$1.arrayOf(PropTypes$1.shape({}))
-});
-PropTypes$1.shape({
-  name: textElement,
-  avatar: PropTypes$1.shape({
-    url: PropTypes$1.string
-  })
-});
-PropTypes$1.shape({
-  id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
-  name: PropTypes$1.string
-});
-
-var _excluded$8 = ["className", "onClick", "theme"];
-var propTypes$J = {
-  className: PropTypes$1.string,
-  onClick: PropTypes$1.func,
-  theme: viewerTheme
-};
-var defaultProps$J = {
-  className: null,
-  onClick: null,
-  theme: null
-};
-
-var CloseButton = function CloseButton(_ref) {
-  var className = _ref.className,
-      onClick = _ref.onClick;
-      _ref.theme;
-      var props = _objectWithoutProperties(_ref, _excluded$8);
-
-  var intl = useIntl();
-  return /*#__PURE__*/React.createElement(IconButton, Object.assign({
-    className: classNames([_defineProperty({}, className, className !== null)]),
-    label: intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    icon: /*#__PURE__*/React.createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
-      fill: "currentColor"
-    }, /*#__PURE__*/React.createElement("polygon", {
-      points: "9.95 4.11 8.89 3.05 5 6.94 1.11 3.05 0.05 4.11 3.94 8 0.05 11.89 1.11 12.95 5 9.06 8.89 12.95 9.95 11.89 6.06 8 9.95 4.11"
-    })),
-    onClick: onClick
-  }, props));
-};
-
-CloseButton.propTypes = propTypes$J;
-CloseButton.defaultProps = defaultProps$J;
-
-var styles$v = {"container":"micromag-core-buttons-sliding-buttons-container","additional":"micromag-core-buttons-sliding-buttons-additional"};
-
-var propTypes$I = {
-  className: PropTypes$1.string,
-  current: PropTypes$1.number,
-  buttons: PropTypes$1.arrayOf(PropTypes$1.node),
-  buttonsProps: PropTypes$1.arrayOf(PropTypes$1.objectOf(PropTypes$1.any)) // eslint-disable-line
-
-};
-var defaultProps$I = {
-  className: null,
-  current: 0,
-  buttons: null,
-  buttonsProps: null
-};
-
-var SlidingButtons = function SlidingButtons(_ref) {
-  var className = _ref.className,
-      current = _ref.current,
-      buttons = _ref.buttons,
-      buttonsProps = _ref.buttonsProps;
-  if (buttons === null) return false;
-
-  var getSlidingButtonStyles = function getSlidingButtonStyles(p, i) {
-    var t = i - p;
-    return {
-      transform: "translateY(".concat(t * -100, "%)")
-    };
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)])
-  }, buttons.map(function (b, i) {
-    var SlidingButton = b;
-    var buttonProps = buttonsProps[i] || {};
-    var extraProps = buttonsProps !== null ? buttonProps : null;
-
-    var _ref3 = extraProps || {},
-        _ref3$className = _ref3.className,
-        extraClassNames = _ref3$className === void 0 ? null : _ref3$className;
-
-    return /*#__PURE__*/React.createElement(SlidingButton, Object.assign({}, extraProps, {
-      className: classNames([styles$v.icon, extraClassNames, _defineProperty({}, styles$v.additional, i > 0)]),
-      style: getSlidingButtonStyles(current, i)
-    }));
-  }));
-};
-
-SlidingButtons.propTypes = propTypes$I;
-SlidingButtons.defaultProps = defaultProps$I;
-
-var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
-
-var _excluded$7 = ["type"],
-    _excluded2 = ["component", "id", "settings"];
-var propTypes$H = {
-  name: PropTypes$1.string,
-  // .isRequired,
-  value: PropTypes.component,
-  form: PropTypes$1.string,
-  formComponents: PropTypes.components,
-  fields: PropTypes.fields,
-  className: PropTypes$1.string,
-  onChange: PropTypes$1.func,
-  gotoFieldForm: PropTypes$1.func.isRequired,
-  closeFieldForm: PropTypes$1.func.isRequired,
-  fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
-
-};
-var defaultProps$H = {
-  name: null,
-  form: null,
-  formComponents: {},
-  fields: [],
-  value: null,
-  className: null,
-  onChange: null,
-  fieldContext: null
-};
-
-var FieldForm = function FieldForm(_ref) {
-  var name = _ref.name,
-      value = _ref.value,
-      form = _ref.form,
-      formComponents = _ref.formComponents,
-      fields = _ref.fields,
-      className = _ref.className,
-      onChange = _ref.onChange,
-      gotoFieldForm = _ref.gotoFieldForm,
-      closeFieldForm = _ref.closeFieldForm,
-      fieldContext = _ref.fieldContext;
-  var fieldsManager = useFieldsManager();
-  var field = getFieldFromPath(name.split('.'), fields, fieldsManager);
-
-  var _ref2 = field || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
-
-  var fieldDefinition = fieldsManager.getDefinition(type) || null;
-
-  var fieldData = fieldDefinition || _objectSpread({}, field);
-
-  var _ref3 = fieldData || {},
-      _ref3$component = _ref3.component,
-      fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
-      _ref3.id;
-      _ref3.settings;
-      var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
-
-  var FieldComponent = useFieldComponent(fieldComponent);
-  var FormComponent = getComponentFromName(form, formComponents);
-  var fieldValue = get(value, name, null);
-
-  var onFieldChange = function onFieldChange(newFieldValue) {
-    // const { name, fields: subFields = null } = field || {};
-    var newValue = setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
-    );
-
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  };
-
-  var closeForm = useCallback(function () {
-    return closeFieldForm(name, form);
-  }, [name, form, closeFieldForm]);
-  var formProps = {
-    name: name,
-    value: fieldValue,
-    onChange: onFieldChange,
-    gotoFieldForm: gotoFieldForm,
-    closeFieldForm: closeFieldForm,
-    closeForm: closeForm
-  };
-
-  if (form !== null) {
-    return FormComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
-      context: fieldContext
-    }, /*#__PURE__*/React.createElement(FormComponent, Object.assign({
-      field: field
-    }, formProps, {
-      className: className
-    }))) : null;
-  } // Use field component with isForm props
-
-
-  return FieldComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
-    context: fieldContext
-  }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
-    className: className
-  }, definitionProps, fieldProps, {
-    isForm: true
-  }, formProps))) : null;
+  var closeForm = useCallback(function () {
+    return closeFieldForm(name, form);
+  }, [name, form, closeFieldForm]);
+  var formProps = {
+    name: name,
+    value: fieldValue,
+    onChange: onFieldChange,
+    gotoFieldForm: gotoFieldForm,
+    closeFieldForm: closeFieldForm,
+    closeForm: closeForm
+  };
+
+  if (form !== null) {
+    return FormComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
+      context: fieldContext
+    }, /*#__PURE__*/React.createElement(FormComponent, Object.assign({
+      field: field
+    }, formProps, {
+      className: className
+    }))) : null;
+  } // Use field component with isForm props
+
+
+  return FieldComponent !== null ? /*#__PURE__*/React.createElement(FieldContextProvider, {
+    context: fieldContext
+  }, /*#__PURE__*/React.createElement(FieldComponent, Object.assign({
+    className: className
+  }, definitionProps, fieldProps, {
+    isForm: true
+  }, formProps))) : null;
 };
 
 FieldForm.propTypes = propTypes$H;
@@ -2914,237 +2223,789 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
 PlaceholderBlock.propTypes = propTypes$i;
 PlaceholderBlock.defaultProps = defaultProps$i;
 
-/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable react/jsx-props-no-spreading */
+
+var propTypes$h = {
+  name: PropTypes$1.string.isRequired,
+  components: PropTypes$1.object.isRequired,
+  // eslint-disable-line
+  props: PropTypes$1.object,
+  // eslint-disable-line
+  isPlaceholder: PropTypes$1.bool,
+  className: PropTypes$1.string,
+  placeholderProps: PropTypes$1.object // eslint-disable-line
+
+};
+var defaultProps$h = {
+  props: {},
+  isPlaceholder: false,
+  className: null,
+  placeholderProps: null
+};
+
+var ElementComponent = function ElementComponent(_ref) {
+  var name = _ref.name,
+      components = _ref.components,
+      props = _ref.props,
+      isPlaceholder = _ref.isPlaceholder,
+      className = _ref.className,
+      placeholderProps = _ref.placeholderProps;
+
+  if (!name) {
+    return 'Bad component name';
+  }
+
+  if (isPlaceholder) {
+    // TODO: figure out what this did
+    // const PlaceholderComponent = Placeholders[pascalCase(name)];
+    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
+  }
+
+  var RealComponent = components[pascalCase(name)];
+
+  if (!RealComponent) {
+    return 'Bad component';
+  }
+
+  return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
+    className: className
+  }));
+};
+
+ElementComponent.propTypes = propTypes$h;
+ElementComponent.defaultProps = defaultProps$h;
+
+var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
+
+var propTypes$g = {
+  children: PropTypes$1.node,
+  withoutBorder: PropTypes$1.bool,
+  light: PropTypes$1.bool,
+  className: PropTypes$1.string
+};
+var defaultProps$g = {
+  children: null,
+  withoutBorder: false,
+  light: false,
+  className: null
+};
+
+var Empty = function Empty(_ref) {
+  var _ref2;
+
+  var children = _ref.children,
+      withoutBorder = _ref.withoutBorder,
+      light = _ref.light,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$g.light, light), _defineProperty(_ref2, className, className), _ref2)])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$g.middle
+  }, /*#__PURE__*/React.createElement(Label, null, children)));
+};
+
+Empty.propTypes = propTypes$g;
+Empty.defaultProps = defaultProps$g;
+
+var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
+  var _ref = media || {},
+      _ref$files = _ref.files,
+      files = _ref$files === void 0 ? {} : _ref$files;
+
+  var _ref2 = files || {},
+      _ref2$original = _ref2.original,
+      originalFile = _ref2$original === void 0 ? null : _ref2$original;
+
+  var _ref3 = originalFile || {},
+      _ref3$name = _ref3.name,
+      originalName = _ref3$name === void 0 ? null : _ref3$name,
+      _ref3$mime = _ref3.mime,
+      originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
+
+  var urls = formats.reduce(function (currentUrls, format) {
+    var finalFormat = isObject(format) ? format.format : format;
+    var formatExtension = isObject(format) ? format.name : format;
+    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
+
+    if (file !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
+    var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
+
+    if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
+      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    return currentUrls;
+  }, []);
+  return urls;
+};
+
+var propTypes$f = {
+  fonts: PropTypes.fonts,
+  formats: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+    name: PropTypes$1.string,
+    format: PropTypes$1.string
+  })]))
+};
+var defaultProps$f = {
+  fonts: [],
+  formats: ['eot', 'woff2', 'woff', {
+    name: 'otf',
+    format: 'opentype'
+  }, {
+    name: 'ttf',
+    format: 'truetype'
+  }, 'svg']
+};
+
+var FontFaces = function FontFaces(_ref4) {
+  var fonts = _ref4.fonts,
+      formats = _ref4.formats;
+  var fontFaces = (fonts || []).filter(function (it) {
+    return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
+  }).reduce(function (fontFontFaces, _ref5) {
+    var _ref5$name = _ref5.name,
+        name = _ref5$name === void 0 ? null : _ref5$name,
+        _ref5$media = _ref5.media,
+        media = _ref5$media === void 0 ? null : _ref5$media,
+        _ref5$variants = _ref5.variants,
+        variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+
+    if (name === null) {
+      return fontFontFaces;
+    }
+
+    var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
+    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
+      var weight = _ref6.weight,
+          style = _ref6.style,
+          _ref6$media = _ref6.media,
+          variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+
+      if (variantMedia == null) {
+        return null;
+      }
+
+      var variantUrls = getUrlsFromMedia(variantMedia, formats);
+      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
+    })));
+  }, []).filter(function (it) {
+    return it !== null;
+  });
+  return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
+    type: "text/css"
+  }, fontFaces.join('\n')) : null;
+};
+
+FontFaces.propTypes = propTypes$f;
+FontFaces.defaultProps = defaultProps$f;
 
-var propTypes$h = {
-  name: PropTypes$1.string.isRequired,
-  components: PropTypes$1.object.isRequired,
-  // eslint-disable-line
-  props: PropTypes$1.object,
-  // eslint-disable-line
-  isPlaceholder: PropTypes$1.bool,
-  className: PropTypes$1.string,
-  placeholderProps: PropTypes$1.object // eslint-disable-line
+var styles$f = {};
 
+var propTypes$e = {
+  thumbnail: PropTypes$1.node,
+  thumbnailAlign: PropTypes$1.oneOf(['top', 'center', 'bottom']),
+  children: PropTypes$1.node,
+  title: PropTypes.label,
+  className: PropTypes$1.string,
+  thumbnailClassName: PropTypes$1.string,
+  bodyClassName: PropTypes$1.string,
+  titleClassName: PropTypes$1.string
 };
-var defaultProps$h = {
-  props: {},
-  isPlaceholder: false,
+var defaultProps$e = {
+  thumbnail: null,
+  thumbnailAlign: 'top',
+  children: null,
+  title: null,
   className: null,
-  placeholderProps: null
+  thumbnailClassName: null,
+  bodyClassName: null,
+  titleClassName: null
 };
 
-var ElementComponent = function ElementComponent(_ref) {
-  var name = _ref.name,
-      components = _ref.components,
-      props = _ref.props,
-      isPlaceholder = _ref.isPlaceholder,
+var Media = function Media(_ref) {
+  var thumbnail = _ref.thumbnail,
+      thumbnailAlign = _ref.thumbnailAlign,
+      children = _ref.children,
+      title = _ref.title,
       className = _ref.className,
-      placeholderProps = _ref.placeholderProps;
-
-  if (!name) {
-    return 'Bad component name';
-  }
+      thumbnailClassName = _ref.thumbnailClassName,
+      bodyClassName = _ref.bodyClassName,
+      titleClassName = _ref.titleClassName;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
+  }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: thumbnail,
+    alt: title,
+    className: classNames(['me-3', styles$f.thumbnail, _defineProperty({
+      'align-self-start': thumbnailAlign === 'top',
+      'align-self-center': thumbnailAlign === 'center',
+      'align-self-end': thumbnailAlign === 'bottom'
+    }, thumbnailClassName, thumbnailClassName !== null)])
+  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
+    className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+  }, title !== null ? /*#__PURE__*/React.createElement("h5", {
+    className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
+};
 
-  if (isPlaceholder) {
-    // TODO: figure out what this did
-    // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/React.createElement(PlaceholderBlock, placeholderProps);
-  }
+Media.propTypes = propTypes$e;
+Media.defaultProps = defaultProps$e;
 
-  var RealComponent = components[pascalCase(name)];
+/**
+ * Core
+ */
 
-  if (!RealComponent) {
-    return 'Bad component';
-  }
+PropTypes$1.shape({
+  listen: PropTypes$1.func.isRequired,
+  push: PropTypes$1.func.isRequired
+});
+PropTypes$1.shape({
+  pathname: PropTypes$1.string,
+  search: PropTypes$1.string
+});
+PropTypes$1.shape({
+  locale: PropTypes$1.string.isRequired,
+  formatMessage: PropTypes$1.func.isRequired
+});
+var defaultMessageContent = PropTypes$1.shape({
+  type: PropTypes$1.number,
+  value: PropTypes$1.string
+});
+var defaultMessage = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(defaultMessageContent)]);
+var message = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  defaultMessage: defaultMessage.isRequired,
+  description: PropTypes$1.string
+});
+var text = PropTypes$1.oneOfType([message, PropTypes$1.string]);
+var label = PropTypes$1.oneOfType([message, PropTypes$1.node]);
+PropTypes$1.oneOf([401, 403, 404, 500]);
+PropTypes$1.oneOfType([PropTypes$1.shape({
+  current: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 
-  return /*#__PURE__*/React.createElement(RealComponent, Object.assign({}, props, {
-    className: className
-  }));
-};
+}), PropTypes$1.func]);
+var target = PropTypes$1.oneOf(['_blank', '_self', '_parent']);
+var interaction = PropTypes$1.oneOf(['tap', 'swipe']);
+PropTypes$1.arrayOf(interaction);
+PropTypes$1.objectOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number, PropTypes$1.array]));
+PropTypes$1.shape({
+  currentTime: PropTypes$1.number,
+  duration: PropTypes$1.number
+});
+/**
+ * Site
+ */
 
-ElementComponent.propTypes = propTypes$h;
-ElementComponent.defaultProps = defaultProps$h;
+PropTypes$1.shape({
+  id: PropTypes$1.number,
+  firstname: PropTypes$1.string,
+  lastname: PropTypes$1.string,
+  email: PropTypes$1.string,
+  gender: PropTypes$1.string,
+  birthdate: PropTypes$1.string
+});
+var menuItem = PropTypes$1.shape({
+  id: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
+  label: label,
+  url: PropTypes$1.string,
+  external: PropTypes$1.bool,
+  active: PropTypes$1.bool
+});
+PropTypes$1.arrayOf(menuItem);
+var breadcrumb = PropTypes$1.shape({
+  label: label,
+  url: PropTypes$1.string
+});
+PropTypes$1.arrayOf(breadcrumb);
+var device = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired
+});
+PropTypes$1.arrayOf(device);
+var modal = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired
+});
+PropTypes$1.arrayOf(modal);
+var panel = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired
+});
+PropTypes$1.arrayOf(panel);
+var button = PropTypes$1.shape({
+  label: label,
+  onClick: PropTypes$1.func
+});
+PropTypes$1.arrayOf(button);
+var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+PropTypes$1.oneOf(bootstrapThemeStrings);
+PropTypes$1.oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
+PropTypes$1.oneOf(['lg', 'sm', null]);
+PropTypes$1.oneOf(['lg', 'sm', null]);
+PropTypes$1.oneOf(['start', 'end']);
+var component = PropTypes$1.oneOfType([PropTypes$1.object, PropTypes$1.func]);
+PropTypes$1.objectOf(component);
+/**
+ * Forms
+ */
 
-var styles$g = {"container":"micromag-core-partials-empty-container","middle":"micromag-core-partials-empty-middle","withoutBorder":"micromag-core-partials-empty-withoutBorder","invertColor":"micromag-core-partials-empty-invertColor"};
+var errors = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.string)]);
+PropTypes$1.objectOf(errors);
+var selectOption = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+  value: PropTypes$1.any,
+  // eslint-disable-line
+  label: label
+})]);
+PropTypes$1.arrayOf(selectOption);
+var formField = PropTypes$1.shape({
+  name: PropTypes$1.string,
+  component: component
+});
+PropTypes$1.arrayOf(formField);
+/**
+ * Medias
+ */
 
-var propTypes$g = {
-  children: PropTypes$1.node,
-  withoutBorder: PropTypes$1.bool,
-  light: PropTypes$1.bool,
-  className: PropTypes$1.string
+var mediaMetadataShape = {
+  filename: PropTypes$1.string,
+  size: PropTypes$1.number,
+  mime: PropTypes$1.string
 };
-var defaultProps$g = {
-  children: null,
-  withoutBorder: false,
-  light: false,
-  className: null
+var mediaFile = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  handle: PropTypes$1.string,
+  type: PropTypes$1.string,
+  mime: PropTypes$1.string,
+  url: PropTypes$1.string
+});
+var mediaShape = {
+  id: PropTypes$1.string,
+  type: PropTypes$1.string.isRequired,
+  url: PropTypes$1.string,
+  // .isRequired,
+  thumbnail_url: PropTypes$1.string,
+  name: PropTypes$1.string,
+  metadata: PropTypes$1.shape(_objectSpread({}, mediaMetadataShape)),
+  files: PropTypes$1.objectOf(mediaFile)
 };
+var media = PropTypes$1.shape(mediaShape);
+PropTypes$1.arrayOf(media);
+PropTypes$1.oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
+var imageMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes$1.oneOf(['image', 'video']),
+  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes$1.number,
+    height: PropTypes$1.number
+  }))
+}));
+PropTypes$1.arrayOf(imageMedia);
+var fontMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes$1.oneOf(['font']),
+  metadata: PropTypes$1.shape(_objectSpread({}, mediaMetadataShape))
+}));
+PropTypes$1.arrayOf(fontMedia);
+var videoMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes$1.oneOf(['video']),
+  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    width: PropTypes$1.number,
+    height: PropTypes$1.number,
+    duration: PropTypes$1.number
+  }))
+}));
+PropTypes$1.arrayOf(videoMedia);
+var audioMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes$1.oneOf(['audio']),
+  metadata: PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaMetadataShape), {}, {
+    duration: PropTypes$1.number
+  }))
+}));
+PropTypes$1.arrayOf(audioMedia);
+var closedCaptionsMedia = PropTypes$1.shape(_objectSpread(_objectSpread({}, mediaShape), {}, {
+  type: PropTypes$1.oneOf(['closed-captions'])
+}));
+/**
+ * Style
+ */
 
-var Empty = function Empty(_ref) {
-  var _ref2;
+var font = PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
+  type: PropTypes$1.oneOf(['system', 'google', 'custom']),
+  name: PropTypes$1.string,
+  media: fontMedia
+})]);
+PropTypes$1.arrayOf(font);
+var textAlign = PropTypes$1.oneOf(['left', 'right', 'center']);
+var color = PropTypes$1.shape({
+  color: PropTypes$1.string,
+  alpha: PropTypes$1.number
+});
+var textStyle = PropTypes$1.shape({
+  fontFamily: font,
+  fontSize: PropTypes$1.number,
+  fontStyle: PropTypes$1.shape({
+    bold: PropTypes$1.bool,
+    italic: PropTypes$1.bool,
+    underline: PropTypes$1.bool,
+    upperCase: PropTypes$1.bool
+  }),
+  align: textAlign,
+  color: color,
+  letterSpacing: PropTypes$1.number,
+  lineHeight: PropTypes$1.number
+});
+var borderTypes = PropTypes$1.oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
+var shadowType = PropTypes$1.shape({
+  shadowDistance: PropTypes$1.number,
+  shadowBlur: PropTypes$1.number,
+  shadowColor: color
+});
+PropTypes$1.shape({
+  width: PropTypes$1.number,
+  style: borderTypes,
+  radius: PropTypes$1.number,
+  color: color
+});
+var boxStyle = PropTypes$1.shape({
+  backgroundColor: color,
+  borderRadius: PropTypes$1.number,
+  borderWidth: PropTypes$1.number,
+  borderColor: color,
+  borderStyle: borderTypes,
+  shadow: shadowType
+});
+PropTypes$1.shape({
+  top: PropTypes$1.number,
+  bottom: PropTypes$1.number
+});
+PropTypes$1.arrayOf(PropTypes$1.shape({
+  rows: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.arrayOf(PropTypes$1.number)]),
+  columns: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.arrayOf(PropTypes$1.number)])
+}));
+var objectFitSize = PropTypes$1.oneOf(['cover', 'contain', null]);
+PropTypes$1.shape({
+  fit: objectFitSize,
+  horizontalPosition: PropTypes$1.oneOf(['left', 'center', 'right']),
+  verticalPosition: PropTypes$1.oneOf(['top', 'center', 'bottom'])
+});
+/**
+ * Elements
+ */
 
-  var children = _ref.children,
-      withoutBorder = _ref.withoutBorder,
-      light = _ref.light,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$g.light, light), _defineProperty(_ref2, className, className), _ref2)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.middle
-  }, /*#__PURE__*/React.createElement(Label, null, children)));
+var textElement = PropTypes$1.shape({
+  body: PropTypes$1.string,
+  textStyle: textStyle
+});
+var headingElement = textElement;
+PropTypes$1.shape({
+  label: PropTypes$1.string,
+  textStyle: textStyle
+});
+var imageElement = PropTypes$1.shape({
+  media: imageMedia
+});
+PropTypes$1.arrayOf(imageElement);
+PropTypes$1.shape({
+  media: videoMedia,
+  autoPlay: PropTypes$1.bool,
+  loop: PropTypes$1.bool,
+  closedCaptions: closedCaptionsMedia,
+  withSeekBar: PropTypes$1.bool,
+  withControls: PropTypes$1.bool
+});
+var visualElement = PropTypes$1.shape({
+  media: imageMedia
+});
+PropTypes$1.arrayOf(visualElement);
+PropTypes$1.shape({
+  media: audioMedia,
+  autoPlay: PropTypes$1.bool,
+  loop: PropTypes$1.bool,
+  closedCaptions: closedCaptionsMedia,
+  withPlayPause: PropTypes$1.bool
+});
+PropTypes$1.shape({
+  media: closedCaptionsMedia
+});
+var backgroundElement = PropTypes$1.shape({
+  color: color,
+  image: imageMedia,
+  video: videoMedia
+});
+var imageElementWithCaption = PropTypes$1.shape({
+  image: imageMedia,
+  caption: textElement
+});
+PropTypes$1.arrayOf(imageElementWithCaption);
+var stackDirection = PropTypes$1.oneOf(['horizontal', 'vertical']);
+var stackAlign = PropTypes$1.oneOf(['start', 'center', 'end']);
+var stackSpacing = PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.oneOf(['between', 'evenly', 'around'])]);
+PropTypes$1.shape({
+  direction: stackDirection,
+  align: stackAlign,
+  width: PropTypes$1.number,
+  height: PropTypes$1.number,
+  spacing: stackSpacing,
+  reverse: PropTypes$1.bool
+});
+PropTypes$1.shape({
+  layout: PropTypes$1.arrayOf(PropTypes$1.string),
+  spacing: PropTypes$1.number
+});
+var geoPosition = PropTypes$1.shape({
+  lat: PropTypes$1.number,
+  lng: PropTypes$1.number
+});
+var markerShape = {
+  id: PropTypes$1.number,
+  geoPosition: geoPosition,
+  title: headingElement,
+  subtitle: headingElement,
+  description: textElement
 };
+var marker = PropTypes$1.shape(_objectSpread({}, markerShape));
+PropTypes$1.arrayOf(marker);
+var markerWithImage = PropTypes$1.shape(_objectSpread(_objectSpread({}, markerShape), {}, {
+  image: imageMedia
+}));
+PropTypes$1.arrayOf(markerWithImage);
+var answerShape = {
+  id: PropTypes$1.string,
+  label: textElement
+};
+var answer = PropTypes$1.shape(_objectSpread({}, answerShape));
+var quizAnswer = PropTypes$1.shape(_objectSpread(_objectSpread({}, answerShape), {}, {
+  good: PropTypes$1.bool
+}));
+PropTypes$1.arrayOf(answer);
+PropTypes$1.arrayOf(quizAnswer);
+var callToActionTypes = PropTypes$1.oneOf(['swipe-up', 'button']);
+PropTypes$1.shape({
+  active: PropTypes$1.bool,
+  type: callToActionTypes,
+  url: PropTypes$1.string,
+  label: textElement,
+  buttonStyle: boxStyle
+});
+var speaker = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  name: PropTypes$1.string,
+  avatar: imageMedia,
+  side: PropTypes$1.oneOf(['left', 'right']),
+  color: color
+});
+var speakers = PropTypes$1.arrayOf(speaker);
+var conversationMessage = PropTypes$1.shape({
+  speaker: PropTypes$1.string,
+  message: PropTypes$1.string,
+  image: imageMedia
+});
+var conversationMessages = PropTypes$1.arrayOf(conversationMessage);
+PropTypes$1.shape({
+  speakers: speakers,
+  textStyle: textStyle,
+  messages: conversationMessages
+});
+/**
+ * Definitions
+ */
 
-Empty.propTypes = propTypes$g;
-Empty.defaultProps = defaultProps$g;
-
-var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
-  var _ref = media || {},
-      _ref$files = _ref.files,
-      files = _ref$files === void 0 ? {} : _ref$files;
-
-  var _ref2 = files || {},
-      _ref2$original = _ref2.original,
-      originalFile = _ref2$original === void 0 ? null : _ref2$original;
-
-  var _ref3 = originalFile || {},
-      _ref3$name = _ref3.name,
-      originalName = _ref3$name === void 0 ? null : _ref3$name,
-      _ref3$mime = _ref3.mime,
-      originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
-
-  var urls = formats.reduce(function (currentUrls, format) {
-    var finalFormat = isObject(format) ? format.format : format;
-    var formatExtension = isObject(format) ? format.name : format;
-    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
-
-    if (file !== null) {
-      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(file.url, "?\") format(\"").concat(finalFormat, "\")")]);
-    }
-
-    var extensionRegExp = new RegExp(".".concat(formatExtension, "$"), 'i');
-    var mimeRegExp = new RegExp("".concat(finalFormat), 'i');
-
-    if (originalName !== null && originalName.match(extensionRegExp) !== null || originalMime !== null && originalMime.match(mimeRegExp) !== null) {
-      return [].concat(_toConsumableArray(currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
-    }
-
-    return currentUrls;
-  }, []);
-  return urls;
+var fieldShape = {
+  name: PropTypes$1.string,
+  type: PropTypes$1.string.isRequired,
+  label: text
 };
+var field = PropTypes$1.shape(_objectSpread(_objectSpread({}, fieldShape), {}, {
+  isSection: PropTypes$1.bool,
+  fields: PropTypes$1.arrayOf(PropTypes$1.shape(fieldShape))
+}));
+var fields = PropTypes$1.arrayOf(field);
+var screenDefinition = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired,
+  type: PropTypes$1.oneOf(['screen']).isRequired,
+  title: text.isRequired,
+  layouts: PropTypes$1.arrayOf(PropTypes$1.string),
+  fields: fields
+});
+PropTypes$1.arrayOf(screenDefinition);
+var fieldDefinition = PropTypes$1.shape({
+  id: PropTypes$1.string.isRequired,
+  type: PropTypes$1.oneOf(['field']).isRequired,
+  title: text.isRequired,
+  fields: fields
+});
+PropTypes$1.arrayOf(fieldDefinition);
+/**
+ * Components
+ */
 
-var propTypes$f = {
-  fonts: PropTypes.fonts,
-  formats: PropTypes$1.arrayOf(PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.shape({
-    name: PropTypes$1.string,
-    format: PropTypes$1.string
-  })]))
-};
-var defaultProps$f = {
-  fonts: [],
-  formats: ['eot', 'woff2', 'woff', {
-    name: 'otf',
-    format: 'opentype'
-  }, {
-    name: 'ttf',
-    format: 'truetype'
-  }, 'svg']
+var storyComponentShape = {
+  type: PropTypes$1.string.isRequired
 };
+var storyComponent = PropTypes$1.shape(_objectSpread({}, storyComponentShape));
+PropTypes$1.arrayOf(storyComponent);
+var screenComponent = PropTypes$1.shape(_objectSpread({}, storyComponentShape));
+var screenComponents = PropTypes$1.arrayOf(screenComponent);
 
-var FontFaces = function FontFaces(_ref4) {
-  var fonts = _ref4.fonts,
-      formats = _ref4.formats;
-  var fontFaces = (fonts || []).filter(function (it) {
-    return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
-  }).reduce(function (fontFontFaces, _ref5) {
-    var _ref5$name = _ref5.name,
-        name = _ref5$name === void 0 ? null : _ref5$name,
-        _ref5$media = _ref5.media,
-        media = _ref5$media === void 0 ? null : _ref5$media,
-        _ref5$variants = _ref5.variants,
-        variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+/**
+ * Theme
+ */
 
-    if (name === null) {
-      return fontFontFaces;
-    }
+var theme = PropTypes$1.shape({
+  id: PropTypes$1.string,
+  textStyles: PropTypes$1.objectOf(textStyle),
+  // renamed to textstyles
+  background: backgroundElement,
+  colors: PropTypes$1.objectOf(color),
+  components: screenComponents
+});
+PropTypes$1.shape(_objectSpread({
+  logo: imageMedia
+}, theme));
+/**
+ * Branding
+ */
+// export const branding = PropTypes.shape({
+//     logo: imageMedia,
+//     primaryColor: color,
+//     secondaryColor: color,
+//     backgroundColor: color,
+//     textStyle,
+// });
 
-    var urls = media !== null ? getUrlsFromMedia(media, formats) : null;
-    return [].concat(_toConsumableArray(fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray((variants || []).map(function (_ref6) {
-      var weight = _ref6.weight,
-          style = _ref6.style,
-          _ref6$media = _ref6.media,
-          variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+/**
+ * Metadata
+ */
 
-      if (variantMedia == null) {
-        return null;
-      }
+var metadata = PropTypes$1.shape({
+  description: PropTypes$1.string,
+  shareUrl: PropTypes$1.string,
+  shareImage: imageMedia,
+  favIcon: imageMedia
+});
+/**
+ * Story
+ */
 
-      var variantUrls = getUrlsFromMedia(variantMedia, formats);
-      return variantUrls !== null && variantUrls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    ").concat(weight !== null ? "font-weight: ".concat(weight, ";") : '', "\n                    ").concat(style !== null ? "font-style: ".concat(style, ";") : '', "\n                    src: ").concat(variantUrls.join(','), ";\n                }\n            ") : null;
-    })));
-  }, []).filter(function (it) {
-    return it !== null;
-  });
-  return fontFaces.length > 0 ? /*#__PURE__*/React.createElement("style", {
-    type: "text/css"
-  }, fontFaces.join('\n')) : null;
-};
+PropTypes$1.shape({
+  id: PropTypes$1.string,
+  theme: theme,
+  components: screenComponents,
+  metadata: metadata
+});
+/**
+ * Render
+ */
 
-FontFaces.propTypes = propTypes$f;
-FontFaces.defaultProps = defaultProps$f;
+var deviceScreen = PropTypes$1.shape({
+  name: PropTypes$1.string.isRequired,
+  mediaQuery: PropTypes$1.string
+});
+PropTypes$1.arrayOf(deviceScreen);
+PropTypes$1.shape({
+  screen: PropTypes$1.string,
+  screens: PropTypes$1.arrayOf(PropTypes$1.string),
+  width: PropTypes$1.number,
+  height: PropTypes$1.number,
+  landscape: PropTypes$1.bool
+});
+PropTypes$1.oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+/**
+ * Screens
+ */
 
-var styles$f = {};
+PropTypes$1.shape({
+  width: PropTypes$1.number,
+  height: PropTypes$1.number
+});
+PropTypes$1.shape({
+  width: PropTypes$1.number,
+  height: PropTypes$1.number,
+  url: PropTypes$1.string,
+  target: target,
+  iframe: PropTypes$1.string,
+  image: imageMedia
+});
+PropTypes$1.shape({
+  src: PropTypes$1.string,
+  track: PropTypes$1.string,
+  trackLng: PropTypes$1.number,
+  controls: PropTypes$1.bool
+});
+var slide = PropTypes$1.shape({
+  image: imageMedia,
+  text: PropTypes$1.string
+});
+PropTypes$1.arrayOf(slide); // export const imageStyle = PropTypes.shape({
+//     alt: PropTypes.string,
+//     fit: PropTypes.object,
+// });
 
-var propTypes$e = {
-  thumbnail: PropTypes$1.node,
-  thumbnailAlign: PropTypes$1.oneOf(['top', 'center', 'bottom']),
-  children: PropTypes$1.node,
-  title: PropTypes.label,
-  className: PropTypes$1.string,
-  thumbnailClassName: PropTypes$1.string,
-  bodyClassName: PropTypes$1.string,
-  titleClassName: PropTypes$1.string
-};
-var defaultProps$e = {
-  thumbnail: null,
-  thumbnailAlign: 'top',
-  children: null,
-  title: null,
-  className: null,
-  thumbnailClassName: null,
-  bodyClassName: null,
-  titleClassName: null
-};
+PropTypes$1.shape({});
+/**
+ * Transitions
+ */
 
-var Media = function Media(_ref) {
-  var thumbnail = _ref.thumbnail,
-      thumbnailAlign = _ref.thumbnailAlign,
-      children = _ref.children,
-      title = _ref.title,
-      className = _ref.className,
-      thumbnailClassName = _ref.thumbnailClassName,
-      bodyClassName = _ref.bodyClassName,
-      titleClassName = _ref.titleClassName;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
-  }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
-    src: thumbnail,
-    alt: title,
-    className: classNames(['me-3', styles$f.thumbnail, _defineProperty({
-      'align-self-start': thumbnailAlign === 'top',
-      'align-self-center': thumbnailAlign === 'center',
-      'align-self-end': thumbnailAlign === 'bottom'
-    }, thumbnailClassName, thumbnailClassName !== null)])
-  }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
-  }, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
+var transitionName = PropTypes$1.oneOf(['fade', 'scale', 'slide']);
+var transitionParams = {
+  duration: PropTypes$1.number,
+  easing: PropTypes$1.oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
 };
+var transition = PropTypes$1.oneOfType([transitionName.isRequired, PropTypes$1.shape(_objectSpread({
+  name: transitionName.isRequired
+}, transitionParams))]);
+PropTypes$1.shape({
+  "in": transition,
+  out: transition
+});
+/**
+ * Search
+ */
 
-Media.propTypes = propTypes$e;
-Media.defaultProps = defaultProps$e;
+var searchFilter = PropTypes$1.shape({
+  type: PropTypes$1.string,
+  value: PropTypes$1.oneOf([PropTypes$1.string, PropTypes$1.number])
+});
+PropTypes$1.arrayOf(searchFilter);
+/**
+ * Payments
+ */
+
+var paymentItem = PropTypes$1.shape({
+  id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
+  date: PropTypes$1.string,
+  type: PropTypes$1.string,
+  invoice_link: PropTypes$1.string,
+  amount: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number])
+});
+PropTypes$1.arrayOf(paymentItem);
+/**
+ * Page Metadada
+ */
+
+var pageMetadata = PropTypes$1.shape({
+  canonical: PropTypes$1.string,
+  description: PropTypes$1.string,
+  keywords: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.array]),
+  image: PropTypes$1.shape({
+    url: PropTypes$1.string
+  }),
+  favicon: PropTypes$1.shape({
+    url: PropTypes$1.string
+  }),
+  rssUrl: PropTypes$1.string,
+  atomUrl: PropTypes$1.string,
+  microformats: PropTypes$1.arrayOf(PropTypes$1.shape({}))
+});
+PropTypes$1.shape({
+  name: textElement,
+  avatar: PropTypes$1.shape({
+    url: PropTypes$1.string
+  })
+});
+PropTypes$1.shape({
+  id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
+  name: PropTypes$1.string
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {
@@ -3994,7 +3855,7 @@ var Answer$1 = function Answer(_ref) {
   })));
 };
 
-var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item"};
+var styles$3 = {"container":"micromag-core-placeholders-share-options-container","box":"micromag-core-placeholders-share-options-box","icon":"micromag-core-placeholders-share-options-icon","item":"micromag-core-placeholders-share-options-item","button":"micromag-core-placeholders-share-options-button"};
 
 var Title = function Title(props) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
@@ -4499,4 +4360,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CloseButton, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, IconButton, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, SlidingButtons, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };
+export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };