@micromag/screen-keypad 0.3.362 → 0.3.369

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:100%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popup{height:100%;left:0;position:fixed;right:0;top:0;-ms-touch-action:none;touch-action:none;width:100%;z-index:6}.micromag-screen-keypad-popupBackdrop{pointer-events:none;z-index:2}.micromag-screen-keypad-popupButton{height:100%;padding:52px 15px 30px;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%;z-index:3}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;overflow:hidden}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-popupCTA{margin:0 auto}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}
+.micromag-screen-keypad-popup,.micromag-screen-keypad-popupButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-keypad-background,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-popupBackdrop,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-button,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-keypad-disabled.micromag-screen-keypad-container{overflow:hidden;pointer-events:none}.micromag-screen-keypad-hidden.micromag-screen-keypad-container{display:none;visibility:hidden}.micromag-screen-keypad-placeholder.micromag-screen-keypad-container .micromag-screen-keypad-content{padding:6px;position:relative}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-keypad-container{-ms-touch-action:none;touch-action:none}.micromag-screen-keypad-container p{font-weight:inherit;margin-bottom:inherit;margin-top:inherit}.micromag-screen-keypad-container.micromag-screen-keypad-isPlaceholder .micromag-screen-keypad-layout{padding:10px}.micromag-screen-keypad-background{z-index:1}.micromag-screen-keypad-header{left:0;position:absolute;top:0;width:100%}.micromag-screen-keypad-footer{bottom:0;left:0;position:absolute;width:100%}.micromag-screen-keypad-inner{height:100%;position:relative;z-index:2}.micromag-screen-keypad-layout{-ms-flex-align:center;-ms-flex-pack:start;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;justify-content:flex-start;text-align:center;-webkit-transition:padding .2s ease-out;-o-transition:padding .2s ease-out;transition:padding .2s ease-out}.micromag-screen-keypad-emptyText,.micromag-screen-keypad-emptyTitle{margin:10px auto;width:100%}.micromag-screen-keypad-emptyTitle{height:100px}.micromag-screen-keypad-emptyText{height:50px}.micromag-screen-keypad-grid{width:85%}.micromag-screen-keypad-item{height:100%;position:relative}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-item{height:0;padding-bottom:100%}.micromag-screen-keypad-placeholderItem{height:0;padding-bottom:60%}.micromag-screen-keypad-withSquareItems .micromag-screen-keypad-placeholderItem{padding-bottom:100%}.micromag-screen-keypad-button{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-weight:inherit;height:100%;justify-content:center;overflow:hidden;padding:0;position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-button:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-keypad-button:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{padding:2px;pointer-events:none}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty{cursor:default}.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:active,.micromag-screen-keypad-button.micromag-screen-keypad-disableHover:hover,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:active,.micromag-screen-keypad-button.micromag-screen-keypad-isEmpty:hover{-webkit-transform:none;-ms-transform:none;transform:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink{text-decoration:none}.micromag-screen-keypad-button.micromag-screen-keypad-isLink:hover{color:inherit}.micromag-screen-keypad-button .micromag-screen-keypad-buttonPlaceholder,.micromag-screen-keypad-button .micromag-screen-keypad-imagePlaceholder{margin:0;width:100%}.micromag-screen-keypad-buttonVisualPlaceholder{width:100%}.micromag-screen-keypad-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-keypad-buttonLabel{padding:5px;width:100%}.micromag-screen-keypad-empty{margin-bottom:10px;padding:10px;width:100%}.micromag-screen-keypad-emptyButtonVisual{margin-bottom:5px;padding:10px 5px}.micromag-screen-keypad-emptyButtonLabel{margin-bottom:5px;padding:2px 5px}.micromag-screen-keypad-popupBackdrop{-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(0,0,0,.2);pointer-events:none}.micromag-screen-keypad-popup{height:100%;position:fixed;right:0;top:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-popup:active,.micromag-screen-keypad-popup:hover{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupButton{height:100%;position:relative;text-align:left;-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67),-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);width:100%}.micromag-screen-keypad-popupButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-keypad-popupScroll{height:100%;width:100%}.micromag-screen-keypad-popupInner{background-color:#1c1c1c;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;margin:10% 7.5%;overflow:hidden;position:relative;z-index:40}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent{font-family:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.micromag-screen-keypad-popupInner .micromag-screen-keypad-popupContent p{font-weight:inherit;margin-bottom:0;margin-top:0}.micromag-screen-keypad-popupWrapper{-ms-flex-align:start;-ms-flex-pack:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:flex-start;margin-bottom:-.5em}.micromag-screen-keypad-placeholder{mix-blend-mode:normal}.micromag-screen-keypad-popupContent,.micromag-screen-keypad-popupHeading,.micromag-screen-keypad-popupVisual{-ms-flex-positive:1;-ms-flex-negative:0;flex-grow:1;flex-shrink:0;margin-bottom:.5em;width:100%}.micromag-screen-keypad-popupWrapper .micromag-screen-keypad-popupHeading{font-weight:inherit;margin-bottom:.25em}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupHeading{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentSplit .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentSplit .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyVisual,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupVisual{-ms-flex-order:1;order:1}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyHeading,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupHeading{-ms-flex-order:2;order:2}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyContent,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupContent{-ms-flex-order:3;order:3}.micromag-screen-keypad-contentBottom .micromag-screen-keypad-emptyCTA,.micromag-screen-keypad-contentBottom .micromag-screen-keypad-popupCTA{-ms-flex-order:4;order:4}.micromag-screen-keypad-popupCTA{margin:0 auto;z-index:2}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonLabel{-ms-flex-order:1;order:1}.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelTop .micromag-screen-keypad-emptyButtonVisual{-ms-flex-order:2;order:2}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonLabel{display:none}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-emptyButtonVisual{height:100%;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-thumbnail,.micromag-screen-keypad-layoutNoLabel .micromag-screen-keypad-thumbnail{max-height:none;-o-object-fit:cover;object-fit:cover;width:100%!important}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonVisual,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonVisual{z-index:1}.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-buttonLabel,.micromag-screen-keypad-layoutLabelOver .micromag-screen-keypad-emptyButtonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:-o-linear-gradient(top,rgba(28,28,28,0),rgba(28,28,28,.75));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}

package/es/index.js

@@ -6,13 +6,13 @@ import { animated } from '@react-spring/web';
 import camelCase from 'camelcase';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { PlaceholderImage, PlaceholderText, ScreenElement, PlaceholderButton } from '@micromag/core/components';
-import { usePlaybackContext, usePlaybackMediaRef, useScreenState, useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext } from '@micromag/core/contexts';
+import { ScreenElement, PlaceholderButton } 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, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
-import Background, { Background as Background$1 } from '@micromag/element-background';
+import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
 import CallToAction from '@micromag/element-call-to-action';
 import Container from '@micromag/element-container';
@@ -25,7 +25,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"popupButton":"micromag-screen-keypad-popupButton","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","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","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","contentBottom":"micromag-screen-keypad-contentBottom","popupCTA":"micromag-screen-keypad-popupCTA","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
+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","popupWrapper":"micromag-screen-keypad-popupWrapper","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'
@@ -96,6 +96,7 @@ var propTypes = {
     visual: PropTypes$1.visualElement,
     boxStyle: PropTypes$1.boxStyle
   })),
+  title: PropTypes$1.headingElement,
   layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
   spacing: PropTypes.number,
   keypadSettings: PropTypes.shape({
@@ -126,6 +127,7 @@ var propTypes = {
 };
 var defaultProps = {
   items: null,
+  title: null,
   layout: null,
   spacing: 20,
   keypadSettings: null,
@@ -141,6 +143,7 @@ var defaultProps = {
 var KeypadScreen = function KeypadScreen(_ref) {
   var _ref18;
   var items = _ref.items,
+    title = _ref.title,
     layout = _ref.layout,
     spacing = _ref.spacing,
     keypadSettings = _ref.keypadSettings,
@@ -152,6 +155,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
     current = _ref.current,
     active = _ref.active,
     className = _ref.className;
+  var containerRef = useRef(null);
+  var popupInnerRef = useRef(null);
   var trackScreenEvent = useTrackScreenEvent('keypad');
   var _usePlaybackContext = usePlaybackContext(),
     muted = _usePlaybackContext.muted;
@@ -167,6 +172,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
     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,
@@ -180,6 +188,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
     openWebView: openWebView,
     isPreview: isPreview
   });
+  var hasTitle = isTextFilled(title);
+  var _ref2 = title || {},
+    _ref2$textStyle = _ref2.textStyle,
+    titleTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle;
   var _useDimensionObserver = useDimensionObserver(),
     headerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
@@ -191,36 +203,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || active);
   var isInteractivePreview = isEdit && screenState === null;
-  var _ref2 = keypadSettings || {},
-    _ref2$layout = _ref2.layout,
-    keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
-  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$boxStyle = _ref4.boxStyle,
-    buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
-  var _ref5 = popupStyles || {},
+  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,
-    popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$backdrop = _ref5.backdrop,
-    popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
-    _ref5$headingTextStyl = _ref5.headingTextStyle,
-    headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
-    _ref5$contentTextStyl = _ref5.contentTextStyle,
-    contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
+    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
+    _ref5$textStyle = _ref5.textStyle,
+    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
     _ref5$boxStyle = _ref5.boxStyle,
-    popupBoxStyle = _ref5$boxStyle === void 0 ? null : _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$boxStyle = _ref6.boxStyle,
+    popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
   var popupLayoutClassName = useMemo(function () {
     return popupLayout !== null ? camelCase(popupLayout) : '';
   }, [popupLayout]);
@@ -232,28 +242,23 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     popup = _useState4[0],
     setPopup = _useState4[1];
-  var _ref6 = popup || {},
-    _ref6$heading = _ref6.heading,
-    popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
-    _ref6$content = _ref6.content,
-    popupContent = _ref6$content === void 0 ? null : _ref6$content,
-    _ref6$largeVisual = _ref6.largeVisual,
-    largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
-    _ref6$button = _ref6.button,
-    popupButton = _ref6$button === void 0 ? null : _ref6$button;
+  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;
   var hasPopupHeading = isTextFilled(popupHeading);
-  var _ref7 = popupHeading || {},
-    _ref7$textStyle = _ref7.textStyle,
-    popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
-  var hasPopupContent = isTextFilled(popupContent);
-  var _ref8 = popupContent || {},
+  var _ref8 = popupHeading || {},
     _ref8$textStyle = _ref8.textStyle,
-    popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
-  var _ref9 = popupBackdrop || {},
-    _ref9$color = _ref9.color,
-    backdropColor = _ref9$color === void 0 ? null : _ref9$color,
-    _ref9$image = _ref9.image,
-    backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
+    popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
+  var hasPopupContent = isTextFilled(popupContent);
+  var _ref9 = popupContent || {},
+    _ref9$textStyle = _ref9.textStyle,
+    popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
   var _ref10 = popupButton || {},
     _ref10$label = _ref10.label,
     buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
@@ -264,26 +269,29 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _ref10$boxStyle = _ref10.boxStyle,
     popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
   var onItemClick = useCallback(function (e, item) {
+    e.stopPropagation();
+    trackScreenEvent('click_item', item);
     var _ref11 = item || {},
       _ref11$inWebView = _ref11.inWebView,
       inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
       _ref11$url = _ref11.url,
       url = _ref11$url === void 0 ? null : _ref11$url;
-    e.stopPropagation();
-    trackScreenEvent('click_item', item);
     if (inWebView && url !== null) {
       openWebView({
         url: url
       });
       return;
     }
+    // disableInteraction();
     setPopup(item);
     setShowPopup(1);
-  }, [setPopup, trackScreenEvent]);
+  }, [disableInteraction, setPopup, trackScreenEvent]);
   var onCloseModal = useCallback(function () {
+    // enableInteraction();
+
     setShowPopup(0);
     trackScreenEvent('close_modal');
-  }, [setShowPopup]);
+  }, [enableInteraction, setShowPopup, trackScreenEvent]);
   var computePopupProgress = useCallback(function (_ref12) {
     var dragActive = _ref12.active,
       _ref12$movement = _slicedToArray(_ref12.movement, 2),
@@ -302,6 +310,24 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }
     return 1 - progress;
   }, [onCloseModal]);
+  useEffect(function () {
+    if (showPopup !== 0) {
+      disableInteraction();
+    } else {
+      enableInteraction();
+    }
+  }, [showPopup]);
+  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 !== 0) {
+        onCloseModal();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
   var _useDragProgress = useDragProgress({
       disabled: !isView,
       progress: showPopup ? 1 : 0,
@@ -373,14 +399,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
         style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromText(buttonTextStyle)), getStyleFromBox(boxStyle)), getStyleFromText(textStyle)),
         external: isExternalLink,
         href: isExternalLink ? url : null,
-        onClick: !isPopupEmpty || !isExternalLink ? function (e) {
+        onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
           return onItemClick(e, item);
         } : null
-      }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PlaceholderImage, {
-        className: styles.imagePlaceholder
-      }), /*#__PURE__*/React.createElement(PlaceholderText, {
-        lines: 2
-      })) : /*#__PURE__*/React.createElement(React.Fragment, null, visual !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ScreenElement, {
         emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
           id: "Qanvis",
           defaultMessage: [{
@@ -390,12 +412,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
         isEmpty: visual === null
-      }, /*#__PURE__*/React.createElement(Visual, {
+      }, visual !== null ?
+      /*#__PURE__*/
+      // || !isInteractivePreview
+      React.createElement(Visual, {
         className: styles.buttonVisual,
         imageClassName: styles.thumbnail,
         media: visual,
         width: "auto"
-      })) : null, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement(ScreenElement, {
+      }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
         placeholder: /*#__PURE__*/React.createElement(PlaceholderButton, null),
         emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
           id: "Zbu5Uk",
@@ -406,9 +431,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames([styles.empty, styles.emptyButtonLabel]),
         isEmpty: label === null
-      }, /*#__PURE__*/React.createElement("div", {
+      }, label !== null || !isInteractivePreview ? /*#__PURE__*/React.createElement("div", {
         className: styles.buttonLabel
-      }, label)) : null)));
+      }, label) : null))));
     });
   }, [items, screenState, keypadSettings]);
   useEffect(function () {
@@ -432,6 +457,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }
   }, [screenState, items]);
   return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
     className: classNames([styles.container, (_ref18 = {}, _defineProperty(_ref18, className, className !== null), _defineProperty(_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
     "data-screen-ready": true
   }, isEdit && screenState !== null ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
@@ -452,10 +478,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
     width: width,
     height: height,
     verticalAlign: layout,
-    disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
+    disabled: isPreview || isPlaceholder || showPopup !== 0
   }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     verticalAlign: layout,
+    width: width,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
@@ -471,7 +498,22 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing,
       transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(Keypad$1, {
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    placeholder: "Title",
+    emptyLabel: /*#__PURE__*/React.createElement(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: _objectSpread(_objectSpread({}, headingTextStyle), getStyleFromText(titleTextStyle))
+  })) : null), /*#__PURE__*/React.createElement(Keypad$1, {
     className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
     align: columnAlign,
     columns: isPlaceholder ? 3 : columns,
@@ -487,22 +529,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: spacing
     }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), /*#__PURE__*/React.createElement(animated.div, {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
     className: classNames([styles.popupBackdrop]),
     style: {
       opacity: popupSpring.to(function (p) {
         return p;
       })
     }
-  }, /*#__PURE__*/React.createElement(Background$1, {
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    media: backdropMedia,
-    color: backdropColor,
-    muted: true
-  })), /*#__PURE__*/React.createElement(animated.div, Object.assign({
+  }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
     className: styles.popup,
     style: {
       transform: popupSpring.to(function (p) {
@@ -512,27 +546,19 @@ var KeypadScreen = function KeypadScreen(_ref) {
         return p < 0.1 ? 'none' : 'auto';
       })
     }
-  }, bindPopupDrag(), {
-    onClick: function onClick() {
-      if (onCloseModal !== null) {
-        onCloseModal();
-      }
-    }
-  }), /*#__PURE__*/React.createElement(Scroll, {
-    disabled: isPreview || isPlaceholder || isEdit,
+  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
+    disabled: isPreview || isPlaceholder || showPopup === 0,
     verticalAlign: "middle",
     withArrow: false,
+    className: styles.popupScroll,
     withShadow: true
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: styles.popupButton
   }, /*#__PURE__*/React.createElement("div", {
+    ref: popupInnerRef,
     className: classNames([styles.popupInner, styles[popupLayoutClassName]]),
     style: _objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle))
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.popupWrapper
   }, /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "popupHeading",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "IE7U/Q",
       defaultMessage: [{
@@ -561,7 +587,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     className: styles.popupContent
   }, popupContent, {
     textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
-  })) : null), largeVisual !== null ? /*#__PURE__*/React.createElement(ScreenElement, {
+  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "image",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "z4Pr+g",
@@ -572,11 +598,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }),
     emptyClassName: classNames([styles.empty, styles.emptyVisual]),
     isEmpty: largeVisual === null
-  }, /*#__PURE__*/React.createElement(Visual, {
+  }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
     className: styles.popupVisual,
     media: largeVisual,
     width: "100%"
-  })) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     placeholder: "button",
     emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
       id: "N7Kj8z",
@@ -585,7 +611,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
         "value": "Button"
       }]
     }),
-    emptyClassName: classNames([styles.empty]),
+    emptyClassName: classNames([styles.empty, styles.emptyCTA]),
     isEmpty: popupButton === null
   }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
     className: styles.popupCTA,
@@ -596,7 +622,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     type: "click",
     boxStyle: popupButtonBoxStyle,
     style: _objectSpread({}, getStyleFromBox(popupButtonBoxStyle))
-  }) : null)))))))));
+  }) : null)))))) : null)));
 };
 KeypadScreen.propTypes = propTypes;
 KeypadScreen.defaultProps = defaultProps;
@@ -787,16 +813,6 @@ var definition = [{
             "value": "Box style"
           }]
         })
-      }, {
-        name: 'backdrop',
-        type: 'background',
-        label: defineMessage({
-          id: "cDj1mZ",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Background"
-          }]
-        })
       }]
     }]
   }, {
@@ -854,6 +870,19 @@ var definition = [{
     }]
   }],
   fields: [{
+    name: 'title',
+    type: 'heading-element',
+    theme: {
+      textStyle: 'heading1'
+    },
+    label: defineMessage({
+      id: "N25iDO",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    })
+  }, {
     name: 'background',
     type: 'background',
     label: defineMessage({

package/lib/index.js

@@ -51,7 +51,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 
-var styles = {"popupButton":"micromag-screen-keypad-popupButton","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","popup":"micromag-screen-keypad-popup","popupInner":"micromag-screen-keypad-popupInner","popupContent":"micromag-screen-keypad-popupContent","popupWrapper":"micromag-screen-keypad-popupWrapper","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","contentBottom":"micromag-screen-keypad-contentBottom","popupCTA":"micromag-screen-keypad-popupCTA","layoutLabelTop":"micromag-screen-keypad-layoutLabelTop","buttonVisual":"micromag-screen-keypad-buttonVisual"};
+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","popupWrapper":"micromag-screen-keypad-popupWrapper","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'
@@ -122,6 +122,7 @@ var propTypes = {
     visual: core.PropTypes.visualElement,
     boxStyle: core.PropTypes.boxStyle
   })),
+  title: core.PropTypes.headingElement,
   layout: PropTypes__default["default"].oneOf(['top', 'middle', 'bottom']),
   spacing: PropTypes__default["default"].number,
   keypadSettings: PropTypes__default["default"].shape({
@@ -152,6 +153,7 @@ var propTypes = {
 };
 var defaultProps = {
   items: null,
+  title: null,
   layout: null,
   spacing: 20,
   keypadSettings: null,
@@ -167,6 +169,7 @@ var defaultProps = {
 var KeypadScreen = function KeypadScreen(_ref) {
   var _ref18;
   var items = _ref.items,
+    title = _ref.title,
     layout = _ref.layout,
     spacing = _ref.spacing,
     keypadSettings = _ref.keypadSettings,
@@ -178,6 +181,8 @@ var KeypadScreen = function KeypadScreen(_ref) {
     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;
@@ -193,6 +198,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
     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,
@@ -206,6 +214,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
     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,
@@ -217,36 +229,34 @@ var KeypadScreen = function KeypadScreen(_ref) {
   var backgroundPlaying = current && (isView || isEdit);
   var mediaShouldLoad = !isPlaceholder && (current || active);
   var isInteractivePreview = isEdit && screenState === null;
-  var _ref2 = keypadSettings || {},
-    _ref2$layout = _ref2.layout,
-    keypadLayout = _ref2$layout === void 0 ? null : _ref2$layout;
-  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$boxStyle = _ref4.boxStyle,
-    buttonBoxStyle = _ref4$boxStyle === void 0 ? null : _ref4$boxStyle;
-  var _ref5 = popupStyles || {},
+  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,
-    popupLayout = _ref5$layout === void 0 ? null : _ref5$layout,
-    _ref5$backdrop = _ref5.backdrop,
-    popupBackdrop = _ref5$backdrop === void 0 ? null : _ref5$backdrop,
-    _ref5$headingTextStyl = _ref5.headingTextStyle,
-    headingTextStyle = _ref5$headingTextStyl === void 0 ? null : _ref5$headingTextStyl,
-    _ref5$contentTextStyl = _ref5.contentTextStyle,
-    contentTextStyle = _ref5$contentTextStyl === void 0 ? null : _ref5$contentTextStyl,
+    buttonLayout = _ref5$layout === void 0 ? null : _ref5$layout,
+    _ref5$textStyle = _ref5.textStyle,
+    buttonTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
     _ref5$boxStyle = _ref5.boxStyle,
-    popupBoxStyle = _ref5$boxStyle === void 0 ? null : _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$boxStyle = _ref6.boxStyle,
+    popupBoxStyle = _ref6$boxStyle === void 0 ? null : _ref6$boxStyle;
   var popupLayoutClassName = React.useMemo(function () {
     return popupLayout !== null ? camelCase__default["default"](popupLayout) : '';
   }, [popupLayout]);
@@ -258,28 +268,23 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
     popup = _useState4[0],
     setPopup = _useState4[1];
-  var _ref6 = popup || {},
-    _ref6$heading = _ref6.heading,
-    popupHeading = _ref6$heading === void 0 ? null : _ref6$heading,
-    _ref6$content = _ref6.content,
-    popupContent = _ref6$content === void 0 ? null : _ref6$content,
-    _ref6$largeVisual = _ref6.largeVisual,
-    largeVisual = _ref6$largeVisual === void 0 ? null : _ref6$largeVisual,
-    _ref6$button = _ref6.button,
-    popupButton = _ref6$button === void 0 ? null : _ref6$button;
+  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;
   var hasPopupHeading = utils.isTextFilled(popupHeading);
-  var _ref7 = popupHeading || {},
-    _ref7$textStyle = _ref7.textStyle,
-    popupHeadingTextStyle = _ref7$textStyle === void 0 ? null : _ref7$textStyle;
-  var hasPopupContent = utils.isTextFilled(popupContent);
-  var _ref8 = popupContent || {},
+  var _ref8 = popupHeading || {},
     _ref8$textStyle = _ref8.textStyle,
-    popupContentTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
-  var _ref9 = popupBackdrop || {},
-    _ref9$color = _ref9.color,
-    backdropColor = _ref9$color === void 0 ? null : _ref9$color,
-    _ref9$image = _ref9.image,
-    backdropMedia = _ref9$image === void 0 ? null : _ref9$image;
+    popupHeadingTextStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
+  var hasPopupContent = utils.isTextFilled(popupContent);
+  var _ref9 = popupContent || {},
+    _ref9$textStyle = _ref9.textStyle,
+    popupContentTextStyle = _ref9$textStyle === void 0 ? null : _ref9$textStyle;
   var _ref10 = popupButton || {},
     _ref10$label = _ref10.label,
     buttonLabel = _ref10$label === void 0 ? null : _ref10$label,
@@ -290,26 +295,29 @@ var KeypadScreen = function KeypadScreen(_ref) {
     _ref10$boxStyle = _ref10.boxStyle,
     popupButtonBoxStyle = _ref10$boxStyle === void 0 ? null : _ref10$boxStyle;
   var onItemClick = React.useCallback(function (e, item) {
+    e.stopPropagation();
+    trackScreenEvent('click_item', item);
     var _ref11 = item || {},
       _ref11$inWebView = _ref11.inWebView,
       inWebView = _ref11$inWebView === void 0 ? false : _ref11$inWebView,
       _ref11$url = _ref11.url,
       url = _ref11$url === void 0 ? null : _ref11$url;
-    e.stopPropagation();
-    trackScreenEvent('click_item', item);
     if (inWebView && url !== null) {
       openWebView({
         url: url
       });
       return;
     }
+    // disableInteraction();
     setPopup(item);
     setShowPopup(1);
-  }, [setPopup, trackScreenEvent]);
+  }, [disableInteraction, setPopup, trackScreenEvent]);
   var onCloseModal = React.useCallback(function () {
+    // enableInteraction();
+
     setShowPopup(0);
     trackScreenEvent('close_modal');
-  }, [setShowPopup]);
+  }, [enableInteraction, setShowPopup, trackScreenEvent]);
   var computePopupProgress = React.useCallback(function (_ref12) {
     var dragActive = _ref12.active,
       _ref12$movement = _slicedToArray__default["default"](_ref12.movement, 2),
@@ -328,6 +336,24 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }
     return 1 - progress;
   }, [onCloseModal]);
+  React.useEffect(function () {
+    if (showPopup !== 0) {
+      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 !== 0) {
+        onCloseModal();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup]);
   var _useDragProgress = hooks.useDragProgress({
       disabled: !isView,
       progress: showPopup ? 1 : 0,
@@ -399,14 +425,10 @@ var KeypadScreen = function KeypadScreen(_ref) {
         style: _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(buttonBoxStyle)), utils.getStyleFromText(buttonTextStyle)), utils.getStyleFromBox(boxStyle)), utils.getStyleFromText(textStyle)),
         external: isExternalLink,
         href: isExternalLink ? url : null,
-        onClick: !isPopupEmpty || !isExternalLink ? function (e) {
+        onClick: !isPopupEmpty || url !== null && !isExternalLink ? function (e) {
           return onItemClick(e, item);
         } : null
-      }, isEmpty && (isInteractivePreview || isPreview) ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.PlaceholderImage, {
-        className: styles.imagePlaceholder
-      }), /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
-        lines: 2
-      })) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, visual !== null || !isInteractivePreview ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
         emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
           id: "Qanvis",
           defaultMessage: [{
@@ -416,12 +438,15 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames__default["default"]([styles.empty, styles.buttonVisual, styles.emptyButtonVisual]),
         isEmpty: visual === null
-      }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
+      }, visual !== null ?
+      /*#__PURE__*/
+      // || !isInteractivePreview
+      React__default["default"].createElement(Visual__default["default"], {
         className: styles.buttonVisual,
         imageClassName: styles.thumbnail,
         media: visual,
         width: "auto"
-      })) : null, label !== null || !isInteractivePreview ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+      }) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
         placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderButton, null),
         emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
           id: "Zbu5Uk",
@@ -432,9 +457,9 @@ var KeypadScreen = function KeypadScreen(_ref) {
         }),
         emptyClassName: classNames__default["default"]([styles.empty, styles.emptyButtonLabel]),
         isEmpty: label === null
-      }, /*#__PURE__*/React__default["default"].createElement("div", {
+      }, label !== null || !isInteractivePreview ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: styles.buttonLabel
-      }, label)) : null)));
+      }, label) : null))));
     });
   }, [items, screenState, keypadSettings]);
   React.useEffect(function () {
@@ -458,6 +483,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }
   }, [screenState, items]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: containerRef,
     className: classNames__default["default"]([styles.container, (_ref18 = {}, _defineProperty__default["default"](_ref18, className, className !== null), _defineProperty__default["default"](_ref18, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref18, styles.withSquareItems, withSquareItems), _ref18)]),
     "data-screen-ready": true
   }, isEdit && screenState !== null ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
@@ -478,10 +504,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
     width: width,
     height: height,
     verticalAlign: layout,
-    disabled: isPreview || isPlaceholder || isEdit || showPopup !== 0
+    disabled: isPreview || isPlaceholder || showPopup !== 0
   }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
     className: styles.layout,
     verticalAlign: layout,
+    width: width,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
@@ -497,7 +524,22 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing,
       transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
+  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+    placeholder: "Title",
+    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "BSTWf8",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Title"
+      }]
+    }),
+    emptyClassName: classNames__default["default"]([styles.empty, styles.emptyHeading]),
+    isEmpty: !hasTitle
+  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+    className: styles.title
+  }, title, {
+    textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, headingTextStyle), utils.getStyleFromText(titleTextStyle))
+  })) : null), /*#__PURE__*/React__default["default"].createElement(Keypad__default["default"], {
     className: classNames__default["default"]([styles.grid, _defineProperty__default["default"]({}, styles.gridPlaceholder, isPlaceholder)]),
     align: columnAlign,
     columns: isPlaceholder ? 3 : columns,
@@ -513,22 +555,14 @@ var KeypadScreen = function KeypadScreen(_ref) {
       paddingBottom: spacing / 2,
       paddingTop: spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null), popup !== null ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: classNames__default["default"]([styles.popupBackdrop]),
     style: {
       opacity: popupSpring.to(function (p) {
         return p;
       })
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Background.Background, {
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    media: backdropMedia,
-    color: backdropColor,
-    muted: true
-  })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
+  }), /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
     className: styles.popup,
     style: {
       transform: popupSpring.to(function (p) {
@@ -538,27 +572,19 @@ var KeypadScreen = function KeypadScreen(_ref) {
         return p < 0.1 ? 'none' : 'auto';
       })
     }
-  }, bindPopupDrag(), {
-    onClick: function onClick() {
-      if (onCloseModal !== null) {
-        onCloseModal();
-      }
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
-    disabled: isPreview || isPlaceholder || isEdit,
+  }, bindPopupDrag()), /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
+    disabled: isPreview || isPlaceholder || showPopup === 0,
     verticalAlign: "middle",
     withArrow: false,
+    className: styles.popupScroll,
     withShadow: true
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
-    type: "button",
-    className: styles.popupButton
   }, /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: popupInnerRef,
     className: classNames__default["default"]([styles.popupInner, styles[popupLayoutClassName]]),
     style: _objectSpread__default["default"](_objectSpread__default["default"]({}, utils.getStyleFromBox(placeholderPopupBoxStyles)), utils.getStyleFromBox(popupBoxStyle))
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles.popupWrapper
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
-    placeholder: "popupHeading",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "IE7U/Q",
       defaultMessage: [{
@@ -587,7 +613,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     className: styles.popupContent
   }, popupContent, {
     textStyle: _objectSpread__default["default"](_objectSpread__default["default"]({}, contentTextStyle), popupContentTextStyle)
-  })) : null), largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  })) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     placeholder: "image",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "z4Pr+g",
@@ -598,11 +624,11 @@ var KeypadScreen = function KeypadScreen(_ref) {
     }),
     emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
     isEmpty: largeVisual === null
-  }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
+  }, largeVisual !== null ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
     className: styles.popupVisual,
     media: largeVisual,
     width: "100%"
-  })) : null, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  }) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     placeholder: "button",
     emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
       id: "N7Kj8z",
@@ -611,7 +637,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
         "value": "Button"
       }]
     }),
-    emptyClassName: classNames__default["default"]([styles.empty]),
+    emptyClassName: classNames__default["default"]([styles.empty, styles.emptyCTA]),
     isEmpty: popupButton === null
   }, popupButton !== null ? /*#__PURE__*/React__default["default"].createElement(CallToAction__default["default"], {
     className: styles.popupCTA,
@@ -622,7 +648,7 @@ var KeypadScreen = function KeypadScreen(_ref) {
     type: "click",
     boxStyle: popupButtonBoxStyle,
     style: _objectSpread__default["default"]({}, utils.getStyleFromBox(popupButtonBoxStyle))
-  }) : null)))))))));
+  }) : null)))))) : null)));
 };
 KeypadScreen.propTypes = propTypes;
 KeypadScreen.defaultProps = defaultProps;
@@ -813,16 +839,6 @@ var definition = [{
             "value": "Box style"
           }]
         })
-      }, {
-        name: 'backdrop',
-        type: 'background',
-        label: reactIntl.defineMessage({
-          id: "cDj1mZ",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Background"
-          }]
-        })
       }]
     }]
   }, {
@@ -880,6 +896,19 @@ var definition = [{
     }]
   }],
   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({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.3.362",
+    "version": "0.3.369",
     "description": "",
     "keywords": [
         "javascript"
@@ -54,22 +54,22 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.362",
-        "@micromag/element-background": "^0.3.362",
-        "@micromag/element-button": "^0.3.362",
-        "@micromag/element-call-to-action": "^0.3.362",
-        "@micromag/element-container": "^0.3.362",
-        "@micromag/element-footer": "^0.3.362",
-        "@micromag/element-grid": "^0.3.362",
-        "@micromag/element-header": "^0.3.362",
-        "@micromag/element-heading": "^0.3.362",
-        "@micromag/element-keypad": "^0.3.362",
-        "@micromag/element-layout": "^0.3.362",
-        "@micromag/element-scroll": "^0.3.362",
-        "@micromag/element-text": "^0.3.362",
-        "@micromag/element-urbania-author": "^0.3.362",
-        "@micromag/element-visual": "^0.3.362",
-        "@micromag/transforms": "^0.3.362",
+        "@micromag/core": "^0.3.369",
+        "@micromag/element-background": "^0.3.369",
+        "@micromag/element-button": "^0.3.369",
+        "@micromag/element-call-to-action": "^0.3.369",
+        "@micromag/element-container": "^0.3.369",
+        "@micromag/element-footer": "^0.3.369",
+        "@micromag/element-grid": "^0.3.369",
+        "@micromag/element-header": "^0.3.369",
+        "@micromag/element-heading": "^0.3.369",
+        "@micromag/element-keypad": "^0.3.369",
+        "@micromag/element-layout": "^0.3.369",
+        "@micromag/element-scroll": "^0.3.369",
+        "@micromag/element-text": "^0.3.369",
+        "@micromag/element-urbania-author": "^0.3.369",
+        "@micromag/element-visual": "^0.3.369",
+        "@micromag/transforms": "^0.3.369",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.2.4",
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
+    "gitHead": "55706624c2879ead4acff84015ad51df2b7d293b"
 }