@micromag/screen-keypad 0.4.86 → 0.4.88

package/es/index.js

@@ -54,7 +54,7 @@ const placeholderPopupBoxStyles = {
   }
 };
 function KeypadScreen(t0) {
-  const $ = c(351);
+  const $ = c(350);
   const {
     items: t1,
     title: t2,
@@ -296,7 +296,7 @@ function KeypadScreen(t0) {
     isCurrent: t52
   } = usePlaybackMediaRef(current, video === null, video !== null ? "popup" : null);
   const isCurrentMedia = t52 === undefined ? false : t52;
-  const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
+  const videoPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView) && showPopup;
   const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   const mediaShouldLoad = !isPlaceholder && (current || preload);
   const isInteractivePreview = isEdit && screenState === null;
@@ -409,9 +409,9 @@ function KeypadScreen(t0) {
   const popupButtonBoxStyle = t74 === undefined ? null : t74;
   let t75;
   let t76;
-  if ($[40] !== color || $[41] !== current || $[42] !== progressColor || $[43] !== setControls || $[44] !== setControlsTheme || $[45] !== video || $[46] !== withControls || $[47] !== withSeekBar) {
+  if ($[40] !== color || $[41] !== current || $[42] !== progressColor || $[43] !== setControls || $[44] !== setControlsTheme || $[45] !== showPopup || $[46] !== video || $[47] !== withControls || $[48] !== withSeekBar) {
     t75 = () => {
-      if (!current || video === null) {
+      if (!current || video === null || !showPopup) {
         return _temp;
       }
       setControlsTheme({
@@ -430,45 +430,46 @@ function KeypadScreen(t0) {
         }
       };
     };
-    t76 = [video, current, withControls, setControls, setControlsTheme, withSeekBar, color, progressColor];
+    t76 = [showPopup, video, current, withControls, setControls, setControlsTheme, withSeekBar, color, progressColor];
     $[40] = color;
     $[41] = current;
     $[42] = progressColor;
     $[43] = setControls;
     $[44] = setControlsTheme;
-    $[45] = video;
-    $[46] = withControls;
-    $[47] = withSeekBar;
-    $[48] = t75;
-    $[49] = t76;
+    $[45] = showPopup;
+    $[46] = video;
+    $[47] = withControls;
+    $[48] = withSeekBar;
+    $[49] = t75;
+    $[50] = t76;
   } else {
-    t75 = $[48];
-    t76 = $[49];
+    t75 = $[49];
+    t76 = $[50];
   }
   useEffect(t75, t76);
   let t77;
   let t78;
-  if ($[50] !== autoPlay || $[51] !== current || $[52] !== setPlaying || $[53] !== video) {
+  if ($[51] !== autoPlay || $[52] !== current || $[53] !== setPlaying || $[54] !== video) {
     t77 = () => {
       if (current && autoPlay && video !== null) {
         setPlaying(true);
       }
     };
     t78 = [current, autoPlay, video, setPlaying];
-    $[50] = autoPlay;
-    $[51] = current;
-    $[52] = setPlaying;
-    $[53] = video;
-    $[54] = t77;
-    $[55] = t78;
+    $[51] = autoPlay;
+    $[52] = current;
+    $[53] = setPlaying;
+    $[54] = video;
+    $[55] = t77;
+    $[56] = t78;
   } else {
-    t77 = $[54];
-    t78 = $[55];
+    t77 = $[55];
+    t78 = $[56];
   }
   useEffect(t77, t78);
   const activityDetected = useViewerActivityDetected();
   let t79;
-  if ($[56] !== activityDetected || $[57] !== hideControls || $[58] !== showControls) {
+  if ($[57] !== activityDetected || $[58] !== hideControls || $[59] !== showControls) {
     t79 = () => {
       if (activityDetected) {
         showControls();
@@ -476,81 +477,62 @@ function KeypadScreen(t0) {
         hideControls();
       }
     };
-    $[56] = activityDetected;
-    $[57] = hideControls;
-    $[58] = showControls;
-    $[59] = t79;
+    $[57] = activityDetected;
+    $[58] = hideControls;
+    $[59] = showControls;
+    $[60] = t79;
   } else {
-    t79 = $[59];
+    t79 = $[60];
   }
   const toggleControlsVisibility = t79;
   useDebounce(video !== null && current ? toggleControlsVisibility : null, activityDetected, 1000);
-  const [showNextPopup, setShowNextPopup] = useState(false);
   let t80;
-  let t81;
-  if ($[60] !== showNextPopup) {
-    t80 = () => {
-      if (showNextPopup) {
-        setShowNextPopup(false);
-        setShowPopup(true);
-      }
-    };
-    t81 = [showNextPopup, setShowPopup, setShowNextPopup];
-    $[60] = showNextPopup;
-    $[61] = t80;
-    $[62] = t81;
-  } else {
-    t80 = $[61];
-    t81 = $[62];
-  }
-  useEffect(t80, t81);
-  let t82;
-  if ($[63] !== isNotInteractive || $[64] !== openWebView || $[65] !== trackScreenEvent) {
-    t82 = (e, item, index) => {
+  if ($[61] !== isNotInteractive || $[62] !== openWebView || $[63] !== trackScreenEvent) {
+    t80 = (e, item, index) => {
       e.stopPropagation();
       if (isNotInteractive) {
         return;
       }
       const {
-        label: t83,
-        heading: t84,
-        inWebView: t85,
-        url: t86
+        label: t81,
+        heading: t82,
+        inWebView: t83,
+        url: t84
       } = item || {};
-      const itemLabel = t83 === undefined ? null : t83;
-      const heading = t84 === undefined ? null : t84;
-      const inWebView = t85 === undefined ? false : t85;
-      const url = t86 === undefined ? null : t86;
+      const itemLabel = t81 === undefined ? null : t81;
+      const heading = t82 === undefined ? null : t82;
+      const inWebView = t83 === undefined ? false : t83;
+      const url = t84 === undefined ? null : t84;
       if (inWebView && url !== null) {
         openWebView({
           url
         });
       } else {
         setPopup(item);
-        setShowNextPopup(true);
+        setShowPopup(true);
       }
       const {
-        body: t87
+        body: t85
       } = heading || {};
-      const headingBody = t87 === undefined ? null : t87;
+      const headingBody = t85 === undefined ? null : t85;
       const finalLabel = isString(itemLabel) ? itemLabel : (itemLabel || {}).body || null;
       trackScreenEvent("click_item", [`#${index + 1}`, finalLabel || headingBody || ""].filter(_temp2).join(" "), {
         linkType: "keypad_item",
         linkUrl: url || null
       });
     };
-    $[63] = isNotInteractive;
-    $[64] = openWebView;
-    $[65] = trackScreenEvent;
-    $[66] = t82;
+    $[61] = isNotInteractive;
+    $[62] = openWebView;
+    $[63] = trackScreenEvent;
+    $[64] = t80;
   } else {
-    t82 = $[66];
+    t80 = $[64];
   }
-  const onItemClick = t82;
-  let t83;
-  if ($[67] !== isNotInteractive || $[68] !== trackScreenEvent) {
-    t83 = t84 => {
-      const isShowPopup = t84 === undefined ? false : t84;
+  const onItemClick = t80;
+  let t81;
+  if ($[65] !== isNotInteractive || $[66] !== trackScreenEvent) {
+    t81 = t82 => {
+      const isShowPopup = t82 === undefined ? false : t82;
       if (isNotInteractive) {
         return;
       }
@@ -560,16 +542,16 @@ function KeypadScreen(t0) {
       setShowPopup(false);
       setPopupDragDisabled(false);
     };
-    $[67] = isNotInteractive;
-    $[68] = trackScreenEvent;
-    $[69] = t83;
+    $[65] = isNotInteractive;
+    $[66] = trackScreenEvent;
+    $[67] = t81;
   } else {
-    t83 = $[69];
+    t81 = $[67];
   }
-  const onCloseModal = t83;
-  let t84;
-  if ($[70] !== isNotInteractive || $[71] !== onCloseModal || $[72] !== showPopup) {
-    t84 = e_0 => {
+  const onCloseModal = t81;
+  let t82;
+  if ($[68] !== isNotInteractive || $[69] !== onCloseModal || $[70] !== showPopup) {
+    t82 = e_0 => {
       if (isNotInteractive) {
         return;
       }
@@ -577,48 +559,48 @@ function KeypadScreen(t0) {
       e_0.stopPropagation();
       onCloseModal(showPopup);
     };
-    $[70] = isNotInteractive;
-    $[71] = onCloseModal;
-    $[72] = showPopup;
-    $[73] = t84;
+    $[68] = isNotInteractive;
+    $[69] = onCloseModal;
+    $[70] = showPopup;
+    $[71] = t82;
   } else {
-    t84 = $[73];
+    t82 = $[71];
   }
-  const onClickClose = t84;
+  const onClickClose = t82;
   const onClickCta = _temp3;
   const [popupDragDirection, setPopupDragDirection] = useState(null);
-  let t85;
-  if ($[74] !== height) {
-    t85 = t86 => {
+  let t83;
+  if ($[72] !== height) {
+    t83 = t84 => {
       const {
-        scrolleeHeight: t87
-      } = t86;
-      const scrolleeHeight = t87 === undefined ? 0 : t87;
+        scrolleeHeight: t85
+      } = t84;
+      const scrolleeHeight = t85 === undefined ? 0 : t85;
       if (Math.floor(scrolleeHeight) >= Math.floor(height)) {
         setPopupDragDirection("top");
       } else {
         setPopupDragDirection("bottom");
       }
     };
-    $[74] = height;
-    $[75] = t85;
+    $[72] = height;
+    $[73] = t83;
   } else {
-    t85 = $[75];
+    t83 = $[73];
   }
-  const onPopupScrollHeightChange = t85;
-  let t86;
-  if ($[76] !== onCloseModal || $[77] !== popupDragDirection) {
-    t86 = t87 => {
+  const onPopupScrollHeightChange = t83;
+  let t84;
+  if ($[74] !== onCloseModal || $[75] !== popupDragDirection) {
+    t84 = t85 => {
       const {
-        active: t88,
-        movement: t89,
-        velocity: t90
-      } = t87;
-      const dragActive = t88 === undefined ? false : t88;
-      const [, t91] = t89;
-      const my = t91 === undefined ? null : t91;
-      const [, t92] = t90;
-      const vy = t92 === undefined ? null : t92;
+        active: t86,
+        movement: t87,
+        velocity: t88
+      } = t85;
+      const dragActive = t86 === undefined ? false : t86;
+      const [, t89] = t87;
+      const my = t89 === undefined ? null : t89;
+      const [, t90] = t88;
+      const vy = t90 === undefined ? null : t90;
       const windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
       const delta = windowHeight > 0 && my !== null ? Math.abs(my) / windowHeight : 0;
       const reachedThreshold = vy !== null ? vy > 1 || delta > 0.3 : false;
@@ -639,37 +621,41 @@ function KeypadScreen(t0) {
       }
       return progress;
     };
-    $[76] = onCloseModal;
-    $[77] = popupDragDirection;
-    $[78] = t86;
+    $[74] = onCloseModal;
+    $[75] = popupDragDirection;
+    $[76] = t84;
   } else {
-    t86 = $[78];
+    t84 = $[76];
   }
-  const computePopupProgress = t86;
-  let t87;
-  let t88;
-  if ($[79] !== disableInteraction || $[80] !== enableInteraction || $[81] !== showPopup) {
-    t87 = () => {
+  const computePopupProgress = t84;
+  let t85;
+  let t86;
+  if ($[77] !== current || $[78] !== disableInteraction || $[79] !== enableInteraction || $[80] !== showPopup) {
+    t85 = () => {
+      if (!current) {
+        return;
+      }
       if (showPopup) {
         disableInteraction();
       } else {
         enableInteraction();
       }
     };
-    t88 = [showPopup, enableInteraction, disableInteraction];
-    $[79] = disableInteraction;
-    $[80] = enableInteraction;
-    $[81] = showPopup;
-    $[82] = t87;
-    $[83] = t88;
-  } else {
-    t87 = $[82];
-    t88 = $[83];
-  }
-  useEffect(t87, t88);
-  let t89;
-  if ($[84] !== current || $[85] !== isEdit || $[86] !== isInteractivePreview || $[87] !== isView || $[88] !== onCloseModal || $[89] !== showPopup) {
-    t89 = () => {
+    t86 = [current, showPopup, enableInteraction, disableInteraction];
+    $[77] = current;
+    $[78] = disableInteraction;
+    $[79] = enableInteraction;
+    $[80] = showPopup;
+    $[81] = t85;
+    $[82] = t86;
+  } else {
+    t85 = $[81];
+    t86 = $[82];
+  }
+  useEffect(t85, t86);
+  let t87;
+  if ($[83] !== current || $[84] !== isEdit || $[85] !== isInteractivePreview || $[86] !== isView || $[87] !== onCloseModal || $[88] !== showPopup) {
+    t87 = () => {
       const handleClickOutside = function handleClickOutside(e_2) {
         if (!current && isView || popupInnerRef.current && !popupInnerRef.current.contains(e_2.target) && containerRef.current && containerRef.current.contains(e_2.target) && !isInteractivePreview && !isEdit && showPopup) {
           e_2.preventDefault();
@@ -682,52 +668,52 @@ function KeypadScreen(t0) {
         document.removeEventListener("mouseup", handleClickOutside);
       };
     };
-    $[84] = current;
-    $[85] = isEdit;
-    $[86] = isInteractivePreview;
-    $[87] = isView;
-    $[88] = onCloseModal;
-    $[89] = showPopup;
-    $[90] = t89;
+    $[83] = current;
+    $[84] = isEdit;
+    $[85] = isInteractivePreview;
+    $[86] = isView;
+    $[87] = onCloseModal;
+    $[88] = showPopup;
+    $[89] = t87;
   } else {
-    t89 = $[90];
+    t87 = $[89];
   }
-  let t90;
-  if ($[91] !== current || $[92] !== isEdit || $[93] !== isInteractivePreview || $[94] !== showPopup) {
-    t90 = [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup];
-    $[91] = current;
-    $[92] = isEdit;
-    $[93] = isInteractivePreview;
-    $[94] = showPopup;
-    $[95] = t90;
+  let t88;
+  if ($[90] !== current || $[91] !== isEdit || $[92] !== isInteractivePreview || $[93] !== showPopup) {
+    t88 = [current, popupInnerRef, containerRef, isInteractivePreview, isEdit, showPopup];
+    $[90] = current;
+    $[91] = isEdit;
+    $[92] = isInteractivePreview;
+    $[93] = showPopup;
+    $[94] = t88;
   } else {
-    t90 = $[95];
+    t88 = $[94];
   }
-  useEffect(t89, t90);
-  let t91;
-  if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
-    t91 = () => {
+  useEffect(t87, t88);
+  let t89;
+  if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
+    t89 = () => {
       setPopupDragDisabled(false);
     };
-    $[96] = t91;
+    $[95] = t89;
   } else {
-    t91 = $[96];
+    t89 = $[95];
   }
-  const onPopupScrollBottom = t91;
-  let t92;
-  if ($[97] === Symbol.for("react.memo_cache_sentinel")) {
-    t92 = () => {
+  const onPopupScrollBottom = t89;
+  let t90;
+  if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
+    t90 = () => {
       setPopupDragDisabled(true);
     };
-    $[97] = t92;
+    $[96] = t90;
   } else {
-    t92 = $[97];
+    t90 = $[96];
   }
-  const onPopupScrollNotBottom = t92;
-  let t93;
-  if ($[98] !== trackScreenEvent) {
-    t93 = t94 => {
-      const trigger = t94 === undefined ? null : t94;
+  const onPopupScrollNotBottom = t90;
+  let t91;
+  if ($[97] !== trackScreenEvent) {
+    t91 = t92 => {
+      const trigger = t92 === undefined ? null : t92;
       if (trigger !== null) {
         const scrollPercent = Math.round(trigger * 100);
         trackScreenEvent("scroll", scrollPercent, {
@@ -735,73 +721,73 @@ function KeypadScreen(t0) {
         });
       }
     };
-    $[98] = trackScreenEvent;
-    $[99] = t93;
+    $[97] = trackScreenEvent;
+    $[98] = t91;
   } else {
-    t93 = $[99];
+    t91 = $[98];
   }
-  const onScrolledTrigger = t93;
-  let t94;
-  if ($[100] !== onCloseModal || $[101] !== showPopup) {
-    t94 = () => {
+  const onScrolledTrigger = t91;
+  let t92;
+  if ($[99] !== onCloseModal || $[100] !== showPopup) {
+    t92 = () => {
       onCloseModal(showPopup);
     };
-    $[100] = onCloseModal;
-    $[101] = showPopup;
-    $[102] = t94;
+    $[99] = onCloseModal;
+    $[100] = showPopup;
+    $[101] = t92;
   } else {
-    t94 = $[102];
+    t92 = $[101];
   }
-  const onTap = t94;
+  const onTap = t92;
   const onResolve = _temp4;
-  const t95 = showPopup ? 0 : 1;
-  let t96;
-  let t97;
-  if ($[103] === Symbol.for("react.memo_cache_sentinel")) {
-    t96 = {
+  const t93 = showPopup ? 0 : 1;
+  let t94;
+  let t95;
+  if ($[102] === Symbol.for("react.memo_cache_sentinel")) {
+    t94 = {
       config: {
         tension: 300,
         friction: 30
       }
     };
-    t97 = {
+    t95 = {
       filterTaps: true,
       preventDefault: true,
       stopPropagation: true
     };
-    $[103] = t96;
-    $[104] = t97;
+    $[102] = t94;
+    $[103] = t95;
   } else {
-    t96 = $[103];
-    t97 = $[104];
+    t94 = $[102];
+    t95 = $[103];
   }
-  let t98;
-  if ($[105] !== computePopupProgress || $[106] !== onTap || $[107] !== t95) {
-    t98 = {
+  let t96;
+  if ($[104] !== computePopupProgress || $[105] !== onTap || $[106] !== t93) {
+    t96 = {
       disabled: true,
-      progress: t95,
+      progress: t93,
       computeProgress: computePopupProgress,
       onResolve,
-      springParams: t96,
-      dragOptions: t97,
+      springParams: t94,
+      dragOptions: t95,
       onTap
     };
-    $[105] = computePopupProgress;
-    $[106] = onTap;
-    $[107] = t95;
-    $[108] = t98;
+    $[104] = computePopupProgress;
+    $[105] = onTap;
+    $[106] = t93;
+    $[107] = t96;
   } else {
-    t98 = $[108];
+    t96 = $[107];
   }
   const {
     bind: bindPopupDrag,
     progress: popupSpring,
     transitioning: popupTransitioning
-  } = useDragProgress(t98);
-  let t100;
-  let t99;
-  if ($[109] !== onCloseModal || $[110] !== showPopup) {
-    t99 = () => {
+  } = useDragProgress(t96);
+  let t97;
+  let t98;
+  if ($[108] !== onCloseModal || $[109] !== showPopup) {
+    t97 = () => {
       const keyup = e_3 => {
         if (e_3.key === "Escape") {
           if (showPopup) {
@@ -814,66 +800,66 @@ function KeypadScreen(t0) {
         document.removeEventListener("keyup", keyup);
       };
     };
-    t100 = [showPopup, onCloseModal];
-    $[109] = onCloseModal;
-    $[110] = showPopup;
-    $[111] = t100;
-    $[112] = t99;
+    t98 = [showPopup, onCloseModal];
+    $[108] = onCloseModal;
+    $[109] = showPopup;
+    $[110] = t97;
+    $[111] = t98;
   } else {
-    t100 = $[111];
-    t99 = $[112];
+    t97 = $[110];
+    t98 = $[111];
   }
-  useEffect(t99, t100);
-  const t101 = items === null || items.length === 0 ? placeholders : items;
-  let t102;
-  if ($[113] !== buttonBoxStyle || $[114] !== buttonLabelBoxStyle || $[115] !== buttonLayout || $[116] !== buttonTextStyle || $[117] !== buttonVisualWidth || $[118] !== current || $[119] !== onItemClick || $[120] !== resolution || $[121] !== t101) {
-    let t103;
-    if ($[123] !== buttonBoxStyle || $[124] !== buttonLabelBoxStyle || $[125] !== buttonLayout || $[126] !== buttonTextStyle || $[127] !== buttonVisualWidth || $[128] !== current || $[129] !== onItemClick || $[130] !== resolution) {
-      t103 = (item_0, index_0) => {
+  useEffect(t97, t98);
+  const t99 = items === null || items.length === 0 ? placeholders : items;
+  let t100;
+  if ($[112] !== buttonBoxStyle || $[113] !== buttonLabelBoxStyle || $[114] !== buttonLayout || $[115] !== buttonTextStyle || $[116] !== buttonVisualWidth || $[117] !== current || $[118] !== onItemClick || $[119] !== resolution || $[120] !== t99) {
+    let t101;
+    if ($[122] !== buttonBoxStyle || $[123] !== buttonLabelBoxStyle || $[124] !== buttonLayout || $[125] !== buttonTextStyle || $[126] !== buttonVisualWidth || $[127] !== current || $[128] !== onItemClick || $[129] !== resolution) {
+      t101 = (item_0, index_0) => {
         const {
-          id: t104,
-          label: t105,
-          visual: t106,
-          boxStyle: t107,
-          heading: t108,
-          content: t109,
-          url: t110,
-          inWebView: t111,
-          largeVisual: t112,
+          id: t102,
+          label: t103,
+          visual: t104,
+          boxStyle: t105,
+          heading: t106,
+          content: t107,
+          url: t108,
+          inWebView: t109,
+          largeVisual: t110,
           video: itemVideo
         } = item_0 || {};
-        const id = t104 === undefined ? null : t104;
-        const itemLabel_0 = t105 === undefined ? null : t105;
-        const visual = t106 === undefined ? null : t106;
-        const boxStyle = t107 === undefined ? null : t107;
-        const heading_0 = t108 === undefined ? null : t108;
-        const content = t109 === undefined ? null : t109;
-        const url_0 = t110 === undefined ? null : t110;
-        const inWebView_0 = t111 === undefined ? false : t111;
-        const itemLargeVisual = t112 === undefined ? null : t112;
+        const id = t102 === undefined ? null : t102;
+        const itemLabel_0 = t103 === undefined ? null : t103;
+        const visual = t104 === undefined ? null : t104;
+        const boxStyle = t105 === undefined ? null : t105;
+        const heading_0 = t106 === undefined ? null : t106;
+        const content = t107 === undefined ? null : t107;
+        const url_0 = t108 === undefined ? null : t108;
+        const inWebView_0 = t109 === undefined ? false : t109;
+        const itemLargeVisual = t110 === undefined ? null : t110;
         const {
-          url: t113
+          url: t111
         } = visual || {};
-        const visualUrl = t113 === undefined ? null : t113;
+        const visualUrl = t111 === undefined ? null : t111;
         const {
-          body: t114
+          body: t112
         } = heading_0 || {};
-        const headingBody_0 = t114 === undefined ? null : t114;
+        const headingBody_0 = t112 === undefined ? null : t112;
         const {
-          body: t115
+          body: t113
         } = content || {};
-        const contentBody = t115 === undefined ? null : t115;
+        const contentBody = t113 === undefined ? null : t113;
         const finalLabel_0 = isString(itemLabel_0) ? {
           body: itemLabel_0
         } : itemLabel_0 || {};
         const {
-          textStyle: t116
+          textStyle: t114
         } = finalLabel_0 || {};
-        const finalLabelTextStyle = t116 === undefined ? null : t116;
+        const finalLabelTextStyle = t114 === undefined ? null : t114;
         const {
-          body: t117
+          body: t115
         } = finalLabel_0 || {};
-        const finalBody = t117 === undefined ? null : t117;
+        const finalBody = t115 === undefined ? null : t115;
         const key = finalBody || visualUrl || id;
         const itemIsEmpty = finalBody === null && visual === null;
         const isExternalLink = url_0 !== null && !inWebView_0;
@@ -908,36 +894,36 @@ function KeypadScreen(t0) {
           })
         }, key);
       };
-      $[123] = buttonBoxStyle;
-      $[124] = buttonLabelBoxStyle;
-      $[125] = buttonLayout;
-      $[126] = buttonTextStyle;
-      $[127] = buttonVisualWidth;
-      $[128] = current;
-      $[129] = onItemClick;
-      $[130] = resolution;
-      $[131] = t103;
+      $[122] = buttonBoxStyle;
+      $[123] = buttonLabelBoxStyle;
+      $[124] = buttonLayout;
+      $[125] = buttonTextStyle;
+      $[126] = buttonVisualWidth;
+      $[127] = current;
+      $[128] = onItemClick;
+      $[129] = resolution;
+      $[130] = t101;
     } else {
-      t103 = $[131];
+      t101 = $[130];
     }
-    t102 = t101.map(t103);
-    $[113] = buttonBoxStyle;
-    $[114] = buttonLabelBoxStyle;
-    $[115] = buttonLayout;
-    $[116] = buttonTextStyle;
-    $[117] = buttonVisualWidth;
-    $[118] = current;
-    $[119] = onItemClick;
-    $[120] = resolution;
-    $[121] = t101;
-    $[122] = t102;
-  } else {
-    t102 = $[122];
-  }
-  const gridItems = t102;
-  let t103;
-  if ($[132] !== isPlaceholder || $[133] !== isView || $[134] !== items || $[135] !== screenState) {
-    t103 = () => {
+    t100 = t99.map(t101);
+    $[112] = buttonBoxStyle;
+    $[113] = buttonLabelBoxStyle;
+    $[114] = buttonLayout;
+    $[115] = buttonTextStyle;
+    $[116] = buttonVisualWidth;
+    $[117] = current;
+    $[118] = onItemClick;
+    $[119] = resolution;
+    $[120] = t99;
+    $[121] = t100;
+  } else {
+    t100 = $[121];
+  }
+  const gridItems = t100;
+  let t101;
+  if ($[131] !== isPlaceholder || $[132] !== isView || $[133] !== items || $[134] !== screenState) {
+    t101 = () => {
       if (screenState === "popup" && isPlaceholder) {
         setPopup(placeholderPopupBoxStyles);
         setShowPopup(true);
@@ -957,52 +943,52 @@ function KeypadScreen(t0) {
         setShowPopup(false);
       }
     };
-    $[132] = isPlaceholder;
-    $[133] = isView;
-    $[134] = items;
-    $[135] = screenState;
-    $[136] = t103;
+    $[131] = isPlaceholder;
+    $[132] = isView;
+    $[133] = items;
+    $[134] = screenState;
+    $[135] = t101;
   } else {
-    t103 = $[136];
+    t101 = $[135];
   }
-  let t104;
-  if ($[137] !== isView || $[138] !== items || $[139] !== screenState) {
-    t104 = [screenState, items, isView];
-    $[137] = isView;
-    $[138] = items;
-    $[139] = screenState;
-    $[140] = t104;
+  let t102;
+  if ($[136] !== isView || $[137] !== items || $[138] !== screenState) {
+    t102 = [screenState, items, isView];
+    $[136] = isView;
+    $[137] = items;
+    $[138] = screenState;
+    $[139] = t102;
   } else {
-    t104 = $[140];
+    t102 = $[139];
   }
-  useEffect(t103, t104);
-  let t105;
-  let t106;
-  if ($[141] !== isView || $[142] !== popupTransitioning || $[143] !== screenState || $[144] !== showPopup) {
-    t105 = () => {
+  useEffect(t101, t102);
+  let t103;
+  let t104;
+  if ($[140] !== isView || $[141] !== popupTransitioning || $[142] !== screenState || $[143] !== showPopup) {
+    t103 = () => {
       if (isView && screenState === null && !showPopup && !popupTransitioning) {
         setPopup(null);
       }
     };
-    t106 = [isView, screenState, showPopup, popupTransitioning];
-    $[141] = isView;
-    $[142] = popupTransitioning;
-    $[143] = screenState;
-    $[144] = showPopup;
-    $[145] = t105;
-    $[146] = t106;
-  } else {
-    t105 = $[145];
-    t106 = $[146];
-  }
-  useEffect(t105, t106);
-  const t107 = classNames([styles.container, className, {
+    t104 = [isView, screenState, showPopup, popupTransitioning];
+    $[140] = isView;
+    $[141] = popupTransitioning;
+    $[142] = screenState;
+    $[143] = showPopup;
+    $[144] = t103;
+    $[145] = t104;
+  } else {
+    t103 = $[144];
+    t104 = $[145];
+  }
+  useEffect(t103, t104);
+  const t105 = classNames([styles.container, className, {
     [styles.isPlaceholder]: isPlaceholder,
     [styles.withSquareItems]: withSquareItems
   }]);
-  let t108;
-  if ($[147] !== background || $[148] !== backgroundPlaying || $[149] !== customMediaRef || $[150] !== height || $[151] !== isPlaceholder || $[152] !== mediaRef || $[153] !== mediaShouldLoad || $[154] !== muted || $[155] !== resolution || $[156] !== video || $[157] !== width) {
-    t108 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+  let t106;
+  if ($[146] !== background || $[147] !== backgroundPlaying || $[148] !== customMediaRef || $[149] !== height || $[150] !== isPlaceholder || $[151] !== mediaRef || $[152] !== mediaShouldLoad || $[153] !== muted || $[154] !== resolution || $[155] !== video || $[156] !== width) {
+    t106 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -1013,24 +999,24 @@ function KeypadScreen(t0) {
       mediaRef: mergeRefs(video === null ? mediaRef : null, customMediaRef),
       className: styles.background
     }) : null;
-    $[147] = background;
-    $[148] = backgroundPlaying;
-    $[149] = customMediaRef;
-    $[150] = height;
-    $[151] = isPlaceholder;
-    $[152] = mediaRef;
-    $[153] = mediaShouldLoad;
-    $[154] = muted;
-    $[155] = resolution;
-    $[156] = video;
-    $[157] = width;
-    $[158] = t108;
-  } else {
-    t108 = $[158];
-  }
-  let t109;
-  if ($[159] !== isPlaceholder || $[160] !== isPreview || $[161] !== isView || $[162] !== onClickClose || $[163] !== showPopup || $[164] !== withoutCloseButton) {
-    t109 = isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
+    $[146] = background;
+    $[147] = backgroundPlaying;
+    $[148] = customMediaRef;
+    $[149] = height;
+    $[150] = isPlaceholder;
+    $[151] = mediaRef;
+    $[152] = mediaShouldLoad;
+    $[153] = muted;
+    $[154] = resolution;
+    $[155] = video;
+    $[156] = width;
+    $[157] = t106;
+  } else {
+    t106 = $[157];
+  }
+  let t107;
+  if ($[158] !== isPlaceholder || $[159] !== isPreview || $[160] !== isView || $[161] !== onClickClose || $[162] !== showPopup || $[163] !== withoutCloseButton) {
+    t107 = isView && !isPlaceholder && !withoutCloseButton ? /*#__PURE__*/jsx(animated.div, {
       className: classNames([styles.fixedHeader, {
         [styles.open]: showPopup
       }]),
@@ -1048,44 +1034,44 @@ function KeypadScreen(t0) {
         })
       })
     }) : null;
-    $[159] = isPlaceholder;
-    $[160] = isPreview;
-    $[161] = isView;
-    $[162] = onClickClose;
-    $[163] = showPopup;
-    $[164] = withoutCloseButton;
-    $[165] = t109;
-  } else {
-    t109 = $[165];
-  }
-  const t110 = !showPopup;
-  const t111 = !showPopup;
-  const t112 = isPreview || isPlaceholder || showPopup;
-  let t113;
-  if ($[166] !== current || $[167] !== footerHeight || $[168] !== hasFooter || $[169] !== hasHeader || $[170] !== headerHeight || $[171] !== isPlaceholder || $[172] !== isPreview || $[173] !== spacing || $[174] !== viewerBottomHeight || $[175] !== viewerTopHeight) {
-    t113 = !isPlaceholder ? {
+    $[158] = isPlaceholder;
+    $[159] = isPreview;
+    $[160] = isView;
+    $[161] = onClickClose;
+    $[162] = showPopup;
+    $[163] = withoutCloseButton;
+    $[164] = t107;
+  } else {
+    t107 = $[164];
+  }
+  const t108 = !showPopup;
+  const t109 = !showPopup;
+  const t110 = isPreview || isPlaceholder || showPopup;
+  let t111;
+  if ($[165] !== current || $[166] !== footerHeight || $[167] !== hasFooter || $[168] !== hasHeader || $[169] !== headerHeight || $[170] !== isPlaceholder || $[171] !== isPreview || $[172] !== spacing || $[173] !== viewerBottomHeight || $[174] !== viewerTopHeight) {
+    t111 = !isPlaceholder ? {
       paddingLeft: spacing,
       paddingRight: spacing,
       paddingTop: (hasHeader ? headerHeight : spacing) + (current && !isPreview ? viewerTopHeight : 0),
       paddingBottom: (hasFooter ? footerHeight : spacing) + (current && !isPreview ? viewerBottomHeight : 0)
     } : null;
-    $[166] = current;
-    $[167] = footerHeight;
-    $[168] = hasFooter;
-    $[169] = hasHeader;
-    $[170] = headerHeight;
-    $[171] = isPlaceholder;
-    $[172] = isPreview;
-    $[173] = spacing;
-    $[174] = viewerBottomHeight;
-    $[175] = viewerTopHeight;
-    $[176] = t113;
-  } else {
-    t113 = $[176];
-  }
-  let t114;
-  if ($[177] !== hasHeader || $[178] !== header || $[179] !== headerRef || $[180] !== isPlaceholder || $[181] !== isPreview || $[182] !== spacing || $[183] !== viewerTopHeight) {
-    t114 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+    $[165] = current;
+    $[166] = footerHeight;
+    $[167] = hasFooter;
+    $[168] = hasHeader;
+    $[169] = headerHeight;
+    $[170] = isPlaceholder;
+    $[171] = isPreview;
+    $[172] = spacing;
+    $[173] = viewerBottomHeight;
+    $[174] = viewerTopHeight;
+    $[175] = t111;
+  } else {
+    t111 = $[175];
+  }
+  let t112;
+  if ($[176] !== hasHeader || $[177] !== header || $[178] !== headerRef || $[179] !== isPlaceholder || $[180] !== isPreview || $[181] !== spacing || $[182] !== viewerTopHeight) {
+    t112 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
       ref: headerRef,
       className: styles.header,
       style: {
@@ -1099,286 +1085,286 @@ function KeypadScreen(t0) {
         ...header
       })
     }) : null;
-    $[177] = hasHeader;
-    $[178] = header;
-    $[179] = headerRef;
-    $[180] = isPlaceholder;
-    $[181] = isPreview;
-    $[182] = spacing;
-    $[183] = viewerTopHeight;
-    $[184] = t114;
-  } else {
-    t114 = $[184];
-  }
-  let t115;
-  let t116;
-  if ($[185] === Symbol.for("react.memo_cache_sentinel")) {
-    t115 = /*#__PURE__*/jsx(FormattedMessage, {
+    $[176] = hasHeader;
+    $[177] = header;
+    $[178] = headerRef;
+    $[179] = isPlaceholder;
+    $[180] = isPreview;
+    $[181] = spacing;
+    $[182] = viewerTopHeight;
+    $[183] = t112;
+  } else {
+    t112 = $[183];
+  }
+  let t113;
+  let t114;
+  if ($[184] === Symbol.for("react.memo_cache_sentinel")) {
+    t113 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "BSTWf8",
       defaultMessage: "Title"
     });
-    t116 = classNames([styles.empty, styles.emptyHeading]);
-    $[185] = t115;
-    $[186] = t116;
+    t114 = classNames([styles.empty, styles.emptyHeading]);
+    $[184] = t113;
+    $[185] = t114;
   } else {
-    t115 = $[185];
-    t116 = $[186];
+    t113 = $[184];
+    t114 = $[185];
   }
-  const t117 = !hasTitle;
-  let t118;
-  if ($[187] !== hasTitle || $[188] !== title || $[189] !== titleTextStyle) {
-    t118 = hasTitle ? /*#__PURE__*/jsx(Heading, {
+  const t115 = !hasTitle;
+  let t116;
+  if ($[186] !== hasTitle || $[187] !== title || $[188] !== titleTextStyle) {
+    t116 = hasTitle ? /*#__PURE__*/jsx(Heading, {
       className: styles.title,
       ...title,
       textStyle: titleTextStyle
     }) : null;
-    $[187] = hasTitle;
-    $[188] = title;
-    $[189] = titleTextStyle;
-    $[190] = t118;
+    $[186] = hasTitle;
+    $[187] = title;
+    $[188] = titleTextStyle;
+    $[189] = t116;
   } else {
-    t118 = $[190];
+    t116 = $[189];
   }
-  let t119;
-  if ($[191] !== t117 || $[192] !== t118) {
-    t119 = /*#__PURE__*/jsx(ScreenElement, {
+  let t117;
+  if ($[190] !== t115 || $[191] !== t116) {
+    t117 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "Title",
-      emptyLabel: t115,
-      emptyClassName: t116,
-      isEmpty: t117,
-      children: t118
+      emptyLabel: t113,
+      emptyClassName: t114,
+      isEmpty: t115,
+      children: t116
     });
-    $[191] = t117;
-    $[192] = t118;
-    $[193] = t119;
+    $[190] = t115;
+    $[191] = t116;
+    $[192] = t117;
   } else {
-    t119 = $[193];
+    t117 = $[192];
   }
-  let t120;
-  let t121;
-  if ($[194] === Symbol.for("react.memo_cache_sentinel")) {
-    t120 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t118;
+  let t119;
+  if ($[193] === Symbol.for("react.memo_cache_sentinel")) {
+    t118 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "ZG8/oK",
       defaultMessage: "Subtitle"
     });
-    t121 = classNames([styles.empty, styles.emptyHeading]);
-    $[194] = t120;
-    $[195] = t121;
+    t119 = classNames([styles.empty, styles.emptyHeading]);
+    $[193] = t118;
+    $[194] = t119;
   } else {
-    t120 = $[194];
-    t121 = $[195];
+    t118 = $[193];
+    t119 = $[194];
   }
-  const t122 = !hasSubtitle;
-  let t123;
-  if ($[196] !== hasSubtitle || $[197] !== subtitle) {
-    t123 = hasSubtitle ? /*#__PURE__*/jsx(Text, {
+  const t120 = !hasSubtitle;
+  let t121;
+  if ($[195] !== hasSubtitle || $[196] !== subtitle) {
+    t121 = hasSubtitle ? /*#__PURE__*/jsx(Text, {
       className: styles.subtitle,
       ...subtitle
     }) : null;
-    $[196] = hasSubtitle;
-    $[197] = subtitle;
-    $[198] = t123;
+    $[195] = hasSubtitle;
+    $[196] = subtitle;
+    $[197] = t121;
   } else {
-    t123 = $[198];
+    t121 = $[197];
   }
-  let t124;
-  if ($[199] !== t122 || $[200] !== t123) {
-    t124 = /*#__PURE__*/jsx(ScreenElement, {
+  let t122;
+  if ($[198] !== t120 || $[199] !== t121) {
+    t122 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "Subtitle",
-      emptyLabel: t120,
-      emptyClassName: t121,
-      isEmpty: t122,
-      children: t123
+      emptyLabel: t118,
+      emptyClassName: t119,
+      isEmpty: t120,
+      children: t121
     });
-    $[199] = t122;
-    $[200] = t123;
-    $[201] = t124;
+    $[198] = t120;
+    $[199] = t121;
+    $[200] = t122;
   } else {
-    t124 = $[201];
+    t122 = $[200];
   }
-  let t125;
-  if ($[202] !== isPlaceholder) {
-    t125 = classNames([styles.grid, {
+  let t123;
+  if ($[201] !== isPlaceholder) {
+    t123 = classNames([styles.grid, {
       [styles.gridPlaceholder]: isPlaceholder
     }]);
-    $[202] = isPlaceholder;
-    $[203] = t125;
+    $[201] = isPlaceholder;
+    $[202] = t123;
   } else {
-    t125 = $[203];
+    t123 = $[202];
   }
-  const t126 = isPlaceholder ? 3 : columns;
-  const t127 = isPlaceholder ? 2 : columnSpacing;
-  let t128;
-  if ($[204] !== columnAlign || $[205] !== gridItems || $[206] !== t125 || $[207] !== t126 || $[208] !== t127) {
-    t128 = /*#__PURE__*/jsx(Keypad, {
-      className: t125,
+  const t124 = isPlaceholder ? 3 : columns;
+  const t125 = isPlaceholder ? 2 : columnSpacing;
+  let t126;
+  if ($[203] !== columnAlign || $[204] !== gridItems || $[205] !== t123 || $[206] !== t124 || $[207] !== t125) {
+    t126 = /*#__PURE__*/jsx(Keypad, {
+      className: t123,
       align: columnAlign,
-      columns: t126,
-      spacing: t127,
+      columns: t124,
+      spacing: t125,
       items: gridItems
     });
-    $[204] = columnAlign;
-    $[205] = gridItems;
-    $[206] = t125;
-    $[207] = t126;
-    $[208] = t127;
-    $[209] = t128;
-  } else {
-    t128 = $[209];
-  }
-  let t129;
-  if ($[210] !== layout || $[211] !== t113 || $[212] !== t114 || $[213] !== t119 || $[214] !== t124 || $[215] !== t128 || $[216] !== width) {
-    t129 = /*#__PURE__*/jsxs(Layout, {
+    $[203] = columnAlign;
+    $[204] = gridItems;
+    $[205] = t123;
+    $[206] = t124;
+    $[207] = t125;
+    $[208] = t126;
+  } else {
+    t126 = $[208];
+  }
+  let t127;
+  if ($[209] !== layout || $[210] !== t111 || $[211] !== t112 || $[212] !== t117 || $[213] !== t122 || $[214] !== t126 || $[215] !== width) {
+    t127 = /*#__PURE__*/jsxs(Layout, {
       className: styles.layout,
       verticalAlign: layout,
       width: width,
-      style: t113,
-      children: [t114, t119, t124, t128]
+      style: t111,
+      children: [t112, t117, t122, t126]
     });
-    $[210] = layout;
-    $[211] = t113;
-    $[212] = t114;
-    $[213] = t119;
-    $[214] = t124;
-    $[215] = t128;
-    $[216] = width;
-    $[217] = t129;
+    $[209] = layout;
+    $[210] = t111;
+    $[211] = t112;
+    $[212] = t117;
+    $[213] = t122;
+    $[214] = t126;
+    $[215] = width;
+    $[216] = t127;
   } else {
-    t129 = $[217];
+    t127 = $[216];
   }
-  let t130;
-  if ($[218] === Symbol.for("react.memo_cache_sentinel")) {
-    t130 = classNames([styles.popupBackdrop]);
-    $[218] = t130;
+  let t128;
+  if ($[217] === Symbol.for("react.memo_cache_sentinel")) {
+    t128 = classNames([styles.popupBackdrop]);
+    $[217] = t128;
   } else {
-    t130 = $[218];
+    t128 = $[217];
   }
-  let t131;
-  if ($[219] !== popupSpring) {
-    t131 = popupSpring.to(_temp5);
-    $[219] = popupSpring;
-    $[220] = t131;
+  let t129;
+  if ($[218] !== popupSpring) {
+    t129 = popupSpring.to(_temp5);
+    $[218] = popupSpring;
+    $[219] = t129;
   } else {
-    t131 = $[220];
+    t129 = $[219];
   }
-  let t132;
-  if ($[221] !== t131) {
-    t132 = /*#__PURE__*/jsx(animated.div, {
-      className: t130,
+  let t130;
+  if ($[220] !== t129) {
+    t130 = /*#__PURE__*/jsx(animated.div, {
+      className: t128,
       style: {
-        opacity: t131
+        opacity: t129
       }
     });
-    $[221] = t131;
-    $[222] = t132;
+    $[220] = t129;
+    $[221] = t130;
+  } else {
+    t130 = $[221];
+  }
+  let t131;
+  if ($[222] !== popupSpring) {
+    t131 = popupSpring.to(_temp6);
+    $[222] = popupSpring;
+    $[223] = t131;
   } else {
-    t132 = $[222];
+    t131 = $[223];
+  }
+  let t132;
+  if ($[224] !== popupSpring) {
+    t132 = popupSpring.to(_temp7);
+    $[224] = popupSpring;
+    $[225] = t132;
+  } else {
+    t132 = $[225];
   }
   let t133;
-  if ($[223] !== popupSpring) {
-    t133 = popupSpring.to(_temp6);
-    $[223] = popupSpring;
-    $[224] = t133;
+  if ($[226] !== t131 || $[227] !== t132) {
+    t133 = {
+      transform: t131,
+      pointerEvents: t132
+    };
+    $[226] = t131;
+    $[227] = t132;
+    $[228] = t133;
   } else {
-    t133 = $[224];
+    t133 = $[228];
   }
   let t134;
-  if ($[225] !== popupSpring) {
-    t134 = popupSpring.to(_temp7);
-    $[225] = popupSpring;
-    $[226] = t134;
-  } else {
-    t134 = $[226];
-  }
-  let t135;
-  if ($[227] !== t133 || $[228] !== t134) {
-    t135 = {
-      transform: t133,
-      pointerEvents: t134
-    };
-    $[227] = t133;
-    $[228] = t134;
-    $[229] = t135;
+  if ($[229] !== bindPopupDrag) {
+    t134 = bindPopupDrag();
+    $[229] = bindPopupDrag;
+    $[230] = t134;
+  } else {
+    t134 = $[230];
+  }
+  const t135 = isPreview || isPlaceholder;
+  const t136 = !showPopup ? 1 : null;
+  const t137 = styles[popupLayoutClassName];
+  const t138 = popupBoxStyle === null;
+  let t139;
+  if ($[231] !== t137 || $[232] !== t138) {
+    t139 = classNames([styles.popupInner, t137, {
+      [styles.withShadow]: t138
+    }]);
+    $[231] = t137;
+    $[232] = t138;
+    $[233] = t139;
   } else {
-    t135 = $[229];
+    t139 = $[233];
   }
-  let t136;
-  if ($[230] !== bindPopupDrag) {
-    t136 = bindPopupDrag();
-    $[230] = bindPopupDrag;
-    $[231] = t136;
+  let t140;
+  if ($[234] === Symbol.for("react.memo_cache_sentinel")) {
+    t140 = getStyleFromBox(placeholderPopupBoxStyles);
+    $[234] = t140;
   } else {
-    t136 = $[231];
+    t140 = $[234];
   }
-  const t137 = isPreview || isPlaceholder;
-  const t138 = !showPopup ? 1 : null;
-  const t139 = styles[popupLayoutClassName];
-  const t140 = popupBoxStyle === null;
   let t141;
-  if ($[232] !== t139 || $[233] !== t140) {
-    t141 = classNames([styles.popupInner, t139, {
-      [styles.withShadow]: t140
-    }]);
-    $[232] = t139;
-    $[233] = t140;
-    $[234] = t141;
+  if ($[235] !== popupBoxStyle) {
+    t141 = getStyleFromBox(popupBoxStyle);
+    $[235] = popupBoxStyle;
+    $[236] = t141;
   } else {
-    t141 = $[234];
+    t141 = $[236];
   }
   let t142;
-  if ($[235] === Symbol.for("react.memo_cache_sentinel")) {
-    t142 = getStyleFromBox(placeholderPopupBoxStyles);
-    $[235] = t142;
+  if ($[237] !== singlePopupBoxStyle) {
+    t142 = getStyleFromBox(singlePopupBoxStyle);
+    $[237] = singlePopupBoxStyle;
+    $[238] = t142;
   } else {
-    t142 = $[235];
+    t142 = $[238];
   }
   let t143;
-  if ($[236] !== popupBoxStyle) {
-    t143 = getStyleFromBox(popupBoxStyle);
-    $[236] = popupBoxStyle;
-    $[237] = t143;
+  if ($[239] !== t141 || $[240] !== t142) {
+    t143 = {
+      ...t140,
+      ...t141,
+      ...t142
+    };
+    $[239] = t141;
+    $[240] = t142;
+    $[241] = t143;
   } else {
-    t143 = $[237];
+    t143 = $[241];
   }
   let t144;
-  if ($[238] !== singlePopupBoxStyle) {
-    t144 = getStyleFromBox(singlePopupBoxStyle);
-    $[238] = singlePopupBoxStyle;
-    $[239] = t144;
-  } else {
-    t144 = $[239];
-  }
   let t145;
-  if ($[240] !== t143 || $[241] !== t144) {
-    t145 = {
-      ...t142,
-      ...t143,
-      ...t144
-    };
-    $[240] = t143;
-    $[241] = t144;
-    $[242] = t145;
-  } else {
-    t145 = $[242];
-  }
-  let t146;
-  let t147;
-  if ($[243] === Symbol.for("react.memo_cache_sentinel")) {
-    t146 = /*#__PURE__*/jsx(FormattedMessage, {
+  if ($[242] === Symbol.for("react.memo_cache_sentinel")) {
+    t144 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "uT+qYH",
       defaultMessage: "Video"
     });
-    t147 = classNames([styles.empty, styles.emptyVisual]);
-    $[243] = t146;
-    $[244] = t147;
+    t145 = classNames([styles.empty, styles.emptyVisual]);
+    $[242] = t144;
+    $[243] = t145;
   } else {
-    t146 = $[243];
-    t147 = $[244];
+    t144 = $[242];
+    t145 = $[243];
   }
-  const t148 = video === null;
-  let t149;
-  if ($[245] !== customMediaRef || $[246] !== mediaRef || $[247] !== muted || $[248] !== resolution || $[249] !== video || $[250] !== videoPlaying) {
-    t149 = video !== null ? /*#__PURE__*/jsx("div", {
+  const t146 = video === null;
+  let t147;
+  if ($[244] !== customMediaRef || $[245] !== mediaRef || $[246] !== muted || $[247] !== resolution || $[248] !== video || $[249] !== videoPlaying) {
+    t147 = video !== null ? /*#__PURE__*/jsx("div", {
       className: styles.popupVideoWrapper,
       children: /*#__PURE__*/jsx(Video, {
         ...video,
@@ -1389,49 +1375,49 @@ function KeypadScreen(t0) {
         mediaRef: mergeRefs(mediaRef, customMediaRef)
       })
     }) : null;
-    $[245] = customMediaRef;
-    $[246] = mediaRef;
-    $[247] = muted;
-    $[248] = resolution;
-    $[249] = video;
-    $[250] = videoPlaying;
-    $[251] = t149;
-  } else {
-    t149 = $[251];
-  }
-  let t150;
-  if ($[252] !== t148 || $[253] !== t149) {
-    t150 = /*#__PURE__*/jsx(ScreenElement, {
+    $[244] = customMediaRef;
+    $[245] = mediaRef;
+    $[246] = muted;
+    $[247] = resolution;
+    $[248] = video;
+    $[249] = videoPlaying;
+    $[250] = t147;
+  } else {
+    t147 = $[250];
+  }
+  let t148;
+  if ($[251] !== t146 || $[252] !== t147) {
+    t148 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "video",
-      emptyLabel: t146,
-      emptyClassName: t147,
-      isEmpty: t148,
-      children: t149
+      emptyLabel: t144,
+      emptyClassName: t145,
+      isEmpty: t146,
+      children: t147
     });
-    $[252] = t148;
-    $[253] = t149;
-    $[254] = t150;
+    $[251] = t146;
+    $[252] = t147;
+    $[253] = t148;
   } else {
-    t150 = $[254];
+    t148 = $[253];
   }
-  let t151;
-  let t152;
-  if ($[255] === Symbol.for("react.memo_cache_sentinel")) {
-    t151 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t149;
+  let t150;
+  if ($[254] === Symbol.for("react.memo_cache_sentinel")) {
+    t149 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "IE7U/Q",
       defaultMessage: "Heading"
     });
-    t152 = classNames([styles.empty, styles.emptyHeading]);
-    $[255] = t151;
-    $[256] = t152;
+    t150 = classNames([styles.empty, styles.emptyHeading]);
+    $[254] = t149;
+    $[255] = t150;
   } else {
-    t151 = $[255];
-    t152 = $[256];
+    t149 = $[254];
+    t150 = $[255];
   }
-  const t153 = !hasPopupHeading;
-  let t154;
-  if ($[257] !== hasPopupHeading || $[258] !== headingTextStyle || $[259] !== popupHeading || $[260] !== popupHeadingTextStyle) {
-    t154 = hasPopupHeading ? /*#__PURE__*/jsx(Heading, {
+  const t151 = !hasPopupHeading;
+  let t152;
+  if ($[256] !== hasPopupHeading || $[257] !== headingTextStyle || $[258] !== popupHeading || $[259] !== popupHeadingTextStyle) {
+    t152 = hasPopupHeading ? /*#__PURE__*/jsx(Heading, {
       className: styles.popupHeading,
       ...popupHeading,
       textStyle: {
@@ -1439,46 +1425,46 @@ function KeypadScreen(t0) {
         ...popupHeadingTextStyle
       }
     }) : null;
-    $[257] = hasPopupHeading;
-    $[258] = headingTextStyle;
-    $[259] = popupHeading;
-    $[260] = popupHeadingTextStyle;
-    $[261] = t154;
-  } else {
-    t154 = $[261];
-  }
-  let t155;
-  if ($[262] !== t153 || $[263] !== t154) {
-    t155 = /*#__PURE__*/jsx(ScreenElement, {
-      emptyLabel: t151,
-      emptyClassName: t152,
-      isEmpty: t153,
-      children: t154
+    $[256] = hasPopupHeading;
+    $[257] = headingTextStyle;
+    $[258] = popupHeading;
+    $[259] = popupHeadingTextStyle;
+    $[260] = t152;
+  } else {
+    t152 = $[260];
+  }
+  let t153;
+  if ($[261] !== t151 || $[262] !== t152) {
+    t153 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyLabel: t149,
+      emptyClassName: t150,
+      isEmpty: t151,
+      children: t152
     });
-    $[262] = t153;
-    $[263] = t154;
-    $[264] = t155;
+    $[261] = t151;
+    $[262] = t152;
+    $[263] = t153;
   } else {
-    t155 = $[264];
+    t153 = $[263];
   }
-  let t156;
-  let t157;
-  if ($[265] === Symbol.for("react.memo_cache_sentinel")) {
-    t156 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t154;
+  let t155;
+  if ($[264] === Symbol.for("react.memo_cache_sentinel")) {
+    t154 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "JRZoe6",
       defaultMessage: "Content"
     });
-    t157 = classNames([styles.empty, styles.emptyContent]);
-    $[265] = t156;
-    $[266] = t157;
+    t155 = classNames([styles.empty, styles.emptyContent]);
+    $[264] = t154;
+    $[265] = t155;
   } else {
-    t156 = $[265];
-    t157 = $[266];
+    t154 = $[264];
+    t155 = $[265];
   }
-  const t158 = !hasPopupContent;
-  let t159;
-  if ($[267] !== contentTextStyle || $[268] !== hasPopupContent || $[269] !== popupContent || $[270] !== popupContentTextStyle) {
-    t159 = hasPopupContent ? /*#__PURE__*/jsx(Text, {
+  const t156 = !hasPopupContent;
+  let t157;
+  if ($[266] !== contentTextStyle || $[267] !== hasPopupContent || $[268] !== popupContent || $[269] !== popupContentTextStyle) {
+    t157 = hasPopupContent ? /*#__PURE__*/jsx(Text, {
       className: styles.popupContent,
       ...popupContent,
       textStyle: {
@@ -1486,47 +1472,47 @@ function KeypadScreen(t0) {
         ...popupContentTextStyle
       }
     }) : null;
-    $[267] = contentTextStyle;
-    $[268] = hasPopupContent;
-    $[269] = popupContent;
-    $[270] = popupContentTextStyle;
-    $[271] = t159;
+    $[266] = contentTextStyle;
+    $[267] = hasPopupContent;
+    $[268] = popupContent;
+    $[269] = popupContentTextStyle;
+    $[270] = t157;
   } else {
-    t159 = $[271];
+    t157 = $[270];
   }
-  let t160;
-  if ($[272] !== t158 || $[273] !== t159) {
-    t160 = /*#__PURE__*/jsx(ScreenElement, {
+  let t158;
+  if ($[271] !== t156 || $[272] !== t157) {
+    t158 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "popupContent",
-      emptyLabel: t156,
-      emptyClassName: t157,
-      isEmpty: t158,
-      children: t159
+      emptyLabel: t154,
+      emptyClassName: t155,
+      isEmpty: t156,
+      children: t157
     });
-    $[272] = t158;
-    $[273] = t159;
-    $[274] = t160;
+    $[271] = t156;
+    $[272] = t157;
+    $[273] = t158;
   } else {
-    t160 = $[274];
+    t158 = $[273];
   }
-  let t161;
-  let t162;
-  if ($[275] === Symbol.for("react.memo_cache_sentinel")) {
-    t161 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t159;
+  let t160;
+  if ($[274] === Symbol.for("react.memo_cache_sentinel")) {
+    t159 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "z4Pr+g",
       defaultMessage: "Visual (Image or Video)"
     });
-    t162 = classNames([styles.empty, styles.emptyVisual]);
-    $[275] = t161;
-    $[276] = t162;
+    t160 = classNames([styles.empty, styles.emptyVisual]);
+    $[274] = t159;
+    $[275] = t160;
   } else {
-    t161 = $[275];
-    t162 = $[276];
+    t159 = $[274];
+    t160 = $[275];
   }
-  const t163 = largeVisual === null;
-  let t164;
-  if ($[277] !== largeVisual || $[278] !== largeVisualRatio || $[279] !== resolution) {
-    t164 = largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
+  const t161 = largeVisual === null;
+  let t162;
+  if ($[276] !== largeVisual || $[277] !== largeVisualRatio || $[278] !== resolution) {
+    t162 = largeVisual !== null ? /*#__PURE__*/jsx(Visual, {
       className: styles.popupVisual,
       imageClassName: styles.popupVisualImage,
       videoClassName: styles.popupVisualVideo,
@@ -1536,46 +1522,46 @@ function KeypadScreen(t0) {
       width: "100%",
       height: "auto"
     }) : null;
-    $[277] = largeVisual;
-    $[278] = largeVisualRatio;
-    $[279] = resolution;
-    $[280] = t164;
+    $[276] = largeVisual;
+    $[277] = largeVisualRatio;
+    $[278] = resolution;
+    $[279] = t162;
   } else {
-    t164 = $[280];
+    t162 = $[279];
   }
-  let t165;
-  if ($[281] !== t163 || $[282] !== t164) {
-    t165 = /*#__PURE__*/jsx(ScreenElement, {
+  let t163;
+  if ($[280] !== t161 || $[281] !== t162) {
+    t163 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "image",
-      emptyLabel: t161,
-      emptyClassName: t162,
-      isEmpty: t163,
-      children: t164
+      emptyLabel: t159,
+      emptyClassName: t160,
+      isEmpty: t161,
+      children: t162
     });
-    $[281] = t163;
-    $[282] = t164;
-    $[283] = t165;
+    $[280] = t161;
+    $[281] = t162;
+    $[282] = t163;
   } else {
-    t165 = $[283];
+    t163 = $[282];
   }
-  let t166;
-  let t167;
-  if ($[284] === Symbol.for("react.memo_cache_sentinel")) {
-    t166 = /*#__PURE__*/jsx(FormattedMessage, {
+  let t164;
+  let t165;
+  if ($[283] === Symbol.for("react.memo_cache_sentinel")) {
+    t164 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "N7Kj8z",
       defaultMessage: "Button"
     });
-    t167 = classNames([styles.empty, styles.emptyCTA]);
-    $[284] = t166;
-    $[285] = t167;
+    t165 = classNames([styles.empty, styles.emptyCTA]);
+    $[283] = t164;
+    $[284] = t165;
   } else {
-    t166 = $[284];
-    t167 = $[285];
+    t164 = $[283];
+    t165 = $[284];
   }
-  const t168 = popupButton === null;
-  let t169;
-  if ($[286] !== buttonLabel || $[287] !== buttonUrl || $[288] !== onClickCta || $[289] !== openWebView || $[290] !== popupButton || $[291] !== popupButtonBoxStyle || $[292] !== popupButtonsBoxStyle || $[293] !== popupButtonsTextStyle || $[294] !== popupInWebView) {
-    t169 = popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
+  const t166 = popupButton === null;
+  let t167;
+  if ($[285] !== buttonLabel || $[286] !== buttonUrl || $[287] !== onClickCta || $[288] !== openWebView || $[289] !== popupButton || $[290] !== popupButtonBoxStyle || $[291] !== popupButtonsBoxStyle || $[292] !== popupButtonsTextStyle || $[293] !== popupInWebView) {
+    t167 = popupButton !== null ? /*#__PURE__*/jsx(CallToAction, {
       className: styles.popupCTA,
       label: {
         ...popupButtonsTextStyle,
@@ -1591,131 +1577,131 @@ function KeypadScreen(t0) {
         ...popupButtonBoxStyle
       }
     }) : null;
-    $[286] = buttonLabel;
-    $[287] = buttonUrl;
-    $[288] = onClickCta;
-    $[289] = openWebView;
-    $[290] = popupButton;
-    $[291] = popupButtonBoxStyle;
-    $[292] = popupButtonsBoxStyle;
-    $[293] = popupButtonsTextStyle;
-    $[294] = popupInWebView;
-    $[295] = t169;
-  } else {
-    t169 = $[295];
-  }
-  let t170;
-  if ($[296] !== t168 || $[297] !== t169) {
-    t170 = /*#__PURE__*/jsx(ScreenElement, {
+    $[285] = buttonLabel;
+    $[286] = buttonUrl;
+    $[287] = onClickCta;
+    $[288] = openWebView;
+    $[289] = popupButton;
+    $[290] = popupButtonBoxStyle;
+    $[291] = popupButtonsBoxStyle;
+    $[292] = popupButtonsTextStyle;
+    $[293] = popupInWebView;
+    $[294] = t167;
+  } else {
+    t167 = $[294];
+  }
+  let t168;
+  if ($[295] !== t166 || $[296] !== t167) {
+    t168 = /*#__PURE__*/jsx(ScreenElement, {
       placeholder: "button",
-      emptyLabel: t166,
-      emptyClassName: t167,
-      isEmpty: t168,
-      children: t169
+      emptyLabel: t164,
+      emptyClassName: t165,
+      isEmpty: t166,
+      children: t167
     });
-    $[296] = t168;
-    $[297] = t169;
-    $[298] = t170;
+    $[295] = t166;
+    $[296] = t167;
+    $[297] = t168;
   } else {
-    t170 = $[298];
+    t168 = $[297];
   }
-  let t171;
-  if ($[299] !== t141 || $[300] !== t145 || $[301] !== t150 || $[302] !== t155 || $[303] !== t160 || $[304] !== t165 || $[305] !== t170) {
-    t171 = /*#__PURE__*/jsxs("div", {
+  let t169;
+  if ($[298] !== t139 || $[299] !== t143 || $[300] !== t148 || $[301] !== t153 || $[302] !== t158 || $[303] !== t163 || $[304] !== t168) {
+    t169 = /*#__PURE__*/jsxs("div", {
       ref: popupInnerRef,
-      className: t141,
-      style: t145,
-      children: [t150, t155, t160, t165, t170]
+      className: t139,
+      style: t143,
+      children: [t148, t153, t158, t163, t168]
     });
-    $[299] = t141;
-    $[300] = t145;
-    $[301] = t150;
-    $[302] = t155;
-    $[303] = t160;
-    $[304] = t165;
-    $[305] = t170;
-    $[306] = t171;
+    $[298] = t139;
+    $[299] = t143;
+    $[300] = t148;
+    $[301] = t153;
+    $[302] = t158;
+    $[303] = t163;
+    $[304] = t168;
+    $[305] = t169;
   } else {
-    t171 = $[306];
+    t169 = $[305];
   }
-  let t172;
-  if ($[307] !== onPopupScrollBottom || $[308] !== onPopupScrollHeightChange || $[309] !== onPopupScrollNotBottom || $[310] !== t137 || $[311] !== t138 || $[312] !== t171) {
-    t172 = /*#__PURE__*/jsx(Scroll, {
-      disabled: t137,
+  let t170;
+  if ($[306] !== onPopupScrollBottom || $[307] !== onPopupScrollHeightChange || $[308] !== onPopupScrollNotBottom || $[309] !== t135 || $[310] !== t136 || $[311] !== t169) {
+    t170 = /*#__PURE__*/jsx(Scroll, {
+      disabled: t135,
       verticalAlign: "middle",
       withArrow: false,
-      scrollPosition: t138,
+      scrollPosition: t136,
       onScrolledBottom: onPopupScrollBottom,
       onScrolledNotBottom: onPopupScrollNotBottom,
       onScrollHeightChange: onPopupScrollHeightChange,
       className: styles.popupScroll,
       withShadow: true,
-      children: t171
+      children: t169
     });
-    $[307] = onPopupScrollBottom;
-    $[308] = onPopupScrollHeightChange;
-    $[309] = onPopupScrollNotBottom;
-    $[310] = t137;
-    $[311] = t138;
-    $[312] = t171;
-    $[313] = t172;
+    $[306] = onPopupScrollBottom;
+    $[307] = onPopupScrollHeightChange;
+    $[308] = onPopupScrollNotBottom;
+    $[309] = t135;
+    $[310] = t136;
+    $[311] = t169;
+    $[312] = t170;
   } else {
-    t172 = $[313];
+    t170 = $[312];
   }
-  let t173;
-  if ($[314] !== t135 || $[315] !== t136 || $[316] !== t172) {
-    t173 = /*#__PURE__*/jsx(animated.div, {
+  let t171;
+  if ($[313] !== t133 || $[314] !== t134 || $[315] !== t170) {
+    t171 = /*#__PURE__*/jsx(animated.div, {
       className: styles.popup,
-      style: t135,
-      ...t136,
-      children: t172
+      style: t133,
+      ...t134,
+      children: t170
     });
-    $[314] = t135;
-    $[315] = t136;
-    $[316] = t172;
-    $[317] = t173;
+    $[313] = t133;
+    $[314] = t134;
+    $[315] = t170;
+    $[316] = t171;
   } else {
-    t173 = $[317];
+    t171 = $[316];
   }
-  let t174;
-  if ($[318] !== t132 || $[319] !== t173) {
-    t174 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t132, t173]
+  let t172;
+  if ($[317] !== t130 || $[318] !== t171) {
+    t172 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t130, t171]
     });
-    $[318] = t132;
-    $[319] = t173;
-    $[320] = t174;
+    $[317] = t130;
+    $[318] = t171;
+    $[319] = t172;
   } else {
-    t174 = $[320];
+    t172 = $[319];
   }
-  let t175;
-  if ($[321] !== height || $[322] !== layout || $[323] !== onScrolledTrigger || $[324] !== t110 || $[325] !== t111 || $[326] !== t112 || $[327] !== t129 || $[328] !== t174 || $[329] !== width) {
-    t175 = /*#__PURE__*/jsxs(Scroll, {
+  let t173;
+  if ($[320] !== height || $[321] !== layout || $[322] !== onScrolledTrigger || $[323] !== t108 || $[324] !== t109 || $[325] !== t110 || $[326] !== t127 || $[327] !== t172 || $[328] !== width) {
+    t173 = /*#__PURE__*/jsxs(Scroll, {
       width: width,
       height: height,
       verticalAlign: layout,
-      withArrow: t110,
-      withShadow: t111,
-      disabled: t112,
+      withArrow: t108,
+      withShadow: t109,
+      disabled: t110,
       onScrolledTrigger: onScrolledTrigger,
-      children: [t129, t174]
+      children: [t127, t172]
     });
-    $[321] = height;
-    $[322] = layout;
-    $[323] = onScrolledTrigger;
-    $[324] = t110;
-    $[325] = t111;
-    $[326] = t112;
-    $[327] = t129;
-    $[328] = t174;
-    $[329] = width;
-    $[330] = t175;
-  } else {
-    t175 = $[330];
+    $[320] = height;
+    $[321] = layout;
+    $[322] = onScrolledTrigger;
+    $[323] = t108;
+    $[324] = t109;
+    $[325] = t110;
+    $[326] = t127;
+    $[327] = t172;
+    $[328] = width;
+    $[329] = t173;
+  } else {
+    t173 = $[329];
   }
-  let t176;
-  if ($[331] !== current || $[332] !== footerProps || $[333] !== footerRef || $[334] !== hasFooter || $[335] !== isPlaceholder || $[336] !== isPreview || $[337] !== spacing || $[338] !== viewerBottomHeight || $[339] !== viewerBottomSidesWidth) {
-    t176 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+  let t174;
+  if ($[330] !== current || $[331] !== footerProps || $[332] !== footerRef || $[333] !== hasFooter || $[334] !== isPlaceholder || $[335] !== isPreview || $[336] !== spacing || $[337] !== viewerBottomHeight || $[338] !== viewerBottomSidesWidth) {
+    t174 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
       ref: footerRef,
       className: styles.footer,
       style: {
@@ -1729,52 +1715,52 @@ function KeypadScreen(t0) {
         ...footerProps
       })
     }) : null;
-    $[331] = current;
-    $[332] = footerProps;
-    $[333] = footerRef;
-    $[334] = hasFooter;
-    $[335] = isPlaceholder;
-    $[336] = isPreview;
-    $[337] = spacing;
-    $[338] = viewerBottomHeight;
-    $[339] = viewerBottomSidesWidth;
-    $[340] = t176;
-  } else {
-    t176 = $[340];
-  }
-  let t177;
-  if ($[341] !== height || $[342] !== t175 || $[343] !== t176 || $[344] !== width) {
-    t177 = /*#__PURE__*/jsxs(Container, {
+    $[330] = current;
+    $[331] = footerProps;
+    $[332] = footerRef;
+    $[333] = hasFooter;
+    $[334] = isPlaceholder;
+    $[335] = isPreview;
+    $[336] = spacing;
+    $[337] = viewerBottomHeight;
+    $[338] = viewerBottomSidesWidth;
+    $[339] = t174;
+  } else {
+    t174 = $[339];
+  }
+  let t175;
+  if ($[340] !== height || $[341] !== t173 || $[342] !== t174 || $[343] !== width) {
+    t175 = /*#__PURE__*/jsxs(Container, {
       width: width,
       height: height,
       className: styles.inner,
-      children: [t175, t176]
+      children: [t173, t174]
     });
-    $[341] = height;
-    $[342] = t175;
-    $[343] = t176;
-    $[344] = width;
-    $[345] = t177;
+    $[340] = height;
+    $[341] = t173;
+    $[342] = t174;
+    $[343] = width;
+    $[344] = t175;
   } else {
-    t177 = $[345];
+    t175 = $[344];
   }
-  let t178;
-  if ($[346] !== t107 || $[347] !== t108 || $[348] !== t109 || $[349] !== t177) {
-    t178 = /*#__PURE__*/jsxs("div", {
+  let t176;
+  if ($[345] !== t105 || $[346] !== t106 || $[347] !== t107 || $[348] !== t175) {
+    t176 = /*#__PURE__*/jsxs("div", {
       ref: containerRef,
-      className: t107,
+      className: t105,
       "data-screen-ready": true,
-      children: [t108, t109, t177]
+      children: [t106, t107, t175]
     });
-    $[346] = t107;
-    $[347] = t108;
-    $[348] = t109;
-    $[349] = t177;
-    $[350] = t178;
+    $[345] = t105;
+    $[346] = t106;
+    $[347] = t107;
+    $[348] = t175;
+    $[349] = t176;
   } else {
-    t178 = $[350];
+    t176 = $[349];
   }
-  return t178;
+  return t176;
 }
 function _temp7(p_1) {
   return Math.abs(p_1) > 0.5 ? "none" : "auto";