npm - box-content-preview - Versions diffs - 3.65.0 → 3.66.0 - Mend

box-content-preview 3.65.0 → 3.66.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.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -2,7 +2,7 @@
 [![Mergify Status](https://img.shields.io/endpoint.svg?url=https://gh.mergify.io/badges/box/box-content-preview&style=flat)](https://mergify.io)
 [![Styled With Prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![build status](https://img.shields.io/travis/box/box-content-preview/master.svg?style=flat-square)](https://travis-ci.org/box/box-content-preview)
-[![version](https://img.shields.io/badge/version-v3.65.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
+[![version](https://img.shields.io/badge/version-v3.66.0-blue.svg?style=flat-square)](https://github.com/box/box-content-preview)
 [![npm version](https://img.shields.io/npm/v/box-ui-elements.svg?style=flat-square)](https://www.npmjs.com/package/box-ui-elements)
 # [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
 ## Current Version
-- Version: v3.65.0
+- Version: v3.66.0
 - Locale: en-US
-https://cdn01.boxcdn.net/platform/preview/3.65.0/en-US/preview.js
-https://cdn01.boxcdn.net/platform/preview/3.65.0/en-US/preview.css
+https://cdn01.boxcdn.net/platform/preview/3.66.0/en-US/preview.js
+https://cdn01.boxcdn.net/platform/preview/3.66.0/en-US/preview.css
 ## Supported Locales
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
     <title>Box Content Preview Demo</title>
     <!-- Latest version of Preview SDK for your locale -->
-    <script src="https://cdn01.boxcdn.net/platform/preview/3.65.0/en-US/preview.js"></script>
+    <script src="https://cdn01.boxcdn.net/platform/preview/3.66.0/en-US/preview.js"></script>
     <link
       rel="stylesheet"
-      href="https://cdn01.boxcdn.net/platform/preview/3.65.0/en-US/preview.css"
+      href="https://cdn01.boxcdn.net/platform/preview/3.66.0/en-US/preview.css"
     />
   </head>
   <body>
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
 1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
-- Check out a specific version with `git checkout v3.65.0`
+- Check out a specific version with `git checkout v3.66.0`
 - Download a specific version as a zip from https://github.com/box/box-content-preview/releases
 2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`

package/dist/lib/index.css CHANGED Viewed

@@ -29,7 +29,7 @@
 .bp-ControlsBar{display:flex;align-items:center;height:48px;padding:0 2px;background:rgba(0,0,0,.8);border-radius:46px}.bp-ControlsBar:empty{display:none}.bp-ControlsBar+.bp-ControlsBar{position:absolute;left:100%;margin-left:6px}
 .bp-ControlsBarGroup{display:flex;gap:4px;align-items:center;margin-left:6px}.bp-ControlsBarGroup:empty{display:none}.bp-ControlsBarGroup:last-child{margin-right:6px}.bp-ControlsBarGroup--distinct{height:32px;background-color:rgba(78,78,78,.8);border-radius:54px}
 .bp-ColorPickerPalette{display:flex;align-items:center;justify-content:center;padding:0 8px;background:rgba(0,0,0,.8);border-radius:54px}.bp-ColorPickerPalette-button{width:20px;height:20px;margin:10px 2px;padding:0;border:none;border-radius:54px;cursor:pointer}.bp-ColorPickerPalette-button:focus,.bp-ColorPickerPalette-button:hover{outline:0;box-shadow:0 0 0 2px #fff}
-.bp-ColorPickerControl{position:relative;display:flex;align-items:center;justify-content:center;padding:0 6px}.bp-ColorPickerControl-toggle{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;padding:4px 0 4px 5px}.bp-ColorPickerControl-toggle:focus:not(:disabled),.bp-ColorPickerControl-toggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ColorPickerControl-toggle:focus:not(:disabled) svg,.bp-ColorPickerControl-toggle:hover:not(:disabled) svg,.bp-ColorPickerControl-toggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ColorPickerControl-toggle.bp-is-active,.bp-ColorPickerControl-toggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ColorPickerControl-toggle.bp-is-active:focus:not(:disabled),.bp-ColorPickerControl-toggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ColorPickerControl-toggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ColorPickerControl-toggle: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-ColorPickerControl-toggle:focus:not(:focus-visible){box-shadow:none}.bp-ColorPickerControl-toggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ColorPickerControl-toggle svg{width:32px;height:32px;padding:5px}.bp-ColorPickerControl-toggle svg{width:24px;height:24px}.bp-ColorPickerControl-toggle.bp-is-active .bp-ColorPickerControl-toggle,.bp-ColorPickerControl-toggle:focus .bp-ColorPickerControl-toggle,.bp-ColorPickerControl-toggle:hover .bp-ColorPickerControl-toggle{padding:8px;background-color:#444;border-radius:54px}.bp-ColorPickerControl-palette{position:absolute;top:-12px;left:50%;z-index:1;display:none;padding-bottom:10px;transform:translate(-50%, -100%)}.bp-ColorPickerControl-palette::after{position:absolute;left:50%;display:block;border-top:12px solid rgba(0,0,0,.8);border-right:12px solid transparent;border-left:12px solid transparent;transform:translateX(-50%);content:""}.bp-ColorPickerControl-palette.bp-is-open{display:block}.bp-ColorPickerControl-toggle-swatch{width:18px;height:18px;border:2px solid #fff;border-radius:25px}
+.bp-ColorPickerControl{position:relative;display:flex;align-items:center;justify-content:center;padding:0 6px}.bp-ColorPickerControl-toggle{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;padding:4px 0 4px 5px}.bp-ColorPickerControl-toggle:focus:not(:disabled),.bp-ColorPickerControl-toggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ColorPickerControl-toggle:focus:not(:disabled) svg,.bp-ColorPickerControl-toggle:hover:not(:disabled) svg,.bp-ColorPickerControl-toggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ColorPickerControl-toggle.bp-is-active,.bp-ColorPickerControl-toggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ColorPickerControl-toggle.bp-is-active:focus:not(:disabled),.bp-ColorPickerControl-toggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ColorPickerControl-toggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ColorPickerControl-toggle: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-ColorPickerControl-toggle:focus:not(:focus-visible){box-shadow:none}.bp-ColorPickerControl-toggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ColorPickerControl-toggle svg{width:32px;height:32px;padding:5px}.bp-ColorPickerControl-toggle svg{width:24px;height:24px}.bp-ColorPickerControl-toggle.bp-is-active .bp-ColorPickerControl-toggle,.bp-ColorPickerControl-toggle:focus .bp-ColorPickerControl-toggle,.bp-ColorPickerControl-toggle:hover .bp-ColorPickerControl-toggle{padding:8px;background-color:#444;border-radius:54px}.bp-ColorPickerControl-palette{position:absolute;top:-12px;left:50%;z-index:1;padding-bottom:10px;transform:translate(-50%, -100%) scale(0.95);transform-origin:bottom center;visibility:hidden;opacity:0;transition:opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),transform 160ms cubic-bezier(0.23, 1, 0.32, 1),visibility 0s linear 160ms}.bp-ColorPickerControl-palette::after{position:absolute;left:50%;display:block;border-top:12px solid rgba(0,0,0,.8);border-right:12px solid transparent;border-left:12px solid transparent;transform:translateX(-50%);content:""}.bp-ColorPickerControl-palette.bp-is-open{transform:translate(-50%, -100%) scale(1);visibility:visible;opacity:1;transition:opacity 160ms cubic-bezier(0.23, 1, 0.32, 1),transform 160ms cubic-bezier(0.23, 1, 0.32, 1),visibility 0s linear 0s}@media(prefers-reduced-motion: reduce){.bp-ColorPickerControl-palette{transform:translate(-50%, -100%);transition:opacity 160ms linear,visibility 0s linear 160ms}.bp-ColorPickerControl-palette.bp-is-open{transform:translate(-50%, -100%);transition:opacity 160ms linear,visibility 0s linear 0s}}.bp-ColorPickerControl-toggle-swatch{width:18px;height:18px;border:2px solid #fff;border-radius:25px}
 .bp-FullscreenToggle{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-FullscreenToggle:focus:not(:disabled),.bp-FullscreenToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-FullscreenToggle:focus:not(:disabled) svg,.bp-FullscreenToggle:hover:not(:disabled) svg,.bp-FullscreenToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-FullscreenToggle.bp-is-active,.bp-FullscreenToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-FullscreenToggle.bp-is-active:focus:not(:disabled),.bp-FullscreenToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-FullscreenToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FullscreenToggle: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-FullscreenToggle:focus:not(:focus-visible){box-shadow:none}.bp-FullscreenToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-FullscreenToggle svg{width:32px;height:32px;padding:5px}
 .bp-RotateControl{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-RotateControl:focus:not(:disabled),.bp-RotateControl:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-RotateControl:focus:not(:disabled) svg,.bp-RotateControl:hover:not(:disabled) svg,.bp-RotateControl.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-RotateControl.bp-is-active,.bp-RotateControl:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-RotateControl.bp-is-active:focus:not(:disabled),.bp-RotateControl.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-RotateControl:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-RotateControl: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-RotateControl:focus:not(:focus-visible){box-shadow:none}.bp-RotateControl:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-RotateControl svg{width:32px;height:32px;padding:5px}
 .bp-ZoomControls{display:flex;align-items:center;padding:0 6px;border-radius:46px}.bp-ZoomControls-button{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;margin-top:-6px;margin-bottom:-6px}.bp-ZoomControls-button:focus:not(:disabled),.bp-ZoomControls-button:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ZoomControls-button:focus:not(:disabled) svg,.bp-ZoomControls-button:hover:not(:disabled) svg,.bp-ZoomControls-button.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ZoomControls-button.bp-is-active,.bp-ZoomControls-button:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ZoomControls-button.bp-is-active:focus:not(:disabled),.bp-ZoomControls-button.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ZoomControls-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-ZoomControls-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-ZoomControls-button:focus:not(:focus-visible){box-shadow:none}.bp-ZoomControls-button:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ZoomControls-button svg{width:32px;height:32px;padding:5px}.bp-ZoomControls-button svg{width:24px;height:24px}.bp-ZoomControls-current{display:flex;align-items:center;justify-content:center;min-width:44px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;line-height:1;white-space:nowrap;opacity:.9;-webkit-user-select:none;user-select:none}
@@ -81,7 +81,7 @@
 .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}
 .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}
 .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}
-.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}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow-x:hidden;overflow-y:hidden}
+.bp-gallery-grid{position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;display:grid;grid-auto-rows:min-content;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,transform .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15);transform:translateY(-1px) scale(1.02)}.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}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow-x:hidden;overflow-y:hidden}
 .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 .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .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}
 .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 .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .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}
 .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 Viewed

@@ -17416,7 +17416,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
 const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
 const CLIENT_NAME_KEY = 'box_client_name';
 const CLIENT_VERSION_KEY = 'box_client_version';
-const CLIENT_VERSION = "3.65.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.66.0"; // eslint-disable-line no-undef
 const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
 const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
 const PROMISE_MAP = {};
@@ -19141,7 +19141,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const Logger_CLIENT_NAME = "box-content-preview";
-const Logger_CLIENT_VERSION = "3.65.0";
+const Logger_CLIENT_VERSION = "3.66.0";
 /* eslint-enable no-undef */
 class Logger {
@@ -21811,13 +21811,20 @@ function ControlsLayer(_ref) {
   // Destroy timeouts on unmount
   __WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => helpersRef.current.clean, []);
+  // Keep a stable identity so consumers can safely depend on it (e.g. ColorPickerControl pins the layer
+  // from an effect keyed on this function). An inline value here handed down a fresh function every render,
+  // which retriggered that effect's cleanup and instantly un-pinned the layer — the palette faded out the
+  // moment the cursor left it.
+  const setIsForcedWithReset = __WEBPACK_EXTERNAL_MODULE_react_default__.useCallback(value => {
+    helpersRef.current.reset();
+    setIsForced(value);
+  }, []);
+  const contextValue = __WEBPACK_EXTERNAL_MODULE_react_default__.useMemo(() => ({
+    setIsForced: setIsForcedWithReset
+  }), [setIsForcedWithReset]);
   return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ControlsLayerContext.Provider, {
-    value: {
-      setIsForced: value => {
-        helpersRef.current.reset();
-        setIsForced(value);
-      }
-    }
+    value: contextValue
   }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
     className: `bp-ControlsLayer ${isShown || isForced ? SHOW_CLASSNAME : ''}`,
     "data-testid": "bp-ControlsLayer",
@@ -22676,8 +22683,11 @@ function IconPencilScribbleMedium24(_ref) {
     viewBox: "0 0 24 24",
     width: "1em"
   }, rest), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_createElement__("path", {
-    d: "M20.175 13.013c.301-.069.713-.118 1.114.026.25.09.44.255.566.444l.05.082.09.195c.178.459.124.927.037 1.277-.105.416-.302.842-.518 1.236-.434.79-1.066 1.663-1.61 2.42-.308.427-.581.808-.801 1.137a4.124 4.124 0 0 0 1.69-1.037 1 1 0 0 1 1.414 1.413C21.025 21.39 19.514 22 18 22c-.219 0-.517-.034-.8-.205a1.254 1.254 0 0 1-.583-.829 1.606 1.606 0 0 1 .034-.73c.05-.19.127-.375.208-.54.304-.627.89-1.434 1.421-2.172.564-.782 1.111-1.546 1.474-2.204-.5.262-1.111.652-1.794 1.163-1.6 1.197-3.503 2.987-5.17 5.13a1 1 0 1 1-1.579-1.227c1.78-2.287 3.81-4.203 5.551-5.505.868-.649 1.69-1.164 2.39-1.496a5.103 5.103 0 0 1 1.023-.372Zm-3.75-10.306a3.001 3.001 0 0 1 4.242 0l.626.626a3 3 0 0 1 0 4.243l-2.04 2.04-9.249 9.248a4.004 4.004 0 0 1-1.305.87L4.49 21.467c-1.232.508-2.465-.725-1.958-1.958L4.265 15.3c.201-.488.498-.932.871-1.305l9.248-9.247 2.04-2.041ZM6.55 15.41a2.002 2.002 0 0 0-.436.652l-1.276 3.099 3.1-1.276c.244-.1.465-.249.652-.435l8.541-8.541-2.04-2.04-8.541 8.54ZM19.252 4.12a1 1 0 0 0-1.414 0l-1.334 1.334 2.041 2.04 1.334-1.332a1 1 0 0 0 0-1.414l-.627-.627Z",
+    d: "M16.425 2.707a3.001 3.001 0 0 1 4.242 0l.626.626a3 3 0 0 1 0 4.243l-2.04 2.04-9.249 9.248a4.004 4.004 0 0 1-1.305.87L4.49 21.467c-1.232.508-2.465-.725-1.958-1.958L4.265 15.3c.201-.488.498-.932.871-1.305l9.248-9.247 2.04-2.041ZM6.55 15.41a2.002 2.002 0 0 0-.436.652l-1.276 3.099 3.1-1.276c.244-.1.465-.249.652-.435l8.541-8.541-2.04-2.04-8.541 8.54ZM19.252 4.12a1 1 0 0 0-1.414 0l-1.334 1.334 2.041 2.04 1.334-1.332a1 1 0 0 0 0-1.414l-.627-.627Z",
     fill: "#fff"
+  }), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_createElement__("path", {
+    d: "M20.175 13.013c.301-.069.713-.118 1.114.026.25.09.44.255.566.444l.05.082.09.195c.178.459.124.927.037 1.277-.105.416-.302.842-.518 1.236-.434.79-1.066 1.663-1.61 2.42-.308.427-.581.808-.801 1.137a4.124 4.124 0 0 0 1.69-1.037 1 1 0 0 1 1.414 1.413C21.025 21.39 19.514 22 18 22c-.219 0-.517-.034-.8-.205a1.254 1.254 0 0 1-.583-.829 1.606 1.606 0 0 1 .034-.73c.05-.19.127-.375.208-.54.304-.627.89-1.434 1.421-2.172.564-.782 1.111-1.546 1.474-2.204-.5.262-1.111.652-1.794 1.163-1.6 1.197-3.503 2.987-5.17 5.13a1 1 0 1 1-1.579-1.227c1.78-2.287 3.81-4.203 5.551-5.505.868-.649 1.69-1.164 2.39-1.496a5.103 5.103 0 0 1 1.023-.372Z",
+    fill: "currentColor"
   }));
 }
 /* harmony default export */ const icons_IconPencilScribbleMedium24 = (IconPencilScribbleMedium24);
@@ -22849,7 +22859,11 @@ function AnnotationsControls(_ref) {
     mode: AnnotationMode.DRAWING,
     onClick: handleModeClick,
     title: "Markup"
-  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconPencilScribbleMedium24, null)), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(annotations_AnnotationsTargetedTooltip, {
+  }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconPencilScribbleMedium24, {
+    style: {
+      color: annotationColor
+    }
+  })), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(annotations_AnnotationsTargetedTooltip, {
     isEnabled: showRegion
   }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(annotations_AnnotationsButton, {
     ref: annotationBtnRefs[AnnotationMode.REGION],
@@ -22922,7 +22936,6 @@ function ControlsBarGroup(_ref) {
 function ColorPickerPalette(_ref) {
   let {
     colors,
-    onBlur,
     onSelect
   } = _ref;
   return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
@@ -22932,7 +22945,6 @@ function ColorPickerPalette(_ref) {
       key: color,
       className: "bp-ColorPickerPalette-button",
       "data-resin-target": "colorSelect",
-      onBlur: onBlur,
       onClick: () => onSelect(color),
       style: {
         backgroundColor: color
@@ -22975,6 +22987,25 @@ function IconChevronUpMedium24(props) {
   }));
 }
 /* harmony default export */ const icons_IconChevronUpMedium24 = (IconChevronUpMedium24);
+;// ./src/lib/viewers/controls/hooks/useClickOutside.ts
+function useClickOutside(element, callback) {
+  __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
+    const handleDocumentClick = _ref => {
+      let {
+        target
+      } = _ref;
+      if (element && element.current && element.current.contains(target)) {
+        return;
+      }
+      callback();
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return () => {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  }, [callback, element]);
+}
 ;// ./src/lib/viewers/controls/color-picker/ColorPickerControl.scss
 // extracted by mini-css-extract-plugin
@@ -22990,6 +23021,8 @@ function ColorPickerControl_objectWithoutPropertiesLoose(r, e) { if (null == r)
 function ColorPickerControl(_ref) {
   let {
       activeColor = __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__,
@@ -22997,56 +23030,47 @@ function ColorPickerControl(_ref) {
       onColorSelect
     } = _ref,
     rest = ColorPickerControl_objectWithoutProperties(_ref, ColorPickerControl_excluded);
-  const paletteRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
-  const toggleRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
+  const controlRef = __WEBPACK_EXTERNAL_MODULE_react_default__.useRef(null);
+  const {
+    setIsForced
+  } = __WEBPACK_EXTERNAL_MODULE_react_default__.useContext(ControlsLayerContext);
   const [isColorPickerToggled, setIsColorPickerToggled] = __WEBPACK_EXTERNAL_MODULE_react_default__.useState(false);
   const handleSelect = color => {
     setIsColorPickerToggled(false);
     onColorSelect(color);
   };
-  const handleBlur = _ref2 => {
-    let {
-      relatedTarget
-    } = _ref2;
-    const {
-      current: paletteEl
-    } = paletteRef;
-    const {
-      current: toggleEl
-    } = toggleRef;
-    // IE11 does not have relatedTarget but update activeElement before blur
-    const nextTarget = relatedTarget || document.activeElement;
-    const nextEl = nextTarget ? nextTarget : null;
-    const isNextInPalette = paletteEl && paletteEl.contains(nextEl);
-    const isNextToggle = toggleEl && toggleEl === nextEl;
-    if (isNextInPalette || isNextToggle) {
-      return;
-    }
-    setIsColorPickerToggled(false);
-  };
   const handleClick = () => setIsColorPickerToggled(!isColorPickerToggled);
-  const handleMouseDown = event => {
-    if (event.currentTarget.focus) {
-      // Buttons do not receive focus in Firefox and Safari on MacOS
-      event.currentTarget.focus();
-      // When focus is called within a mousedown handler,
-      // preventDefault must be called to keep the focus from leaving the target
-      event.preventDefault();
+  useClickOutside(controlRef, () => setIsColorPickerToggled(false));
+  __WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => {
+    if (!isColorPickerToggled) {
+      return undefined;
     }
-  };
+    const handleKeyDown = event => {
+      if (event.key === 'Escape') {
+        setIsColorPickerToggled(false);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isColorPickerToggled]);
+  // Pin the auto-hiding ControlsLayer open while the palette is up so its ~2s hide timer can't tear the
+  // palette down when the cursor merely drifts off the swatches; release the pin on close or unmount.
+  __WEBPACK_EXTERNAL_MODULE_react_default__.useEffect(() => {
+    setIsForced(isColorPickerToggled);
+    return () => setIsForced(false);
+  }, [isColorPickerToggled, setIsForced]);
   return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
+    ref: controlRef,
     className: "bp-ColorPickerControl",
     "data-testid": "bp-color-picker-control"
   }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("button", ColorPickerControl_extends({
-    ref: toggleRef,
     className: classnames_default()('bp-ColorPickerControl-toggle', {
       'bp-is-active': isColorPickerToggled
     }),
     "data-resin-target": "colorPickerOpen",
     "data-testid": "bp-ColorPickerControl-toggle",
-    onBlur: handleBlur,
     onClick: handleClick,
-    onMouseDown: handleMouseDown,
     type: "button"
   }, rest), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
     className: "bp-ColorPickerControl-toggle-background"
@@ -23056,7 +23080,6 @@ function ColorPickerControl(_ref) {
       backgroundColor: activeColor
     }
   })), isColorPickerToggled ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconChevronUpMedium24, null) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(icons_IconChevronDownMedium24, null)), /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
-    ref: paletteRef,
     className: classnames_default()('bp-ColorPickerControl-palette', {
       'bp-is-open': isColorPickerToggled
     }),
@@ -23064,7 +23087,6 @@ function ColorPickerControl(_ref) {
   }, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(ColorPickerPalette, {
     colors: colors,
     "data-testid": "bp-ColorPickerPalette",
-    onBlur: handleBlur,
     onSelect: handleSelect
   })));
 }
@@ -32056,25 +32078,6 @@ function SettingsList(props, ref) {
   }));
 }
 /* harmony default export */ const settings_SettingsList = (/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.forwardRef(SettingsList));
-;// ./src/lib/viewers/controls/hooks/useClickOutside.ts
-function useClickOutside(element, callback) {
-  __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
-    const handleDocumentClick = _ref => {
-      let {
-        target
-      } = _ref;
-      if (element && element.current && element.current.contains(target)) {
-        return;
-      }
-      callback();
-    };
-    document.addEventListener('click', handleDocumentClick);
-    return () => {
-      document.removeEventListener('click', handleDocumentClick);
-    };
-  }, [callback, element]);
-}
 ;// ./src/lib/viewers/controls/settings/SettingsDropdown.scss
 // extracted by mini-css-extract-plugin
@@ -39702,7 +39705,6 @@ function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 const GALLERY_THUMB_MAX_WIDTH = 440;
-const INITIAL_LOAD_BUFFER = 40;
 const CONCURRENT_LOADS = 4;
 const SCROLL_THROTTLE_MS = 200;
 const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(function GalleryTile(_ref) {
@@ -39711,8 +39713,13 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
     isFocused,
     imageSrc,
     onClick,
-    onFocus
+    onFocus,
+    pageRatio
   } = _ref;
+  // Match the placeholder to the real page shape so tiles don't resize (reflow/jitter) as images arrive
+  const placeholderStyle = pageRatio ? {
+    paddingTop: `${100 / pageRatio}%`
+  } : undefined;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
@@ -39731,7 +39738,8 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
       alt: "",
       src: imageSrc
     }) : /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
-      className: "bp-gallery-tile-placeholder"
+      className: "bp-gallery-tile-placeholder",
+      style: placeholderStyle
     }))
   );
 });
@@ -39739,6 +39747,7 @@ function GalleryGrid(_ref2) {
   let {
     pageCount,
     currentPage,
+    getPageRatio,
     onClose,
     onFocusChange,
     onPageNavigate,
@@ -39746,20 +39755,53 @@ function GalleryGrid(_ref2) {
   } = _ref2;
   const [loadedImages, setLoadedImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
   const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
+  const [pageRatio, setPageRatio] = __WEBPACK_EXTERNAL_MODULE_react_useState__(null);
+  // Topmost visible page — the scroll anchor used to restore the viewed area after a reflow.
+  const anchorPageRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(currentPage);
   const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
   const queueRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__([]);
   const isProcessingRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
   const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
-  const initialLoadDoneRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
-  const initialLoadCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(0);
+  const inFlightRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(new Set());
+  const byDistanceFromAnchor = (a, b) => Math.abs(a - anchorPageRef.current) - Math.abs(b - anchorPageRef.current);
+  // Unloaded tiles within viewport + buffer, on-screen tiles first so the user never
+  // watches a visible hole while off-screen pages load. Pages already being rendered
+  // (in flight) are excluded so re-derives can't waste loader slots on them.
+  function getUnloadedNearViewport() {
+    const grid = gridRef.current;
+    if (!grid) return [];
+    const {
+      scrollTop,
+      clientHeight
+    } = grid;
+    const bufferZone = clientHeight * 3;
+    const viewportBottom = scrollTop + clientHeight;
+    const visibleUnloaded = [];
+    const bufferedUnloaded = [];
+    const tiles = grid.querySelectorAll('[data-page]');
+    tiles.forEach(tile => {
+      const el = tile;
+      if (!el.dataset.page) return;
+      const pageNum = parseInt(el.dataset.page, 10);
+      if (inFlightRef.current.has(pageNum) || el.querySelector('img')) return;
+      const tileTop = el.offsetTop;
+      const tileBottom = tileTop + el.offsetHeight;
+      if (tileBottom > scrollTop && tileTop < viewportBottom) {
+        visibleUnloaded.push(pageNum);
+      } else if (tileBottom > scrollTop - bufferZone && tileTop < viewportBottom + bufferZone) {
+        bufferedUnloaded.push(pageNum);
+      }
+    });
+    return [...visibleUnloaded.sort(byDistanceFromAnchor), ...bufferedUnloaded.sort(byDistanceFromAnchor)];
+  }
   function processQueue() {
     if (!isMountedRef.current || !thumbnail || queueRef.current.length === 0) {
       isProcessingRef.current = false;
       return;
     }
-    const batchSize = initialLoadDoneRef.current ? CONCURRENT_LOADS : 1;
-    const batch = queueRef.current.slice(0, batchSize);
-    queueRef.current = queueRef.current.slice(batchSize);
+    const batch = queueRef.current.slice(0, CONCURRENT_LOADS);
+    queueRef.current = queueRef.current.slice(CONCURRENT_LOADS);
     requestAnimationFrame(() => {
       if (!isMountedRef.current || !thumbnail) {
         isProcessingRef.current = false;
@@ -39773,21 +39815,25 @@ function GalleryGrid(_ref2) {
           isProcessingRef.current = false;
           return;
         }
-        if (!initialLoadDoneRef.current) {
-          initialLoadCountRef.current += batch.length;
-          if (initialLoadCountRef.current >= INITIAL_LOAD_BUFFER) {
-            initialLoadDoneRef.current = true;
-            isProcessingRef.current = false;
-            return;
-          }
+        // Keep only what the viewport + buffer still needs, then go idle. This prune is
+        // what makes loading lazy (the mount queue starts as the whole document); the
+        // scroll/resize handlers re-derive what to load on demand after that.
+        const remaining = new Set(queueRef.current);
+        queueRef.current = getUnloadedNearViewport().filter(p => remaining.has(p));
+        if (queueRef.current.length === 0) {
+          isProcessingRef.current = false;
+          return;
         }
         processQueue();
       };
       batch.forEach(pageNum => {
+        inFlightRef.current.add(pageNum);
         thumbnail.createThumbnailImage(pageNum - 1, {
           createImgTag: true,
           thumbMaxWidth: GALLERY_THUMB_MAX_WIDTH
         }).then(imageEl => {
+          inFlightRef.current.delete(pageNum);
           if (isMountedRef.current && imageEl && imageEl.src) {
             setLoadedImages(prev => GalleryGrid_objectSpread(GalleryGrid_objectSpread({}, prev), {}, {
               [pageNum]: imageEl.src
@@ -39795,6 +39841,7 @@ function GalleryGrid(_ref2) {
           }
           onComplete();
         }).catch(() => {
+          inFlightRef.current.delete(pageNum);
           onComplete();
         });
       });
@@ -39806,39 +39853,35 @@ function GalleryGrid(_ref2) {
       processQueue();
     }
   }
-  function getUnloadedNearViewport() {
-    const grid = gridRef.current;
-    if (!grid) return [];
-    const {
-      scrollTop,
-      clientHeight
-    } = grid;
-    const bufferZone = clientHeight * 3;
-    const viewportTop = scrollTop - bufferZone;
-    const viewportBottom = scrollTop + clientHeight + bufferZone;
-    const nearbyUnloaded = [];
-    const tiles = grid.querySelectorAll('[data-page]');
-    tiles.forEach(tile => {
-      const el = tile;
-      if (!el.dataset.page) return;
-      const pageNum = parseInt(el.dataset.page, 10);
-      const tileTop = el.offsetTop;
-      const tileBottom = tileTop + el.offsetHeight;
-      if (tileBottom > viewportTop && tileTop < viewportBottom && !el.querySelector('img')) {
-        nearbyUnloaded.push(pageNum);
-      }
-    });
-    return nearbyUnloaded;
-  }
   const handleScrollRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(throttle_default()(() => {
     const nearbyUnloaded = getUnloadedNearViewport();
     if (nearbyUnloaded.length > 0) {
-      const currentQueue = queueRef.current;
-      const toAdd = nearbyUnloaded.filter(p => !currentQueue.includes(p));
-      queueRef.current = [...toAdd, ...currentQueue];
+      const currentQueue = new Set(queueRef.current);
+      const toAdd = nearbyUnloaded.filter(p => !currentQueue.has(p));
+      queueRef.current = [...toAdd, ...queueRef.current];
       startProcessing();
     }
   }, SCROLL_THROTTLE_MS));
+  // Unthrottled so the anchor is accurate the instant a reflow (e.g. fullscreen) happens.
+  const handleScroll = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(() => {
+    const grid = gridRef.current;
+    if (grid) {
+      const tiles = grid.querySelectorAll('[data-page]');
+      for (let i = 0; i < tiles.length; i += 1) {
+        if (tiles[i].offsetTop + tiles[i].offsetHeight > grid.scrollTop) {
+          const {
+            page
+          } = tiles[i].dataset;
+          if (page) {
+            anchorPageRef.current = parseInt(page, 10);
+          }
+          break;
+        }
+      }
+    }
+    handleScrollRef.current();
+  }, []);
   __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
     const throttledScroll = handleScrollRef.current;
     if (gridRef.current) {
@@ -39856,7 +39899,6 @@ function GalleryGrid(_ref2) {
       const cached = thumbnail.getImageFromCache(i - 1);
       if (cached && cached.image && cached.image.src) {
         initialImages[i] = cached.image.src;
-        initialLoadCountRef.current += 1;
       } else {
         uncachedPages.push(i);
       }
@@ -39868,8 +39910,12 @@ function GalleryGrid(_ref2) {
     queueRef.current = uncachedPages;
     thumbnail.init().then(() => {
       if (!isMountedRef.current) return;
-      isProcessingRef.current = true;
-      processQueue();
+      if (typeof thumbnail.pageRatio === 'number' && thumbnail.pageRatio > 0) {
+        setPageRatio(thumbnail.pageRatio);
+      }
+      // Guarded start: the mount scrollIntoView can fire the scroll handler first, and a
+      // second unguarded pump would double the concurrent thumbnail renders.
+      startProcessing();
     });
     return () => {
       isMountedRef.current = false;
@@ -39879,6 +39925,31 @@ function GalleryGrid(_ref2) {
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  // Keep the viewed area in place when the grid reflows (fullscreen enter/exit, window resize):
+  // the scroll offset is preserved while tile positions shift, drifting the view otherwise.
+  __WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
+    const grid = gridRef.current;
+    if (!grid) return undefined;
+    let isFirstObservation = true;
+    const observer = new ResizeObserver(() => {
+      if (isFirstObservation) {
+        isFirstObservation = false; // ResizeObserver always fires once on observe()
+        return;
+      }
+      const tile = grid.querySelector(`[data-page="${anchorPageRef.current}"]`);
+      if (tile) {
+        tile.scrollIntoView({
+          block: 'start'
+        });
+      }
+      // A larger viewport (fullscreen enter, window resize) can reveal unloaded tiles
+      // without any scroll event, so run the same catch-up the scroll handler does.
+      handleScrollRef.current();
+    });
+    observer.observe(grid);
+    return () => observer.disconnect();
+  }, []);
   const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
     const grid = gridRef.current;
     if (!grid) return;
@@ -39953,7 +40024,8 @@ function GalleryGrid(_ref2) {
       isFocused: i === focusedPage,
       onClick: handleTileClick,
       onFocus: handleTileFocus,
-      pageNum: i
+      pageNum: i,
+      pageRatio: getPageRatio && getPageRatio(i) || pageRatio
     }));
   }
   return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
@@ -39962,7 +40034,7 @@ function GalleryGrid(_ref2) {
     className: "bp-gallery-grid",
     onFocus: handleGridFocus,
     onKeyDown: handleGridKeyDown,
-    onScroll: handleScrollRef.current,
+    onScroll: handleScroll,
     role: "listbox",
     tabIndex: -1
   }, tiles);
@@ -40078,6 +40150,20 @@ class GalleryController {
     GalleryController_defineProperty(this, "handleFocusChange", pageNum => {
       this.galleryFocusedPage = pageNum;
     });
+    // Per-page width:height ratio from PDF.js page metadata; null until the page's metadata
+    // is fetched (see PdfViewerLike.getPageView), which matters for mixed-size docs.
+    GalleryController_defineProperty(this, "getPageRatio", pageNum => {
+      const pdfViewer = this.getPdfViewer();
+      const pageView = pdfViewer.getPageView && pdfViewer.getPageView(pageNum - 1);
+      if (!pageView || !pageView.pdfPage || !pageView.viewport) {
+        return null;
+      }
+      const {
+        width,
+        height
+      } = pageView.viewport;
+      return width > 0 && height > 0 ? width / height : null;
+    });
     this.containerEl = opts.containerEl;
     this.features = opts.features;
     this.getPdfViewer = opts.getPdfViewer;
@@ -40101,6 +40187,27 @@ class GalleryController {
     this.toggle();
     return true;
   }
+  /**
+   * Redirects an arrow key pressed outside the grid (e.g. focus parked on a toggle after
+   * toggling fullscreen) back into it: refocuses the selected tile and replays the key so
+   * the first press navigates, like the thumbnail sidebar. Keys pressed inside the grid
+   * never arrive here — GalleryGrid stops propagation on every arrow it handles.
+   */
+  handleArrowKey(key) {
+    if (!this.isGalleryOpen || !key.startsWith('Arrow')) return;
+    const grid = this.galleryEl;
+    if (!grid) return;
+    const tile = grid.querySelector('[role="option"][tabindex="0"]');
+    if (tile) {
+      tile.focus();
+      tile.dispatchEvent(new KeyboardEvent('keydown', {
+        key,
+        bubbles: true,
+        cancelable: true
+      }));
+    }
+  }
   handleRotate() {
     if (this.galleryThumbnail) {
       this.galleryThumbnail.destroy();
@@ -40159,6 +40266,7 @@ class GalleryController {
     this.galleryFocusedPage = pdfViewer.currentPageNumber;
     this.galleryRoot.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
       currentPage: pdfViewer.currentPageNumber,
+      getPageRatio: this.getPageRatio,
       onClose: this.toggle,
       onFocusChange: this.handleFocusChange,
       onPageNavigate: this.handleGalleryNavigate,
@@ -42375,8 +42483,10 @@ class DocBaseViewer extends viewers_BaseViewer {
       }
       // Swallow page-nav keys so they can't flip the doc page underneath the gallery
-      // or trigger the host's collection navigation.
+      // or trigger the host's collection navigation. Arrows pressed outside the grid
+      // are redirected into it so the first press navigates the tiles.
       if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', '[', ']'].includes(key)) {
+        this.galleryController.handleArrowKey(key);
         return true;
       }
     }
@@ -42930,7 +43040,7 @@ class DocBaseViewer extends viewers_BaseViewer {
     const canDownload = checkPermission(this.options.file, PERMISSION_DOWNLOAD);
     const isAnnotationsMode = this.currentAnnotatorViewMode === ANNOTATOR_VIEW_MODES.ANNOTATIONS;
     const canRotate = this.featureEnabled('rotate.enabled');
-    const canGallery = this.galleryController.canRender(this.pdfViewer.pagesCount);
+    const canGallery = !this.isMobile && this.galleryController.canRender(this.pdfViewer.pagesCount);
     this.controls.render( /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DocControls, {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
@@ -43201,6 +43311,10 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (this.annotator && this.areNewAnnotationsEnabled() && this.options.enableAnnotationsDiscoverability) {
       this.annotator.toggleAnnotationMode(AnnotationMode.REGION);
     }
+    // Restore focus to the toggle, the browser otherwise drops focus to the body on exit,
+    // and keyboard input (e.g. gallery arrow keys) no longer reach the viewer
+    this.fullscreenToggleEl?.focus?.();
   }
   /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "box-content-preview",
-    "version": "3.65.0",
+    "version": "3.66.0",
     "description": "Box Content Preview UI Element",
     "author": "Box (https://www.box.com/)",
     "license": "SEE LICENSE IN LICENSE",