@micromag/screen-title 0.3.541 → 0.3.569

package/es/index.js

@@ -230,15 +230,13 @@ var TitleScreen = function TitleScreen(_ref) {
 };
 TitleScreen.propTypes = propTypes$2;
 TitleScreen.defaultProps = defaultProps$2;
-var TitleScreen$1 = TitleScreen;
 
 var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
     withSubtitle: true
   }));
 };
-var TitleSubtitleScreen$1 = TitleSubtitleScreen;
 
 var _excluded = ["credits"];
 var propTypes$1 = {
@@ -250,7 +248,7 @@ var defaultProps$1 = {
 var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
   var credits = _ref.credits,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
     description: credits,
     withSubtitle: true,
     withDescription: true,
@@ -265,13 +263,12 @@ var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
 };
 TitleSubtitleCreditsScreen.propTypes = propTypes$1;
 TitleSubtitleCreditsScreen.defaultProps = defaultProps$1;
-var TitleSubtitleCreditsScreen$1 = TitleSubtitleCreditsScreen;
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes = {};
 var defaultProps = {};
 var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(TitleScreen, Object.assign({}, props, {
     withSubtitle: true,
     withDescription: true,
     withBox: true
@@ -279,7 +276,6 @@ var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
 };
 TitleWithBoxScreen.propTypes = propTypes;
 TitleWithBoxScreen.defaultProps = defaultProps;
-var TitleWithBoxScreen$1 = TitleWithBoxScreen;
 
 var definition = [{
   id: 'title',
@@ -301,7 +297,7 @@ var definition = [{
       "value": "Title"
     }]
   }),
-  component: TitleScreen$1,
+  component: TitleScreen,
   layouts: ['top', 'middle', 'bottom'],
   // transforms,
   fields: [{
@@ -395,7 +391,7 @@ var definition = [{
       "value": "Title with subtitle"
     }]
   }),
-  component: TitleSubtitleScreen$1,
+  component: TitleSubtitleScreen,
   layouts: ['top', 'middle', 'bottom', 'split'],
   // transforms,
   fields: [{
@@ -502,7 +498,7 @@ var definition = [{
       "value": "Title with subtitle and credits"
     }]
   }),
-  component: TitleSubtitleCreditsScreen$1,
+  component: TitleSubtitleCreditsScreen,
   layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
   // transforms,
   fields: [{
@@ -622,7 +618,7 @@ var definition = [{
       "value": "Title with box"
     }]
   }),
-  component: TitleWithBoxScreen$1,
+  component: TitleWithBoxScreen,
   layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
   // transforms,
   fields: [{
@@ -745,4 +741,4 @@ var definition = [{
   }]
 }];
 
-export { TitleScreen$1 as TitleScreen, TitleSubtitleCreditsScreen$1 as TitleSubtitleCreditsScreen, TitleSubtitleScreen$1 as TitleSubtitleScreen, definition as default };
+export { TitleScreen, TitleSubtitleCreditsScreen, TitleSubtitleScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-title",
-    "version": "0.3.541",
+    "version": "0.3.569",
     "private": false,
     "description": "",
     "keywords": [
@@ -30,12 +30,11 @@
         }
     ],
     "license": "ISC",
-    "main": "lib/index.js",
+    "type": "module",
     "module": "es/index.js",
     "style": "assets/css/styles.css",
     "exports": {
         ".": {
-            "require": "./lib/index.js",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -61,15 +60,15 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-container": "^0.3.541",
-        "@micromag/element-footer": "^0.3.541",
-        "@micromag/element-header": "^0.3.541",
-        "@micromag/element-heading": "^0.3.541",
-        "@micromag/element-layout": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.569",
+        "@micromag/element-background": "^0.3.569",
+        "@micromag/element-container": "^0.3.569",
+        "@micromag/element-footer": "^0.3.569",
+        "@micromag/element-header": "^0.3.569",
+        "@micromag/element-heading": "^0.3.569",
+        "@micromag/element-layout": "^0.3.569",
+        "@micromag/element-text": "^0.3.569",
+        "@micromag/transforms": "^0.3.569",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -80,5 +79,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "ceb71f23a32ab8df4a1563a1e5cd5598e539de4d"
 }

package/lib/index.js

@@ -1,755 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var classNames = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var core = require('@micromag/core');
-var components = require('@micromag/core/components');
-var contexts = require('@micromag/core/contexts');
-var utils = require('@micromag/core/utils');
-var Background = require('@micromag/element-background');
-var Container = require('@micromag/element-container');
-var Footer = require('@micromag/element-footer');
-var Header = require('@micromag/element-header');
-var Heading = require('@micromag/element-heading');
-var Layout = require('@micromag/element-layout');
-var Text = require('@micromag/element-text');
-var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-
-var styles = {"container":"micromag-screen-title-container","background":"micromag-screen-title-background","disabled":"micromag-screen-title-disabled","hidden":"micromag-screen-title-hidden","placeholder":"micromag-screen-title-placeholder","content":"micromag-screen-title-content","emptyTitle":"micromag-screen-title-emptyTitle","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyDescription":"micromag-screen-title-emptyDescription","title":"micromag-screen-title-title","withMargin":"micromag-screen-title-withMargin","subtitle":"micromag-screen-title-subtitle","box":"micromag-screen-title-box","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
-
-var propTypes$2 = {
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom', 'split', 'split-top', 'split-bottom']),
-  title: core.PropTypes.headingElement,
-  subtitle: core.PropTypes.headingElement,
-  description: core.PropTypes.textElement,
-  boxStyle: core.PropTypes.boxStyle,
-  withSubtitle: PropTypes.bool,
-  withDescription: PropTypes.bool,
-  withBox: PropTypes.bool,
-  spacing: PropTypes.number,
-  descriptionEmptyLabel: core.PropTypes.label,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  transitionStagger: PropTypes.number,
-  className: PropTypes.string
-};
-var defaultProps$2 = {
-  layout: 'top',
-  title: null,
-  subtitle: null,
-  description: null,
-  boxStyle: null,
-  withSubtitle: false,
-  withDescription: false,
-  withBox: false,
-  spacing: 20,
-  descriptionEmptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "507VAi",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Description"
-    }]
-  }),
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  transitionStagger: 100,
-  className: null
-};
-var TitleScreen = function TitleScreen(_ref) {
-  var layout = _ref.layout,
-    title = _ref.title,
-    subtitle = _ref.subtitle,
-    description = _ref.description,
-    boxStyle = _ref.boxStyle,
-    withSubtitle = _ref.withSubtitle,
-    withDescription = _ref.withDescription,
-    withBox = _ref.withBox,
-    spacing = _ref.spacing,
-    descriptionEmptyLabel = _ref.descriptionEmptyLabel,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    className = _ref.className;
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var _useViewerContext = contexts.useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = contexts.useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var hasTitle = utils.isTextFilled(title);
-  var hasSubtitle = utils.isTextFilled(subtitle);
-  var hasDescription = utils.isTextFilled(description);
-  var layoutParts = layout.split('-');
-  var isSplitted = layoutParts[0] === 'split';
-  var isTopLayout = layout === 'top';
-  var isMiddleLayout = layout === 'middle';
-  var isBottomLayout = layout === 'bottom';
-  var verticalAlign = isSplitted ? layoutParts[1] || null : layoutParts[0];
-  var titleWithMargin = hasTitle && (hasSubtitle || hasDescription) && (!isSplitted || verticalAlign === 'top');
-  var subtitleWithMargin = hasSubtitle && hasDescription && (!isSplitted || verticalAlign === 'bottom');
-  var backgroundPlaying = current && (isView || isEdit);
-  var backgroundShouldLoad = current || active;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var titleElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "title",
-    placeholder: "title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "2ZOPe+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
-  }, title, {
-    size: 1
-  })) : null);
-  var subtitleElement = withSubtitle ? /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "subtitle",
-    placeholder: "subtitle",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "d60tSn",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
-    }),
-    emptyClassName: styles.emptySubtitle,
-    isEmpty: !hasSubtitle
-  }, hasSubtitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: classNames([styles.subtitle, _defineProperty({}, styles.withMargin, subtitleWithMargin)])
-  }, subtitle, {
-    size: 2
-  })) : null) : null;
-  var descriptionElement = withDescription ? /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "description",
-    placeholder: "shortText",
-    emptyLabel: descriptionEmptyLabel,
-    emptyClassName: styles.emptyDescription,
-    isEmpty: !hasDescription
-  }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null) : null;
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": true
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    fullscreen: true,
-    verticalAlign: verticalAlign,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingBottom: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-top"
-  }) : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-top"
-  }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-top"
-  }) : null, withBox && !isSplitted ? /*#__PURE__*/React.createElement("div", {
-    className: styles.box,
-    style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? utils.getStyleFromBox(boxStyle) : null
-  }, [titleElement, subtitleElement, descriptionElement]) : null, withBox && isSplitted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.box,
-    key: "top",
-    style: isEdit || isPlaceholder || hasTitle || withDescription && verticalAlign === 'top' && hasSubtitle ? utils.getStyleFromBox(boxStyle) : null
-  }, titleElement, withDescription && verticalAlign === 'top' ? subtitleElement : null), /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer1"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.box,
-    key: "bottom",
-    style: isEdit || isPlaceholder || hasDescription || (!withDescription || verticalAlign === 'bottom') && hasSubtitle ? utils.getStyleFromBox(boxStyle) : null
-  }, !withDescription || verticalAlign === 'bottom' ? subtitleElement : null, descriptionElement)) : null, !withBox ? /*#__PURE__*/React.createElement(React.Fragment, null, titleElement, isSplitted && (!withDescription || verticalAlign === 'bottom') && /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer1"
-  }), subtitleElement, isSplitted && withDescription && verticalAlign === 'top' && /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer2"
-  }), descriptionElement) : null, !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-bottom"
-  }) : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/React.createElement(Layout.Spacer, {
-    key: "spacer-cta-bottom"
-  }) : null, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    key: "call-to-action",
-    style: {
-      paddingTop: spacing,
-      paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
-      paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-TitleScreen.propTypes = propTypes$2;
-TitleScreen.defaultProps = defaultProps$2;
-var TitleScreen$1 = TitleScreen;
-
-var TitleSubtitleScreen = function TitleSubtitleScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
-    withSubtitle: true
-  }));
-};
-var TitleSubtitleScreen$1 = TitleSubtitleScreen;
-
-var _excluded = ["credits"];
-var propTypes$1 = {
-  credits: core.PropTypes.textElement
-};
-var defaultProps$1 = {
-  credits: null
-};
-var TitleSubtitleCreditsScreen = function TitleSubtitleCreditsScreen(_ref) {
-  var credits = _ref.credits,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
-    description: credits,
-    withSubtitle: true,
-    withDescription: true,
-    descriptionEmptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "/hupzO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Credits"
-      }]
-    })
-  }));
-};
-TitleSubtitleCreditsScreen.propTypes = propTypes$1;
-TitleSubtitleCreditsScreen.defaultProps = defaultProps$1;
-var TitleSubtitleCreditsScreen$1 = TitleSubtitleCreditsScreen;
-
-/* eslint-disable react/jsx-props-no-spreading */
-var propTypes = {};
-var defaultProps = {};
-var TitleWithBoxScreen = function TitleWithBoxScreen(props) {
-  return /*#__PURE__*/React.createElement(TitleScreen$1, Object.assign({}, props, {
-    withSubtitle: true,
-    withDescription: true,
-    withBox: true
-  }));
-};
-TitleWithBoxScreen.propTypes = propTypes;
-TitleWithBoxScreen.defaultProps = defaultProps;
-var TitleWithBoxScreen$1 = TitleWithBoxScreen;
-
-var definition = [{
-  id: 'title',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    order: 1
-  },
-  title: reactIntl.defineMessage({
-    id: "dVcog7",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title"
-    }]
-  }),
-  component: TitleScreen$1,
-  layouts: ['top', 'middle', 'bottom'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}, {
-  id: 'title-subtitle',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    order: 1
-  },
-  title: reactIntl.defineMessage({
-    id: "P1dwGU",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with subtitle"
-    }]
-  }),
-  component: TitleSubtitleScreen$1,
-  layouts: ['top', 'middle', 'bottom', 'split'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'subtitle',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}, {
-  id: 'title-subtitle-credits',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    order: 1
-  },
-  title: reactIntl.defineMessage({
-    id: "vZrFq6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with subtitle and credits"
-    }]
-  }),
-  component: TitleSubtitleCreditsScreen$1,
-  layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'subtitle',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
-    })
-  }, {
-    name: 'credits',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "upzOTm",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Credits"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}, {
-  id: 'title-with-box',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    order: 1
-  },
-  title: reactIntl.defineMessage({
-    id: "9a5s+m",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with box"
-    }]
-  }),
-  component: TitleWithBoxScreen$1,
-  layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'top',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'subtitle',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
-    })
-  }, {
-    name: 'description',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "ZCe0r4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    })
-  }, {
-    type: 'fields',
-    isList: true,
-    label: reactIntl.defineMessage({
-      id: "LOknw0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
-    }),
-    fields: [{
-      name: 'boxStyle',
-      type: 'box-style-form',
-      label: reactIntl.defineMessage({
-        id: "f5Yipd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Box"
-        }]
-      })
-    }]
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}];
-
-exports.TitleScreen = TitleScreen$1;
-exports.TitleSubtitleCreditsScreen = TitleSubtitleCreditsScreen$1;
-exports.TitleSubtitleScreen = TitleSubtitleScreen$1;
-exports.default = definition;