@micromag/screen-map 0.3.541 → 0.3.547

package/es/index.js

@@ -503,7 +503,6 @@ var MapImagesScreen = function MapImagesScreen(_ref) {
     withMarkerImages: true
   }));
 };
-var MapImagesScreen$1 = MapImagesScreen;
 
 // import * as transforms from './transforms/index';
 
@@ -708,7 +707,7 @@ var definition = [{
       "value": "Map with image markers"
     }]
   }),
-  component: MapImagesScreen$1,
+  component: MapImagesScreen,
   layouts: ['normal'],
   // transforms,
   states: [{
@@ -871,4 +870,4 @@ var definition = [{
   }]
 }];
 
-export { MapImagesScreen$1 as MapImagesScreen, MapScreen, definition as default };
+export { MapImagesScreen, MapScreen, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-map",
-    "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,18 +60,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.541",
-        "@micromag/element-background": "^0.3.541",
-        "@micromag/element-button": "^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-image": "^0.3.541",
-        "@micromag/element-map": "^0.3.541",
-        "@micromag/element-scroll": "^0.3.541",
-        "@micromag/element-text": "^0.3.541",
-        "@micromag/transforms": "^0.3.541",
+        "@micromag/core": "^0.3.547",
+        "@micromag/element-background": "^0.3.547",
+        "@micromag/element-button": "^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-image": "^0.3.547",
+        "@micromag/element-map": "^0.3.547",
+        "@micromag/element-scroll": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -83,5 +82,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6c04a7e327b5fbc096785c11320b3fbd3c5751c8"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,880 +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 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 elementBackground = require('@micromag/element-background');
-var ButtonElement = require('@micromag/element-button');
-var Container = require('@micromag/element-container');
-var Heading = require('@micromag/element-heading');
-var ImageElement = require('@micromag/element-image');
-var Map = require('@micromag/element-map');
-var Scroll = require('@micromag/element-scroll');
-var Text = require('@micromag/element-text');
-var _objectDestructuringEmpty = require('@babel/runtime/helpers/objectDestructuringEmpty');
-var _extends = require('@babel/runtime/helpers/extends');
-
-var styles = {"container":"micromag-screen-map-container","splash":"micromag-screen-map-splash","markerOverlayScrollable":"micromag-screen-map-markerOverlayScrollable","markerOverlayContainer":"micromag-screen-map-markerOverlayContainer","background":"micromag-screen-map-background","disabled":"micromag-screen-map-disabled","hidden":"micromag-screen-map-hidden","placeholder":"micromag-screen-map-placeholder","content":"micromag-screen-map-content","markerOverlaySafe":"micromag-screen-map-markerOverlaySafe","markerOverlay":"micromag-screen-map-markerOverlay","markerOverlayContent":"micromag-screen-map-markerOverlayContent","markerOverlayContentInner":"micromag-screen-map-markerOverlayContentInner","swipeIndicator":"micromag-screen-map-swipeIndicator","title":"micromag-screen-map-title","description":"micromag-screen-map-description","button":"micromag-screen-map-button","emptyTitle":"micromag-screen-map-emptyTitle","emptyDescription":"micromag-screen-map-emptyDescription","emptyButton":"micromag-screen-map-emptyButton","splashButton":"micromag-screen-map-splashButton","closeButton":"micromag-screen-map-closeButton","markerImage":"micromag-screen-map-markerImage","markerTitle":"micromag-screen-map-markerTitle","markerSubtitle":"micromag-screen-map-markerSubtitle","markerDescription":"micromag-screen-map-markerDescription","hasSelectedMarker":"micromag-screen-map-hasSelectedMarker","opened":"micromag-screen-map-opened"};
-
-var defaultCenter = {
-  lat: 45.5,
-  lng: -73.56
-};
-var defaultZoom = 10;
-var stopDragEventsPropagation = {
-  onTouchMove: function onTouchMove(e) {
-    return e.stopPropagation();
-  },
-  onTouchStart: function onTouchStart(e) {
-    return e.stopPropagation();
-  },
-  onTouchEnd: function onTouchEnd(e) {
-    return e.stopPropagation();
-  },
-  onPointerMove: function onPointerMove(e) {
-    return e.stopPropagation();
-  },
-  onPointerUp: function onPointerUp(e) {
-    return e.stopPropagation();
-  },
-  onPointerDown: function onPointerDown(e) {
-    return e.stopPropagation();
-  }
-};
-var propTypes = {
-  layout: PropTypes.oneOf(['normal']),
-  draggable: PropTypes.bool,
-  markers: PropTypes.oneOfType([core.PropTypes.markers, core.PropTypes.markersWithImage]),
-  title: core.PropTypes.textElement,
-  description: core.PropTypes.textElement,
-  button: core.PropTypes.textElement,
-  openedMarkerSpacerHeight: PropTypes.number,
-  withMarkerImages: PropTypes.bool,
-  center: core.PropTypes.geoPosition,
-  zoom: PropTypes.number,
-  fitBounds: PropTypes.bool,
-  // header: MicromagPropTypes.header,
-  // footer: MicromagPropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  // enableInteractions: PropTypes.func,
-  // disableInteraction: PropTypes.func,
-  type: PropTypes.string,
-  className: PropTypes.string
-};
-var defaultProps = {
-  layout: 'normal',
-  draggable: true,
-  markers: [],
-  center: defaultCenter,
-  zoom: defaultZoom,
-  fitBounds: true,
-  title: null,
-  description: null,
-  button: null,
-  openedMarkerSpacerHeight: 0.75,
-  withMarkerImages: false,
-  background: null,
-  current: true,
-  active: true,
-  type: null,
-  className: null
-};
-function MapScreen(_ref) {
-  var layout = _ref.layout,
-    draggable = _ref.draggable,
-    markers = _ref.markers,
-    title = _ref.title,
-    description = _ref.description,
-    button = _ref.button,
-    openedMarkerSpacerHeight = _ref.openedMarkerSpacerHeight,
-    withMarkerImages = _ref.withMarkerImages,
-    zoom = _ref.zoom,
-    center = _ref.center,
-    fitBounds = _ref.fitBounds,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    type = _ref.type,
-    className = _ref.className;
-  var _useIntl = reactIntl.useIntl(),
-    locale = _useIntl.locale;
-  var _useGoogleKeys = contexts.useGoogleKeys(),
-    _useGoogleKeys$apiKey = _useGoogleKeys.apiKey,
-    apiKey = _useGoogleKeys$apiKey === void 0 ? null : _useGoogleKeys$apiKey;
-  var trackScreenEvent = hooks.useTrackScreenEvent(type);
-  var _useState = React.useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedMarkerIndex = _useState2[0],
-    setSelectedMarkerIndex = _useState2[1];
-  var hasSelectedMarker = selectedMarkerIndex !== null;
-  var lastRenderedMarker = React.useRef(null);
-  var _useScreenSize = contexts.useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var _ref2 = background || {},
-    backgroundColor = _ref2.color;
-  var markerOverlayContentStyle = utils.getStyleFromColor(backgroundColor);
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var screenState = contexts.useScreenState();
-  var _useState3 = React.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    ready = _useState4[0],
-    setReady = _useState4[1];
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var backgroundPlaying = current && (isView || isEdit);
-  // const backgroundShouldLoad = current || active;
-  var backgroundShouldLoad = current || active;
-  var _useState5 = React.useState(isStatic || isCapture),
-    _useState6 = _slicedToArray(_useState5, 2),
-    opened = _useState6[0],
-    setOpened = _useState6[1];
-  var _useViewerInteraction = contexts.useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var onMapReady = React.useCallback(function () {
-    return setReady(true);
-  }, [setReady]);
-  var finalMarkers = React.useMemo(function () {
-    return (markers || []).map(function (marker, markerI) {
-      return _objectSpread(_objectSpread({}, marker), {}, {
-        active: markerI === selectedMarkerIndex
-      });
-    });
-  }, [markers, selectedMarkerIndex]);
-  var closeMarker = React.useCallback(function () {
-    var lastMarker = finalMarkers[selectedMarkerIndex];
-    lastRenderedMarker.current = lastMarker;
-    setSelectedMarkerIndex(null);
-  }, [finalMarkers, selectedMarkerIndex, setSelectedMarkerIndex]);
-  var onClickMap = React.useCallback(function () {
-    var lastMarker = finalMarkers[selectedMarkerIndex];
-    trackScreenEvent('click_marker_close', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(lastMarker.title.body), {
-      marker: lastMarker,
-      markerIndex: selectedMarkerIndex
-    });
-    closeMarker();
-  }, [finalMarkers, selectedMarkerIndex, trackScreenEvent, closeMarker]);
-  var onClickMarker = React.useCallback(function (e, index) {
-    var marker = finalMarkers[index];
-    setSelectedMarkerIndex(index);
-    trackScreenEvent('click_marker_open', "Marker ".concat(index + 1, ": ").concat(marker.title.body), {
-      marker: marker,
-      markerIndex: index
-    });
-  }, [finalMarkers, setSelectedMarkerIndex, trackScreenEvent]);
-  var onButtonClick = React.useCallback(function () {
-    setOpened(true);
-    if (disableInteraction !== null) {
-      disableInteraction();
-    }
-    trackScreenEvent('click_button', button.body);
-  }, [setOpened, disableInteraction, trackScreenEvent, button]);
-  var onCloseClick = React.useCallback(function () {
-    setOpened(false);
-    if (enableInteraction !== null) {
-      enableInteraction();
-    }
-    trackScreenEvent('click_close', 'Close icon');
-    closeMarker();
-  }, [setOpened, enableInteraction, trackScreenEvent]);
-  var onMapDragEnd = React.useCallback(function (newCenter) {
-    var coords = newCenter.toJSON();
-    trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
-      coords: coords
-    });
-  }, [trackScreenEvent]);
-  var onScrolledBottom = React.useCallback(function (_ref3) {
-    var initial = _ref3.initial;
-    if (initial) {
-      var selectedMarker = (markers || [])[selectedMarkerIndex];
-      trackScreenEvent('scroll', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(selectedMarker.title.body), {
-        marker: selectedMarker,
-        markerIndex: selectedMarkerIndex
-      });
-    }
-  }, [trackScreenEvent, markers, selectedMarkerIndex]);
-  var _useDimensionObserver = hooks.useDimensionObserver({
-      disabled: !isView
-    }),
-    markerOverContentInnerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    markerOverContentInnerWidth = _useDimensionObserver2 === void 0 ? '100%' : _useDimensionObserver2;
-  var _useState7 = React.useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    markerImagesLoaded = _useState8[0],
-    setMarkerImagesLoaded = _useState8[1];
-  var allMarkersImagesLoaded = markerImagesLoaded === (markers || []).length;
-  var finalReady = ready && (!withMarkerImages || allMarkersImagesLoaded);
-  React.useEffect(function () {
-    if (withMarkerImages && markers !== null && (markers || []).length) {
-      setMarkerImagesLoaded(0);
-      var imgs = markers.map(function (marker) {
-        var _ref4 = marker || {},
-          _ref4$image = _ref4.image,
-          image = _ref4$image === void 0 ? null : _ref4$image;
-        var _ref5 = image || {},
-          _ref5$url = _ref5.url,
-          url = _ref5$url === void 0 ? null : _ref5$url;
-        var withUrl = url !== null;
-        if (withUrl) {
-          var img = new Image();
-          img.src = url;
-          img.onload = function () {
-            setMarkerImagesLoaded(function (index) {
-              return setMarkerImagesLoaded(index + 1);
-            });
-          };
-          return img;
-        }
-        return null;
-      });
-      return function () {
-        imgs.filter(function (img) {
-          return img !== null;
-        }).forEach(function (img) {
-          img.onload = function () {}; // eslint-disable-line no-param-reassign
-        });
-      };
-    }
-    return function () {};
-  }, [withMarkerImages, markers]);
-
-  // Switch state
-  React.useEffect(function () {
-    if (!isEdit && !isPreview) {
-      return;
-    }
-    var _ref6 = screenState !== null ? screenState.split('.') : [],
-      _ref7 = _slicedToArray(_ref6, 2),
-      _ref7$ = _ref7[0],
-      stateId = _ref7$ === void 0 ? null : _ref7$,
-      _ref7$2 = _ref7[1],
-      markerIndex = _ref7$2 === void 0 ? null : _ref7$2;
-    if (stateId === 'intro') {
-      setOpened(false);
-      setSelectedMarkerIndex(null);
-    } else if (stateId === 'map') {
-      setOpened(true);
-      setSelectedMarkerIndex(null);
-    } else if (stateId === 'markers' || stateId === 'markers-with-image') {
-      setOpened(true);
-      setSelectedMarkerIndex(parseInt(markerIndex, 10));
-    }
-  }, [screenState, isEdit, setOpened]);
-  var staticUrl;
-  if (width > 0 && height > 0 && apiKey !== null) {
-    var correctMarkers = markers !== null ? markers.filter(function (it) {
-      return it !== null;
-    }).filter(function (_ref8) {
-      var _ref8$geoPosition = _ref8.geoPosition,
-        geoPosition = _ref8$geoPosition === void 0 ? null : _ref8$geoPosition;
-      return geoPosition !== null;
-    }) : null;
-    staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
-    if (center !== null && (correctMarkers === null || correctMarkers.length === 0)) {
-      var _ref9 = center || {},
-        _ref9$lat = _ref9.lat,
-        lat = _ref9$lat === void 0 ? null : _ref9$lat,
-        _ref9$lng = _ref9.lng,
-        lng = _ref9$lng === void 0 ? null : _ref9$lng;
-      staticUrl += "&center=".concat(lat, ",").concat(lng);
-    }
-    if (zoom !== null) {
-      staticUrl += "&zoom=".concat(zoom);
-    }
-    if (apiKey !== null) {
-      staticUrl += "&key=".concat(apiKey);
-    }
-    if (locale !== null) {
-      staticUrl += "&language=".concat(locale);
-    }
-    if (correctMarkers !== null) {
-      staticUrl += correctMarkers.map(function (marker) {
-        var _ref10 = marker || {},
-          _ref10$geoPosition = _ref10.geoPosition,
-          geoPosition = _ref10$geoPosition === void 0 ? null : _ref10$geoPosition;
-        var _ref11 = geoPosition || {},
-          _ref11$lat = _ref11.lat,
-          lat = _ref11$lat === void 0 ? null : _ref11$lat,
-          _ref11$lng = _ref11.lng,
-          lng = _ref11$lng === void 0 ? null : _ref11$lng;
-        var _ref12 = marker || {},
-          _ref12$image = _ref12.image,
-          image = _ref12$image === void 0 ? null : _ref12$image;
-        var _ref13 = image || {},
-          _ref13$url = _ref13.url,
-          url = _ref13$url === void 0 ? null : _ref13$url;
-        return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
-      }).join('');
-    }
-  }
-  var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
-  var _ref14 = renderedMarker || {},
-    _ref14$title = _ref14.title,
-    markerTitle = _ref14$title === void 0 ? null : _ref14$title,
-    _ref14$subtitle = _ref14.subtitle,
-    markerSubtitle = _ref14$subtitle === void 0 ? null : _ref14$subtitle,
-    _ref14$description = _ref14.description,
-    markerDescription = _ref14$description === void 0 ? null : _ref14$description,
-    _ref14$image = _ref14.image,
-    markerImage = _ref14$image === void 0 ? null : _ref14$image;
-  var hasMarkerTitle = markerTitle !== null;
-  var hasMarkerSubtitle = markerSubtitle !== null;
-  var hasMarkerDescription = markerDescription !== null;
-  var hasMarkerImage = markerImage !== null;
-  var hasTitle = utils.isTextFilled(title);
-  var hasDescription = utils.isTextFilled(description);
-  var hasButton = utils.isTextFilled(button);
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles["".concat(layout, "Layout")], layout !== null), styles.opened, opened || isPreview && screenState !== 'intro'), styles.hasSelectedMarker, hasSelectedMarker)]),
-    "data-screen-ready": finalReady
-  }, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.content
-  }, isPlaceholder ? /*#__PURE__*/React.createElement(components.PlaceholderMap, {
-    className: styles.placeholder,
-    withImages: withMarkerImages
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, isPreview ? /*#__PURE__*/React.createElement(ImageElement, {
-    media: staticUrl !== null ? {
-      url: staticUrl,
-      metadata: {
-        width: Math.min(640, width),
-        height: Math.min(640, height)
-      }
-    } : null,
-    width: width,
-    height: height,
-    resolution: resolution,
-    objectFit: {
-      fit: 'cover'
-    }
-  }) : /*#__PURE__*/React.createElement(Map, {
-    key: "map",
-    center: center,
-    zoom: zoom,
-    draggable: draggable,
-    markers: finalMarkers,
-    fitBounds: fitBounds,
-    onClickMarker: onClickMarker,
-    onReady: onMapReady,
-    onDragEnd: onMapDragEnd
-  }), /*#__PURE__*/React.createElement("div", Object.assign({
-    key: "marker-overlay",
-    className: styles.markerOverlayContainer
-  }, stopDragEventsPropagation), /*#__PURE__*/React.createElement("div", {
-    className: styles.markerOverlayScrollable
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    fullscreen: true,
-    disabled: scrollingDisabled,
-    onScrolledBottom: onScrolledBottom
-  }, /*#__PURE__*/React.createElement(components.Button, {
-    className: styles.markerOverlaySafe,
-    onClick: onClickMap,
-    withoutStyle: true,
-    style: {
-      height: height * openedMarkerSpacerHeight
-    },
-    disabled: isPreview,
-    focusable: current && isView
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.markerOverlay,
-    style: {
-      minHeight: height * (1 - openedMarkerSpacerHeight)
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.markerOverlayContent,
-    style: markerOverlayContentStyle
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.swipeIndicator
-  }), /*#__PURE__*/React.createElement("div", {
-    className: styles.markerOverlayContentInner,
-    key: "markerContent-".concat(selectedMarkerIndex),
-    ref: markerOverContentInnerRef
-  }, hasMarkerImage ? /*#__PURE__*/React.createElement(ImageElement, {
-    className: styles.markerImage,
-    media: markerImage,
-    width: markerOverContentInnerWidth,
-    resolution: resolution
-  }) : null, hasMarkerTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.markerTitle
-  }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    size: 3,
-    className: styles.markerSubtitle
-  }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.markerDescription
-  }, markerDescription)) : null)))))), /*#__PURE__*/React.createElement("div", {
-    key: "splash",
-    className: classNames([styles.splash])
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "2ZOPe+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    }),
-    emptyClassName: styles.emptyTitle,
-    isEmpty: !hasTitle
-  }, /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title))), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "507VAi",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }),
-    emptyClassName: styles.emptyDescription,
-    isEmpty: !hasDescription
-  }, /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.description
-  }, description))), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "bv3rRe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Button"
-      }]
-    }),
-    emptyClassName: styles.emptyButton,
-    isEmpty: !hasButton
-  }, /*#__PURE__*/React.createElement(ButtonElement, {
-    className: styles.splashButton,
-    onClick: onButtonClick,
-    buttonStyle: button !== null ? button.buttonStyle : null,
-    focusable: current && isView
-  }, hasButton ? /*#__PURE__*/React.createElement(Text, Object.assign({}, button, {
-    className: styles.button
-  })) : /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-    id: "sXfFFw",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Enter"
-    }]
-  })))), !isStatic && !isCapture && !isPreview && !isEdit ? /*#__PURE__*/React.createElement(components.Button, {
-    key: "close-button",
-    className: styles.closeButton,
-    onClick: onCloseClick,
-    focusable: current && isView
-  }, "\xD7") : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(elementBackground.Background, {
-    color: {
-      color: '#FFFFFF',
-      alpha: 1
-    },
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: backgroundShouldLoad,
-    mediaRef: mediaRef,
-    withoutVideo: isPreview,
-    className: styles.background
-  }) : null);
-}
-MapScreen.propTypes = propTypes;
-MapScreen.defaultProps = defaultProps;
-
-var MapImagesScreen = function MapImagesScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/React.createElement(MapScreen, Object.assign({}, props, {
-    withMarkerImages: true
-  }));
-};
-var MapImagesScreen$1 = MapImagesScreen;
-
-// import * as transforms from './transforms/index';
-
-var definition = [{
-  id: 'map',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "Z27IP6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
-    }),
-    order: 6
-  },
-  title: reactIntl.defineMessage({
-    id: "dPYwJG",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Map"
-    }]
-  }),
-  component: MapScreen,
-  layouts: ['normal'],
-  // transforms,
-  states: [{
-    id: 'intro',
-    label: reactIntl.defineMessage({
-      id: "BgrRxZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Intro"
-      }]
-    }),
-    fields: [{
-      name: 'title',
-      type: 'heading-element',
-      theme: {
-        textStyle: 'heading1'
-      },
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      theme: {
-        textStyle: 'text'
-      },
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'button',
-      type: 'button-element',
-      theme: {
-        textStyle: 'button'
-      },
-      label: reactIntl.defineMessage({
-        id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      })
-    }]
-  }, {
-    id: 'map',
-    label: reactIntl.defineMessage({
-      id: "eYHEYe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
-    }),
-    fields: [{
-      name: 'draggable',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "A7ncT3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Draggable"
-        }]
-      })
-    }, {
-      name: 'fitBounds',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "NVUpOG",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Map fit markers"
-        }]
-      })
-    }, {
-      name: 'zoom',
-      type: 'slider',
-      defaultValue: 9,
-      min: 0,
-      max: 16,
-      label: reactIntl.defineMessage({
-        id: "vRzzo6",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Zoom"
-        }]
-      })
-    }, {
-      name: 'center',
-      type: 'geo-position',
-      label: reactIntl.defineMessage({
-        id: "W5qWPj",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Center"
-        }]
-      })
-    }]
-  }, {
-    id: 'markers',
-    label: reactIntl.defineMessage({
-      id: "+LvOvJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Markers"
-      }]
-    }),
-    repeatable: true,
-    fieldName: 'markers',
-    fields: [{
-      name: 'title',
-      type: 'heading-element',
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'geoPosition',
-      type: 'geo-position',
-      label: reactIntl.defineMessage({
-        id: "u3ok54",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Position"
-        }]
-      })
-    }]
-  }],
-  fields: [{
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }]
-}, {
-  id: 'map-images',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "Z27IP6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
-    }),
-    order: 6
-  },
-  title: reactIntl.defineMessage({
-    id: "ro6yHS",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Map with image markers"
-    }]
-  }),
-  component: MapImagesScreen$1,
-  layouts: ['normal'],
-  // transforms,
-  states: [{
-    id: 'intro',
-    label: reactIntl.defineMessage({
-      id: "BgrRxZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Intro"
-      }]
-    }),
-    fields: [{
-      name: 'title',
-      type: 'heading-element',
-      theme: {
-        textStyle: 'heading1'
-      },
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      theme: {
-        textStyle: 'text'
-      },
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'button',
-      type: 'button-element',
-      theme: {
-        textStyle: 'button'
-      },
-      label: reactIntl.defineMessage({
-        id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      })
-    }]
-  }, {
-    id: 'map',
-    label: reactIntl.defineMessage({
-      id: "eYHEYe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
-    }),
-    fields: [{
-      name: 'draggable',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "A7ncT3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Draggable"
-        }]
-      })
-    }, {
-      name: 'fitBounds',
-      type: 'toggle',
-      defaultValue: true,
-      label: reactIntl.defineMessage({
-        id: "NVUpOG",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Map fit markers"
-        }]
-      })
-    }, {
-      name: 'zoom',
-      type: 'slider',
-      defaultValue: 9,
-      min: 0,
-      max: 16,
-      label: reactIntl.defineMessage({
-        id: "vRzzo6",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Zoom"
-        }]
-      })
-    }, {
-      name: 'center',
-      type: 'geo-position',
-      label: reactIntl.defineMessage({
-        id: "W5qWPj",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Center"
-        }]
-      })
-    }]
-  }, {
-    id: 'markers-with-image',
-    label: reactIntl.defineMessage({
-      id: "+LvOvJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Markers"
-      }]
-    }),
-    repeatable: true,
-    fieldName: 'markers',
-    fields: [{
-      name: 'title',
-      type: 'heading-element',
-      label: reactIntl.defineMessage({
-        id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
-      })
-    }, {
-      name: 'description',
-      type: 'text-element',
-      label: reactIntl.defineMessage({
-        id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
-      })
-    }, {
-      name: 'geoPosition',
-      type: 'geo-position',
-      label: reactIntl.defineMessage({
-        id: "u3ok54",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Position"
-        }]
-      })
-    }]
-  }],
-  fields: [{
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }]
-}];
-
-exports.MapImagesScreen = MapImagesScreen$1;
-exports.MapScreen = MapScreen;
-exports.default = definition;