@micromag/core 0.3.181 → 0.3.186

package/lib/components.js

@@ -13,12 +13,11 @@ var reactIntl = require('react-intl');
 var utils = require('@micromag/core/utils');
 var reactFontawesome = require('@fortawesome/react-fontawesome');
 var faAngleLeft = require('@fortawesome/free-solid-svg-icons/faAngleLeft');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-require('snake-case');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var contexts = require('@micromag/core/contexts');
 var hooks = require('@micromag/core/hooks');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var get = require('lodash/get');
 var ReactDOM = require('react-dom');
 var isArray = require('lodash/isArray');
@@ -29,6 +28,7 @@ var throttle = require('lodash/throttle');
 var isObject = require('lodash/isObject');
 var reactHelmet = require('react-helmet');
 var isString = require('lodash/isString');
+require('snake-case');
 var faAd = require('@fortawesome/free-solid-svg-icons/faAd');
 var faImage = require('@fortawesome/free-solid-svg-icons/faImage');
 var faMusic = require('@fortawesome/free-solid-svg-icons/faMusic');
@@ -72,9 +72,9 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_obje
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
+var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var isArray__default = /*#__PURE__*/_interopDefaultLegacy(isArray);
@@ -85,13 +85,13 @@ var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
 var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$O = {
+var propTypes$L = {
   children: core.PropTypes.label.isRequired,
   isHtml: PropTypes__default["default"].bool,
   values: PropTypes__default["default"].object // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$O = {
+var defaultProps$L = {
   isHtml: false,
   values: {}
 };
@@ -106,13 +106,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__default["default"].string,
   theme: core.PropTypes.buttonTheme,
   size: core.PropTypes.buttonSize,
@@ -135,7 +135,6 @@ var propTypes$N = {
   withoutStyle: PropTypes__default["default"].bool,
   withoutBootstrapStyles: PropTypes__default["default"].bool,
   withoutTheme: PropTypes__default["default"].bool,
-  withAnimations: PropTypes__default["default"].bool,
   outline: PropTypes__default["default"].bool,
   asLink: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -147,7 +146,7 @@ var propTypes$N = {
 
   })])
 };
-var defaultProps$N = {
+var defaultProps$K = {
   type: 'button',
   theme: null,
   size: null,
@@ -170,8 +169,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,
@@ -206,7 +203,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,
@@ -214,7 +210,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$c);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
@@ -223,25 +219,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$y.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
+    className: classNames__default["default"]([styles$w.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$y.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$w.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$y.icon, styles$y.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames__default["default"]([styles$w.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$y.center, styles$y.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$w.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$y.icon, styles$y.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames__default["default"]([styles$w.right, _defineProperty__default["default"]({}, 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__default["default"]([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
-  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$y.container, styles$y["icon-".concat(iconPosition)], (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$y.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$y.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$y.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$y.withText, text !== null), _defineProperty__default["default"](_ref8, styles$y.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$y.withAnimations, withAnimations), _defineProperty__default["default"](_ref8, styles$y.isSmall, small), _defineProperty__default["default"](_ref8, styles$y.isBig, big), _defineProperty__default["default"](_ref8, styles$y.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$y.asLink, asLink), _defineProperty__default["default"](_ref8, styles$y.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$y.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$w.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$w.withText, text !== null), _defineProperty__default["default"](_ref8, styles$w.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$w.isSmall, small), _defineProperty__default["default"](_ref8, styles$w.isBig, big), _defineProperty__default["default"](_ref8, styles$w.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$w.asLink, asLink), _defineProperty__default["default"](_ref8, styles$w.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$w.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
-    }, styles$y.linkDisabled, disabled)]);
+    }, styles$w.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -249,13 +245,13 @@ var Button$1 = function Button(_ref) {
       target: external ? target : null,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({}, props, {
+    }), content) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
       to: href,
       className: linkClassNames,
       onClick: onClick,
       ref: refButton,
       tabIndex: focusable ? '' : '-1'
-    }), content);
+    }, content);
   }
 
   return /*#__PURE__*/React__default["default"].createElement("button", Object.assign({}, props, {
@@ -268,13 +264,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: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
   theme: core.PropTypes.buttonTheme,
@@ -283,7 +279,7 @@ var propTypes$M = {
   className: PropTypes__default["default"].string,
   buttonClassName: PropTypes__default["default"].string
 };
-var defaultProps$M = {
+var defaultProps$J = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -302,7 +298,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -313,11 +309,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__default["default"](button, _excluded$b);
+        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$9);
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames__default["default"]([styles$x.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames__default["default"]([styles$v.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -333,20 +329,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__default["default"].string
 };
-var defaultProps$L = {
+var defaultProps$I = {
   className: null
 };
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
 
   return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
@@ -358,799 +354,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__default["default"].string,
+  // .isRequired,
+  value: core.PropTypes.component,
+  form: PropTypes__default["default"].string,
+  formComponents: core.PropTypes.components,
+  fields: core.PropTypes.fields,
   className: PropTypes__default["default"].string,
-  onClick: null,
-  label: PropTypes__default["default"].node,
-  icon: PropTypes__default["default"].node,
-  theme: core.PropTypes.viewerTheme
+  onChange: PropTypes__default["default"].func,
+  gotoFieldForm: PropTypes__default["default"].func.isRequired,
+  closeFieldForm: PropTypes__default["default"].func.isRequired,
+  fieldContext: PropTypes__default["default"].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__default["default"](_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 = contexts.useFieldsManager();
+  var field = utils.getFieldFromPath(name.split('.'), fields, fieldsManager);
 
-  return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
-    className: classNames__default["default"]([styles$w.container, _defineProperty__default["default"]({}, 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__default["default"](_ref2, _excluded$7);
 
-IconButton.propTypes = propTypes$K;
-IconButton.defaultProps = defaultProps$K;
+  var fieldDefinition = fieldsManager.getDefinition(type) || null;
 
-/**
- * Core
- */
+  var fieldData = fieldDefinition || _objectSpread__default["default"]({}, field);
 
-PropTypes__default["default"].shape({
-  listen: PropTypes__default["default"].func.isRequired,
-  push: PropTypes__default["default"].func.isRequired
-});
-PropTypes__default["default"].shape({
-  pathname: PropTypes__default["default"].string,
-  search: PropTypes__default["default"].string
-});
-PropTypes__default["default"].shape({
-  locale: PropTypes__default["default"].string.isRequired,
-  formatMessage: PropTypes__default["default"].func.isRequired
-});
-var defaultMessageContent = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].number,
-  value: PropTypes__default["default"].string
-});
-var defaultMessage = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(defaultMessageContent)]);
-var message = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  defaultMessage: defaultMessage.isRequired,
-  description: PropTypes__default["default"].string
-});
-var text = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].string]);
-var label = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].node]);
-PropTypes__default["default"].oneOf([401, 403, 404, 500]);
-PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
-  current: PropTypes__default["default"].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__default["default"](_ref3, _excluded2);
 
-}), PropTypes__default["default"].func]);
-var target = PropTypes__default["default"].oneOf(['_blank', '_self', '_parent']);
-var interaction = PropTypes__default["default"].oneOf(['tap', 'swipe']);
-PropTypes__default["default"].arrayOf(interaction);
-PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].array]));
-PropTypes__default["default"].shape({
-  currentTime: PropTypes__default["default"].number,
-  duration: PropTypes__default["default"].number
-});
-/**
- * Site
- */
+  var FieldComponent = contexts.useFieldComponent(fieldComponent);
+  var FormComponent = utils.getComponentFromName(form, formComponents);
+  var fieldValue = get__default["default"](value, name, null);
 
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].number,
-  firstname: PropTypes__default["default"].string,
-  lastname: PropTypes__default["default"].string,
-  email: PropTypes__default["default"].string,
-  gender: PropTypes__default["default"].string,
-  birthdate: PropTypes__default["default"].string
-});
-var menuItem = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
-  label: label,
-  url: PropTypes__default["default"].string,
-  external: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool
-});
-PropTypes__default["default"].arrayOf(menuItem);
-var breadcrumb = PropTypes__default["default"].shape({
-  label: label,
-  url: PropTypes__default["default"].string
-});
-PropTypes__default["default"].arrayOf(breadcrumb);
-var device = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
-});
-PropTypes__default["default"].arrayOf(device);
-var modal = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
-});
-PropTypes__default["default"].arrayOf(modal);
-var panel = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired
-});
-PropTypes__default["default"].arrayOf(panel);
-var button = PropTypes__default["default"].shape({
-  label: label,
-  onClick: PropTypes__default["default"].func
-});
-PropTypes__default["default"].arrayOf(button);
-var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-PropTypes__default["default"].oneOf(bootstrapThemeStrings);
-PropTypes__default["default"].oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
-PropTypes__default["default"].oneOf(['lg', 'sm', null]);
-PropTypes__default["default"].oneOf(['lg', 'sm', null]);
-PropTypes__default["default"].oneOf(['start', 'end']);
-var component = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].func]);
-PropTypes__default["default"].objectOf(component);
-/**
- * Forms
- */
+  var onFieldChange = function onFieldChange(newFieldValue) {
+    // const { name, fields: subFields = null } = field || {};
+    var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
+    );
 
-var errors = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]);
-PropTypes__default["default"].objectOf(errors);
-var selectOption = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
-  value: PropTypes__default["default"].any,
-  // eslint-disable-line
-  label: label
-})]);
-PropTypes__default["default"].arrayOf(selectOption);
-var formField = PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string,
-  component: component
-});
-PropTypes__default["default"].arrayOf(formField);
-/**
- * Medias
- */
+    if (onChange !== null) {
+      onChange(newValue);
+    }
+  };
 
-var mediaMetadataShape = {
-  filename: PropTypes__default["default"].string,
-  size: PropTypes__default["default"].number,
-  mime: PropTypes__default["default"].string
-};
-var mediaFile = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  handle: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string,
-  mime: PropTypes__default["default"].string,
-  url: PropTypes__default["default"].string
-});
-var mediaShape = {
-  id: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string.isRequired,
-  url: PropTypes__default["default"].string,
-  // .isRequired,
-  thumbnail_url: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string,
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape)),
-  files: PropTypes__default["default"].objectOf(mediaFile)
-};
-var media = PropTypes__default["default"].shape(mediaShape);
-PropTypes__default["default"].arrayOf(media);
-PropTypes__default["default"].oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
-var imageMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['image', 'video']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number
-  }))
-}));
-PropTypes__default["default"].arrayOf(imageMedia);
-var fontMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['font']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape))
-}));
-PropTypes__default["default"].arrayOf(fontMedia);
-var videoMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['video']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number,
-    duration: PropTypes__default["default"].number
-  }))
-}));
-PropTypes__default["default"].arrayOf(videoMedia);
-var audioMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['audio']),
-  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
-    duration: PropTypes__default["default"].number
-  }))
-}));
-PropTypes__default["default"].arrayOf(audioMedia);
-var closedCaptionsMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
-  type: PropTypes__default["default"].oneOf(['closed-captions'])
-}));
-/**
- * Style
- */
-
-var font = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].oneOf(['system', 'google', 'custom']),
-  name: PropTypes__default["default"].string,
-  media: fontMedia
-})]);
-PropTypes__default["default"].arrayOf(font);
-var textAlign = PropTypes__default["default"].oneOf(['left', 'right', 'center']);
-var color = PropTypes__default["default"].shape({
-  color: PropTypes__default["default"].string,
-  alpha: PropTypes__default["default"].number
-});
-var textStyle = PropTypes__default["default"].shape({
-  fontFamily: font,
-  fontSize: PropTypes__default["default"].number,
-  fontStyle: PropTypes__default["default"].shape({
-    bold: PropTypes__default["default"].bool,
-    italic: PropTypes__default["default"].bool,
-    underline: PropTypes__default["default"].bool,
-    upperCase: PropTypes__default["default"].bool
-  }),
-  align: textAlign,
-  color: color,
-  letterSpacing: PropTypes__default["default"].number,
-  lineHeight: PropTypes__default["default"].number
-});
-var borderTypes = PropTypes__default["default"].oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
-var shadowType = PropTypes__default["default"].shape({
-  shadowDistance: PropTypes__default["default"].number,
-  shadowBlur: PropTypes__default["default"].number,
-  shadowColor: color
-});
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
-  style: borderTypes,
-  radius: PropTypes__default["default"].number,
-  color: color
-});
-var boxStyle = PropTypes__default["default"].shape({
-  backgroundColor: color,
-  borderRadius: PropTypes__default["default"].number,
-  borderWidth: PropTypes__default["default"].number,
-  borderColor: color,
-  borderStyle: borderTypes,
-  shadow: shadowType
-});
-PropTypes__default["default"].shape({
-  top: PropTypes__default["default"].number,
-  bottom: PropTypes__default["default"].number
-});
-PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-  rows: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
-  columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
-}));
-var objectFitSize = PropTypes__default["default"].oneOf(['cover', 'contain', null]);
-PropTypes__default["default"].shape({
-  fit: objectFitSize,
-  horizontalPosition: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
-  verticalPosition: PropTypes__default["default"].oneOf(['top', 'center', 'bottom'])
-});
-/**
- * Elements
- */
-
-var textElement = PropTypes__default["default"].shape({
-  body: PropTypes__default["default"].string,
-  textStyle: textStyle
-});
-var headingElement = textElement;
-PropTypes__default["default"].shape({
-  label: PropTypes__default["default"].string,
-  textStyle: textStyle
-});
-var imageElement = PropTypes__default["default"].shape({
-  media: imageMedia
-});
-PropTypes__default["default"].arrayOf(imageElement);
-PropTypes__default["default"].shape({
-  media: videoMedia,
-  autoPlay: PropTypes__default["default"].bool,
-  loop: PropTypes__default["default"].bool,
-  closedCaptions: closedCaptionsMedia,
-  withSeekBar: PropTypes__default["default"].bool,
-  withControls: PropTypes__default["default"].bool
-});
-var visualElement = PropTypes__default["default"].shape({
-  media: imageMedia
-});
-PropTypes__default["default"].arrayOf(visualElement);
-PropTypes__default["default"].shape({
-  media: audioMedia,
-  autoPlay: PropTypes__default["default"].bool,
-  loop: PropTypes__default["default"].bool,
-  closedCaptions: closedCaptionsMedia,
-  withPlayPause: PropTypes__default["default"].bool
-});
-PropTypes__default["default"].shape({
-  media: closedCaptionsMedia
-});
-var backgroundElement = PropTypes__default["default"].shape({
-  color: color,
-  image: imageMedia,
-  video: videoMedia
-});
-var imageElementWithCaption = PropTypes__default["default"].shape({
-  image: imageMedia,
-  caption: textElement
-});
-PropTypes__default["default"].arrayOf(imageElementWithCaption);
-var stackDirection = PropTypes__default["default"].oneOf(['horizontal', 'vertical']);
-var stackAlign = PropTypes__default["default"].oneOf(['start', 'center', 'end']);
-var stackSpacing = PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].oneOf(['between', 'evenly', 'around'])]);
-PropTypes__default["default"].shape({
-  direction: stackDirection,
-  align: stackAlign,
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  spacing: stackSpacing,
-  reverse: PropTypes__default["default"].bool
-});
-PropTypes__default["default"].shape({
-  layout: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  spacing: PropTypes__default["default"].number
-});
-var geoPosition = PropTypes__default["default"].shape({
-  lat: PropTypes__default["default"].number,
-  lng: PropTypes__default["default"].number
-});
-var markerShape = {
-  id: PropTypes__default["default"].number,
-  geoPosition: geoPosition,
-  title: headingElement,
-  subtitle: headingElement,
-  description: textElement
-};
-var marker = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, markerShape));
-PropTypes__default["default"].arrayOf(marker);
-var markerWithImage = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, markerShape), {}, {
-  image: imageMedia
-}));
-PropTypes__default["default"].arrayOf(markerWithImage);
-var answerShape = {
-  id: PropTypes__default["default"].string,
-  label: textElement
-};
-var answer = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, answerShape));
-var quizAnswer = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, answerShape), {}, {
-  good: PropTypes__default["default"].bool
-}));
-PropTypes__default["default"].arrayOf(answer);
-PropTypes__default["default"].arrayOf(quizAnswer);
-var callToActionTypes = PropTypes__default["default"].oneOf(['swipe-up', 'button']);
-PropTypes__default["default"].shape({
-  active: PropTypes__default["default"].bool,
-  type: callToActionTypes,
-  url: PropTypes__default["default"].string,
-  label: textElement,
-  buttonStyle: boxStyle
-});
-var speaker = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  name: PropTypes__default["default"].string,
-  avatar: imageMedia,
-  side: PropTypes__default["default"].oneOf(['left', 'right']),
-  color: color
-});
-var speakers = PropTypes__default["default"].arrayOf(speaker);
-var conversationMessage = PropTypes__default["default"].shape({
-  speaker: PropTypes__default["default"].string,
-  message: PropTypes__default["default"].string,
-  image: imageMedia
-});
-var conversationMessages = PropTypes__default["default"].arrayOf(conversationMessage);
-PropTypes__default["default"].shape({
-  speakers: speakers,
-  textStyle: textStyle,
-  messages: conversationMessages
-});
-/**
- * Definitions
- */
-
-var fieldShape = {
-  name: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string.isRequired,
-  label: text
-};
-var field = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldShape), {}, {
-  isSection: PropTypes__default["default"].bool,
-  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape(fieldShape))
-}));
-var fields = PropTypes__default["default"].arrayOf(field);
-var screenDefinition = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired,
-  type: PropTypes__default["default"].oneOf(['screen']).isRequired,
-  title: text.isRequired,
-  layouts: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  fields: fields
-});
-PropTypes__default["default"].arrayOf(screenDefinition);
-var fieldDefinition = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string.isRequired,
-  type: PropTypes__default["default"].oneOf(['field']).isRequired,
-  title: text.isRequired,
-  fields: fields
-});
-PropTypes__default["default"].arrayOf(fieldDefinition);
-/**
- * Components
- */
-
-var storyComponentShape = {
-  type: PropTypes__default["default"].string.isRequired
-};
-var storyComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
-PropTypes__default["default"].arrayOf(storyComponent);
-var screenComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
-var screenComponents = PropTypes__default["default"].arrayOf(screenComponent);
-
-/**
- * Theme
- */
-
-var theme = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  textStyles: PropTypes__default["default"].objectOf(textStyle),
-  // renamed to textstyles
-  background: backgroundElement,
-  colors: PropTypes__default["default"].objectOf(color),
-  components: screenComponents
-});
-var viewerTheme = PropTypes__default["default"].shape(_objectSpread__default["default"]({
-  logo: imageMedia
-}, theme));
-/**
- * Branding
- */
-// export const branding = PropTypes.shape({
-//     logo: imageMedia,
-//     primaryColor: color,
-//     secondaryColor: color,
-//     backgroundColor: color,
-//     textStyle,
-// });
-
-/**
- * Metadata
- */
-
-var metadata = PropTypes__default["default"].shape({
-  description: PropTypes__default["default"].string,
-  shareUrl: PropTypes__default["default"].string,
-  shareImage: imageMedia,
-  favIcon: imageMedia
-});
-/**
- * Story
- */
-
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].string,
-  theme: theme,
-  components: screenComponents,
-  metadata: metadata
-});
-/**
- * Render
- */
-
-var deviceScreen = PropTypes__default["default"].shape({
-  name: PropTypes__default["default"].string.isRequired,
-  mediaQuery: PropTypes__default["default"].string
-});
-PropTypes__default["default"].arrayOf(deviceScreen);
-PropTypes__default["default"].shape({
-  screen: PropTypes__default["default"].string,
-  screens: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  landscape: PropTypes__default["default"].bool
-});
-PropTypes__default["default"].oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
-/**
- * Screens
- */
-
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number
-});
-PropTypes__default["default"].shape({
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number,
-  url: PropTypes__default["default"].string,
-  target: target,
-  iframe: PropTypes__default["default"].string,
-  image: imageMedia
-});
-PropTypes__default["default"].shape({
-  src: PropTypes__default["default"].string,
-  track: PropTypes__default["default"].string,
-  trackLng: PropTypes__default["default"].number,
-  controls: PropTypes__default["default"].bool
-});
-var slide = PropTypes__default["default"].shape({
-  image: imageMedia,
-  text: PropTypes__default["default"].string
-});
-PropTypes__default["default"].arrayOf(slide); // export const imageStyle = PropTypes.shape({
-//     alt: PropTypes.string,
-//     fit: PropTypes.object,
-// });
-
-PropTypes__default["default"].shape({});
-/**
- * Transitions
- */
-
-var transitionName = PropTypes__default["default"].oneOf(['fade', 'scale', 'slide']);
-var transitionParams = {
-  duration: PropTypes__default["default"].number,
-  easing: PropTypes__default["default"].oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
-};
-var transition = PropTypes__default["default"].oneOfType([transitionName.isRequired, PropTypes__default["default"].shape(_objectSpread__default["default"]({
-  name: transitionName.isRequired
-}, transitionParams))]);
-PropTypes__default["default"].shape({
-  "in": transition,
-  out: transition
-});
-/**
- * Search
- */
-
-var searchFilter = PropTypes__default["default"].shape({
-  type: PropTypes__default["default"].string,
-  value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number])
-});
-PropTypes__default["default"].arrayOf(searchFilter);
-/**
- * Payments
- */
-
-var paymentItem = PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  date: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string,
-  invoice_link: PropTypes__default["default"].string,
-  amount: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
-});
-PropTypes__default["default"].arrayOf(paymentItem);
-/**
- * Page Metadada
- */
-
-var pageMetadata = PropTypes__default["default"].shape({
-  canonical: PropTypes__default["default"].string,
-  description: PropTypes__default["default"].string,
-  keywords: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
-  image: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
-  }),
-  favicon: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
-  }),
-  rssUrl: PropTypes__default["default"].string,
-  atomUrl: PropTypes__default["default"].string,
-  microformats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({}))
-});
-PropTypes__default["default"].shape({
-  name: textElement,
-  avatar: PropTypes__default["default"].shape({
-    url: PropTypes__default["default"].string
-  })
-});
-PropTypes__default["default"].shape({
-  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
-  name: PropTypes__default["default"].string
-});
-
-var _excluded$8 = ["className", "onClick", "theme"];
-var propTypes$J = {
-  className: PropTypes__default["default"].string,
-  onClick: PropTypes__default["default"].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__default["default"](_ref, _excluded$8);
-
-  var intl = reactIntl.useIntl();
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, Object.assign({
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
-    label: intl.formatMessage({
-      id: "dj/p/q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Close"
-      }]
-    }),
-    icon: /*#__PURE__*/React__default["default"].createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "10",
-      height: "16",
-      viewBox: "0 0 10 16",
-      fill: "currentColor"
-    }, /*#__PURE__*/React__default["default"].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__default["default"].string,
-  current: PropTypes__default["default"].number,
-  buttons: PropTypes__default["default"].arrayOf(PropTypes__default["default"].node),
-  buttonsProps: PropTypes__default["default"].arrayOf(PropTypes__default["default"].objectOf(PropTypes__default["default"].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__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$v.container, _defineProperty__default["default"]({}, 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__default["default"].createElement(SlidingButton, Object.assign({}, extraProps, {
-      className: classNames__default["default"]([styles$v.icon, extraClassNames, _defineProperty__default["default"]({}, 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__default["default"].string,
-  // .isRequired,
-  value: core.PropTypes.component,
-  form: PropTypes__default["default"].string,
-  formComponents: core.PropTypes.components,
-  fields: core.PropTypes.fields,
-  className: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func,
-  gotoFieldForm: PropTypes__default["default"].func.isRequired,
-  closeFieldForm: PropTypes__default["default"].func.isRequired,
-  fieldContext: PropTypes__default["default"].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 = contexts.useFieldsManager();
-  var field = utils.getFieldFromPath(name.split('.'), fields, fieldsManager);
-
-  var _ref2 = field || {},
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$7);
-
-  var fieldDefinition = fieldsManager.getDefinition(type) || null;
-
-  var fieldData = fieldDefinition || _objectSpread__default["default"]({}, field);
-
-  var _ref3 = fieldData || {},
-      _ref3$component = _ref3.component,
-      fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
-      _ref3.id;
-      _ref3.settings;
-      var definitionProps = _objectWithoutProperties__default["default"](_ref3, _excluded2);
-
-  var FieldComponent = contexts.useFieldComponent(fieldComponent);
-  var FormComponent = utils.getComponentFromName(form, formComponents);
-  var fieldValue = get__default["default"](value, name, null);
-
-  var onFieldChange = function onFieldChange(newFieldValue) {
-    // const { name, fields: subFields = null } = field || {};
-    var newValue = utils.setFieldValue(value, name.split('.'), newFieldValue // field === null || subFields !== null ? newFieldValue : newFieldValue[name],
-    );
-
-    if (onChange !== null) {
-      onChange(newValue);
-    }
-  };
-
-  var closeForm = React.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__default["default"].createElement(contexts.FieldContextProvider, {
-      context: fieldContext
-    }, /*#__PURE__*/React__default["default"].createElement(FormComponent, Object.assign({
-      field: field
-    }, formProps, {
-      className: className
-    }))) : null;
-  } // Use field component with isForm props
-
-
-  return FieldComponent !== null ? /*#__PURE__*/React__default["default"].createElement(contexts.FieldContextProvider, {
-    context: fieldContext
-  }, /*#__PURE__*/React__default["default"].createElement(FieldComponent, Object.assign({
-    className: className
-  }, definitionProps, fieldProps, {
-    isForm: true
-  }, formProps))) : null;
+  var closeForm = React.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__default["default"].createElement(contexts.FieldContextProvider, {
+      context: fieldContext
+    }, /*#__PURE__*/React__default["default"].createElement(FormComponent, Object.assign({
+      field: field
+    }, formProps, {
+      className: className
+    }))) : null;
+  } // Use field component with isForm props
+
+
+  return FieldComponent !== null ? /*#__PURE__*/React__default["default"].createElement(contexts.FieldContextProvider, {
+    context: fieldContext
+  }, /*#__PURE__*/React__default["default"].createElement(FieldComponent, Object.assign({
+    className: className
+  }, definitionProps, fieldProps, {
+    isForm: true
+  }, formProps))) : null;
 };
 
 FieldForm.propTypes = propTypes$H;
@@ -2955,237 +2264,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__default["default"].string.isRequired,
+  components: PropTypes__default["default"].object.isRequired,
+  // eslint-disable-line
+  props: PropTypes__default["default"].object,
+  // eslint-disable-line
+  isPlaceholder: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].string,
+  placeholderProps: PropTypes__default["default"].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__default["default"].createElement(PlaceholderBlock, placeholderProps);
+  }
+
+  var RealComponent = components[utils.pascalCase(name)];
+
+  if (!RealComponent) {
+    return 'Bad component';
+  }
+
+  return /*#__PURE__*/React__default["default"].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__default["default"].node,
+  withoutBorder: PropTypes__default["default"].bool,
+  light: PropTypes__default["default"].bool,
+  className: PropTypes__default["default"].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__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$g.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$g.middle
+  }, /*#__PURE__*/React__default["default"].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__default["default"](format) ? format.format : format;
+    var formatExtension = isObject__default["default"](format) ? format.name : format;
+    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
+
+    if (file !== null) {
+      return [].concat(_toConsumableArray__default["default"](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__default["default"](currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
+    }
+
+    return currentUrls;
+  }, []);
+  return urls;
+};
+
+var propTypes$f = {
+  fonts: core.PropTypes.fonts,
+  formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
+    name: PropTypes__default["default"].string,
+    format: PropTypes__default["default"].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__default["default"](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__default["default"](fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray__default["default"]((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__default["default"].createElement("style", {
+    type: "text/css"
+  }, fontFaces.join('\n')) : null;
+};
+
+FontFaces.propTypes = propTypes$f;
+FontFaces.defaultProps = defaultProps$f;
 
-var propTypes$h = {
-  name: PropTypes__default["default"].string.isRequired,
-  components: PropTypes__default["default"].object.isRequired,
-  // eslint-disable-line
-  props: PropTypes__default["default"].object,
-  // eslint-disable-line
-  isPlaceholder: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
-  placeholderProps: PropTypes__default["default"].object // eslint-disable-line
+var styles$f = {};
 
+var propTypes$e = {
+  thumbnail: PropTypes__default["default"].node,
+  thumbnailAlign: PropTypes__default["default"].oneOf(['top', 'center', 'bottom']),
+  children: PropTypes__default["default"].node,
+  title: core.PropTypes.label,
+  className: PropTypes__default["default"].string,
+  thumbnailClassName: PropTypes__default["default"].string,
+  bodyClassName: PropTypes__default["default"].string,
+  titleClassName: PropTypes__default["default"].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__default["default"].createElement("div", {
+    className: classNames__default["default"](['card', styles$f.container, _defineProperty__default["default"]({}, className, className !== null)])
+  }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: thumbnail,
+    alt: title,
+    className: classNames__default["default"](['me-3', styles$f.thumbnail, _defineProperty__default["default"]({
+      '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__default["default"].createElement("div", {
+    className: classNames__default["default"](['card-body', styles$f.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
+  }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
+    className: classNames__default["default"](['mt-0', 'text-truncate', styles$f.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
+  }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children) : null);
+};
 
-  if (isPlaceholder) {
-    // TODO: figure out what this did
-    // const PlaceholderComponent = Placeholders[pascalCase(name)];
-    return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, placeholderProps);
-  }
+Media.propTypes = propTypes$e;
+Media.defaultProps = defaultProps$e;
 
-  var RealComponent = components[utils.pascalCase(name)];
+/**
+ * Core
+ */
 
-  if (!RealComponent) {
-    return 'Bad component';
-  }
+PropTypes__default["default"].shape({
+  listen: PropTypes__default["default"].func.isRequired,
+  push: PropTypes__default["default"].func.isRequired
+});
+PropTypes__default["default"].shape({
+  pathname: PropTypes__default["default"].string,
+  search: PropTypes__default["default"].string
+});
+PropTypes__default["default"].shape({
+  locale: PropTypes__default["default"].string.isRequired,
+  formatMessage: PropTypes__default["default"].func.isRequired
+});
+var defaultMessageContent = PropTypes__default["default"].shape({
+  type: PropTypes__default["default"].number,
+  value: PropTypes__default["default"].string
+});
+var defaultMessage = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(defaultMessageContent)]);
+var message = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string,
+  defaultMessage: defaultMessage.isRequired,
+  description: PropTypes__default["default"].string
+});
+var text = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].string]);
+var label = PropTypes__default["default"].oneOfType([message, PropTypes__default["default"].node]);
+PropTypes__default["default"].oneOf([401, 403, 404, 500]);
+PropTypes__default["default"].oneOfType([PropTypes__default["default"].shape({
+  current: PropTypes__default["default"].any // eslint-disable-line react/forbid-prop-types
 
-  return /*#__PURE__*/React__default["default"].createElement(RealComponent, Object.assign({}, props, {
-    className: className
-  }));
-};
+}), PropTypes__default["default"].func]);
+var target = PropTypes__default["default"].oneOf(['_blank', '_self', '_parent']);
+var interaction = PropTypes__default["default"].oneOf(['tap', 'swipe']);
+PropTypes__default["default"].arrayOf(interaction);
+PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].array]));
+PropTypes__default["default"].shape({
+  currentTime: PropTypes__default["default"].number,
+  duration: PropTypes__default["default"].number
+});
+/**
+ * Site
+ */
 
-ElementComponent.propTypes = propTypes$h;
-ElementComponent.defaultProps = defaultProps$h;
+PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].number,
+  firstname: PropTypes__default["default"].string,
+  lastname: PropTypes__default["default"].string,
+  email: PropTypes__default["default"].string,
+  gender: PropTypes__default["default"].string,
+  birthdate: PropTypes__default["default"].string
+});
+var menuItem = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
+  label: label,
+  url: PropTypes__default["default"].string,
+  external: PropTypes__default["default"].bool,
+  active: PropTypes__default["default"].bool
+});
+PropTypes__default["default"].arrayOf(menuItem);
+var breadcrumb = PropTypes__default["default"].shape({
+  label: label,
+  url: PropTypes__default["default"].string
+});
+PropTypes__default["default"].arrayOf(breadcrumb);
+var device = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string.isRequired
+});
+PropTypes__default["default"].arrayOf(device);
+var modal = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string.isRequired
+});
+PropTypes__default["default"].arrayOf(modal);
+var panel = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string.isRequired
+});
+PropTypes__default["default"].arrayOf(panel);
+var button = PropTypes__default["default"].shape({
+  label: label,
+  onClick: PropTypes__default["default"].func
+});
+PropTypes__default["default"].arrayOf(button);
+var bootstrapThemeStrings = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+PropTypes__default["default"].oneOf(bootstrapThemeStrings);
+PropTypes__default["default"].oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
+PropTypes__default["default"].oneOf(['lg', 'sm', null]);
+PropTypes__default["default"].oneOf(['lg', 'sm', null]);
+PropTypes__default["default"].oneOf(['start', 'end']);
+var component = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].func]);
+PropTypes__default["default"].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__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)]);
+PropTypes__default["default"].objectOf(errors);
+var selectOption = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
+  value: PropTypes__default["default"].any,
+  // eslint-disable-line
+  label: label
+})]);
+PropTypes__default["default"].arrayOf(selectOption);
+var formField = PropTypes__default["default"].shape({
+  name: PropTypes__default["default"].string,
+  component: component
+});
+PropTypes__default["default"].arrayOf(formField);
+/**
+ * Medias
+ */
 
-var propTypes$g = {
-  children: PropTypes__default["default"].node,
-  withoutBorder: PropTypes__default["default"].bool,
-  light: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string
+var mediaMetadataShape = {
+  filename: PropTypes__default["default"].string,
+  size: PropTypes__default["default"].number,
+  mime: PropTypes__default["default"].string
 };
-var defaultProps$g = {
-  children: null,
-  withoutBorder: false,
-  light: false,
-  className: null
+var mediaFile = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string,
+  handle: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string,
+  mime: PropTypes__default["default"].string,
+  url: PropTypes__default["default"].string
+});
+var mediaShape = {
+  id: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string.isRequired,
+  url: PropTypes__default["default"].string,
+  // .isRequired,
+  thumbnail_url: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape)),
+  files: PropTypes__default["default"].objectOf(mediaFile)
 };
+var media = PropTypes__default["default"].shape(mediaShape);
+PropTypes__default["default"].arrayOf(media);
+PropTypes__default["default"].oneOf(['image', 'video', 'audio', 'closed-captions', 'font']);
+var imageMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
+  type: PropTypes__default["default"].oneOf(['image', 'video']),
+  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
+    width: PropTypes__default["default"].number,
+    height: PropTypes__default["default"].number
+  }))
+}));
+PropTypes__default["default"].arrayOf(imageMedia);
+var fontMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
+  type: PropTypes__default["default"].oneOf(['font']),
+  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"]({}, mediaMetadataShape))
+}));
+PropTypes__default["default"].arrayOf(fontMedia);
+var videoMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
+  type: PropTypes__default["default"].oneOf(['video']),
+  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
+    width: PropTypes__default["default"].number,
+    height: PropTypes__default["default"].number,
+    duration: PropTypes__default["default"].number
+  }))
+}));
+PropTypes__default["default"].arrayOf(videoMedia);
+var audioMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
+  type: PropTypes__default["default"].oneOf(['audio']),
+  metadata: PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaMetadataShape), {}, {
+    duration: PropTypes__default["default"].number
+  }))
+}));
+PropTypes__default["default"].arrayOf(audioMedia);
+var closedCaptionsMedia = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, mediaShape), {}, {
+  type: PropTypes__default["default"].oneOf(['closed-captions'])
+}));
+/**
+ * Style
+ */
 
-var Empty = function Empty(_ref) {
-  var _ref2;
+var font = PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
+  type: PropTypes__default["default"].oneOf(['system', 'google', 'custom']),
+  name: PropTypes__default["default"].string,
+  media: fontMedia
+})]);
+PropTypes__default["default"].arrayOf(font);
+var textAlign = PropTypes__default["default"].oneOf(['left', 'right', 'center']);
+var color = PropTypes__default["default"].shape({
+  color: PropTypes__default["default"].string,
+  alpha: PropTypes__default["default"].number
+});
+var textStyle = PropTypes__default["default"].shape({
+  fontFamily: font,
+  fontSize: PropTypes__default["default"].number,
+  fontStyle: PropTypes__default["default"].shape({
+    bold: PropTypes__default["default"].bool,
+    italic: PropTypes__default["default"].bool,
+    underline: PropTypes__default["default"].bool,
+    upperCase: PropTypes__default["default"].bool
+  }),
+  align: textAlign,
+  color: color,
+  letterSpacing: PropTypes__default["default"].number,
+  lineHeight: PropTypes__default["default"].number
+});
+var borderTypes = PropTypes__default["default"].oneOf(['dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden']);
+var shadowType = PropTypes__default["default"].shape({
+  shadowDistance: PropTypes__default["default"].number,
+  shadowBlur: PropTypes__default["default"].number,
+  shadowColor: color
+});
+PropTypes__default["default"].shape({
+  width: PropTypes__default["default"].number,
+  style: borderTypes,
+  radius: PropTypes__default["default"].number,
+  color: color
+});
+var boxStyle = PropTypes__default["default"].shape({
+  backgroundColor: color,
+  borderRadius: PropTypes__default["default"].number,
+  borderWidth: PropTypes__default["default"].number,
+  borderColor: color,
+  borderStyle: borderTypes,
+  shadow: shadowType
+});
+PropTypes__default["default"].shape({
+  top: PropTypes__default["default"].number,
+  bottom: PropTypes__default["default"].number
+});
+PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+  rows: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
+  columns: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)])
+}));
+var objectFitSize = PropTypes__default["default"].oneOf(['cover', 'contain', null]);
+PropTypes__default["default"].shape({
+  fit: objectFitSize,
+  horizontalPosition: PropTypes__default["default"].oneOf(['left', 'center', 'right']),
+  verticalPosition: PropTypes__default["default"].oneOf(['top', 'center', 'bottom'])
+});
+/**
+ * Elements
+ */
 
-  var children = _ref.children,
-      withoutBorder = _ref.withoutBorder,
-      light = _ref.light,
-      className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$g.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty__default["default"](_ref2, styles$g.light, light), _defineProperty__default["default"](_ref2, className, className), _ref2)])
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$g.middle
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, children)));
+var textElement = PropTypes__default["default"].shape({
+  body: PropTypes__default["default"].string,
+  textStyle: textStyle
+});
+var headingElement = textElement;
+PropTypes__default["default"].shape({
+  label: PropTypes__default["default"].string,
+  textStyle: textStyle
+});
+var imageElement = PropTypes__default["default"].shape({
+  media: imageMedia
+});
+PropTypes__default["default"].arrayOf(imageElement);
+PropTypes__default["default"].shape({
+  media: videoMedia,
+  autoPlay: PropTypes__default["default"].bool,
+  loop: PropTypes__default["default"].bool,
+  closedCaptions: closedCaptionsMedia,
+  withSeekBar: PropTypes__default["default"].bool,
+  withControls: PropTypes__default["default"].bool
+});
+var visualElement = PropTypes__default["default"].shape({
+  media: imageMedia
+});
+PropTypes__default["default"].arrayOf(visualElement);
+PropTypes__default["default"].shape({
+  media: audioMedia,
+  autoPlay: PropTypes__default["default"].bool,
+  loop: PropTypes__default["default"].bool,
+  closedCaptions: closedCaptionsMedia,
+  withPlayPause: PropTypes__default["default"].bool
+});
+PropTypes__default["default"].shape({
+  media: closedCaptionsMedia
+});
+var backgroundElement = PropTypes__default["default"].shape({
+  color: color,
+  image: imageMedia,
+  video: videoMedia
+});
+var imageElementWithCaption = PropTypes__default["default"].shape({
+  image: imageMedia,
+  caption: textElement
+});
+PropTypes__default["default"].arrayOf(imageElementWithCaption);
+var stackDirection = PropTypes__default["default"].oneOf(['horizontal', 'vertical']);
+var stackAlign = PropTypes__default["default"].oneOf(['start', 'center', 'end']);
+var stackSpacing = PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].oneOf(['between', 'evenly', 'around'])]);
+PropTypes__default["default"].shape({
+  direction: stackDirection,
+  align: stackAlign,
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  spacing: stackSpacing,
+  reverse: PropTypes__default["default"].bool
+});
+PropTypes__default["default"].shape({
+  layout: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  spacing: PropTypes__default["default"].number
+});
+var geoPosition = PropTypes__default["default"].shape({
+  lat: PropTypes__default["default"].number,
+  lng: PropTypes__default["default"].number
+});
+var markerShape = {
+  id: PropTypes__default["default"].number,
+  geoPosition: geoPosition,
+  title: headingElement,
+  subtitle: headingElement,
+  description: textElement
 };
+var marker = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, markerShape));
+PropTypes__default["default"].arrayOf(marker);
+var markerWithImage = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, markerShape), {}, {
+  image: imageMedia
+}));
+PropTypes__default["default"].arrayOf(markerWithImage);
+var answerShape = {
+  id: PropTypes__default["default"].string,
+  label: textElement
+};
+var answer = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, answerShape));
+var quizAnswer = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, answerShape), {}, {
+  good: PropTypes__default["default"].bool
+}));
+PropTypes__default["default"].arrayOf(answer);
+PropTypes__default["default"].arrayOf(quizAnswer);
+var callToActionTypes = PropTypes__default["default"].oneOf(['swipe-up', 'button']);
+PropTypes__default["default"].shape({
+  active: PropTypes__default["default"].bool,
+  type: callToActionTypes,
+  url: PropTypes__default["default"].string,
+  label: textElement,
+  buttonStyle: boxStyle
+});
+var speaker = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string,
+  name: PropTypes__default["default"].string,
+  avatar: imageMedia,
+  side: PropTypes__default["default"].oneOf(['left', 'right']),
+  color: color
+});
+var speakers = PropTypes__default["default"].arrayOf(speaker);
+var conversationMessage = PropTypes__default["default"].shape({
+  speaker: PropTypes__default["default"].string,
+  message: PropTypes__default["default"].string,
+  image: imageMedia
+});
+var conversationMessages = PropTypes__default["default"].arrayOf(conversationMessage);
+PropTypes__default["default"].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__default["default"](format) ? format.format : format;
-    var formatExtension = isObject__default["default"](format) ? format.name : format;
-    var file = files["webfonts.".concat(formatExtension)] || files[formatExtension] || null;
-
-    if (file !== null) {
-      return [].concat(_toConsumableArray__default["default"](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__default["default"](currentUrls), ["url(\"".concat(originalFile.url, "?\") format(\"").concat(finalFormat, "\")")]);
-    }
-
-    return currentUrls;
-  }, []);
-  return urls;
+var fieldShape = {
+  name: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string.isRequired,
+  label: text
 };
+var field = PropTypes__default["default"].shape(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldShape), {}, {
+  isSection: PropTypes__default["default"].bool,
+  fields: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape(fieldShape))
+}));
+var fields = PropTypes__default["default"].arrayOf(field);
+var screenDefinition = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string.isRequired,
+  type: PropTypes__default["default"].oneOf(['screen']).isRequired,
+  title: text.isRequired,
+  layouts: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  fields: fields
+});
+PropTypes__default["default"].arrayOf(screenDefinition);
+var fieldDefinition = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string.isRequired,
+  type: PropTypes__default["default"].oneOf(['field']).isRequired,
+  title: text.isRequired,
+  fields: fields
+});
+PropTypes__default["default"].arrayOf(fieldDefinition);
+/**
+ * Components
+ */
 
-var propTypes$f = {
-  fonts: core.PropTypes.fonts,
-  formats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].shape({
-    name: PropTypes__default["default"].string,
-    format: PropTypes__default["default"].string
-  })]))
-};
-var defaultProps$f = {
-  fonts: [],
-  formats: ['eot', 'woff2', 'woff', {
-    name: 'otf',
-    format: 'opentype'
-  }, {
-    name: 'ttf',
-    format: 'truetype'
-  }, 'svg']
+var storyComponentShape = {
+  type: PropTypes__default["default"].string.isRequired
 };
+var storyComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
+PropTypes__default["default"].arrayOf(storyComponent);
+var screenComponent = PropTypes__default["default"].shape(_objectSpread__default["default"]({}, storyComponentShape));
+var screenComponents = PropTypes__default["default"].arrayOf(screenComponent);
 
-var FontFaces = function FontFaces(_ref4) {
-  var fonts = _ref4.fonts,
-      formats = _ref4.formats;
-  var fontFaces = (fonts || []).filter(function (it) {
-    return isObject__default["default"](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__default["default"].shape({
+  id: PropTypes__default["default"].string,
+  textStyles: PropTypes__default["default"].objectOf(textStyle),
+  // renamed to textstyles
+  background: backgroundElement,
+  colors: PropTypes__default["default"].objectOf(color),
+  components: screenComponents
+});
+PropTypes__default["default"].shape(_objectSpread__default["default"]({
+  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__default["default"](fontFontFaces), [urls !== null && urls.length > 0 ? "\n                @font-face {\n                    font-family: \"".concat(name, "\";\n                    src: ").concat(urls.join(','), ";\n                }\n            ") : null], _toConsumableArray__default["default"]((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__default["default"].shape({
+  description: PropTypes__default["default"].string,
+  shareUrl: PropTypes__default["default"].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__default["default"].createElement("style", {
-    type: "text/css"
-  }, fontFaces.join('\n')) : null;
-};
+PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].string,
+  theme: theme,
+  components: screenComponents,
+  metadata: metadata
+});
+/**
+ * Render
+ */
 
-FontFaces.propTypes = propTypes$f;
-FontFaces.defaultProps = defaultProps$f;
+var deviceScreen = PropTypes__default["default"].shape({
+  name: PropTypes__default["default"].string.isRequired,
+  mediaQuery: PropTypes__default["default"].string
+});
+PropTypes__default["default"].arrayOf(deviceScreen);
+PropTypes__default["default"].shape({
+  screen: PropTypes__default["default"].string,
+  screens: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  landscape: PropTypes__default["default"].bool
+});
+PropTypes__default["default"].oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
+/**
+ * Screens
+ */
 
-var styles$f = {};
+PropTypes__default["default"].shape({
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number
+});
+PropTypes__default["default"].shape({
+  width: PropTypes__default["default"].number,
+  height: PropTypes__default["default"].number,
+  url: PropTypes__default["default"].string,
+  target: target,
+  iframe: PropTypes__default["default"].string,
+  image: imageMedia
+});
+PropTypes__default["default"].shape({
+  src: PropTypes__default["default"].string,
+  track: PropTypes__default["default"].string,
+  trackLng: PropTypes__default["default"].number,
+  controls: PropTypes__default["default"].bool
+});
+var slide = PropTypes__default["default"].shape({
+  image: imageMedia,
+  text: PropTypes__default["default"].string
+});
+PropTypes__default["default"].arrayOf(slide); // export const imageStyle = PropTypes.shape({
+//     alt: PropTypes.string,
+//     fit: PropTypes.object,
+// });
 
-var propTypes$e = {
-  thumbnail: PropTypes__default["default"].node,
-  thumbnailAlign: PropTypes__default["default"].oneOf(['top', 'center', 'bottom']),
-  children: PropTypes__default["default"].node,
-  title: core.PropTypes.label,
-  className: PropTypes__default["default"].string,
-  thumbnailClassName: PropTypes__default["default"].string,
-  bodyClassName: PropTypes__default["default"].string,
-  titleClassName: PropTypes__default["default"].string
-};
-var defaultProps$e = {
-  thumbnail: null,
-  thumbnailAlign: 'top',
-  children: null,
-  title: null,
-  className: null,
-  thumbnailClassName: null,
-  bodyClassName: null,
-  titleClassName: null
-};
+PropTypes__default["default"].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__default["default"].createElement("div", {
-    className: classNames__default["default"](['card', styles$f.container, _defineProperty__default["default"]({}, className, className !== null)])
-  }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
-    src: thumbnail,
-    alt: title,
-    className: classNames__default["default"](['me-3', styles$f.thumbnail, _defineProperty__default["default"]({
-      '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__default["default"].createElement("div", {
-    className: classNames__default["default"](['card-body', styles$f.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
-  }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
-    className: classNames__default["default"](['mt-0', 'text-truncate', styles$f.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
-  }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children) : null);
+var transitionName = PropTypes__default["default"].oneOf(['fade', 'scale', 'slide']);
+var transitionParams = {
+  duration: PropTypes__default["default"].number,
+  easing: PropTypes__default["default"].oneOf(['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear'])
 };
+var transition = PropTypes__default["default"].oneOfType([transitionName.isRequired, PropTypes__default["default"].shape(_objectSpread__default["default"]({
+  name: transitionName.isRequired
+}, transitionParams))]);
+PropTypes__default["default"].shape({
+  "in": transition,
+  out: transition
+});
+/**
+ * Search
+ */
 
-Media.propTypes = propTypes$e;
-Media.defaultProps = defaultProps$e;
+var searchFilter = PropTypes__default["default"].shape({
+  type: PropTypes__default["default"].string,
+  value: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number])
+});
+PropTypes__default["default"].arrayOf(searchFilter);
+/**
+ * Payments
+ */
+
+var paymentItem = PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  date: PropTypes__default["default"].string,
+  type: PropTypes__default["default"].string,
+  invoice_link: PropTypes__default["default"].string,
+  amount: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+});
+PropTypes__default["default"].arrayOf(paymentItem);
+/**
+ * Page Metadada
+ */
+
+var pageMetadata = PropTypes__default["default"].shape({
+  canonical: PropTypes__default["default"].string,
+  description: PropTypes__default["default"].string,
+  keywords: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].array]),
+  image: PropTypes__default["default"].shape({
+    url: PropTypes__default["default"].string
+  }),
+  favicon: PropTypes__default["default"].shape({
+    url: PropTypes__default["default"].string
+  }),
+  rssUrl: PropTypes__default["default"].string,
+  atomUrl: PropTypes__default["default"].string,
+  microformats: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({}))
+});
+PropTypes__default["default"].shape({
+  name: textElement,
+  avatar: PropTypes__default["default"].shape({
+    url: PropTypes__default["default"].string
+  })
+});
+PropTypes__default["default"].shape({
+  id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  name: PropTypes__default["default"].string
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {
@@ -4035,7 +3896,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__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
@@ -4546,7 +4407,6 @@ exports.Button = Button$1;
 exports.Buttons = Buttons;
 exports.Card = Card;
 exports.Close = Close;
-exports.CloseButton = CloseButton;
 exports.CollapsablePanel = CollapsablePanel;
 exports.Date = Date$1;
 exports.Detector = Detector;
@@ -4558,7 +4418,6 @@ exports.FontFaces = FontFaces;
 exports.Form = Form;
 exports.FormPanel = FormPanel;
 exports.HighlightStyle = HighlightStyle;
-exports.IconButton = IconButton;
 exports.Label = Label;
 exports.Link = Link;
 exports.LinkStyle = LinkStyle;
@@ -4598,7 +4457,6 @@ exports.ScreenPreview = Preview;
 exports.ScreenSizer = ScreenSizer;
 exports.Screens = Screens;
 exports.Slideshow = Slideshow;
-exports.SlidingButtons = SlidingButtons;
 exports.Spinner = Spinner;
 exports.Tabs = TabsMenu;
 exports.Transitions = Transitions;