@micromag/screen-image 0.3.541 → 0.3.547

package/es/index.js

@@ -295,40 +295,35 @@ var ImageScreen = function ImageScreen(_ref) {
 };
 ImageScreen.propTypes = propTypes;
 ImageScreen.defaultProps = defaultProps;
-var ImageScreen$1 = ImageScreen;
 
 var ImageLegendScreen = function ImageLegendScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
     withLegend: true
   }));
 };
-var ImageLegendScreen$1 = ImageLegendScreen;
 
 var ImageTextScreen = function ImageTextScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
     withText: true
   }));
 };
-var ImageTextScreen$1 = ImageTextScreen;
 
 var ImageTitleScreen = function ImageTitleScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
     withTitle: true
   }));
 };
-var ImageTitleScreen$1 = ImageTitleScreen;
 
 var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(ImageScreen, Object.assign({}, props, {
     withTitle: true,
     withText: true
   }));
 };
-var ImageTitleTextScreen$1 = ImageTitleTextScreen;
 
 // import * as transforms from './transforms/index';
 
@@ -352,7 +347,7 @@ var definition = [{
       "value": "Image"
     }]
   }),
-  component: ImageScreen$1,
+  component: ImageScreen,
   layouts: ['normal', 'fullscreen'],
   // transforms,
   fields: [{
@@ -455,7 +450,7 @@ var definition = [{
       "value": "Image with title"
     }]
   }),
-  component: ImageTitleScreen$1,
+  component: ImageTitleScreen,
   layouts: ['normal', 'reverse', 'card', 'card-reverse'],
   // transforms,
   fields: [{
@@ -572,7 +567,7 @@ var definition = [{
       "value": "Image with text"
     }]
   }),
-  component: ImageTextScreen$1,
+  component: ImageTextScreen,
   layouts: ['normal', 'reverse', 'card', 'card-reverse'],
   // transforms,
   fields: [{
@@ -688,7 +683,7 @@ var definition = [{
       "value": "Image with title and text"
     }]
   }),
-  component: ImageTitleTextScreen$1,
+  component: ImageTitleTextScreen,
   layouts: ['normal', 'reverse', 'title-top', 'card', 'card-reverse'],
   // transforms,
   fields: [{
@@ -819,7 +814,7 @@ var definition = [{
       "value": "Image with legend"
     }]
   }),
-  component: ImageLegendScreen$1,
+  component: ImageLegendScreen,
   layouts: ['normal', 'reverse', 'card', 'card-reverse'],
   // transforms,
   fields: [{
@@ -917,4 +912,4 @@ var definition = [{
   }]
 }];
 
-export { ImageLegendScreen$1 as ImageLegendScreen, ImageScreen$1 as ImageScreen, ImageTextScreen$1 as ImageTextScreen, ImageTitleScreen$1 as ImageTitleScreen, ImageTitleTextScreen$1 as ImageTitleTextScreen, definition as default };
+export { ImageLegendScreen, ImageScreen, ImageTextScreen, ImageTitleScreen, ImageTitleTextScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-image",
-    "version": "0.3.541",
+    "version": "0.3.547",
     "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,16 +60,16 @@
     },
     "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/element-visual": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-heading": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/element-visual": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -81,5 +80,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,929 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-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 hooks = require('@micromag/core/hooks');
-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 Visual = require('@micromag/element-visual');
-var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var _extends = require('@babel/runtime/helpers/extends');
-
-var styles = {"container":"micromag-screen-image-container","image":"micromag-screen-image-image","background":"micromag-screen-image-background","disabled":"micromag-screen-image-disabled","hidden":"micromag-screen-image-hidden","placeholder":"micromag-screen-image-placeholder","content":"micromag-screen-image-content","emptyImage":"micromag-screen-image-emptyImage","emptyTitle":"micromag-screen-image-emptyTitle","emptyText":"micromag-screen-image-emptyText","emptyLegend":"micromag-screen-image-emptyLegend","imageContainer":"micromag-screen-image-imageContainer","placeholderImage":"micromag-screen-image-placeholderImage","isPlaceholder":"micromag-screen-image-isPlaceholder","layout":"micromag-screen-image-layout","isCard":"micromag-screen-image-isCard","isCardReverse":"micromag-screen-image-isCardReverse","footer":"micromag-screen-image-footer","isFullscreen":"micromag-screen-image-isFullscreen","header":"micromag-screen-image-header"};
-
-// NOTE: should this be a scrolling element ?
-
-var propTypes = {
-  layout: PropTypes.oneOf(['normal', 'fullscreen', 'reverse', 'card', 'card-reverse', 'title-top']),
-  image: core.PropTypes.imageMedia,
-  imageFit: PropTypes.oneOf(['contain', 'cover']),
-  defaultImageFit: PropTypes.string,
-  title: core.PropTypes.headingElement,
-  text: core.PropTypes.textElement,
-  legend: core.PropTypes.textElement,
-  withTitle: PropTypes.bool,
-  withText: PropTypes.bool,
-  withLegend: PropTypes.bool,
-  spacing: PropTypes.number,
-  background: core.PropTypes.backgroundElement,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'normal',
-  image: null,
-  imageFit: null,
-  defaultImageFit: 'cover',
-  title: null,
-  text: null,
-  legend: null,
-  withTitle: false,
-  withText: false,
-  withLegend: false,
-  spacing: 20,
-  background: null,
-  header: null,
-  footer: null,
-  current: true,
-  active: true,
-  className: null
-};
-var ImageScreen = function ImageScreen(_ref) {
-  var layout = _ref.layout,
-    image = _ref.image,
-    imageFit = _ref.imageFit,
-    defaultImageFit = _ref.defaultImageFit,
-    title = _ref.title,
-    text = _ref.text,
-    legend = _ref.legend,
-    withTitle = _ref.withTitle,
-    withText = _ref.withText,
-    withLegend = _ref.withLegend,
-    spacing = _ref.spacing,
-    background = _ref.background,
-    header = _ref.header,
-    footer = _ref.footer,
-    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 hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasImage = image !== null;
-  var hasTitle = utils.isTextFilled(title);
-  var hasText = utils.isTextFilled(text);
-  var hasLegend = utils.isTextFilled(legend);
-  var _useState = React.useState(!hasImage),
-    _useState2 = _slicedToArray(_useState, 2),
-    ready = _useState2[0],
-    setReady = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var onImageLoaded = React.useCallback(function () {
-    setReady(true);
-  }, [setReady]);
-  var finalImageFit = React.useMemo(function () {
-    return {
-      fit: imageFit || defaultImageFit
-    };
-  }, [imageFit, defaultImageFit]);
-  var isReversed = layout === 'reverse' || layout === 'card-reverse';
-  var isTitleTop = layout === 'title-top';
-  var isCardLayout = layout === 'card' || layout === 'card-reverse';
-  var isCard = layout === 'card';
-  var isCardReverse = layout === 'card-reverse';
-  var isFullscreen = layout === 'fullscreen';
-  var finalSpacing = !isFullscreen && !isPlaceholder ? spacing : 0;
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    imageCntRef = _useDimensionObserver.ref,
-    imageWidth = _useDimensionObserver.width,
-    imageHeight = _useDimensionObserver.height;
-  var cardImageMargin = isCardReverse ? "".concat(finalSpacing / 2, "px ").concat(-finalSpacing / 2, "px 0") : "0 ".concat(-finalSpacing / 2, "px ").concat(finalSpacing / 2, "px");
-  var imageMargin = isCardLayout ? cardImageMargin : finalSpacing / 2;
-  var itemMarginStyle = !isPlaceholder ? {
-    margin: finalSpacing / 2,
-    marginTop: isCardReverse && !hasHeader ? finalSpacing : finalSpacing / 2,
-    marginBottom: isCard && !hasHeader ? finalSpacing : finalSpacing / 2
-  } : null;
-  var items = [/*#__PURE__*/React.createElement("div", {
-    key: "image",
-    ref: imageCntRef,
-    className: styles.imageContainer,
-    style: !isPlaceholder ? {
-      margin: imageMargin
-    } : null
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "image",
-    placeholderProps: {
-      className: styles.placeholderImage,
-      height: '100%'
-    },
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "ebsPd4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    }),
-    emptyClassName: styles.emptyImage,
-    isEmpty: !hasImage
-  }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
-    className: styles.image,
-    media: image,
-    objectFit: finalImageFit,
-    width: imageWidth,
-    height: imageHeight,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    active: active,
-    shouldLoad: mediaShouldLoad,
-    withoutVideo: isPreview,
-    onLoaded: onImageLoaded
-  }) : null)), withTitle && /*#__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("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Heading, title)) : null), withText && /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "text",
-    placeholder: "text",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "z4CiV1",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    }),
-    emptyClassName: styles.emptyText,
-    isEmpty: !hasText
-  }, hasText ? /*#__PURE__*/React.createElement("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Text, text)) : null), withLegend && /*#__PURE__*/React.createElement(components.ScreenElement, {
-    key: "legend",
-    placeholder: "shortText",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "dqnkQk",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Legend"
-      }]
-    }),
-    emptyClassName: styles.emptyLegend,
-    isEmpty: !hasLegend
-  }, hasLegend ? /*#__PURE__*/React.createElement("div", {
-    style: itemMarginStyle
-  }, /*#__PURE__*/React.createElement(Text, legend)) : null)];
-  if (isReversed) {
-    items.reverse();
-  } else if (isTitleTop) {
-    if (withTitle && (hasTitle || isPlaceholder)) {
-      items.splice(0, 0, items.splice(1, 1)[0]);
-    }
-  }
-  var paddingBottom = (current && !isPreview ? viewerBottomHeight : 0) + finalSpacing / 2;
-  var paddingTop = (!isPreview ? viewerTopHeight : 0) + finalSpacing / 2;
-  if (isCardLayout || isFullscreen) {
-    paddingTop = 0;
-    paddingBottom = 0;
-  }
-  if (isCardReverse) {
-    paddingTop = current && !isPreview ? viewerTopHeight : 0;
-    paddingBottom = current && !isPreview ? viewerBottomHeight : 0;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isReversed, isReversed), styles.isPlaceholder, isPlaceholder), styles.isCard, isCard), styles.isCardReverse, isCardReverse), styles.isFullscreen, isFullscreen)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    fullscreen: true,
-    style: !isPlaceholder ? {
-      padding: finalSpacing / 2,
-      paddingTop: paddingTop,
-      paddingBottom: paddingBottom
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    className: styles.header,
-    style: isFullscreen || isCardReverse ? {
-      paddingTop: hasHeader ? spacing / 2 : spacing,
-      paddingBottom: hasHeader ? spacing / 2 : spacing,
-      paddingLeft: isCardReverse ? spacing / 2 : spacing,
-      paddingRight: isCardReverse ? spacing / 2 : spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    } : {
-      paddingTop: isCardLayout ? spacing / 2 : null,
-      paddingBottom: isCardLayout ? spacing : spacing / 2,
-      paddingLeft: spacing / 2,
-      paddingRight: spacing / 2
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, items, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    className: styles.footer,
-    style: isFullscreen || isCardReverse ? {
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2,
-      transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
-    } : {
-      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
-      paddingTop: isCardLayout ? spacing / 2 : null,
-      paddingBottom: isCardLayout ? spacing / 2 : null
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-};
-ImageScreen.propTypes = propTypes;
-ImageScreen.defaultProps = defaultProps;
-var ImageScreen$1 = ImageScreen;
-
-var ImageLegendScreen = function ImageLegendScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
-    withLegend: true
-  }));
-};
-var ImageLegendScreen$1 = ImageLegendScreen;
-
-var ImageTextScreen = function ImageTextScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
-    withText: true
-  }));
-};
-var ImageTextScreen$1 = ImageTextScreen;
-
-var ImageTitleScreen = function ImageTitleScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
-    withTitle: true
-  }));
-};
-var ImageTitleScreen$1 = ImageTitleScreen;
-
-var ImageTitleTextScreen = function ImageTitleTextScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(ImageScreen$1, Object.assign({}, props, {
-    withTitle: true,
-    withText: true
-  }));
-};
-var ImageTitleTextScreen$1 = ImageTitleTextScreen;
-
-// import * as transforms from './transforms/index';
-
-var definition = [{
-  id: 'image',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "6mX2ya",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
-    }),
-    order: 4
-  },
-  title: reactIntl.defineMessage({
-    id: "uJ9eBc",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Image"
-    }]
-  }),
-  component: ImageScreen$1,
-  layouts: ['normal', 'fullscreen'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'normal',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'image',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'imageFit',
-    type: 'fit',
-    defaultValue: 'cover',
-    values: ['cover', 'contain'],
-    label: reactIntl.defineMessage({
-      id: "dkBBRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image fit"
-      }]
-    })
-  }, {
-    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: 'image-title',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "S/mavZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text and Images"
-      }]
-    }),
-    order: 3
-  },
-  title: reactIntl.defineMessage({
-    id: "AA8TV9",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Image with title"
-    }]
-  }),
-  component: ImageTitleScreen$1,
-  layouts: ['normal', 'reverse', 'card', 'card-reverse'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'normal',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'image',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'imageFit',
-    type: 'fit',
-    defaultValue: 'cover',
-    values: ['cover', 'contain'],
-    label: reactIntl.defineMessage({
-      id: "dkBBRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image fit"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'heading-element',
-    inline: true,
-    theme: {
-      textStyle: 'heading2'
-    },
-    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: 'image-text',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "S/mavZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text and Images"
-      }]
-    }),
-    order: 3
-  },
-  title: reactIntl.defineMessage({
-    id: "CJmQeh",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Image with text"
-    }]
-  }),
-  component: ImageTextScreen$1,
-  layouts: ['normal', 'reverse', 'card', 'card-reverse'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'normal',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'image',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'imageFit',
-    type: 'fit',
-    defaultValue: 'cover',
-    values: ['cover', 'contain'],
-    label: reactIntl.defineMessage({
-      id: "dkBBRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image fit"
-      }]
-    })
-  }, {
-    name: 'text',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "4E2gbX",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    })
-  }, {
-    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: 'image-title-text',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "S/mavZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text and Images"
-      }]
-    }),
-    order: 3
-  },
-  title: reactIntl.defineMessage({
-    id: "eWIM/8",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Image with title and text"
-    }]
-  }),
-  component: ImageTitleTextScreen$1,
-  layouts: ['normal', 'reverse', 'title-top', 'card', 'card-reverse'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'normal',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'image',
-    type: 'visual',
-    isHorizontal: false,
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'imageFit',
-    type: 'fit',
-    defaultValue: 'cover',
-    values: ['cover', 'contain'],
-    label: reactIntl.defineMessage({
-      id: "dkBBRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image fit"
-      }]
-    })
-  }, {
-    name: 'title',
-    type: 'text-element',
-    inline: true,
-    theme: {
-      textStyle: 'heading2'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'text',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "4E2gbX",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Text"
-      }]
-    })
-  }, {
-    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: 'image-legend',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "6mX2ya",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
-    }),
-    order: 4
-  },
-  title: reactIntl.defineMessage({
-    id: "H1YcaV",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Image with legend"
-    }]
-  }),
-  component: ImageLegendScreen$1,
-  layouts: ['normal', 'reverse', 'card', 'card-reverse'],
-  // transforms,
-  fields: [{
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'normal',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'image',
-    type: 'visual',
-    label: reactIntl.defineMessage({
-      id: "xsipID",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image"
-      }]
-    })
-  }, {
-    name: 'imageFit',
-    type: 'fit',
-    defaultValue: 'cover',
-    values: ['cover', 'contain'],
-    label: reactIntl.defineMessage({
-      id: "dkBBRa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Image fit"
-      }]
-    })
-  }, {
-    name: 'legend',
-    type: 'text-element',
-    theme: {
-      textStyle: 'text'
-    },
-    label: reactIntl.defineMessage({
-      id: "3OS3Ms",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Legend"
-      }]
-    })
-  }, {
-    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'
-      }
-    }
-  }]
-}];
-
-exports.ImageLegendScreen = ImageLegendScreen$1;
-exports.ImageScreen = ImageScreen$1;
-exports.ImageTextScreen = ImageTextScreen$1;
-exports.ImageTitleScreen = ImageTitleScreen$1;
-exports.ImageTitleTextScreen = ImageTitleTextScreen$1;
-exports.default = definition;