box-content-preview 3.53.0 → 3.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
  [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
3
3
  [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
4
4
  [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
5
- [![version](https://img.shields.io/badge/version-v3.53.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
5
+ [![version](https://img.shields.io/badge/version-v3.55.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
6
6
  [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
7
7
 
8
8
  # [Box Content Preview](https://developer.box.com/docs/box-content-preview)
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
22
22
 
23
23
  ## Current Version
24
24
 
25
- - Version: v3.53.0
25
+ - Version: v3.55.0
26
26
  - Locale: en-US
27
27
 
28
- https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.js
29
- https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.css
28
+ https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js
29
+ https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css
30
30
 
31
31
  ## Supported Locales
32
32
 
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
52
52
  <title>Box Content Preview Demo</title>
53
53
 
54
54
  <!-- Latest version of Preview SDK for your locale -->
55
- <script src="https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.js"></script>
55
+ <script src="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js"></script>
56
56
  <link
57
57
  rel="stylesheet"
58
- href="https://cdn01.boxcdn.net/platform/preview/3.53.0/en-US/preview.css"
58
+ href="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css"
59
59
  />
60
60
  </head>
61
61
  <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
76
76
 
77
77
  1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
78
78
 
79
- - Check out a specific version with `git checkout v3.53.0`
79
+ - Check out a specific version with `git checkout v3.55.0`
80
80
  - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
81
81
 
82
82
  2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
@@ -22,7 +22,7 @@
22
22
  */
23
23
  .bp-archive{display:flex;width:100%;height:100%;background:#fff}
24
24
  .bp-ControlsLayer{display:flex;opacity:0;transition:opacity .5s}.bp-ControlsLayer.bp-is-visible{opacity:1}
25
- .bp-ControlsRoot{position:absolute;bottom:25px;left:50%;z-index:4;transform:translate3d(-50%, 0, 0);backface-visibility:hidden}.bp-ControlsRoot.bp-is-hidden{display:none}
25
+ .bp-ControlsRoot{position:absolute;bottom:25px;left:50%;z-index:5;transform:translate3d(-50%, 0, 0);backface-visibility:hidden}.bp-ControlsRoot.bp-is-hidden{display:none}
26
26
  .bp-AnnotationsButton{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-AnnotationsButton:focus:not(:disabled),.bp-AnnotationsButton:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-AnnotationsButton:focus:not(:disabled) svg,.bp-AnnotationsButton:hover:not(:disabled) svg,.bp-AnnotationsButton.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-AnnotationsButton.bp-is-active,.bp-AnnotationsButton:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-AnnotationsButton.bp-is-active:focus:not(:disabled),.bp-AnnotationsButton.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-AnnotationsButton:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnnotationsButton:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnnotationsButton:focus:not(:focus-visible){box-shadow:none}.bp-AnnotationsButton:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-AnnotationsButton svg{width:32px;height:32px;padding:5px}.bp-AnnotationsButton svg{fill:#fff}.bp-AnnotationsButton.bp-is-active{opacity:1}
27
27
  .bp-AnnotationsTooltip{max-width:408px;padding:18px 0 12px 18px}.bp-AnnotationsTooltip-title{font-weight:bold;font-size:18px}.bp-AnnotationsTooltip-body{font-size:14px;line-height:20px}
28
28
  .bp-AnnotationsControls{display:flex;gap:4px;align-items:center}.bp-AnnotationsControls:not(:first-child){padding-left:4px;border-left:1px solid #4e4e4e}.bp-AnnotationsControls-exitBtn{display:none}.ba-point-annotation-marker{z-index:3}
@@ -69,8 +69,10 @@
69
69
  .bp-media-scrubber-container{position:relative;width:100%;height:16px}.bp-media-scrubber-wrapper{position:absolute;top:0;left:50%;width:100%;height:100%}.bp-media-scrubber{position:absolute;top:7px;left:-50%;width:100%;height:3px}.bp-media-scrubber-converted,.bp-media-scrubber-buffered,.bp-media-scrubber-played,.bp-media-scrubber-underlay{position:absolute;height:3px;transition:transform .1s ease-in-out}.bp-media-scrubber-converted{background-color:rgba(255,255,255,.5);cursor:pointer}.bp-media-scrubber-buffered{position:absolute;height:3px;background-color:#fff}.bp-media-scrubber-played{background-color:#0061d5;cursor:pointer}.bp-media-scrubber-underlay{width:100%;cursor:not-allowed}.bp-media-scrubber-handle{position:absolute;top:-4.25px;width:12px;height:12px;margin-left:-6px;background-color:#0061d5;border-radius:6px;transform:scale(0);cursor:pointer;transition:transform .05s ease-in-out}.bp-media-scrubber-container:hover .bp-media-scrubber-handle,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container:hover .bp-media-scrubber-converted,.bp-media-scrubber-container:hover .bp-media-scrubber-buffered,.bp-media-scrubber-container:hover .bp-media-scrubber-played,.bp-media-scrubber-container:hover .bp-media-scrubber-underlay,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-hover .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-handle{transform:scale(1)}.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-converted,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-buffered,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-played,.bp-media-scrubber-container .bp-media-scrubber-touch .bp-media-scrubber-underlay{transform:scaleY(2)}.bp-media-settings{position:absolute;right:16px;bottom:60px;display:inline-block;max-width:400px;max-height:210px;padding:8px;overflow-x:hidden;overflow-y:auto;color:#444;font-size:10px;line-height:0;background-color:#fff;border:1px solid #bdc3c7;border-radius:2px;visibility:hidden;transition:width .2s,height .2s;-ms-overflow-style:-ms-autohiding-scrollbar}.bp-media-settings-is-open .bp-media-settings{visibility:visible}.bp-media-mp3 .bp-media-settings{right:0;bottom:65px}.bp-media-settings-in-transition{overflow:hidden}.bp-media-settings-menu{display:table}.bp-media-settings-menu-autoplay,.bp-media-settings-menu-quality,.bp-media-settings-menu-speed,.bp-media-settings-menu-subtitles,.bp-media-settings-menu-audiotracks,.bp-media-settings-show-autoplay .bp-media-settings-menu-main,.bp-media-settings-show-speed .bp-media-settings-menu-main,.bp-media-settings-show-quality .bp-media-settings-menu-main,.bp-media-settings-show-subtitles .bp-media-settings-menu-main,.bp-media-settings-show-audiotracks .bp-media-settings-menu-main{display:none}.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,.bp-media-settings-show-speed .bp-media-settings-menu-speed,.bp-media-settings-show-quality .bp-media-settings-menu-quality,.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks{display:table}.bp-media-mp4 .bp-media-settings-item-quality,.bp-media-mp4 .bp-media-settings-item-subtitles,.bp-media-mp4 .bp-media-settings-item-audiotracks,.bp-media-mp3 .bp-media-settings-item-quality,.bp-media-mp3 .bp-media-settings-item-subtitles,.bp-media-mp3 .bp-media-settings-item-audiotracks{display:none}.bp-media-settings-item,.bp-media-settings-sub-item{display:table-row;height:26px;padding:4px;overflow:hidden;white-space:nowrap;outline:0 none;cursor:pointer}.bp-media-settings-item:hover,.bp-media-settings-sub-item:hover{background-color:#f6fafd}.bp-media-settings-item:hover .bp-media-settings-icon svg,.bp-media-settings-sub-item:hover .bp-media-settings-icon svg{fill:#2c3e50}.bp-media-settings-item:hover .bp-media-settings-label,.bp-media-settings-sub-item:hover .bp-media-settings-label{color:#aabed1}.bp-media-settings-item:hover .bp-media-settings-value,.bp-media-settings-sub-item:hover .bp-media-settings-value{color:#2c3e50}.bp-has-keyboard-focus .bp-media-settings-item:focus,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus{background-color:#0061d5}.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-item:focus .bp-media-settings-value,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-label,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus .bp-media-settings-value{color:#fff}.bp-has-keyboard-focus .bp-media-settings-item:focus svg,.bp-has-keyboard-focus .bp-media-settings-sub-item:focus svg{fill:#fff}.bp-media-settings-subtitles-unavailable .bp-media-settings-item-subtitles,.bp-media-settings-subtitles-unavailable .bp-media-settings-menu-subtitles{display:none}.bp-media-settings-autoplay-unavailable .bp-media-settings-item-autoplay,.bp-media-settings-autoplay-unavailable .bp-media-settings-menu-autoplay{display:none}.bp-media-settings-audiotracks-unavailable .bp-media-settings-item-audiotracks,.bp-media-settings-audiotracks-unavailable .bp-media-settings-menu-audiotracks{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-menu-quality{display:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality{pointer-events:none}.bp-media-settings-hd-unavailable .bp-media-settings-item-quality .bp-media-settings-arrow{display:none}.bp-media-settings-label,.bp-media-settings-value{display:table-cell;padding:4px;vertical-align:middle}.bp-media-settings-label{color:#999ea4;font-weight:normal;font-size:11px;text-transform:uppercase}.bp-media-settings-item .bp-media-settings-label{text-align:left}.bp-media-settings-sub-item .bp-media-settings-label{text-align:center}.bp-media-settings-value{padding-left:10px;color:#464a4f;font-size:12px;text-align:left}.bp-media-settings-selected .bp-media-settings-value{color:#0061d5}.bp-media-settings-arrow{display:table-cell;vertical-align:middle}.bp-media-settings-arrow svg{width:18px;height:18px}.bp-media-settings-icon{display:table-cell;text-align:center;vertical-align:middle}.bp-media-settings-icon svg{width:16px;height:16px;visibility:hidden}.bp-media-settings-selected .bp-media-settings-icon svg{visibility:visible}.bp-media-controls-is-visible .bp-media-controls-wrapper,.bp-media-controls-wrapper:active,.bp-media-controls-wrapper:focus{visibility:visible;opacity:1}.bp-media-controls-wrapper{position:absolute;right:0;bottom:0;left:0;width:100%;height:60px;margin:auto;overflow:hidden;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);visibility:hidden;opacity:0;transition:visibility .3s,opacity .3s}.bp-media-time-scrubber-container{outline:0 none}.bp-media-volume-scrubber-container-wrapper{display:inline-block;width:0;height:40px;overflow:hidden;transition:width .2s ease-in-out}.bp-media-controls-volume-scrubber-expand{width:96px}.bp-media-volume-scrubber-container{position:relative;display:inline-block;width:96px;height:40px;padding:10px 8px 0;outline:0 none}.bp-media-volume-scrubber-container .bp-media-scrubber-handle{transform:scale(1)}.bp-media-volume-scrubber-container .bp-media-scrubber-converted,.bp-media-volume-scrubber-container .bp-media-scrubber-buffered,.bp-media-volume-scrubber-container .bp-media-scrubber-played,.bp-media-volume-scrubber-container .bp-media-scrubber-underlay{transform:scaleY(1) !important}.bp-media-controls-container{height:40px;margin:0;padding:0 10px;text-align:left}.bp-media-controls-label,.bp-media-controls-btn{display:inline-block;width:45px;height:40px;margin:0;padding:0;color:#fff;font-weight:normal;font-size:12px;text-align:center;vertical-align:top;background-color:transparent;border:none;outline:0 none;cursor:pointer;opacity:.7}.bp-media-controls-label:hover,.bp-media-controls-btn:hover{opacity:1}.bp-media-volume-icon{position:relative;display:inline-block;width:36px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-volume-icon{display:none}.bp-media-controls-label{display:inline-block;width:auto;margin:0 4px;line-height:40px;vertical-align:top;cursor:default}.bp-media-controls-timecode{margin-left:13px}.bp-media-controls-volume-control{display:inline-block;width:45px;height:40px;vertical-align:top}.bp-is-mobile .bp-media-controls-volume-control{display:none}.bp-is-fullscreen .bp-media-fullscreen-icon .bp-exit-fullscreen-icon{display:inline-block}.bp-media-fullscreen-icon{position:absolute;right:10px}.bp-media-gear-icon{position:absolute;right:55px}.bp-media-gear-icon svg path{transform-origin:50%;transition:all .3s}.bp-media-settings-is-open .bp-media-gear-icon svg path{transform:rotateZ(60deg)}.bp-media-cc-icon{position:absolute;right:100px;visibility:visible}.bp-media-settings-subtitles-unavailable .bp-media-cc-icon{visibility:hidden}.bp-media-controls-cc-icon-text{display:inline-block;width:24px;height:24px;padding:0 0 0 1px;color:#fff;font-weight:bold;font-size:12px;line-height:24px;letter-spacing:.1em;background-color:rgba(0,0,0,.3);border-radius:4px}.bp-media-settings-subtitles-on .bp-media-controls-cc-icon-text{color:#fff;background-color:#0061d5}.bp-media-controls-hd{position:absolute;left:22px;display:none;padding:2px 2px 2px 3px;font-weight:bold;font-size:8px;line-height:8px;letter-spacing:.1em;background-color:#0061d5;border-radius:3px}.bp-media-controls-is-hd .bp-media-controls-hd{display:inline}.bp-media-play-icon{display:inline}.bp-media-is-playing .bp-media-play-icon{display:none}.bp-media-pause-icon{display:none}.bp-media-is-playing .bp-media-pause-icon{display:inline}.bp-media-volume-icon-mute,.bp-media-volume-icon-low,.bp-media-volume-icon-medium,.bp-media-volume-icon-high{position:absolute;left:6px;display:none}.bp-media-volume-icon-is-mute .bp-media-volume-icon-mute,.bp-media-volume-icon-is-low .bp-media-volume-icon-low,.bp-media-volume-icon-is-medium .bp-media-volume-icon-medium,.bp-media-volume-icon-is-high .bp-media-volume-icon-high{display:inline}.bp-media{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0 none;visibility:hidden}.bp-media.bp-is-visible{visibility:visible}.bp-media-container{position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;width:100%;min-width:360px;min-height:0;outline:0 none;-webkit-user-select:none;user-select:none}.bp-media-play-button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;position:absolute;top:50%;left:50%;width:80px;height:80px;color:#fff;font-size:40px;text-align:center;background:rgba(0,0,0,.5);border:4px solid #fff;border-radius:40px;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-play-button:hover{background:#000}.bp-media-overlay-play-container{position:absolute;top:50%;left:50%;display:flex;gap:28px;align-items:center;justify-content:center;color:#fff;font-size:40px;text-align:center;transform:translate(-50%, -50%);cursor:pointer;transition:all .2s}.bp-media-overlay-play-container button{padding:0;color:inherit;font:inherit;background:none;border:none;cursor:pointer;width:40px;height:40px;font-size:40px;text-align:center;background:#000;border-radius:40px;cursor:pointer;transition:all .2s}.bp-media-overlay-play-container .bp-media-overlay-play-button{width:60px;height:60px}.bp-has-keyboard-focus .bp-media-time-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-volume-scrubber-container:focus,.bp-has-keyboard-focus .bp-media-controls-btn:focus{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 1px 2px rgba(0,0,0,.1)}.bp-dark .bp-error{color:#fff}.bp-dark .bp-icon{opacity:.9}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper{display:flex}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-crawler-wrapper{display:block}.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper .bp-icon{display:none}@keyframes bp-spinner-rotate{to{transform:rotate(360deg)}}.bp-media-buffering-spinner{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border:4px solid rgba(0,97,213,.3);border-top-color:#0061d5;border-radius:40px;animation:bp-spinner-rotate .8s linear infinite}.bp-is-mobile *::-webkit-media-controls-start-playback-button{display:none}.bp-VideoControlsRoot{position:relative;right:auto;bottom:auto;left:auto;z-index:1;align-self:stretch;width:100%}.bp-media--v2{background:radial-gradient(ellipse at center, #2a2a2a 0%, #000 100%)}.bp-media-container--v2{padding:48px}.bp-media-container--v2 video{border:1px solid rgba(255,255,255,.12)}.bp-media-container--v2 .bp-video-preload-wrapper{top:48px;right:auto;bottom:48px;left:50%;transform:translateX(-50%)}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload{transform:none}.bp-media-container--v2 .bp-video-preload-wrapper .bp-preload-content{border:1px solid rgba(255,255,255,.12)}.bp-video-360 .bp-VideoControlsRoot{position:absolute;right:0;bottom:-1px;left:0;width:100%}.bp-video-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;margin:0;overflow:hidden;background-color:transparent;opacity:1;transition:opacity .5s}.bp-video-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-video-preload-wrapper.bp-is-transparent{opacity:0}.bp-video-preload-wrapper .bp-preload{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;transform:translateY(-60px)}.bp-video-preload-wrapper .bp-preload-content{width:100%;height:100%;object-fit:contain}.bp-video-preload-wrapper .bp-preload-placeholder{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.bp-video-preload-wrapper .bp-video-preload-play-overlay{position:absolute;top:50%;left:50%;display:flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(0,0,0,.5);border-radius:50%;transform:translate(-50%, -50%);pointer-events:none}.bp-video-preload-wrapper .bp-video-preload-play-overlay svg{width:48px;height:48px;fill:#fff}.bp-media-dash video{display:block;width:100%;max-width:100%;max-height:100%;margin-right:auto;margin-left:auto;cursor:none}.bp-media-dash .bp-media-controls-label,.bp-media-dash .bp-media-controls-btn{opacity:.9}.bp-media-dash .bp-media-controls-label:hover,.bp-media-dash .bp-media-controls-btn:hover{opacity:1}.bp-media-dash .bp-media-controls-is-visible video{cursor:pointer}.bp-media-filmstrip-container{position:absolute;bottom:60px;left:0;display:none;width:160px;height:110px;overflow:hidden;border:1px solid #464a4f}.bp-media-filmstrip{position:relative}.bp-media-filmstrip-timecode{position:absolute;bottom:0;z-index:1;width:100%;color:#fff;font-size:13px;line-height:18px;text-align:center;background-color:#222}.bp-media-crawler-wrapper{position:relative;top:50%;left:50%;z-index:1;width:10px;margin:-15px 0 0 -5px}.bp-media-dash-stats{position:absolute;top:20px;right:20px;color:#fff;font-size:24px}
70
70
  .bp-TimestampControl{position:relative;display:flex;align-items:center}.bp-TimestampControl-button{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;gap:4px;align-items:center;margin:0;padding:6px 12px;color:#fff;font-weight:normal;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;white-space:nowrap;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-TimestampControl-button:focus:not(:disabled) svg,.bp-TimestampControl-button:hover:not(:disabled) svg,.bp-TimestampControl-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-TimestampControl-button.bp-is-active,.bp-TimestampControl-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-TimestampControl-button.bp-is-active:focus:not(:disabled),.bp-TimestampControl-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-TimestampControl-button:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-TimestampControl-button:focus:not(:focus-visible){box-shadow:none}.bp-TimestampControl-button:focus:not(:disabled),.bp-TimestampControl-button.bp-is-open{background:transparent}.bp-TimestampControl-button:hover:not(:disabled){background:rgba(255,255,255,.08)}.bp-TimestampControl-separator,.bp-TimestampControl-duration{color:rgba(255,255,255,.8)}.bp-TimestampControl-chevron{width:16px;height:16px;margin-left:2px;fill:rgba(255,255,255,.8)}.bp-TimestampControl-flyout{position:absolute;bottom:calc(100% + 12px);left:50%;z-index:1;min-width:250px;padding:12px 8px;background:#fff;border-radius:16px;box-shadow:0 4px 12px 0 rgba(0,0,0,.15);transform:translateX(-50%)}.bp-TimestampControl-header{padding:6px 14px;color:#767676;font-weight:bold;font-size:14px;font-family:Lato,Arial,sans-serif;line-height:20px;letter-spacing:.3px;-webkit-user-select:none;user-select:none}.bp-TimestampControl-listitem{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:6px 14px;color:#000;font-size:16px;font-family:Lato,Arial,sans-serif;line-height:24px;white-space:nowrap;border-radius:8px;outline:none;cursor:pointer}.bp-TimestampControl-listitem:hover,.bp-TimestampControl-listitem:focus{background:#f4f4f4}.bp-TimestampControl-check{flex:none;fill:#000}
71
71
  .bp-FilmstripV2{position:absolute;bottom:calc(100% + 12px);padding:12px;padding-bottom:8px;background:#fff;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.15);visibility:hidden}.bp-FilmstripV2.bp-is-shown{visibility:visible}.bp-FilmstripV2-frame{display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:10px}.bp-FilmstripV2-time{margin-top:8px;color:#000;font-size:13px;line-height:20px;text-align:center}
72
- .bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
73
- .bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer;transition:transform 150ms}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible{transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover .bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible .bp-MarkerAvatar{box-shadow:0 0 0 2px #fff;transform:translate(-50%, calc(5px / 1.7))}.bp-TimeControlsV2-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}
72
+ .bp-MarkerAvatar{position:absolute;bottom:calc(100% + 4px);left:50%;width:12px;height:12px;overflow:hidden;border:0;border-radius:50%;outline:2px solid rgba(0,0,0,.5);box-shadow:0 0 0 0 #fff;transform:translate(-50%, 0);transform-origin:bottom center;transition:transform 150ms,box-shadow 150ms,outline 150ms}.bp-MarkerAvatar img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.bp-MarkerAvatar-initial{display:grid;width:100%;height:100%;font-weight:bold;font-size:7px;line-height:1;text-align:center;text-transform:uppercase;place-items:center}.bp-MarkerAvatar-anonymousIcon{width:100%;height:100%;color:#222}
73
+ .bp-MarkerAvatarStack{position:absolute;bottom:calc(100% + 4px);left:50%;display:flex;align-items:center;transform:translateX(-50%)}.bp-MarkerAvatarStack-item{position:relative;flex-shrink:0;padding:0;background:none;border:0;cursor:pointer;transition:margin 150ms}.bp-MarkerAvatarStack-item:not(:first-child){margin-left:-6px}.bp-MarkerAvatarStack-item .bp-MarkerAvatar{position:relative;bottom:auto;left:auto;display:block;transform:none}.bp-MarkerAvatarStack-item:hover,.bp-MarkerAvatarStack-item:focus-visible{z-index:1}.bp-MarkerAvatarStack-item:hover .bp-MarkerAvatar,.bp-MarkerAvatarStack-item:focus-visible .bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff}.bp-TimeControlsV2-marker--group:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-TimeControlsV2-marker--group:focus-visible .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:hover .bp-MarkerAvatarStack-item:not(:first-child),.bp-MarkerCluster:focus-within .bp-MarkerAvatarStack-item:not(:first-child){margin-left:2px}.bp-MarkerAvatarStack-overflow{cursor:pointer}.bp-MarkerAvatarStack-overflowBadge{background-color:#6f6f6f}
74
+ .bp-MarkerCluster{position:absolute;top:50%;z-index:1;height:8px;transform:translate(-2px, -50%);transition:transform 150ms}.bp-MarkerCluster:hover,.bp-MarkerCluster:focus-within{z-index:2;transform:translate(-2px, -50%) scale(1.5)}.bp-MarkerCluster:hover .bp-MarkerCluster-tick,.bp-MarkerCluster:focus-within .bp-MarkerCluster-tick{transform:none}.bp-MarkerCluster-tick{display:block;width:100%;height:100%;padding:0;background:#6f6f6f;border:1px solid #fff;border-radius:2px;cursor:pointer;transition:transform 150ms}
75
+ .bp-TimeControlsV2{position:relative;margin-right:10px;margin-left:10px}.bp-TimeControlsV2-scrubber{position:relative}.bp-TimeControlsV2-slider{height:20px}.bp-TimeControlsV2-slider .bp-SliderControl-track{height:6px;margin:auto 0;border-radius:5px;backface-visibility:hidden;mask-image:var(--bp-track-mask, none)}.bp-TimeControlsV2-slider .bp-SliderControl-thumb{top:50%;z-index:3;width:3px;height:16px;margin-left:-1.5px;background:#fff;border:0;border-radius:2px;transform:translateY(-50%);cursor:ew-resize}.bp-TimeControlsV2-marker{position:absolute;top:50%;z-index:1;width:2px;height:8px;padding:0;background:#fff;border:0;border-radius:2px;transform:translate(-50%, -50%);cursor:pointer;transition:transform 150ms}.bp-TimeControlsV2-marker:hover,.bp-TimeControlsV2-marker:focus-visible{z-index:2;transform:translate(-50%, -50%) scale(1.7)}.bp-TimeControlsV2-marker:hover>.bp-MarkerAvatar,.bp-TimeControlsV2-marker:focus-visible>.bp-MarkerAvatar{outline:0 solid transparent;box-shadow:0 0 0 2px #fff;transform:translate(-50%, calc(5px / 1.7))}.bp-TimeControlsV2-marker:focus-visible{outline:2px solid #fff;outline-offset:2px}.bp-TimeControlsV2-marker--group:hover,.bp-TimeControlsV2-marker--group:focus-visible{transform:translate(-50%, -50%) scale(1.5)}
74
76
  .bp-VideoFullscreenButton{position:absolute;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;color:#fff;background:rgba(0,0,0,.6);border:none;border-radius:50%;box-shadow:0 2px 12px 0 rgba(0,0,0,.8);cursor:pointer;backdrop-filter:blur(60px);pointer-events:auto}.bp-VideoFullscreenButton svg{width:20px;height:20px}
75
77
  .bp-VideoControlsRoot:has(.bp-VideoControlsV2){position:absolute;top:0;right:0;bottom:0;left:0;width:100%;pointer-events:none}.bp-VideoControlsRoot:has(.bp-VideoControlsV2) .bp-ControlsLayer{display:flex;flex-direction:column;justify-content:flex-end;width:100%;height:100%;pointer-events:none}.bp-VideoControlsV2{display:flex;flex-direction:column;width:100%;background-image:linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);padding:30px 48px 20px 48px;pointer-events:auto}.bp-VideoControlsV2 .bp-FullscreenToggle{width:36px;height:40px}.bp-VideoControlsV2-bar{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:0 10px 5px}.bp-VideoControlsV2-group{display:flex;gap:4px;align-items:center}.bp-VideoControlsV2-group .bp-VideoControlsV2-divider{margin:0 8px}.bp-VideoControlsV2-playPause{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-playPause:focus:not(:disabled),.bp-VideoControlsV2-playPause:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-playPause:focus:not(:disabled) svg,.bp-VideoControlsV2-playPause:hover:not(:disabled) svg,.bp-VideoControlsV2-playPause.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-playPause.bp-is-active,.bp-VideoControlsV2-playPause:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-playPause.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-playPause.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-playPause:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-playPause:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-playPause:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-playPause svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-skipBtn{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled),.bp-VideoControlsV2-skipBtn:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-VideoControlsV2-skipBtn:focus:not(:disabled) svg,.bp-VideoControlsV2-skipBtn:hover:not(:disabled) svg,.bp-VideoControlsV2-skipBtn.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-VideoControlsV2-skipBtn.bp-is-active,.bp-VideoControlsV2-skipBtn:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-VideoControlsV2-skipBtn.bp-is-active:focus:not(:disabled),.bp-VideoControlsV2-skipBtn.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-VideoControlsV2-skipBtn:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-VideoControlsV2-skipBtn:focus:not(:focus-visible){box-shadow:none}.bp-VideoControlsV2-skipBtn:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-VideoControlsV2-skipBtn svg{width:32px;height:32px;padding:5px}.bp-VideoControlsV2-divider{width:1px;height:24px;background-color:rgba(255,255,255,.1);border-radius:1px}.bp-VideoControlsV2 .bp-AnnotationsControls{gap:4px;padding-left:0;border-left:none}
76
78
  .bp-VideoGuidesOverlay{position:absolute;pointer-events:none}.bp-VideoGuidesOverlay-svg{display:block;width:100%;height:100%;overflow:visible}.bp-VideoGuidesOverlay-cas{fill:none;stroke:#000;stroke-opacity:.5;stroke-width:3;vector-effect:non-scaling-stroke}.bp-VideoGuidesOverlay-ln{fill:none;stroke:#fff;stroke-width:1.25;vector-effect:non-scaling-stroke}
@@ -78,7 +80,7 @@
78
80
  .bp-FindBarToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-FindBarToggle:focus:not(:disabled),.bp-FindBarToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-FindBarToggle:focus:not(:disabled) svg,.bp-FindBarToggle:hover:not(:disabled) svg,.bp-FindBarToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-FindBarToggle.bp-is-active,.bp-FindBarToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-FindBarToggle.bp-is-active:focus:not(:disabled),.bp-FindBarToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-FindBarToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus:not(:focus-visible){box-shadow:none}.bp-FindBarToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-FindBarToggle svg{width:32px;height:32px;padding:5px}
79
81
  .bp-GalleryToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-GalleryToggle:focus:not(:disabled),.bp-GalleryToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-GalleryToggle:focus:not(:disabled) svg,.bp-GalleryToggle:hover:not(:disabled) svg,.bp-GalleryToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-GalleryToggle.bp-is-active,.bp-GalleryToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-GalleryToggle.bp-is-active:focus:not(:disabled),.bp-GalleryToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-GalleryToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus:not(:focus-visible){box-shadow:none}.bp-GalleryToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-GalleryToggle svg{width:32px;height:32px;padding:5px}
80
82
  .bp-ThumbnailsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-ThumbnailsToggle:focus:not(:disabled),.bp-ThumbnailsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ThumbnailsToggle:focus:not(:disabled) svg,.bp-ThumbnailsToggle:hover:not(:disabled) svg,.bp-ThumbnailsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ThumbnailsToggle.bp-is-active,.bp-ThumbnailsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ThumbnailsToggle.bp-is-active:focus:not(:disabled),.bp-ThumbnailsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ThumbnailsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus:not(:focus-visible){box-shadow:none}.bp-ThumbnailsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ThumbnailsToggle svg{width:32px;height:32px;padding:5px}
81
- .bp-gallery-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start;padding:40px;padding-bottom:100px;overflow-y:auto;background-color:#fff}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0 12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}
83
+ .bp-gallery-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start;padding:40px;padding-bottom:100px;overflow-y:auto;overscroll-behavior:none;background-color:#fff}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0 12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}.bp-container:has(.bp-gallery-grid) .ba-PopupPortal{display:none}
82
84
  .custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;top:15px;right:0;bottom:15px;left:0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .textLayer .rangy-highlight{opacity:.2}.bp-doc .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp .bp-doc.bp-doc-document{overflow-y:scroll}.bp-document-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;height:100%;margin:0;overflow-y:scroll;scrollbar-gutter:stable;background-color:#f5f5f5;opacity:1;transition:opacity .5s}.bp-document-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-document-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-document-preload-wrapper{background-color:#464a4f}.bp-document-preload-wrapper .bp-preload-content,.bp-document-preload-wrapper .bp-preload-overlay,.bp-document-preload-wrapper .bp-preload-placeholder::before{position:absolute;top:0;right:0;bottom:0;left:0}.bp-document-preload-wrapper .bp-preload-content{width:100%}.bp-document-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-document-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:15px auto 30px}.bp-document-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-document-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
83
85
  .custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;top:15px;right:0;bottom:15px;left:0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .textLayer .rangy-highlight{opacity:.2}.bp-doc .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp-doc.bp-doc-presentation{overflow:hidden}.bp-doc.bp-doc-presentation .pdfViewer .page{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto}.bp-doc.bp-doc-presentation .pdfViewer .page.bp-is-invisible{opacity:0}.bp-doc.bp-doc-presentation.overflow-x{overflow-x:scroll}.bp-doc.bp-doc-presentation.overflow-y{overflow-y:scroll}.bp-doc.bp-doc-presentation.overflow-y .pdfViewer .page{margin-top:5px}.bp-presentation-preload-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;align-content:center;margin:0;background-color:#f5f5f5;transition:opacity .5s}.bp-presentation-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-presentation-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-presentation-preload-wrapper{background-color:#464a4f}.bp-presentation-preload-wrapper .bp-preload-content,.bp-presentation-preload-wrapper .bp-preload-overlay,.bp-presentation-preload-wrapper .bp-preload-placeholder::before{position:absolute;top:0;right:0;bottom:0;left:0}.bp-presentation-preload-wrapper .bp-preload-content{width:100%}.bp-presentation-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-presentation-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:auto;padding-top:5px}.bp-presentation-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-presentation-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
84
86
  .bp-AnimationClipsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-AnimationClipsToggle:focus:not(:disabled),.bp-AnimationClipsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-AnimationClipsToggle:focus:not(:disabled) svg,.bp-AnimationClipsToggle:hover:not(:disabled) svg,.bp-AnimationClipsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-AnimationClipsToggle.bp-is-active,.bp-AnimationClipsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-AnimationClipsToggle.bp-is-active:focus:not(:disabled),.bp-AnimationClipsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-AnimationClipsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus:not(:focus-visible){box-shadow:none}.bp-AnimationClipsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-AnimationClipsToggle svg{width:32px;height:32px;padding:5px}
package/dist/lib/index.js CHANGED
@@ -9340,7 +9340,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
9340
9340
  const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
9341
9341
  const CLIENT_NAME_KEY = 'box_client_name';
9342
9342
  const CLIENT_VERSION_KEY = 'box_client_version';
9343
- const CLIENT_VERSION = "3.53.0"; // eslint-disable-line no-undef
9343
+ const CLIENT_VERSION = "3.55.0"; // eslint-disable-line no-undef
9344
9344
  const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
9345
9345
  const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
9346
9346
  const PROMISE_MAP = {};
@@ -11065,7 +11065,7 @@ class Browser {
11065
11065
  ;// ./src/lib/Logger.js
11066
11066
  /* eslint-disable no-undef */
11067
11067
  const Logger_CLIENT_NAME = "box-content-preview";
11068
- const Logger_CLIENT_VERSION = "3.53.0";
11068
+ const Logger_CLIENT_VERSION = "3.55.0";
11069
11069
  /* eslint-enable no-undef */
11070
11070
 
11071
11071
  class Logger {
@@ -27650,6 +27650,57 @@ function TimestampControl(_ref) {
27650
27650
  }));
27651
27651
  })));
27652
27652
  }
27653
+ ;// ./src/lib/viewers/controls/media/utils.ts
27654
+ const utils_round = value => {
27655
+ return +value.toFixed(4);
27656
+ };
27657
+ const utils_percent = (value1, value2) => {
27658
+ return utils_round(value1 / value2 * 100);
27659
+ };
27660
+ ;// ./src/lib/viewers/controls/media/buildClusters.ts
27661
+
27662
+
27663
+ /** Max pixel distance between adjacent markers (sorted by time) for them to be grouped into a single cluster. */
27664
+ const CLUSTER_THRESHOLD_PX = 2;
27665
+
27666
+ /** Converts a group of markers into a ClusterData object with computed positions and metadata. */
27667
+ function finalizeCluster(group, durationValue) {
27668
+ const leftPercent = utils_percent(group[0].time, durationValue);
27669
+ const rightPercent = utils_percent(group[group.length - 1].time, durationValue);
27670
+ const isSinglePoint = leftPercent === rightPercent;
27671
+ return {
27672
+ id: group.map(m => m.id).join('|'),
27673
+ isSinglePoint,
27674
+ leftPercent,
27675
+ markers: group,
27676
+ rightPercent
27677
+ };
27678
+ }
27679
+
27680
+ /**
27681
+ * Groups comment markers into clusters based on their pixel proximity on the scrubber track.
27682
+ * Markers are sorted by time, then chained: each marker that is within CLUSTER_THRESHOLD_PX
27683
+ * of its neighbor joins the same cluster. This means distant markers can end up in one cluster
27684
+ * if intermediate markers bridge the gap.
27685
+ */
27686
+ function buildClusters(markers, durationValue, trackWidth) {
27687
+ if (durationValue <= 0 || markers.length === 0 || trackWidth <= 0) return [];
27688
+ const sorted = [...markers].sort((a, b) => a.time - b.time);
27689
+ const clusters = [];
27690
+ let currentGroup = [sorted[0]];
27691
+ for (let i = 1; i < sorted.length; i += 1) {
27692
+ const prevPx = sorted[i - 1].time / durationValue * trackWidth;
27693
+ const currPx = sorted[i].time / durationValue * trackWidth;
27694
+ if (currPx - prevPx <= CLUSTER_THRESHOLD_PX) {
27695
+ currentGroup.push(sorted[i]);
27696
+ } else {
27697
+ clusters.push(finalizeCluster(currentGroup, durationValue));
27698
+ currentGroup = [sorted[i]];
27699
+ }
27700
+ }
27701
+ clusters.push(finalizeCluster(currentGroup, durationValue));
27702
+ return clusters;
27703
+ }
27653
27704
  ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
27654
27705
  // extracted by mini-css-extract-plugin
27655
27706
 
@@ -27805,6 +27856,118 @@ function MarkerAvatar(_ref) {
27805
27856
  } : undefined
27806
27857
  }, avatar);
27807
27858
  }
27859
+ ;// ./src/lib/viewers/controls/media/MarkerAvatarStack.scss
27860
+ // extracted by mini-css-extract-plugin
27861
+
27862
+ ;// ./src/lib/viewers/controls/media/MarkerAvatarStack.tsx
27863
+
27864
+
27865
+
27866
+ const MAX_VISIBLE_AVATARS = 4;
27867
+ function MarkerAvatarStack(_ref) {
27868
+ let {
27869
+ markers,
27870
+ onMarkerClick
27871
+ } = _ref;
27872
+ const hasOverflow = markers.length > MAX_VISIBLE_AVATARS;
27873
+ const visibleMarkers = hasOverflow ? markers.slice(0, MAX_VISIBLE_AVATARS - 1) : markers;
27874
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27875
+ className: "bp-MarkerAvatarStack"
27876
+ }, visibleMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27877
+ key: marker.id,
27878
+ className: "bp-MarkerAvatarStack-item",
27879
+ onClick: e => {
27880
+ e.stopPropagation();
27881
+ onMarkerClick?.(marker);
27882
+ },
27883
+ type: "button"
27884
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27885
+ avatarUrl: marker.avatarUrl,
27886
+ colorIndex: marker.colorIndex,
27887
+ initial: marker.initial
27888
+ }))), hasOverflow && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27889
+ className: "bp-MarkerAvatarStack-item bp-MarkerAvatarStack-overflow",
27890
+ onClick: e => {
27891
+ e.stopPropagation();
27892
+ onMarkerClick?.(markers[MAX_VISIBLE_AVATARS - 1]);
27893
+ },
27894
+ type: "button"
27895
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27896
+ className: "bp-MarkerAvatar bp-MarkerAvatarStack-overflowBadge"
27897
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
27898
+ className: "bp-MarkerAvatar-initial"
27899
+ }, "+", markers.length - (MAX_VISIBLE_AVATARS - 1)))));
27900
+ }
27901
+ ;// ./src/lib/viewers/controls/media/MarkerCluster.scss
27902
+ // extracted by mini-css-extract-plugin
27903
+
27904
+ ;// ./src/lib/viewers/controls/media/MarkerCluster.tsx
27905
+
27906
+
27907
+
27908
+ function MarkerCluster(_ref) {
27909
+ let {
27910
+ cluster,
27911
+ onMarkerClick
27912
+ } = _ref;
27913
+ const {
27914
+ markers,
27915
+ leftPercent,
27916
+ rightPercent
27917
+ } = cluster;
27918
+ const style = {
27919
+ left: `${leftPercent}%`,
27920
+ width: `calc(${rightPercent - leftPercent}% + 4px)`
27921
+ };
27922
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
27923
+ className: "bp-MarkerCluster",
27924
+ "data-testid": "bp-marker-cluster",
27925
+ style: style
27926
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27927
+ "aria-label": "Comment marker",
27928
+ className: "bp-MarkerCluster-tick",
27929
+ onClick: e => {
27930
+ e.stopPropagation();
27931
+ onMarkerClick?.(markers[0]);
27932
+ },
27933
+ type: "button"
27934
+ }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
27935
+ markers: markers,
27936
+ onMarkerClick: onMarkerClick
27937
+ }));
27938
+ }
27939
+ ;// ./src/lib/viewers/controls/media/MarkerTick.tsx
27940
+
27941
+
27942
+
27943
+ function MarkerTick(_ref) {
27944
+ let {
27945
+ markers,
27946
+ onMarkerClick,
27947
+ position
27948
+ } = _ref;
27949
+ const isGroup = markers.length > 1;
27950
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27951
+ "aria-label": "Comment marker",
27952
+ className: `bp-TimeControlsV2-marker${isGroup ? ' bp-TimeControlsV2-marker--group' : ''}`,
27953
+ "data-testid": "bp-time-controls-marker",
27954
+ onClick: e => {
27955
+ e.stopPropagation();
27956
+ onMarkerClick?.(markers[0]);
27957
+ },
27958
+ style: {
27959
+ left: `${position}%`
27960
+ },
27961
+ type: "button"
27962
+ }, isGroup ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatarStack, {
27963
+ markers: markers,
27964
+ onMarkerClick: onMarkerClick
27965
+ }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27966
+ avatarUrl: markers[0].avatarUrl,
27967
+ colorIndex: markers[0].colorIndex,
27968
+ initial: markers[0].initial
27969
+ }));
27970
+ }
27808
27971
  ;// ./src/lib/viewers/controls/media/TimeControlsV2.scss
27809
27972
  // extracted by mini-css-extract-plugin
27810
27973
 
@@ -27817,12 +27980,9 @@ function MarkerAvatar(_ref) {
27817
27980
 
27818
27981
 
27819
27982
 
27820
- const TimeControlsV2_round = value => {
27821
- return +value.toFixed(4);
27822
- };
27823
- const TimeControlsV2_percent = (value1, value2) => {
27824
- return TimeControlsV2_round(value1 / value2 * 100);
27825
- };
27983
+
27984
+
27985
+
27826
27986
  function TimeControlsV2(_ref) {
27827
27987
  let {
27828
27988
  aspectRatio,
@@ -27832,7 +27992,6 @@ function TimeControlsV2(_ref) {
27832
27992
  filmstripInterval,
27833
27993
  filmstripUrl,
27834
27994
  fps,
27835
- mediaEl,
27836
27995
  onCommentMarkerClick,
27837
27996
  onTimeChange
27838
27997
  } = _ref;
@@ -27840,26 +27999,45 @@ function TimeControlsV2(_ref) {
27840
27999
  const [hoverPosition, setHoverPosition] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
27841
28000
  const [hoverPositionMax, setHoverPositionMax] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
27842
28001
  const [hoverTime, setHoverTime] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
28002
+ const [trackWidth, setTrackWidth] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(0);
28003
+ const scrubberRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
27843
28004
  const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
27844
28005
  const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
27845
- const currentPercentage = TimeControlsV2_percent(currentValue, durationValue);
27846
- const markerTimesKey = commentMarkers.map(m => m.time).join('|');
28006
+ const currentPercentage = utils_percent(currentValue, durationValue);
28007
+ __WEBPACK_EXTERNAL_MODULE_react_default__.useLayoutEffect(() => {
28008
+ const el = scrubberRef.current;
28009
+ if (!el) return undefined;
28010
+ setTrackWidth(el.clientWidth);
28011
+ const observer = new ResizeObserver(entries => {
28012
+ entries.forEach(entry => {
28013
+ setTrackWidth(entry.contentRect.width);
28014
+ });
28015
+ });
28016
+ observer.observe(el);
28017
+ return () => observer.disconnect();
28018
+ }, []);
28019
+ const clusters = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => buildClusters(commentMarkers, durationValue, trackWidth), [commentMarkers, durationValue, trackWidth]);
27847
28020
  const trackMask = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => {
27848
- if (durationValue <= 0 || commentMarkers.length === 0) return undefined;
28021
+ if (durationValue <= 0 || clusters.length === 0) return undefined;
27849
28022
  const HALF_GAP = 2;
27850
28023
  const stops = [];
27851
- const sorted = commentMarkers.map(m => TimeControlsV2_percent(m.time, durationValue)).sort((a, b) => a - b);
27852
28024
  stops.push('black 0%');
27853
- sorted.forEach(pos => {
27854
- stops.push(`black calc(${pos}% - ${HALF_GAP}px)`);
27855
- stops.push(`transparent calc(${pos}% - ${HALF_GAP}px)`);
27856
- stops.push(`transparent calc(${pos}% + ${HALF_GAP}px)`);
27857
- stops.push(`black calc(${pos}% + ${HALF_GAP}px)`);
28025
+ clusters.forEach(_ref2 => {
28026
+ let {
28027
+ leftPercent,
28028
+ rightPercent
28029
+ } = _ref2;
28030
+ const isRange = leftPercent !== rightPercent;
28031
+ const leftPad = isRange ? HALF_GAP + 1 : HALF_GAP;
28032
+ const rightPad = isRange ? HALF_GAP + 1 : HALF_GAP;
28033
+ stops.push(`black calc(${leftPercent}% - ${leftPad}px)`);
28034
+ stops.push(`transparent calc(${leftPercent}% - ${leftPad}px)`);
28035
+ stops.push(`transparent calc(${rightPercent}% + ${rightPad}px)`);
28036
+ stops.push(`black calc(${rightPercent}% + ${rightPad}px)`);
27858
28037
  });
27859
28038
  stops.push('black 100%');
27860
28039
  return `linear-gradient(to right, ${stops.join(', ')})`;
27861
- // eslint-disable-next-line react-hooks/exhaustive-deps
27862
- }, [markerTimesKey, durationValue]);
28040
+ }, [durationValue, clusters]);
27863
28041
  const handleMouseMove = (newTime, newPosition, width) => {
27864
28042
  setHoverPosition(newPosition);
27865
28043
  setHoverPositionMax(width);
@@ -27878,6 +28056,7 @@ function TimeControlsV2(_ref) {
27878
28056
  positionMax: hoverPositionMax,
27879
28057
  time: hoverTime
27880
28058
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
28059
+ ref: scrubberRef,
27881
28060
  className: "bp-TimeControlsV2-scrubber",
27882
28061
  style: trackMask ? {
27883
28062
  '--bp-track-mask': trackMask
@@ -27897,24 +28076,16 @@ function TimeControlsV2(_ref) {
27897
28076
  title: "Media Slider",
27898
28077
  track: `linear-gradient(to right, ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__} calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% - 2.5px), transparent calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} calc(${currentPercentage}% + 2.5px), ${__WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__} 100%)`,
27899
28078
  value: currentValue
27900
- }), durationValue > 0 && commentMarkers.map(marker => /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
27901
- key: marker.id,
27902
- "aria-label": "Comment marker",
27903
- className: "bp-TimeControlsV2-marker",
27904
- "data-testid": "bp-time-controls-marker",
27905
- onClick: e => {
27906
- e.stopPropagation();
27907
- onCommentMarkerClick?.(marker);
27908
- },
27909
- style: {
27910
- left: `${TimeControlsV2_percent(marker.time, durationValue)}%`
27911
- },
27912
- type: "button"
27913
- }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerAvatar, {
27914
- avatarUrl: marker.avatarUrl,
27915
- colorIndex: marker.colorIndex,
27916
- initial: marker.initial
27917
- })))));
28079
+ }), durationValue > 0 && clusters.map(cluster => cluster.isSinglePoint ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerTick, {
28080
+ key: cluster.id,
28081
+ markers: cluster.markers,
28082
+ onMarkerClick: onCommentMarkerClick,
28083
+ position: cluster.leftPercent
28084
+ }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(MarkerCluster, {
28085
+ key: cluster.id,
28086
+ cluster: cluster,
28087
+ onMarkerClick: onCommentMarkerClick
28088
+ }))));
27918
28089
  }
27919
28090
  ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
27920
28091
  // extracted by mini-css-extract-plugin
@@ -28068,7 +28239,6 @@ function VideoControlsV2(_ref) {
28068
28239
  filmstripInterval: filmstripInterval,
28069
28240
  filmstripUrl: filmstripUrl,
28070
28241
  fps: fps,
28071
- mediaEl: mediaEl,
28072
28242
  onCommentMarkerClick: onCommentMarkerClick,
28073
28243
  onTimeChange: onTimeChange
28074
28244
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
@@ -30471,12 +30641,7 @@ function DocControls(_ref) {
30471
30641
  } = _ref;
30472
30642
  return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ExperiencesProvider, {
30473
30643
  experiences: experiences
30474
- }, isGalleryOpen ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryToggle, {
30475
- isGalleryOpen: isGalleryOpen,
30476
- onGalleryToggle: onGalleryToggle
30477
- }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FullscreenToggle, {
30478
- onFullscreenToggle: onFullscreenToggle
30479
- }))) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(__WEBPACK_EXTERNAL_MODULE_react_default__.Fragment, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ThumbnailsToggle, {
30644
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, !isGalleryOpen && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(__WEBPACK_EXTERNAL_MODULE_react_default__.Fragment, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ThumbnailsToggle, {
30480
30645
  isThumbnailsOpen: isThumbnailsOpen,
30481
30646
  onThumbnailsToggle: onThumbnailsToggle
30482
30647
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FindBarToggle, {
@@ -30498,12 +30663,12 @@ function DocControls(_ref) {
30498
30663
  scale: scale
30499
30664
  })), onRotateLeft && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(RotateControl, {
30500
30665
  onRotateLeft: onRotateLeft
30501
- })), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryToggle, {
30666
+ }))), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBarGroup, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryToggle, {
30502
30667
  isGalleryOpen: isGalleryOpen,
30503
30668
  onGalleryToggle: onGalleryToggle
30504
30669
  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(FullscreenToggle, {
30505
30670
  onFullscreenToggle: onFullscreenToggle
30506
- }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnnotationsControls, {
30671
+ }), !isGalleryOpen && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(AnnotationsControls, {
30507
30672
  annotationColor: annotationColor,
30508
30673
  annotationMode: annotationMode,
30509
30674
  hasDrawing: hasDrawing,
@@ -30511,11 +30676,11 @@ function DocControls(_ref) {
30511
30676
  hasRegion: hasRegion,
30512
30677
  onAnnotationModeClick: onAnnotationModeClick,
30513
30678
  onAnnotationModeEscape: onAnnotationModeEscape
30514
- }))), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DrawingControls, {
30679
+ }))), !isGalleryOpen && /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsBar, null, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DrawingControls, {
30515
30680
  annotationColor: annotationColor,
30516
30681
  annotationMode: annotationMode,
30517
30682
  onAnnotationColorChange: onAnnotationColorChange
30518
- }))));
30683
+ })));
30519
30684
  }
30520
30685
  ;// ./src/lib/icons/search.svg
30521
30686
  const search_namespaceObject = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 15 14\" focusable=\"false\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M-2-3h20v20H-2z\"/>\n <path class=\"icon\" fill=\"#FFF\" d=\"M6.931 0a5.994 5.994 0 0 1 4.907 9.438l2.806 2.807a1 1 0 0 1 0 1.415l-.047.047a1 1 0 0 1-1.414 0L10.375 10.9A5.994 5.994 0 1 1 6.931 0zm0 1.998a3.996 3.996 0 1 0 0 7.992 3.996 3.996 0 0 0 0-7.992z\"/>\n </g>\n</svg>\n";
@@ -31404,11 +31569,42 @@ function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return
31404
31569
 
31405
31570
 
31406
31571
 
31572
+
31407
31573
  const GALLERY_THUMB_MAX_WIDTH = 440;
31408
31574
  const INITIAL_LOAD_BUFFER = 40;
31409
31575
  const CONCURRENT_LOADS = 4;
31410
31576
  const SCROLL_THROTTLE_MS = 200;
31411
- function GalleryGrid(_ref) {
31577
+ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(function GalleryTile(_ref) {
31578
+ let {
31579
+ pageNum,
31580
+ isFocused,
31581
+ imageSrc,
31582
+ onClick,
31583
+ onFocus
31584
+ } = _ref;
31585
+ return (
31586
+ /*#__PURE__*/
31587
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events
31588
+ __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
31589
+ "aria-label": replacePlaceholders("Page {1}", [String(pageNum)]),
31590
+ "aria-selected": isFocused,
31591
+ className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
31592
+ "data-page": pageNum,
31593
+ onClick: () => onClick(pageNum),
31594
+ onFocus: () => onFocus(pageNum),
31595
+ role: "option",
31596
+ tabIndex: isFocused ? 0 : -1
31597
+ }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
31598
+ className: "bp-gallery-tile-badge"
31599
+ }, pageNum), imageSrc ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
31600
+ alt: "",
31601
+ src: imageSrc
31602
+ }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
31603
+ className: "bp-gallery-tile-placeholder"
31604
+ }))
31605
+ );
31606
+ });
31607
+ function GalleryGrid(_ref2) {
31412
31608
  let {
31413
31609
  pageCount,
31414
31610
  currentPage,
@@ -31416,7 +31612,7 @@ function GalleryGrid(_ref) {
31416
31612
  onFocusChange,
31417
31613
  onPageNavigate,
31418
31614
  thumbnail
31419
- } = _ref;
31615
+ } = _ref2;
31420
31616
  const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
31421
31617
  const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
31422
31618
  const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
@@ -31552,72 +31748,88 @@ function GalleryGrid(_ref) {
31552
31748
  };
31553
31749
  // eslint-disable-next-line react-hooks/exhaustive-deps
31554
31750
  }, []);
31751
+ const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
31752
+ const grid = gridRef.current;
31753
+ if (!grid) return;
31754
+ const tile = grid.querySelector(`[data-page="${pageNum}"]`);
31755
+ if (tile) {
31756
+ tile.focus();
31757
+ }
31758
+ }, []);
31555
31759
  const handleTileFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
31556
31760
  setFocusedPage(pageNum);
31557
31761
  if (onFocusChange) {
31558
31762
  onFocusChange(pageNum);
31559
31763
  }
31560
31764
  }, [onFocusChange]);
31765
+ const handleTileClick = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
31766
+ onPageNavigate(pageNum);
31767
+ }, [onPageNavigate]);
31561
31768
  const handleGridFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
31562
- if (event.target === gridRef.current && gridRef.current) {
31563
- const tile = gridRef.current.querySelector(`[data-page="${focusedPage}"]`);
31564
- if (tile) {
31565
- tile.focus();
31566
- }
31769
+ if (event.target === gridRef.current) {
31770
+ focusTile(focusedPage);
31567
31771
  }
31568
- }, [focusedPage]);
31772
+ }, [focusedPage, focusTile]);
31569
31773
  const handleGridKeyDown = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(event => {
31570
- if (event.key === 'Escape') {
31571
- event.preventDefault();
31572
- event.stopPropagation();
31573
- onClose();
31574
- return;
31575
- }
31576
- if (event.key === 'Tab' && gridRef.current) {
31577
- const buttons = gridRef.current.querySelectorAll('button');
31578
- const first = buttons[0];
31579
- const last = buttons[buttons.length - 1];
31580
- if (event.shiftKey && document.activeElement === first) {
31774
+ const key = decodeKeydown(event);
31775
+ switch (key) {
31776
+ case 'Escape':
31581
31777
  event.preventDefault();
31582
- last.focus();
31583
- } else if (!event.shiftKey && document.activeElement === last) {
31778
+ event.stopPropagation();
31779
+ onClose();
31780
+ return;
31781
+ // Listbox is 1-D — arrows move ±1; row-aware nav comes with v2 grid role.
31782
+ case 'ArrowUp':
31783
+ case 'ArrowLeft':
31784
+ if (focusedPage > 1) {
31785
+ event.preventDefault();
31786
+ focusTile(focusedPage - 1);
31787
+ }
31788
+ return;
31789
+ case 'ArrowDown':
31790
+ case 'ArrowRight':
31791
+ if (focusedPage < pageCount) {
31792
+ event.preventDefault();
31793
+ focusTile(focusedPage + 1);
31794
+ }
31795
+ return;
31796
+ case 'Home':
31584
31797
  event.preventDefault();
31585
- first.focus();
31586
- }
31798
+ focusTile(1);
31799
+ return;
31800
+ case 'End':
31801
+ event.preventDefault();
31802
+ focusTile(pageCount);
31803
+ return;
31804
+ case 'Enter':
31805
+ case 'Space':
31806
+ event.preventDefault();
31807
+ onPageNavigate(focusedPage);
31808
+ break;
31809
+ default:
31587
31810
  }
31588
- }, [onClose]);
31811
+ }, [focusedPage, focusTile, onClose, onPageNavigate, pageCount]);
31589
31812
  const tiles = [];
31590
31813
  for (let i = 1; i <= pageCount; i += 1) {
31591
- const isFocused = i === focusedPage;
31592
- tiles.push( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", {
31814
+ tiles.push( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryTile, {
31593
31815
  key: i,
31594
- "aria-label": `Page ${i}${isFocused ? ', current page' : ''}`,
31595
- className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
31596
- "data-page": i,
31597
- onClick: () => onPageNavigate(i),
31598
- onFocus: () => handleTileFocus(i),
31599
- type: "button"
31600
- }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
31601
- className: "bp-gallery-tile-badge"
31602
- }, i), loadedImages[i] ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
31603
- alt: `Page ${i}`,
31604
- src: loadedImages[i]
31605
- }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
31606
- className: "bp-gallery-tile-placeholder"
31607
- })));
31816
+ imageSrc: loadedImages[i],
31817
+ isFocused: i === focusedPage,
31818
+ onClick: handleTileClick,
31819
+ onFocus: handleTileFocus,
31820
+ pageNum: i
31821
+ }));
31608
31822
  }
31609
- return (
31610
- /*#__PURE__*/
31611
- // eslint-disable-next-line jsx-a11y/no-static-element-interactions
31612
- __WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
31613
- ref: gridRef,
31614
- className: "bp-gallery-grid",
31615
- onFocus: handleGridFocus,
31616
- onKeyDown: handleGridKeyDown,
31617
- onScroll: handleScrollRef.current,
31618
- tabIndex: -1
31619
- }, tiles)
31620
- );
31823
+ return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
31824
+ ref: gridRef,
31825
+ "aria-label": "Page gallery",
31826
+ className: "bp-gallery-grid",
31827
+ onFocus: handleGridFocus,
31828
+ onKeyDown: handleGridKeyDown,
31829
+ onScroll: handleScrollRef.current,
31830
+ role: "listbox",
31831
+ tabIndex: -1
31832
+ }, tiles);
31621
31833
  }
31622
31834
  ;// ./src/lib/viewers/gallery/GalleryController.tsx
31623
31835
  function GalleryController_defineProperty(e, r, t) { return (r = GalleryController_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -31655,6 +31867,9 @@ class GalleryController {
31655
31867
  GalleryController_defineProperty(this, "setPage", void 0);
31656
31868
  GalleryController_defineProperty(this, "toggleThumbnails", void 0);
31657
31869
  GalleryController_defineProperty(this, "requestUiUpdate", void 0);
31870
+ GalleryController_defineProperty(this, "focusToggle", void 0);
31871
+ GalleryController_defineProperty(this, "onBeforeOpen", void 0);
31872
+ GalleryController_defineProperty(this, "onAfterClose", void 0);
31658
31873
  GalleryController_defineProperty(this, "galleryRoot", null);
31659
31874
  GalleryController_defineProperty(this, "galleryEl", null);
31660
31875
  GalleryController_defineProperty(this, "galleryThumbnail", null);
@@ -31666,6 +31881,7 @@ class GalleryController {
31666
31881
  GalleryController_defineProperty(this, "toggle", () => {
31667
31882
  this.isGalleryOpen = !this.isGalleryOpen;
31668
31883
  if (this.isGalleryOpen) {
31884
+ this.onBeforeOpen();
31669
31885
  if (this.gallerySidebarTimeoutId !== null) {
31670
31886
  clearTimeout(this.gallerySidebarTimeoutId);
31671
31887
  this.gallerySidebarTimeoutId = null;
@@ -31712,6 +31928,10 @@ class GalleryController {
31712
31928
  }
31713
31929
  }
31714
31930
  this.requestUiUpdate();
31931
+ if (!this.isGalleryOpen) {
31932
+ this.onAfterClose();
31933
+ this.focusToggle();
31934
+ }
31715
31935
  });
31716
31936
  GalleryController_defineProperty(this, "handleGalleryNavigate", pageNum => {
31717
31937
  this.galleryFocusedPage = pageNum;
@@ -31728,6 +31948,9 @@ class GalleryController {
31728
31948
  this.setPage = opts.setPage;
31729
31949
  this.toggleThumbnails = opts.toggleThumbnails;
31730
31950
  this.requestUiUpdate = opts.requestUiUpdate;
31951
+ this.focusToggle = opts.focusToggle;
31952
+ this.onBeforeOpen = opts.onBeforeOpen;
31953
+ this.onAfterClose = opts.onAfterClose;
31731
31954
  }
31732
31955
  get isOpen() {
31733
31956
  return this.isGalleryOpen;
@@ -33330,7 +33553,15 @@ class DocBaseViewer extends viewers_BaseViewer {
33330
33553
  getThumbnailsSidebar: () => this.thumbnailsSidebar,
33331
33554
  setPage: n => this.setPage(n),
33332
33555
  toggleThumbnails: () => this.toggleThumbnails(),
33333
- requestUiUpdate: () => this.renderUI()
33556
+ requestUiUpdate: () => this.renderUI(),
33557
+ focusToggle: () => {
33558
+ const toggle = this.containerEl.querySelector('.bp-GalleryToggle');
33559
+ if (toggle && toggle.focus) {
33560
+ toggle.focus();
33561
+ }
33562
+ },
33563
+ onBeforeOpen: () => this.handleGalleryEnter(),
33564
+ onAfterClose: () => this.handleGalleryExit()
33334
33565
  });
33335
33566
  }
33336
33567
 
@@ -34993,6 +35224,34 @@ class DocBaseViewer extends viewers_BaseViewer {
34993
35224
  this.findBar.toggle();
34994
35225
  }
34995
35226
 
35227
+ /**
35228
+ * Called before the gallery opens. Closes the find bar and resets annotation mode.
35229
+ *
35230
+ * @protected
35231
+ * @return {void}
35232
+ */
35233
+ handleGalleryEnter() {
35234
+ if (this.findBar) {
35235
+ this.findBar.close();
35236
+ }
35237
+ this.processAnnotationModeChange(this.annotationControlsFSM.transition(AnnotationInput.RESET));
35238
+ if (this.annotator) {
35239
+ this.annotator.toggleAnnotationMode(AnnotationMode.NONE);
35240
+ }
35241
+ }
35242
+
35243
+ /**
35244
+ * Called after the gallery closes. Restores REGION mode so the region-comment cursor is active.
35245
+ *
35246
+ * @protected
35247
+ * @return {void}
35248
+ */
35249
+ handleGalleryExit() {
35250
+ if (this.annotator && this.areNewAnnotationsEnabled()) {
35251
+ this.annotator.toggleAnnotationMode(AnnotationMode.REGION);
35252
+ }
35253
+ }
35254
+
34996
35255
  /**
34997
35256
  * Callback when the toggle thumbnail sidebar button is clicked.
34998
35257
  *
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "box-content-preview",
3
- "version": "3.53.0",
3
+ "version": "3.55.0",
4
4
  "description": "Box Content Preview UI Element",
5
5
  "author": "Box (https://www.box.com/)",
6
6
  "license": "SEE LICENSE IN LICENSE",