@micromag/screen-timeline 0.3.531 → 0.3.547

package/es/index.js

@@ -355,15 +355,13 @@ var Timeline = function Timeline(_ref) {
 };
 Timeline.propTypes = propTypes;
 Timeline.defaultProps = defaultProps;
-var TimelineScreen = Timeline;
 
 var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
   var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(TimelineScreen, Object.assign({}, props, {
+  return /*#__PURE__*/React.createElement(Timeline, Object.assign({}, props, {
     illustrated: true
   }));
 };
-var TimelineIllustratedScreen$1 = TimelineIllustratedScreen;
 
 var definition = [{
   id: 'timeline',
@@ -385,7 +383,7 @@ var definition = [{
       "value": "Timeline"
     }]
   }),
-  component: TimelineScreen,
+  component: Timeline,
   layouts: ['normal'],
   // transforms,
   fields: [{
@@ -567,7 +565,7 @@ var definition = [{
       "value": "Timeline with images"
     }]
   }),
-  component: TimelineIllustratedScreen$1,
+  component: TimelineIllustratedScreen,
   layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
   fields: [{
     name: 'title',
@@ -741,4 +739,4 @@ var definition = [{
   }]
 }];
 
-export { TimelineIllustratedScreen$1 as TimelineIllustratedScreen, TimelineScreen, definition as default };
+export { TimelineIllustratedScreen, Timeline as TimelineScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.3.531",
+    "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,17 +60,17 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.531",
-        "@micromag/element-background": "^0.3.531",
-        "@micromag/element-container": "^0.3.531",
-        "@micromag/element-footer": "^0.3.531",
-        "@micromag/element-header": "^0.3.531",
-        "@micromag/element-heading": "^0.3.531",
-        "@micromag/element-layout": "^0.3.531",
-        "@micromag/element-scroll": "^0.3.531",
-        "@micromag/element-text": "^0.3.531",
-        "@micromag/element-visual": "^0.3.531",
-        "@micromag/transforms": "^0.3.531",
+        "@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-scroll": "^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",
@@ -82,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e3a59c467ad33528b38eb4badd78b6ed0e38a3a6"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,750 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var reactIntl = require('react-intl');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-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 Scroll = require('@micromag/element-scroll');
-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-timeline-container","background":"micromag-screen-timeline-background","empty":"micromag-screen-timeline-empty","content":"micromag-screen-timeline-content","emptyTitle":"micromag-screen-timeline-emptyTitle","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","last":"micromag-screen-timeline-last","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
-
-var propTypes = {
-  layout: PropTypes.oneOf(['normal', 'title-description-image', 'title-image-description', 'image-title-description']),
-  title: core.PropTypes.headingElement,
-  items: PropTypes.arrayOf(core.PropTypes.textElement),
-  withoutLine: PropTypes.bool,
-  bulletColor: core.PropTypes.color,
-  lineColor: core.PropTypes.color,
-  bulletShape: PropTypes.oneOf(['circle', 'square']),
-  bulletFilled: PropTypes.bool,
-  illustrated: PropTypes.bool,
-  spacing: PropTypes.number,
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'normal',
-  title: null,
-  items: [null],
-  withoutLine: false,
-  bulletColor: null,
-  lineColor: null,
-  bulletShape: 'circle',
-  bulletFilled: true,
-  illustrated: false,
-  spacing: 20,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  type: null,
-  className: null
-};
-var Timeline = function Timeline(_ref) {
-  var layout = _ref.layout,
-    title = _ref.title,
-    items = _ref.items,
-    withoutLine = _ref.withoutLine,
-    bulletColor = _ref.bulletColor,
-    lineColor = _ref.lineColor,
-    bulletShape = _ref.bulletShape,
-    bulletFilled = _ref.bulletFilled,
-    illustrated = _ref.illustrated,
-    spacing = _ref.spacing,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    type = _ref.type,
-    className = _ref.className;
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  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 _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var finalItems = React.useMemo(function () {
-    return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
-      return {};
-    }) : items || [null];
-  }, [isPlaceholder, items]);
-  var hasTitle = utils.isTextFilled(title);
-  var itemsCount = finalItems !== null ? finalItems.length : 0;
-  var hasItems = finalItems !== null && itemsCount;
-  var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
-    var _ref2 = curr || {},
-      _ref2$image = _ref2.image,
-      image = _ref2$image === void 0 ? null : _ref2$image;
-    return acc + (image !== null ? 1 : 0);
-  }, 0) : 0;
-  var _useState = React.useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    imagesLoaded = _useState2[0],
-    setImagesLoaded = _useState2[1];
-  var ready = imagesLoaded >= imagesCount;
-  // const transitionsPlaying = current && ready;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = current || active;
-  var onImageLoaded = React.useCallback(function () {
-    setImagesLoaded(function (count) {
-      return count + 1;
-    });
-  }, [setImagesLoaded]);
-  var firstLineRef = React.useRef(null);
-  var firstContentRef = React.useRef(null);
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    imageWidth = _useState4[0],
-    setImageWidth = _useState4[1];
-  React.useEffect(function () {
-    if (firstLineRef.current !== null) {
-      setImageWidth(firstContentRef.current.offsetWidth - firstLineRef.current.offsetWidth);
-    } else {
-      setImageWidth(firstContentRef.current.offsetWidth);
-    }
-  }, [width, height]);
-  var timelineElements = (finalItems || []).map(function (item, itemI) {
-    var _ref3 = item || {},
-      _ref3$title = _ref3.title,
-      itemTitle = _ref3$title === void 0 ? null : _ref3$title,
-      _ref3$description = _ref3.description,
-      description = _ref3$description === void 0 ? null : _ref3$description,
-      _ref3$image = _ref3.image,
-      image = _ref3$image === void 0 ? null : _ref3$image;
-    var hasItemTitle = utils.isTextFilled(itemTitle);
-    var hasDescription = utils.isTextFilled(description);
-    var hasImage = image !== null;
-    var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
-    var titleIndex = elementsTypes.indexOf('title');
-    var imageIndex = elementsTypes.indexOf('image');
-    if (!illustrated) {
-      elementsTypes.splice(imageIndex, 1);
-    }
-    var typesCount = elementsTypes.length;
-    var _ref4 = description || {},
-      descriptionTextStyle = _ref4.textStyle;
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      key: "item-".concat(itemI)
-    }, elementsTypes.map(function (elementType, typeI) {
-      var elementContent = null;
-      var hasElement = false;
-      switch (elementType) {
-        case 'title':
-          hasElement = hasItemTitle;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.title
-          }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-            placeholder: "title",
-            emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-              id: "bmO4Ss",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Entry Title"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasItemTitle
-          }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, itemTitle) : null));
-          break;
-        case 'image':
-          hasElement = hasImage;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.imageContainer
-          }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-            placeholder: "image",
-            emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-              id: "ebsPd4",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Image"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasImage
-          }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
-            className: styles.image,
-            videoClassName: styles.video,
-            media: image,
-            width: imageWidth,
-            resolution: resolution,
-            playing: backgroundPlaying,
-            active: active,
-            shouldLoad: mediaShouldLoad,
-            withoutVideo: isPreview,
-            onLoaded: onImageLoaded
-          }) : null));
-          break;
-        case 'description':
-          hasElement = hasDescription;
-          elementContent = /*#__PURE__*/React.createElement("div", {
-            className: styles.description
-          }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-            placeholder: "text",
-            emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-              id: "507VAi",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Description"
-              }]
-            }),
-            emptyClassName: styles.empty,
-            isEmpty: !hasDescription
-          }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
-            textStyle: _objectSpread({}, descriptionTextStyle)
-          })) : null));
-          break;
-        default:
-          elementContent = null;
-          hasElement = false;
-      }
-      var firstItem = itemI === 0;
-      var lastItem = itemI === itemsCount - 1;
-      var lastType = typeI === typesCount - 1;
-      var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
-      var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
-      return /*#__PURE__*/React.createElement("div", {
-        key: "element-".concat(elementType),
-        className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
-        ref: itemI === 0 ? firstContentRef : null
-      }, !withoutLine ? /*#__PURE__*/React.createElement("div", {
-        className: styles.timeline,
-        ref: itemI === 0 ? firstLineRef : null
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
-        style: _objectSpread({}, !topLineHidden ? utils.getStyleFromColor(lineColor, 'backgroundColor') : null)
-      }), elementType === 'title' ? /*#__PURE__*/React.createElement("div", {
-        className: styles.bullet,
-        style: _objectSpread(_objectSpread({}, utils.getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? utils.getStyleFromColor(bulletColor, 'backgroundColor') : null)
-      }) : null, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
-        style: _objectSpread({}, !bottomLineHidden ? utils.getStyleFromColor(lineColor, 'backgroundColor') : null)
-      })) : null, /*#__PURE__*/React.createElement("div", {
-        className: classNames([styles.body, _defineProperty({}, styles.last, lastType && !lastItem)])
-      }, elementContent));
-    }));
-  });
-
-  // Call to Action
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrolledBottom = _useState6[0],
-    setScrolledBottom = _useState6[1];
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    footerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    footerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = React.useCallback(function (_ref9) {
-    var initial = _ref9.initial;
-    if (initial) {
-      trackScreenEvent('scroll', 'Screen');
-    }
-    setScrolledBottom(true);
-  }, [trackScreenEvent]);
-  var onScrolledNotBottom = React.useCallback(function () {
-    setScrolledBottom(false);
-  }, [setScrolledBottom]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
-    "data-screen-ready": ready
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    className: styles.scroll,
-    verticalAlign: "middle",
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom,
-    onScrolledNotBottom: onScrolledNotBottom,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement(Layout, {
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
-      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingBottom: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "Title",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "BSTWf8",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyTitle]),
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title)) : null), timelineElements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
-    style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingTop: spacing / 2,
-      paddingBottom: spacing / 2
-    }
-  }, /*#__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);
-};
-Timeline.propTypes = propTypes;
-Timeline.defaultProps = defaultProps;
-var TimelineScreen = Timeline;
-
-var TimelineIllustratedScreen = function TimelineIllustratedScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(TimelineScreen, Object.assign({}, props, {
-    illustrated: true
-  }));
-};
-var TimelineIllustratedScreen$1 = TimelineIllustratedScreen;
-
-var definition = [{
-  id: 'timeline',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
-    }),
-    order: 8
-  },
-  title: reactIntl.defineMessage({
-    id: "GzoKNb",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Timeline"
-    }]
-  }),
-  component: TimelineScreen,
-  layouts: ['normal'],
-  // transforms,
-  fields: [{
-    name: 'title',
-    type: 'heading-element',
-    // inline: true,
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'items',
-    type: 'entries',
-    theme: {
-      title: {
-        textStyle: 'heading2'
-      },
-      description: {
-        textStyle: 'text'
-      }
-    },
-    label: reactIntl.defineMessage({
-      id: "3ifj0j",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entries"
-      }]
-    })
-  }, {
-    name: 'bulletShape',
-    type: 'radios',
-    defaultValue: 'circle',
-    options: [{
-      value: 'circle',
-      label: reactIntl.defineMessage({
-        id: "+uInZz",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Circle"
-        }]
-      })
-    }, {
-      value: 'square',
-      label: reactIntl.defineMessage({
-        id: "fusnxf",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Square"
-        }]
-      })
-    }],
-    label: reactIntl.defineMessage({
-      id: "twTaAZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet shape"
-      }]
-    })
-  }, {
-    name: 'withoutLine',
-    type: 'toggle',
-    defaultValue: false,
-    label: reactIntl.defineMessage({
-      id: "N4lZhy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Without line"
-      }]
-    })
-  }, {
-    name: 'bulletFilled',
-    type: 'toggle',
-    defaultValue: false,
-    label: reactIntl.defineMessage({
-      id: "YWcp4v",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet filled"
-      }]
-    })
-  }, {
-    name: 'bulletColor',
-    type: 'color',
-    defaultValue: {
-      alpha: 1,
-      color: '#FFFFFF'
-    },
-    label: reactIntl.defineMessage({
-      id: "uNpHnA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet color"
-      }]
-    })
-  }, {
-    name: 'lineColor',
-    type: 'color',
-    defaultValue: {
-      alpha: 1,
-      color: '#FFFFFF'
-    },
-    label: reactIntl.defineMessage({
-      id: "RHMS2f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Line color"
-      }]
-    })
-  }, {
-    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: 'timeline-illustrated',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
-    }),
-    order: 8
-  },
-  title: reactIntl.defineMessage({
-    id: "33UbSd",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Timeline with images"
-    }]
-  }),
-  component: TimelineIllustratedScreen$1,
-  layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
-  fields: [{
-    name: 'title',
-    type: 'heading-element',
-    // inline: true,
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'layout',
-    type: 'screen-layout',
-    defaultValue: 'title-image-description',
-    label: reactIntl.defineMessage({
-      id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
-    })
-  }, {
-    name: 'items',
-    type: 'entries-with-visual',
-    theme: {
-      title: {
-        textStyle: 'heading2'
-      },
-      description: {
-        textStyle: 'text'
-      }
-    },
-    label: reactIntl.defineMessage({
-      id: "3ifj0j",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entries"
-      }]
-    })
-  }, {
-    name: 'withoutLine',
-    type: 'toggle',
-    defaultValue: false,
-    label: reactIntl.defineMessage({
-      id: "N4lZhy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Without line"
-      }]
-    })
-  }, {
-    name: 'bulletShape',
-    type: 'radios',
-    defaultValue: 'circle',
-    options: [{
-      value: 'circle',
-      label: reactIntl.defineMessage({
-        id: "+uInZz",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Circle"
-        }]
-      })
-    }, {
-      value: 'square',
-      label: reactIntl.defineMessage({
-        id: "fusnxf",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Square"
-        }]
-      })
-    }],
-    label: reactIntl.defineMessage({
-      id: "twTaAZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet shape"
-      }]
-    })
-  }, {
-    name: 'bulletFilled',
-    type: 'toggle',
-    defaultValue: false,
-    label: reactIntl.defineMessage({
-      id: "YWcp4v",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet filled"
-      }]
-    })
-  }, {
-    name: 'bulletColor',
-    type: 'color',
-    defaultValue: {
-      alpha: 1,
-      color: '#FFFFFF'
-    },
-    label: reactIntl.defineMessage({
-      id: "uNpHnA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet color"
-      }]
-    })
-  }, {
-    name: 'lineColor',
-    type: 'color',
-    defaultValue: {
-      alpha: 1,
-      color: '#FFFFFF'
-    },
-    label: reactIntl.defineMessage({
-      id: "RHMS2f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Line color"
-      }]
-    })
-  }, {
-    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.TimelineIllustratedScreen = TimelineIllustratedScreen$1;
-exports.TimelineScreen = TimelineScreen;
-exports.default = definition;