@micromag/screen-keypad 0.3.531 → 0.3.547

package/es/index.js

@@ -18,7 +18,7 @@ import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
 import Header from '@micromag/element-header';
 import Heading from '@micromag/element-heading';
-import Keypad$1 from '@micromag/element-keypad';
+import Keypad from '@micromag/element-keypad';
 import Layout from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
@@ -543,7 +543,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     className: styles.title
   }, title, {
     textStyle: titleTextStyle
-  })) : null), /*#__PURE__*/React.createElement(Keypad$1, {
+  })) : null), /*#__PURE__*/React.createElement(Keypad, {
     className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
     align: columnAlign,
     columns: isPlaceholder ? 3 : columns,
@@ -657,7 +657,6 @@ var KeypadScreen = function KeypadScreen(_ref) {
 };
 KeypadScreen.propTypes = propTypes;
 KeypadScreen.defaultProps = defaultProps;
-var Keypad = KeypadScreen;
 
 var definition = [{
   id: 'keypad',
@@ -680,7 +679,7 @@ var definition = [{
     }]
   }),
   layouts: ['top', 'middle', 'bottom'],
-  component: Keypad,
+  component: KeypadScreen,
   states: [{
     id: 'keypad',
     label: defineMessage({
@@ -997,4 +996,4 @@ var definition = [{
   }]
 }];
 
-export { Keypad, definition as default };
+export { KeypadScreen as Keypad, definition as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.531",
+    "version": "0.3.547",
     "private": false,
     "description": "",
     "keywords": [
@@ -34,12 +34,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",
@@ -66,22 +65,22 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.531",
-        "@micromag/element-background": "^0.3.531",
-        "@micromag/element-button": "^0.3.531",
-        "@micromag/element-call-to-action": "^0.3.531",
-        "@micromag/element-container": "^0.3.531",
-        "@micromag/element-footer": "^0.3.531",
-        "@micromag/element-grid": "^0.3.531",
-        "@micromag/element-header": "^0.3.531",
-        "@micromag/element-heading": "^0.3.531",
-        "@micromag/element-keypad": "^0.3.531",
-        "@micromag/element-layout": "^0.3.531",
-        "@micromag/element-scroll": "^0.3.531",
-        "@micromag/element-text": "^0.3.531",
-        "@micromag/element-urbania-author": "^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-button": "^0.3.547",
+        "@micromag/element-call-to-action": "^0.3.547",
+        "@micromag/element-container": "^0.3.547",
+        "@micromag/element-footer": "^0.3.547",
+        "@micromag/element-grid": "^0.3.547",
+        "@micromag/element-header": "^0.3.547",
+        "@micromag/element-heading": "^0.3.547",
+        "@micromag/element-keypad": "^0.3.547",
+        "@micromag/element-layout": "^0.3.547",
+        "@micromag/element-scroll": "^0.3.547",
+        "@micromag/element-text": "^0.3.547",
+        "@micromag/element-urbania-author": "^0.3.547",
+        "@micromag/element-visual": "^0.3.547",
+        "@micromag/transforms": "^0.3.547",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -96,5 +95,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e3a59c467ad33528b38eb4badd78b6ed0e38a3a6"
+    "gitHead": "3c2f5904ce61fcfa61f673c38c2a5ec56e9e2b07"
 }

package/lib/index.js

@@ -1,1005 +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 _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var web = require('@react-spring/web');
-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 Button = require('@micromag/element-button');
-var CallToAction = require('@micromag/element-call-to-action');
-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 Keypad$1 = require('@micromag/element-keypad');
-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 styles = {"popupButton":"micromag-screen-keypad-popupButton","popup":"micromag-screen-keypad-popup","layoutLabelOver":"micromag-screen-keypad-layoutLabelOver","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","buttonLabel":"micromag-screen-keypad-buttonLabel","withSquareItems":"micromag-screen-keypad-withSquareItems","layoutNoLabel":"micromag-screen-keypad-layoutNoLabel","thumbnail":"micromag-screen-keypad-thumbnail","popupBackdrop":"micromag-screen-keypad-popupBackdrop","button":"micromag-screen-keypad-button","background":"micromag-screen-keypad-background","container":"micromag-screen-keypad-container","disabled":"micromag-screen-keypad-disabled","hidden":"micromag-screen-keypad-hidden","placeholder":"micromag-screen-keypad-placeholder","content":"micromag-screen-keypad-content","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","placeholderItem":"micromag-screen-keypad-placeholderItem","isEmpty":"micromag-screen-keypad-isEmpty","disableHover":"micromag-screen-keypad-disableHover","isLink":"micromag-screen-keypad-isLink","imagePlaceholder":"micromag-screen-keypad-imagePlaceholder","buttonPlaceholder":"micromag-screen-keypad-buttonPlaceholder","buttonVisualPlaceholder":"micromag-screen-keypad-buttonVisualPlaceholder","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupHeading":"micromag-screen-keypad-popupHeading","popupVisual":"micromag-screen-keypad-popupVisual","contentSplit":"micromag-screen-keypad-contentSplit","emptyHeading":"micromag-screen-keypad-emptyHeading","emptyVisual":"micromag-screen-keypad-emptyVisual","emptyContent":"micromag-screen-keypad-emptyContent","emptyCTA":"micromag-screen-keypad-emptyCTA","popupCTA":"micromag-screen-keypad-popupCTA","contentBottom":"micromag-screen-keypad-contentBottom","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
-
-var placeholders = [{
-  id: '1'
-}, {
-  id: '2'
-}, {
-  id: '3'
-}, {
-  id: '4'
-}, {
-  id: '5'
-}, {
-  id: '6'
-}, {
-  id: '7'
-}, {
-  id: '8'
-}, {
-  id: '9'
-}];
-var placeholderPopupBoxStyles = {
-  padding: {
-    left: 30,
-    top: 30,
-    right: 30,
-    bottom: 30
-  }
-};
-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 mouseBlocker = _objectSpread(_objectSpread({}, stopDragEventsPropagation), {}, {
-  onClick: function onClick(e) {
-    return e.stopPropagation();
-  },
-  style: {
-    position: 'fixed',
-    zIndex: '1000',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    cursor: 'default'
-  }
-});
-var propTypes = {
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    heading: core.PropTypes.headingElement,
-    description: core.PropTypes.textElement,
-    visual: core.PropTypes.visualElement,
-    boxStyle: core.PropTypes.boxStyle
-  })),
-  title: core.PropTypes.headingElement,
-  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
-  spacing: PropTypes.number,
-  keypadSettings: PropTypes.shape({
-    layout: PropTypes.shape({
-      columnAlign: PropTypes.oneOf(['left', 'right', 'middle']),
-      columns: PropTypes.number,
-      spacing: PropTypes.number,
-      withSquareItems: PropTypes.bool
-    })
-  }),
-  buttonStyles: PropTypes.shape({
-    layout: PropTypes.string,
-    textStyle: core.PropTypes.textStyle,
-    boxStyle: core.PropTypes.boxStyle
-  }),
-  popupStyles: PropTypes.shape({
-    layout: PropTypes.oneOf(['content-top', 'content-split', 'content-bottom']),
-    headingTextStyle: core.PropTypes.textStyle,
-    contentTextStyle: core.PropTypes.textStyle,
-    boxStyle: core.PropTypes.boxStyle
-  }),
-  header: core.PropTypes.header,
-  footer: core.PropTypes.footer,
-  background: core.PropTypes.backgroundElement,
-  current: PropTypes.bool,
-  active: PropTypes.bool,
-  className: PropTypes.string
-};
-var defaultProps = {
-  items: null,
-  title: null,
-  layout: null,
-  spacing: 20,
-  keypadSettings: null,
-  buttonStyles: null,
-  popupStyles: null,
-  header: null,
-  footer: null,
-  background: null,
-  current: true,
-  active: true,
-  className: null
-};
-var KeypadScreen = function KeypadScreen(_ref) {
-  var items = _ref.items,
-    title = _ref.title,
-    layout = _ref.layout,
-    spacing = _ref.spacing,
-    keypadSettings = _ref.keypadSettings,
-    buttonStyles = _ref.buttonStyles,
-    popupStyles = _ref.popupStyles,
-    header = _ref.header,
-    footer = _ref.footer,
-    background = _ref.background,
-    current = _ref.current,
-    active = _ref.active,
-    className = _ref.className;
-  var containerRef = React.useRef(null);
-  var popupInnerRef = React.useRef(null);
-  var trackScreenEvent = hooks.useTrackScreenEvent('keypad');
-  var _usePlaybackContext = contexts.usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var mediaRef = contexts.usePlaybackMediaRef(current);
-  var screenState = contexts.useScreenState();
-  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 _useViewerInteraction = contexts.useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _useScreenRenderConte = contexts.useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var hasHeader = utils.isHeaderFilled(header);
-  var hasFooter = utils.isFooterFilled(footer);
-  var footerProps = utils.getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasTitle = utils.isTextFilled(title);
-  var _ref2 = title || {},
-    _ref2$textStyle = _ref2.textStyle,
-    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var _useDimensionObserver = hooks.useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = hooks.useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var backgroundPlaying = current && (isView || isEdit);
-  var mediaShouldLoad = !isPlaceholder && (current || active);
-  var isInteractivePreview = isEdit && screenState === null;
-  var _ref3 = keypadSettings || {},
-    _ref3$layout = _ref3.layout,
-    keypadLayout = _ref3$layout === void 0 ? null : _ref3$layout;
-  var _ref4 = keypadLayout || {},
-    _ref4$columnAlign = _ref4.columnAlign,
-    columnAlign = _ref4$columnAlign === void 0 ? null : _ref4$columnAlign,
-    _ref4$columns = _ref4.columns,
-    columns = _ref4$columns === void 0 ? null : _ref4$columns,
-    _ref4$spacing = _ref4.spacing,
-    columnSpacing = _ref4$spacing === void 0 ? null : _ref4$spacing,
-    _ref4$withSquareItems = _ref4.withSquareItems,
-    withSquareItems = _ref4$withSquareItems === void 0 ? false : _ref4$withSquareItems;
-  var _ref5 = buttonStyles || {},
-    _ref5$layout = _ref5.layout,
-    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$textStyle = _ref5.textStyle,
-    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
-    _ref5$boxStyle = _ref5.boxStyle,
-    buttonBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
-  var _ref6 = popupStyles || {},
-    _ref6$layout = _ref6.layout,
-    popupLayout = _ref6$layout === void 0 ? null : _ref6$layout,
-    _ref6$headingTextStyl = _ref6.headingTextStyle,
-    headingTextStyle = _ref6$headingTextStyl === void 0 ? null : _ref6$headingTextStyl,
-    _ref6$contentTextStyl = _ref6.contentTextStyle,
-    contentTextStyle = _ref6$contentTextStyl === void 0 ? null : _ref6$contentTextStyl,
-    _ref6$button = _ref6.button,
-    popupButtons = _ref6$button === void 0 ? null : _ref6$button,
-    _ref6$boxStyle = _ref6.boxStyle,
-    popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
-  var _ref7 = popupButtons || {},
-    _ref7$buttonTextStyle = _ref7.buttonTextStyle,
-    popupButtonsTextStyle = _ref7$buttonTextStyle === void 0 ? null : _ref7$buttonTextStyle,
-    _ref7$boxStyle = _ref7.boxStyle,
-    popupButtonsBoxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
-  var popupLayoutClassName = React.useMemo(function () {
-    return popupLayout !== null ? utils.camelCase(popupLayout) : '';
-  }, [popupLayout]);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    showPopup = _useState2[0],
-    setShowPopup = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    popup = _useState4[0],
-    setPopup = _useState4[1];
-  var _ref8 = popup || {},
-    _ref8$heading = _ref8.heading,
-    popupHeading = _ref8$heading === void 0 ? null : _ref8$heading,
-    _ref8$content = _ref8.content,
-    popupContent = _ref8$content === void 0 ? null : _ref8$content,
-    _ref8$largeVisual = _ref8.largeVisual,
-    largeVisual = _ref8$largeVisual === void 0 ? null : _ref8$largeVisual,
-    _ref8$button = _ref8.button,
-    popupButton = _ref8$button === void 0 ? null : _ref8$button;
-  var hasPopupHeading = utils.isTextFilled(popupHeading);
-  var _ref9 = popupHeading || {},
-    _ref9$textStyle = _ref9.textStyle,
-    popupHeadingTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
-  var hasPopupContent = utils.isTextFilled(popupContent);
-  var _ref10 = popupContent || {},
-    _ref10$textStyle = _ref10.textStyle,
-    popupContentTextStyle = _ref10$textStyle === void 0 ? null : _ref10$textStyle;
-  var _ref11 = popupButton || {},
-    _ref11$label = _ref11.label,
-    buttonLabel = _ref11$label === void 0 ? null : _ref11$label,
-    _ref11$url = _ref11.url,
-    buttonUrl = _ref11$url === void 0 ? null : _ref11$url,
-    _ref11$inWebView = _ref11.inWebView,
-    popupInWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
-    _ref11$boxStyle = _ref11.boxStyle,
-    popupButtonBoxStyle = _ref11$boxStyle === void 0 ? null : _ref11$boxStyle;
-  var onItemClick = React.useCallback(function (e, item) {
-    e.stopPropagation();
-    trackScreenEvent('click_item', item);
-    var _ref12 = item || {},
-      _ref12$inWebView = _ref12.inWebView,
-      inWebView = _ref12$inWebView === void 0 ? false : _ref12$inWebView,
-      _ref12$url = _ref12.url,
-      url = _ref12$url === void 0 ? null : _ref12$url;
-    if (inWebView && url !== null) {
-      openWebView({
-        url: url
-      });
-      return;
-    }
-    setPopup(item);
-    setShowPopup(true);
-  }, [disableInteraction, setPopup, trackScreenEvent]);
-  var onCloseModal = React.useCallback(function () {
-    setShowPopup(false);
-    trackScreenEvent('close_modal');
-  }, [enableInteraction, setShowPopup, trackScreenEvent]);
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popupDragDirection = _useState6[0],
-    setPopupDragDirection = _useState6[1];
-  var onPopupScrollHeightChange = React.useCallback(function (_ref13) {
-    var _ref13$scrolleeHeight = _ref13.scrolleeHeight,
-      scrolleeHeight = _ref13$scrolleeHeight === void 0 ? 0 : _ref13$scrolleeHeight;
-    if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
-      setPopupDragDirection('top');
-    } else {
-      setPopupDragDirection('bottom');
-    }
-  }, [height]);
-  var computePopupProgress = React.useCallback(function (_ref14) {
-    var dragActive = _ref14.active,
-      _ref14$movement = _slicedToArray(_ref14.movement, 2),
-      my = _ref14$movement[1],
-      _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
-      vy = _ref14$velocity[1];
-    var damper = 0.5;
-    var delta = Math.abs(my) / window.innerHeight;
-    var reachedThreshold = vy > 1 || delta > 0.3;
-    var progress = 0;
-    if (popupDragDirection === 'top' && my < 0) {
-      progress = delta * damper * -1;
-    } else if (popupDragDirection === 'bottom' && my > 0) {
-      progress = delta * damper;
-    }
-    if (!dragActive) {
-      if (reachedThreshold) {
-        onCloseModal();
-        return 1;
-      }
-      return 0;
-    }
-    return progress;
-  }, [onCloseModal, popupDragDirection]);
-  React.useEffect(function () {
-    if (showPopup) {
-      disableInteraction();
-    } else {
-      enableInteraction();
-    }
-  }, [showPopup]);
-  React.useEffect(function () {
-    function handleClickOutside(event) {
-      if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(event.target) && containerRef.current && containerRef.current.contains(event.target) && !isInteractivePreview && !isEdit && showPopup) {
-        onCloseModal();
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
-  var _useState7 = React.useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    popupDragDisabled = _useState8[0],
-    setPopupDragDisabled = _useState8[1];
-  var onPopupScrollBottom = React.useCallback(function () {
-    setPopupDragDisabled(false);
-  }, [setPopupDragDisabled]);
-  var onPopupScrollNotBottom = React.useCallback(function () {
-    setPopupDragDisabled(true);
-  }, [setPopupDragDisabled]);
-  var _useDragProgress = hooks.useDragProgress({
-      disabled: !isView || popupDragDisabled,
-      progress: showPopup ? 0 : 1,
-      computeProgress: computePopupProgress,
-      springParams: {
-        config: {
-          tension: 300,
-          friction: 30
-        }
-      }
-    }),
-    bindPopupDrag = _useDragProgress.bind,
-    popupSpring = _useDragProgress.progress;
-  React.useEffect(function () {
-    var keyup = function keyup(e) {
-      if (e.key === 'Escape') {
-        if (showPopup) {
-          onCloseModal();
-        }
-      }
-    };
-    document.addEventListener('keyup', keyup);
-    return function () {
-      document.removeEventListener('keyup', keyup);
-    };
-  }, [showPopup, onCloseModal]);
-  var gridItems = React.useMemo(function () {
-    return (items === null || items.length === 0 ? placeholders : items).map(function (item) {
-      var _ref15 = item || {},
-        _ref15$id = _ref15.id,
-        id = _ref15$id === void 0 ? null : _ref15$id,
-        _ref15$label = _ref15.label,
-        label = _ref15$label === void 0 ? null : _ref15$label,
-        _ref15$visual = _ref15.visual,
-        visual = _ref15$visual === void 0 ? null : _ref15$visual,
-        _ref15$textStyle = _ref15.textStyle,
-        textStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
-        _ref15$boxStyle = _ref15.boxStyle,
-        boxStyle = _ref15$boxStyle === void 0 ? null : _ref15$boxStyle,
-        _ref15$heading = _ref15.heading,
-        heading = _ref15$heading === void 0 ? null : _ref15$heading,
-        _ref15$content = _ref15.content,
-        content = _ref15$content === void 0 ? null : _ref15$content,
-        _ref15$url = _ref15.url,
-        url = _ref15$url === void 0 ? null : _ref15$url,
-        _ref15$inWebView = _ref15.inWebView,
-        inWebView = _ref15$inWebView === void 0 ? false : _ref15$inWebView,
-        _ref15$largeVisual = _ref15.largeVisual,
-        popupLargeVisual = _ref15$largeVisual === void 0 ? null : _ref15$largeVisual;
-      var _ref16 = visual || {},
-        _ref16$url = _ref16.url,
-        visualUrl = _ref16$url === void 0 ? null : _ref16$url;
-      var _ref17 = heading || {},
-        _ref17$body = _ref17.body,
-        headingBody = _ref17$body === void 0 ? null : _ref17$body;
-      var _ref18 = content || {},
-        _ref18$body = _ref18.body,
-        contentBody = _ref18$body === void 0 ? null : _ref18$body;
-      var key = label || visualUrl || id;
-      var isEmpty = label === null && visual === null;
-      var isExternalLink = url !== null && !inWebView;
-      var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
-      return /*#__PURE__*/React.createElement("div", {
-        key: key,
-        className: styles.item
-      }, /*#__PURE__*/React.createElement(Button, {
-        className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over'), styles.isEmpty, isEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, utils.getStyleFromBox(buttonBoxStyle)), utils.getStyleFromText(buttonTextStyle)), utils.getStyleFromBox(boxStyle)), utils.getStyleFromText(textStyle)),
-        external: isExternalLink,
-        href: isExternalLink ? url : null,
-        focusable: current,
-        onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
-          return onItemClick(e, item);
-        } : null
-      }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-        emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "Qanvis",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Visual"
-          }]
-        }),
-        emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
-        isEmpty: visual === null
-      }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
-        className: styles.buttonVisual,
-        imageClassName: styles.thumbnail,
-        media: visual,
-        width: "auto"
-      }) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-        placeholder: /*#__PURE__*/React.createElement(components.PlaceholderButton, null),
-        emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-          id: "Zbu5Uk",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Label"
-          }]
-        }),
-        emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
-        isEmpty: label === null
-      }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement("div", {
-        className: styles.buttonLabel
-      }, label) : null)));
-    });
-  }, [items, screenState, keypadSettings]);
-  React.useEffect(function () {
-    if (screenState === 'popup' && isPlaceholder) {
-      setPopup(placeholderPopupBoxStyles); // @note force placeholder
-      setShowPopup(true);
-    }
-    if (screenState === 'keypad') {
-      setPopup(null);
-      setShowPopup(false);
-    }
-    if (screenState !== null && screenState.includes('popup')) {
-      var index = screenState.split('.').pop();
-      var found = items[index];
-      setPopup(found);
-      setShowPopup(true);
-    }
-    if (screenState === null) {
-      setPopup(null);
-      setShowPopup(false);
-    }
-  }, [screenState, items]);
-  return /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
-    "data-screen-ready": true
-  }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    className: styles.background
-  }) : null, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    width: width,
-    height: height,
-    verticalAlign: layout,
-    withArrow: !showPopup,
-    withShadow: !showPopup,
-    disabled: isPreview || isPlaceholder || showPopup
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    verticalAlign: layout,
-    width: width,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
-      paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    ref: headerRef,
-    className: styles.header,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingBottom: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__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.emptyHeading]),
-    isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.title
-  }, title, {
-    textStyle: titleTextStyle
-  })) : null), /*#__PURE__*/React.createElement(Keypad$1, {
-    className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
-    align: columnAlign,
-    columns: isPlaceholder ? 3 : columns,
-    spacing: isPlaceholder ? 2 : columnSpacing,
-    items: gridItems
-  }), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: styles.footer,
-    style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingBottom: spacing / 2,
-      paddingTop: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(web.animated.div, {
-    className: classNames([styles.popupBackdrop]),
-    style: {
-      opacity: popupSpring.to(function (p) {
-        return 1 - Math.abs(p);
-      })
-    }
-  }), /*#__PURE__*/React.createElement(web.animated.div, Object.assign({
-    className: styles.popup,
-    style: {
-      transform: popupSpring.to(function (p) {
-        return "translateY(".concat(100 * p, "%) scale(").concat(1 - Math.abs(p * 0.5), ")");
-      }),
-      pointerEvents: popupSpring.to(function (p) {
-        return Math.abs(p) > 0.5 ? 'none' : 'auto';
-      })
-    }
-  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
-    disabled: isPreview || isPlaceholder,
-    verticalAlign: "middle",
-    withArrow: false,
-    scrollPosition: !showPopup ? 1 : null,
-    onScrolledBottom: onPopupScrollBottom,
-    onScrolledNotBottom: onPopupScrollNotBottom,
-    onScrollHeightChange: onPopupScrollHeightChange,
-    className: styles.popupScroll,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popupInnerRef,
-    className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
-    style: _objectSpread(_objectSpread({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
-  }, /*#__PURE__*/React.createElement(components.ScreenElement, {
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "IE7U/Q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Heading"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-    isEmpty: !hasPopupHeading
-  }, hasPopupHeading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.popupHeading
-  }, popupHeading, {
-    textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
-  })) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "popupContent",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "JRZoe6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Content"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyContent]),
-    isEmpty: !hasPopupContent
-  }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.popupContent
-  }, popupContent, {
-    textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
-  })) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "image",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "z4Pr+g",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Visual (Image or Video)"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyVisual]),
-    isEmpty: largeVisual === null
-  }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
-    className: styles.popupVisual,
-    media: largeVisual,
-    width: "100%"
-  }) : null), /*#__PURE__*/React.createElement(components.ScreenElement, {
-    placeholder: "button",
-    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
-      id: "N7Kj8z",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Button"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyCTA]),
-    isEmpty: popupButton === null
-  }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
-    className: styles.popupCTA,
-    label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
-    url: buttonUrl,
-    inWebView: popupInWebView,
-    openWebView: openWebView,
-    type: "click",
-    boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
-  }) : null))))) : null)));
-};
-KeypadScreen.propTypes = propTypes;
-KeypadScreen.defaultProps = defaultProps;
-var Keypad = KeypadScreen;
-
-var definition = [{
-  id: 'keypad',
-  type: 'screen',
-  group: {
-    label: reactIntl.defineMessage({
-      id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
-    }),
-    order: 4
-  },
-  title: reactIntl.defineMessage({
-    id: "75nZbY",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Keypad"
-    }]
-  }),
-  layouts: ['top', 'middle', 'bottom'],
-  component: Keypad,
-  states: [{
-    id: 'keypad',
-    label: reactIntl.defineMessage({
-      id: "Z4f5qh",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Buttons"
-      }]
-    }),
-    fields: [{
-      name: 'layout',
-      type: 'screen-layout',
-      defaultValue: 'middle',
-      label: reactIntl.defineMessage({
-        id: "4iBXj2",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
-      })
-    }, {
-      name: 'keypadSettings',
-      type: 'fields',
-      isList: false,
-      withoutLabel: true,
-      defaultValue: {
-        layout: {
-          columnAlign: 'middle',
-          columns: 3,
-          spacing: 2,
-          withSquareItems: false
-        }
-      },
-      label: reactIntl.defineMessage({
-        id: "FjuRaw",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Keypad settings"
-        }]
-      }),
-      fields: [{
-        name: 'layout',
-        type: 'keypad-layout',
-        isList: true
-      }]
-    }, {
-      name: 'items',
-      type: 'buttons',
-      label: reactIntl.defineMessage({
-        id: "fbUW2U",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Items"
-        }]
-      }),
-      isSection: true
-    }, {
-      name: 'buttonStyles',
-      type: 'fields',
-      defaultValue: {
-        layout: 'label-bottom',
-        boxStyle: {
-          backgroundColor: {
-            alpha: 0.15,
-            color: '#000000'
-          }
-        }
-      },
-      isList: true,
-      fields: [{
-        name: 'layout',
-        type: 'button-layout',
-        label: reactIntl.defineMessage({
-          id: "OPxJx/",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Layout"
-          }]
-        })
-      }, {
-        name: 'textStyle',
-        type: 'text-style-form',
-        label: reactIntl.defineMessage({
-          id: "rzXCu2",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Label style"
-          }]
-        })
-      }, {
-        name: 'boxStyle',
-        type: 'box-style-form',
-        label: reactIntl.defineMessage({
-          id: "nno1Pq",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Button style"
-          }]
-        })
-      }]
-    }]
-  }, {
-    id: 'popups',
-    label: reactIntl.defineMessage({
-      id: "FYm4w+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Popups"
-      }]
-    }),
-    fields: [{
-      name: 'popupStyles',
-      type: 'fields',
-      defaultValue: {
-        layout: 'content-top'
-      },
-      isList: true,
-      fields: [{
-        name: 'layout',
-        type: 'card-layout',
-        label: reactIntl.defineMessage({
-          id: "OPxJx/",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Layout"
-          }]
-        })
-      }, {
-        name: 'headingTextStyle',
-        type: 'text-style-form',
-        label: reactIntl.defineMessage({
-          id: "zrK6ak",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Heading text style"
-          }]
-        })
-      }, {
-        name: 'contentTextStyle',
-        type: 'text-style-form',
-        label: reactIntl.defineMessage({
-          id: "z9nSIG",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Content text style"
-          }]
-        })
-      }, {
-        name: 'button',
-        type: 'fields',
-        label: reactIntl.defineMessage({
-          id: "i6bmbD",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Button"
-          }]
-        }),
-        fields: [{
-          name: 'buttonTextStyle',
-          type: 'text-style-form',
-          label: reactIntl.defineMessage({
-            id: "p5RHzq",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Button text style"
-            }]
-          })
-        }, {
-          name: 'buttonStyle',
-          type: 'box-style-form',
-          label: reactIntl.defineMessage({
-            id: "nno1Pq",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Button style"
-            }]
-          })
-        }]
-      }, {
-        name: 'boxStyle',
-        type: 'box-style-form',
-        label: reactIntl.defineMessage({
-          id: "p1pghO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Box style"
-          }]
-        })
-      }]
-    }]
-  }, {
-    id: 'popup',
-    label: reactIntl.defineMessage({
-      id: "sSahY1",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Popup"
-      }]
-    }),
-    defaultValue: [],
-    repeatable: true,
-    fieldName: 'items',
-    fields: [{
-      name: 'heading',
-      type: 'heading-element',
-      label: reactIntl.defineMessage({
-        id: "6iR9Mt",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Heading"
-        }]
-      })
-    }, {
-      name: 'content',
-      type: 'text-element',
-      label: reactIntl.defineMessage({
-        id: "uoF5Pv",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Content"
-        }]
-      }),
-      theme: {
-        label: {
-          textStyle: 'text'
-        }
-      }
-    }, {
-      name: 'largeVisual',
-      type: 'visual',
-      label: reactIntl.defineMessage({
-        id: "HwqzVR",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Visual"
-        }]
-      })
-    }, {
-      name: 'button',
-      type: 'button-link',
-      label: reactIntl.defineMessage({
-        id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
-      }),
-      theme: {
-        label: {
-          textStyle: 'button'
-        }
-      }
-    }]
-  }],
-  fields: [{
-    name: 'title',
-    type: 'heading-element',
-    theme: {
-      textStyle: 'heading1'
-    },
-    label: reactIntl.defineMessage({
-      id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
-    })
-  }, {
-    name: 'background',
-    type: 'background',
-    label: reactIntl.defineMessage({
-      id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
-    })
-  }, {
-    name: 'header',
-    type: 'header',
-    label: reactIntl.defineMessage({
-      id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
-    }),
-    theme: {
-      badge: {
-        label: {
-          textStyle: 'badge'
-        },
-        boxStyle: 'badge'
-      }
-    }
-  }, {
-    name: 'footer',
-    type: 'footer',
-    label: reactIntl.defineMessage({
-      id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
-    }),
-    theme: {
-      callToAction: {
-        label: {
-          textStyle: 'cta'
-        },
-        boxStyle: 'cta'
-      }
-    }
-  }]
-}];
-
-exports.Keypad = Keypad;
-exports.default = definition;