@micromag/screen-urbania-horoscope 0.4.86 → 0.4.87

package/es/index.js

@@ -1,7 +1,8 @@
 import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
+import { c } from 'react/compiler-runtime';
 import { animated } from '@react-spring/web';
 import classNames from 'classnames';
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { PlaceholderTitle, ScreenElement } from '@micromag/core/components';
 import { useScreenRenderContext, useViewerInteraction, usePlaybackContext, usePlaybackMediaRef, useScreenSize, useViewerContext, useScreenState } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDragProgress } from '@micromag/core/hooks';
@@ -38,7 +39,6 @@ import sagittariusThumbnail from '../assets/images/0964d576c4c1da6d.png';
 import scorpioThumbnail from '../assets/images/1ffa37309c1fbcfa.png';
 import taurusThumbnail from '../assets/images/822018b354054d62.png';
 import virgoThumbnail from '../assets/images/b3e1e35461e78e82.png';
-import { c } from 'react/compiler-runtime';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Scroll from '@micromag/element-scroll';
 
@@ -591,23 +591,40 @@ const mouseBlocker = {
     cursor: 'default'
   }
 };
-function UrbaniaHoroscope({
-  defaultSigns = signs,
-  signs: signsValue = null,
-  title = null,
-  description = null,
-  author = null,
-  button = null,
-  signSubtitle = null,
-  spacing = 20,
-  background = null,
-  popupBackground = null,
-  current = true,
-  preload = true,
-  type = 'horoscope',
-  mediaRef: customMediaRef = null,
-  className = null
-}) {
+function UrbaniaHoroscope(t0) {
+  const $ = c(166);
+  const {
+    defaultSigns: t1,
+    signs: t2,
+    title: t3,
+    description: t4,
+    author: t5,
+    button: t6,
+    signSubtitle: t7,
+    spacing: t8,
+    background: t9,
+    popupBackground: t10,
+    current: t11,
+    preload: t12,
+    type: t13,
+    mediaRef: t14,
+    className: t15
+  } = t0;
+  const defaultSigns = t1 === undefined ? null : t1;
+  const signsValue = t2 === undefined ? null : t2;
+  const title = t3 === undefined ? null : t3;
+  const description = t4 === undefined ? null : t4;
+  const author = t5 === undefined ? null : t5;
+  const button = t6 === undefined ? null : t6;
+  const signSubtitle = t7 === undefined ? null : t7;
+  const spacing = t8 === undefined ? 20 : t8;
+  const background = t9 === undefined ? null : t9;
+  const popupBackground = t10 === undefined ? null : t10;
+  const current = t11 === undefined ? true : t11;
+  const preload = t12 === undefined ? true : t12;
+  const type = t13 === undefined ? "horoscope" : t13;
+  const customMediaRef = t14 === undefined ? null : t14;
+  const className = t15 === undefined ? null : t15;
   const intl = useIntl();
   const trackScreenEvent = useTrackScreenEvent(type);
   const {
@@ -619,15 +636,45 @@ function UrbaniaHoroscope({
   } = usePlaybackContext();
   const {
     ref: mediaRef,
-    isCurrent: isCurrentMedia = false
+    isCurrent: t16
   } = usePlaybackMediaRef(current, true);
-  const hasAuthor = author !== null && isTextFilled(author.name);
-  const signs = useMemo(() => defaultSigns.map((defaultSign, index) => ({
-    ...(signsValue !== null ? signsValue.find(({
-      id: signValueId
-    }) => signValueId === defaultSign.id) || signsValue[index] : null),
-    ...defaultSign
-  })), [signsValue]);
+  const isCurrentMedia = t16 === undefined ? false : t16;
+  let t17;
+  if ($[0] !== author) {
+    t17 = author !== null && isTextFilled(author.name);
+    $[0] = author;
+    $[1] = t17;
+  } else {
+    t17 = $[1];
+  }
+  const hasAuthor = t17;
+  const t18 = defaultSigns || signs;
+  let t19;
+  if ($[2] !== signsValue || $[3] !== t18) {
+    let t20;
+    if ($[5] !== signsValue) {
+      t20 = (defaultSign, index) => ({
+        ...(signsValue !== null ? signsValue.find(t21 => {
+          const {
+            id: signValueId
+          } = t21;
+          return signValueId === defaultSign.id;
+        }) || signsValue[index] : null),
+        ...defaultSign
+      });
+      $[5] = signsValue;
+      $[6] = t20;
+    } else {
+      t20 = $[6];
+    }
+    t19 = t18.map(t20);
+    $[2] = signsValue;
+    $[3] = t18;
+    $[4] = t19;
+  } else {
+    t19 = $[4];
+  }
+  const signs$1 = t19;
   const {
     width,
     height,
@@ -643,354 +690,731 @@ function UrbaniaHoroscope({
     isPlaceholder,
     isEdit
   } = useScreenRenderContext();
-  const hasTitle = isTextFilled(title);
-  const hasDescription = isTextFilled(description);
-  const hasButton = isTextFilled(button);
+  let t20;
+  if ($[7] !== title) {
+    t20 = isTextFilled(title);
+    $[7] = title;
+    $[8] = t20;
+  } else {
+    t20 = $[8];
+  }
+  const hasTitle = t20;
+  let t21;
+  if ($[9] !== description) {
+    t21 = isTextFilled(description);
+    $[9] = description;
+    $[10] = t21;
+  } else {
+    t21 = $[10];
+  }
+  const hasDescription = t21;
+  let t22;
+  if ($[11] !== button) {
+    t22 = isTextFilled(button);
+    $[11] = button;
+    $[12] = t22;
+  } else {
+    t22 = $[12];
+  }
+  const hasButton = t22;
   const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   const mediaShouldLoad = !isPlaceholder && (current || preload);
   const [showSignsGrid, setShowSignsGrid] = useState(false);
   const [selectedSign, setSelectedSign] = useState(null);
   const [showModal, setShowModal] = useState(false);
+  let t23;
+  if ($[13] !== popupBackground) {
+    t23 = popupBackground || {};
+    $[13] = popupBackground;
+    $[14] = t23;
+  } else {
+    t23 = $[14];
+  }
   const {
-    video = null
-  } = popupBackground || {};
+    video: t24
+  } = t23;
+  const video = t24 === undefined ? null : t24;
+  let t25;
+  if ($[15] !== video) {
+    t25 = video || {};
+    $[15] = video;
+    $[16] = t25;
+  } else {
+    t25 = $[16];
+  }
   const {
-    url: popupBackgroundUrl = null
-  } = video || {};
-  const onOpenSignsGrid = useCallback(() => {
-    setShowSignsGrid(true);
-    disableInteraction();
-    trackScreenEvent('open');
-  }, [disableInteraction, trackScreenEvent]);
-  const onCloseSignsGrid = useCallback(() => {
-    if (showModal) {
+    url: t26
+  } = t25;
+  const popupBackgroundUrl = t26 === undefined ? null : t26;
+  let t27;
+  if ($[17] !== disableInteraction || $[18] !== trackScreenEvent) {
+    t27 = () => {
+      setShowSignsGrid(true);
+      disableInteraction();
+      trackScreenEvent("open");
+    };
+    $[17] = disableInteraction;
+    $[18] = trackScreenEvent;
+    $[19] = t27;
+  } else {
+    t27 = $[19];
+  }
+  const onOpenSignsGrid = t27;
+  let t28;
+  if ($[20] !== enableInteraction || $[21] !== showModal || $[22] !== trackScreenEvent) {
+    t28 = () => {
+      if (showModal) {
+        setShowModal(false);
+        return;
+      }
+      setShowSignsGrid(false);
       setShowModal(false);
-      return;
-    }
-    setShowSignsGrid(false);
-    setShowModal(false); // can't have a modal if signs are closed
-    enableInteraction();
-    trackScreenEvent('close');
-  }, [showModal, setShowSignsGrid, setShowModal, enableInteraction, trackScreenEvent]);
-  const onSelectSign = useCallback((e, id) => {
-    e.stopPropagation();
-    const foundSignIndex = signs.findIndex(s => s.id === id);
-    setSelectedSign(foundSignIndex);
-    setShowModal(true);
-    trackScreenEvent('select_sign', signs[foundSignIndex]);
-  }, [signs, setSelectedSign, trackScreenEvent]);
-  const onCloseModal = useCallback(() => {
-    setShowModal(false);
-    trackScreenEvent('close_sign');
-  }, [setShowModal, trackScreenEvent]);
-  const computeSignsGridProgress = useCallback(({
-    active: dragActive,
-    movement: [, my],
-    velocity: [, vy]
-  }) => {
-    // console.log({
-    //     dragActive
-    // });
-    const windowHeight = typeof window !== 'undefined' ? window.innerHeight : 0;
-    const progress = windowHeight > 0 ? Math.max(0, my) / (windowHeight * 0.8) : 0;
-    const reachedThreshold = vy > 0.3 || Math.abs(progress) > 0.3;
-    if (!dragActive) {
-      if (reachedThreshold) {
-        onCloseSignsGrid();
+      enableInteraction();
+      trackScreenEvent("close");
+    };
+    $[20] = enableInteraction;
+    $[21] = showModal;
+    $[22] = trackScreenEvent;
+    $[23] = t28;
+  } else {
+    t28 = $[23];
+  }
+  const onCloseSignsGrid = t28;
+  let t29;
+  if ($[24] !== signs$1 || $[25] !== trackScreenEvent) {
+    t29 = (e, id) => {
+      e.stopPropagation();
+      const foundSignIndex = signs$1.findIndex(s => s.id === id);
+      setSelectedSign(foundSignIndex);
+      setShowModal(true);
+      trackScreenEvent("select_sign", signs$1[foundSignIndex]);
+    };
+    $[24] = signs$1;
+    $[25] = trackScreenEvent;
+    $[26] = t29;
+  } else {
+    t29 = $[26];
+  }
+  const onSelectSign = t29;
+  let t30;
+  if ($[27] !== trackScreenEvent) {
+    t30 = () => {
+      setShowModal(false);
+      trackScreenEvent("close_sign");
+    };
+    $[27] = trackScreenEvent;
+    $[28] = t30;
+  } else {
+    t30 = $[28];
+  }
+  const onCloseModal = t30;
+  let t31;
+  if ($[29] !== onCloseSignsGrid) {
+    t31 = t32 => {
+      const {
+        active: dragActive,
+        movement: t33,
+        velocity: t34
+      } = t32;
+      const [, my] = t33;
+      const [, vy] = t34;
+      const windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
+      const progress = windowHeight > 0 ? Math.max(0, my) / (windowHeight * 0.8) : 0;
+      const reachedThreshold = vy > 0.3 || Math.abs(progress) > 0.3;
+      if (!dragActive) {
+        if (reachedThreshold) {
+          onCloseSignsGrid();
+        }
+        return reachedThreshold ? 0 : 1;
       }
-      return reachedThreshold ? 0 : 1;
-    }
-    return 1 - progress;
-  }, [onCloseSignsGrid]);
-  const {
-    bind: bindSignsDrag,
-    progress: showSignsGridProgress
-  } = useDragProgress({
-    disabled: !isView,
-    progress: showSignsGrid ? 1 : 0,
-    computeProgress: computeSignsGridProgress,
-    springParams: {
+      return 1 - progress;
+    };
+    $[29] = onCloseSignsGrid;
+    $[30] = t31;
+  } else {
+    t31 = $[30];
+  }
+  const computeSignsGridProgress = t31;
+  const t32 = !isView;
+  const t33 = showSignsGrid ? 1 : 0;
+  let t34;
+  let t35;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = {
       config: {
         tension: 300,
         friction: 30
       }
-    },
-    dragOptions: {
+    };
+    t35 = {
       pointer: {
         keys: false
       }
-    }
-  });
-
-  // console.log(showSignsGrid);
-
-  const computeModalProgress = useCallback(({
-    active: dragActive_0,
-    movement: [, my_0],
-    velocity: [, vy_0]
-  }) => {
-    const damper = 0.5;
-    const windowHeight_0 = typeof window !== 'undefined' ? window.innerHeight : 0;
-    const p = windowHeight_0 > 0 ? Math.max(0, my_0) / windowHeight_0 : 0;
-    const progress_0 = p * damper;
-    const reachedThreshold_0 = vy_0 > 0.3 || Math.abs(p) > 0.3;
-    if (!dragActive_0) {
-      if (reachedThreshold_0) {
-        onCloseModal();
-      }
-      return reachedThreshold_0 ? 0 : 1;
-    }
-    return 1 - progress_0;
-  }, [showModal, onCloseModal]);
+    };
+    $[31] = t34;
+    $[32] = t35;
+  } else {
+    t34 = $[31];
+    t35 = $[32];
+  }
+  let t36;
+  if ($[33] !== computeSignsGridProgress || $[34] !== t32 || $[35] !== t33) {
+    t36 = {
+      disabled: t32,
+      progress: t33,
+      computeProgress: computeSignsGridProgress,
+      springParams: t34,
+      dragOptions: t35
+    };
+    $[33] = computeSignsGridProgress;
+    $[34] = t32;
+    $[35] = t33;
+    $[36] = t36;
+  } else {
+    t36 = $[36];
+  }
   const {
-    bind: bindModalDrag,
-    progress: showModalProgress
-  } = useDragProgress({
-    disabled: !isView,
-    progress: showModal ? 1 : 0,
-    computeProgress: computeModalProgress,
-    springParams: {
+    bind: bindSignsDrag,
+    progress: showSignsGridProgress
+  } = useDragProgress(t36);
+  let t37;
+  if ($[37] !== onCloseModal) {
+    t37 = t38 => {
+      const {
+        active: dragActive_0,
+        movement: t39,
+        velocity: t40
+      } = t38;
+      const [, my_0] = t39;
+      const [, vy_0] = t40;
+      const windowHeight_0 = typeof window !== "undefined" ? window.innerHeight : 0;
+      const p = windowHeight_0 > 0 ? Math.max(0, my_0) / windowHeight_0 : 0;
+      const progress_0 = p * 0.5;
+      const reachedThreshold_0 = vy_0 > 0.3 || Math.abs(p) > 0.3;
+      if (!dragActive_0) {
+        if (reachedThreshold_0) {
+          onCloseModal();
+        }
+        return reachedThreshold_0 ? 0 : 1;
+      }
+      return 1 - progress_0;
+    };
+    $[37] = onCloseModal;
+    $[38] = t37;
+  } else {
+    t37 = $[38];
+  }
+  const computeModalProgress = t37;
+  const t38 = !isView;
+  const t39 = showModal ? 1 : 0;
+  let t40;
+  let t41;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t40 = {
       config: {
         tension: 300,
         friction: 30
       }
-    },
-    dragOptions: {
+    };
+    t41 = {
       pointer: {
         keys: false
       }
-    }
-  });
-  const getHeaderStyles = spring => ({
-    transform: spring.to(p_0 => `translateY(${ -100 * p_0 * (1 - p_0)}%)`),
-    opacity: spring.to(p_1 => p_1 > 0.25 ? 1 - p_1 : 1)
-  });
-  const getSignsContainerStyles = spring_0 => ({
-    opacity: spring_0,
-    pointerEvents: spring_0.to(p_2 => p_2 < 0.25 ? 'none' : 'auto')
-  });
-  const getSignStyles = spring_1 => ({
-    opacity: spring_1,
-    transform: spring_1.to(p_3 => `translateY(${3 * (1 - p_3) ** 5}rem) scale(${1 - 0.25 * (1 - p_3)})`)
-  });
-  const getAuthorStyles = spring_2 => ({
-    transform: spring_2.to(p_4 => `translateY(${2 * (1 - p_4)}rem)`),
-    opacity: spring_2
-  });
-  const getBackdropStyles = spring_3 => ({
-    opacity: spring_3
-  });
-  const getModalStyles = spring_4 => ({
-    transform: spring_4.to(p_5 => `translateY(${100 * (1 - (p_5 < 0.2 ? 0.1 * p_5 + p_5 : p_5))}%)`),
-    pointerEvents: spring_4.to(p_6 => p_6 < 0.1 ? 'none' : 'auto')
-  });
-
-  // for editor purposes
+    };
+    $[39] = t40;
+    $[40] = t41;
+  } else {
+    t40 = $[39];
+    t41 = $[40];
+  }
+  let t42;
+  if ($[41] !== computeModalProgress || $[42] !== t38 || $[43] !== t39) {
+    t42 = {
+      disabled: t38,
+      progress: t39,
+      computeProgress: computeModalProgress,
+      springParams: t40,
+      dragOptions: t41
+    };
+    $[41] = computeModalProgress;
+    $[42] = t38;
+    $[43] = t39;
+    $[44] = t42;
+  } else {
+    t42 = $[44];
+  }
+  const {
+    bind: bindModalDrag,
+    progress: showModalProgress
+  } = useDragProgress(t42);
+  const getHeaderStyles = _temp3;
+  const getSignsContainerStyles = _temp5;
+  const getSignStyles = _temp7;
+  const getAuthorStyles = _temp9;
+  const getBackdropStyles = _temp0;
+  const getModalStyles = _temp11;
   const screenState = useScreenState();
-  useEffect(() => {
-    setShowSignsGrid(false);
-    if (screenState === null || screenState === 'intro') {
+  let t43;
+  let t44;
+  if ($[45] !== screenState) {
+    t43 = () => {
       setShowSignsGrid(false);
-      setShowModal(false);
-    }
-    if (screenState === 'grid') {
-      setShowSignsGrid(true);
-      setSelectedSign(null);
-      setShowModal(false);
-    }
-    if (screenState !== null && screenState.includes('signs')) {
-      const index_0 = screenState.split('.').pop();
-      setShowSignsGrid(true);
-      setShowModal(true);
-      setSelectedSign(index_0);
-    }
-  }, [screenState, setShowSignsGrid, setShowModal, setSelectedSign]);
-  useEffect(() => {
-    const keyup = e_0 => {
-      if (e_0.key === 'Escape') {
-        if (showModal) {
-          onCloseModal();
-          return;
-        }
-        if (showSignsGrid) {
-          onCloseSignsGrid();
-        }
+      if (screenState === null || screenState === "intro") {
+        setShowSignsGrid(false);
+        setShowModal(false);
+      }
+      if (screenState === "grid") {
+        setShowSignsGrid(true);
+        setSelectedSign(null);
+        setShowModal(false);
+      }
+      if (screenState !== null && screenState.includes("signs")) {
+        const index_0 = screenState.split(".").pop();
+        setShowSignsGrid(true);
+        setShowModal(true);
+        setSelectedSign(index_0);
       }
     };
-    document.addEventListener('keyup', keyup);
-    return () => {
-      document.removeEventListener('keyup', keyup);
+    t44 = [screenState, setShowSignsGrid, setShowModal, setSelectedSign];
+    $[45] = screenState;
+    $[46] = t43;
+    $[47] = t44;
+  } else {
+    t43 = $[46];
+    t44 = $[47];
+  }
+  useEffect(t43, t44);
+  let t45;
+  let t46;
+  if ($[48] !== onCloseModal || $[49] !== onCloseSignsGrid || $[50] !== showModal || $[51] !== showSignsGrid) {
+    t45 = () => {
+      const keyup = e_0 => {
+        if (e_0.key === "Escape") {
+          if (showModal) {
+            onCloseModal();
+            return;
+          }
+          if (showSignsGrid) {
+            onCloseSignsGrid();
+          }
+        }
+      };
+      document.addEventListener("keyup", keyup);
+      return () => {
+        document.removeEventListener("keyup", keyup);
+      };
     };
-  }, [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, {
+    t46 = [showModal, onCloseModal, showSignsGrid, onCloseSignsGrid];
+    $[48] = onCloseModal;
+    $[49] = onCloseSignsGrid;
+    $[50] = showModal;
+    $[51] = showSignsGrid;
+    $[52] = t45;
+    $[53] = t46;
+  } else {
+    t45 = $[52];
+    t46 = $[53];
+  }
+  useEffect(t45, t46);
+  let t47;
+  if ($[54] !== className || $[55] !== isPlaceholder) {
+    t47 = classNames([styles.container, className, {
       [styles.isPlaceholder]: isPlaceholder
-    }]),
-    "data-screen-ready": true,
-    ...(showSignsGrid ? stopDragEventsPropagation : null),
-    children: [!isView ? /*#__PURE__*/jsx("div", {
+    }]);
+    $[54] = className;
+    $[55] = isPlaceholder;
+    $[56] = t47;
+  } else {
+    t47 = $[56];
+  }
+  const t48 = showSignsGrid ? stopDragEventsPropagation : null;
+  let t49;
+  if ($[57] !== isView) {
+    t49 = !isView ? /*#__PURE__*/jsx("div", {
       ...mouseBlocker
-    }) : null, /*#__PURE__*/jsx(Container, {
-      width: width,
-      height: height,
-      className: styles.content,
-      children: /*#__PURE__*/jsxs(Layout, {
-        className: styles.layout,
-        style: !isPlaceholder ? {
-          paddingLeft: spacing,
-          paddingRight: spacing,
-          paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
-          paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
-        } : null,
-        height: height * 0.8,
-        children: [isPlaceholder ? /*#__PURE__*/jsx("div", {
-          className: styles.placeholderGrid,
-          children: [...Array(12).keys()].map(() => /*#__PURE__*/jsx("div", {
-            className: styles.placeholderItem
-          }))
-        }) : null, /*#__PURE__*/jsxs(animated.div, {
-          className: styles.headerContainer,
-          style: getHeaderStyles(showSignsGridProgress),
-          children: [/*#__PURE__*/jsx(ScreenElement, {
-            emptyClassName: styles.emptyText,
-            children: hasTitle ? /*#__PURE__*/jsx(Heading, {
-              className: styles.title,
-              ...title
-            }) : /*#__PURE__*/jsx("img", {
-              src: Astrologie,
-              alt: "",
-              className: styles.titleImage
-            })
-          }), /*#__PURE__*/jsx(ScreenElement, {
-            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "EQdIAR",
-              defaultMessage: "Description"
-            }),
-            emptyClassName: styles.emptyText,
-            isEmpty: !hasDescription,
-            children: hasDescription ? /*#__PURE__*/jsx(Text, {
-              className: styles.description,
-              ...description
-            }) : null
-          }, "description")]
-        }), /*#__PURE__*/jsx(ScreenElement, {
-          emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-            id: "bv3rRe",
-            defaultMessage: "Button"
+    }) : null;
+    $[57] = isView;
+    $[58] = t49;
+  } else {
+    t49 = $[58];
+  }
+  let t50;
+  if ($[59] !== current || $[60] !== isPlaceholder || $[61] !== isPreview || $[62] !== spacing || $[63] !== viewerBottomHeight || $[64] !== viewerTopHeight) {
+    t50 = !isPlaceholder ? {
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
+      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
+    } : null;
+    $[59] = current;
+    $[60] = isPlaceholder;
+    $[61] = isPreview;
+    $[62] = spacing;
+    $[63] = viewerBottomHeight;
+    $[64] = viewerTopHeight;
+    $[65] = t50;
+  } else {
+    t50 = $[65];
+  }
+  const t51 = height * 0.8;
+  let t52;
+  if ($[66] !== isPlaceholder) {
+    t52 = isPlaceholder ? /*#__PURE__*/jsx("div", {
+      className: styles.placeholderGrid,
+      children: [...Array(12).keys()].map(_temp12)
+    }) : null;
+    $[66] = isPlaceholder;
+    $[67] = t52;
+  } else {
+    t52 = $[67];
+  }
+  let t53;
+  if ($[68] !== showSignsGridProgress) {
+    t53 = getHeaderStyles(showSignsGridProgress);
+    $[68] = showSignsGridProgress;
+    $[69] = t53;
+  } else {
+    t53 = $[69];
+  }
+  let t54;
+  if ($[70] !== hasTitle || $[71] !== title) {
+    t54 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyClassName: styles.emptyText,
+      children: hasTitle ? /*#__PURE__*/jsx(Heading, {
+        className: styles.title,
+        ...title
+      }) : /*#__PURE__*/jsx("img", {
+        src: Astrologie,
+        alt: "",
+        className: styles.titleImage
+      })
+    });
+    $[70] = hasTitle;
+    $[71] = title;
+    $[72] = t54;
+  } else {
+    t54 = $[72];
+  }
+  let t55;
+  if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+    t55 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "EQdIAR",
+      defaultMessage: "Description"
+    });
+    $[73] = t55;
+  } else {
+    t55 = $[73];
+  }
+  const t56 = !hasDescription;
+  let t57;
+  if ($[74] !== description || $[75] !== hasDescription) {
+    t57 = hasDescription ? /*#__PURE__*/jsx(Text, {
+      className: styles.description,
+      ...description
+    }) : null;
+    $[74] = description;
+    $[75] = hasDescription;
+    $[76] = t57;
+  } else {
+    t57 = $[76];
+  }
+  let t58;
+  if ($[77] !== t56 || $[78] !== t57) {
+    t58 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyLabel: t55,
+      emptyClassName: styles.emptyText,
+      isEmpty: t56,
+      children: t57
+    }, "description");
+    $[77] = t56;
+    $[78] = t57;
+    $[79] = t58;
+  } else {
+    t58 = $[79];
+  }
+  let t59;
+  if ($[80] !== t53 || $[81] !== t54 || $[82] !== t58) {
+    t59 = /*#__PURE__*/jsxs(animated.div, {
+      className: styles.headerContainer,
+      style: t53,
+      children: [t54, t58]
+    });
+    $[80] = t53;
+    $[81] = t54;
+    $[82] = t58;
+    $[83] = t59;
+  } else {
+    t59 = $[83];
+  }
+  let t60;
+  if ($[84] === Symbol.for("react.memo_cache_sentinel")) {
+    t60 = /*#__PURE__*/jsx(FormattedMessage, {
+      id: "bv3rRe",
+      defaultMessage: "Button"
+    });
+    $[84] = t60;
+  } else {
+    t60 = $[84];
+  }
+  const t61 = !hasButton;
+  let t62;
+  if ($[85] !== button || $[86] !== current || $[87] !== hasButton || $[88] !== isPlaceholder || $[89] !== isPreview || $[90] !== onOpenSignsGrid) {
+    t62 = hasButton ? /*#__PURE__*/jsx(Button, {
+      className: styles.button,
+      type: "button",
+      onClick: onOpenSignsGrid,
+      withoutBootstrapStyles: true,
+      focusable: current && !isPreview && !isPlaceholder,
+      ...button,
+      children: /*#__PURE__*/jsx(Text, {
+        className: styles.buttonLabel,
+        ...button,
+        inline: true
+      })
+    }) : null;
+    $[85] = button;
+    $[86] = current;
+    $[87] = hasButton;
+    $[88] = isPlaceholder;
+    $[89] = isPreview;
+    $[90] = onOpenSignsGrid;
+    $[91] = t62;
+  } else {
+    t62 = $[91];
+  }
+  let t63;
+  if ($[92] !== t61 || $[93] !== t62) {
+    t63 = /*#__PURE__*/jsx(ScreenElement, {
+      emptyLabel: t60,
+      emptyClassName: styles.emptyText,
+      isEmpty: t61,
+      children: t62
+    });
+    $[92] = t61;
+    $[93] = t62;
+    $[94] = t63;
+  } else {
+    t63 = $[94];
+  }
+  let t64;
+  if ($[95] !== intl || $[96] !== isPlaceholder || $[97] !== isPreview || $[98] !== isView || $[99] !== onCloseSignsGrid || $[100] !== showModal || $[101] !== showSignsGrid || $[102] !== showSignsGridProgress) {
+    t64 = isView && !isPlaceholder ? /*#__PURE__*/jsx(animated.div, {
+      className: styles.header,
+      style: {
+        opacity: showSignsGridProgress,
+        pointerEvents: showSignsGridProgress.to(_temp13)
+      },
+      children: /*#__PURE__*/jsx("div", {
+        className: styles.buttons,
+        children: /*#__PURE__*/jsx(Button, {
+          className: styles.close,
+          onClick: onCloseSignsGrid,
+          label: intl.formatMessage({
+            id: "dj/p/q",
+            defaultMessage: "Close"
           }),
-          emptyClassName: styles.emptyText,
-          isEmpty: !hasButton,
-          children: hasButton ? /*#__PURE__*/jsx(Button, {
-            className: styles.button,
-            type: "button",
-            onClick: onOpenSignsGrid,
-            withoutBootstrapStyles: true,
-            focusable: current && !isPreview && !isPlaceholder,
-            ...button,
-            children: /*#__PURE__*/jsx(Text, {
-              className: styles.buttonLabel,
-              ...button,
-              inline: true
-            })
-          }) : null
-        }), isView && !isPlaceholder ? /*#__PURE__*/jsx(animated.div, {
-          className: styles.header,
-          style: {
-            opacity: showSignsGridProgress,
-            pointerEvents: showSignsGridProgress.to(p_7 => p_7 < 0.25 ? 'none' : 'auto')
-          },
-          children: /*#__PURE__*/jsx("div", {
-            className: styles.buttons,
-            children: /*#__PURE__*/jsx(Button, {
-              className: styles.close,
-              onClick: onCloseSignsGrid,
-              label: intl.formatMessage({
-                id: "dj/p/q",
-                defaultMessage: "Close"
-              }),
-              iconPosition: "right",
-              icon: /*#__PURE__*/jsx("svg", {
-                className: styles.closeIcon,
-                xmlns: "http://www.w3.org/2000/svg",
-                width: "10",
-                height: "16",
-                viewBox: "0 0 10 16",
-                fill: "currentColor",
-                children: /*#__PURE__*/jsx("polygon", {
-                  points: "9.95 4.11 8.89 3.05 5 6.94 1.11 3.05 0.05 4.11 3.94 8 0.05 11.89 1.11 12.95 5 9.06 8.89 12.95 9.95 11.89 6.06 8 9.95 4.11"
-                })
-              }),
-              focusable: !isPreview && !isPlaceholder && (showSignsGrid || showModal),
-              withoutStyle: true
-            })
-          })
-        }) : null, !isPlaceholder ? /*#__PURE__*/jsxs(animated.div, {
-          className: styles.signsGridContainer,
-          style: getSignsContainerStyles(showSignsGridProgress),
-          ...bindSignsDrag(),
-          children: [/*#__PURE__*/jsx(Keypad, {
-            columns: 3,
-            spacing: 5,
-            withoutCloseButton: true,
-            items: signs.map(sign => {
-              const {
-                id: id_0 = null
-              } = sign || {};
-              return /*#__PURE__*/jsx(animated.div, {
-                className: styles.sign,
-                style: getSignStyles(showSignsGridProgress),
-                children: /*#__PURE__*/jsx(SignCard, {
-                  sign: sign,
-                  focusable: !isPreview && !isPlaceholder && showSignsGrid && !showModal,
-                  onClick: e_1 => onSelectSign(e_1, id_0)
-                }, id_0)
-              }, id_0);
+          iconPosition: "right",
+          icon: /*#__PURE__*/jsx("svg", {
+            className: styles.closeIcon,
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "10",
+            height: "16",
+            viewBox: "0 0 10 16",
+            fill: "currentColor",
+            children: /*#__PURE__*/jsx("polygon", {
+              points: "9.95 4.11 8.89 3.05 5 6.94 1.11 3.05 0.05 4.11 3.94 8 0.05 11.89 1.11 12.95 5 9.06 8.89 12.95 9.95 11.89 6.06 8 9.95 4.11"
             })
-          }), /*#__PURE__*/jsx(ScreenElement, {
-            emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
-              id: "xYqGzM",
-              defaultMessage: "Author"
-            }),
-            emptyClassName: styles.emptyText,
-            isEmpty: !hasAuthor,
-            children: hasAuthor && !isPlaceholder ? /*#__PURE__*/jsx(Author, {
-              author: author,
-              className: styles.author,
-              collaboratorClassName: styles.collaborator,
-              backgroundClassName: styles.authorBackground,
-              shouldLoad: mediaShouldLoad,
-              style: getAuthorStyles(showSignsGridProgress)
-            }) : null
-          }, "author")]
-        }) : null, /*#__PURE__*/jsx(animated.div, {
-          className: styles.modal,
-          style: getModalStyles(showModalProgress),
-          ...bindModalDrag(),
-          children: /*#__PURE__*/jsx(SignModal, {
-            width: width,
-            height: height,
-            sign: signs[selectedSign],
-            subtitle: signSubtitle,
-            focusable: !isPreview && !isPlaceholder && showModal,
-            onClick: onCloseModal
-          })
-        }), !isPlaceholder ? /*#__PURE__*/jsx(animated.div, {
-          className: styles.backdrop,
-          style: getBackdropStyles(showSignsGridProgress),
-          children: popupBackgroundUrl !== null ? /*#__PURE__*/jsx("video", {
-            className: styles.videoBackdrop,
-            autoPlay: true,
-            muted: true,
-            loop: true,
-            playsInline: true,
-            children: /*#__PURE__*/jsx("source", {
-              src: popupBackgroundUrl,
-              type: "video/mp4"
-            })
-          }) : null
-        }) : null]
+          }),
+          focusable: !isPreview && !isPlaceholder && (showSignsGrid || showModal),
+          withoutStyle: true
+        })
       })
-    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+    }) : null;
+    $[95] = intl;
+    $[96] = isPlaceholder;
+    $[97] = isPreview;
+    $[98] = isView;
+    $[99] = onCloseSignsGrid;
+    $[100] = showModal;
+    $[101] = showSignsGrid;
+    $[102] = showSignsGridProgress;
+    $[103] = t64;
+  } else {
+    t64 = $[103];
+  }
+  let t65;
+  if ($[104] !== author || $[105] !== bindSignsDrag || $[106] !== hasAuthor || $[107] !== isPlaceholder || $[108] !== isPreview || $[109] !== mediaShouldLoad || $[110] !== onSelectSign || $[111] !== showModal || $[112] !== showSignsGrid || $[113] !== showSignsGridProgress || $[114] !== signs$1) {
+    t65 = !isPlaceholder ? /*#__PURE__*/jsxs(animated.div, {
+      className: styles.signsGridContainer,
+      style: getSignsContainerStyles(showSignsGridProgress),
+      ...bindSignsDrag(),
+      children: [/*#__PURE__*/jsx(Keypad, {
+        columns: 3,
+        spacing: 5,
+        withoutCloseButton: true,
+        items: signs$1.map(sign => {
+          const {
+            id: t66
+          } = sign || {};
+          const id_0 = t66 === undefined ? null : t66;
+          return /*#__PURE__*/jsx(animated.div, {
+            className: styles.sign,
+            style: getSignStyles(showSignsGridProgress),
+            children: /*#__PURE__*/jsx(SignCard, {
+              sign: sign,
+              focusable: !isPreview && !isPlaceholder && showSignsGrid && !showModal,
+              onClick: e_1 => onSelectSign(e_1, id_0)
+            }, id_0)
+          }, id_0);
+        })
+      }), /*#__PURE__*/jsx(ScreenElement, {
+        emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+          id: "xYqGzM",
+          defaultMessage: "Author"
+        }),
+        emptyClassName: styles.emptyText,
+        isEmpty: !hasAuthor,
+        children: hasAuthor && !isPlaceholder ? /*#__PURE__*/jsx(Author, {
+          author: author,
+          className: styles.author,
+          collaboratorClassName: styles.collaborator,
+          backgroundClassName: styles.authorBackground,
+          shouldLoad: mediaShouldLoad,
+          style: getAuthorStyles(showSignsGridProgress)
+        }) : null
+      }, "author")]
+    }) : null;
+    $[104] = author;
+    $[105] = bindSignsDrag;
+    $[106] = hasAuthor;
+    $[107] = isPlaceholder;
+    $[108] = isPreview;
+    $[109] = mediaShouldLoad;
+    $[110] = onSelectSign;
+    $[111] = showModal;
+    $[112] = showSignsGrid;
+    $[113] = showSignsGridProgress;
+    $[114] = signs$1;
+    $[115] = t65;
+  } else {
+    t65 = $[115];
+  }
+  let t66;
+  if ($[116] !== showModalProgress) {
+    t66 = getModalStyles(showModalProgress);
+    $[116] = showModalProgress;
+    $[117] = t66;
+  } else {
+    t66 = $[117];
+  }
+  let t67;
+  if ($[118] !== bindModalDrag) {
+    t67 = bindModalDrag();
+    $[118] = bindModalDrag;
+    $[119] = t67;
+  } else {
+    t67 = $[119];
+  }
+  const t68 = signs$1[selectedSign];
+  const t69 = !isPreview && !isPlaceholder && showModal;
+  let t70;
+  if ($[120] !== height || $[121] !== onCloseModal || $[122] !== signSubtitle || $[123] !== t68 || $[124] !== t69 || $[125] !== width) {
+    t70 = /*#__PURE__*/jsx(SignModal, {
+      width: width,
+      height: height,
+      sign: t68,
+      subtitle: signSubtitle,
+      focusable: t69,
+      onClick: onCloseModal
+    });
+    $[120] = height;
+    $[121] = onCloseModal;
+    $[122] = signSubtitle;
+    $[123] = t68;
+    $[124] = t69;
+    $[125] = width;
+    $[126] = t70;
+  } else {
+    t70 = $[126];
+  }
+  let t71;
+  if ($[127] !== t66 || $[128] !== t67 || $[129] !== t70) {
+    t71 = /*#__PURE__*/jsx(animated.div, {
+      className: styles.modal,
+      style: t66,
+      ...t67,
+      children: t70
+    });
+    $[127] = t66;
+    $[128] = t67;
+    $[129] = t70;
+    $[130] = t71;
+  } else {
+    t71 = $[130];
+  }
+  let t72;
+  if ($[131] !== isPlaceholder || $[132] !== popupBackgroundUrl || $[133] !== showSignsGridProgress) {
+    t72 = !isPlaceholder ? /*#__PURE__*/jsx(animated.div, {
+      className: styles.backdrop,
+      style: getBackdropStyles(showSignsGridProgress),
+      children: popupBackgroundUrl !== null ? /*#__PURE__*/jsx("video", {
+        className: styles.videoBackdrop,
+        autoPlay: true,
+        muted: true,
+        loop: true,
+        playsInline: true,
+        children: /*#__PURE__*/jsx("source", {
+          src: popupBackgroundUrl,
+          type: "video/mp4"
+        })
+      }) : null
+    }) : null;
+    $[131] = isPlaceholder;
+    $[132] = popupBackgroundUrl;
+    $[133] = showSignsGridProgress;
+    $[134] = t72;
+  } else {
+    t72 = $[134];
+  }
+  let t73;
+  if ($[135] !== t50 || $[136] !== t51 || $[137] !== t52 || $[138] !== t59 || $[139] !== t63 || $[140] !== t64 || $[141] !== t65 || $[142] !== t71 || $[143] !== t72) {
+    t73 = /*#__PURE__*/jsxs(Layout, {
+      className: styles.layout,
+      style: t50,
+      height: t51,
+      children: [t52, t59, t63, t64, t65, t71, t72]
+    });
+    $[135] = t50;
+    $[136] = t51;
+    $[137] = t52;
+    $[138] = t59;
+    $[139] = t63;
+    $[140] = t64;
+    $[141] = t65;
+    $[142] = t71;
+    $[143] = t72;
+    $[144] = t73;
+  } else {
+    t73 = $[144];
+  }
+  let t74;
+  if ($[145] !== height || $[146] !== t73 || $[147] !== width) {
+    t74 = /*#__PURE__*/jsx(Container, {
+      width: width,
+      height: height,
+      className: styles.content,
+      children: t73
+    });
+    $[145] = height;
+    $[146] = t73;
+    $[147] = width;
+    $[148] = t74;
+  } else {
+    t74 = $[148];
+  }
+  let t75;
+  if ($[149] !== background || $[150] !== backgroundPlaying || $[151] !== customMediaRef || $[152] !== height || $[153] !== isPlaceholder || $[154] !== mediaRef || $[155] !== mediaShouldLoad || $[156] !== muted || $[157] !== resolution || $[158] !== width) {
+    t75 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -1000,9 +1424,104 @@ function UrbaniaHoroscope({
       shouldLoad: mediaShouldLoad,
       mediaRef: mergeRefs(mediaRef, customMediaRef),
       className: styles.background
-    }) : null]
+    }) : null;
+    $[149] = background;
+    $[150] = backgroundPlaying;
+    $[151] = customMediaRef;
+    $[152] = height;
+    $[153] = isPlaceholder;
+    $[154] = mediaRef;
+    $[155] = mediaShouldLoad;
+    $[156] = muted;
+    $[157] = resolution;
+    $[158] = width;
+    $[159] = t75;
+  } else {
+    t75 = $[159];
+  }
+  let t76;
+  if ($[160] !== t47 || $[161] !== t48 || $[162] !== t49 || $[163] !== t74 || $[164] !== t75) {
+    t76 = /*#__PURE__*/jsxs("div", {
+      className: t47,
+      "data-screen-ready": true,
+      ...t48,
+      children: [t49, t74, t75]
+    });
+    $[160] = t47;
+    $[161] = t48;
+    $[162] = t49;
+    $[163] = t74;
+    $[164] = t75;
+    $[165] = t76;
+  } else {
+    t76 = $[165];
+  }
+  return t76;
+}
+function _temp13(p_7) {
+  return p_7 < 0.25 ? "none" : "auto";
+}
+function _temp12() {
+  return /*#__PURE__*/jsx("div", {
+    className: styles.placeholderItem
   });
 }
+function _temp11(spring_4) {
+  return {
+    transform: spring_4.to(_temp1),
+    pointerEvents: spring_4.to(_temp10)
+  };
+}
+function _temp10(p_6) {
+  return p_6 < 0.1 ? "none" : "auto";
+}
+function _temp1(p_5) {
+  return `translateY(${100 * (1 - (p_5 < 0.2 ? 0.1 * p_5 + p_5 : p_5))}%)`;
+}
+function _temp0(spring_3) {
+  return {
+    opacity: spring_3
+  };
+}
+function _temp9(spring_2) {
+  return {
+    transform: spring_2.to(_temp8),
+    opacity: spring_2
+  };
+}
+function _temp8(p_4) {
+  return `translateY(${2 * (1 - p_4)}rem)`;
+}
+function _temp7(spring_1) {
+  return {
+    opacity: spring_1,
+    transform: spring_1.to(_temp6)
+  };
+}
+function _temp6(p_3) {
+  return `translateY(${3 * (1 - p_3) ** 5}rem) scale(${1 - 0.25 * (1 - p_3)})`;
+}
+function _temp5(spring_0) {
+  return {
+    opacity: spring_0,
+    pointerEvents: spring_0.to(_temp4)
+  };
+}
+function _temp4(p_2) {
+  return p_2 < 0.25 ? "none" : "auto";
+}
+function _temp3(spring) {
+  return {
+    transform: spring.to(_temp),
+    opacity: spring.to(_temp2)
+  };
+}
+function _temp2(p_1) {
+  return p_1 > 0.25 ? 1 - p_1 : 1;
+}
+function _temp(p_0) {
+  return `translateY(${ -100 * p_0 * (1 - p_0)}%)`;
+}
 
 var definition = [{
   id: 'urbania-horoscope',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-horoscope",
-    "version": "0.4.86",
+    "version": "0.4.87",
     "private": false,
     "description": "",
     "keywords": [
@@ -90,6 +90,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "24785d81e840b81c58dc101ba7305d088e61f0e0",
+    "gitHead": "2d1f40fa6f172c05d88ae59d4d356140f849edc4",
     "types": "es/index.d.ts"
 }