@micromag/screen-keypad 0.4.70 → 0.4.74

package/es/index.js

@@ -1,16 +1,14 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { c } from 'react/compiler-runtime';
 import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
-import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import { Close, ScreenElement } from '@micromag/core/components';
 import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useViewerInteraction, useScreenRenderContext } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver, useDragProgress } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, getStyleFromBox } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, camelCase, mergeRefs, getStyleFromBox } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Button, { RichButton } from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
@@ -27,7 +25,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-keypad-container","isPlaceholder":"micromag-screen-keypad-isPlaceholder","layout":"micromag-screen-keypad-layout","background":"micromag-screen-keypad-background","fixedHeader":"micromag-screen-keypad-fixedHeader","open":"micromag-screen-keypad-open","close":"micromag-screen-keypad-close","closeIcon":"micromag-screen-keypad-closeIcon","header":"micromag-screen-keypad-header","footer":"micromag-screen-keypad-footer","inner":"micromag-screen-keypad-inner","title":"micromag-screen-keypad-title","subtitle":"micromag-screen-keypad-subtitle","emptyTitle":"micromag-screen-keypad-emptyTitle","emptyText":"micromag-screen-keypad-emptyText","grid":"micromag-screen-keypad-grid","item":"micromag-screen-keypad-item","button":"micromag-screen-keypad-button","withSquareItems":"micromag-screen-keypad-withSquareItems","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","buttonLabel":"micromag-screen-keypad-buttonLabel","empty":"micromag-screen-keypad-empty","emptyButtonVisual":"micromag-screen-keypad-emptyButtonVisual","emptyButtonLabel":"micromag-screen-keypad-emptyButtonLabel","popupBackdrop":"micromag-screen-keypad-popupBackdrop","popup":"micromag-screen-keypad-popup","popupButton":"micromag-screen-keypad-popupButton","popupScroll":"micromag-screen-keypad-popupScroll","popupInner":"micromag-screen-keypad-popupInner","withShadow":"micromag-screen-keypad-withShadow","popupContent":"micromag-screen-keypad-popupContent","popupVisualImage":"micromag-screen-keypad-popupVisualImage","popupVisualVideo":"micromag-screen-keypad-popupVisualVideo","placeholder":"micromag-screen-keypad-placeholder","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"};
 
-var placeholders = [{
+const placeholders = [{
   id: '1'
 }, {
   id: '2'
@@ -46,7 +44,7 @@ var placeholders = [{
 }, {
   id: '9'
 }];
-var placeholderPopupBoxStyles = {
+const placeholderPopupBoxStyles = {
   padding: {
     left: 30,
     top: 30,
@@ -54,465 +52,849 @@ var placeholderPopupBoxStyles = {
     bottom: 30
   }
 };
-function KeypadScreen(_ref) {
-  var _ref$items = _ref.items,
-    items = _ref$items === void 0 ? null : _ref$items,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? null : _ref$layout,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$keypadLayout = _ref.keypadLayout,
-    keypadLayout = _ref$keypadLayout === void 0 ? null : _ref$keypadLayout,
-    _ref$buttonStyles = _ref.buttonStyles,
-    buttonStyles = _ref$buttonStyles === void 0 ? null : _ref$buttonStyles,
-    _ref$popupStyles = _ref.popupStyles,
-    popupStyles = _ref$popupStyles === void 0 ? null : _ref$popupStyles,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$withoutCloseButt = _ref.withoutCloseButton,
-    withoutCloseButton = _ref$withoutCloseButt === void 0 ? false : _ref$withoutCloseButt,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var containerRef = useRef(null);
-  var popupInnerRef = useRef(null);
-  var trackScreenEvent = useTrackScreenEvent('keypad');
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var screenState = useScreenState();
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _useViewerInteraction = useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var hasTitle = isTextFilled(title);
-  var _ref2 = title || {},
-    _ref2$textStyle = _ref2.textStyle,
-    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
-  var hasSubtitle = isTextFilled(subtitle);
-  var _useDimensionObserver = useDimensionObserver(),
-    headerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var _useDimensionObserver3 = useDimensionObserver(),
-    footerRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.height,
-    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2);
-    _useState2[0];
-    var setPopupDragDisabled = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var mediaShouldLoad = !isPlaceholder && (current || preload);
-  var isInteractivePreview = isEdit && screenState === null;
-  var isNotInteractive = isEdit && screenState !== null;
-  var _ref3 = keypadLayout || {},
-    _ref3$columnAlign = _ref3.columnAlign,
-    columnAlign = _ref3$columnAlign === void 0 ? null : _ref3$columnAlign,
-    _ref3$columns = _ref3.columns,
-    columns = _ref3$columns === void 0 ? null : _ref3$columns,
-    _ref3$spacing = _ref3.spacing,
-    columnSpacing = _ref3$spacing === void 0 ? null : _ref3$spacing,
-    _ref3$withSquareItems = _ref3.withSquareItems,
-    withSquareItems = _ref3$withSquareItems === void 0 ? false : _ref3$withSquareItems;
-  var _ref4 = buttonStyles || {},
-    _ref4$layout = _ref4.layout,
-    buttonLayout = _ref4$layout === void 0 ? null : _ref4$layout,
-    _ref4$textStyle = _ref4.textStyle,
-    buttonTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle,
-    _ref4$labelBoxStyle = _ref4.labelBoxStyle,
-    buttonLabelBoxStyle = _ref4$labelBoxStyle === void 0 ? null : _ref4$labelBoxStyle,
-    _ref4$boxStyle = _ref4.boxStyle,
-    buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle,
-    _ref4$visualWidth = _ref4.visualWidth,
-    buttonVisualWidth = _ref4$visualWidth === void 0 ? null : _ref4$visualWidth;
-  var _ref5 = popupStyles || {},
-    _ref5$layout = _ref5.layout,
-    popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$headingTextStyl = _ref5.headingTextStyle,
-    headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
-    _ref5$contentTextStyl = _ref5.contentTextStyle,
-    contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
-    _ref5$button = _ref5.button,
-    popupButtons = _ref5$button === void 0 ? null : _ref5$button,
-    _ref5$boxStyle = _ref5.boxStyle,
-    popupBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
-  var _ref6 = popupButtons || {},
-    _ref6$buttonTextStyle = _ref6.buttonTextStyle,
-    popupButtonsTextStyle = _ref6$buttonTextStyle === void 0 ? null : _ref6$buttonTextStyle,
-    _ref6$boxStyle = _ref6.boxStyle,
-    popupButtonsBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
-  var popupLayoutClassName = useMemo(function () {
-    return popupLayout !== null ? camelCase(popupLayout) : '';
-  }, [popupLayout]);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showPopup = _useState4[0],
-    setShowPopup = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    popup = _useState6[0],
-    setPopup = _useState6[1];
-  var _ref7 = popup || {},
-    _ref7$heading = _ref7.heading,
-    popupHeading = _ref7$heading === void 0 ? null : _ref7$heading,
-    _ref7$content = _ref7.content,
-    popupContent = _ref7$content === void 0 ? null : _ref7$content,
-    _ref7$largeVisual = _ref7.largeVisual,
-    largeVisual = _ref7$largeVisual === void 0 ? null : _ref7$largeVisual,
-    _ref7$button = _ref7.button,
-    popupButton = _ref7$button === void 0 ? null : _ref7$button,
-    _ref7$popupBoxStyle = _ref7.popupBoxStyle,
-    singlePopupBoxStyle = _ref7$popupBoxStyle === void 0 ? null : _ref7$popupBoxStyle;
-  var _ref8 = largeVisual || {},
-    _ref8$metadata = _ref8.metadata,
-    metadata = _ref8$metadata === void 0 ? null : _ref8$metadata;
-  var _ref9 = metadata || {},
-    _ref9$width = _ref9.width,
-    largeVisualWidth = _ref9$width === void 0 ? 0 : _ref9$width,
-    _ref9$height = _ref9.height,
-    largeVisualHeight = _ref9$height === void 0 ? 0 : _ref9$height;
-  var largeVisualRatio = largeVisualWidth > 0 && largeVisualHeight > 0 ? largeVisualWidth / largeVisualHeight : null;
-  var hasPopupHeading = isTextFilled(popupHeading);
-  var _ref0 = popupHeading || {},
-    _ref0$textStyle = _ref0.textStyle,
-    popupHeadingTextStyle = _ref0$textStyle === void 0 ? null : _ref0$textStyle;
-  var hasPopupContent = isTextFilled(popupContent);
-  var _ref1 = popupContent || {},
-    _ref1$textStyle = _ref1.textStyle,
-    popupContentTextStyle = _ref1$textStyle === void 0 ? null : _ref1$textStyle;
-  var _ref10 = popupButton || {},
-    _ref10$label = _ref10.label,
-    buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
-    _ref10$url = _ref10.url,
-    buttonUrl = _ref10$url === void 0 ? null : _ref10$url,
-    _ref10$inWebView = _ref10.inWebView,
-    popupInWebView = _ref10$inWebView === void 0 ? false : _ref10$inWebView,
-    _ref10$boxStyle = _ref10.boxStyle,
-    popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
-
-  // Skips a render loop when opening a popup
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showNextPopup = _useState8[0],
-    setShowNextPopup = _useState8[1];
-  useEffect(function () {
-    if (showNextPopup) {
-      setShowNextPopup(false);
-      setShowPopup(true);
-    }
-  }, [showNextPopup, setShowPopup, setShowNextPopup]);
-  var onItemClick = useCallback(function (e, item, index) {
-    e.stopPropagation();
-    if (isNotInteractive) {
-      return;
-    }
-    var _ref11 = item || {},
-      _ref11$label = _ref11.label,
-      itemLabel = _ref11$label === void 0 ? null : _ref11$label,
-      _ref11$heading = _ref11.heading,
-      heading = _ref11$heading === void 0 ? null : _ref11$heading,
-      _ref11$inWebView = _ref11.inWebView,
-      inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
-      _ref11$url = _ref11.url,
-      url = _ref11$url === void 0 ? null : _ref11$url;
-    if (inWebView && url !== null) {
-      openWebView({
-        url: url
-      });
-    } else {
-      setPopup(item);
-      setShowNextPopup(true);
-    }
-    var _ref12 = heading || {},
-      _ref12$body = _ref12.body,
-      headingBody = _ref12$body === void 0 ? null : _ref12$body;
-    var finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
-    trackScreenEvent('click_item', ["#".concat(index + 1), finalLabel || headingBody || ''].filter(function (it) {
-      return !isEmpty(it);
-    }).join(' '), {
-      linkType: 'keypad_item',
-      linkUrl: url || null
+function KeypadScreen(t0) {
+  const $ = c(315);
+  const {
+    items: t1,
+    title: t2,
+    subtitle: t3,
+    layout: t4,
+    spacing: t5,
+    keypadLayout: t6,
+    buttonStyles: t7,
+    popupStyles: t8,
+    header: t9,
+    footer: t10,
+    background: t11,
+    current: t12,
+    preload: t13,
+    withoutCloseButton: t14,
+    mediaRef: t15,
+    className: t16
+  } = t0;
+  const items = t1 === undefined ? null : t1;
+  const title = t2 === undefined ? null : t2;
+  const subtitle = t3 === undefined ? null : t3;
+  const layout = t4 === undefined ? null : t4;
+  const spacing = t5 === undefined ? 20 : t5;
+  const keypadLayout = t6 === undefined ? null : t6;
+  const buttonStyles = t7 === undefined ? null : t7;
+  const popupStyles = t8 === undefined ? null : t8;
+  const header = t9 === undefined ? null : t9;
+  const footer = t10 === undefined ? null : t10;
+  const background = t11 === undefined ? null : t11;
+  const current = t12 === undefined ? true : t12;
+  const preload = t13 === undefined ? true : t13;
+  const withoutCloseButton = t14 === undefined ? false : t14;
+  const customMediaRef = t15 === undefined ? null : t15;
+  const className = t16 === undefined ? null : t16;
+  const containerRef = useRef(null);
+  const popupInnerRef = useRef(null);
+  const trackScreenEvent = useTrackScreenEvent("keypad");
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: t17
+  } = usePlaybackMediaRef(current, true);
+  const isCurrentMedia = t17 === undefined ? false : t17;
+  const screenState = useScreenState();
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    enableInteraction,
+    disableInteraction
+  } = useViewerInteraction();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit
+  } = useScreenRenderContext();
+  let t18;
+  if ($[0] !== header) {
+    t18 = isHeaderFilled(header);
+    $[0] = header;
+    $[1] = t18;
+  } else {
+    t18 = $[1];
+  }
+  const hasHeader = t18;
+  let t19;
+  if ($[2] !== footer) {
+    t19 = isFooterFilled(footer);
+    $[2] = footer;
+    $[3] = t19;
+  } else {
+    t19 = $[3];
+  }
+  const hasFooter = t19;
+  let t20;
+  if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
+    t20 = getFooterProps(footer, {
+      isView,
+      current,
+      openWebView,
+      isPreview
     });
-  }, [setPopup, setShowPopup, trackScreenEvent, openWebView, isNotInteractive]);
-  var onCloseModal = useCallback(function () {
-    var isShowPopup = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    if (isNotInteractive) {
-      return;
-    }
-    if (isShowPopup) {
-      trackScreenEvent('close_modal');
-    }
-    setShowPopup(false);
-    setPopupDragDisabled(false);
-  }, [setShowPopup, setPopupDragDisabled, trackScreenEvent, isNotInteractive]);
-  var onClickClose = useCallback(function (e) {
-    if (isNotInteractive) {
-      return;
-    }
-    e.preventDefault();
-    e.stopPropagation();
-    onCloseModal(showPopup);
-  }, [onCloseModal, isNotInteractive, showPopup]);
-  var onClickCta = useCallback(function () {
-    var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (e !== null) {
+    $[4] = current;
+    $[5] = footer;
+    $[6] = isPreview;
+    $[7] = isView;
+    $[8] = openWebView;
+    $[9] = t20;
+  } else {
+    t20 = $[9];
+  }
+  const footerProps = t20;
+  let t21;
+  if ($[10] !== title) {
+    t21 = isTextFilled(title);
+    $[10] = title;
+    $[11] = t21;
+  } else {
+    t21 = $[11];
+  }
+  const hasTitle = t21;
+  let t22;
+  if ($[12] !== title) {
+    t22 = title || {};
+    $[12] = title;
+    $[13] = t22;
+  } else {
+    t22 = $[13];
+  }
+  const {
+    textStyle: t23
+  } = t22;
+  const titleTextStyle = t23 === undefined ? null : t23;
+  let t24;
+  if ($[14] !== subtitle) {
+    t24 = isTextFilled(subtitle);
+    $[14] = subtitle;
+    $[15] = t24;
+  } else {
+    t24 = $[15];
+  }
+  const hasSubtitle = t24;
+  const {
+    ref: headerRef,
+    height: t25
+  } = useDimensionObserver();
+  const headerHeight = t25 === undefined ? 0 : t25;
+  const {
+    ref: footerRef,
+    height: t26
+  } = useDimensionObserver();
+  const footerHeight = t26 === undefined ? 0 : t26;
+  const [, setPopupDragDisabled] = useState(false);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = !isPlaceholder && (current || preload);
+  const isInteractivePreview = isEdit && screenState === null;
+  const isNotInteractive = isEdit && screenState !== null;
+  const {
+    columnAlign: t27,
+    columns: t28,
+    spacing: t29,
+    withSquareItems: t30
+  } = keypadLayout || {};
+  const columnAlign = t27 === undefined ? null : t27;
+  const columns = t28 === undefined ? null : t28;
+  const columnSpacing = t29 === undefined ? null : t29;
+  const withSquareItems = t30 === undefined ? false : t30;
+  let t31;
+  if ($[16] !== buttonStyles) {
+    t31 = buttonStyles || {};
+    $[16] = buttonStyles;
+    $[17] = t31;
+  } else {
+    t31 = $[17];
+  }
+  const {
+    layout: t32,
+    textStyle: t33,
+    labelBoxStyle: t34,
+    boxStyle: t35,
+    visualWidth: t36
+  } = t31;
+  const buttonLayout = t32 === undefined ? null : t32;
+  const buttonTextStyle = t33 === undefined ? null : t33;
+  const buttonLabelBoxStyle = t34 === undefined ? null : t34;
+  const buttonBoxStyle = t35 === undefined ? null : t35;
+  const buttonVisualWidth = t36 === undefined ? null : t36;
+  let t37;
+  if ($[18] !== popupStyles) {
+    t37 = popupStyles || {};
+    $[18] = popupStyles;
+    $[19] = t37;
+  } else {
+    t37 = $[19];
+  }
+  const {
+    layout: t38,
+    headingTextStyle: t39,
+    contentTextStyle: t40,
+    button: t41,
+    boxStyle: t42
+  } = t37;
+  const popupLayout = t38 === undefined ? null : t38;
+  const headingTextStyle = t39 === undefined ? null : t39;
+  const contentTextStyle = t40 === undefined ? null : t40;
+  const popupButtons = t41 === undefined ? null : t41;
+  const popupBoxStyle = t42 === undefined ? null : t42;
+  let t43;
+  if ($[20] !== popupButtons) {
+    t43 = popupButtons || {};
+    $[20] = popupButtons;
+    $[21] = t43;
+  } else {
+    t43 = $[21];
+  }
+  const {
+    buttonTextStyle: t44,
+    boxStyle: t45
+  } = t43;
+  const popupButtonsTextStyle = t44 === undefined ? null : t44;
+  const popupButtonsBoxStyle = t45 === undefined ? null : t45;
+  const popupLayoutClassName = popupLayout !== null ? camelCase(popupLayout) : "";
+  const [showPopup, setShowPopup] = useState(false);
+  const [popup, setPopup] = useState(null);
+  let t46;
+  if ($[22] !== popup) {
+    t46 = popup || {};
+    $[22] = popup;
+    $[23] = t46;
+  } else {
+    t46 = $[23];
+  }
+  const {
+    heading: t47,
+    content: t48,
+    largeVisual: t49,
+    button: t50,
+    popupBoxStyle: t51
+  } = t46;
+  const popupHeading = t47 === undefined ? null : t47;
+  const popupContent = t48 === undefined ? null : t48;
+  const largeVisual = t49 === undefined ? null : t49;
+  const popupButton = t50 === undefined ? null : t50;
+  const singlePopupBoxStyle = t51 === undefined ? null : t51;
+  let t52;
+  if ($[24] !== largeVisual) {
+    t52 = largeVisual || {};
+    $[24] = largeVisual;
+    $[25] = t52;
+  } else {
+    t52 = $[25];
+  }
+  const {
+    metadata: t53
+  } = t52;
+  const metadata = t53 === undefined ? null : t53;
+  let t54;
+  if ($[26] !== metadata) {
+    t54 = metadata || {};
+    $[26] = metadata;
+    $[27] = t54;
+  } else {
+    t54 = $[27];
+  }
+  const {
+    width: t55,
+    height: t56
+  } = t54;
+  const largeVisualWidth = t55 === undefined ? 0 : t55;
+  const largeVisualHeight = t56 === undefined ? 0 : t56;
+  const largeVisualRatio = largeVisualWidth > 0 && largeVisualHeight > 0 ? largeVisualWidth / largeVisualHeight : null;
+  let t57;
+  if ($[28] !== popupHeading) {
+    t57 = isTextFilled(popupHeading);
+    $[28] = popupHeading;
+    $[29] = t57;
+  } else {
+    t57 = $[29];
+  }
+  const hasPopupHeading = t57;
+  let t58;
+  if ($[30] !== popupHeading) {
+    t58 = popupHeading || {};
+    $[30] = popupHeading;
+    $[31] = t58;
+  } else {
+    t58 = $[31];
+  }
+  const {
+    textStyle: t59
+  } = t58;
+  const popupHeadingTextStyle = t59 === undefined ? null : t59;
+  let t60;
+  if ($[32] !== popupContent) {
+    t60 = isTextFilled(popupContent);
+    $[32] = popupContent;
+    $[33] = t60;
+  } else {
+    t60 = $[33];
+  }
+  const hasPopupContent = t60;
+  let t61;
+  if ($[34] !== popupContent) {
+    t61 = popupContent || {};
+    $[34] = popupContent;
+    $[35] = t61;
+  } else {
+    t61 = $[35];
+  }
+  const {
+    textStyle: t62
+  } = t61;
+  const popupContentTextStyle = t62 === undefined ? null : t62;
+  let t63;
+  if ($[36] !== popupButton) {
+    t63 = popupButton || {};
+    $[36] = popupButton;
+    $[37] = t63;
+  } else {
+    t63 = $[37];
+  }
+  const {
+    label: t64,
+    url: t65,
+    inWebView: t66,
+    boxStyle: t67
+  } = t63;
+  const buttonLabel = t64 === undefined ? null : t64;
+  const buttonUrl = t65 === undefined ? null : t65;
+  const popupInWebView = t66 === undefined ? false : t66;
+  const popupButtonBoxStyle = t67 === undefined ? null : t67;
+  const [showNextPopup, setShowNextPopup] = useState(false);
+  let t68;
+  let t69;
+  if ($[38] !== showNextPopup) {
+    t68 = () => {
+      if (showNextPopup) {
+        setShowNextPopup(false);
+        setShowPopup(true);
+      }
+    };
+    t69 = [showNextPopup, setShowPopup, setShowNextPopup];
+    $[38] = showNextPopup;
+    $[39] = t68;
+    $[40] = t69;
+  } else {
+    t68 = $[39];
+    t69 = $[40];
+  }
+  useEffect(t68, t69);
+  let t70;
+  if ($[41] !== isNotInteractive || $[42] !== openWebView || $[43] !== trackScreenEvent) {
+    t70 = (e, item, index) => {
       e.stopPropagation();
-    }
-  }, []);
-  var _useState9 = useState(null),
-    _useState0 = _slicedToArray(_useState9, 2),
-    popupDragDirection = _useState0[0],
-    setPopupDragDirection = _useState0[1];
-  var onPopupScrollHeightChange = 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 = useCallback(function (_ref14) {
-    var _ref14$active = _ref14.active,
-      dragActive = _ref14$active === void 0 ? false : _ref14$active,
-      _ref14$movement = _slicedToArray(_ref14.movement, 2),
-      _ref14$movement$ = _ref14$movement[1],
-      my = _ref14$movement$ === void 0 ? null : _ref14$movement$,
-      _ref14$velocity = _slicedToArray(_ref14.velocity, 2),
-      _ref14$velocity$ = _ref14$velocity[1],
-      vy = _ref14$velocity$ === void 0 ? null : _ref14$velocity$;
-    var damper = 0.5;
-    var windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
-    var delta = windowHeight > 0 && my !== null ? Math.abs(my) / windowHeight : 0;
-    var reachedThreshold = vy !== null ? vy > 1 || delta > 0.3 : false;
-    var progress = 0;
-    if (popupDragDirection === 'top' && my !== null && my < 0) {
-      progress = delta * damper * -1;
-    } else if (popupDragDirection === 'bottom' && my !== null && my > 0) {
-      progress = delta * damper;
-    }
-    if (!dragActive) {
-      if (reachedThreshold) {
-        onCloseModal(true);
-        return 1;
+      if (isNotInteractive) {
+        return;
       }
-      return 0;
-    }
-    return progress;
-  }, [onCloseModal, popupDragDirection]);
-  useEffect(function () {
-    if (showPopup) {
-      disableInteraction();
-    } else {
-      enableInteraction();
-    }
-  }, [showPopup, enableInteraction, disableInteraction]);
-  useEffect(function () {
-    function handleClickOutside(e) {
-      if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(e.target) && containerRef.current && containerRef.current.contains(e.target) && !isInteractivePreview && !isEdit && showPopup) {
-        e.preventDefault();
-        e.stopPropagation();
-        onCloseModal(showPopup);
+      const {
+        label: t71,
+        heading: t72,
+        inWebView: t73,
+        url: t74
+      } = item || {};
+      const itemLabel = t71 === undefined ? null : t71;
+      const heading = t72 === undefined ? null : t72;
+      const inWebView = t73 === undefined ? false : t73;
+      const url = t74 === undefined ? null : t74;
+      if (inWebView && url !== null) {
+        openWebView({
+          url
+        });
+      } else {
+        setPopup(item);
+        setShowNextPopup(true);
       }
-    }
-    document.addEventListener('mouseup', handleClickOutside);
-    return function () {
-      document.removeEventListener('mouseup', handleClickOutside);
-    };
-  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
-  var onPopupScrollBottom = useCallback(function () {
-    setPopupDragDisabled(false);
-  }, [setPopupDragDisabled]);
-  var onPopupScrollNotBottom = useCallback(function () {
-    setPopupDragDisabled(true);
-  }, [setPopupDragDisabled]);
-  var onScrolledTrigger = useCallback(function () {
-    var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-    if (trigger !== null) {
-      var scrollPercent = Math.round(trigger * 100);
-      trackScreenEvent('scroll', scrollPercent, {
-        scrollPercent: scrollPercent
+      const {
+        body: t75
+      } = heading || {};
+      const headingBody = t75 === undefined ? null : t75;
+      const finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
+      trackScreenEvent("click_item", [`#${index + 1}`, finalLabel || headingBody || ""].filter(_temp).join(" "), {
+        linkType: "keypad_item",
+        linkUrl: url || null
       });
-    }
-  }, [trackScreenEvent]);
-  var onTap = useCallback(function () {
-    onCloseModal(showPopup);
-  }, [onCloseModal, showPopup]);
-  var onResolve = useCallback(function () {}, []);
-  var _useDragProgress = useDragProgress({
-      disabled: true,
-      // !isView || popupDragDisabled, // TODO: remove drag/popupDragDisabled if we're cool with it
-      progress: showPopup ? 0 : 1,
-      computeProgress: computePopupProgress,
-      onResolve: onResolve,
-      springParams: {
-        config: {
-          tension: 300,
-          friction: 30
+    };
+    $[41] = isNotInteractive;
+    $[42] = openWebView;
+    $[43] = trackScreenEvent;
+    $[44] = t70;
+  } else {
+    t70 = $[44];
+  }
+  const onItemClick = t70;
+  let t71;
+  if ($[45] !== isNotInteractive || $[46] !== trackScreenEvent) {
+    t71 = t72 => {
+      const isShowPopup = t72 === undefined ? false : t72;
+      if (isNotInteractive) {
+        return;
+      }
+      if (isShowPopup) {
+        trackScreenEvent("close_modal");
+      }
+      setShowPopup(false);
+      setPopupDragDisabled(false);
+    };
+    $[45] = isNotInteractive;
+    $[46] = trackScreenEvent;
+    $[47] = t71;
+  } else {
+    t71 = $[47];
+  }
+  const onCloseModal = t71;
+  let t72;
+  if ($[48] !== isNotInteractive || $[49] !== onCloseModal || $[50] !== showPopup) {
+    t72 = e_0 => {
+      if (isNotInteractive) {
+        return;
+      }
+      e_0.preventDefault();
+      e_0.stopPropagation();
+      onCloseModal(showPopup);
+    };
+    $[48] = isNotInteractive;
+    $[49] = onCloseModal;
+    $[50] = showPopup;
+    $[51] = t72;
+  } else {
+    t72 = $[51];
+  }
+  const onClickClose = t72;
+  const onClickCta = _temp2;
+  const [popupDragDirection, setPopupDragDirection] = useState(null);
+  let t73;
+  if ($[52] !== height) {
+    t73 = t74 => {
+      const {
+        scrolleeHeight: t75
+      } = t74;
+      const scrolleeHeight = t75 === undefined ? 0 : t75;
+      if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
+        setPopupDragDirection("top");
+      } else {
+        setPopupDragDirection("bottom");
+      }
+    };
+    $[52] = height;
+    $[53] = t73;
+  } else {
+    t73 = $[53];
+  }
+  const onPopupScrollHeightChange = t73;
+  let t74;
+  if ($[54] !== onCloseModal || $[55] !== popupDragDirection) {
+    t74 = t75 => {
+      const {
+        active: t76,
+        movement: t77,
+        velocity: t78
+      } = t75;
+      const dragActive = t76 === undefined ? false : t76;
+      const [, t79] = t77;
+      const my = t79 === undefined ? null : t79;
+      const [, t80] = t78;
+      const vy = t80 === undefined ? null : t80;
+      const windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+      const delta = windowHeight > 0 && my !== null ? Math.abs(my) / windowHeight : 0;
+      const reachedThreshold = vy !== null ? vy > 1 || delta > 0.3 : false;
+      let progress = 0;
+      if (popupDragDirection === "top" && my !== null && my < 0) {
+        progress = delta * 0.5 * -1;
+      } else {
+        if (popupDragDirection === "bottom" && my !== null && my > 0) {
+          progress = delta * 0.5;
         }
-      },
-      dragOptions: {
-        filterTaps: true,
-        preventDefault: true,
-        stopPropagation: true
-      },
-      onTap: onTap
-    }),
-    bindPopupDrag = _useDragProgress.bind,
-    popupSpring = _useDragProgress.progress,
-    popupTransitioning = _useDragProgress.transitioning;
-  useEffect(function () {
-    var keyup = function keyup(e) {
-      if (e.key === 'Escape') {
-        if (showPopup) {
+      }
+      if (!dragActive) {
+        if (reachedThreshold) {
+          onCloseModal(true);
+          return 1;
+        }
+        return 0;
+      }
+      return progress;
+    };
+    $[54] = onCloseModal;
+    $[55] = popupDragDirection;
+    $[56] = t74;
+  } else {
+    t74 = $[56];
+  }
+  const computePopupProgress = t74;
+  let t75;
+  let t76;
+  if ($[57] !== disableInteraction || $[58] !== enableInteraction || $[59] !== showPopup) {
+    t75 = () => {
+      if (showPopup) {
+        disableInteraction();
+      } else {
+        enableInteraction();
+      }
+    };
+    t76 = [showPopup, enableInteraction, disableInteraction];
+    $[57] = disableInteraction;
+    $[58] = enableInteraction;
+    $[59] = showPopup;
+    $[60] = t75;
+    $[61] = t76;
+  } else {
+    t75 = $[60];
+    t76 = $[61];
+  }
+  useEffect(t75, t76);
+  let t77;
+  if ($[62] !== current || $[63] !== isEdit || $[64] !== isInteractivePreview || $[65] !== isView || $[66] !== onCloseModal || $[67] !== showPopup) {
+    t77 = () => {
+      const handleClickOutside = function handleClickOutside(e_2) {
+        if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(e_2.target) && containerRef.current && containerRef.current.contains(e_2.target) && !isInteractivePreview && !isEdit && showPopup) {
+          e_2.preventDefault();
+          e_2.stopPropagation();
           onCloseModal(showPopup);
         }
+      };
+      document.addEventListener("mouseup", handleClickOutside);
+      return () => {
+        document.removeEventListener("mouseup", handleClickOutside);
+      };
+    };
+    $[62] = current;
+    $[63] = isEdit;
+    $[64] = isInteractivePreview;
+    $[65] = isView;
+    $[66] = onCloseModal;
+    $[67] = showPopup;
+    $[68] = t77;
+  } else {
+    t77 = $[68];
+  }
+  let t78;
+  if ($[69] !== current || $[70] !== isEdit || $[71] !== isInteractivePreview || $[72] !== showPopup) {
+    t78 = [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup];
+    $[69] = current;
+    $[70] = isEdit;
+    $[71] = isInteractivePreview;
+    $[72] = showPopup;
+    $[73] = t78;
+  } else {
+    t78 = $[73];
+  }
+  useEffect(t77, t78);
+  let t79;
+  if ($[74] === Symbol.for("react.memo_cache_sentinel")) {
+    t79 = () => {
+      setPopupDragDisabled(false);
+    };
+    $[74] = t79;
+  } else {
+    t79 = $[74];
+  }
+  const onPopupScrollBottom = t79;
+  let t80;
+  if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
+    t80 = () => {
+      setPopupDragDisabled(true);
+    };
+    $[75] = t80;
+  } else {
+    t80 = $[75];
+  }
+  const onPopupScrollNotBottom = t80;
+  let t81;
+  if ($[76] !== trackScreenEvent) {
+    t81 = t82 => {
+      const trigger = t82 === undefined ? null : t82;
+      if (trigger !== null) {
+        const scrollPercent = Math.round(trigger * 100);
+        trackScreenEvent("scroll", scrollPercent, {
+          scrollPercent
+        });
       }
     };
-    document.addEventListener('keyup', keyup);
-    return function () {
-      document.removeEventListener('keyup', keyup);
+    $[76] = trackScreenEvent;
+    $[77] = t81;
+  } else {
+    t81 = $[77];
+  }
+  const onScrolledTrigger = t81;
+  let t82;
+  if ($[78] !== onCloseModal || $[79] !== showPopup) {
+    t82 = () => {
+      onCloseModal(showPopup);
     };
-  }, [showPopup, onCloseModal]);
-  var gridItems = useMemo(function () {
-    return (items === null || items.length === 0 ? placeholders : items).map(function (item, index) {
-      var _ref15 = item || {},
-        _ref15$id = _ref15.id,
-        id = _ref15$id === void 0 ? null : _ref15$id,
-        _ref15$label = _ref15.label,
-        itemLabel = _ref15$label === void 0 ? null : _ref15$label,
-        _ref15$visual = _ref15.visual,
-        visual = _ref15$visual === void 0 ? null : _ref15$visual,
-        _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 finalLabel = isString(itemLabel) ? {
-        body: itemLabel
-      } : itemLabel || {};
-      var _ref19 = finalLabel || {},
-        _ref19$textStyle = _ref19.textStyle,
-        finalLabelTextStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
-      var _ref20 = finalLabel || {},
-        _ref20$body = _ref20.body,
-        finalBody = _ref20$body === void 0 ? null : _ref20$body;
-      var key = finalBody || visualUrl || id;
-      var itemIsEmpty = finalBody === null && visual === null;
-      var isExternalLink = url !== null && !inWebView;
-      var isPopupEmpty = (heading === null || headingBody === null || headingBody === '') && (content === null || contentBody === null || contentBody === '') && popupLargeVisual === null;
-      return /*#__PURE__*/jsx("div", {
-        className: styles.item,
-        children: /*#__PURE__*/jsx(RichButton, {
-          className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, itemIsEmpty), styles.isLink, url !== null), styles.disableHover, isPopupEmpty && url === null)]),
-          layout: buttonLayout || null,
-          external: isExternalLink,
-          href: isExternalLink ? url : null,
-          focusable: current,
-          onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
-            return onItemClick(e, item, index);
-          } : null
-          // style={{
-          //     ...getStyleFromAlignment(alignment, true, 'flex-start'),
-          // }}
-          ,
-          textStyle: _objectSpread(_objectSpread({}, buttonTextStyle), finalLabelTextStyle),
-          buttonStyle: _objectSpread(_objectSpread({}, buttonBoxStyle), boxStyle),
-          label: finalLabel,
-          labelBoxStyle: buttonLabelBoxStyle,
-          visual: visual,
-          visualWidth: buttonVisualWidth !== null ? "".concat(buttonVisualWidth, "%") : null,
-          resolution: resolution,
-          textClassName: styles.buttonLabel
-        })
-      }, key);
-    });
-  }, [items, screenState, buttonBoxStyle, buttonTextStyle, buttonLayout, isNotInteractive]);
-  useEffect(function () {
-    if (screenState === 'popup' && isPlaceholder) {
-      setPopup(placeholderPopupBoxStyles);
-      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 && !isView) {
-      setPopup(null);
-      setShowPopup(false);
-    }
-  }, [screenState, items, isView]);
-
-  // Clear popup contents after close transition completes
-  useEffect(function () {
-    if (isView && screenState === null && !showPopup && !popupTransitioning) {
-      setPopup(null);
+    $[78] = onCloseModal;
+    $[79] = showPopup;
+    $[80] = t82;
+  } else {
+    t82 = $[80];
+  }
+  const onTap = t82;
+  const onResolve = _temp3;
+  const t83 = showPopup ? 0 : 1;
+  let t84;
+  let t85;
+  if ($[81] === Symbol.for("react.memo_cache_sentinel")) {
+    t84 = {
+      config: {
+        tension: 300,
+        friction: 30
+      }
+    };
+    t85 = {
+      filterTaps: true,
+      preventDefault: true,
+      stopPropagation: true
+    };
+    $[81] = t84;
+    $[82] = t85;
+  } else {
+    t84 = $[81];
+    t85 = $[82];
+  }
+  let t86;
+  if ($[83] !== computePopupProgress || $[84] !== onTap || $[85] !== t83) {
+    t86 = {
+      disabled: true,
+      progress: t83,
+      computeProgress: computePopupProgress,
+      onResolve,
+      springParams: t84,
+      dragOptions: t85,
+      onTap
+    };
+    $[83] = computePopupProgress;
+    $[84] = onTap;
+    $[85] = t83;
+    $[86] = t86;
+  } else {
+    t86 = $[86];
+  }
+  const {
+    bind: bindPopupDrag,
+    progress: popupSpring,
+    transitioning: popupTransitioning
+  } = useDragProgress(t86);
+  let t87;
+  let t88;
+  if ($[87] !== onCloseModal || $[88] !== showPopup) {
+    t87 = () => {
+      const keyup = e_3 => {
+        if (e_3.key === "Escape") {
+          if (showPopup) {
+            onCloseModal(showPopup);
+          }
+        }
+      };
+      document.addEventListener("keyup", keyup);
+      return () => {
+        document.removeEventListener("keyup", keyup);
+      };
+    };
+    t88 = [showPopup, onCloseModal];
+    $[87] = onCloseModal;
+    $[88] = showPopup;
+    $[89] = t87;
+    $[90] = t88;
+  } else {
+    t87 = $[89];
+    t88 = $[90];
+  }
+  useEffect(t87, t88);
+  const t89 = items === null || items.length === 0 ? placeholders : items;
+  let t90;
+  if ($[91] !== buttonBoxStyle || $[92] !== buttonLabelBoxStyle || $[93] !== buttonLayout || $[94] !== buttonTextStyle || $[95] !== buttonVisualWidth || $[96] !== current || $[97] !== onItemClick || $[98] !== resolution || $[99] !== t89) {
+    let t91;
+    if ($[101] !== buttonBoxStyle || $[102] !== buttonLabelBoxStyle || $[103] !== buttonLayout || $[104] !== buttonTextStyle || $[105] !== buttonVisualWidth || $[106] !== current || $[107] !== onItemClick || $[108] !== resolution) {
+      t91 = (item_0, index_0) => {
+        const {
+          id: t92,
+          label: t93,
+          visual: t94,
+          boxStyle: t95,
+          heading: t96,
+          content: t97,
+          url: t98,
+          inWebView: t99,
+          largeVisual: t100
+        } = item_0 || {};
+        const id = t92 === undefined ? null : t92;
+        const itemLabel_0 = t93 === undefined ? null : t93;
+        const visual = t94 === undefined ? null : t94;
+        const boxStyle = t95 === undefined ? null : t95;
+        const heading_0 = t96 === undefined ? null : t96;
+        const content = t97 === undefined ? null : t97;
+        const url_0 = t98 === undefined ? null : t98;
+        const inWebView_0 = t99 === undefined ? false : t99;
+        const popupLargeVisual = t100 === undefined ? null : t100;
+        const {
+          url: t101
+        } = visual || {};
+        const visualUrl = t101 === undefined ? null : t101;
+        const {
+          body: t102
+        } = heading_0 || {};
+        const headingBody_0 = t102 === undefined ? null : t102;
+        const {
+          body: t103
+        } = content || {};
+        const contentBody = t103 === undefined ? null : t103;
+        const finalLabel_0 = isString(itemLabel_0) ? {
+          body: itemLabel_0
+        } : itemLabel_0 || {};
+        const {
+          textStyle: t104
+        } = finalLabel_0 || {};
+        const finalLabelTextStyle = t104 === undefined ? null : t104;
+        const {
+          body: t105
+        } = finalLabel_0 || {};
+        const finalBody = t105 === undefined ? null : t105;
+        const key = finalBody || visualUrl || id;
+        const itemIsEmpty = finalBody === null && visual === null;
+        const isExternalLink = url_0 !== null && !inWebView_0;
+        const isPopupEmpty = (heading_0 === null || headingBody_0 === null || headingBody_0 === "") && (content === null || contentBody === null || contentBody === "") && popupLargeVisual === null;
+        return /*#__PURE__*/jsx("div", {
+          className: styles.item,
+          children: /*#__PURE__*/jsx(RichButton, {
+            className: classNames([styles.button, {
+              [styles.isEmpty]: itemIsEmpty,
+              [styles.isLink]: url_0 !== null,
+              [styles.disableHover]: isPopupEmpty && url_0 === null
+            }]),
+            layout: buttonLayout || null,
+            external: isExternalLink,
+            href: isExternalLink ? url_0 : null,
+            focusable: current,
+            onClick: !isPopupEmpty || url_0 !== null && !isExternalLink ? e_4 => onItemClick(e_4, item_0, index_0) : null,
+            textStyle: {
+              ...buttonTextStyle,
+              ...finalLabelTextStyle
+            },
+            buttonStyle: {
+              ...buttonBoxStyle,
+              ...boxStyle
+            },
+            label: finalLabel_0,
+            labelBoxStyle: buttonLabelBoxStyle,
+            visual: visual,
+            visualWidth: buttonVisualWidth !== null ? `${buttonVisualWidth}%` : null,
+            resolution: resolution,
+            textClassName: styles.buttonLabel
+          })
+        }, key);
+      };
+      $[101] = buttonBoxStyle;
+      $[102] = buttonLabelBoxStyle;
+      $[103] = buttonLayout;
+      $[104] = buttonTextStyle;
+      $[105] = buttonVisualWidth;
+      $[106] = current;
+      $[107] = onItemClick;
+      $[108] = resolution;
+      $[109] = t91;
+    } else {
+      t91 = $[109];
     }
-  }, [isView, screenState, showPopup, popupTransitioning]);
-  return /*#__PURE__*/jsxs("div", {
-    ref: containerRef,
-    className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
-    "data-screen-ready": true,
-    children: [!isPlaceholder ? /*#__PURE__*/jsx(Background, {
+    t90 = t89.map(t91);
+    $[91] = buttonBoxStyle;
+    $[92] = buttonLabelBoxStyle;
+    $[93] = buttonLayout;
+    $[94] = buttonTextStyle;
+    $[95] = buttonVisualWidth;
+    $[96] = current;
+    $[97] = onItemClick;
+    $[98] = resolution;
+    $[99] = t89;
+    $[100] = t90;
+  } else {
+    t90 = $[100];
+  }
+  const gridItems = t90;
+  let t91;
+  if ($[110] !== isPlaceholder || $[111] !== isView || $[112] !== items || $[113] !== screenState) {
+    t91 = () => {
+      if (screenState === "popup" && isPlaceholder) {
+        setPopup(placeholderPopupBoxStyles);
+        setShowPopup(true);
+      }
+      if (screenState === "keypad") {
+        setPopup(null);
+        setShowPopup(false);
+      }
+      if (screenState !== null && screenState.includes("popup")) {
+        const index_1 = screenState.split(".").pop();
+        const found = items[index_1];
+        setPopup(found);
+        setShowPopup(true);
+      }
+      if (screenState === null && !isView) {
+        setPopup(null);
+        setShowPopup(false);
+      }
+    };
+    $[110] = isPlaceholder;
+    $[111] = isView;
+    $[112] = items;
+    $[113] = screenState;
+    $[114] = t91;
+  } else {
+    t91 = $[114];
+  }
+  let t92;
+  if ($[115] !== isView || $[116] !== items || $[117] !== screenState) {
+    t92 = [screenState, items, isView];
+    $[115] = isView;
+    $[116] = items;
+    $[117] = screenState;
+    $[118] = t92;
+  } else {
+    t92 = $[118];
+  }
+  useEffect(t91, t92);
+  let t93;
+  let t94;
+  if ($[119] !== isView || $[120] !== popupTransitioning || $[121] !== screenState || $[122] !== showPopup) {
+    t93 = () => {
+      if (isView && screenState === null && !showPopup && !popupTransitioning) {
+        setPopup(null);
+      }
+    };
+    t94 = [isView, screenState, showPopup, popupTransitioning];
+    $[119] = isView;
+    $[120] = popupTransitioning;
+    $[121] = screenState;
+    $[122] = showPopup;
+    $[123] = t93;
+    $[124] = t94;
+  } else {
+    t93 = $[123];
+    t94 = $[124];
+  }
+  useEffect(t93, t94);
+  const t95 = classNames([styles.container, className, {
+    [styles.isPlaceholder]: isPlaceholder,
+    [styles.withSquareItems]: withSquareItems
+  }]);
+  let t96;
+  if ($[125] !== background || $[126] !== backgroundPlaying || $[127] !== customMediaRef || $[128] !== height || $[129] !== isPlaceholder || $[130] !== mediaRef || $[131] !== mediaShouldLoad || $[132] !== muted || $[133] !== resolution || $[134] !== width) {
+    t96 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -520,10 +902,29 @@ function KeypadScreen(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       className: styles.background
-    }) : null, isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
-      className: classNames([styles.fixedHeader, _defineProperty({}, styles.open, showPopup)]),
+    }) : null;
+    $[125] = background;
+    $[126] = backgroundPlaying;
+    $[127] = customMediaRef;
+    $[128] = height;
+    $[129] = isPlaceholder;
+    $[130] = mediaRef;
+    $[131] = mediaShouldLoad;
+    $[132] = muted;
+    $[133] = resolution;
+    $[134] = width;
+    $[135] = t96;
+  } else {
+    t96 = $[135];
+  }
+  let t97;
+  if ($[136] !== isPlaceholder || $[137] !== isPreview || $[138] !== isView || $[139] !== onClickClose || $[140] !== showPopup || $[141] !== withoutCloseButton) {
+    t97 = isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
+      className: classNames([styles.fixedHeader, {
+        [styles.open]: showPopup
+      }]),
       children: /*#__PURE__*/jsx("div", {
         className: styles.buttons,
         children: /*#__PURE__*/jsx(Button, {
@@ -537,201 +938,699 @@ function KeypadScreen(_ref) {
           })
         })
       })
-    }) : null, /*#__PURE__*/jsxs(Container, {
+    }) : null;
+    $[136] = isPlaceholder;
+    $[137] = isPreview;
+    $[138] = isView;
+    $[139] = onClickClose;
+    $[140] = showPopup;
+    $[141] = withoutCloseButton;
+    $[142] = t97;
+  } else {
+    t97 = $[142];
+  }
+  const t98 = !showPopup;
+  const t99 = !showPopup;
+  const t100 = isPreview || isPlaceholder || showPopup;
+  let t101;
+  if ($[143] !== current || $[144] !== footerHeight || $[145] !== hasFooter || $[146] !== hasHeader || $[147] !== headerHeight || $[148] !== isPlaceholder || $[149] !== isPreview || $[150] !== spacing || $[151] !== viewerBottomHeight || $[152] !== viewerTopHeight) {
+    t101 = !isPlaceholder ? {
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
+      paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
+    } : null;
+    $[143] = current;
+    $[144] = footerHeight;
+    $[145] = hasFooter;
+    $[146] = hasHeader;
+    $[147] = headerHeight;
+    $[148] = isPlaceholder;
+    $[149] = isPreview;
+    $[150] = spacing;
+    $[151] = viewerBottomHeight;
+    $[152] = viewerTopHeight;
+    $[153] = t101;
+  } else {
+    t101 = $[153];
+  }
+  let t102;
+  if ($[154] !== hasHeader || $[155] !== header || $[156] !== headerRef || $[157] !== isPlaceholder || $[158] !== isPreview || $[159] !== spacing || $[160] !== viewerTopHeight) {
+    t102 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      ref: headerRef,
+      className: styles.header,
+      style: {
+        paddingTop: spacing / 2,
+        paddingLeft: spacing,
+        paddingRight: spacing,
+        paddingBottom: spacing,
+        transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        ...header
+      })
+    }) : null;
+    $[154] = hasHeader;
+    $[155] = header;
+    $[156] = headerRef;
+    $[157] = isPlaceholder;
+    $[158] = isPreview;
+    $[159] = spacing;
+    $[160] = viewerTopHeight;
+    $[161] = t102;
+  } else {
+    t102 = $[161];
+  }
+  let t103;
+  let t104;
+  if ($[162] === Symbol.for("react.memo_cache_sentinel")) {
+    t103 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "BSTWf8",
+      defaultMessage: "Title"
+    });
+    t104 = classNames([styles.empty, styles.emptyHeading]);
+    $[162] = t103;
+    $[163] = t104;
+  } else {
+    t103 = $[162];
+    t104 = $[163];
+  }
+  const t105 = !hasTitle;
+  let t106;
+  if ($[164] !== hasTitle || $[165] !== title || $[166] !== titleTextStyle) {
+    t106 = hasTitle ? /*#__PURE__*/jsx(Heading, {
+      className: styles.title,
+      ...title,
+      textStyle: titleTextStyle
+    }) : null;
+    $[164] = hasTitle;
+    $[165] = title;
+    $[166] = titleTextStyle;
+    $[167] = t106;
+  } else {
+    t106 = $[167];
+  }
+  let t107;
+  if ($[168] !== t105 || $[169] !== t106) {
+    t107 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "Title",
+      emptyLabel: t103,
+      emptyClassName: t104,
+      isEmpty: t105,
+      children: t106
+    });
+    $[168] = t105;
+    $[169] = t106;
+    $[170] = t107;
+  } else {
+    t107 = $[170];
+  }
+  let t108;
+  let t109;
+  if ($[171] === Symbol.for("react.memo_cache_sentinel")) {
+    t108 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "ZG8/oK",
+      defaultMessage: "Subtitle"
+    });
+    t109 = classNames([styles.empty, styles.emptyHeading]);
+    $[171] = t108;
+    $[172] = t109;
+  } else {
+    t108 = $[171];
+    t109 = $[172];
+  }
+  const t110 = !hasSubtitle;
+  let t111;
+  if ($[173] !== hasSubtitle || $[174] !== subtitle) {
+    t111 = hasSubtitle ? /*#__PURE__*/jsx(Text, {
+      className: styles.subtitle,
+      ...subtitle
+    }) : null;
+    $[173] = hasSubtitle;
+    $[174] = subtitle;
+    $[175] = t111;
+  } else {
+    t111 = $[175];
+  }
+  let t112;
+  if ($[176] !== t110 || $[177] !== t111) {
+    t112 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "Subtitle",
+      emptyLabel: t108,
+      emptyClassName: t109,
+      isEmpty: t110,
+      children: t111
+    });
+    $[176] = t110;
+    $[177] = t111;
+    $[178] = t112;
+  } else {
+    t112 = $[178];
+  }
+  let t113;
+  if ($[179] !== isPlaceholder) {
+    t113 = classNames([styles.grid, {
+      [styles.gridPlaceholder]: isPlaceholder
+    }]);
+    $[179] = isPlaceholder;
+    $[180] = t113;
+  } else {
+    t113 = $[180];
+  }
+  const t114 = isPlaceholder ? 3 : columns;
+  const t115 = isPlaceholder ? 2 : columnSpacing;
+  let t116;
+  if ($[181] !== columnAlign || $[182] !== gridItems || $[183] !== t113 || $[184] !== t114 || $[185] !== t115) {
+    t116 = /*#__PURE__*/jsx(Keypad, {
+      className: t113,
+      align: columnAlign,
+      columns: t114,
+      spacing: t115,
+      items: gridItems
+    });
+    $[181] = columnAlign;
+    $[182] = gridItems;
+    $[183] = t113;
+    $[184] = t114;
+    $[185] = t115;
+    $[186] = t116;
+  } else {
+    t116 = $[186];
+  }
+  let t117;
+  if ($[187] !== layout || $[188] !== t101 || $[189] !== t102 || $[190] !== t107 || $[191] !== t112 || $[192] !== t116 || $[193] !== width) {
+    t117 = /*#__PURE__*/jsxs(Layout, {
+      className: styles.layout,
+      verticalAlign: layout,
+      width: width,
+      style: t101,
+      children: [t102, t107, t112, t116]
+    });
+    $[187] = layout;
+    $[188] = t101;
+    $[189] = t102;
+    $[190] = t107;
+    $[191] = t112;
+    $[192] = t116;
+    $[193] = width;
+    $[194] = t117;
+  } else {
+    t117 = $[194];
+  }
+  let t118;
+  if ($[195] === Symbol.for("react.memo_cache_sentinel")) {
+    t118 = classNames([styles.popupBackdrop]);
+    $[195] = t118;
+  } else {
+    t118 = $[195];
+  }
+  let t119;
+  if ($[196] !== popupSpring) {
+    t119 = popupSpring.to(_temp4);
+    $[196] = popupSpring;
+    $[197] = t119;
+  } else {
+    t119 = $[197];
+  }
+  let t120;
+  if ($[198] !== t119) {
+    t120 = /*#__PURE__*/jsx(animated.div, {
+      className: t118,
+      style: {
+        opacity: t119
+      }
+    });
+    $[198] = t119;
+    $[199] = t120;
+  } else {
+    t120 = $[199];
+  }
+  let t121;
+  if ($[200] !== popupSpring) {
+    t121 = popupSpring.to(_temp5);
+    $[200] = popupSpring;
+    $[201] = t121;
+  } else {
+    t121 = $[201];
+  }
+  let t122;
+  if ($[202] !== popupSpring) {
+    t122 = popupSpring.to(_temp6);
+    $[202] = popupSpring;
+    $[203] = t122;
+  } else {
+    t122 = $[203];
+  }
+  let t123;
+  if ($[204] !== t121 || $[205] !== t122) {
+    t123 = {
+      transform: t121,
+      pointerEvents: t122
+    };
+    $[204] = t121;
+    $[205] = t122;
+    $[206] = t123;
+  } else {
+    t123 = $[206];
+  }
+  let t124;
+  if ($[207] !== bindPopupDrag) {
+    t124 = bindPopupDrag();
+    $[207] = bindPopupDrag;
+    $[208] = t124;
+  } else {
+    t124 = $[208];
+  }
+  const t125 = isPreview || isPlaceholder;
+  const t126 = !showPopup ? 1 : null;
+  const t127 = styles[popupLayoutClassName];
+  const t128 = popupBoxStyle === null;
+  let t129;
+  if ($[209] !== t127 || $[210] !== t128) {
+    t129 = classNames([styles.popupInner, t127, {
+      [styles.withShadow]: t128
+    }]);
+    $[209] = t127;
+    $[210] = t128;
+    $[211] = t129;
+  } else {
+    t129 = $[211];
+  }
+  let t130;
+  if ($[212] === Symbol.for("react.memo_cache_sentinel")) {
+    t130 = getStyleFromBox(placeholderPopupBoxStyles);
+    $[212] = t130;
+  } else {
+    t130 = $[212];
+  }
+  let t131;
+  if ($[213] !== popupBoxStyle) {
+    t131 = getStyleFromBox(popupBoxStyle);
+    $[213] = popupBoxStyle;
+    $[214] = t131;
+  } else {
+    t131 = $[214];
+  }
+  let t132;
+  if ($[215] !== singlePopupBoxStyle) {
+    t132 = getStyleFromBox(singlePopupBoxStyle);
+    $[215] = singlePopupBoxStyle;
+    $[216] = t132;
+  } else {
+    t132 = $[216];
+  }
+  let t133;
+  if ($[217] !== t131 || $[218] !== t132) {
+    t133 = {
+      ...t130,
+      ...t131,
+      ...t132
+    };
+    $[217] = t131;
+    $[218] = t132;
+    $[219] = t133;
+  } else {
+    t133 = $[219];
+  }
+  let t134;
+  let t135;
+  if ($[220] === Symbol.for("react.memo_cache_sentinel")) {
+    t134 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "IE7U/Q",
+      defaultMessage: "Heading"
+    });
+    t135 = classNames([styles.empty, styles.emptyHeading]);
+    $[220] = t134;
+    $[221] = t135;
+  } else {
+    t134 = $[220];
+    t135 = $[221];
+  }
+  const t136 = !hasPopupHeading;
+  let t137;
+  if ($[222] !== hasPopupHeading || $[223] !== headingTextStyle || $[224] !== popupHeading || $[225] !== popupHeadingTextStyle) {
+    t137 = hasPopupHeading ? /*#__PURE__*/jsx(Heading, {
+      className: styles.popupHeading,
+      ...popupHeading,
+      textStyle: {
+        ...headingTextStyle,
+        ...popupHeadingTextStyle
+      }
+    }) : null;
+    $[222] = hasPopupHeading;
+    $[223] = headingTextStyle;
+    $[224] = popupHeading;
+    $[225] = popupHeadingTextStyle;
+    $[226] = t137;
+  } else {
+    t137 = $[226];
+  }
+  let t138;
+  if ($[227] !== t136 || $[228] !== t137) {
+    t138 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyLabel: t134,
+      emptyClassName: t135,
+      isEmpty: t136,
+      children: t137
+    });
+    $[227] = t136;
+    $[228] = t137;
+    $[229] = t138;
+  } else {
+    t138 = $[229];
+  }
+  let t139;
+  let t140;
+  if ($[230] === Symbol.for("react.memo_cache_sentinel")) {
+    t139 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "JRZoe6",
+      defaultMessage: "Content"
+    });
+    t140 = classNames([styles.empty, styles.emptyContent]);
+    $[230] = t139;
+    $[231] = t140;
+  } else {
+    t139 = $[230];
+    t140 = $[231];
+  }
+  const t141 = !hasPopupContent;
+  let t142;
+  if ($[232] !== contentTextStyle || $[233] !== hasPopupContent || $[234] !== popupContent || $[235] !== popupContentTextStyle) {
+    t142 = hasPopupContent ? /*#__PURE__*/jsx(Text, {
+      className: styles.popupContent,
+      ...popupContent,
+      textStyle: {
+        ...contentTextStyle,
+        ...popupContentTextStyle
+      }
+    }) : null;
+    $[232] = contentTextStyle;
+    $[233] = hasPopupContent;
+    $[234] = popupContent;
+    $[235] = popupContentTextStyle;
+    $[236] = t142;
+  } else {
+    t142 = $[236];
+  }
+  let t143;
+  if ($[237] !== t141 || $[238] !== t142) {
+    t143 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "popupContent",
+      emptyLabel: t139,
+      emptyClassName: t140,
+      isEmpty: t141,
+      children: t142
+    });
+    $[237] = t141;
+    $[238] = t142;
+    $[239] = t143;
+  } else {
+    t143 = $[239];
+  }
+  let t144;
+  let t145;
+  if ($[240] === Symbol.for("react.memo_cache_sentinel")) {
+    t144 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "z4Pr+g",
+      defaultMessage: "Visual (Image or Video)"
+    });
+    t145 = classNames([styles.empty, styles.emptyVisual]);
+    $[240] = t144;
+    $[241] = t145;
+  } else {
+    t144 = $[240];
+    t145 = $[241];
+  }
+  const t146 = largeVisual === null;
+  let t147;
+  if ($[242] !== largeVisual || $[243] !== largeVisualRatio || $[244] !== resolution) {
+    t147 = largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
+      className: styles.popupVisual,
+      imageClassName: styles.popupVisualImage,
+      videoClassName: styles.popupVisualVideo,
+      media: largeVisual,
+      resolution: resolution,
+      ratio: largeVisualRatio,
+      width: "100%",
+      height: "auto"
+    }) : null;
+    $[242] = largeVisual;
+    $[243] = largeVisualRatio;
+    $[244] = resolution;
+    $[245] = t147;
+  } else {
+    t147 = $[245];
+  }
+  let t148;
+  if ($[246] !== t146 || $[247] !== t147) {
+    t148 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "image",
+      emptyLabel: t144,
+      emptyClassName: t145,
+      isEmpty: t146,
+      children: t147
+    });
+    $[246] = t146;
+    $[247] = t147;
+    $[248] = t148;
+  } else {
+    t148 = $[248];
+  }
+  let t149;
+  let t150;
+  if ($[249] === Symbol.for("react.memo_cache_sentinel")) {
+    t149 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "N7Kj8z",
+      defaultMessage: "Button"
+    });
+    t150 = classNames([styles.empty, styles.emptyCTA]);
+    $[249] = t149;
+    $[250] = t150;
+  } else {
+    t149 = $[249];
+    t150 = $[250];
+  }
+  const t151 = popupButton === null;
+  let t152;
+  if ($[251] !== buttonLabel || $[252] !== buttonUrl || $[253] !== onClickCta || $[254] !== openWebView || $[255] !== popupButton || $[256] !== popupButtonBoxStyle || $[257] !== popupButtonsBoxStyle || $[258] !== popupButtonsTextStyle || $[259] !== popupInWebView) {
+    t152 = popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
+      className: styles.popupCTA,
+      label: {
+        ...popupButtonsTextStyle,
+        ...buttonLabel
+      },
+      url: buttonUrl,
+      onClick: onClickCta,
+      inWebView: popupInWebView,
+      openWebView: openWebView,
+      type: "click",
+      boxStyle: {
+        ...popupButtonsBoxStyle,
+        ...popupButtonBoxStyle
+      }
+    }) : null;
+    $[251] = buttonLabel;
+    $[252] = buttonUrl;
+    $[253] = onClickCta;
+    $[254] = openWebView;
+    $[255] = popupButton;
+    $[256] = popupButtonBoxStyle;
+    $[257] = popupButtonsBoxStyle;
+    $[258] = popupButtonsTextStyle;
+    $[259] = popupInWebView;
+    $[260] = t152;
+  } else {
+    t152 = $[260];
+  }
+  let t153;
+  if ($[261] !== t151 || $[262] !== t152) {
+    t153 = /*#__PURE__*/jsx(ScreenElement, {
+      placeholder: "button",
+      emptyLabel: t149,
+      emptyClassName: t150,
+      isEmpty: t151,
+      children: t152
+    });
+    $[261] = t151;
+    $[262] = t152;
+    $[263] = t153;
+  } else {
+    t153 = $[263];
+  }
+  let t154;
+  if ($[264] !== t129 || $[265] !== t133 || $[266] !== t138 || $[267] !== t143 || $[268] !== t148 || $[269] !== t153) {
+    t154 = /*#__PURE__*/jsxs("div", {
+      ref: popupInnerRef,
+      className: t129,
+      style: t133,
+      children: [t138, t143, t148, t153]
+    });
+    $[264] = t129;
+    $[265] = t133;
+    $[266] = t138;
+    $[267] = t143;
+    $[268] = t148;
+    $[269] = t153;
+    $[270] = t154;
+  } else {
+    t154 = $[270];
+  }
+  let t155;
+  if ($[271] !== onPopupScrollBottom || $[272] !== onPopupScrollHeightChange || $[273] !== onPopupScrollNotBottom || $[274] !== t125 || $[275] !== t126 || $[276] !== t154) {
+    t155 = /*#__PURE__*/jsx(Scroll, {
+      disabled: t125,
+      verticalAlign: "middle",
+      withArrow: false,
+      scrollPosition: t126,
+      onScrolledBottom: onPopupScrollBottom,
+      onScrolledNotBottom: onPopupScrollNotBottom,
+      onScrollHeightChange: onPopupScrollHeightChange,
+      className: styles.popupScroll,
+      withShadow: true,
+      children: t154
+    });
+    $[271] = onPopupScrollBottom;
+    $[272] = onPopupScrollHeightChange;
+    $[273] = onPopupScrollNotBottom;
+    $[274] = t125;
+    $[275] = t126;
+    $[276] = t154;
+    $[277] = t155;
+  } else {
+    t155 = $[277];
+  }
+  let t156;
+  if ($[278] !== t123 || $[279] !== t124 || $[280] !== t155) {
+    t156 = /*#__PURE__*/jsx(animated.div, {
+      className: styles.popup,
+      style: t123,
+      ...t124,
+      children: t155
+    });
+    $[278] = t123;
+    $[279] = t124;
+    $[280] = t155;
+    $[281] = t156;
+  } else {
+    t156 = $[281];
+  }
+  let t157;
+  if ($[282] !== t120 || $[283] !== t156) {
+    t157 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t120, t156]
+    });
+    $[282] = t120;
+    $[283] = t156;
+    $[284] = t157;
+  } else {
+    t157 = $[284];
+  }
+  let t158;
+  if ($[285] !== height || $[286] !== layout || $[287] !== onScrolledTrigger || $[288] !== t100 || $[289] !== t117 || $[290] !== t157 || $[291] !== t98 || $[292] !== t99 || $[293] !== width) {
+    t158 = /*#__PURE__*/jsxs(Scroll, {
+      width: width,
+      height: height,
+      verticalAlign: layout,
+      withArrow: t98,
+      withShadow: t99,
+      disabled: t100,
+      onScrolledTrigger: onScrolledTrigger,
+      children: [t117, t157]
+    });
+    $[285] = height;
+    $[286] = layout;
+    $[287] = onScrolledTrigger;
+    $[288] = t100;
+    $[289] = t117;
+    $[290] = t157;
+    $[291] = t98;
+    $[292] = t99;
+    $[293] = width;
+    $[294] = t158;
+  } else {
+    t158 = $[294];
+  }
+  let t159;
+  if ($[295] !== current || $[296] !== footerProps || $[297] !== footerRef || $[298] !== hasFooter || $[299] !== isPlaceholder || $[300] !== isPreview || $[301] !== spacing || $[302] !== viewerBottomHeight || $[303] !== viewerBottomSidesWidth) {
+    t159 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+      ref: footerRef,
+      className: styles.footer,
+      style: {
+        transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
+        paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
+        paddingBottom: spacing / 2,
+        paddingTop: spacing
+      },
+      children: /*#__PURE__*/jsx(Footer, {
+        ...footerProps
+      })
+    }) : null;
+    $[295] = current;
+    $[296] = footerProps;
+    $[297] = footerRef;
+    $[298] = hasFooter;
+    $[299] = isPlaceholder;
+    $[300] = isPreview;
+    $[301] = spacing;
+    $[302] = viewerBottomHeight;
+    $[303] = viewerBottomSidesWidth;
+    $[304] = t159;
+  } else {
+    t159 = $[304];
+  }
+  let t160;
+  if ($[305] !== height || $[306] !== t158 || $[307] !== t159 || $[308] !== width) {
+    t160 = /*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
       className: styles.inner,
-      children: [/*#__PURE__*/jsxs(Scroll, {
-        width: width,
-        height: height,
-        verticalAlign: layout,
-        withArrow: !showPopup,
-        withShadow: !showPopup,
-        disabled: isPreview || isPlaceholder || showPopup,
-        onScrolledTrigger: onScrolledTrigger,
-        children: [/*#__PURE__*/jsxs(Layout, {
-          className: styles.layout,
-          verticalAlign: layout,
-          width: width,
-          style: !isPlaceholder ? {
-            paddingLeft: spacing,
-            paddingRight: spacing,
-            paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
-            paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
-          } : null,
-          children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-            ref: headerRef,
-            className: styles.header,
-            style: {
-              paddingTop: spacing / 2,
-              paddingLeft: spacing,
-              paddingRight: spacing,
-              paddingBottom: spacing,
-              transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-            },
-            children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
-          }) : null, /*#__PURE__*/jsx(ScreenElement, {
-            placeholder: "Title",
-            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "BSTWf8",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Title"
-              }]
-            }),
-            emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-            isEmpty: !hasTitle,
-            children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
-              className: styles.title
-            }, title), {}, {
-              textStyle: titleTextStyle
-            })) : null
-          }), /*#__PURE__*/jsx(ScreenElement, {
-            placeholder: "Subtitle",
-            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "ZG8/oK",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Subtitle"
-              }]
-            }),
-            emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-            isEmpty: !hasSubtitle,
-            children: hasSubtitle ? /*#__PURE__*/jsx(Text, _objectSpread({
-              className: styles.subtitle
-            }, subtitle)) : null
-          }), /*#__PURE__*/jsx(Keypad, {
-            className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
-            align: columnAlign,
-            columns: isPlaceholder ? 3 : columns,
-            spacing: isPlaceholder ? 2 : columnSpacing,
-            items: gridItems
-          })]
-        }), /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(animated.div, {
-            className: classNames([styles.popupBackdrop]),
-            style: {
-              opacity: popupSpring.to(function (p) {
-                return 1 - Math.abs(p);
-              })
-            }
-          }), /*#__PURE__*/jsx(animated.div, _objectSpread(_objectSpread({
-            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()), {}, {
-            children: /*#__PURE__*/jsx(Scroll, {
-              disabled: isPreview || isPlaceholder,
-              verticalAlign: "middle",
-              withArrow: false,
-              scrollPosition: !showPopup ? 1 : null,
-              onScrolledBottom: onPopupScrollBottom,
-              onScrolledNotBottom: onPopupScrollNotBottom,
-              onScrollHeightChange: onPopupScrollHeightChange,
-              className: styles.popupScroll,
-              withShadow: true,
-              children: /*#__PURE__*/jsxs("div", {
-                ref: popupInnerRef,
-                className: classNames([styles.popupInner, styles[popupLayoutClassName], _defineProperty({}, styles.withShadow, popupBoxStyle === null)]),
-                style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle)), getStyleFromBox(singlePopupBoxStyle)),
-                children: [/*#__PURE__*/jsx(ScreenElement, {
-                  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-                    id: "IE7U/Q",
-                    defaultMessage: [{
-                      "type": 0,
-                      "value": "Heading"
-                    }]
-                  }),
-                  emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-                  isEmpty: !hasPopupHeading,
-                  children: hasPopupHeading ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
-                    className: styles.popupHeading
-                  }, popupHeading), {}, {
-                    textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
-                  })) : null
-                }), /*#__PURE__*/jsx(ScreenElement, {
-                  placeholder: "popupContent",
-                  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-                    id: "JRZoe6",
-                    defaultMessage: [{
-                      "type": 0,
-                      "value": "Content"
-                    }]
-                  }),
-                  emptyClassName: classNames([styles.empty, styles.emptyContent]),
-                  isEmpty: !hasPopupContent,
-                  children: hasPopupContent ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
-                    className: styles.popupContent
-                  }, popupContent), {}, {
-                    textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
-                  })) : null
-                }), /*#__PURE__*/jsx(ScreenElement, {
-                  placeholder: "image",
-                  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-                    id: "z4Pr+g",
-                    defaultMessage: [{
-                      "type": 0,
-                      "value": "Visual (Image or Video)"
-                    }]
-                  }),
-                  emptyClassName: classNames([styles.empty, styles.emptyVisual]),
-                  isEmpty: largeVisual === null,
-                  children: largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
-                    className: styles.popupVisual,
-                    imageClassName: styles.popupVisualImage,
-                    videoClassName: styles.popupVisualVideo,
-                    media: largeVisual,
-                    resolution: resolution,
-                    ratio: largeVisualRatio,
-                    width: "100%",
-                    height: "auto"
-                  }) : null
-                }), /*#__PURE__*/jsx(ScreenElement, {
-                  placeholder: "button",
-                  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-                    id: "N7Kj8z",
-                    defaultMessage: [{
-                      "type": 0,
-                      "value": "Button"
-                    }]
-                  }),
-                  emptyClassName: classNames([styles.empty, styles.emptyCTA]),
-                  isEmpty: popupButton === null,
-                  children: popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
-                    className: styles.popupCTA,
-                    label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
-                    url: buttonUrl,
-                    onClick: onClickCta,
-                    inWebView: popupInWebView,
-                    openWebView: openWebView,
-                    type: "click",
-                    boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
-                  }) : null
-                })]
-              })
-            })
-          }))]
-        })]
-      }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("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
-        },
-        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
-      }) : null]
-    })]
-  });
+      children: [t158, t159]
+    });
+    $[305] = height;
+    $[306] = t158;
+    $[307] = t159;
+    $[308] = width;
+    $[309] = t160;
+  } else {
+    t160 = $[309];
+  }
+  let t161;
+  if ($[310] !== t160 || $[311] !== t95 || $[312] !== t96 || $[313] !== t97) {
+    t161 = /*#__PURE__*/jsxs("div", {
+      ref: containerRef,
+      className: t95,
+      "data-screen-ready": true,
+      children: [t96, t97, t160]
+    });
+    $[310] = t160;
+    $[311] = t95;
+    $[312] = t96;
+    $[313] = t97;
+    $[314] = t161;
+  } else {
+    t161 = $[314];
+  }
+  return t161;
+}
+function _temp6(p_1) {
+  return Math.abs(p_1) > 0.5 ? "none" : "auto";
+}
+function _temp5(p_0) {
+  return `translateY(${100 * p_0}%) scale(${1 - Math.abs(p_0 * 0.5)})`;
+}
+function _temp4(p) {
+  return 1 - Math.abs(p);
+}
+function _temp3() {}
+function _temp2(t0) {
+  const e_1 = t0 === undefined ? null : t0;
+  if (e_1 !== null) {
+    e_1.stopPropagation();
+  }
+}
+function _temp(it) {
+  return !isEmpty(it);
 }
 
 var definition = [{
@@ -740,19 +1639,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
+      defaultMessage: "List"
     }),
     order: 4
   },
   title: defineMessage({
     id: "75nZbY",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Keypad"
-    }]
+    defaultMessage: "Keypad"
   }),
   layouts: ['top', 'middle', 'bottom'],
   component: KeypadScreen,
@@ -760,10 +1653,7 @@ var definition = [{
     id: 'keypad',
     label: defineMessage({
       id: "Z4f5qh",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Buttons"
-      }]
+      defaultMessage: "Buttons"
     }),
     fields: [{
       name: 'layout',
@@ -771,20 +1661,14 @@ var definition = [{
       defaultValue: 'middle',
       label: defineMessage({
         id: "4iBXj2",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Layout"
-        }]
+        defaultMessage: "Layout"
       })
     }, {
       name: 'items',
       type: 'buttons',
       label: defineMessage({
         id: "fbUW2U",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Items"
-        }]
+        defaultMessage: "Items"
       }),
       isSection: true
     }, {
@@ -800,10 +1684,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "FjuRaw",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Keypad settings"
-        }]
+        defaultMessage: "Keypad settings"
       })
     }, {
       name: 'buttonStyles',
@@ -819,10 +1700,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "Arl5Ze",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button styles"
-        }]
+        defaultMessage: "Button styles"
       }),
       isList: true
     }]
@@ -830,10 +1708,7 @@ var definition = [{
     id: 'popups',
     label: defineMessage({
       id: "FYm4w+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Popups"
-      }]
+      defaultMessage: "Popups"
     }),
     fields: [{
       name: 'popupStyles',
@@ -846,40 +1721,28 @@ var definition = [{
         type: 'card-layout',
         label: defineMessage({
           id: "OPxJx/",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Layout"
-          }]
+          defaultMessage: "Layout"
         })
       }, {
         name: 'headingTextStyle',
         type: 'text-style-form',
         label: defineMessage({
           id: "zrK6ak",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Heading text style"
-          }]
+          defaultMessage: "Heading text style"
         })
       }, {
         name: 'contentTextStyle',
         type: 'text-style-form',
         label: defineMessage({
           id: "z9nSIG",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Content text style"
-          }]
+          defaultMessage: "Content text style"
         })
       }, {
         name: 'boxStyle',
         type: 'box-style-form',
         label: defineMessage({
           id: "p1pghO",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Box style"
-          }]
+          defaultMessage: "Box style"
         })
       }, {
         name: 'button',
@@ -887,30 +1750,21 @@ var definition = [{
         isList: true,
         label: defineMessage({
           id: "i6bmbD",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Button"
-          }]
+          defaultMessage: "Button"
         }),
         fields: [{
           name: 'buttonTextStyle',
           type: 'text-style-form',
           label: defineMessage({
             id: "p5RHzq",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Button text style"
-            }]
+            defaultMessage: "Button text style"
           })
         }, {
           name: 'buttonStyle',
           type: 'box-style-form',
           label: defineMessage({
             id: "nno1Pq",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Button style"
-            }]
+            defaultMessage: "Button style"
           })
         }]
       }]
@@ -919,10 +1773,7 @@ var definition = [{
     id: 'popup',
     label: defineMessage({
       id: "sSahY1",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Popup"
-      }]
+      defaultMessage: "Popup"
     }),
     defaultValue: [],
     repeatable: true,
@@ -932,20 +1783,14 @@ var definition = [{
       type: 'heading-element',
       label: defineMessage({
         id: "6iR9Mt",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Heading"
-        }]
+        defaultMessage: "Heading"
       })
     }, {
       name: 'content',
       type: 'text-element',
       label: defineMessage({
         id: "uoF5Pv",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Content"
-        }]
+        defaultMessage: "Content"
       }),
       theme: {
         label: {
@@ -957,30 +1802,21 @@ var definition = [{
       type: 'visual',
       label: defineMessage({
         id: "HwqzVR",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Visual"
-        }]
+        defaultMessage: "Visual"
       })
     }, {
       name: 'popupBoxStyle',
       type: 'box-style-form',
       label: defineMessage({
         id: "p1pghO",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Box style"
-        }]
+        defaultMessage: "Box style"
       })
     }, {
       name: 'button',
       type: 'button-link',
       label: defineMessage({
         id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
+        defaultMessage: "Button"
       }),
       theme: {
         label: {
@@ -997,10 +1833,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'subtitle',
@@ -1010,30 +1843,21 @@ var definition = [{
     },
     label: defineMessage({
       id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
+      defaultMessage: "Subtitle"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -1048,10 +1872,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {