@micromag/screen-urbania-recommendation 0.3.377 → 0.3.382

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText{color:#f28d77;font-family:Agrandir,sans-serif;font-size:100px;font-style:italic;font-weight:900;height:100%;line-height:.9;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);white-space:nowrap;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-didAnimate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromBottom{-webkit-animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(100%) rotate(180deg);-ms-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromTop{-webkit-animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);-ms-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{height:20%;left:10px;padding:10px;position:absolute;top:calc(100% - 24px);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close{color:#000;position:absolute;right:10px;top:10px;z-index:3}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:0 auto;-webkit-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;-o-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard .micromag-screen-urbania-recommendation-visualContainer{border-top-left-radius:10px;border-top-right-radius:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:0;border-top-right-radius:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-modalOpened{height:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer.micromag-screen-urbania-recommendation-modalOpened{border-radius:0;overflow:auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background-color:rgba(34,34,34,0);height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper.micromag-screen-urbania-recommendation-modalOpened{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);display:-ms-flexbox;display:flex;justify-content:center;left:50%;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);-o-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);z-index:2}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-transitioning{-webkit-transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);-o-transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56),-webkit-transform .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryContainer{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;top:100%;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{margin-left:auto;padding:14px 8px 14px 0;position:relative;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}
+.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-urbania-recommendation-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-disabled.micromag-screen-urbania-recommendation-container{overflow:hidden;pointer-events:none}.micromag-screen-urbania-recommendation-hidden.micromag-screen-urbania-recommendation-container{display:none;visibility:hidden}.micromag-screen-urbania-recommendation-placeholder.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{padding:6px;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-urbania-recommendation-container{-ms-flex-align:start;align-items:flex-start}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-background{z-index:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundTextContainer{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText{color:#f28d77;font-family:Agrandir,sans-serif;font-size:100px;font-style:italic;font-weight:900;height:100%;line-height:.9;text-align:center;text-transform:uppercase;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);white-space:nowrap;-webkit-writing-mode:vertical-lr;-ms-writing-mode:tb-lr;writing-mode:vertical-lr}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-didAnimate{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromBottom{-webkit-animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromBottom 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(100%) rotate(180deg);-ms-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-backgroundText.micromag-screen-urbania-recommendation-animateFromTop{-webkit-animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);animation:micromag-screen-urbania-recommendation-slideFromTop 1.2s cubic-bezier(.85,0,.15,1);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);-ms-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-content{z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-empty,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText{width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyText,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{height:50px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyVisual{width:calc(100% - 10px)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptySponsor{padding:5px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-emptyCategory{height:20%;left:10px;padding:10px;position:absolute;top:calc(100% - 24px);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer{-webkit-transition:opacity .2 ease-out;-o-transition:opacity .2 ease-out;transition:opacity .2 ease-out;z-index:1}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-footer.micromag-screen-urbania-recommendation-disabled{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-close{color:#000;position:absolute;right:10px;top:10px;z-index:3}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-closeIcon{height:1.5em;width:1.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard{background-color:#fff;border-radius:10px;-webkit-box-shadow:4px 4px 4px rgba(0,0,0,.25);box-shadow:4px 4px 4px rgba(0,0,0,.25);color:#000;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;margin:0 auto;-webkit-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;-o-transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;transition:height .4s cubic-bezier(.36,0,.66,-.56),opacity .4s ease;width:90%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#adadad}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-appear{-webkit-animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);animation:micromag-screen-urbania-recommendation-appear .5s cubic-bezier(.65,0,.35,1);-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard .micromag-screen-urbania-recommendation-visualContainer{border-top-left-radius:10px;border-top-right-radius:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-visualBottom .micromag-screen-urbania-recommendation-visualContainer{border-bottom-left-radius:10px;border-bottom-right-radius:10px;border-top-left-radius:0;border-top-right-radius:0;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-modalOpened{height:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textCard.micromag-screen-urbania-recommendation-hidden{opacity:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;max-height:250px;overflow:hidden;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualContainer.micromag-screen-urbania-recommendation-modalOpened{border-radius:0;overflow:auto}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor{background-color:#fffc00;font-family:Agrandir,sans-serif;font-size:10px;line-height:1;padding:5px 10px 3px;text-align:center;text-transform:uppercase;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor.micromag-screen-urbania-recommendation-hasVisual{position:absolute}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsorPlaceholder{padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);background-color:rgba(34,34,34,0);height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualWrapper.micromag-screen-urbania-recommendation-modalOpened{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;-webkit-backdrop-filter:blur(.25rem);backdrop-filter:blur(.25rem);background-color:rgba(34,34,34,.9);display:-ms-flexbox;display:flex;justify-content:center;left:50%;position:fixed;top:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);-o-transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);transition:background-color .4s cubic-bezier(.36,0,.66,-.56),backdrop-filter .4s cubic-bezier(.36,0,.66,-.56),-webkit-backdrop-filter .4s cubic-bezier(.36,0,.66,-.56);z-index:2}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton.micromag-screen-urbania-recommendation-transitioning{-webkit-transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);transition:-webkit-transform .4s cubic-bezier(.36,0,.66,-.56);-o-transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56);transition:transform .4s cubic-bezier(.36,0,.66,-.56),-webkit-transform .4s cubic-bezier(.36,0,.66,-.56)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover{-webkit-filter:saturate(1.1);filter:saturate(1.1)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-visualButton:hover>.micromag-screen-urbania-recommendation-iconContainer{opacity:.8;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#fff;border-radius:50%;bottom:10px;-webkit-box-shadow:0 0 2px rgba(0,0,0,.25);box-shadow:0 0 2px rgba(0,0,0,.25);display:-ms-flexbox;display:flex;height:30px;justify-content:center;left:10px;pointer-events:none;position:absolute;-webkit-transition:all .1s;-o-transition:all .1s;transition:all .1s;width:30px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-iconContainer.micromag-screen-urbania-recommendation-visualBottom{bottom:25px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-icon{height:14px;width:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-text{display:-ms-flexbox;display:flex;position:relative}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryContainer{-ms-flex-pack:center;display:-ms-flexbox;display:flex;justify-content:center;left:0;overflow:hidden;position:absolute;top:100%;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;white-space:nowrap}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-category{font-family:Agrandir Tight,sans-serif;font-size:28px;font-weight:900;padding:12px 10px 6px;text-align:center;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-categoryPlaceholder{background-color:#343434;padding:10px;width:20%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent{margin-left:auto;padding:14px 8px 14px 0;position:relative;width:80%}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-textContent.micromag-screen-urbania-recommendation-isPlaceholder{background-color:#e9e9e9;margin-left:2px;padding:10px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-titleContainer{overflow-wrap:break-word}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-title{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;font-size:1.2rem;font-weight:700;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{border-bottom:1px solid #000;font-family:Agrandir Tight,sans-serif;padding-top:3px;text-transform:uppercase}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date{font-size:14px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location{font-size:12px;font-weight:700}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-date>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-location>p,.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-sponsor>p{margin-bottom:0;margin-top:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description{font-family:Agrandir Tight,sans-serif;font-size:12px;font-weight:300;padding-top:3px}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p{margin-bottom:.5em}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-description p:last-child{margin-bottom:0}.micromag-screen-urbania-recommendation-container .micromag-screen-urbania-recommendation-descriptionPlaceholder{padding:10px 10px 30px}.micromag-screen-urbania-recommendation-container.micromag-screen-urbania-recommendation-isPlaceholder .micromag-screen-urbania-recommendation-layout{padding:10px}@-webkit-keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@keyframes micromag-screen-urbania-recommendation-appear{0%{opacity:0}to{opacity:1}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromBottom{0%{opacity:0;-webkit-transform:translateY(100%) rotate(180deg);transform:translateY(100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@-webkit-keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}@keyframes micromag-screen-urbania-recommendation-slideFromTop{0%{opacity:0;-webkit-transform:translateY(-100%) rotate(180deg);transform:translateY(-100%) rotate(180deg)}to{opacity:1;-webkit-transform:translateY(0) rotate(180deg);transform:translateY(0) rotate(180deg)}}

package/es/index.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import { PropTypes } from '@micromag/core';
-import { Close, ScreenElement, PlaceholderImage, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
+import { Close, ScreenElement, PlaceholderImage, MuteIcon, FullscreenIcon, PlaceholderText, PlaceholderTitle } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useViewerInteraction, useScreenRenderContext, useViewerContainer } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useResizeObserver, useActivityDetector, useDebounce } from '@micromag/core/hooks';
 import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromText } from '@micromag/core/utils';
@@ -21,7 +21,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
+var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
   category: PropTypes.headingElement,
@@ -59,7 +59,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
-  var _ref8, _ref9;
+  var _ref9, _ref10;
   var category = _ref.category,
     visual = _ref.visual,
     title = _ref.title,
@@ -89,6 +89,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     playing = _usePlaybackContext.playing,
     setPlaying = _usePlaybackContext.setPlaying,
     muted = _usePlaybackContext.muted,
+    setMuted = _usePlaybackContext.setMuted,
     setControls = _usePlaybackContext.setControls,
     showControls = _usePlaybackContext.showControls,
     hideControls = _usePlaybackContext.hideControls;
@@ -118,9 +119,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
   var _ref3 = image || {},
     _ref3$type = _ref3.type,
-    type = _ref3$type === void 0 ? null : _ref3$type;
+    type = _ref3$type === void 0 ? null : _ref3$type,
+    _ref3$metadata = _ref3.metadata,
+    videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
+  var _ref4 = videoMetadata || {},
+    _ref4$width = _ref4.width,
+    videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
+    _ref4$height = _ref4.height,
+    videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
   var hasVisual = image !== null;
   var isVideo = type === 'video';
+  var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
   var hasCategory = isTextFilled(category);
   var hasTitle = isTextFilled(title);
   var hasDate = isTextFilled(date);
@@ -148,11 +157,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     textContainerRef = _useResizeObserver.ref,
     _useResizeObserver$en = _useResizeObserver.entry.contentRect,
     textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
-  var _ref4 = textContainerRect || {},
-    _ref4$width = _ref4.width,
-    textContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-    _ref4$height = _ref4.height,
-    textContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+  var _ref5 = textContainerRect || {},
+    _ref5$width = _ref5.width,
+    textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
+    _ref5$height = _ref5.height,
+    textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
   var _useResizeObserver2 = useResizeObserver(),
     visualWrapperRef = _useResizeObserver2.ref;
   // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
@@ -166,13 +175,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     visualModalOpened = _useState10[0],
     setVisualModalOpened = _useState10[1];
-  var _ref5 = background || {},
-    _ref5$text = _ref5.text,
-    backgroundText = _ref5$text === void 0 ? null : _ref5$text;
-  var _ref6 = backgroundText || {},
-    _ref6$body = _ref6.body,
-    backgroundTextBody = _ref6$body === void 0 ? null : _ref6$body,
-    backgroundTextStyle = _ref6.textStyle;
+  var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
+  var _ref6 = background || {},
+    _ref6$text = _ref6.text,
+    backgroundText = _ref6$text === void 0 ? null : _ref6$text;
+  var _ref7 = backgroundText || {},
+    _ref7$body = _ref7.body,
+    backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
+    backgroundTextStyle = _ref7.textStyle;
   var finalBackgroundText = useMemo(function () {
     function distributeTextEqually(text) {
       var words = text !== null ? text.split(' ') : [];
@@ -216,8 +226,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [isView, current, setBackgroundAnimationStarted]);
 
   // scroll events
-  var onScrolledBottom = useCallback(function (_ref7) {
-    var initial = _ref7.initial;
+  var onScrolledBottom = useCallback(function (_ref8) {
+    var initial = _ref8.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -244,6 +254,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     if (!visualModalOpened) {
       setVisualModalTransitioning(true);
     }
+    if (muted && isVideo) {
+      setMuted(false);
+    }
   }, [setVisualModalOpened]);
   var onCloseModal = useCallback(function () {
     if (visualModalTransitioning) {
@@ -310,7 +323,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [activityDetected, showControls, isVideo, hideControls]);
   useDebounce(toggleControlsVisibility, activityDetected, 1000);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref8 = {}, _defineProperty(_ref8, className, className !== null), _defineProperty(_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
+    className: classNames([styles.container, (_ref9 = {}, _defineProperty(_ref9, className, className !== null), _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
@@ -352,7 +365,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React.createElement(Close, {
     className: styles.closeIcon
   })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React.createElement(Container, {
-    className: classNames([styles.textCard, (_ref9 = {}, _defineProperty(_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref9, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref9, styles.appear, backgroundAnimationStarted), _defineProperty(_ref9, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref9, styles.hidden, !current), _ref9)])
+    className: classNames([styles.textCard, (_ref10 = {}, _defineProperty(_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty(_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty(_ref10, styles.appear, backgroundAnimationStarted), _defineProperty(_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty(_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.visualContainer, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
   }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -369,32 +382,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     }),
     emptyClassName: classNames([styles.empty, styles.emptyVisual]),
     isEmpty: !hasVisual
-  }, hasVisual && !isVideo ? /*#__PURE__*/React.createElement("div", {
-    ref: visualWrapperRef,
-    className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
-    style: visualModalTransitioning || visualModalOpened ? {
-      width: width,
-      height: height
-    } : {
-      width: textContainerWidth,
-      height: 'auto'
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
-    onClick: onClickVisual,
-    disabled: backgroundAnimationStarted || visualModalOpened,
-    style: {
-      transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
-    }
-  }, /*#__PURE__*/React.createElement(Visual, {
-    className: styles.visual,
-    imageClassName: styles.visual,
-    media: image,
-    width: visualModalOpened ? width : textContainerWidth,
-    resolution: resolution,
-    active: active,
-    shouldLoad: mediaShouldLoad
-  }))) : null, hasVisual && isVideo ? /*#__PURE__*/React.createElement("div", {
+  }, hasVisual ? /*#__PURE__*/React.createElement("div", {
     ref: visualWrapperRef,
     className: classNames([styles.visualWrapper, _defineProperty({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
     style: visualModalTransitioning || visualModalOpened ? {
@@ -407,26 +395,39 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React.createElement(Button, {
     className: classNames([styles.visualButton, _defineProperty({}, styles.transitioning, visualModalTransitioning)]),
     onClick: onClickVisual,
-    disabled: backgroundAnimationStarted || visualModalOpened,
+    disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
     style: {
       transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
     }
-  }, /*#__PURE__*/React.createElement(Visual, {
-    videoClassName: styles.videoVisual,
+  }, isVideo ? /*#__PURE__*/React.createElement(Visual, {
     media: image,
     mediaRef: mediaRef,
-    width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
+    width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
     ,
-    height: visualModalOpened ? height : 250,
+    height: visualModalTransitioning || visualModalOpened ? height : 250,
     resolution: resolution,
     objectFit: {
-      fit: 'cover'
+      fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
     },
     shouldLoad: mediaShouldLoad,
     muted: muted || !visualModalOpened,
     withoutVideo: isPreview,
     playing: videoPlaying
-  }))) : null), /*#__PURE__*/React.createElement(ScreenElement, {
+  }) : /*#__PURE__*/React.createElement(Visual, {
+    media: image,
+    width: visualModalOpened ? width : textContainerWidth,
+    resolution: resolution,
+    active: active,
+    shouldLoad: mediaShouldLoad
+  }), visualModalClosed ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.iconContainer, _defineProperty({}, styles.visualBottom, visualLayout === 'label-top')])
+  }, isVideo ? /*#__PURE__*/React.createElement(MuteIcon, {
+    color: "#000",
+    className: styles.icon
+  }) : /*#__PURE__*/React.createElement(FullscreenIcon, {
+    color: "#000",
+    className: styles.icon
+  })) : null)) : null), /*#__PURE__*/React.createElement(ScreenElement, {
     key: "sponsor",
     placeholder: /*#__PURE__*/React.createElement(PlaceholderText, {
       className: styles.sponsorPlaceholder
@@ -532,7 +533,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, (finalBackgroundText || []).map(function (line, i) {
     var _classNames;
     return /*#__PURE__*/React.createElement("div", {
-      key: "background-text-".concat(line),
+      key: "reco-background-text-".concat(i + 1),
       className: classNames([styles.backgroundText], (_classNames = {}, _defineProperty(_classNames, styles.didAnimate, didAnimate), _defineProperty(_classNames, styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), _defineProperty(_classNames, styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0), _classNames)),
       style: _objectSpread({
         animationDelay: "".concat(i * 100, "ms")

package/lib/index.js

@@ -44,7 +44,7 @@ var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
 var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
 var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
 
-var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
+var styles = {"container":"micromag-screen-urbania-recommendation-container","visualButton":"micromag-screen-urbania-recommendation-visualButton","close":"micromag-screen-urbania-recommendation-close","backgroundTextContainer":"micromag-screen-urbania-recommendation-backgroundTextContainer","background":"micromag-screen-urbania-recommendation-background","disabled":"micromag-screen-urbania-recommendation-disabled","hidden":"micromag-screen-urbania-recommendation-hidden","placeholder":"micromag-screen-urbania-recommendation-placeholder","content":"micromag-screen-urbania-recommendation-content","emptyCategory":"micromag-screen-urbania-recommendation-emptyCategory","empty":"micromag-screen-urbania-recommendation-empty","emptyText":"micromag-screen-urbania-recommendation-emptyText","backgroundText":"micromag-screen-urbania-recommendation-backgroundText","didAnimate":"micromag-screen-urbania-recommendation-didAnimate","animateFromBottom":"micromag-screen-urbania-recommendation-animateFromBottom","slideFromBottom":"micromag-screen-urbania-recommendation-slideFromBottom","animateFromTop":"micromag-screen-urbania-recommendation-animateFromTop","slideFromTop":"micromag-screen-urbania-recommendation-slideFromTop","emptyVisual":"micromag-screen-urbania-recommendation-emptyVisual","emptySponsor":"micromag-screen-urbania-recommendation-emptySponsor","footer":"micromag-screen-urbania-recommendation-footer","closeIcon":"micromag-screen-urbania-recommendation-closeIcon","textCard":"micromag-screen-urbania-recommendation-textCard","isPlaceholder":"micromag-screen-urbania-recommendation-isPlaceholder","appear":"micromag-screen-urbania-recommendation-appear","visualContainer":"micromag-screen-urbania-recommendation-visualContainer","visualBottom":"micromag-screen-urbania-recommendation-visualBottom","modalOpened":"micromag-screen-urbania-recommendation-modalOpened","sponsor":"micromag-screen-urbania-recommendation-sponsor","hasVisual":"micromag-screen-urbania-recommendation-hasVisual","sponsorPlaceholder":"micromag-screen-urbania-recommendation-sponsorPlaceholder","visualWrapper":"micromag-screen-urbania-recommendation-visualWrapper","transitioning":"micromag-screen-urbania-recommendation-transitioning","iconContainer":"micromag-screen-urbania-recommendation-iconContainer","icon":"micromag-screen-urbania-recommendation-icon","text":"micromag-screen-urbania-recommendation-text","categoryContainer":"micromag-screen-urbania-recommendation-categoryContainer","category":"micromag-screen-urbania-recommendation-category","categoryPlaceholder":"micromag-screen-urbania-recommendation-categoryPlaceholder","textContent":"micromag-screen-urbania-recommendation-textContent","titleContainer":"micromag-screen-urbania-recommendation-titleContainer","title":"micromag-screen-urbania-recommendation-title","date":"micromag-screen-urbania-recommendation-date","location":"micromag-screen-urbania-recommendation-location","description":"micromag-screen-urbania-recommendation-description","descriptionPlaceholder":"micromag-screen-urbania-recommendation-descriptionPlaceholder","layout":"micromag-screen-urbania-recommendation-layout"};
 
 var propTypes = {
   category: core.PropTypes.headingElement,
@@ -82,7 +82,7 @@ var defaultProps = {
   className: null
 };
 var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
-  var _ref8, _ref9;
+  var _ref9, _ref10;
   var category = _ref.category,
     visual = _ref.visual,
     title = _ref.title,
@@ -112,6 +112,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     playing = _usePlaybackContext.playing,
     setPlaying = _usePlaybackContext.setPlaying,
     muted = _usePlaybackContext.muted,
+    setMuted = _usePlaybackContext.setMuted,
     setControls = _usePlaybackContext.setControls,
     showControls = _usePlaybackContext.showControls,
     hideControls = _usePlaybackContext.hideControls;
@@ -141,9 +142,17 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     visualLayout = _ref2$visualLayout === void 0 ? null : _ref2$visualLayout; // note: image can be a video
   var _ref3 = image || {},
     _ref3$type = _ref3.type,
-    type = _ref3$type === void 0 ? null : _ref3$type;
+    type = _ref3$type === void 0 ? null : _ref3$type,
+    _ref3$metadata = _ref3.metadata,
+    videoMetadata = _ref3$metadata === void 0 ? null : _ref3$metadata;
+  var _ref4 = videoMetadata || {},
+    _ref4$width = _ref4.width,
+    videoWidth = _ref4$width === void 0 ? 0 : _ref4$width,
+    _ref4$height = _ref4.height,
+    videoHeight = _ref4$height === void 0 ? 0 : _ref4$height;
   var hasVisual = image !== null;
   var isVideo = type === 'video';
+  var isVideoLandscape = hasVisual && isVideo && videoWidth > videoHeight;
   var hasCategory = utils.isTextFilled(category);
   var hasTitle = utils.isTextFilled(title);
   var hasDate = utils.isTextFilled(date);
@@ -171,11 +180,11 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     textContainerRef = _useResizeObserver.ref,
     _useResizeObserver$en = _useResizeObserver.entry.contentRect,
     textContainerRect = _useResizeObserver$en === void 0 ? null : _useResizeObserver$en;
-  var _ref4 = textContainerRect || {},
-    _ref4$width = _ref4.width,
-    textContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width,
-    _ref4$height = _ref4.height,
-    textContainerHeight = _ref4$height === void 0 ? 0 : _ref4$height;
+  var _ref5 = textContainerRect || {},
+    _ref5$width = _ref5.width,
+    textContainerWidth = _ref5$width === void 0 ? 0 : _ref5$width,
+    _ref5$height = _ref5.height,
+    textContainerHeight = _ref5$height === void 0 ? 0 : _ref5$height;
   var _useResizeObserver2 = hooks.useResizeObserver(),
     visualWrapperRef = _useResizeObserver2.ref;
   // const { width: visualWrapperWidth = 0, height: visualWrapperHeight = 0 } =
@@ -189,13 +198,14 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     _useState10 = _slicedToArray__default["default"](_useState9, 2),
     visualModalOpened = _useState10[0],
     setVisualModalOpened = _useState10[1];
-  var _ref5 = background || {},
-    _ref5$text = _ref5.text,
-    backgroundText = _ref5$text === void 0 ? null : _ref5$text;
-  var _ref6 = backgroundText || {},
-    _ref6$body = _ref6.body,
-    backgroundTextBody = _ref6$body === void 0 ? null : _ref6$body,
-    backgroundTextStyle = _ref6.textStyle;
+  var visualModalClosed = !visualModalTransitioning && !visualModalOpened;
+  var _ref6 = background || {},
+    _ref6$text = _ref6.text,
+    backgroundText = _ref6$text === void 0 ? null : _ref6$text;
+  var _ref7 = backgroundText || {},
+    _ref7$body = _ref7.body,
+    backgroundTextBody = _ref7$body === void 0 ? null : _ref7$body,
+    backgroundTextStyle = _ref7.textStyle;
   var finalBackgroundText = React.useMemo(function () {
     function distributeTextEqually(text) {
       var words = text !== null ? text.split(' ') : [];
@@ -239,8 +249,8 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [isView, current, setBackgroundAnimationStarted]);
 
   // scroll events
-  var onScrolledBottom = React.useCallback(function (_ref7) {
-    var initial = _ref7.initial;
+  var onScrolledBottom = React.useCallback(function (_ref8) {
+    var initial = _ref8.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -267,6 +277,9 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     if (!visualModalOpened) {
       setVisualModalTransitioning(true);
     }
+    if (muted && isVideo) {
+      setMuted(false);
+    }
   }, [setVisualModalOpened]);
   var onCloseModal = React.useCallback(function () {
     if (visualModalTransitioning) {
@@ -333,7 +346,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, [activityDetected, showControls, isVideo, hideControls]);
   hooks.useDebounce(toggleControlsVisibility, activityDetected, 1000);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, className, className !== null), _defineProperty__default["default"](_ref8, styles.isPlaceholder, isPlaceholder), _ref8)]),
+    className: classNames__default["default"]([styles.container, (_ref9 = {}, _defineProperty__default["default"](_ref9, className, className !== null), _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _ref9)]),
     "data-screen-ready": true
   }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
     width: width,
@@ -375,7 +388,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(components.Close, {
     className: styles.closeIcon
   })) : null, hasTextCard || isPlaceholder || isEdit ? /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
-    className: classNames__default["default"]([styles.textCard, (_ref9 = {}, _defineProperty__default["default"](_ref9, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref9, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref9, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref9, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref9, styles.hidden, !current), _ref9)])
+    className: classNames__default["default"]([styles.textCard, (_ref10 = {}, _defineProperty__default["default"](_ref10, styles.isPlaceholder, isPlaceholder), _defineProperty__default["default"](_ref10, styles.visualBottom, visualLayout === 'label-top'), _defineProperty__default["default"](_ref10, styles.appear, backgroundAnimationStarted), _defineProperty__default["default"](_ref10, styles.modalOpened, visualModalTransitioning || visualModalOpened), _defineProperty__default["default"](_ref10, styles.hidden, !current && isView && !isPreview), _ref10)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles.visualContainer, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)])
   }, /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
@@ -392,32 +405,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
     }),
     emptyClassName: classNames__default["default"]([styles.empty, styles.emptyVisual]),
     isEmpty: !hasVisual
-  }, hasVisual && !isVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: visualWrapperRef,
-    className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
-    style: visualModalTransitioning || visualModalOpened ? {
-      width: width,
-      height: height
-    } : {
-      width: textContainerWidth,
-      height: 'auto'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
-    onClick: onClickVisual,
-    disabled: backgroundAnimationStarted || visualModalOpened,
-    style: {
-      transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
-    className: styles.visual,
-    imageClassName: styles.visual,
-    media: image,
-    width: visualModalOpened ? width : textContainerWidth,
-    resolution: resolution,
-    active: active,
-    shouldLoad: mediaShouldLoad
-  }))) : null, hasVisual && isVideo ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, hasVisual ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: visualWrapperRef,
     className: classNames__default["default"]([styles.visualWrapper, _defineProperty__default["default"]({}, styles.modalOpened, visualModalTransitioning || visualModalOpened)]),
     style: visualModalTransitioning || visualModalOpened ? {
@@ -430,26 +418,39 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     className: classNames__default["default"]([styles.visualButton, _defineProperty__default["default"]({}, styles.transitioning, visualModalTransitioning)]),
     onClick: onClickVisual,
-    disabled: backgroundAnimationStarted || visualModalOpened,
+    disabled: isPreview || backgroundAnimationStarted || visualModalOpened,
     style: {
       transform: visualModalTransitioning ? "scale(".concat(width / textContainerWidth, ")") : null
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
-    videoClassName: styles.videoVisual,
+  }, isVideo ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
     media: image,
     mediaRef: mediaRef,
-    width: visualModalOpened ? width : (width - 40) * 0.9 + 1 // @TODO: fix magic numbers ((width - margins) * card width + gapfix )
+    width: visualModalTransitioning || visualModalOpened ? width : (width - 40) * 0.9 + 1 // ((width - margins) * card width + gapfix )
     ,
-    height: visualModalOpened ? height : 250,
+    height: visualModalTransitioning || visualModalOpened ? height : 250,
     resolution: resolution,
     objectFit: {
-      fit: 'cover'
+      fit: (visualModalTransitioning || visualModalOpened) && isVideoLandscape ? 'contain' : 'cover'
     },
     shouldLoad: mediaShouldLoad,
     muted: muted || !visualModalOpened,
     withoutVideo: isPreview,
     playing: videoPlaying
-  }))) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  }) : /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
+    media: image,
+    width: visualModalOpened ? width : textContainerWidth,
+    resolution: resolution,
+    active: active,
+    shouldLoad: mediaShouldLoad
+  }), visualModalClosed ? /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"]([styles.iconContainer, _defineProperty__default["default"]({}, styles.visualBottom, visualLayout === 'label-top')])
+  }, isVideo ? /*#__PURE__*/React__default["default"].createElement(components.MuteIcon, {
+    color: "#000",
+    className: styles.icon
+  }) : /*#__PURE__*/React__default["default"].createElement(components.FullscreenIcon, {
+    color: "#000",
+    className: styles.icon
+  })) : null)) : null), /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
     key: "sponsor",
     placeholder: /*#__PURE__*/React__default["default"].createElement(components.PlaceholderText, {
       className: styles.sponsorPlaceholder
@@ -555,7 +556,7 @@ var UrbaniaRecommendation = function UrbaniaRecommendation(_ref) {
   }, (finalBackgroundText || []).map(function (line, i) {
     var _classNames;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: "background-text-".concat(line),
+      key: "reco-background-text-".concat(i + 1),
       className: classNames__default["default"]([styles.backgroundText], (_classNames = {}, _defineProperty__default["default"](_classNames, styles.didAnimate, didAnimate), _defineProperty__default["default"](_classNames, styles.animateFromBottom, backgroundAnimationStarted && i % 2 !== 0), _defineProperty__default["default"](_classNames, styles.animateFromTop, backgroundAnimationStarted && i % 2 === 0), _classNames)),
       style: _objectSpread__default["default"]({
         animationDelay: "".concat(i * 100, "ms")

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-urbania-recommendation",
-    "version": "0.3.377",
+    "version": "0.3.382",
     "description": "",
     "keywords": [
         "javascript"
@@ -49,18 +49,18 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.377",
-        "@micromag/element-background": "^0.3.377",
-        "@micromag/element-button": "^0.3.377",
-        "@micromag/element-container": "^0.3.377",
-        "@micromag/element-footer": "^0.3.377",
-        "@micromag/element-header": "^0.3.377",
-        "@micromag/element-heading": "^0.3.377",
-        "@micromag/element-layout": "^0.3.377",
-        "@micromag/element-scroll": "^0.3.377",
-        "@micromag/element-text": "^0.3.377",
-        "@micromag/element-visual": "^0.3.377",
-        "@micromag/transforms": "^0.3.377",
+        "@micromag/core": "^0.3.379",
+        "@micromag/element-background": "^0.3.379",
+        "@micromag/element-button": "^0.3.379",
+        "@micromag/element-container": "^0.3.379",
+        "@micromag/element-footer": "^0.3.379",
+        "@micromag/element-header": "^0.3.379",
+        "@micromag/element-heading": "^0.3.379",
+        "@micromag/element-layout": "^0.3.379",
+        "@micromag/element-scroll": "^0.3.379",
+        "@micromag/element-text": "^0.3.379",
+        "@micromag/element-visual": "^0.3.379",
+        "@micromag/transforms": "^0.3.379",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "80f2c43eabcb9c8e23e71704751c4ad4066e4d3a"
+    "gitHead": "470c65ef8986236ceb95a17ed507ed82e42349e6"
 }