@micromag/viewer 0.3.670 → 0.3.672

package/assets/css/styles.css

@@ -4,8 +4,9 @@
 .micromag-viewer-menus-menu-container-backdrop,.micromag-viewer-menus-menu-container-heightContainer{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-container-container{color:#fff}.micromag-viewer-menus-menu-container-heightContainer{overflow:hidden;z-index:2}.micromag-viewer-menus-menu-container-backdrop{-webkit-backdrop-filter:blur(.75rem);backdrop-filter:blur(.75rem);background-color:rgba(28,28,28,.75);z-index:1}
 .micromag-viewer-menus-menu-dot-button{-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-viewer-menus-menu-dot-progress{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-dot-container{-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dot-container:last-child{margin-right:0}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-button{height:100%;padding:2px 10px;width:auto}.micromag-viewer-menus-menu-dot-container.micromag-viewer-menus-menu-dot-vertical .micromag-viewer-menus-menu-dot-dot{height:100%;width:2px}.micromag-viewer-menus-menu-dot-button{display:block;padding:5px 2px 15px;width:100%}@media (hover:hover){.micromag-viewer-menus-menu-dot-button:hover .micromag-viewer-menus-menu-dot-dot{background-color:#fff!important;-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}}.micromag-viewer-menus-menu-dot-button:active .micromag-viewer-menus-menu-dot-dot,.micromag-viewer-menus-menu-dot-button:focus-visible .micromag-viewer-menus-menu-dot-dot{-webkit-transform:scaleY(1.5);-ms-transform:scaleY(1.5);transform:scaleY(1.5)}.micromag-viewer-menus-menu-dot-dot{background-color:hsla(0,0%,100%,.45);display:block;height:2px;position:relative;-webkit-transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:-webkit-transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1);transition:transform .3s cubic-bezier(.4,1.69,0,1),-webkit-transform .3s cubic-bezier(.4,1.69,0,1);width:100%}.micromag-viewer-menus-menu-dot-progress{-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-viewer-menus-menu-dot-subDot{border-radius:0;display:block;position:relative}.micromag-viewer-menus-menu-dot-subDot:after{background-color:inherit;content:"";height:100%;left:100%;position:absolute;width:1px}.micromag-viewer-menus-menu-dot-dots{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;width:100%}@-webkit-keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(1.5);transform:scaleY(1.5)}}@keyframes micromag-viewer-menus-menu-dot-outlineBounce{to{-webkit-transform:scaleY(1.5);transform:scaleY(1.5)}}
 .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{-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-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-buttons,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-left:8px;padding-right:2px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{background:transparent;-ms-flex-direction:column;flex-direction:column}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-ms-flex-direction:column;flex-direction:column;height:100%;width:auto}
+.micromag-viewer-partials-micromag-branding-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.micromag-viewer-partials-micromag-branding-link{color:inherit;display:-ms-flexbox;display:flex;-webkit-text-decoration:none;text-decoration:none}.micromag-viewer-partials-micromag-branding-text{display:inline-block;font-size:12px;padding:0 10px 0 0}.micromag-viewer-partials-micromag-branding-icon{max-width:140px;width:100%}
 .micromag-viewer-menus-menu-screen-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;height:100%;left:0;padding:0;position:relative;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-screen-container{height:0;position:relative;width:100%}.micromag-viewer-menus-menu-screen-button{border:0 solid transparent;border-radius:.45rem;display:block;-webkit-transition:border-width .4s cubic-bezier(.4,1.69,0,1);transition:border-width .4s cubic-bezier(.4,1.69,0,1);z-index:2}.micromag-viewer-menus-menu-screen-button:focus-visible{-webkit-box-shadow:0 0 1px 1px #fff;box-shadow:0 0 1px 1px #fff;-webkit-box-shadow:0 0 1px 1px var(--micromag-focus-color,#fff);box-shadow:0 0 1px 1px var(--micromag-focus-color,#fff);outline:.15rem solid #fff;outline:.15rem solid var(--micromag-focus-color,#fff)}.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button{border-color:#fff;border-color:var(--micromag-focus-color,#fff);border-width:.2rem}@media (hover:hover){.micromag-viewer-menus-menu-screen-isCurrent .micromag-viewer-menus-menu-screen-button:hover{border:.25rem solid #fff;border:.25rem solid var(--micromag-focus-color,#fff)}}@media (hover:hover){.micromag-viewer-menus-menu-screen-button:hover{border:.1rem solid #fff;border:.1rem solid var(--micromag-focus-color,#fff)}}.micromag-viewer-menus-menu-screen-inner{pointer-events:none;z-index:1}.micromag-viewer-menus-menu-screen-subScreenBadge{bottom:.25rem;font-size:.9rem;font-weight:700;pointer-events:none;position:absolute;right:.25rem;z-index:2}.micromag-viewer-menus-menu-screen-subScreenCount{color:#343434;left:50%;letter-spacing:-.05rem;position:absolute;text-align:center;top:50%;-webkit-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);-ms-transform:translate(-50%,-50%) translate(-.1rem,-.1rem);transform:translate(-50%,-50%) translate(-.1rem,-.1rem);z-index:2}.micromag-viewer-menus-menu-screen-subScreenIcon{height:auto;position:relative;width:1.15rem;z-index:1;fill:#fff}.micromag-viewer-menus-menu-screen-screen{-webkit-animation:micromag-viewer-menus-menu-screen-intro .5s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-screen-intro .5s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;border-radius:.45rem;opacity:0;overflow:hidden}@-webkit-keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.1rem}to{border-width:.25rem}}@keyframes micromag-viewer-menus-menu-screen-pulse{0%{border-width:.1rem}to{border-width:.25rem}}@-webkit-keyframes micromag-viewer-menus-menu-screen-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-screen-intro{to{opacity:1}}
-.micromag-viewer-menus-menu-preview-scroll{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-preview-container{background-position:50%;background-repeat:no-repeat;background-size:cover;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-content{position:relative;-ms-flex-positive:1;flex-grow:1;height:100%;max-height:100%}.micromag-viewer-menus-menu-preview-buttons{display:-ms-flexbox;display:flex;position:relative;z-index:3;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;height:30px;margin-right:10px;width:30px}.micromag-viewer-menus-menu-preview-icon{display:block;height:auto;width:1rem}.micromag-viewer-menus-menu-preview-titleContainer{padding:10px 80px;text-align:center;width:100%}.micromag-viewer-menus-menu-preview-headerContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-badge{border-color:#fff;color:#fff;display:inline-block;margin:0 auto 10px}.micromag-viewer-menus-menu-preview-title{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:24px;margin:0 auto;max-width:500px;text-align:center}.micromag-viewer-menus-menu-preview-nav{position:relative;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-preview-items{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.75rem!important;position:relative}.micromag-viewer-menus-menu-preview-item{position:relative;width:33.333%}.micromag-viewer-menus-menu-preview-inner{padding:2px}.micromag-viewer-menus-menu-preview-frame{background-color:#343434;border-radius:.45rem;height:0;width:100%}.micromag-viewer-menus-menu-preview-screen{-webkit-animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;border-radius:.45rem;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;content-visibility:auto;opacity:0}@-webkit-keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}
+.micromag-viewer-menus-menu-preview-scroll{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-preview-container{background-position:50%;background-repeat:no-repeat;background-size:cover;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-content{position:relative;-ms-flex-positive:1;flex-grow:1;height:100%;max-height:100%}.micromag-viewer-menus-menu-preview-scrollee{min-height:100svh;position:relative;width:100%}.micromag-viewer-menus-menu-preview-buttons{display:-ms-flexbox;display:flex;position:relative;z-index:3;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-organisation{-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;height:30px;margin-right:10px;width:30px}.micromag-viewer-menus-menu-preview-icon{display:block;height:auto;width:1rem}.micromag-viewer-menus-menu-preview-titleContainer{padding:10px 80px;text-align:center;width:100%}.micromag-viewer-menus-menu-preview-headerContainer{position:relative;width:100%}.micromag-viewer-menus-menu-preview-badge{border-color:#fff;color:#fff;display:inline-block;margin:0 auto 10px}.micromag-viewer-menus-menu-preview-title{display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:24px;margin:0 auto;max-width:500px;text-align:center}.micromag-viewer-menus-menu-preview-nav{position:relative;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding:10px}.micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-items{list-style:none;margin:0;padding:0}.micromag-viewer-menus-menu-preview-items{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:.75rem!important;position:relative}.micromag-viewer-menus-menu-preview-item{position:relative;width:33.333%}.micromag-viewer-menus-menu-preview-inner{padding:2px}.micromag-viewer-menus-menu-preview-frame{background-color:#343434;border-radius:.45rem;height:0;width:100%}.micromag-viewer-menus-menu-preview-screen{-webkit-animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;animation:micromag-viewer-menus-menu-preview-intro 1s cubic-bezier(.6,0,.4,1) 50ms 1 forwards;border-radius:.45rem;-webkit-box-shadow:0 0 2px #1c1c1c;box-shadow:0 0 2px #1c1c1c;content-visibility:auto;opacity:0}.micromag-viewer-menus-menu-preview-micromagBrandingSeparator{height:45px;width:100%}.micromag-viewer-menus-menu-preview-micromagBrandingContainer{bottom:0;padding:10px;position:absolute;width:100%}@-webkit-keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}@keyframes micromag-viewer-menus-menu-preview-intro{to{opacity:1}}
 .micromag-viewer-partials-micromag-preview-container{display:-ms-flexbox;display:flex;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.micromag-viewer-partials-micromag-preview-cover{-ms-flex-negative:0;flex-shrink:0;margin-right:.5rem;overflow:hidden}.micromag-viewer-partials-micromag-preview-info{white-space:normal}.micromag-viewer-partials-micromag-preview-url{font-size:.75rem;margin:.5rem 0}.micromag-viewer-partials-micromag-preview-container .micromag-viewer-partials-micromag-preview-title{font-family:Helvetica,Arial,sans-serif!important;font-size:1.1rem!important;font-weight:700;margin-bottom:.25rem}
 .micromag-viewer-menus-menu-share-scroll{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-menus-menu-share-container{background-position:50%;background-repeat:no-repeat;background-size:cover;-ms-touch-action:none;touch-action:none}.micromag-viewer-menus-menu-share-container.micromag-viewer-menus-menu-share-disabled .micromag-viewer-menus-menu-share-button{pointer-events:none}.micromag-viewer-menus-menu-share-content{position:relative;-ms-flex-positive:1;flex-grow:1;height:100%;max-height:100%}.micromag-viewer-menus-menu-share-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:0 auto;max-width:500px;padding:10px;position:relative}.micromag-viewer-menus-menu-share-organisation{-ms-flex-negative:0;background-color:#fff;background-position:50%;background-repeat:no-repeat;background-size:contain;border-radius:50%;flex-shrink:0;height:30px;margin-right:10px;width:30px}.micromag-viewer-menus-menu-share-icon{display:block;height:auto;width:1rem}.micromag-viewer-menus-menu-share-header{background-color:rgba(0,0,0,.15);border-radius:.5rem;margin:.5rem 0;max-width:600px;padding:.5rem}.micromag-viewer-menus-menu-share-mode{margin-top:.5rem}.micromag-viewer-menus-menu-share-mode label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;font-size:14px;line-height:1.4;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-share-mode input{animation:micromag-viewer-menus-menu-share-bump .5s cubic-bezier(.6,0,.4,1) 1 alternate-reverse forwards;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid #fff;border-radius:4px;height:1rem;margin-right:.5rem;-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1);width:1rem}.micromag-viewer-menus-menu-share-mode input:active{-webkit-transform:scale(1.3);-ms-transform:scale(1.3);transform:scale(1.3);-webkit-transition:-webkit-transform .3s cubic-bezier(.41,1.69,.04,.67);transition:-webkit-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-viewer-menus-menu-share-mode input:checked{background-color:#fff}.micromag-viewer-menus-menu-share-options{margin-bottom:3rem}
 .micromag-viewer-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-viewer-container address,.micromag-viewer-container blockquote,.micromag-viewer-container caption,.micromag-viewer-container dl,.micromag-viewer-container figure,.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container label,.micromag-viewer-container legend,.micromag-viewer-container li,.micromag-viewer-container ol,.micromag-viewer-container p,.micromag-viewer-container pre,.micromag-viewer-container ul{margin:0;padding:0}.micromag-viewer-container *,.micromag-viewer-container :after,.micromag-viewer-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container li,.micromag-viewer-container p{font-weight:inherit}.micromag-viewer-menuContainer,.micromag-viewer-menuPreview,.micromag-viewer-menuShare,.micromag-viewer-screenContainer,.micromag-viewer-screensFrame{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-viewer-screenContainer:focus-visible{outline:3px solid #a13dff;outline-offset:4px}.micromag-viewer-container{background-color:#1c1c1c;color:#fff;height:100%;overflow:hidden;position:relative;width:100%}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screensFrame{bottom:0;left:50%;margin:auto;top:0;-webkit-transform:translate(-50%);-ms-transform:translate(-50%);transform:translate(-50%)}.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-dots,.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuNavContainer,.micromag-viewer-container.micromag-viewer-hideMenu .micromag-viewer-menuTopContainer{opacity:0;pointer-events:none}.micromag-viewer-container.micromag-viewer-disableMenu .micromag-viewer-dots,.micromag-viewer-container.micromag-viewer-disableMenu .micromag-viewer-menuNavContainer,.micromag-viewer-container.micromag-viewer-disableMenu .micromag-viewer-menuTopContainer{pointer-events:none}.micromag-viewer-content{cursor:-webkit-grab;cursor:grab;height:100%;overflow:hidden;position:absolute;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:1}.micromag-viewer-content:active{cursor:-webkit-grabbing;cursor:grabbing}.micromag-viewer-withoutGestures .micromag-viewer-content{cursor:inherit}.micromag-viewer-ariaAnnouncement{height:1px;overflow:hidden;position:absolute;width:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.micromag-viewer-accessibilityLinks{background:rgba(0,0,0,.75);border-radius:4px;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:10px;left:10px;opacity:0;padding:10px;position:absolute;top:60px;-webkit-transition:opacity .2s cubic-bezier(.6,0,.4,1);transition:opacity .2s cubic-bezier(.6,0,.4,1);z-index:2}.micromag-viewer-accessibilityLinks:focus-visible,.micromag-viewer-accessibilityLinks:focus-within{opacity:1}.micromag-viewer-accessibilityLinks .micromag-viewer-accessibilityButton{color:#fff;opacity:.75;padding:4px;-webkit-transition:opacity .5s cubic-bezier(.6,0,.4,1);transition:opacity .5s cubic-bezier(.6,0,.4,1)}.micromag-viewer-accessibilityLinks .micromag-viewer-accessibilityButton:focus,.micromag-viewer-accessibilityLinks .micromag-viewer-accessibilityButton:hover{opacity:1}.micromag-viewer-accessibilityLinks .micromag-viewer-accessibilityButton.micromag-viewer-disabled{opacity:.75}.micromag-viewer-accessibilityLinks .micromag-viewer-tooltip{font-size:.85rem}.micromag-viewer-menuNavContainer{contain:content;position:absolute;top:0;-ms-touch-action:none;touch-action:none;-webkit-transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);transition:opacity .5s cubic-bezier(.6,0,.4,1),background-image .5s cubic-bezier(.6,0,.4,1);width:100%;z-index:4}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer{opacity:.25}.micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-fadeMenu .micromag-viewer-menuNavContainer.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0))}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened{opacity:1}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened .micromag-viewer-dots{opacity:0;pointer-events:none}.micromag-viewer-menuNavContainer.micromag-viewer-isOpened.micromag-viewer-withShadow{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0)));background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,0))}.micromag-viewer-menuTopContainer{-webkit-transition:opacity .2s cubic-bezier(.6,0,.4,1);transition:opacity .2s cubic-bezier(.6,0,.4,1)}.micromag-viewer-menuItem,.micromag-viewer-menuTopContainer{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-viewer-menuItem{-ms-flex-positive:1;flex-grow:1;font-size:8px;-ms-touch-action:none;touch-action:none}.micromag-viewer-menuItem:last-child{-ms-flex-pack:end;justify-content:flex-end}.micromag-viewer-menuButton{font-size:12px;padding:8px 10px}.micromag-viewer-menuButton:focus-visible{outline:2px solid #fff!important;outline:2px solid var(--micromag-focus-color,#fff)!important;outline-offset:-2px!important}.micromag-viewer-slidingButton{display:inline-block}.micromag-viewer-screensMenuButtonToggled{left:auto;right:0}.micromag-viewer-dots{padding:0 8px;position:relative;top:-5px;-webkit-transition:opacity .3s cubic-bezier(0,.6,.5,1);transition:opacity .3s cubic-bezier(0,.6,.5,1);z-index:3}.micromag-viewer-hideMenu .micromag-viewer-dots{pointer-events:none}.micromag-viewer-menuContainer{contain:size layout style paint;top:0;z-index:3}.micromag-viewer-menuPreview,.micromag-viewer-menuShare{contain:size layout style paint;z-index:4}.micromag-viewer-navButton{border:0;opacity:0;pointer-events:none;position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:opacity .2s cubic-bezier(.6,0,.4,1);transition:opacity .2s cubic-bezier(.6,0,.4,1);z-index:3}.micromag-viewer-navButton.micromag-viewer-previous{left:1.5em}.micromag-viewer-navButton.micromag-viewer-next{right:1.5em}.micromag-viewer-navButton:focus-visible{opacity:1}@media screen and (min-width:1024px){.micromag-viewer-navButton{display:block;opacity:1;pointer-events:all;visibility:visible}}.micromag-viewer-screensFrame{-ms-touch-action:none;touch-action:none;z-index:1}.micromag-viewer-screenContainer{contain:size layout style paint;display:-ms-flexbox;display:flex;height:100%;opacity:0}.micromag-viewer-screen{content-visibility:hidden;pointer-events:none}.micromag-viewer-preload .micromag-viewer-screen{content-visibility:auto}.micromag-viewer-visible .micromag-viewer-screen{content-visibility:visible}.micromag-viewer-current .micromag-viewer-screen{content-visibility:visible;pointer-events:auto}.micromag-viewer-playbackControls{bottom:0;left:0;pointer-events:none;position:absolute;width:100%;z-index:2}.micromag-viewer-navigationHint{position:absolute;right:5%;top:70%;z-index:2}.micromag-viewer-webView{z-index:10}.micromag-viewer-shareIncentiveContainer{left:10px;pointer-events:none;position:absolute;top:0;width:calc(100% - 20px);z-index:1}.micromag-viewer-shareIncentive{display:inline-block;opacity:0;pointer-events:auto;-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px);-webkit-transition:opacity .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),transform .3s cubic-bezier(.9,0,.2,1);transition:opacity .3s cubic-bezier(.9,0,.2,1),transform .3s cubic-bezier(.9,0,.2,1),-webkit-transform .3s cubic-bezier(.9,0,.2,1)}.micromag-viewer-shareIncentiveVisible .micromag-viewer-shareIncentive{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);-webkit-transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,transform .3s cubic-bezier(.25,2,.2,1) .5s;transition:opacity .3s cubic-bezier(.25,2,.2,1) .5s,transform .3s cubic-bezier(.25,2,.2,1) .5s,-webkit-transform .3s cubic-bezier(.25,2,.2,1) .5s}

package/es/index.js

@@ -221,10 +221,10 @@ function checkDraggable(el) {
   return false;
 }
 
-var styles$h = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
+var styles$i = {"container":"micromag-viewer-buttons-button-container","asLink":"micromag-viewer-buttons-button-asLink","icon":"micromag-viewer-buttons-button-icon","label":"micromag-viewer-buttons-button-label","withIcon":"micromag-viewer-buttons-button-withIcon","right":"micromag-viewer-buttons-button-right","icon-right":"micromag-viewer-buttons-button-icon-right","withIconColumns":"micromag-viewer-buttons-button-withIconColumns","linkDisabled":"micromag-viewer-buttons-button-linkDisabled"};
 
 var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "withoutTheme", "asLink", "ariaLabel", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$p = {
+var propTypes$r = {
   type: PropTypes.string,
   theme: PropTypes$1.buttonTheme,
   size: PropTypes$1.buttonSize,
@@ -252,7 +252,7 @@ var propTypes$p = {
     current: PropTypes.any // eslint-disable-line
   })])
 };
-var defaultProps$p = {
+var defaultProps$r = {
   type: 'button',
   theme: null,
   size: null,
@@ -310,7 +310,7 @@ var Button = function Button(_ref) {
   var hasIcon = icon !== null;
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
-  var buttonClassNames = classNames([styles$h.container, styles$h["icon-".concat(iconPosition)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$h.withIcon, hasIcon), styles$h.withIconColumns, hasIconColumns), styles$h.withText, text !== null), styles$h.isLink, href !== null), styles$h.asLink, asLink), styles$h.isDisabled, disabled), styles$h.isLoading, loading), className, className !== null)]);
+  var buttonClassNames = classNames([styles$i.container, styles$i["icon-".concat(iconPosition)], _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$i.withIcon, hasIcon), styles$i.withIconColumns, hasIconColumns), styles$i.withText, text !== null), styles$i.isLink, href !== null), styles$i.asLink, asLink), styles$i.isDisabled, disabled), styles$i.isLoading, loading), className, className !== null)]);
   var _ref3 = theme || {},
     _ref3$colors = _ref3.colors,
     colors = _ref3$colors === void 0 ? null : _ref3$colors;
@@ -320,20 +320,20 @@ var Button = function Button(_ref) {
   var primaryColor = getStyleFromColor(brandPrimaryColor, 'color');
   var buttonStyles = _objectSpread({}, primaryColor);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$h.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$i.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$h.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$i.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, iconPosition === 'left' ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$h.icon, styles$h.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$i.icon, styles$i.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, icon) : null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$h.center, styles$h.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$i.center, styles$i.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), iconPosition === 'right' ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$h.icon, styles$h.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$i.icon, styles$i.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, icon) : null, hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$h.linkDisabled, disabled)]);
+    }, styles$i.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -362,17 +362,17 @@ var Button = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button.propTypes = propTypes$p;
-Button.defaultProps = defaultProps$p;
+Button.propTypes = propTypes$r;
+Button.defaultProps = defaultProps$r;
 
-var styles$g = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
+var styles$h = {"container":"micromag-viewer-buttons-icon-button-container","label":"micromag-viewer-buttons-icon-button-label","icon":"micromag-viewer-buttons-icon-button-icon"};
 
 var _excluded$9 = ["iconClassName", "className"];
-var propTypes$o = {
+var propTypes$q = {
   iconClassName: PropTypes.string,
   className: PropTypes.string
 };
-var defaultProps$o = {
+var defaultProps$q = {
   iconClassName: null,
   className: null
 };
@@ -381,20 +381,20 @@ var IconButton = function IconButton(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)]),
-    labelClassName: styles$g.label,
-    iconClassName: classNames([styles$g.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$h.container, _defineProperty({}, className, className !== null)]),
+    labelClassName: styles$h.label,
+    iconClassName: classNames([styles$h.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, props));
 };
-IconButton.propTypes = propTypes$o;
-IconButton.defaultProps = defaultProps$o;
+IconButton.propTypes = propTypes$q;
+IconButton.defaultProps = defaultProps$q;
 
 var _excluded$8 = ["single", "className"];
-var propTypes$n = {
+var propTypes$p = {
   single: PropTypes.bool,
   className: PropTypes.string
 };
-var defaultProps$n = {
+var defaultProps$p = {
   single: false,
   className: null
 };
@@ -444,15 +444,15 @@ var CloseMenuButton = function CloseMenuButton(_ref) {
     }))
   }, props));
 };
-CloseMenuButton.propTypes = propTypes$n;
-CloseMenuButton.defaultProps = defaultProps$n;
+CloseMenuButton.propTypes = propTypes$p;
+CloseMenuButton.defaultProps = defaultProps$p;
 
 var _excluded$7 = ["className", "iconClassName"];
-var propTypes$m = {
+var propTypes$o = {
   className: PropTypes.string,
   iconClassName: PropTypes.string
 };
-var defaultProps$m = {
+var defaultProps$o = {
   className: null,
   iconClassName: null
 };
@@ -496,14 +496,14 @@ var MenuButton = function MenuButton(_ref) {
     }))
   }, props));
 };
-MenuButton.propTypes = propTypes$m;
-MenuButton.defaultProps = defaultProps$m;
+MenuButton.propTypes = propTypes$o;
+MenuButton.defaultProps = defaultProps$o;
 
 var _excluded$6 = ["className"];
-var propTypes$l = {
+var propTypes$n = {
   className: PropTypes.string
 };
-var defaultProps$l = {
+var defaultProps$n = {
   className: null
 };
 var ShareButton = function ShareButton(_ref) {
@@ -539,12 +539,12 @@ var ShareButton = function ShareButton(_ref) {
     }))
   }, props));
 };
-ShareButton.propTypes = propTypes$l;
-ShareButton.defaultProps = defaultProps$l;
+ShareButton.propTypes = propTypes$n;
+ShareButton.defaultProps = defaultProps$n;
 
-var styles$f = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
+var styles$g = {"container":"micromag-viewer-buttons-toggle-button-container","normal":"micromag-viewer-buttons-toggle-button-normal","toggled":"micromag-viewer-buttons-toggle-button-toggled"};
 
-var propTypes$k = {
+var propTypes$m = {
   className: PropTypes.string,
   progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
@@ -552,7 +552,7 @@ var propTypes$k = {
   toggledButton: PropTypes.node,
   toggledButtonClassName: PropTypes.string
 };
-var defaultProps$k = {
+var defaultProps$m = {
   className: null,
   progressSpring: null,
   button: null,
@@ -567,16 +567,16 @@ var ToggleButton = function ToggleButton(_ref) {
     toggledButtonClassName = _ref.toggledButtonClassName;
   if (button === null) return null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$g.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$f.normal,
+    className: styles$g.normal,
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat(p * -100, "%)");
       })
     }
   }, button), /*#__PURE__*/React.createElement(animated.div, {
-    className: classNames([styles$f.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
+    className: classNames([styles$g.toggled, _defineProperty({}, toggledButtonClassName, toggledButtonClassName !== null)]),
     style: {
       transform: progressSpring.to(function (p) {
         return "translateY(".concat((p - 1) * -100, "%)");
@@ -584,19 +584,19 @@ var ToggleButton = function ToggleButton(_ref) {
     }
   }, toggledButton));
 };
-ToggleButton.propTypes = propTypes$k;
-ToggleButton.defaultProps = defaultProps$k;
+ToggleButton.propTypes = propTypes$m;
+ToggleButton.defaultProps = defaultProps$m;
 
-var styles$e = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
+var styles$f = {"backdrop":"micromag-viewer-menus-menu-container-backdrop","heightContainer":"micromag-viewer-menus-menu-container-heightContainer","container":"micromag-viewer-menus-menu-container-container"};
 
-var propTypes$j = {
+var propTypes$l = {
   className: PropTypes.string,
   progressSpring: PropTypes.object,
   // eslint-disable-line react/forbid-prop-types
   theme: PropTypes$1.viewerTheme,
   children: PropTypes.node
 };
-var defaultProps$j = {
+var defaultProps$l = {
   className: null,
   progressSpring: null,
   theme: null,
@@ -615,12 +615,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     brandBackgroundColor = _ref3$color === void 0 ? null : _ref3$color;
   var backgroundColorStyle = getStyleFromColor(brandBackgroundColor, 'backgroundColor');
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$f.container, _defineProperty({}, className, className !== null)]),
     style: {
       pointerEvents: 'none'
     }
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$e.heightContainer,
+    className: styles$f.heightContainer,
     style: _objectSpread({
       opacity: progressSpring,
       transform: progressSpring.to(function (p) {
@@ -634,7 +634,7 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
       })
     }, backgroundColorStyle)
   }, children), /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$e.backdrop,
+    className: styles$f.backdrop,
     style: {
       opacity: progressSpring.to(function (p) {
         return easings.easeOutQuint(p);
@@ -642,12 +642,12 @@ var ViewerMenuContainer = function ViewerMenuContainer(_ref) {
     }
   }));
 };
-ViewerMenuContainer.propTypes = propTypes$j;
-ViewerMenuContainer.defaultProps = defaultProps$j;
+ViewerMenuContainer.propTypes = propTypes$l;
+ViewerMenuContainer.defaultProps = defaultProps$l;
 
-var styles$d = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot"};
+var styles$e = {"button":"micromag-viewer-menus-menu-dot-button","progress":"micromag-viewer-menus-menu-dot-progress","container":"micromag-viewer-menus-menu-dot-container","vertical":"micromag-viewer-menus-menu-dot-vertical","dot":"micromag-viewer-menus-menu-dot-dot"};
 
-var propTypes$i = {
+var propTypes$k = {
   current: PropTypes.bool,
   active: PropTypes.bool,
   colors: PropTypes.shape({
@@ -660,7 +660,7 @@ var propTypes$i = {
   onClick: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$i = {
+var defaultProps$k = {
   current: false,
   active: false,
   colors: null,
@@ -706,11 +706,11 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     });
   }, [active, current, subIndex, count, setDotSpringProps]);
   return /*#__PURE__*/React.createElement("li", {
-    className: classNames([styles$d.container, _defineProperty(_defineProperty(_defineProperty({}, styles$d.active, current), styles$d.vertical, vertical), className, className !== null)]),
+    className: classNames([styles$e.container, _defineProperty(_defineProperty(_defineProperty({}, styles$e.active, current), styles$e.vertical, vertical), className, className !== null)]),
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$d.button,
+    className: styles$e.button,
     onClick: function onClick() {
       var e = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
       if (e !== null) {
@@ -722,24 +722,24 @@ var ViewerMenuDot = function ViewerMenuDot(_ref) {
     },
     tabIndex: "-1"
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.dot,
+    className: styles$e.dot,
     style: {
       backgroundColor: secondary
     }
   }, /*#__PURE__*/React.createElement(animated.div, {
-    className: styles$d.progress,
+    className: styles$e.progress,
     style: _objectSpread(_objectSpread({}, dotSpringStyles), {}, {
       backgroundColor: primary
     })
   }))));
 };
-ViewerMenuDot.propTypes = propTypes$i;
-ViewerMenuDot.defaultProps = defaultProps$i;
+ViewerMenuDot.propTypes = propTypes$k;
+ViewerMenuDot.defaultProps = defaultProps$k;
 
-var styles$c = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","items":"micromag-viewer-menus-menu-dots-items","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
+var styles$d = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","items":"micromag-viewer-menus-menu-dots-items","buttons":"micromag-viewer-menus-menu-dots-buttons","vertical":"micromag-viewer-menus-menu-dots-vertical"};
 
 var _excluded$5 = ["direction", "items", "onClickDot", "onClickScreensMenu", "colors", "closeable", "buttons", "withItemClick", "withoutScreensMenu", "onClose", "className"];
-var propTypes$h = {
+var propTypes$j = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   items: PropTypes$1.menuItems,
   onClickDot: PropTypes.func,
@@ -755,7 +755,7 @@ var propTypes$h = {
   onClose: PropTypes.func,
   className: PropTypes.string
 };
-var defaultProps$h = {
+var defaultProps$j = {
   direction: 'horizontal',
   items: [],
   onClickDot: null,
@@ -793,7 +793,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
   var _ref4 = props || {},
     style = _ref4.style;
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$c.container, _defineProperty(_defineProperty({}, className, className !== null), styles$c.vertical, direction === 'vertical')]),
+    className: classNames([styles$d.container, _defineProperty(_defineProperty({}, className, className !== null), styles$d.vertical, direction === 'vertical')]),
     "aria-label": intl.formatMessage({
       id: "bLYuuN",
       defaultMessage: [{
@@ -818,7 +818,7 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
     }),
     style: style
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$c.items
+    className: styles$d.items
   }, items.map(function (item, index) {
     var _ref6 = item || {},
       _ref6$current = _ref6.current,
@@ -844,13 +844,13 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       vertical: direction === 'vertical'
     });
   }), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$c.closeButton,
+    className: styles$d.closeButton,
     style: {
       color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$c.closeButton,
+    className: styles$d.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       id: "dj/p/q",
@@ -867,11 +867,103 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       }]
     })
   }, /*#__PURE__*/React.createElement(CloseIcon, null))) : null, buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$c.buttons
+    className: styles$d.buttons
   }, buttons) : null));
 };
-ViewerMenuDots.propTypes = propTypes$h;
-ViewerMenuDots.defaultProps = defaultProps$h;
+ViewerMenuDots.propTypes = propTypes$j;
+ViewerMenuDots.defaultProps = defaultProps$j;
+
+var propTypes$i = {
+  color: PropTypes.string,
+  className: PropTypes.string
+};
+var defaultProps$i = {
+  color: 'currentColor',
+  className: null
+};
+var MicromagIcon = function MicromagIcon(_ref) {
+  var color = _ref.color,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 315.77 56.94",
+    className: className
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m34.3.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82H0V.69h10.42l6.74,32.08L23.89.69h10.42Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m46.8.69v55.55h-10.42V.69h10.42Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m64.57,16.53c0-4.72-.35-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-6.74h10.42v7.43c0,11.18-4.65,15.83-13.05,15.83s-13.05-4.65-13.05-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42v-6.74Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m104.08,56.24h-10.42c-.69-.83-.76-2.85-.76-4.93v-10.69c0-4.03-1.39-4.72-5.42-4.72v20.35h-10.42V.69h10.42c11.87,0,15.83,3.96,15.83,15.14v4.93c0,6.11-1.87,10.07-5.14,12.43,3.54,1.46,5.14,4.31,5.14,9.51v8.61c0,2.08.07,4.1.76,4.93Zm-16.6-45.13v14.37c4.03,0,5.42-.69,5.42-4.72v-4.93c0-4.03-1.39-4.72-5.42-4.72Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m173.63.69v55.55h-10.42v-23.82l-4.31,23.82h-4.86l-4.31-23.82v23.82h-10.42V.69h10.42l6.74,32.08L163.22.69h10.42Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m191.68,46.8h-5.49l-.76,9.44h-10.42L181.82.69h14.23l6.81,55.55h-10.42l-.76-9.44Zm-.83-10.42l-1.87-24.65-1.94,24.65h3.82Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m219.25,23.26v-6.74c0-4.72-.42-6.11-2.64-6.11s-2.64,1.39-2.64,6.11v23.89c0,4.72.35,6.11,2.64,6.11s2.64-1.39,2.64-6.11v-2.57h-2.64v-10.42h13.05v28.82h-4.17l-1.67-3.96c-2.15,2.71-5.07,4.65-8.82,4.65-7.5,0-11.46-4.65-11.46-15.83V15.83c0-11.18,4.65-15.83,13.05-15.83s13.05,4.65,13.05,15.83v7.43h-10.42Z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    fill: color,
+    x: "105.65",
+    y: ".69",
+    width: "31.25",
+    height: "55.55",
+    rx: "3",
+    ry: "3"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m304.96,7.72c-2.02,0-2.55,1.05-2.55,4.29v13.04c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29v-13.04c0-3.24-.52-4.29-2.55-4.29Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m283.9,8.07h-.7v20.93h.7c3.42,0,4.46-.52,4.46-3.94v-13.04c0-3.42-1.05-3.94-4.46-3.94Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: color,
+    d: "m313.68.68h-75.86c-1.15,0-2.08.93-2.08,2.08v31.54c0,1.15.93,2.08,2.08,2.08h75.86c1.15,0,2.08-.93,2.08-2.08V2.76c0-1.15-.93-2.08-2.08-2.08Zm-67,32.15c-4.53,0-6.31-2.34-6.31-9.87h3.49c0,5.34.77,6.38,2.83,6.38,1.64,0,2.27-.84,2.27-3.77s-.98-4.19-3.56-6.21c-2.48-1.92-4.85-3.84-4.85-8.41,0-4.12,1.74-6.73,5.79-6.73s5.93,2.62,5.93,8.48h-3.49c0-4.19-.94-4.99-2.44-4.99s-2.3.8-2.3,3.24,1.22,3.77,3.28,5.34c2.96,2.27,5.13,4.22,5.13,9.28,0,4.6-1.67,7.25-5.75,7.25Zm17.82-24.76h-3.94v24.41h-3.49V8.07h-3.94v-3.49h11.37v3.49Zm13.46,16.99c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78V4.58h3.49v20.47c0,3.24.52,4.29,2.55,4.29s2.55-1.05,2.55-4.29V4.58h3.49v20.47Zm13.88,0c0,6.03-2.34,7.43-7.95,7.43h-4.19V4.58h4.19c5.62,0,7.95,1.33,7.95,7.43v13.04Zm5.33,7.43h-3.49V4.58h3.49v27.9Zm13.81-7.43c0,5.62-1.99,7.78-6.03,7.78s-6.03-2.16-6.03-7.78v-13.04c0-5.62,1.99-7.78,6.03-7.78s6.03,2.16,6.03,7.78v13.04Z"
+  }));
+};
+MicromagIcon.propTypes = propTypes$i;
+MicromagIcon.defaultProps = defaultProps$i;
+
+var styles$c = {"container":"micromag-viewer-partials-micromag-branding-container","link":"micromag-viewer-partials-micromag-branding-link","text":"micromag-viewer-partials-micromag-branding-text","icon":"micromag-viewer-partials-micromag-branding-icon"};
+
+var propTypes$h = {
+  className: PropTypes.string
+};
+var defaultProps$h = {
+  className: null
+};
+var MicromagBranding = function MicromagBranding(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$c.container, _defineProperty({}, className, className)])
+  }, /*#__PURE__*/React.createElement("a", {
+    href: "https://micromag.media",
+    target: "_blank",
+    rel: "noopener noreferrer",
+    className: styles$c.link
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles$c.text
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "6eZW8C",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Created with"
+    }]
+  })), /*#__PURE__*/React.createElement(MicromagIcon, {
+    className: styles$c.icon
+  })));
+};
+MicromagBranding.propTypes = propTypes$h;
+MicromagBranding.defaultProps = defaultProps$h;
 
 var propTypes$g = {
   className: PropTypes.string
@@ -1001,7 +1093,7 @@ var ViewerMenuScreen = function ViewerMenuScreen(_ref) {
 ViewerMenuScreen.propTypes = propTypes$f;
 ViewerMenuScreen.defaultProps = defaultProps$f;
 
-var styles$a = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","content":"micromag-viewer-menus-menu-preview-content","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen"};
+var styles$a = {"scroll":"micromag-viewer-menus-menu-preview-scroll","container":"micromag-viewer-menus-menu-preview-container","content":"micromag-viewer-menus-menu-preview-content","scrollee":"micromag-viewer-menus-menu-preview-scrollee","titleContainer":"micromag-viewer-menus-menu-preview-titleContainer","headerContainer":"micromag-viewer-menus-menu-preview-headerContainer","title":"micromag-viewer-menus-menu-preview-title","nav":"micromag-viewer-menus-menu-preview-nav","items":"micromag-viewer-menus-menu-preview-items","item":"micromag-viewer-menus-menu-preview-item","inner":"micromag-viewer-menus-menu-preview-inner","frame":"micromag-viewer-menus-menu-preview-frame","screen":"micromag-viewer-menus-menu-preview-screen","micromagBrandingSeparator":"micromag-viewer-menus-menu-preview-micromagBrandingSeparator","micromagBrandingContainer":"micromag-viewer-menus-menu-preview-micromagBrandingContainer"};
 
 var _excluded$4 = ["textAlign"];
 var propTypes$e = {
@@ -1017,6 +1109,7 @@ var propTypes$e = {
   maxThumbsWidth: PropTypes.number,
   paddingTop: PropTypes.number,
   scrollDisabled: PropTypes.bool,
+  withMicromagBranding: PropTypes.bool,
   // @todo to reimplement:
   // shouldLoad: PropTypes.bool,
   // toggleFullscreen: PropTypes.func,
@@ -1038,6 +1131,7 @@ var defaultProps$e = {
   maxThumbsWidth: 140,
   paddingTop: null,
   scrollDisabled: false,
+  withMicromagBranding: false,
   // toggleFullscreen: null,
   // fullscreenActive: false,
   // fullscreenEnabled: false,
@@ -1056,6 +1150,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     maxThumbsWidth = _ref.maxThumbsWidth,
     paddingTop = _ref.paddingTop,
     scrollDisabled = _ref.scrollDisabled,
+    withMicromagBranding = _ref.withMicromagBranding,
     className = _ref.className;
   var _useDimensionObserver = useDimensionObserver(),
     containerRef = _useDimensionObserver.ref,
@@ -1109,6 +1204,7 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(Scroll, {
     className: styles$a.scroll,
+    scrolleeClassName: styles$a.scrollee,
     disabled: scrollDisabled
   }, hasTitle && header === null ? /*#__PURE__*/React.createElement("div", {
     className: styles$a.titleContainer,
@@ -1158,7 +1254,11 @@ var ViewerMenuPreview = function ViewerMenuPreview(_ref) {
       onClick: onClickScreen,
       focusable: focusable
     }))));
-  }))), footer)));
+  }))), footer, withMicromagBranding ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles$a.micromagBrandingSeparator
+  }), /*#__PURE__*/React.createElement(MicromagBranding, {
+    className: styles$a.micromagBrandingContainer
+  })) : null)));
 };
 ViewerMenuPreview.propTypes = propTypes$e;
 ViewerMenuPreview.defaultProps = defaultProps$e;
@@ -1360,6 +1460,7 @@ var propTypes$b = {
   previewFooter: PropTypes.node,
   afterShareMenuButton: PropTypes.node,
   beforeScreensMenuButton: PropTypes.node,
+  withMicromagBranding: PropTypes.bool,
   withDotItemClick: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
   withoutShareMenu: PropTypes.bool,
@@ -1388,6 +1489,7 @@ var defaultProps$b = {
   previewFooter: null,
   afterShareMenuButton: null,
   beforeScreensMenuButton: null,
+  withMicromagBranding: false,
   withDotItemClick: false,
   withoutScreensMenu: false,
   withoutShareMenu: false,
@@ -1415,6 +1517,7 @@ var ViewerMenu = function ViewerMenu(_ref) {
     previewFooter = _ref.previewFooter,
     afterShareMenuButton = _ref.afterShareMenuButton,
     beforeScreensMenuButton = _ref.beforeScreensMenuButton,
+    withMicromagBranding = _ref.withMicromagBranding,
     withDotItemClick = _ref.withDotItemClick,
     withoutScreensMenu = _ref.withoutScreensMenu,
     withoutShareMenu = _ref.withoutShareMenu,
@@ -1785,7 +1888,8 @@ var ViewerMenu = function ViewerMenu(_ref) {
     scrollDisabled: draggingMenu,
     toggleFullscreen: toggleFullscreen,
     fullscreenActive: fullscreenActive,
-    fullscreenEnabled: fullscreenEnabled
+    fullscreenEnabled: fullscreenEnabled,
+    withMicromagBranding: withMicromagBranding
   })) : null));
 };
 ViewerMenu.propTypes = propTypes$b;
@@ -2630,6 +2734,7 @@ var propTypes$2 = {
   beforeScreensMenuButton: PropTypes.node,
   closeable: PropTypes.bool,
   withMetadata: PropTypes.bool,
+  withMicromagBranding: PropTypes.bool,
   withoutGestures: PropTypes.bool,
   withoutMenu: PropTypes.bool,
   withoutScreensMenu: PropTypes.bool,
@@ -2686,6 +2791,7 @@ var defaultProps$2 = {
   menuDotsButtons: null,
   closeable: false,
   withMetadata: false,
+  withMicromagBranding: false,
   withNeighborScreens: false,
   withFullscreenWebView: false,
   withNavigationHint: 'hand',
@@ -2737,6 +2843,7 @@ var Viewer = function Viewer(_ref) {
     beforeScreensMenuButton = _ref.beforeScreensMenuButton,
     closeable = _ref.closeable,
     withMetadata = _ref.withMetadata,
+    withMicromagBranding = _ref.withMicromagBranding,
     withoutGestures = _ref.withoutGestures,
     withoutMenu = _ref.withoutMenu,
     withoutScreensMenu = _ref.withoutScreensMenu,
@@ -3370,6 +3477,7 @@ var Viewer = function Viewer(_ref) {
     withoutShareMenu: withoutShareMenu,
     afterShareMenuButton: afterShareMenuButton,
     beforeScreensMenuButton: beforeScreensMenuButton,
+    withMicromagBranding: withMicromagBranding,
     refDots: menuDotsContainerRef
   }) : null, ready || withoutScreensTransforms ? /*#__PURE__*/React.createElement("div", Object.assign({
     className: styles$7.content

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.3.670",
+    "version": "0.3.672",
     "private": false,
     "description": "",
     "keywords": [
@@ -66,12 +66,12 @@
         "@folklore/routes": "^0.2.36",
         "@micromag/core": "^0.3.668",
         "@micromag/element-badge": "^0.3.668",
-        "@micromag/element-scroll": "^0.3.668",
+        "@micromag/element-scroll": "^0.3.671",
         "@micromag/element-share-options": "^0.3.668",
         "@micromag/element-webview": "^0.3.668",
-        "@micromag/elements": "^0.3.668",
-        "@micromag/intl": "^0.3.668",
-        "@micromag/screens": "^0.3.670",
+        "@micromag/elements": "^0.3.671",
+        "@micromag/intl": "^0.3.671",
+        "@micromag/screens": "^0.3.671",
         "@react-spring/core": "^9.6.1",
         "@react-spring/web": "^9.6.1",
         "@use-gesture/react": "^10.3.0",
@@ -92,5 +92,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "8ee4d77ea24c265bfb0624e11c12b3be0d8c5caf"
+    "gitHead": "9925fa85bdb2c9ad457ba4f54148fd8686fe7206"
 }