@micromag/screen-urbania-horoscope 0.3.251 → 0.3.252

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +68 -49
  3. package/lib/index.js +68 -49
  4. package/package.json +14 -14
package/assets/css/styles.css CHANGED
@@ -1,3 +1,3 @@
1
1
  .micromag-screen-urbania-horoscope-sign-card-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:90px;height:90px;margin-bottom:5px;padding:5px;border:0;border-radius:10px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;background-color:#1d3af2;-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7));-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-sign-card-container:hover{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);z-index:2}.micromag-screen-urbania-horoscope-sign-card-container:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-urbania-horoscope-sign-card-placeholder{width:30px;height:30px;margin:1px;background-color:#b3b3b3}.micromag-screen-urbania-horoscope-sign-card-thumbnail{max-height:50px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-urbania-horoscope-sign-card-name{width:100%;margin-bottom:.4rem!important;padding:2px 5px 0!important;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 2px rgba(255,250,0,.6);box-shadow:0 0 0 2px rgba(255,250,0,.6);color:#222;font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:700}.micromag-screen-urbania-horoscope-sign-card-date{color:#fffa00;font-family:Agrandir,sans-serif;font-size:8px}.micromag-screen-urbania-horoscope-sign-card-arrow{display:inline-block;padding-right:5px;padding-bottom:2px;font-size:20px;vertical-align:middle}.micromag-screen-urbania-horoscope-sign-card-emptyText{width:100%;margin-top:5px;padding:10px}
2
2
  .micromag-screen-urbania-horoscope-sign-modal-modalButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-sign-modal-container{width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-sign-modal-disabled.micromag-screen-urbania-horoscope-sign-modal-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-hidden.micromag-screen-urbania-horoscope-sign-modal-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-sign-modal-placeholder.micromag-screen-urbania-horoscope-sign-modal-container .micromag-screen-urbania-horoscope-sign-modal-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-sign-modal-container{position:relative}.micromag-screen-urbania-horoscope-sign-modal-modalButton{-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);-o-transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67);transition:transform .3s cubic-bezier(.41,1.69,.04,.67), -webkit-transform .3s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-sign-modal-modalButton:active{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}.micromag-screen-urbania-horoscope-sign-modal-modal{margin:52px 18px 30px;padding:10px;border-radius:22px;background-color:#0ff;-webkit-box-shadow:0 0 4px #010f66;box-shadow:0 0 4px #010f66;color:#1d3af2}.micromag-screen-urbania-horoscope-sign-modal-name{padding:7px auto 5px;font-family:Agrandir Tight,sans-serif;font-weight:900}.micromag-screen-urbania-horoscope-sign-modal-name,.micromag-screen-urbania-horoscope-sign-modal-wordContainer{text-transform:uppercase}.micromag-screen-urbania-horoscope-sign-modal-wordContainer{margin-bottom:5px;padding:6px 6px 3px;border:1px solid #1d3af2;border-radius:9px}.micromag-screen-urbania-horoscope-sign-modal-wordOfTheWeek{padding-bottom:2px;font-family:Agrandir Tight,sans-serif;font-size:8px;font-weight:500;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-sign-modal-word{font-family:Agrandir Narrow,sans-serif;font-size:16px;font-weight:700}.micromag-screen-urbania-horoscope-sign-modal-description{padding-bottom:5px;font-family:Roboto,sans-serif;font-size:12px;line-height:1.2}.micromag-screen-urbania-horoscope-sign-modal-description p{margin-bottom:1em}.micromag-screen-urbania-horoscope-sign-modal-description p:last-child{margin-bottom:0}.micromag-screen-urbania-horoscope-sign-modal-illustration{width:75%;height:auto;margin:0 auto;pointer-events:none}.micromag-screen-urbania-horoscope-sign-modal-arrow{padding-right:5px;font-size:20px;vertical-align:middle}
3
- .micromag-screen-urbania-horoscope-close{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-backdrop,.micromag-screen-urbania-horoscope-signsGridContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-urbania-horoscope-container{-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-container.micromag-screen-urbania-horoscope-isPlaceholder .micromag-screen-urbania-horoscope-layout{padding:10px}.micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-horoscope-emptyTitle{height:100px}.micromag-screen-urbania-horoscope-emptyText{height:50px}.micromag-screen-urbania-horoscope-headerContainer{width:280px}.micromag-screen-urbania-horoscope-title{color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;text-shadow:-3px -3px 0 #000f66;text-transform:uppercase;-webkit-text-stroke:1px #000f66}.micromag-screen-urbania-horoscope-title,.micromag-screen-urbania-horoscope-titleImage{-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-titleImage{width:100%;height:auto}.micromag-screen-urbania-horoscope-titlePlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-horoscope-description{margin-bottom:8px;padding:10px;color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:18px;font-weight:700;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-description p,.micromag-screen-urbania-horoscope-description span{font-weight:700!important}.micromag-screen-urbania-horoscope-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-horoscope-button{padding:8px 15px 4px;border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 6px rgba(255,250,0,.6);box-shadow:0 0 0 6px rgba(255,250,0,.6);-webkit-transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);-o-transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67), -webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67)}.micromag-screen-urbania-horoscope-button:hover{-webkit-box-shadow:0 0 0 12px rgba(255,250,0,.6);box-shadow:0 0 0 12px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-button:active{-webkit-box-shadow:0 0 0 3px rgba(255,250,0,.3);box-shadow:0 0 0 3px rgba(255,250,0,.3)}.micromag-screen-urbania-horoscope-buttonLabel{color:#000;font-family:Agrandir Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-header{position:fixed;z-index:4;width:100%;top:0;left:0;padding:10px;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-screen-urbania-horoscope-buttons,.micromag-screen-urbania-horoscope-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-urbania-horoscope-buttons{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}.micromag-screen-urbania-horoscope-close{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-left:auto;font-weight:700}.micromag-screen-urbania-horoscope-signsGridContainer{-ms-touch-action:none;touch-action:none;z-index:3;padding:2.5rem 1rem}.micromag-screen-urbania-horoscope-signsGridContainer.micromag-screen-urbania-horoscope-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-urbania-horoscope-author{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-author,.micromag-screen-urbania-horoscope-collaborator{color:#0ff}.micromag-screen-urbania-horoscope-authorBackground{background-color:#161719!important}.micromag-screen-urbania-horoscope-authorBackground p{font-weight:400!important;text-transform:none!important}.micromag-screen-urbania-horoscope-modal{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-backdrop{z-index:1;background-color:rgba(0,0,0,.75);pointer-events:none}
3
+ .micromag-screen-urbania-horoscope-close{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-screen-urbania-horoscope-backdrop,.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-background,.micromag-screen-urbania-horoscope-signsGridContainer{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-screen-urbania-horoscope-container{position:relative;width:100%;height:100%;overflow:hidden}.micromag-screen-urbania-horoscope-disabled.micromag-screen-urbania-horoscope-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-horoscope-hidden.micromag-screen-urbania-horoscope-container{display:none;visibility:hidden}.micromag-screen-urbania-horoscope-placeholder.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{position:relative;padding:6px}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{margin:5px auto;border:2px dashed #343434;color:#343434}.micromag-screen-urbania-horoscope-close:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-screen-urbania-horoscope-container{-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-background{z-index:0}.micromag-screen-urbania-horoscope-container .micromag-screen-urbania-horoscope-content{z-index:1}.micromag-screen-urbania-horoscope-container.micromag-screen-urbania-horoscope-isPlaceholder .micromag-screen-urbania-horoscope-layout{padding:10px}.micromag-screen-urbania-horoscope-layout{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;text-align:center}.micromag-screen-urbania-horoscope-emptyText,.micromag-screen-urbania-horoscope-emptyTitle{width:100%;margin:10px auto}.micromag-screen-urbania-horoscope-emptyTitle{height:100px}.micromag-screen-urbania-horoscope-emptyText{height:50px}.micromag-screen-urbania-horoscope-headerContainer{width:280px}.micromag-screen-urbania-horoscope-title{color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:48px;font-weight:700;letter-spacing:-1px;text-shadow:-3px -3px 0 #000f66;text-transform:uppercase;-webkit-text-stroke:1px #000f66}.micromag-screen-urbania-horoscope-title,.micromag-screen-urbania-horoscope-titleImage{-webkit-filter:drop-shadow(0 0 6px rgba(0,0,0,.7));filter:drop-shadow(0 0 6px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-titleImage{width:100%;height:auto}.micromag-screen-urbania-horoscope-titlePlaceholder{padding:10px;background-color:#343434}.micromag-screen-urbania-horoscope-description{margin-bottom:8px;padding:10px;color:#0ff;font-family:Agrandir Tight,sans-serif;font-size:18px;font-weight:700;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-description p,.micromag-screen-urbania-horoscope-description span{font-weight:700!important}.micromag-screen-urbania-horoscope-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-horoscope-button{padding:8px 15px 4px;-webkit-transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);-o-transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67);transition:box-shadow .2s cubic-bezier(.41,1.69,.04,.67), -webkit-box-shadow .2s cubic-bezier(.41,1.69,.04,.67);border-radius:24px;background-color:#fffc00;-webkit-box-shadow:0 0 0 6px rgba(255,250,0,.6);box-shadow:0 0 0 6px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-button:hover{-webkit-box-shadow:0 0 0 12px rgba(255,250,0,.6);box-shadow:0 0 0 12px rgba(255,250,0,.6)}.micromag-screen-urbania-horoscope-button:active{-webkit-box-shadow:0 0 0 3px rgba(255,250,0,.3);box-shadow:0 0 0 3px rgba(255,250,0,.3)}.micromag-screen-urbania-horoscope-buttonLabel{color:#000;font-family:Agrandir Tight,sans-serif;font-size:22px;font-weight:700;letter-spacing:.03rem}.micromag-screen-urbania-horoscope-header{position:fixed;z-index:4;top:0;left:0;width:100%;padding:10px;background-image:-webkit-gradient(linear,left top, left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:-o-linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-screen-urbania-horoscope-buttons,.micromag-screen-urbania-horoscope-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-screen-urbania-horoscope-buttons{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-screen-urbania-horoscope-close{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-left:auto;font-weight:700}.micromag-screen-urbania-horoscope-signsGridContainer{-ms-touch-action:none;touch-action:none;z-index:3;padding:2.5rem 1rem}.micromag-screen-urbania-horoscope-signsGridContainer.micromag-screen-urbania-horoscope-isPlaceholder{padding:0}.micromag-screen-urbania-horoscope-signs{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.micromag-screen-urbania-horoscope-author{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 auto;-webkit-filter:drop-shadow(0 0 3px rgba(0,0,0,.7));filter:drop-shadow(0 0 3px rgba(0,0,0,.7))}.micromag-screen-urbania-horoscope-author,.micromag-screen-urbania-horoscope-collaborator{color:#0ff}.micromag-screen-urbania-horoscope-authorBackground{background-color:#161719!important}.micromag-screen-urbania-horoscope-authorBackground p{font-weight:400!important;text-transform:none!important}.micromag-screen-urbania-horoscope-modal{position:fixed;z-index:6;top:0;right:0;left:0;width:100%;height:100%;-ms-touch-action:none;touch-action:none}.micromag-screen-urbania-horoscope-backdrop{z-index:1;background-color:rgba(0,0,0,.75)}.micromag-screen-urbania-horoscope-backdrop,.micromag-screen-urbania-horoscope-backdropVideo{pointer-events:none}
package/es/index.js CHANGED
@@ -2,6 +2,7 @@ import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
2
2
  import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
3
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
4
  import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
+ import { animated } from '@react-spring/web';
5
6
  import classNames from 'classnames';
6
7
  import PropTypes from 'prop-types';
7
8
  import React, { useMemo, useState, useCallback, useEffect } from 'react';
@@ -440,7 +441,7 @@ var SignModal = function SignModal(_ref) {
440
441
  SignModal.propTypes = propTypes$1;
441
442
  SignModal.defaultProps = defaultProps$1;
442
443
 
443
- var styles = {"close":"micromag-screen-urbania-horoscope-close","backdrop":"micromag-screen-urbania-horoscope-backdrop","signsGridContainer":"micromag-screen-urbania-horoscope-signsGridContainer","container":"micromag-screen-urbania-horoscope-container","disabled":"micromag-screen-urbania-horoscope-disabled","hidden":"micromag-screen-urbania-horoscope-hidden","placeholder":"micromag-screen-urbania-horoscope-placeholder","content":"micromag-screen-urbania-horoscope-content","emptyText":"micromag-screen-urbania-horoscope-emptyText","emptyTitle":"micromag-screen-urbania-horoscope-emptyTitle","isPlaceholder":"micromag-screen-urbania-horoscope-isPlaceholder","layout":"micromag-screen-urbania-horoscope-layout","headerContainer":"micromag-screen-urbania-horoscope-headerContainer","title":"micromag-screen-urbania-horoscope-title","titleImage":"micromag-screen-urbania-horoscope-titleImage","titlePlaceholder":"micromag-screen-urbania-horoscope-titlePlaceholder","description":"micromag-screen-urbania-horoscope-description","descriptionPlaceholder":"micromag-screen-urbania-horoscope-descriptionPlaceholder","button":"micromag-screen-urbania-horoscope-button","buttonLabel":"micromag-screen-urbania-horoscope-buttonLabel","header":"micromag-screen-urbania-horoscope-header","buttons":"micromag-screen-urbania-horoscope-buttons","signs":"micromag-screen-urbania-horoscope-signs","author":"micromag-screen-urbania-horoscope-author","collaborator":"micromag-screen-urbania-horoscope-collaborator","authorBackground":"micromag-screen-urbania-horoscope-authorBackground","modal":"micromag-screen-urbania-horoscope-modal"};
444
+ var styles = {"close":"micromag-screen-urbania-horoscope-close","backdrop":"micromag-screen-urbania-horoscope-backdrop","container":"micromag-screen-urbania-horoscope-container","background":"micromag-screen-urbania-horoscope-background","signsGridContainer":"micromag-screen-urbania-horoscope-signsGridContainer","disabled":"micromag-screen-urbania-horoscope-disabled","hidden":"micromag-screen-urbania-horoscope-hidden","placeholder":"micromag-screen-urbania-horoscope-placeholder","content":"micromag-screen-urbania-horoscope-content","emptyText":"micromag-screen-urbania-horoscope-emptyText","emptyTitle":"micromag-screen-urbania-horoscope-emptyTitle","isPlaceholder":"micromag-screen-urbania-horoscope-isPlaceholder","layout":"micromag-screen-urbania-horoscope-layout","headerContainer":"micromag-screen-urbania-horoscope-headerContainer","title":"micromag-screen-urbania-horoscope-title","titleImage":"micromag-screen-urbania-horoscope-titleImage","titlePlaceholder":"micromag-screen-urbania-horoscope-titlePlaceholder","description":"micromag-screen-urbania-horoscope-description","descriptionPlaceholder":"micromag-screen-urbania-horoscope-descriptionPlaceholder","button":"micromag-screen-urbania-horoscope-button","buttonLabel":"micromag-screen-urbania-horoscope-buttonLabel","header":"micromag-screen-urbania-horoscope-header","buttons":"micromag-screen-urbania-horoscope-buttons","signs":"micromag-screen-urbania-horoscope-signs","author":"micromag-screen-urbania-horoscope-author","collaborator":"micromag-screen-urbania-horoscope-collaborator","authorBackground":"micromag-screen-urbania-horoscope-authorBackground","modal":"micromag-screen-urbania-horoscope-modal","backdropVideo":"micromag-screen-urbania-horoscope-backdropVideo"};
444
445
 
445
446
  var Astrologie = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20906.64%20139.48%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M35.88%2C4.42h35.5l34.66%2C119.78h-28.43l-5.89-23.72H35.55l-6.22%2C23.72H1.4L35.88%2C4.42Zm31.8%2C75.54l-13.63-52.15h-.34l-14.13%2C52.15h28.09Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M123.37%2C122.51c-6.84-3.36-12.17-8.13-15.98-14.3-3.81-6.17-5.78-13.34-5.89-21.53l26.24-4.21c0%2C7.07%2C1.96%2C12.73%2C5.89%2C16.99%2C3.92%2C4.26%2C8.92%2C6.39%2C14.97%2C6.39%2C4.82%2C0%2C8.72-1.29%2C11.69-3.87%2C2.97-2.58%2C4.46-5.89%2C4.46-9.92%2C0-3.37-1.15-6.2-3.45-8.5-2.3-2.3-6.03-4.34-11.19-6.14l-14.64-4.71c-10.66-3.25-18.37-7.68-23.13-13.29-4.77-5.61-7.15-13.01-7.15-22.21%2C0-10.88%2C3.53-19.63%2C10.6-26.24%2C7.07-6.62%2C16.99-9.93%2C29.78-9.93%2C11.89%2C0%2C21.48%2C3.23%2C28.77%2C9.67%2C7.29%2C6.45%2C11.05%2C15.17%2C11.27%2C26.16l-25.57%2C4.88c.11-5.83-1.24-10.51-4.04-14.05-2.8-3.53-6.45-5.3-10.94-5.3-3.93%2C0-7.12%2C1.21-9.59%2C3.62-2.47%2C2.41-3.7%2C5.47-3.7%2C9.17s1.15%2C6.54%2C3.45%2C8.83c2.3%2C2.3%2C6.08%2C4.23%2C11.36%2C5.8l13.96%2C4.71c10.88%2C3.25%2C18.76%2C7.66%2C23.64%2C13.21s7.32%2C12.93%2C7.32%2C22.12c0%2C7.29-1.74%2C13.79-5.22%2C19.51-3.48%2C5.72-8.52%2C10.18-15.14%2C13.38-6.62%2C3.2-14.58%2C4.79-23.89%2C4.79s-17.05-1.68-23.89-5.05Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M213.03%2C28.64h-28.26V4.42h84.96V28.64h-28.26V124.2h-28.43V28.64Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M335.5%2C122.35c-3.59-3.25-5.95-7.63-7.07-13.12l-5.05-21.37c-.79-2.92-2.19-5.3-4.21-7.15s-4.26-2.78-6.73-2.78h-10.09v46.26h-28.26V4.42h46.1c8.86%2C0%2C16.6%2C1.54%2C23.22%2C4.63%2C6.62%2C3.09%2C11.72%2C7.46%2C15.31%2C13.12%2C3.59%2C5.66%2C5.38%2C12.31%2C5.38%2C19.94%2C0%2C7.18-2.08%2C13.6-6.22%2C19.26-4.15%2C5.67-9.76%2C9.51-16.82%2C11.52v.17c2.8%2C1.24%2C4.96%2C3%2C6.48%2C5.3%2C1.51%2C2.3%2C2.66%2C5.13%2C3.45%2C8.5l3.53%2C15.48c.67%2C3.7%2C2.19%2C5.55%2C4.54%2C5.55%2C2.13%2C0%2C4.15-1.29%2C6.06-3.87l6.73%2C13.63c-2.8%2C2.92-6.2%2C5.24-10.18%2C6.98-3.98%2C1.74-8.05%2C2.61-12.2%2C2.61-5.72%2C0-10.38-1.63-13.96-4.88Zm-16.82-64.26c5.05%2C0%2C9.14-1.46%2C12.28-4.37%2C3.14-2.92%2C4.71-6.78%2C4.71-11.61%2C0-5.16-1.54-9.17-4.63-12.03-3.09-2.86-7.21-4.29-12.37-4.29h-16.32V58.08h16.32Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M396.23%2C119.74c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M489.26%2C4.42h28.26V99.97h37.68v24.23h-65.95V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M580.28%2C119.74c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M693.75%2C119.65c-7.68-5.05-13.6-12.31-17.75-21.79-4.15-9.48-6.22-20.66-6.22-33.56s2.21-24.25%2C6.65-33.73c4.43-9.48%2C10.77-16.77%2C19.01-21.87%2C8.24-5.1%2C17.97-7.65%2C29.19-7.65s21.53%2C3.28%2C29.95%2C9.84c8.41%2C6.56%2C14.19%2C15.56%2C17.33%2C27l-26.58%2C5.72c-1.8-5.72-4.54-10.2-8.24-13.46-3.7-3.25-7.96-4.88-12.79-4.88-8.08%2C0-14.44%2C3.42-19.09%2C10.26-4.66%2C6.84-6.98%2C16.21-6.98%2C28.09s2.63%2C21.84%2C7.91%2C28.85c5.27%2C7.01%2C12.5%2C10.51%2C21.7%2C10.51%2C8.19%2C0%2C14.66-2.49%2C19.43-7.49%2C4.77-4.99%2C7.26-11.92%2C7.49-20.78h-37.18v-18.51h64.26V124.2h-20.86l-1.68-18.67h-.17c-3.93%2C6.73-9.31%2C12.03-16.15%2C15.9-6.84%2C3.87-14.19%2C5.8-22.04%2C5.8-10.43%2C0-19.49-2.52-27.17-7.57Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M789.56%2C4.42h28.26V124.2h-28.26V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M827.74%2C4.42h68.81V27.13h-41.55v25.57h34.82v20.19h-34.82v28.6h43.24v22.71h-70.49V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M43.24%2C15.29h35.5l34.66%2C119.78h-28.43l-5.89-23.72H42.91l-6.22%2C23.72H8.76L43.24%2C15.29Zm31.8%2C75.54l-13.63-52.15h-.34l-14.13%2C52.15h28.09Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M130.73%2C133.38c-6.84-3.36-12.17-8.13-15.98-14.3-3.81-6.17-5.78-13.34-5.89-21.53l26.24-4.21c0%2C7.07%2C1.96%2C12.73%2C5.89%2C16.99%2C3.92%2C4.26%2C8.92%2C6.39%2C14.97%2C6.39%2C4.82%2C0%2C8.72-1.29%2C11.69-3.87%2C2.97-2.58%2C4.46-5.89%2C4.46-9.92%2C0-3.37-1.15-6.2-3.45-8.5-2.3-2.3-6.03-4.34-11.19-6.14l-14.64-4.71c-10.66-3.25-18.37-7.68-23.13-13.29-4.77-5.61-7.15-13.01-7.15-22.21%2C0-10.88%2C3.53-19.63%2C10.6-26.24%2C7.07-6.62%2C16.99-9.93%2C29.78-9.93%2C11.89%2C0%2C21.48%2C3.23%2C28.77%2C9.67%2C7.29%2C6.45%2C11.05%2C15.17%2C11.27%2C26.16l-25.57%2C4.88c.11-5.83-1.24-10.51-4.04-14.05-2.8-3.53-6.45-5.3-10.94-5.3-3.93%2C0-7.12%2C1.21-9.59%2C3.62-2.47%2C2.41-3.7%2C5.47-3.7%2C9.17s1.15%2C6.54%2C3.45%2C8.83c2.3%2C2.3%2C6.08%2C4.23%2C11.36%2C5.8l13.96%2C4.71c10.88%2C3.25%2C18.76%2C7.66%2C23.64%2C13.21s7.32%2C12.93%2C7.32%2C22.12c0%2C7.29-1.74%2C13.79-5.22%2C19.51-3.48%2C5.72-8.52%2C10.18-15.14%2C13.38-6.62%2C3.2-14.58%2C4.79-23.89%2C4.79s-17.05-1.68-23.89-5.05Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M220.39%2C39.51h-28.26V15.29h84.96v24.23h-28.26v95.56h-28.43V39.51Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M342.86%2C133.22c-3.59-3.25-5.95-7.63-7.07-13.12l-5.05-21.37c-.79-2.92-2.19-5.3-4.21-7.15s-4.26-2.78-6.73-2.78h-10.09v46.26h-28.26V15.29h46.1c8.86%2C0%2C16.6%2C1.54%2C23.22%2C4.63%2C6.62%2C3.09%2C11.72%2C7.46%2C15.31%2C13.12%2C3.59%2C5.66%2C5.38%2C12.31%2C5.38%2C19.94%2C0%2C7.18-2.08%2C13.6-6.22%2C19.26-4.15%2C5.67-9.76%2C9.51-16.82%2C11.52v.17c2.8%2C1.24%2C4.96%2C3%2C6.48%2C5.3%2C1.51%2C2.3%2C2.66%2C5.13%2C3.45%2C8.5l3.53%2C15.48c.67%2C3.7%2C2.19%2C5.55%2C4.54%2C5.55%2C2.13%2C0%2C4.15-1.29%2C6.06-3.87l6.73%2C13.63c-2.8%2C2.92-6.2%2C5.24-10.18%2C6.98-3.98%2C1.74-8.05%2C2.61-12.2%2C2.61-5.72%2C0-10.38-1.63-13.96-4.88Zm-16.82-64.26c5.05%2C0%2C9.14-1.46%2C12.28-4.37%2C3.14-2.92%2C4.71-6.78%2C4.71-11.61%2C0-5.16-1.54-9.17-4.63-12.03-3.09-2.86-7.21-4.29-12.37-4.29h-16.32v32.3h16.32Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M403.59%2C130.61c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M496.62%2C15.29h28.26V110.84h37.68v24.23h-65.95V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M587.64%2C130.61c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M701.11%2C130.53c-7.68-5.05-13.6-12.31-17.75-21.79-4.15-9.48-6.22-20.66-6.22-33.56s2.21-24.25%2C6.65-33.73c4.43-9.48%2C10.77-16.77%2C19.01-21.87%2C8.24-5.1%2C17.97-7.65%2C29.19-7.65s21.53%2C3.28%2C29.95%2C9.84c8.41%2C6.56%2C14.19%2C15.56%2C17.33%2C27l-26.58%2C5.72c-1.8-5.72-4.54-10.2-8.24-13.46-3.7-3.25-7.96-4.88-12.79-4.88-8.08%2C0-14.44%2C3.42-19.09%2C10.26-4.66%2C6.84-6.98%2C16.21-6.98%2C28.09s2.63%2C21.84%2C7.91%2C28.85c5.27%2C7.01%2C12.5%2C10.51%2C21.7%2C10.51%2C8.19%2C0%2C14.66-2.49%2C19.43-7.49%2C4.77-4.99%2C7.26-11.92%2C7.49-20.78h-37.18v-18.51h64.26v67.97h-20.86l-1.68-18.67h-.17c-3.93%2C6.73-9.31%2C12.03-16.15%2C15.9-6.84%2C3.87-14.19%2C5.8-22.04%2C5.8-10.43%2C0-19.49-2.52-27.17-7.57Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M796.92%2C15.29h28.26v119.78h-28.26V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M835.1%2C15.29h68.81v22.71h-41.55v25.57h34.82v20.19h-34.82v28.6h43.24v22.71h-70.49V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
446
447
 
@@ -557,7 +558,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
557
558
  return signValueId === defaultSign.id;
558
559
  }) || signsValue[index] : null), defaultSign);
559
560
  });
560
- }, []);
561
+ }, [signsValue]);
561
562
 
562
563
  var _useScreenSize = useScreenSize(),
563
564
  width = _useScreenSize.width,
@@ -578,7 +579,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
578
579
  var hasDescription = isTextFilled(description);
579
580
  var hasButton = isTextFilled(button);
580
581
  var backgroundPlaying = current && (isView || isEdit);
581
- var mediaShouldLoad = !isPlaceholder && (current || active); // @note sign selection, transitions
582
+ var mediaShouldLoad = !isPlaceholder && (current || active);
582
583
 
583
584
  var _useState = useState(false),
584
585
  _useState2 = _slicedToArray(_useState, 2),
@@ -606,27 +607,27 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
606
607
  var onOpenSignsGrid = useCallback(function () {
607
608
  setShowSignsGrid(true);
608
609
  disableInteraction();
609
- trackScreenEvent('UrbaniaHoroscope', 'open_signs_grid');
610
+ trackScreenEvent('open');
610
611
  }, [disableInteraction, trackScreenEvent]);
611
612
  var onCloseSignsGrid = useCallback(function () {
612
613
  setShowSignsGrid(false);
613
614
  setShowModal(0); // can't have a modal if signs are closed
614
615
 
615
616
  enableInteraction();
616
- trackScreenEvent('UrbaniaHoroscope', 'close_signs_grid');
617
+ trackScreenEvent('close');
617
618
  }, [setShowSignsGrid, setShowModal, enableInteraction, trackScreenEvent]);
618
619
  var onSelectSign = useCallback(function (e, id) {
619
620
  e.stopPropagation();
620
- var foundSign = signs.find(function (s) {
621
+ var foundSignIndex = signs.findIndex(function (s) {
621
622
  return s.id === id;
622
623
  });
623
- setSelectedSign(foundSign);
624
+ setSelectedSign(foundSignIndex);
624
625
  setShowModal(true);
625
- trackScreenEvent('UrbaniaHoroscope', 'select_sign', foundSign);
626
+ trackScreenEvent('select_sign', signs[foundSignIndex]);
626
627
  }, [signs, setSelectedSign, trackScreenEvent]);
627
628
  var onCloseModal = useCallback(function () {
628
629
  setShowModal(0);
629
- trackScreenEvent('UrbaniaHoroscope', 'close_sign_modal');
630
+ trackScreenEvent('close_sign');
630
631
  }, [setShowModal, trackScreenEvent]);
631
632
  var computeSignsGridProgress = useCallback(function (_ref5) {
632
633
  var dragActive = _ref5.active,
@@ -700,44 +701,58 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
700
701
  bindModalDrag = _useDragProgress2.bind,
701
702
  showModalProgress = _useDragProgress2.progress;
702
703
 
703
- var getHeaderStyles = function getHeaderStyles(p) {
704
+ var getHeaderStyles = function getHeaderStyles(spring) {
704
705
  return {
705
- transform: "translateY(".concat(-100 * p * (1 - p), "%)"),
706
- opacity: p > 0.25 ? 1 - p : 1
706
+ transform: spring.to(function (p) {
707
+ return "translateY(".concat(-100 * p * (1 - p), "%)");
708
+ }),
709
+ opacity: spring.to(function (p) {
710
+ return p > 0.25 ? 1 - p : 1;
711
+ })
707
712
  };
708
713
  };
709
714
 
710
- var getSignsContainerStyles = function getSignsContainerStyles(p) {
715
+ var getSignsContainerStyles = function getSignsContainerStyles(spring) {
711
716
  return {
712
- opacity: p,
713
- pointerEvents: p < 0.25 ? 'none' : 'auto'
717
+ opacity: spring,
718
+ pointerEvents: spring.to(function (p) {
719
+ return p < 0.25 ? 'none' : 'auto';
720
+ })
714
721
  };
715
722
  };
716
723
 
717
- var getSignStyles = function getSignStyles(i, p) {
724
+ var getSignStyles = function getSignStyles(spring) {
718
725
  return {
719
- opacity: p,
720
- transform: "translateY(".concat(3 * (1 - p), "rem) scale(").concat(1 - 0.25 * (1 - p), ")")
726
+ opacity: spring,
727
+ transform: spring.to(function (p) {
728
+ return "translateY(".concat(3 * Math.pow(1 - p, 5), "rem) scale(").concat(1 - 0.25 * (1 - p), ")");
729
+ })
721
730
  };
722
731
  };
723
732
 
724
- var getAuthorStyles = function getAuthorStyles(p) {
733
+ var getAuthorStyles = function getAuthorStyles(spring) {
725
734
  return {
726
- transform: "translateY(".concat(2 * (1 - p), "rem)"),
727
- opacity: p
735
+ transform: spring.to(function (p) {
736
+ return "translateY(".concat(2 * (1 - p), "rem)");
737
+ }),
738
+ opacity: spring
728
739
  };
729
740
  };
730
741
 
731
- var getBackdropStyles = function getBackdropStyles(p) {
742
+ var getBackdropStyles = function getBackdropStyles(spring) {
732
743
  return {
733
- opacity: p
744
+ opacity: spring
734
745
  };
735
746
  };
736
747
 
737
- var getModalStyles = function getModalStyles(p) {
748
+ var getModalStyles = function getModalStyles(spring) {
738
749
  return {
739
- transform: "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)"),
740
- pointerEvents: p < 0.1 ? 'none' : 'auto'
750
+ transform: spring.to(function (p) {
751
+ return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
752
+ }),
753
+ pointerEvents: spring.to(function (p) {
754
+ return p < 0.1 ? 'none' : 'auto';
755
+ })
741
756
  };
742
757
  }; // for editor purposes
743
758
 
@@ -761,7 +776,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
761
776
  var index = screenState.split('.').pop();
762
777
  setShowSignsGrid(1);
763
778
  setShowModal(1);
764
- setSelectedSign(signs[index]);
779
+ setSelectedSign(index);
765
780
  }
766
781
  }, [screenState]);
767
782
  useEffect(function () {
@@ -786,27 +801,19 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
786
801
  return /*#__PURE__*/React.createElement("div", Object.assign({
787
802
  className: classNames([styles.container, (_ref7 = {}, _defineProperty(_ref7, className, className !== null), _defineProperty(_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
788
803
  "data-screen-ready": true
789
- }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
790
- background: background,
804
+ }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React.createElement("div", mouseBlocker) : null, /*#__PURE__*/React.createElement(Container, {
791
805
  width: width,
792
806
  height: height,
793
- resolution: resolution,
794
- playing: backgroundPlaying,
795
- muted: muted,
796
- shouldLoad: mediaShouldLoad,
797
- mediaRef: mediaRef
798
- }) : null, /*#__PURE__*/React.createElement(Container, {
799
- width: width,
800
- height: height
807
+ className: styles.content
801
808
  }, /*#__PURE__*/React.createElement(Layout, {
802
809
  className: styles.layout,
803
810
  style: !isPlaceholder ? {
804
811
  padding: spacing,
805
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
812
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
806
813
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
807
814
  } : null,
808
815
  height: height * 0.8
809
- }, /*#__PURE__*/React.createElement("div", {
816
+ }, /*#__PURE__*/React.createElement(animated.div, {
810
817
  className: styles.headerContainer,
811
818
  style: getHeaderStyles(showSignsGridProgress)
812
819
  }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -849,7 +856,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
849
856
  className: styles.buttonLabel
850
857
  }, button, {
851
858
  inline: true
852
- }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
859
+ }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React.createElement(animated.div, {
853
860
  className: styles.header,
854
861
  style: getSignsContainerStyles(showSignsGridProgress)
855
862
  }, /*#__PURE__*/React.createElement("div", {
@@ -876,20 +883,20 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
876
883
  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"
877
884
  })),
878
885
  withoutStyle: true
879
- }))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement("div", Object.assign({
886
+ }))) : null, !isPlaceholder ? /*#__PURE__*/React.createElement(animated.div, Object.assign({
880
887
  className: styles.signsGridContainer,
881
888
  style: getSignsContainerStyles(showSignsGridProgress)
882
889
  }, bindSignsDrag()), /*#__PURE__*/React.createElement("div", {
883
890
  className: styles.signs
884
- }, signs.map(function (sign, i) {
891
+ }, signs.map(function (sign) {
885
892
  var _ref8 = sign || {},
886
893
  _ref8$id = _ref8.id,
887
894
  id = _ref8$id === void 0 ? null : _ref8$id;
888
895
 
889
- return /*#__PURE__*/React.createElement("div", {
896
+ return /*#__PURE__*/React.createElement(animated.div, {
890
897
  key: id,
891
898
  className: styles.sign,
892
- style: getSignStyles(i, showSignsGridProgress)
899
+ style: getSignStyles(showSignsGridProgress)
893
900
  }, /*#__PURE__*/React.createElement(SignCard, {
894
901
  key: id,
895
902
  sign: sign,
@@ -915,27 +922,38 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
915
922
  backgroundClassName: styles.authorBackground,
916
923
  shouldLoad: mediaShouldLoad,
917
924
  style: getAuthorStyles(showSignsGridProgress)
918
- }) : null)) : null, /*#__PURE__*/React.createElement("div", Object.assign({
925
+ }) : null)) : null, /*#__PURE__*/React.createElement(animated.div, Object.assign({
919
926
  className: styles.modal,
920
927
  style: getModalStyles(showModalProgress)
921
928
  }, bindModalDrag()), /*#__PURE__*/React.createElement(SignModal, {
922
929
  width: width,
923
930
  height: height,
924
- sign: selectedSign,
931
+ sign: signs[selectedSign],
925
932
  subtitle: signSubtitle,
926
933
  onClick: onCloseModal
927
- })), !isPlaceholder ? /*#__PURE__*/React.createElement("div", {
934
+ })), !isPlaceholder ? /*#__PURE__*/React.createElement(animated.div, {
928
935
  className: styles.backdrop,
929
936
  style: getBackdropStyles(showSignsGridProgress)
930
937
  }, popupBackgroundUrl !== null ? /*#__PURE__*/React.createElement("video", {
931
938
  className: styles.videoBackdrop,
932
939
  autoPlay: true,
933
940
  muted: true,
934
- loop: true
941
+ loop: true,
942
+ playsInline: true
935
943
  }, /*#__PURE__*/React.createElement("source", {
936
944
  src: popupBackgroundUrl,
937
945
  type: "video/mp4"
938
- })) : null) : null)));
946
+ })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
947
+ background: background,
948
+ width: width,
949
+ height: height,
950
+ resolution: resolution,
951
+ playing: backgroundPlaying,
952
+ muted: muted,
953
+ shouldLoad: mediaShouldLoad,
954
+ mediaRef: mediaRef,
955
+ className: styles.background
956
+ }) : null);
939
957
  };
940
958
 
941
959
  UrbaniaHoroscope.propTypes = propTypes;
@@ -1056,6 +1074,7 @@ var definition = [{
1056
1074
  defaultValue: signs,
1057
1075
  repeatable: true,
1058
1076
  withoutCreate: true,
1077
+ fieldName: 'signs',
1059
1078
  fields: [{
1060
1079
  name: 'word',
1061
1080
  type: 'heading-element',
package/lib/index.js CHANGED
@@ -6,6 +6,7 @@ var reactIntl = require('react-intl');
6
6
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
7
7
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
8
8
  var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
9
+ var web = require('@react-spring/web');
9
10
  var classNames = require('classnames');
10
11
  var PropTypes = require('prop-types');
11
12
  var React = require('react');
@@ -485,7 +486,7 @@ var SignModal = function SignModal(_ref) {
485
486
  SignModal.propTypes = propTypes$1;
486
487
  SignModal.defaultProps = defaultProps$1;
487
488
 
488
- var styles = {"close":"micromag-screen-urbania-horoscope-close","backdrop":"micromag-screen-urbania-horoscope-backdrop","signsGridContainer":"micromag-screen-urbania-horoscope-signsGridContainer","container":"micromag-screen-urbania-horoscope-container","disabled":"micromag-screen-urbania-horoscope-disabled","hidden":"micromag-screen-urbania-horoscope-hidden","placeholder":"micromag-screen-urbania-horoscope-placeholder","content":"micromag-screen-urbania-horoscope-content","emptyText":"micromag-screen-urbania-horoscope-emptyText","emptyTitle":"micromag-screen-urbania-horoscope-emptyTitle","isPlaceholder":"micromag-screen-urbania-horoscope-isPlaceholder","layout":"micromag-screen-urbania-horoscope-layout","headerContainer":"micromag-screen-urbania-horoscope-headerContainer","title":"micromag-screen-urbania-horoscope-title","titleImage":"micromag-screen-urbania-horoscope-titleImage","titlePlaceholder":"micromag-screen-urbania-horoscope-titlePlaceholder","description":"micromag-screen-urbania-horoscope-description","descriptionPlaceholder":"micromag-screen-urbania-horoscope-descriptionPlaceholder","button":"micromag-screen-urbania-horoscope-button","buttonLabel":"micromag-screen-urbania-horoscope-buttonLabel","header":"micromag-screen-urbania-horoscope-header","buttons":"micromag-screen-urbania-horoscope-buttons","signs":"micromag-screen-urbania-horoscope-signs","author":"micromag-screen-urbania-horoscope-author","collaborator":"micromag-screen-urbania-horoscope-collaborator","authorBackground":"micromag-screen-urbania-horoscope-authorBackground","modal":"micromag-screen-urbania-horoscope-modal"};
489
+ var styles = {"close":"micromag-screen-urbania-horoscope-close","backdrop":"micromag-screen-urbania-horoscope-backdrop","container":"micromag-screen-urbania-horoscope-container","background":"micromag-screen-urbania-horoscope-background","signsGridContainer":"micromag-screen-urbania-horoscope-signsGridContainer","disabled":"micromag-screen-urbania-horoscope-disabled","hidden":"micromag-screen-urbania-horoscope-hidden","placeholder":"micromag-screen-urbania-horoscope-placeholder","content":"micromag-screen-urbania-horoscope-content","emptyText":"micromag-screen-urbania-horoscope-emptyText","emptyTitle":"micromag-screen-urbania-horoscope-emptyTitle","isPlaceholder":"micromag-screen-urbania-horoscope-isPlaceholder","layout":"micromag-screen-urbania-horoscope-layout","headerContainer":"micromag-screen-urbania-horoscope-headerContainer","title":"micromag-screen-urbania-horoscope-title","titleImage":"micromag-screen-urbania-horoscope-titleImage","titlePlaceholder":"micromag-screen-urbania-horoscope-titlePlaceholder","description":"micromag-screen-urbania-horoscope-description","descriptionPlaceholder":"micromag-screen-urbania-horoscope-descriptionPlaceholder","button":"micromag-screen-urbania-horoscope-button","buttonLabel":"micromag-screen-urbania-horoscope-buttonLabel","header":"micromag-screen-urbania-horoscope-header","buttons":"micromag-screen-urbania-horoscope-buttons","signs":"micromag-screen-urbania-horoscope-signs","author":"micromag-screen-urbania-horoscope-author","collaborator":"micromag-screen-urbania-horoscope-collaborator","authorBackground":"micromag-screen-urbania-horoscope-authorBackground","modal":"micromag-screen-urbania-horoscope-modal","backdropVideo":"micromag-screen-urbania-horoscope-backdropVideo"};
489
490
 
490
491
  var Astrologie = "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20906.64%20139.48%22%3E%20%20%20%20%3Cg%20id%3D%22a%22%2F%3E%20%20%20%20%3Cg%20id%3D%22b%22%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%22c%22%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M35.88%2C4.42h35.5l34.66%2C119.78h-28.43l-5.89-23.72H35.55l-6.22%2C23.72H1.4L35.88%2C4.42Zm31.8%2C75.54l-13.63-52.15h-.34l-14.13%2C52.15h28.09Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M123.37%2C122.51c-6.84-3.36-12.17-8.13-15.98-14.3-3.81-6.17-5.78-13.34-5.89-21.53l26.24-4.21c0%2C7.07%2C1.96%2C12.73%2C5.89%2C16.99%2C3.92%2C4.26%2C8.92%2C6.39%2C14.97%2C6.39%2C4.82%2C0%2C8.72-1.29%2C11.69-3.87%2C2.97-2.58%2C4.46-5.89%2C4.46-9.92%2C0-3.37-1.15-6.2-3.45-8.5-2.3-2.3-6.03-4.34-11.19-6.14l-14.64-4.71c-10.66-3.25-18.37-7.68-23.13-13.29-4.77-5.61-7.15-13.01-7.15-22.21%2C0-10.88%2C3.53-19.63%2C10.6-26.24%2C7.07-6.62%2C16.99-9.93%2C29.78-9.93%2C11.89%2C0%2C21.48%2C3.23%2C28.77%2C9.67%2C7.29%2C6.45%2C11.05%2C15.17%2C11.27%2C26.16l-25.57%2C4.88c.11-5.83-1.24-10.51-4.04-14.05-2.8-3.53-6.45-5.3-10.94-5.3-3.93%2C0-7.12%2C1.21-9.59%2C3.62-2.47%2C2.41-3.7%2C5.47-3.7%2C9.17s1.15%2C6.54%2C3.45%2C8.83c2.3%2C2.3%2C6.08%2C4.23%2C11.36%2C5.8l13.96%2C4.71c10.88%2C3.25%2C18.76%2C7.66%2C23.64%2C13.21s7.32%2C12.93%2C7.32%2C22.12c0%2C7.29-1.74%2C13.79-5.22%2C19.51-3.48%2C5.72-8.52%2C10.18-15.14%2C13.38-6.62%2C3.2-14.58%2C4.79-23.89%2C4.79s-17.05-1.68-23.89-5.05Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M213.03%2C28.64h-28.26V4.42h84.96V28.64h-28.26V124.2h-28.43V28.64Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M335.5%2C122.35c-3.59-3.25-5.95-7.63-7.07-13.12l-5.05-21.37c-.79-2.92-2.19-5.3-4.21-7.15s-4.26-2.78-6.73-2.78h-10.09v46.26h-28.26V4.42h46.1c8.86%2C0%2C16.6%2C1.54%2C23.22%2C4.63%2C6.62%2C3.09%2C11.72%2C7.46%2C15.31%2C13.12%2C3.59%2C5.66%2C5.38%2C12.31%2C5.38%2C19.94%2C0%2C7.18-2.08%2C13.6-6.22%2C19.26-4.15%2C5.67-9.76%2C9.51-16.82%2C11.52v.17c2.8%2C1.24%2C4.96%2C3%2C6.48%2C5.3%2C1.51%2C2.3%2C2.66%2C5.13%2C3.45%2C8.5l3.53%2C15.48c.67%2C3.7%2C2.19%2C5.55%2C4.54%2C5.55%2C2.13%2C0%2C4.15-1.29%2C6.06-3.87l6.73%2C13.63c-2.8%2C2.92-6.2%2C5.24-10.18%2C6.98-3.98%2C1.74-8.05%2C2.61-12.2%2C2.61-5.72%2C0-10.38-1.63-13.96-4.88Zm-16.82-64.26c5.05%2C0%2C9.14-1.46%2C12.28-4.37%2C3.14-2.92%2C4.71-6.78%2C4.71-11.61%2C0-5.16-1.54-9.17-4.63-12.03-3.09-2.86-7.21-4.29-12.37-4.29h-16.32V58.08h16.32Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M396.23%2C119.74c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M489.26%2C4.42h28.26V99.97h37.68v24.23h-65.95V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M580.28%2C119.74c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M693.75%2C119.65c-7.68-5.05-13.6-12.31-17.75-21.79-4.15-9.48-6.22-20.66-6.22-33.56s2.21-24.25%2C6.65-33.73c4.43-9.48%2C10.77-16.77%2C19.01-21.87%2C8.24-5.1%2C17.97-7.65%2C29.19-7.65s21.53%2C3.28%2C29.95%2C9.84c8.41%2C6.56%2C14.19%2C15.56%2C17.33%2C27l-26.58%2C5.72c-1.8-5.72-4.54-10.2-8.24-13.46-3.7-3.25-7.96-4.88-12.79-4.88-8.08%2C0-14.44%2C3.42-19.09%2C10.26-4.66%2C6.84-6.98%2C16.21-6.98%2C28.09s2.63%2C21.84%2C7.91%2C28.85c5.27%2C7.01%2C12.5%2C10.51%2C21.7%2C10.51%2C8.19%2C0%2C14.66-2.49%2C19.43-7.49%2C4.77-4.99%2C7.26-11.92%2C7.49-20.78h-37.18v-18.51h64.26V124.2h-20.86l-1.68-18.67h-.17c-3.93%2C6.73-9.31%2C12.03-16.15%2C15.9-6.84%2C3.87-14.19%2C5.8-22.04%2C5.8-10.43%2C0-19.49-2.52-27.17-7.57Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M789.56%2C4.42h28.26V124.2h-28.26V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M827.74%2C4.42h68.81V27.13h-41.55v25.57h34.82v20.19h-34.82v28.6h43.24v22.71h-70.49V4.42Z%22%20fill%3D%22%23000f66%22%20stroke%3D%22aqua%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M43.24%2C15.29h35.5l34.66%2C119.78h-28.43l-5.89-23.72H42.91l-6.22%2C23.72H8.76L43.24%2C15.29Zm31.8%2C75.54l-13.63-52.15h-.34l-14.13%2C52.15h28.09Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M130.73%2C133.38c-6.84-3.36-12.17-8.13-15.98-14.3-3.81-6.17-5.78-13.34-5.89-21.53l26.24-4.21c0%2C7.07%2C1.96%2C12.73%2C5.89%2C16.99%2C3.92%2C4.26%2C8.92%2C6.39%2C14.97%2C6.39%2C4.82%2C0%2C8.72-1.29%2C11.69-3.87%2C2.97-2.58%2C4.46-5.89%2C4.46-9.92%2C0-3.37-1.15-6.2-3.45-8.5-2.3-2.3-6.03-4.34-11.19-6.14l-14.64-4.71c-10.66-3.25-18.37-7.68-23.13-13.29-4.77-5.61-7.15-13.01-7.15-22.21%2C0-10.88%2C3.53-19.63%2C10.6-26.24%2C7.07-6.62%2C16.99-9.93%2C29.78-9.93%2C11.89%2C0%2C21.48%2C3.23%2C28.77%2C9.67%2C7.29%2C6.45%2C11.05%2C15.17%2C11.27%2C26.16l-25.57%2C4.88c.11-5.83-1.24-10.51-4.04-14.05-2.8-3.53-6.45-5.3-10.94-5.3-3.93%2C0-7.12%2C1.21-9.59%2C3.62-2.47%2C2.41-3.7%2C5.47-3.7%2C9.17s1.15%2C6.54%2C3.45%2C8.83c2.3%2C2.3%2C6.08%2C4.23%2C11.36%2C5.8l13.96%2C4.71c10.88%2C3.25%2C18.76%2C7.66%2C23.64%2C13.21s7.32%2C12.93%2C7.32%2C22.12c0%2C7.29-1.74%2C13.79-5.22%2C19.51-3.48%2C5.72-8.52%2C10.18-15.14%2C13.38-6.62%2C3.2-14.58%2C4.79-23.89%2C4.79s-17.05-1.68-23.89-5.05Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M220.39%2C39.51h-28.26V15.29h84.96v24.23h-28.26v95.56h-28.43V39.51Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M342.86%2C133.22c-3.59-3.25-5.95-7.63-7.07-13.12l-5.05-21.37c-.79-2.92-2.19-5.3-4.21-7.15s-4.26-2.78-6.73-2.78h-10.09v46.26h-28.26V15.29h46.1c8.86%2C0%2C16.6%2C1.54%2C23.22%2C4.63%2C6.62%2C3.09%2C11.72%2C7.46%2C15.31%2C13.12%2C3.59%2C5.66%2C5.38%2C12.31%2C5.38%2C19.94%2C0%2C7.18-2.08%2C13.6-6.22%2C19.26-4.15%2C5.67-9.76%2C9.51-16.82%2C11.52v.17c2.8%2C1.24%2C4.96%2C3%2C6.48%2C5.3%2C1.51%2C2.3%2C2.66%2C5.13%2C3.45%2C8.5l3.53%2C15.48c.67%2C3.7%2C2.19%2C5.55%2C4.54%2C5.55%2C2.13%2C0%2C4.15-1.29%2C6.06-3.87l6.73%2C13.63c-2.8%2C2.92-6.2%2C5.24-10.18%2C6.98-3.98%2C1.74-8.05%2C2.61-12.2%2C2.61-5.72%2C0-10.38-1.63-13.96-4.88Zm-16.82-64.26c5.05%2C0%2C9.14-1.46%2C12.28-4.37%2C3.14-2.92%2C4.71-6.78%2C4.71-11.61%2C0-5.16-1.54-9.17-4.63-12.03-3.09-2.86-7.21-4.29-12.37-4.29h-16.32v32.3h16.32Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M403.59%2C130.61c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M496.62%2C15.29h28.26V110.84h37.68v24.23h-65.95V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M587.64%2C130.61c-8.52-5.21-15.14-12.62-19.85-22.21-4.71-9.59-7.07-20.66-7.07-33.23s2.36-23.64%2C7.07-33.23c4.71-9.59%2C11.33-16.99%2C19.85-22.21%2C8.52-5.21%2C18.45-7.82%2C29.78-7.82s21.28%2C2.61%2C29.86%2C7.82c8.58%2C5.22%2C15.22%2C12.59%2C19.94%2C22.12%2C4.71%2C9.53%2C7.07%2C20.58%2C7.07%2C33.14s-2.36%2C23.8-7.07%2C33.39c-4.71%2C9.59-11.36%2C16.99-19.94%2C22.21s-18.53%2C7.82-29.86%2C7.82-21.26-2.61-29.78-7.82Zm50.47-27c5.16-7.07%2C7.74-16.54%2C7.74-28.43s-2.58-21.37-7.74-28.43c-5.16-7.07-12.06-10.6-20.69-10.6s-15.51%2C3.53-20.61%2C10.6c-5.1%2C7.07-7.65%2C16.54-7.65%2C28.43s2.55%2C21.37%2C7.65%2C28.43c5.1%2C7.07%2C11.97%2C10.6%2C20.61%2C10.6s15.53-3.53%2C20.69-10.6Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M701.11%2C130.53c-7.68-5.05-13.6-12.31-17.75-21.79-4.15-9.48-6.22-20.66-6.22-33.56s2.21-24.25%2C6.65-33.73c4.43-9.48%2C10.77-16.77%2C19.01-21.87%2C8.24-5.1%2C17.97-7.65%2C29.19-7.65s21.53%2C3.28%2C29.95%2C9.84c8.41%2C6.56%2C14.19%2C15.56%2C17.33%2C27l-26.58%2C5.72c-1.8-5.72-4.54-10.2-8.24-13.46-3.7-3.25-7.96-4.88-12.79-4.88-8.08%2C0-14.44%2C3.42-19.09%2C10.26-4.66%2C6.84-6.98%2C16.21-6.98%2C28.09s2.63%2C21.84%2C7.91%2C28.85c5.27%2C7.01%2C12.5%2C10.51%2C21.7%2C10.51%2C8.19%2C0%2C14.66-2.49%2C19.43-7.49%2C4.77-4.99%2C7.26-11.92%2C7.49-20.78h-37.18v-18.51h64.26v67.97h-20.86l-1.68-18.67h-.17c-3.93%2C6.73-9.31%2C12.03-16.15%2C15.9-6.84%2C3.87-14.19%2C5.8-22.04%2C5.8-10.43%2C0-19.49-2.52-27.17-7.57Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M796.92%2C15.29h28.26v119.78h-28.26V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M835.1%2C15.29h68.81v22.71h-41.55v25.57h34.82v20.19h-34.82v28.6h43.24v22.71h-70.49V15.29Z%22%20fill%3D%22aqua%22%20stroke%3D%22%23000f66%22%20stroke-miterlimit%3D%2210%22%20stroke-width%3D%222.1%22%2F%3E%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%20%20%20%20%3C%2Fg%3E%20%20%20%20%3C%2Fg%3E%3C%2Fsvg%3E";
491
492
 
@@ -602,7 +603,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
602
603
  return signValueId === defaultSign.id;
603
604
  }) || signsValue[index] : null), defaultSign);
604
605
  });
605
- }, []);
606
+ }, [signsValue]);
606
607
 
607
608
  var _useScreenSize = contexts.useScreenSize(),
608
609
  width = _useScreenSize.width,
@@ -623,7 +624,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
623
624
  var hasDescription = utils.isTextFilled(description);
624
625
  var hasButton = utils.isTextFilled(button);
625
626
  var backgroundPlaying = current && (isView || isEdit);
626
- var mediaShouldLoad = !isPlaceholder && (current || active); // @note sign selection, transitions
627
+ var mediaShouldLoad = !isPlaceholder && (current || active);
627
628
 
628
629
  var _useState = React.useState(false),
629
630
  _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -651,27 +652,27 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
651
652
  var onOpenSignsGrid = React.useCallback(function () {
652
653
  setShowSignsGrid(true);
653
654
  disableInteraction();
654
- trackScreenEvent('UrbaniaHoroscope', 'open_signs_grid');
655
+ trackScreenEvent('open');
655
656
  }, [disableInteraction, trackScreenEvent]);
656
657
  var onCloseSignsGrid = React.useCallback(function () {
657
658
  setShowSignsGrid(false);
658
659
  setShowModal(0); // can't have a modal if signs are closed
659
660
 
660
661
  enableInteraction();
661
- trackScreenEvent('UrbaniaHoroscope', 'close_signs_grid');
662
+ trackScreenEvent('close');
662
663
  }, [setShowSignsGrid, setShowModal, enableInteraction, trackScreenEvent]);
663
664
  var onSelectSign = React.useCallback(function (e, id) {
664
665
  e.stopPropagation();
665
- var foundSign = signs.find(function (s) {
666
+ var foundSignIndex = signs.findIndex(function (s) {
666
667
  return s.id === id;
667
668
  });
668
- setSelectedSign(foundSign);
669
+ setSelectedSign(foundSignIndex);
669
670
  setShowModal(true);
670
- trackScreenEvent('UrbaniaHoroscope', 'select_sign', foundSign);
671
+ trackScreenEvent('select_sign', signs[foundSignIndex]);
671
672
  }, [signs, setSelectedSign, trackScreenEvent]);
672
673
  var onCloseModal = React.useCallback(function () {
673
674
  setShowModal(0);
674
- trackScreenEvent('UrbaniaHoroscope', 'close_sign_modal');
675
+ trackScreenEvent('close_sign');
675
676
  }, [setShowModal, trackScreenEvent]);
676
677
  var computeSignsGridProgress = React.useCallback(function (_ref5) {
677
678
  var dragActive = _ref5.active,
@@ -745,44 +746,58 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
745
746
  bindModalDrag = _useDragProgress2.bind,
746
747
  showModalProgress = _useDragProgress2.progress;
747
748
 
748
- var getHeaderStyles = function getHeaderStyles(p) {
749
+ var getHeaderStyles = function getHeaderStyles(spring) {
749
750
  return {
750
- transform: "translateY(".concat(-100 * p * (1 - p), "%)"),
751
- opacity: p > 0.25 ? 1 - p : 1
751
+ transform: spring.to(function (p) {
752
+ return "translateY(".concat(-100 * p * (1 - p), "%)");
753
+ }),
754
+ opacity: spring.to(function (p) {
755
+ return p > 0.25 ? 1 - p : 1;
756
+ })
752
757
  };
753
758
  };
754
759
 
755
- var getSignsContainerStyles = function getSignsContainerStyles(p) {
760
+ var getSignsContainerStyles = function getSignsContainerStyles(spring) {
756
761
  return {
757
- opacity: p,
758
- pointerEvents: p < 0.25 ? 'none' : 'auto'
762
+ opacity: spring,
763
+ pointerEvents: spring.to(function (p) {
764
+ return p < 0.25 ? 'none' : 'auto';
765
+ })
759
766
  };
760
767
  };
761
768
 
762
- var getSignStyles = function getSignStyles(i, p) {
769
+ var getSignStyles = function getSignStyles(spring) {
763
770
  return {
764
- opacity: p,
765
- transform: "translateY(".concat(3 * (1 - p), "rem) scale(").concat(1 - 0.25 * (1 - p), ")")
771
+ opacity: spring,
772
+ transform: spring.to(function (p) {
773
+ return "translateY(".concat(3 * Math.pow(1 - p, 5), "rem) scale(").concat(1 - 0.25 * (1 - p), ")");
774
+ })
766
775
  };
767
776
  };
768
777
 
769
- var getAuthorStyles = function getAuthorStyles(p) {
778
+ var getAuthorStyles = function getAuthorStyles(spring) {
770
779
  return {
771
- transform: "translateY(".concat(2 * (1 - p), "rem)"),
772
- opacity: p
780
+ transform: spring.to(function (p) {
781
+ return "translateY(".concat(2 * (1 - p), "rem)");
782
+ }),
783
+ opacity: spring
773
784
  };
774
785
  };
775
786
 
776
- var getBackdropStyles = function getBackdropStyles(p) {
787
+ var getBackdropStyles = function getBackdropStyles(spring) {
777
788
  return {
778
- opacity: p
789
+ opacity: spring
779
790
  };
780
791
  };
781
792
 
782
- var getModalStyles = function getModalStyles(p) {
793
+ var getModalStyles = function getModalStyles(spring) {
783
794
  return {
784
- transform: "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)"),
785
- pointerEvents: p < 0.1 ? 'none' : 'auto'
795
+ transform: spring.to(function (p) {
796
+ return "translateY(".concat(100 * (1 - (p < 0.2 ? 0.1 * p + p : p)), "%)");
797
+ }),
798
+ pointerEvents: spring.to(function (p) {
799
+ return p < 0.1 ? 'none' : 'auto';
800
+ })
786
801
  };
787
802
  }; // for editor purposes
788
803
 
@@ -806,7 +821,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
806
821
  var index = screenState.split('.').pop();
807
822
  setShowSignsGrid(1);
808
823
  setShowModal(1);
809
- setSelectedSign(signs[index]);
824
+ setSelectedSign(index);
810
825
  }
811
826
  }, [screenState]);
812
827
  React.useEffect(function () {
@@ -831,27 +846,19 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
831
846
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
832
847
  className: classNames__default["default"]([styles.container, (_ref7 = {}, _defineProperty__default["default"](_ref7, className, className !== null), _defineProperty__default["default"](_ref7, styles.isPlaceholder, isPlaceholder), _ref7)]),
833
848
  "data-screen-ready": true
834
- }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
835
- background: background,
849
+ }, showSignsGrid ? stopDragEventsPropagation : null), !isView ? /*#__PURE__*/React__default["default"].createElement("div", mouseBlocker) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
836
850
  width: width,
837
851
  height: height,
838
- resolution: resolution,
839
- playing: backgroundPlaying,
840
- muted: muted,
841
- shouldLoad: mediaShouldLoad,
842
- mediaRef: mediaRef
843
- }) : null, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
844
- width: width,
845
- height: height
852
+ className: styles.content
846
853
  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
847
854
  className: styles.layout,
848
855
  style: !isPlaceholder ? {
849
856
  padding: spacing,
850
- paddingTop: (current && !isPreview ? viewerTopHeight : 0) + spacing,
857
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
851
858
  paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing
852
859
  } : null,
853
860
  height: height * 0.8
854
- }, /*#__PURE__*/React__default["default"].createElement("div", {
861
+ }, /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
855
862
  className: styles.headerContainer,
856
863
  style: getHeaderStyles(showSignsGridProgress)
857
864
  }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -894,7 +901,7 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
894
901
  className: styles.buttonLabel
895
902
  }, button, {
896
903
  inline: true
897
- }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
904
+ }))) : null), isView && !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
898
905
  className: styles.header,
899
906
  style: getSignsContainerStyles(showSignsGridProgress)
900
907
  }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -921,20 +928,20 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
921
928
  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"
922
929
  })),
923
930
  withoutStyle: true
924
- }))) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
931
+ }))) : null, !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
925
932
  className: styles.signsGridContainer,
926
933
  style: getSignsContainerStyles(showSignsGridProgress)
927
934
  }, bindSignsDrag()), /*#__PURE__*/React__default["default"].createElement("div", {
928
935
  className: styles.signs
929
- }, signs.map(function (sign, i) {
936
+ }, signs.map(function (sign) {
930
937
  var _ref8 = sign || {},
931
938
  _ref8$id = _ref8.id,
932
939
  id = _ref8$id === void 0 ? null : _ref8$id;
933
940
 
934
- return /*#__PURE__*/React__default["default"].createElement("div", {
941
+ return /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
935
942
  key: id,
936
943
  className: styles.sign,
937
- style: getSignStyles(i, showSignsGridProgress)
944
+ style: getSignStyles(showSignsGridProgress)
938
945
  }, /*#__PURE__*/React__default["default"].createElement(SignCard, {
939
946
  key: id,
940
947
  sign: sign,
@@ -960,27 +967,38 @@ var UrbaniaHoroscope = function UrbaniaHoroscope(_ref) {
960
967
  backgroundClassName: styles.authorBackground,
961
968
  shouldLoad: mediaShouldLoad,
962
969
  style: getAuthorStyles(showSignsGridProgress)
963
- }) : null)) : null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
970
+ }) : null)) : null, /*#__PURE__*/React__default["default"].createElement(web.animated.div, Object.assign({
964
971
  className: styles.modal,
965
972
  style: getModalStyles(showModalProgress)
966
973
  }, bindModalDrag()), /*#__PURE__*/React__default["default"].createElement(SignModal, {
967
974
  width: width,
968
975
  height: height,
969
- sign: selectedSign,
976
+ sign: signs[selectedSign],
970
977
  subtitle: signSubtitle,
971
978
  onClick: onCloseModal
972
- })), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement("div", {
979
+ })), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
973
980
  className: styles.backdrop,
974
981
  style: getBackdropStyles(showSignsGridProgress)
975
982
  }, popupBackgroundUrl !== null ? /*#__PURE__*/React__default["default"].createElement("video", {
976
983
  className: styles.videoBackdrop,
977
984
  autoPlay: true,
978
985
  muted: true,
979
- loop: true
986
+ loop: true,
987
+ playsInline: true
980
988
  }, /*#__PURE__*/React__default["default"].createElement("source", {
981
989
  src: popupBackgroundUrl,
982
990
  type: "video/mp4"
983
- })) : null) : null)));
991
+ })) : null) : null)), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
992
+ background: background,
993
+ width: width,
994
+ height: height,
995
+ resolution: resolution,
996
+ playing: backgroundPlaying,
997
+ muted: muted,
998
+ shouldLoad: mediaShouldLoad,
999
+ mediaRef: mediaRef,
1000
+ className: styles.background
1001
+ }) : null);
984
1002
  };
985
1003
 
986
1004
  UrbaniaHoroscope.propTypes = propTypes;
@@ -1101,6 +1119,7 @@ var definition = [{
1101
1119
  defaultValue: signs,
1102
1120
  repeatable: true,
1103
1121
  withoutCreate: true,
1122
+ fieldName: 'signs',
1104
1123
  fields: [{
1105
1124
  name: 'word',
1106
1125
  type: 'heading-element',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-urbania-horoscope",
3
- "version": "0.3.251",
3
+ "version": "0.3.252",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -50,18 +50,18 @@
50
50
  },
51
51
  "dependencies": {
52
52
  "@babel/runtime": "^7.13.10",
53
- "@micromag/core": "^0.3.251",
54
- "@micromag/element-background": "^0.3.251",
55
- "@micromag/element-button": "^0.3.251",
56
- "@micromag/element-call-to-action": "^0.3.251",
57
- "@micromag/element-container": "^0.3.251",
58
- "@micromag/element-grid": "^0.3.251",
59
- "@micromag/element-heading": "^0.3.251",
60
- "@micromag/element-layout": "^0.3.251",
61
- "@micromag/element-scroll": "^0.3.251",
62
- "@micromag/element-text": "^0.3.251",
63
- "@micromag/element-urbania-author": "^0.3.251",
64
- "@micromag/transforms": "^0.3.251",
53
+ "@micromag/core": "^0.3.252",
54
+ "@micromag/element-background": "^0.3.252",
55
+ "@micromag/element-button": "^0.3.252",
56
+ "@micromag/element-call-to-action": "^0.3.252",
57
+ "@micromag/element-container": "^0.3.252",
58
+ "@micromag/element-grid": "^0.3.252",
59
+ "@micromag/element-heading": "^0.3.252",
60
+ "@micromag/element-layout": "^0.3.252",
61
+ "@micromag/element-scroll": "^0.3.252",
62
+ "@micromag/element-text": "^0.3.252",
63
+ "@micromag/element-urbania-author": "^0.3.252",
64
+ "@micromag/transforms": "^0.3.252",
65
65
  "@react-spring/core": "^9.1.1",
66
66
  "@react-spring/web": "^9.1.1",
67
67
  "@use-gesture/react": "^10.2.4",
@@ -75,5 +75,5 @@
75
75
  "publishConfig": {
76
76
  "access": "public"
77
77
  },
78
- "gitHead": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
78
+ "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
79
79
  }