@micromag/screen-keypad 0.4.49 → 0.4.50

package/es/index.js

@@ -6,7 +6,7 @@ import { animated } from '@react-spring/web';
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 import isString from 'lodash/isString';
-import React, { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { useRef, useMemo, useState, useCallback, 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';
@@ -23,6 +23,7 @@ import Layout from '@micromag/element-layout';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
+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"};
 
@@ -425,31 +426,31 @@ function KeypadScreen(_ref) {
       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__*/React.createElement("div", {
-        key: key,
-        className: styles.item
-      }, /*#__PURE__*/React.createElement(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
-      }));
+      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 () {
@@ -472,206 +473,227 @@ function KeypadScreen(_ref) {
       setShowPopup(false);
     }
   }, [screenState, items, isView, showPopup, setPopup, setShowPopup]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     ref: containerRef,
     className: classNames([styles.container, className, _defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.withSquareItems, withSquareItems)]),
-    "data-screen-ready": true
-  }, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
-    background: background,
-    width: width,
-    height: height,
-    resolution: resolution,
-    playing: backgroundPlaying,
-    muted: muted,
-    shouldLoad: mediaShouldLoad,
-    mediaRef: mediaRef,
-    className: styles.background
-  }) : null, isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles.fixedHeader, _defineProperty({}, styles.open, showPopup)])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.buttons
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: styles.close,
-    onClick: onClickClose,
-    focusable: !isPreview && !isPlaceholder && showPopup,
-    withoutStyle: true
-  }, /*#__PURE__*/React.createElement(Close, {
-    color: "#000",
-    className: styles.closeIcon
-  })))) : null, /*#__PURE__*/React.createElement(Container, {
-    width: width,
-    height: height,
-    className: styles.inner
-  }, /*#__PURE__*/React.createElement(Scroll, {
-    width: width,
-    height: height,
-    verticalAlign: layout,
-    withArrow: !showPopup,
-    withShadow: !showPopup,
-    disabled: isPreview || isPlaceholder || showPopup,
-    onScrolledTrigger: onScrolledTrigger
-  }, /*#__PURE__*/React.createElement(Layout, {
-    className: styles.layout,
-    verticalAlign: layout,
-    width: width,
-    style: !isPlaceholder ? {
-      padding: spacing,
-      paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
-      paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
-    } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
-    ref: headerRef,
-    className: styles.header,
-    style: {
-      paddingTop: spacing / 2,
-      paddingLeft: spacing,
-      paddingRight: spacing,
-      paddingBottom: spacing,
-      transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-    }
-  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(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: titleTextStyle
-  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "Subtitle",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "ZG8/oK",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-    isEmpty: !hasSubtitle
-  }, hasSubtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.subtitle
-  }, subtitle)) : null), /*#__PURE__*/React.createElement(Keypad, {
-    className: classNames([styles.grid, _defineProperty({}, styles.gridPlaceholder, isPlaceholder)]),
-    align: columnAlign,
-    columns: isPlaceholder ? 3 : columns,
-    spacing: isPlaceholder ? 2 : columnSpacing,
-    items: gridItems
-  })), popup !== null ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles.popupBackdrop]),
-    style: {
-      opacity: popupSpring.to(function (p) {
-        return 1 - Math.abs(p);
-      })
-    }
-  }), /*#__PURE__*/React.createElement(animated.div, Object.assign({
-    className: styles.popup,
-    style: {
-      transform: popupSpring.to(function (p) {
-        return "translateY(".concat(100 * p, "%) scale(").concat(1 - Math.abs(p * 0.5), ")");
-      }),
-      pointerEvents: popupSpring.to(function (p) {
-        return Math.abs(p) > 0.5 ? 'none' : 'auto';
+    "data-screen-ready": true,
+    children: [!isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      background: background,
+      width: width,
+      height: height,
+      resolution: resolution,
+      playing: backgroundPlaying,
+      muted: muted,
+      shouldLoad: mediaShouldLoad,
+      mediaRef: mediaRef,
+      className: styles.background
+    }) : null, isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
+      className: classNames([styles.fixedHeader, _defineProperty({}, styles.open, showPopup)]),
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.buttons,
+        children: /*#__PURE__*/jsx(Button, {
+          className: styles.close,
+          onClick: onClickClose,
+          focusable: !isPreview && !isPlaceholder && showPopup,
+          withoutStyle: true,
+          children: /*#__PURE__*/jsx(Close, {
+            color: "#000",
+            className: styles.closeIcon
+          })
+        })
       })
-    }
-  }, bindPopupDrag()), /*#__PURE__*/React.createElement(Scroll, {
-    disabled: isPreview || isPlaceholder,
-    verticalAlign: "middle",
-    withArrow: false,
-    scrollPosition: !showPopup ? 1 : null,
-    onScrolledBottom: onPopupScrollBottom,
-    onScrolledNotBottom: onPopupScrollNotBottom,
-    onScrollHeightChange: onPopupScrollHeightChange,
-    className: styles.popupScroll,
-    withShadow: true
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: popupInnerRef,
-    className: classNames([styles.popupInner, styles[popupLayoutClassName], _defineProperty({}, styles.withShadow, popupBoxStyle === null)]),
-    style: _objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(placeholderPopupBoxStyles)), getStyleFromBox(popupBoxStyle)), getStyleFromBox(singlePopupBoxStyle))
-  }, /*#__PURE__*/React.createElement(ScreenElement, {
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "IE7U/Q",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Heading"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyHeading]),
-    isEmpty: !hasPopupHeading
-  }, hasPopupHeading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
-    className: styles.popupHeading
-  }, popupHeading, {
-    textStyle: _objectSpread(_objectSpread({}, headingTextStyle), popupHeadingTextStyle)
-  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "popupContent",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "JRZoe6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Content"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyContent]),
-    isEmpty: !hasPopupContent
-  }, hasPopupContent ? /*#__PURE__*/React.createElement(Text, Object.assign({
-    className: styles.popupContent
-  }, popupContent, {
-    textStyle: _objectSpread(_objectSpread({}, contentTextStyle), popupContentTextStyle)
-  })) : null), /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "image",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "z4Pr+g",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Visual (Image or Video)"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyVisual]),
-    isEmpty: largeVisual === null
-  }, largeVisual !== null ? /*#__PURE__*/React.createElement(Visual, {
-    className: styles.popupVisual,
-    imageClassName: styles.popupVisualImage,
-    videoClassName: styles.popupVisualVideo,
-    media: largeVisual,
-    resolution: resolution,
-    width: "100%"
-  }) : null), /*#__PURE__*/React.createElement(ScreenElement, {
-    placeholder: "button",
-    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "N7Kj8z",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Button"
-      }]
-    }),
-    emptyClassName: classNames([styles.empty, styles.emptyCTA]),
-    isEmpty: popupButton === null
-  }, popupButton !== null ? /*#__PURE__*/React.createElement(CallToAction, {
-    className: styles.popupCTA,
-    label: _objectSpread(_objectSpread({}, popupButtonsTextStyle), buttonLabel),
-    url: buttonUrl,
-    onClick: onClickCta,
-    inWebView: popupInWebView,
-    openWebView: openWebView,
-    type: "click",
-    boxStyle: _objectSpread(_objectSpread({}, popupButtonsBoxStyle), popupButtonBoxStyle)
-  }) : null))))) : null), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
-    ref: footerRef,
-    className: styles.footer,
-    style: {
-      transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
-      paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
-      paddingBottom: spacing / 2,
-      paddingTop: spacing
-    }
-  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null));
+    }) : null, /*#__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 ? {
+            padding: 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
+          })]
+        }), popup !== null ? /*#__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,
+                    width: "100%"
+                  }) : 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
+                })]
+              })
+            })
+          }))]
+        }) : 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]
+    })]
+  });
 }
 
 var definition = [{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-keypad",
-    "version": "0.4.49",
+    "version": "0.4.50",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,22 +66,22 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.49",
-        "@micromag/element-background": "^0.4.49",
-        "@micromag/element-button": "^0.4.49",
-        "@micromag/element-call-to-action": "^0.4.49",
-        "@micromag/element-container": "^0.4.49",
-        "@micromag/element-footer": "^0.4.49",
-        "@micromag/element-grid": "^0.4.49",
-        "@micromag/element-header": "^0.4.49",
-        "@micromag/element-heading": "^0.4.49",
-        "@micromag/element-keypad": "^0.4.49",
-        "@micromag/element-layout": "^0.4.49",
-        "@micromag/element-scroll": "^0.4.49",
-        "@micromag/element-text": "^0.4.49",
-        "@micromag/element-urbania-author": "^0.4.49",
-        "@micromag/element-visual": "^0.4.49",
-        "@micromag/transforms": "^0.4.49",
+        "@micromag/core": "^0.4.50",
+        "@micromag/element-background": "^0.4.50",
+        "@micromag/element-button": "^0.4.50",
+        "@micromag/element-call-to-action": "^0.4.50",
+        "@micromag/element-container": "^0.4.50",
+        "@micromag/element-footer": "^0.4.50",
+        "@micromag/element-grid": "^0.4.50",
+        "@micromag/element-header": "^0.4.50",
+        "@micromag/element-heading": "^0.4.50",
+        "@micromag/element-keypad": "^0.4.50",
+        "@micromag/element-layout": "^0.4.50",
+        "@micromag/element-scroll": "^0.4.50",
+        "@micromag/element-text": "^0.4.50",
+        "@micromag/element-urbania-author": "^0.4.50",
+        "@micromag/element-visual": "^0.4.50",
+        "@micromag/transforms": "^0.4.50",
         "@react-spring/core": "^10.0.3",
         "@react-spring/web": "^10.0.3",
         "@use-gesture/react": "^10.3.0",
@@ -94,6 +94,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0a225ff29387217cccb0fcc5a731e23c74bd202e",
+    "gitHead": "940d5ca98f8f448b79eaa3e2fa685c3ee95185b8",
     "types": "es/index.d.ts"
 }