box-content-preview 3.123.0 → 3.124.0

package/dist/lib/index.js

@@ -45,25 +45,26 @@ import * as __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7__ from "react-do
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_179142b8__ from "react/jsx-runtime";
 import { default as __WEBPACK_EXTERNAL_MODULE_axios_default__ } from "axios";
 import { bdlBoxBlue as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__, bdlGray65 as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGray65__, white as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__ } from "box-ui-elements/es/styles/variables";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_VrGoggles_9eb581be_default__ } from "@box/blueprint-web-assets/icons/Medium/VrGoggles";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_XMark_07fbe0f0_default__ } from "@box/blueprint-web-assets/icons/Medium/XMark";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Comment_c700dfbc_default__ } from "@box/blueprint-web-assets/icons/Medium/Comment";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_PencilTip_154ad3fd_default__ } from "@box/blueprint-web-assets/icons/Medium/PencilTip";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__ } from "@box/blueprint-web-assets/icons/Medium/SquarePlus";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_TCursorHighlight_508374cb_default__ } from "@box/blueprint-web-assets/icons/Medium/TCursorHighlight";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_EllipsisVertical_06d33c4b_default__ } from "@box/blueprint-web-assets/icons/Medium/EllipsisVertical";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__ } from "@box/blueprint-web-assets/icons/Medium/ArrowsMaximize";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ } from "@box/blueprint-web-assets/icons/Medium/ArrowsMinimize";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__ } from "@box/blueprint-web-assets/icons/Medium/RotateLeft";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__ } from "@box/blueprint-web-assets/icons/Medium/Minus";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__ } from "@box/blueprint-web-assets/icons/Medium/Plus";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronDown";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronUp_d399c022_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronUp";
+import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_VrGoggles_9eb581be_default__ } from "@box/blueprint-web-assets/icons/Medium/VrGoggles";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_CheckmarkCircle_e8bd4624_default__ } from "@box/blueprint-web-assets/icons/Medium/CheckmarkCircle";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_PencilTip_154ad3fd_default__ } from "@box/blueprint-web-assets/icons/Medium/PencilTip";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__ } from "@box/blueprint-web-assets/icons/Medium/SquarePlus";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_TCursorHighlight_508374cb_default__ } from "@box/blueprint-web-assets/icons/Medium/TCursorHighlight";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Comment_c700dfbc_default__ } from "@box/blueprint-web-assets/icons/Medium/Comment";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_GridView_ac92b674_default__ } from "@box/blueprint-web-assets/icons/Medium/GridView";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Nav_d41e959a_default__ } from "@box/blueprint-web-assets/icons/Medium/Nav";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__ } from "@box/blueprint-web-assets/icons/Medium/RotateLeft";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Search_ef3e4aba_default__ } from "@box/blueprint-web-assets/icons/Medium/Search";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_XMark_07fbe0f0_default__ } from "@box/blueprint-web-assets/icons/Medium/XMark";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_EllipsisVertical_06d33c4b_default__ } from "@box/blueprint-web-assets/icons/Medium/EllipsisVertical";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronDown";
-import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronUp_d399c022_default__ } from "@box/blueprint-web-assets/icons/Medium/ChevronUp";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_Nav_ae6d790f_default__ } from "@box/blueprint-web-assets/icons/MediumFilled/Nav";
+import { Search as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Fill_15c08185_Search__ } from "@box/blueprint-web-assets/icons/Fill";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_Pause_0cc1f701_default__ } from "@box/blueprint-web-assets/icons/MediumFilled/Pause";
 import { default as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_Play_ee47c078_default__ } from "@box/blueprint-web-assets/icons/MediumFilled/Play";
 import { PreviewLoading as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_PreviewLoading__, getIcon as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_components_preview_386c8d2b_getIcon__ } from "box-ui-elements/es/components/preview";
@@ -412,6 +413,87 @@ class PreviewError extends Error {
 
 /***/ },
 
+/***/ 2459
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  Ay: () => (/* binding */ TabularDigits),
+  k7: () => (/* binding */ renderTabularDigits)
+});
+
+// UNUSED EXPORTS: TABULAR_DIGIT_CLASS
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+;// ./src/lib/TabularDigits.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/TabularDigits.tsx
+
+
+
+// The Inter subset served to the app has no tabular figures, so `font-variant-numeric: tabular-nums`
+// has no effect. Wrapping each digit in a 1ch box keeps changing numbers, and whatever follows them,
+// from shifting as they update.
+const TABULAR_DIGIT_CLASS = 'bp-TabularDigit';
+const isDigit = char => char >= '0' && char <= '9';
+const isDigitNode = node => node.nodeType === Node.ELEMENT_NODE;
+
+/**
+ * Writes `text` into `el` with each digit in a fixed-width box. For labels updated outside React,
+ * e.g. on animation frames. Unchanged characters are left in place, so a ticking clock only touches
+ * the digits that changed.
+ */
+function renderTabularDigits(el, text) {
+  if (el.textContent === text) {
+    return;
+  }
+  const chars = Array.from(text);
+  const nodes = el.childNodes;
+  const canPatch = nodes.length === chars.length && chars.every((char, index) => isDigit(char) === isDigitNode(nodes[index]));
+  if (canPatch) {
+    chars.forEach((char, index) => {
+      if (nodes[index].textContent !== char) {
+        nodes[index].textContent = char;
+      }
+    });
+    return;
+  }
+  const fragment = document.createDocumentFragment();
+  chars.forEach(char => {
+    if (isDigit(char)) {
+      const digitEl = document.createElement('span');
+      digitEl.className = TABULAR_DIGIT_CLASS;
+      digitEl.textContent = char;
+      fragment.appendChild(digitEl);
+    } else {
+      fragment.appendChild(document.createTextNode(char));
+    }
+  });
+  el.replaceChildren(fragment);
+}
+/**
+ * Renders `children` with each digit in a fixed-width box. Place it inside the element that
+ * provides the typography, e.g. `<Text as="span"><TabularDigits>{label}</TabularDigits></Text>`.
+ */
+function TabularDigits({
+  children
+}) {
+  const elRef = external_react_["default"].useRef(null);
+  external_react_["default"].useLayoutEffect(() => {
+    if (elRef.current) {
+      renderTabularDigits(elRef.current, children);
+    }
+  }, [children]);
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    ref: elRef
+  });
+}
+
+/***/ },
+
 /***/ 9130
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -1112,7 +1194,7 @@ const DEFAULT_LANGUAGE = 'en-US';
 const MESSAGE_KEY_PREFIX = 'bcp.';
 
 // Only the npm build defines __BCP_DEFAULT_MESSAGES__; the CDN build bakes strings in per locale.
-const defaultStrings = (0,_isNpmBuild__WEBPACK_IMPORTED_MODULE_0__/* .isNpmBuild */ .w)() ? {"rotate_left":"Rotate left","zoom_current_scale":"Current zoom level","zoom_in":"Zoom in","zoom_out":"Zoom out","enter_fullscreen":"Enter fullscreen","exit_fullscreen":"Exit fullscreen","controls_more":"More options","controls_find":"Find","controls_rotate_document":"Rotate document","controls_zoom_scale":"Zoom: {1}","controls_view_as_grid":"View as grid","controls_show_thumbnails":"View thumbnails","controls_hide_thumbnails":"Hide thumbnails","controls_shortcut_ctrl":"Ctrl + {1}","drawing_comment":"Markup","region_comment":"Comment on Region","highlight_text":"Highlight and Comment","exit_annotations":"Exit Annotations","annotation_tools":"Comment and markup","drawing_color":"Drawing color","drawing_color_blue":"Blue","drawing_color_green":"Green","drawing_color_red":"Red","drawing_color_orange":"Orange","drawing_color_yellow":"Yellow","drawing_color_purple":"Purple","previous_page":"Previous page","enter_page_num":"Click to enter page number","next_page":"Next page","download":"Download","print":"Print","print_notification":"Please press the print button to get a printable version of this document.","print_loading":"Preparing to print...","print_ready":"Ready to print.","print_close":"Close print dialog","previous_file":"Previous file","logo":"Logo","next_file":"Next file","loading_preview":"Loading Preview...","download_file":"Download File","text_truncated":"This file has been truncated due to size limits. Please download to view the whole file.","toggle_findbar":"Toggle findbar","toggle_thumbnails":"Toggle thumbnails","gallery_view":"Gallery view","page_gallery":"Page gallery","page_gallery_tile":"Page {1}","has_x_refs":"This preview has references you cannot view. Open the file in its native application.","find_next":"Find next","find_previous":"Find previous","find_close":"Close","find_label":"Search input","thumbnail_label":"Page thumbnails","file_preview_label":"File preview","comparison_banner_current":"Current version","comparison_banner_previous":"Previous version","comparison_banner_version":"Version {1}","comparison_banner_actions":"More actions","comparison_banner_open_full_preview":"Open Full Preview","comparison_banner_close":"Close","comparison_banner_make_current":"Make Current","comparison_banner_delete":"Delete","error_generic":"This preview didn’t load. Please try to open or download the file to view.","error_unsupported":"This preview didn’t load because the file type is unsupported. Please try to open or download the file to view.","error_account":"This preview didn’t load because your account is unable to preview this file type. Please try to open or download the file to view.","error_permissions":"This preview didn’t load because you don’t have permission. Please ask the file owner to update permissions.","error_refresh":"This preview didn’t load. Please try to open or download the file to view.","error_rate_limit":"This preview didn’t load because your request was rate limited. Please try to open or download the file to view.","error_reupload":"This preview didn’t load. Please try to open or download the file to view.","error_browser_unsupported":"Your browser doesn’t support preview for {1}. Please try to open or download the file to view.","error_document":"This preview didn’t load because the document may be protected. Please try to open or download the file to view.","error_password_protected":"This preview didn’t load because the document is protected. Please try to open or download the file to view.","error_try_again_later":"This preview didn’t load. Please refresh the page or download file to view.","error_bad_file":"This preview didn’t load. Please try to open or download the file to view.","error_not_downloadable":"Something seems to be wrong with this file. Please refresh the page, and if the issue continues, try to upload a new version.","error_flash_not_enabled":"This preview didn’t load because Flash is not enabled on your browser. Please try to enable Flash or download the file to view.","error_internet_explorer_office_online":"This version of Internet Explorer is out of date and the experience may be degraded. Please try switching to a different browser for a better experience.","error_large_file":"File exceeds supported size for preview. Open or download the file to view.","error_too_many_operations":"The file is too complex to display in your browser. Please download it to view.","error_zero_byte_file":"Cannot preview 0 B file. Open or download the file to view.","filename":"Name","last_modified_date":"Modified","size":"Size","search":"Search","search_results":"Search Results","search_placeholder":"Search files and folders","search_clear":"Clear search","breadcrumb":"Breadcrumb","breadcrumb_truncated":"Show hidden folders","media_autoplay":"Autoplay","media_autoplay_disabled":"Disabled","media_autoplay_enabled":"Enabled","media_play_next":"Play next file","media_play_next_disabled":"Disabled","media_play_next_enabled":"Enabled","media_speed":"Speed","media_speed_normal":"Normal","media_quality":"Quality","media_quality_auto":"Auto","media_guides":"Guides","media_guides_off":"Off","media_guides_default":"Default","media_guides_widescreen_hd":"Widescreen HD","media_guides_vertical":"Vertical","media_guides_square":"Square","media_guides_social_portrait":"Social Portrait","media_guides_cinemascope":"Cinemascope","media_guides_univisium":"Univisium","media_guides_cinema_flat":"Cinema Flat","media_guides_scope":"Scope","media_guides_fullscreen":"Fullscreen","media_guides_ultrawide":"Ultrawide","media_volume_slider":"Volume Slider","media_generating_waveform":"Generating waveform","media_loading":"Loading","media_zoom":"Zoom","media_zoom_slider":"Zoom Slider","media_time_slider":"Media Slider","media_comment_marker":"Comment marker","media_range_comment":"Comment","media_range_clear":"Clear","media_shuttle_forward":"Scanning forward at {1}x","media_shuttle_reverse":"Scanning backward at {1}x","media_mute":"Mute","media_unmute":"Unmute","media_play":"Play","media_pause":"Pause","media_skip_forward":"Skip forward","media_skip_backward":"Skip backward","media_settings":"Settings","media_subtitles_cc":"Subtitles/Closed Captions","media_time_format":"Time format","media_time_format_standard":"Standard time","media_time_format_timecode":"Timecode","media_time_format_frames":"Frame numbers","volume":"Volume","of":"of","subtitles":"Subtitles","off":"Off","media_audio":"Audio","track":"Track","media_auto_generated_captions":"Auto-Generated Captions","auto_generated":"Auto-Generated","box3d_animation_clips":"Animation clips","box3d_camera_projection_perspective":"Perspective","box3d_camera_projection_orthographic":"Orthographic","box3d_reset":"Reset","box3d_toggle_animation":"Play/pause animation","box3d_toggle_vr":"Toggle VR display","box3d_render_mode_lit":"Lit","box3d_render_mode_unlit":"Unlit","box3d_render_mode_normals":"Normals","box3d_render_mode_shape":"Shape","box3d_render_mode_uv_overlay":"UV Overlay","box3d_settings":"Settings","box3d_settings_render_label":"Render mode","box3d_settings_grid_label":"Show grid","box3d_settings_wireframes_label":"Show wireframes","box3d_settings_skeletons_label":"Show skeletons","box3d_settings_projection_label":"Camera Projection","box3d_settings_rotate_label":"Rotate Model","box3d_settings_rotate_left":"Rotate left around {1} axis","box3d_settings_rotate_right":"Rotate right around {1} axis","document_label":"Document Viewer","annotation_add_comment_placeholder":"Add a comment here...","annotation_reply_placeholder":"Post a reply...","annotation_done":"Done","annotation_close":"Close","annotation_cancel":"Cancel","annotation_save":"Save","annotation_post":"Post","annotation_delete":"Delete","annotation_delete_confirmation_message":"Delete this annotation?","annotation_profile_alt":"Avatar","annotation_anonymous_user_name":"Some User","annotation_posting_message":"Posting...","annotation_point_toggle":"Point annotation mode","annotation_draw_toggle":"Drawing annotation mode","annotation_highlight_toggle":"Highlight text","annotation_highlight_comment":"Add comment to highlighted text","annotation_who_highlighted":"{1} highlighted","annotation_who_drew":"{1} drew","annotation_draw_save":"Save drawing","annotation_draw_delete":"Delete drawing","annotations_load_error":"Annotations could not be loaded for this file. Please refresh the page to try again.","annotations_create_error":"This annotation could not be created. Please try again.","annotations_delete_error":"This annotation could not be deleted. Please try again.","annotations_authorization_error":"Annotations could not be loaded for this file. You may not have permission to take this action.","notification_button_default_text":"Okay","notification_button_default_label":"Clear Notification","notification_annotation_point_mode":"Click anywhere to add a comment to the document","notification_annotation_draw_mode":"Press down and drag the pointer to draw on the document","notification_degraded_preview":"Your connection to {1} is being blocked. Please reach out to your network admin to adjust firewall settings.","notification_cannot_download":"This file could not be downloaded.","notification_cannot_download_due_to_policy":"The file could not be downloaded due to a security policy.","link_contact_us":"Contact Us","360_videos":"360-degree videos","360_images":"360-degree images","3d_models":"3D models","afrikaans":"Afrikaans","albanian":"Albanian","arabic":"Arabic","armenian":"Armenian","belarusian":"Belarusian","bengali":"Bengali","bosnian":"Bosnian","bulgarian":"Bulgarian","burmese":"Burmese","catalan":"Catalan","central_khmer":"Central Khmer","chinese":"Chinese","croatian":"Croatian","czech":"Czech","danish":"Danish","dutch":"Dutch","english":"English","estonian":"Estonian","filipino":"Filipino","finnish":"Finnish","french":"French","galician":"Galician","ganda":"Ganda","georgian":"Georgian","german":"German","haitian_creole":"Haitian Creole","hebrew":"Hebrew","hindi":"Hindi","hmong":"Hmong","hungarian":"Hungarian","icelandic":"Icelandic","indonesian":"Indonesian","irish":"Irish","italian":"Italian","japanese":"Japanese","kazakh":"Kazakh","korean":"Korean","kurdish":"Kurdish","lao":"Lao","latvian":"Latvian","lithuanian":"Lithuanian","luxembourgish":"Luxembourgish","malay_macrolanguage":"Malay","modern_greek_1453_":"Greek","mongolian":"Mongolian","norwegian":"Norwegian","persian":"Persian","polish":"Polish","portuguese":"Portuguese","romanian":"Romanian","russian":"Russian","serbian":"Serbian","sichuan_yi":"Sichuan Yi","sicilian":"Sicilian","slovak":"Slovak","slovenian":"Slovenian","somali":"Somali","spanish":"Spanish","swahili_macrolanguage":"Swahili","swedish":"Swedish","swiss_german":"Swiss German","tagalog":"Tagalog","telugu":"Telugu","thai":"Thai","tibetan":"Tibetan","turkish":"Turkish","ukrainian":"Ukrainian","uzbek":"Uzbek","vietnamese":"Vietnamese"} : {};
+const defaultStrings = (0,_isNpmBuild__WEBPACK_IMPORTED_MODULE_0__/* .isNpmBuild */ .w)() ? {"rotate_left":"Rotate left","zoom_current_scale":"Current zoom level","zoom_in":"Zoom in","zoom_out":"Zoom out","enter_fullscreen":"Enter fullscreen","exit_fullscreen":"Exit fullscreen","controls_more":"More options","controls_find":"Find","controls_rotate_document":"Rotate document","controls_rotate_image":"Rotate image","controls_zoom_scale":"Zoom: {1}","controls_view_as_grid":"View as grid","controls_show_thumbnails":"View thumbnails","controls_hide_thumbnails":"Hide thumbnails","controls_shortcut_ctrl":"Ctrl + {1}","drawing_comment":"Markup","region_comment":"Comment on Region","highlight_text":"Highlight and Comment","exit_annotations":"Exit Annotations","annotation_tools":"Comment and markup","drawing_color":"Drawing color","drawing_color_blue":"Blue","drawing_color_green":"Green","drawing_color_red":"Red","drawing_color_orange":"Orange","drawing_color_yellow":"Yellow","drawing_color_purple":"Purple","previous_page":"Previous page","enter_page_num":"Click to enter page number","next_page":"Next page","download":"Download","print":"Print","print_notification":"Please press the print button to get a printable version of this document.","print_loading":"Preparing to print...","print_ready":"Ready to print.","print_close":"Close print dialog","previous_file":"Previous file","logo":"Logo","next_file":"Next file","loading_preview":"Loading Preview...","download_file":"Download File","text_truncated":"This file has been truncated due to size limits. Please download to view the whole file.","toggle_findbar":"Toggle findbar","toggle_thumbnails":"Toggle thumbnails","gallery_view":"Gallery view","page_gallery":"Page gallery","page_gallery_tile":"Page {1}","has_x_refs":"This preview has references you cannot view. Open the file in its native application.","find_next":"Find next","find_previous":"Find previous","find_close":"Close","find_label":"Search input","find_placeholder":"Find in document","find_match_count":"{1} of {2}","thumbnail_label":"Page thumbnails","file_preview_label":"File preview","comparison_banner_current":"Current version","comparison_banner_previous":"Previous version","comparison_banner_version":"Version {1}","comparison_banner_actions":"More actions","comparison_banner_open_full_preview":"Open Full Preview","comparison_banner_close":"Close","comparison_banner_make_current":"Make Current","comparison_banner_delete":"Delete","error_generic":"This preview didn’t load. Please try to open or download the file to view.","error_unsupported":"This preview didn’t load because the file type is unsupported. Please try to open or download the file to view.","error_account":"This preview didn’t load because your account is unable to preview this file type. Please try to open or download the file to view.","error_permissions":"This preview didn’t load because you don’t have permission. Please ask the file owner to update permissions.","error_refresh":"This preview didn’t load. Please try to open or download the file to view.","error_rate_limit":"This preview didn’t load because your request was rate limited. Please try to open or download the file to view.","error_reupload":"This preview didn’t load. Please try to open or download the file to view.","error_browser_unsupported":"Your browser doesn’t support preview for {1}. Please try to open or download the file to view.","error_document":"This preview didn’t load because the document may be protected. Please try to open or download the file to view.","error_password_protected":"This preview didn’t load because the document is protected. Please try to open or download the file to view.","error_try_again_later":"This preview didn’t load. Please refresh the page or download file to view.","error_bad_file":"This preview didn’t load. Please try to open or download the file to view.","error_not_downloadable":"Something seems to be wrong with this file. Please refresh the page, and if the issue continues, try to upload a new version.","error_flash_not_enabled":"This preview didn’t load because Flash is not enabled on your browser. Please try to enable Flash or download the file to view.","error_internet_explorer_office_online":"This version of Internet Explorer is out of date and the experience may be degraded. Please try switching to a different browser for a better experience.","error_large_file":"File exceeds supported size for preview. Open or download the file to view.","error_too_many_operations":"The file is too complex to display in your browser. Please download it to view.","error_zero_byte_file":"Cannot preview 0 B file. Open or download the file to view.","filename":"Name","last_modified_date":"Modified","size":"Size","search":"Search","search_results":"Search Results","search_placeholder":"Search files and folders","search_clear":"Clear search","breadcrumb":"Breadcrumb","breadcrumb_truncated":"Show hidden folders","media_autoplay":"Autoplay","media_autoplay_disabled":"Disabled","media_autoplay_enabled":"Enabled","media_play_next":"Play next file","media_play_next_disabled":"Disabled","media_play_next_enabled":"Enabled","media_speed":"Speed","media_speed_normal":"Normal","media_quality":"Quality","media_quality_auto":"Auto","media_guides":"Guides","media_guides_off":"Off","media_guides_default":"Default","media_guides_widescreen_hd":"Widescreen HD","media_guides_vertical":"Vertical","media_guides_square":"Square","media_guides_social_portrait":"Social Portrait","media_guides_cinemascope":"Cinemascope","media_guides_univisium":"Univisium","media_guides_cinema_flat":"Cinema Flat","media_guides_scope":"Scope","media_guides_fullscreen":"Fullscreen","media_guides_ultrawide":"Ultrawide","media_volume_slider":"Volume Slider","media_generating_waveform":"Generating waveform","media_loading":"Loading","media_zoom":"Zoom","media_zoom_slider":"Zoom Slider","media_time_slider":"Media Slider","media_comment_marker":"Comment marker","media_range_comment":"Comment","media_range_clear":"Clear","media_shuttle_forward":"Scanning forward at {1}x","media_shuttle_reverse":"Scanning backward at {1}x","media_mute":"Mute","media_unmute":"Unmute","media_play":"Play","media_pause":"Pause","media_skip_forward":"Skip forward","media_skip_backward":"Skip backward","media_settings":"Settings","media_subtitles_cc":"Subtitles/Closed Captions","media_time_format":"Time format","media_time_format_standard":"Standard time","media_time_format_timecode":"Timecode","media_time_format_frames":"Frame numbers","volume":"Volume","of":"of","subtitles":"Subtitles","off":"Off","media_audio":"Audio","track":"Track","media_auto_generated_captions":"Auto-Generated Captions","auto_generated":"Auto-Generated","box3d_animation_clips":"Animation clips","box3d_camera_projection_perspective":"Perspective","box3d_camera_projection_orthographic":"Orthographic","box3d_reset":"Reset","box3d_toggle_animation":"Play/pause animation","box3d_toggle_vr":"Toggle VR display","box3d_render_mode_lit":"Lit","box3d_render_mode_unlit":"Unlit","box3d_render_mode_normals":"Normals","box3d_render_mode_shape":"Shape","box3d_render_mode_uv_overlay":"UV Overlay","box3d_settings":"Settings","box3d_settings_render_label":"Render mode","box3d_settings_grid_label":"Show grid","box3d_settings_wireframes_label":"Show wireframes","box3d_settings_skeletons_label":"Show skeletons","box3d_settings_projection_label":"Camera Projection","box3d_settings_rotate_label":"Rotate Model","box3d_settings_rotate_left":"Rotate left around {1} axis","box3d_settings_rotate_right":"Rotate right around {1} axis","document_label":"Document Viewer","annotation_add_comment_placeholder":"Add a comment here...","annotation_reply_placeholder":"Post a reply...","annotation_done":"Done","annotation_close":"Close","annotation_cancel":"Cancel","annotation_save":"Save","annotation_post":"Post","annotation_delete":"Delete","annotation_delete_confirmation_message":"Delete this annotation?","annotation_profile_alt":"Avatar","annotation_anonymous_user_name":"Some User","annotation_posting_message":"Posting...","annotation_point_toggle":"Point annotation mode","annotation_draw_toggle":"Drawing annotation mode","annotation_highlight_toggle":"Highlight text","annotation_highlight_comment":"Add comment to highlighted text","annotation_who_highlighted":"{1} highlighted","annotation_who_drew":"{1} drew","annotation_draw_save":"Save drawing","annotation_draw_delete":"Delete drawing","annotations_load_error":"Annotations could not be loaded for this file. Please refresh the page to try again.","annotations_create_error":"This annotation could not be created. Please try again.","annotations_delete_error":"This annotation could not be deleted. Please try again.","annotations_authorization_error":"Annotations could not be loaded for this file. You may not have permission to take this action.","notification_button_default_text":"Okay","notification_button_default_label":"Clear Notification","notification_annotation_point_mode":"Click anywhere to add a comment to the document","notification_annotation_draw_mode":"Press down and drag the pointer to draw on the document","notification_degraded_preview":"Your connection to {1} is being blocked. Please reach out to your network admin to adjust firewall settings.","notification_cannot_download":"This file could not be downloaded.","notification_cannot_download_due_to_policy":"The file could not be downloaded due to a security policy.","link_contact_us":"Contact Us","360_videos":"360-degree videos","360_images":"360-degree images","3d_models":"3D models","afrikaans":"Afrikaans","albanian":"Albanian","arabic":"Arabic","armenian":"Armenian","belarusian":"Belarusian","bengali":"Bengali","bosnian":"Bosnian","bulgarian":"Bulgarian","burmese":"Burmese","catalan":"Catalan","central_khmer":"Central Khmer","chinese":"Chinese","croatian":"Croatian","czech":"Czech","danish":"Danish","dutch":"Dutch","english":"English","estonian":"Estonian","filipino":"Filipino","finnish":"Finnish","french":"French","galician":"Galician","ganda":"Ganda","georgian":"Georgian","german":"German","haitian_creole":"Haitian Creole","hebrew":"Hebrew","hindi":"Hindi","hmong":"Hmong","hungarian":"Hungarian","icelandic":"Icelandic","indonesian":"Indonesian","irish":"Irish","italian":"Italian","japanese":"Japanese","kazakh":"Kazakh","korean":"Korean","kurdish":"Kurdish","lao":"Lao","latvian":"Latvian","lithuanian":"Lithuanian","luxembourgish":"Luxembourgish","malay_macrolanguage":"Malay","modern_greek_1453_":"Greek","mongolian":"Mongolian","norwegian":"Norwegian","persian":"Persian","polish":"Polish","portuguese":"Portuguese","romanian":"Romanian","russian":"Russian","serbian":"Serbian","sichuan_yi":"Sichuan Yi","sicilian":"Sicilian","slovak":"Slovak","slovenian":"Slovenian","somali":"Somali","spanish":"Spanish","swahili_macrolanguage":"Swahili","swedish":"Swedish","swiss_german":"Swiss German","tagalog":"Tagalog","telugu":"Telugu","thai":"Thai","tibetan":"Tibetan","turkish":"Turkish","ukrainian":"Ukrainian","uzbek":"Uzbek","vietnamese":"Vietnamese"} : {};
 let language =  true ? "en-US" : 0;
 let strings = defaultStrings;
 function getLanguage() {
@@ -1215,7 +1297,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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.123.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.124.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 = {};
@@ -6996,7 +7078,7 @@ function SkipButton({
 
 /***/ },
 
-/***/ 3308
+/***/ 3904
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 
@@ -7028,71 +7110,8 @@ var IconChevronDownMedium24 = __webpack_require__(8668);
 var IconChevronUpMedium24 = __webpack_require__(2155);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/hooks/useClickOutside.ts
 var useClickOutside = __webpack_require__(2959);
-;// ./src/lib/TabularDigits.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/TabularDigits.tsx
-/* unused harmony import specifier */ var React;
-
-
-
-// The Inter subset served to the app has no tabular figures, so `font-variant-numeric: tabular-nums`
-// has no effect. Wrapping each digit in a 1ch box keeps changing numbers, and whatever follows them,
-// from shifting as they update.
-const TABULAR_DIGIT_CLASS = 'bp-TabularDigit';
-const isDigit = char => char >= '0' && char <= '9';
-const isDigitNode = node => node.nodeType === Node.ELEMENT_NODE;
-
-/**
- * Writes `text` into `el` with each digit in a fixed-width box. For labels updated outside React,
- * e.g. on animation frames. Unchanged characters are left in place, so a ticking clock only touches
- * the digits that changed.
- */
-function renderTabularDigits(el, text) {
-  if (el.textContent === text) {
-    return;
-  }
-  const chars = Array.from(text);
-  const nodes = el.childNodes;
-  const canPatch = nodes.length === chars.length && chars.every((char, index) => isDigit(char) === isDigitNode(nodes[index]));
-  if (canPatch) {
-    chars.forEach((char, index) => {
-      if (nodes[index].textContent !== char) {
-        nodes[index].textContent = char;
-      }
-    });
-    return;
-  }
-  const fragment = document.createDocumentFragment();
-  chars.forEach(char => {
-    if (isDigit(char)) {
-      const digitEl = document.createElement('span');
-      digitEl.className = TABULAR_DIGIT_CLASS;
-      digitEl.textContent = char;
-      fragment.appendChild(digitEl);
-    } else {
-      fragment.appendChild(document.createTextNode(char));
-    }
-  });
-  el.replaceChildren(fragment);
-}
-/**
- * Renders `children` with each digit in a fixed-width box. Place it inside the element that
- * provides the typography, e.g. `<Text as="span"><TabularDigits>{label}</TabularDigits></Text>`.
- */
-function TabularDigits({
-  children
-}) {
-  const elRef = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (elRef.current) {
-      renderTabularDigits(elRef.current, children);
-    }
-  }, [children]);
-  return /*#__PURE__*/React.createElement("span", {
-    ref: elRef
-  });
-}
+// EXTERNAL MODULE: ./src/lib/TabularDigits.tsx + 1 modules
+var TabularDigits = __webpack_require__(2459);
 // EXTERNAL MODULE: ./src/lib/viewers/media/videoFps.ts
 var videoFps = __webpack_require__(3234);
 // EXTERNAL MODULE: ./src/lib/BlueprintProviders.tsx
@@ -7197,7 +7216,7 @@ function TimestampControl({
       if (currentElRef.current && mediaEl) {
         const label = formatLabel(mediaEl.currentTime, format, fps);
         if (isBlueprintEnabled) {
-          renderTabularDigits(currentElRef.current, label);
+          (0,TabularDigits/* renderTabularDigits */.k7)(currentElRef.current, label);
         } else {
           currentElRef.current.textContent = label;
         }
@@ -7227,13 +7246,13 @@ function TimestampControl({
     // The animation frame loop owns the label while a frame-accurate format is playing.
     const isFrameLoopRunning = format !== TimeFormat.STANDARD && mediaEl?.paused === false;
     if (isBlueprintEnabled && currentElRef.current && !isFrameLoopRunning) {
-      renderTabularDigits(currentElRef.current, currentLabel);
+      (0,TabularDigits/* renderTabularDigits */.k7)(currentElRef.current, currentLabel);
     }
   }, [currentLabel, format, isBlueprintEnabled, mediaEl]);
   const durationLabel = formatLabel(durationTime, format, fps);
   external_react_["default"].useLayoutEffect(() => {
     if (isBlueprintEnabled && durationElRef.current) {
-      renderTabularDigits(durationElRef.current, durationLabel);
+      (0,TabularDigits/* renderTabularDigits */.k7)(durationElRef.current, durationLabel);
     }
   }, [durationLabel, isBlueprintEnabled, isNarrowWidth]);
   const handleKeyDown = event => {
@@ -9365,8 +9384,8 @@ var MediaSettingsV2 = __webpack_require__(4027);
 var PlayOverlayIcon = __webpack_require__(2048);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseToggle.tsx + 1 modules
 var PlayPauseToggle = __webpack_require__(6321);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 3 modules
-var TimestampControl = __webpack_require__(3308);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
+var TimestampControl = __webpack_require__(3904);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
 var utils = __webpack_require__(5346);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/VolumeControls.tsx + 8 modules
@@ -21633,7 +21652,7 @@ var x = (y) => {
 	var x = {}; __webpack_require__.d(x, y); return x
 } 
 var y = (x) => (() => (x))
-module.exports = x({ ["Component"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Component), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useReducer"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useReducer), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
+module.exports = x({ ["Component"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.Component), ["createElement"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createElement), ["createRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.createRef), ["default"]: () => (__WEBPACK_EXTERNAL_MODULE_react__["default"]), ["forwardRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.forwardRef), ["useCallback"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useCallback), ["useEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useEffect), ["useId"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useId), ["useImperativeHandle"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle), ["useLayoutEffect"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect), ["useMemo"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useMemo), ["useReducer"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useReducer), ["useRef"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useRef), ["useState"]: () => (__WEBPACK_EXTERNAL_MODULE_react__.useState) });
 
 /***/ },
 
@@ -37254,7 +37273,7 @@ var isNpmBuild = __webpack_require__(8080);
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.123.0";
+const CLIENT_VERSION = "3.124.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -40589,7 +40608,7 @@ class ImageBaseViewer extends viewers_BaseViewer {
       this.zoomOut();
       return true;
     }
-    return false;
+    return this.handleFullscreenKey(key);
   }
 
   /**
@@ -41405,265 +41424,1332 @@ function ImageControls({
     onAnnotationColorChange: onAnnotationColorChange
   })));
 }
-;// ./src/lib/viewers/image/Image.scss
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+;// external "@box/blueprint-web-assets/icons/Medium/XMark"
+
+;// ./src/lib/viewers/controls/annotations/AnnotationsExitButtonV2.scss
 // extracted by mini-css-extract-plugin
 
-;// ./src/lib/viewers/image/ImageViewer.js
+;// ./src/lib/viewers/controls/annotations/AnnotationsExitButtonV2.tsx
+/* provided dependency */ var AnnotationsExitButtonV2_ = __webpack_require__(441)["Tl"];
 
 
 
 
+function AnnotationsExitButtonV2({
+  onClick
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-AnnotationsControls-exitBtn"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: AnnotationsExitButtonV2_('exit_annotations')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": AnnotationsExitButtonV2_('exit_annotations'),
+    "data-resin-target": "exit",
+    "data-testid": "bp-annotations-controls-exit-btn",
+    onClick: onClick
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_XMark_07fbe0f0_default__
+  }))));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/Comment"
 
+;// ./src/lib/viewers/controls/tooltip/ToggleTooltipV2.scss
+// extracted by mini-css-extract-plugin
 
+;// ./src/lib/viewers/controls/tooltip/ToggleTooltipV2.tsx
 
 
 
-const CSS_CLASS_IMAGE = 'bp-image';
-const IMAGE_PADDING = 15;
-const IMAGE_ZOOM_SCALE = 1.2;
-class ImageViewer extends image_ImageBaseViewer {
-  /** @inheritdoc */
-  constructor(options) {
-    super(options);
-    this.api = options.api;
+// Blueprint's Tooltip writes its own data-state onto the element it wraps, which overwrites the
+// data-state Toolbar.ToggleItem uses for its selected styling, so the tooltip gets its own element.
+function ToggleTooltipV2({
+  children,
+  content,
+  side
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: content,
+    side: side
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-ToggleTooltipV2"
+  }, children));
+}
+;// ./src/lib/viewers/controls/annotations/AnnotationsToggleV2.tsx
+/* provided dependency */ var AnnotationsToggleV2_ = __webpack_require__(441)["Tl"];
+function AnnotationsToggleV2_extends() { return AnnotationsToggleV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, AnnotationsToggleV2_extends.apply(null, arguments); }
 
-    // Bind context for callbacks
-    this.applyCursorFtux = this.applyCursorFtux.bind(this);
-    this.finishLoading = this.finishLoading.bind(this);
-    this.getViewportDimensions = this.getViewportDimensions.bind(this);
-    this.handleAnnotationColorChange = this.handleAnnotationColorChange.bind(this);
-    this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
-    this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
-    this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
-    this.handleImageDownloadError = this.handleImageDownloadError.bind(this);
-    this.handleZoomEvent = this.handleZoomEvent.bind(this);
-    this.rotateLeft = this.rotateLeft.bind(this);
-    this.updateDiscoverabilityResinTag = this.updateDiscoverabilityResinTag.bind(this);
-    this.updateExperiences = this.updateExperiences.bind(this);
-    this.updatePannability = this.updatePannability.bind(this);
-    this.annotationControlsFSM = new AnnotationControlsFSM(this.isDiscoverabilityEnabled() ? AnnotationState.REGION_TEMP : AnnotationState.NONE);
-    this.annotationControlsFSM.subscribe(this.applyCursorFtux);
-    this.annotationControlsFSM.subscribe(this.updateDiscoverabilityResinTag);
-    if (this.isMobile) {
-      this.handleOrientationChange = this.handleOrientationChange.bind(this);
-    }
-  }
 
-  /**
-   * [destructor]
-   *
-   * @return {void}
-   */
-  destroy() {
-    if (this.isDiscoverabilityEnabled()) {
-      this.removeListener('zoom', this.handleZoomEvent);
-    }
 
-    // Blob URLs stay allocated until revoked.
-    if (this.imageEl && this.imageEl.src && this.imageEl.src.startsWith('blob:')) {
-      URL.revokeObjectURL(this.imageEl.src);
-    }
-    super.destroy();
-  }
 
-  /**
-   * @inheritdoc
-   */
-  setup() {
-    if (this.isSetup) {
-      return;
-    }
 
-    // Call super() to set up common layout
-    super.setup();
-    this.wrapperEl = this.createViewer(document.createElement('div'));
-    this.wrapperEl.classList.add(CSS_CLASS_IMAGE);
-    this.imageEl = this.wrapperEl.appendChild(document.createElement('img'));
-    this.imageEl.setAttribute('data-page-number', 1);
 
-    // hides image tag until content is loaded
-    this.imageEl.classList.add(constants/* CLASS_INVISIBLE */.Zb);
-    this.currentRotationAngle = 0;
-    const fileName = get_default()(this.options, 'file.name');
-    this.imageEl.setAttribute('alt', fileName);
-    if (this.isDiscoverabilityEnabled()) {
-      this.addListener('zoom', this.handleZoomEvent);
+
+// The toolbar parts throw outside a Toolbar.Root, so surfaces without one (the media bar) use a standalone button.
+
+const TOGGLE_VALUE = 'annotations';
+function AnnotationsToggleV2(props, ref) {
+  const {
+    annotationMode = AnnotationMode.NONE,
+    isExpanded,
+    modes,
+    onAnnotationModeClick = (noop_default()),
+    onAnnotationModeEscape = (noop_default()),
+    tooltipSide
+  } = props;
+  const [lastMode, setLastMode] = external_react_["default"].useState(null);
+  const isActive = annotationMode !== AnnotationMode.NONE;
+  const resumeMode = lastMode && modes.includes(lastMode) ? lastMode : modes[0];
+  external_react_["default"].useEffect(() => {
+    if (annotationMode !== AnnotationMode.NONE) {
+      setLastMode(annotationMode);
     }
-    this.updateDiscoverabilityResinTag();
-  }
+  }, [annotationMode]);
 
-  /**
-   * Loads an Image.
-   *
-   * @return {Promise}
-   */
-  load() {
-    super.load();
-    const {
-      representation,
-      viewer
-    } = this.options;
-    const template = representation.content.url_template;
-    this.bindDOMListeners();
-    const contentUrl = this.createContentUrlV2(template, viewer.ASSET);
-    return this.getRepStatus().getPromise().then(() => {
-      this.startLoadTimer();
-      return this.fetchContentAsBlobUrl(contentUrl);
-    }).then(blobUrl => {
-      if (this.isDestroyed()) {
-        URL.revokeObjectURL(blobUrl);
+  // Global event handlers
+  external_react_["default"].useEffect(() => {
+    const handleKeyDown = event => {
+      if (event.key !== 'Escape') {
         return;
       }
-      this.imageEl.src = blobUrl;
-      if (this.imageEl.complete) {
-        this.finishLoading();
-      }
-      super.handleAssetAndRepLoad();
-    }).catch(this.handleAssetError);
-  }
-
-  /**
-   * Loads the image to be viewed
-   *
-   * @override
-   * @return {void}
-   */
-  handleAssetAndRepLoad(downloadUrl) {
-    this.startLoadTimer();
-    this.imageEl.src = downloadUrl;
-    if (this.imageEl.complete) {
-      this.finishLoading();
+      event.preventDefault();
+      event.stopPropagation();
+      onAnnotationModeEscape();
+    };
+    if (annotationMode !== AnnotationMode.NONE) {
+      document.addEventListener('keydown', handleKeyDown);
     }
-    super.handleAssetAndRepLoad();
-  }
-  finishLoading() {
-    this.hidePreviewMask();
-    this.emitFirstRenderMetric();
-    return super.finishLoading();
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [annotationMode, onAnnotationModeEscape]);
+  if (!resumeMode) {
+    return null;
   }
-
-  /**
-   * Emits first render time metric.
-   * Overrides base implementation to use BaseViewer's emitMetric(event, data) format.
-   *
-   * @protected
-   * @return {void}
-   */
-  emitFirstRenderMetric() {
-    if (this.isDestroyed() || this.firstRenderEmitted) {
-      return;
-    }
+  const handleToggle = isPressed => {
+    onAnnotationModeClick({
+      mode: isPressed ? resumeMode : AnnotationMode.NONE
+    });
+  };
+  const toggleProps = {
+    ref,
+    'aria-expanded': isExpanded ?? isActive,
+    'aria-label': AnnotationsToggleV2_('annotation_tools'),
+    'data-resin-target': 'annotations',
+    'data-testid': 'bp-AnnotationsControls-toggleBtn',
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Comment_c700dfbc_default__
+  };
+  const renderToggle = toggle => /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
+    content: AnnotationsToggleV2_('annotation_tools'),
+    side: tooltipSide
+  }, toggle);
+  if (props.buttonType === 'icon') {
     const {
-      file
-    } = this.options;
-    const tag = lib_Timer.createTag(file.id, lib_events/* FIRST_RENDER_METRIC */.VT);
-    const time = lib_Timer.stop(tag);
-    if (time && time.elapsed) {
-      this.emitMetric(lib_events/* LOAD_METRIC */.Yy.firstRenderTime, time.elapsed);
-      this.firstRenderEmitted = true;
-    }
+      className,
+      size,
+      variant
+    } = props;
+    return renderToggle(/*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconToggleButton, AnnotationsToggleV2_extends({}, toggleProps, {
+      className: className,
+      onPressedChange: handleToggle,
+      pressed: isActive,
+      size: size,
+      variant: variant
+    })));
   }
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
+    onValueChange: value => handleToggle(value.includes(TOGGLE_VALUE)),
+    type: "multiple",
+    value: isActive ? [TOGGLE_VALUE] : []
+  }, renderToggle(/*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, AnnotationsToggleV2_extends({}, toggleProps, {
+    value: TOGGLE_VALUE
+  }))));
+}
+/* harmony default export */ const annotations_AnnotationsToggleV2 = (/*#__PURE__*/external_react_["default"].forwardRef(AnnotationsToggleV2));
+;// ./src/lib/viewers/controls/annotations/AnnotationsControlsV2.tsx
+const AnnotationsControlsV2_excluded = ["onAnnotationModeClick"];
+function AnnotationsControlsV2_extends() { return AnnotationsControlsV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, AnnotationsControlsV2_extends.apply(null, arguments); }
+function AnnotationsControlsV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = AnnotationsControlsV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function AnnotationsControlsV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
-  /**
-   * Prefetches assets for an image.
-   *
-   * @param {boolean} [options.content] - Whether or not to prefetch rep content
-   * @return {void}
-   */
-  prefetch({
-    content = true,
-    preload = false
-  } = {}) {
-    const {
-      file,
-      representation,
-      viewer
-    } = this.options;
-    const isWatermarked = file && file.watermark_info && file.watermark_info.is_watermarked;
-    if ((content || preload) && !isWatermarked && this.isRepresentationReady(representation)) {
-      const template = representation.content.url_template;
-      const contentUrl = this.createContentUrlV2(template, viewer.ASSET);
-      this.api.get(contentUrl, {
-        type: 'blob',
-        headers: this.appendAuthHeader()
-      }).catch(err => {
-        console.warn('Image prefetch failed', err); // eslint-disable-line no-console
-      });
-    }
-  }
 
-  /**
-   * Can the viewer currently be panned
-   *
-   * @private
-   * @return {void}
-   */
-  updatePannability() {
-    if (!this.imageEl) {
-      return;
-    }
-    if (this.isRotated()) {
-      this.isPannable = this.imageEl.height > this.wrapperEl.clientWidth || this.imageEl.width > this.wrapperEl.clientHeight;
-    } else {
-      this.isPannable = this.imageEl.width > this.wrapperEl.clientWidth || this.imageEl.height > this.wrapperEl.clientHeight;
-    }
-    this.didPan = false;
-    this.updateCursor();
-  }
 
-  /**
-   * Rotate image anti-clockwise by 90 degrees
-   *
-   * @return {void}
-   */
-  rotateLeft() {
-    this.currentRotationAngle = (this.currentRotationAngle - 90) % 3600 % 360;
-    this.imageEl.setAttribute('data-rotation-angle', this.currentRotationAngle);
-    this.imageEl.style.transform = `rotate(${this.currentRotationAngle}deg)`;
-    this.emit('rotate');
 
-    // Re-adjust image position after rotation
-    this.handleOrientationChange();
-    this.setScale(this.imageEl.offsetwidth, this.imageEl.offsetHeight);
-  }
 
-  // Annotation overrides
-  getInitialAnnotationMode() {
-    return this.isDiscoverabilityEnabled() ? AnnotationMode.REGION : AnnotationMode.NONE;
-  }
+// The markup controls at the end of a Blueprint controls bar
+function AnnotationsControlsV2(_ref) {
+  let {
+      onAnnotationModeClick
+    } = _ref,
+    rest = AnnotationsControlsV2_objectWithoutProperties(_ref, AnnotationsControlsV2_excluded);
+  const toggleRef = external_react_["default"].useRef(null);
+  const handleExit = () => {
+    toggleRef.current?.focus();
+    onAnnotationModeClick?.({
+      mode: AnnotationMode.NONE
+    });
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), /*#__PURE__*/external_react_["default"].createElement(AnnotationsExitButtonV2, {
+    onClick: handleExit
+  }), /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsToggleV2, AnnotationsControlsV2_extends({
+    ref: toggleRef,
+    onAnnotationModeClick: onAnnotationModeClick
+  }, rest)));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/PencilTip"
 
-  /**
-   * Gets the width & height after the transforms are applied.
-   * When an image is rotated, the width & height of an image, e.g. offsetWidth & offsetHeight,
-   * are the values before transforms are applied, so if the image is rotated we need to swap the
-   * width & height
-   *
-   * @private
-   * @param {number} [width] - The width in px
-   * @param {number} [height] - The height in px
-   * @param {boolean} [isRotated] - if the image has a transform rotate applied to it
-   * @return {Object} the width & height of the image after tranformations
-   */
-  getTransformWidthAndHeight(width, height, isRotated) {
-    if (isRotated) {
-      return {
-        width: height,
-        height: width
-      };
-    }
-    return {
-      width,
-      height
-    };
-  }
+;// external "@box/blueprint-web-assets/icons/Medium/SquarePlus"
 
-  /**
-   * Gets the viewport dimensions.
-   *
-   * @return {Object} the width & height of the viewport
-   */
-  getViewportDimensions() {
-    return {
+;// external "@box/blueprint-web-assets/icons/Medium/TCursorHighlight"
+
+;// ./src/lib/viewers/controls/annotations/annotationModeIcons.ts
+
+
+
+
+const ANNOTATION_MODE_ICONS = {
+  [AnnotationMode.DRAWING]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_PencilTip_154ad3fd_default__,
+  [AnnotationMode.HIGHLIGHT]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_TCursorHighlight_508374cb_default__,
+  [AnnotationMode.REGION]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__
+};
+/* harmony default export */ const annotationModeIcons = (ANNOTATION_MODE_ICONS);
+;// ./src/lib/viewers/controls/controls-bar/ControlsBarV2.tsx
+const ControlsBarV2_excluded = ["children"];
+function ControlsBarV2_extends() { return ControlsBarV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsBarV2_extends.apply(null, arguments); }
+function ControlsBarV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsBarV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function ControlsBarV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+function ControlsBarV2(_ref, ref) {
+  let {
+      children
+    } = _ref,
+    rest = ControlsBarV2_objectWithoutProperties(_ref, ControlsBarV2_excluded);
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, ControlsBarV2_extends({
+    ref: ref,
+    colorScheme: "dark",
+    "data-testid": "bp-ControlsBar"
+  }, rest), children);
+}
+/* harmony default export */ const controls_bar_ControlsBarV2 = (/*#__PURE__*/external_react_["default"].forwardRef(ControlsBarV2));
+;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteV2.tsx
+/* provided dependency */ var AnnotationsPaletteV2_ = __webpack_require__(441)["Tl"];
+function AnnotationsPaletteV2_extends() { return AnnotationsPaletteV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, AnnotationsPaletteV2_extends.apply(null, arguments); }
+
+
+
+
+
+
+
+
+function AnnotationsPaletteV2({
+  children
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-AnnotationsPaletteV2",
+    "data-testid": "bp-AnnotationsPaletteV2"
+  }, /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, null, children));
+}
+function Modes({
+  annotationMode,
+  children,
+  onAnnotationModeClick = (noop_default())
+}) {
+  // The single-select group reports an empty value when the active mode is clicked again. Exiting
+  // is left to the trigger on the main bar, so the palette never closes under the cursor.
+  const handleModeChange = mode => {
+    if (!mode || mode === annotationMode) {
+      return;
+    }
+    onAnnotationModeClick({
+      mode: mode
+    });
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
+    "data-testid": "bp-annotations-controls",
+    onValueChange: handleModeChange,
+    type: "single",
+    value: annotationMode
+  }, children);
+}
+function Mode({
+  value
+}) {
+  const {
+    label,
+    resinTarget,
+    testId
+  } = {
+    [AnnotationMode.DRAWING]: {
+      label: AnnotationsPaletteV2_('drawing_comment'),
+      resinTarget: 'draw',
+      testId: 'bp-AnnotationsControls-drawBtn'
+    },
+    [AnnotationMode.HIGHLIGHT]: {
+      label: AnnotationsPaletteV2_('highlight_text'),
+      resinTarget: 'highlightText',
+      testId: 'bp-AnnotationsControls-highlightBtn'
+    },
+    [AnnotationMode.REGION]: {
+      label: AnnotationsPaletteV2_('region_comment'),
+      resinTarget: 'highlightRegion',
+      testId: 'bp-AnnotationsControls-regionBtn'
+    }
+  }[value];
+  return /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
+    content: label
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, {
+    "aria-label": label,
+    "data-resin-target": resinTarget,
+    "data-testid": testId,
+    icon: annotationModeIcons[value],
+    value: value
+  }));
+}
+/* harmony default export */ const annotations_AnnotationsPaletteV2 = (AnnotationsPaletteV2_extends(AnnotationsPaletteV2, {
+  Mode,
+  Modes
+}));
+;// ./src/lib/viewers/controls/color-picker/ColorPickerControlV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/color-picker/ColorPickerControlV2.tsx
+/* provided dependency */ var ColorPickerControlV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+const getColorLabels = () => ({
+  [AnnotationColor.BOX_BLUE]: ColorPickerControlV2_('drawing_color_blue'),
+  [AnnotationColor.GREEN_LIGHT]: ColorPickerControlV2_('drawing_color_green'),
+  [AnnotationColor.WATERMELON_RED]: ColorPickerControlV2_('drawing_color_red'),
+  [AnnotationColor.YELLORANGE]: ColorPickerControlV2_('drawing_color_orange'),
+  [AnnotationColor.YELLOW]: ColorPickerControlV2_('drawing_color_yellow'),
+  [AnnotationColor.GRIMACE]: ColorPickerControlV2_('drawing_color_purple')
+});
+function ColorPickerControlV2({
+  activeColor = __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__,
+  colors,
+  onColorSelect
+}) {
+  const colorLabels = getColorLabels();
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-ColorPickerControlV2",
+    "data-testid": "bp-color-picker-control"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.SelectMenu.Grid, {
+    "aria-label": ColorPickerControlV2_('drawing_color'),
+    columns: colors.length
+  }, colors.map(color => /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.SelectMenu.Option.ColorCircle, {
+    key: color,
+    active: color === activeColor,
+    "aria-label": colorLabels[color] || color,
+    className: "bp-ColorPickerControlV2-swatch",
+    color: color,
+    "data-resin-target": "colorSelect",
+    onClick: () => onColorSelect(color)
+  }))));
+}
+;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteControlsV2.tsx
+
+
+
+
+
+
+// The palette opened by the markup toggle, with the drawing colors while drawing
+function AnnotationsPaletteControlsV2({
+  annotationColor,
+  annotationMode,
+  modes,
+  onAnnotationColorChange,
+  onAnnotationModeClick
+}) {
+  if (annotationMode === AnnotationMode.NONE || !modes.length) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2, null, /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2.Modes, {
+    annotationMode: annotationMode,
+    onAnnotationModeClick: onAnnotationModeClick
+  }, modes.map(mode => /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2.Mode, {
+    key: mode,
+    value: mode
+  }))), annotationMode === AnnotationMode.DRAWING && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), /*#__PURE__*/external_react_["default"].createElement(ColorPickerControlV2, {
+    activeColor: annotationColor,
+    colors: ANNOTATION_COLORS,
+    onColorSelect: onAnnotationColorChange
+  })));
+}
+;// ./src/lib/viewers/controls/annotations/useAnnotationModes.ts
+
+
+// Listed in the palette's button order, which is also the order the toggle falls back to. Annotating is
+// unavailable in fullscreen, so no modes are offered there.
+function useAnnotationModes({
+  hasDrawing,
+  hasHighlight,
+  hasRegion
+}) {
+  const isFullscreen = useFullscreen();
+  const modes = [];
+  if (isFullscreen) {
+    return modes;
+  }
+  if (hasRegion) {
+    modes.push(AnnotationMode.REGION);
+  }
+  if (hasHighlight) {
+    modes.push(AnnotationMode.HIGHLIGHT);
+  }
+  if (hasDrawing) {
+    modes.push(AnnotationMode.DRAWING);
+  }
+  return modes;
+}
+;// external "@box/blueprint-web-assets/icons/Medium/EllipsisVertical"
+
+// EXTERNAL MODULE: ./src/lib/viewers/controls/tooltip/MenuTriggerTooltipV2.tsx
+var MenuTriggerTooltipV2 = __webpack_require__(6014);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/settings/stopMenuKeyPropagation.ts
+var stopMenuKeyPropagation = __webpack_require__(9646);
+;// ./src/lib/viewers/controls/controls-bar/ControlsOverflowMenuV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/controls-bar/ControlsOverflowMenuV2.tsx
+/* provided dependency */ var ControlsOverflowMenuV2_ = __webpack_require__(441)["Tl"];
+function ControlsOverflowMenuV2_extends() { return ControlsOverflowMenuV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsOverflowMenuV2_extends.apply(null, arguments); }
+
+
+
+
+
+
+
+
+// Handlers that return focus to the control that invoked them get the trigger, since the row unmounts with the menu
+const ControlsOverflowTriggerContext = /*#__PURE__*/external_react_["default"].createContext({
+  current: null
+});
+
+// The menu portals out of the controls root, so it carries the root's Resin attributes itself
+const getResinAttributes = element => {
+  const resinComponent = element?.closest('[data-resin-component]');
+  return resinComponent ? Object.fromEntries(Array.from(resinComponent.attributes).filter(({
+    name
+  }) => name.startsWith('data-resin-')).map(({
+    name,
+    value
+  }) => [name, value])) : {};
+};
+function ControlsOverflowToggle(props, ref) {
+  const isMenuOpen = props['aria-expanded'] === true || props['aria-expanded'] === 'true';
+  return /*#__PURE__*/external_react_["default"].createElement(MenuTriggerTooltipV2/* default */.A, {
+    content: ControlsOverflowMenuV2_('controls_more'),
+    isMenuOpen: isMenuOpen
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, ControlsOverflowMenuV2_extends({
+    ref: ref,
+    "aria-label": ControlsOverflowMenuV2_('controls_more'),
+    "data-resin-target": "moreOptions",
+    "data-testid": "bp-ControlsBar-overflowBtn"
+  }, props), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_EllipsisVertical_06d33c4b_default__
+  })));
+}
+const ControlsOverflowToggleV2 = /*#__PURE__*/external_react_["default"].forwardRef(ControlsOverflowToggle);
+function ControlsOverflowMenuV2({
+  items
+}) {
+  const container = external_react_["default"].useContext(BlueprintProviders/* PortalContainerContext */.n) ?? undefined;
+  const {
+    setIsForced
+  } = external_react_["default"].useContext(ControlsLayerContext);
+  const triggerRef = external_react_["default"].useRef(null);
+  const [isOpen, setIsOpen] = external_react_["default"].useState(false);
+  const [resinAttributes, setResinAttributes] = external_react_["default"].useState({});
+  const handleOpenChange = open => {
+    if (open) {
+      setResinAttributes(getResinAttributes(triggerRef.current));
+    }
+    setIsOpen(open);
+  };
+
+  // The menu sits outside the controls layer, which would otherwise hide the bar under the open menu
+  external_react_["default"].useEffect(() => {
+    if (!isOpen) {
+      return undefined;
+    }
+    setIsForced(true);
+    return () => setIsForced(false);
+  }, [isOpen, setIsForced]);
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Root, {
+    modal: false,
+    onOpenChange: handleOpenChange,
+    open: isOpen
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Trigger, {
+    ref: triggerRef,
+    asChild: true,
+    "data-overflow-ids": items.map(({
+      id
+    }) => id).join(' '),
+    "data-overflow-trigger": ""
+  }, /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowToggleV2, null)), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Content, ControlsOverflowMenuV2_extends({
+    align: "end",
+    className: "bp-ControlsOverflowMenuV2",
+    container: container,
+    "data-testid": "bp-ControlsBar-overflowMenu",
+    onEscapeKeyDown: stopMenuKeyPropagation/* stopEscapePropagation */.s,
+    onKeyDown: stopMenuKeyPropagation/* stopKeyPropagation */.a,
+    side: "top"
+  }, resinAttributes), /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowTriggerContext.Provider, {
+    value: triggerRef
+  }, items.map(({
+    id,
+    menu
+  }) => /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, {
+    key: id
+  }, menu)))));
+}
+;// ./src/lib/viewers/controls/controls-bar/useControlsOverflow.ts
+
+
+
+const ALWAYS_OVERFLOW = 0;
+// The space the mocks leave between the bar and the edges of the viewer
+const EDGE_MARGIN = 40;
+// One toolbar button, the estimate for a control or the overflow trigger before it has been measured
+const DEFAULT_WIDTH = 32;
+const isCollapsible = ({
+  menu,
+  priority
+}) => !!menu && priority !== undefined;
+function getOverflowIds(items, availableWidth, metrics) {
+  const {
+    chrome,
+    gap,
+    triggerWidth = DEFAULT_WIDTH,
+    widths
+  } = metrics;
+  const overflowIds = new Set(items.filter(item => isCollapsible(item) && item.priority === ALWAYS_OVERFLOW).map(({
+    id
+  }) => id));
+  const getBarWidth = () => {
+    const slots = items.filter(({
+      id
+    }) => !overflowIds.has(id)).map(({
+      id
+    }) => widths.get(id) ?? DEFAULT_WIDTH);
+    if (overflowIds.size) {
+      slots.push(triggerWidth);
+    }
+    return chrome + slots.reduce((total, width) => total + width, 0) + gap * Math.max(slots.length - 1, 0);
+  };
+  const priorities = items.filter(item => isCollapsible(item) && item.priority !== ALWAYS_OVERFLOW).map(({
+    priority
+  }) => priority).sort((a, b) => a - b);
+  Array.from(new Set(priorities)).every(priority => {
+    if (getBarWidth() <= availableWidth) {
+      return false;
+    }
+    items.filter(item => isCollapsible(item) && item.priority === priority).forEach(({
+      id
+    }) => overflowIds.add(id));
+    return true;
+  });
+  return overflowIds;
+}
+const getStyleWidth = (style, properties) => properties.reduce((total, property) => total + (parseFloat(style.getPropertyValue(property)) || 0), 0);
+function useControlsOverflow(items) {
+  const barRef = external_react_["default"].useRef(null);
+  const metricsRef = external_react_["default"].useRef({
+    chrome: 0,
+    gap: 0,
+    widths: new Map()
+  });
+  const portalContainer = external_react_["default"].useContext(BlueprintProviders/* PortalContainerContext */.n);
+  const [availableWidth, setAvailableWidth] = external_react_["default"].useState(Number.POSITIVE_INFINITY);
+  const [, forceUpdate] = external_react_["default"].useReducer(count => count + 1, 0);
+
+  // A control can only be measured while it is on the bar, so each width is cached as it renders and
+  // reused to decide whether that control would fit again
+  external_react_["default"].useLayoutEffect(() => {
+    const bar = barRef.current;
+    if (!bar) {
+      return;
+    }
+    const metrics = metricsRef.current;
+    const style = window.getComputedStyle(bar);
+    const chrome = getStyleWidth(style, ['padding-left', 'padding-right', 'border-left-width', 'border-right-width']);
+    const gap = getStyleWidth(style, ['column-gap']);
+    let hasChanged = chrome !== metrics.chrome || gap !== metrics.gap;
+    metrics.chrome = chrome;
+    metrics.gap = gap;
+    Array.from(bar.children).forEach(child => {
+      const {
+        offsetWidth
+      } = child;
+      const {
+        overflowId,
+        overflowTrigger
+      } = child.dataset;
+      if (!offsetWidth) {
+        return;
+      }
+      if (overflowId && metrics.widths.get(overflowId) !== offsetWidth) {
+        metrics.widths.set(overflowId, offsetWidth);
+        hasChanged = true;
+      }
+      if (overflowTrigger !== undefined && metrics.triggerWidth !== offsetWidth) {
+        metrics.triggerWidth = offsetWidth;
+        hasChanged = true;
+      }
+    });
+    if (hasChanged) {
+      forceUpdate();
+    }
+  });
+
+  // The bar renders nothing without items, so the viewer lookup reruns once it mounts
+  const hasItems = items.length > 0;
+
+  // The controls root is centered and shrinks to fit the bar, so the space the bar can grow into is the
+  // viewer's. Fullscreen resizes the viewer too, which the observer picks up.
+  external_react_["default"].useLayoutEffect(() => {
+    const container = portalContainer ?? barRef.current?.closest(`.${constants/* CLASS_BOX_PREVIEW_CONTENT */.SG}`) ?? null;
+    if (!container) {
+      return undefined;
+    }
+    const updateAvailableWidth = () => {
+      const {
+        clientWidth
+      } = container;
+
+      // A container that has not been laid out yet measures zero, which would collapse everything
+      setAvailableWidth(clientWidth > 0 ? clientWidth - EDGE_MARGIN : Number.POSITIVE_INFINITY);
+    };
+    updateAvailableWidth();
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    const observer = new ResizeObserver(updateAvailableWidth);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [hasItems, portalContainer]);
+  const overflowIds = getOverflowIds(items, availableWidth, metricsRef.current);
+  return {
+    barRef,
+    overflowItems: items.filter(({
+      id
+    }) => overflowIds.has(id)),
+    visibleItems: items.filter(({
+      id
+    }) => !overflowIds.has(id))
+  };
+}
+;// ./src/lib/viewers/controls/controls-bar/ResponsiveControlsBarV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/controls-bar/ResponsiveControlsBarV2.tsx
+
+
+
+
+
+// Moves controls into an overflow menu as the viewer narrows. Bars that always show everything, like the
+// annotations palette, use ControlsBarV2 directly.
+function ResponsiveControlsBarV2({
+  items
+}) {
+  const {
+    barRef,
+    overflowItems,
+    visibleItems
+  } = useControlsOverflow(items);
+  if (!items.length) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, {
+    ref: barRef
+  }, visibleItems.map(({
+    control,
+    id
+  }) => /*#__PURE__*/external_react_["default"].createElement("div", {
+    key: id,
+    className: "bp-ResponsiveControlsBarV2-item",
+    "data-overflow-id": id
+  }, control)), overflowItems.length > 0 && /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowMenuV2, {
+    items: overflowItems
+  }));
+}
+;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMaximize"
+
+;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMinimize"
+
+;// ./src/lib/viewers/controls/fullscreen/FullscreenToggleV2.tsx
+/* provided dependency */ var FullscreenToggleV2_ = __webpack_require__(441)["Tl"];
+const FullscreenToggleV2_excluded = ["onFullscreenToggle"];
+function FullscreenToggleV2_extends() { return FullscreenToggleV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, FullscreenToggleV2_extends.apply(null, arguments); }
+function FullscreenToggleV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = FullscreenToggleV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function FullscreenToggleV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+function FullscreenToggleV2(_ref) {
+  let {
+      onFullscreenToggle
+    } = _ref,
+    rest = FullscreenToggleV2_objectWithoutProperties(_ref, FullscreenToggleV2_excluded);
+  const isFullscreen = useFullscreen();
+  const icon = isFullscreen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__;
+  const label = isFullscreen ? FullscreenToggleV2_('exit_fullscreen') : FullscreenToggleV2_('enter_fullscreen');
+  const handleClick = ({
+    currentTarget
+  }) => {
+    onFullscreenToggle(!isFullscreen, currentTarget);
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: label
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, FullscreenToggleV2_extends({
+    "aria-label": label,
+    "data-resin-target": "fullscreen",
+    onClick: handleClick
+  }, rest), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: icon
+  })));
+}
+;// ./src/lib/viewers/controls/controls-bar/shortcuts.ts
+/* provided dependency */ var shortcuts_ = __webpack_require__(441)["Tl"];
+
+// iPads report a Mac user agent, and their keyboards have the command key too
+const isApplePlatform = () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+
+// Preview binds its shortcuts to both Cmd and Ctrl, so each platform is shown the modifier its keyboard labels
+function getShortcut(key) {
+  return isApplePlatform() ? {
+    keys: `Meta+${key}`,
+    label: `⌘ + ${key}`
+  } : {
+    keys: `Control+${key}`,
+    label: (0,util/* replacePlaceholders */.Lb)(shortcuts_('controls_shortcut_ctrl'), [key])
+  };
+}
+;// ./src/lib/viewers/controls/controls-bar/ControlsMenuItemV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/controls-bar/ControlsMenuItemV2.tsx
+const ControlsMenuItemV2_excluded = ["bareKey", "icon", "keepOpen", "label", "onSelect", "shortcutKey"];
+function ControlsMenuItemV2_extends() { return ControlsMenuItemV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsMenuItemV2_extends.apply(null, arguments); }
+function ControlsMenuItemV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsMenuItemV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function ControlsMenuItemV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+
+
+
+
+
+// The menu form of a bar control. Toggles are plain rows whose label names the next action, since checkbox
+// rows reserve space for a checkmark that the mocks do not have.
+function ControlsMenuItemV2(_ref) {
+  let {
+      bareKey,
+      icon,
+      keepOpen,
+      label,
+      onSelect,
+      shortcutKey
+    } = _ref,
+    rest = ControlsMenuItemV2_objectWithoutProperties(_ref, ControlsMenuItemV2_excluded);
+  const triggerRef = external_react_["default"].useContext(ControlsOverflowTriggerContext);
+  let shortcut = null;
+  if (shortcutKey) {
+    shortcut = getShortcut(shortcutKey);
+  } else if (bareKey) {
+    shortcut = {
+      keys: bareKey,
+      label: bareKey
+    };
+  }
+  const handleSelect = event => {
+    if (keepOpen) {
+      event.preventDefault();
+    }
+    onSelect(triggerRef.current);
+  };
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, ControlsMenuItemV2_extends({
+    "aria-keyshortcuts": shortcut?.keys,
+    onSelect: handleSelect
+  }, rest, {
+    className: "bp-ControlsMenuItemV2"
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
+    icon: icon
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
+    label: label
+  }), shortcut && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.EndElement, {
+    "aria-hidden": true
+  }, shortcut.label));
+}
+;// ./src/lib/viewers/controls/fullscreen/FullscreenMenuItemV2.tsx
+/* provided dependency */ var FullscreenMenuItemV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+// Viewers using this menu row bind F to fullscreen while the Blueprint controls bar is on
+function FullscreenMenuItemV2({
+  onFullscreenToggle
+}) {
+  const isFullscreen = useFullscreen();
+  return /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
+    bareKey: "F",
+    "data-resin-target": "fullscreen",
+    icon: isFullscreen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__,
+    label: isFullscreen ? FullscreenMenuItemV2_('exit_fullscreen') : FullscreenMenuItemV2_('enter_fullscreen'),
+    onSelect: trigger => onFullscreenToggle(!isFullscreen, trigger)
+  });
+}
+;// external "@box/blueprint-web-assets/icons/Medium/RotateLeft"
+
+;// ./src/lib/viewers/controls/rotate/RotateControlV2.tsx
+/* provided dependency */ var RotateControlV2_ = __webpack_require__(441)["Tl"];
+
+
+
+function RotateControlV2({
+  onRotateLeft
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: RotateControlV2_('rotate_left')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": RotateControlV2_('rotate_left'),
+    "data-resin-target": "rotate",
+    onClick: onRotateLeft
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__
+  })));
+}
+;// ./src/lib/viewers/controls/rotate/RotateMenuItemV2.tsx
+
+
+
+// Viewers using this menu row bind R to rotate while the Blueprint controls bar is on
+function RotateMenuItemV2({
+  label,
+  onRotateLeft
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
+    bareKey: "R",
+    "data-resin-target": "rotate",
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__,
+    label: label,
+    onSelect: () => onRotateLeft()
+  });
+}
+;// external "@box/blueprint-web-assets/icons/Medium/Minus"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Plus"
+
+;// ./src/lib/viewers/controls/zoom/ZoomControlsV2.tsx
+/* provided dependency */ var ZoomControlsV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+
+function getZoomState({
+  maxScale = MAX_SCALE,
+  minScale = MIN_SCALE,
+  scale = 1
+}) {
+  const currentScale = Math.round((scale + Number.EPSILON) * 100) / 100;
+  const maxScaleValue = isFinite_default()(maxScale) ? Math.min(maxScale, MAX_SCALE) : MAX_SCALE;
+  const minScaleValue = isFinite_default()(minScale) ? Math.max(minScale, MIN_SCALE) : MIN_SCALE;
+  return {
+    canZoomIn: currentScale < maxScaleValue,
+    canZoomOut: currentScale > minScaleValue,
+    currentScale
+  };
+}
+function ZoomControlsV2({
+  maxScale,
+  minScale,
+  onZoomIn,
+  onZoomOut,
+  resinTargetZoomIn = 'zoomIn',
+  resinTargetZoomOut = 'zoomOut',
+  scale
+}) {
+  const {
+    canZoomIn,
+    canZoomOut,
+    currentScale
+  } = getZoomState({
+    maxScale,
+    minScale,
+    scale
+  });
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: ZoomControlsV2_('zoom_out')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": ZoomControlsV2_('zoom_out'),
+    "data-resin-target": resinTargetZoomOut,
+    "data-testid": "bp-ZoomControls-out",
+    disabled: !canZoomOut,
+    onClick: onZoomOut
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__
+  }))), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "span",
+    color: "textOnDarkDefault",
+    "data-testid": "bp-ZoomControls-current",
+    title: ZoomControlsV2_('zoom_current_scale'),
+    variant: "bodyDefaultSemibold"
+  }, `${Math.round(currentScale * 100)}%`), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: ZoomControlsV2_('zoom_in')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": ZoomControlsV2_('zoom_in'),
+    "data-resin-target": resinTargetZoomIn,
+    "data-testid": "bp-ZoomControls-in",
+    disabled: !canZoomIn,
+    onClick: onZoomIn
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__
+  }))));
+}
+;// ./src/lib/viewers/controls/zoom/ZoomMenuItemsV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/zoom/ZoomMenuItemsV2.tsx
+/* provided dependency */ var ZoomMenuItemsV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+
+
+
+
+// The overflow menu form of the zoom controls: the current scale, then zoom in and zoom out
+function ZoomMenuItemsV2({
+  maxScale,
+  minScale,
+  onZoomIn,
+  onZoomOut,
+  resinTargetZoomIn = 'zoomIn',
+  resinTargetZoomOut = 'zoomOut',
+  scale
+}) {
+  const {
+    canZoomIn,
+    canZoomOut,
+    currentScale
+  } = getZoomState({
+    maxScale,
+    minScale,
+    scale
+  });
+  const scaleLabel = (0,util/* replacePlaceholders */.Lb)(ZoomMenuItemsV2_('controls_zoom_scale'), [`${Math.round(currentScale * 100)}%`]);
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "div",
+    className: "bp-ZoomMenuItemsV2-scale",
+    color: "textOnLightSecondary",
+    "data-testid": "bp-ZoomMenuItems-scale",
+    variant: "caption"
+  }, scaleLabel), /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
+    "data-resin-target": resinTargetZoomIn,
+    "data-testid": "bp-ZoomControls-in-menuItem",
+    disabled: !canZoomIn,
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__,
+    keepOpen: true,
+    label: ZoomMenuItemsV2_('zoom_in'),
+    onSelect: () => onZoomIn()
+  }), /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
+    "data-resin-target": resinTargetZoomOut,
+    "data-testid": "bp-ZoomControls-out-menuItem",
+    disabled: !canZoomOut,
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__,
+    keepOpen: true,
+    label: ZoomMenuItemsV2_('zoom_out'),
+    onSelect: () => onZoomOut()
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Separator, null));
+}
+;// ./src/lib/viewers/image/ImageControlsV2.tsx
+/* provided dependency */ var ImageControlsV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+
+
+
+
+
+
+// The same collapse order as documents: rotate, then fullscreen, then zoom. The markup trigger has no menu
+// form and never collapses.
+const PRIORITY = {
+  fullscreen: 2,
+  rotate: 1,
+  zoom: 3
+};
+function ImageControlsV2({
+  annotationColor,
+  annotationMode = AnnotationMode.NONE,
+  experiences,
+  hasDrawing,
+  hasHighlight,
+  hasRegion,
+  onAnnotationColorChange,
+  onAnnotationModeClick = (noop_default()),
+  onAnnotationModeEscape,
+  onFullscreenToggle,
+  onRotateLeft,
+  onZoomIn,
+  onZoomOut,
+  scale
+}) {
+  const annotationModes = useAnnotationModes({
+    hasDrawing,
+    hasHighlight,
+    hasRegion
+  });
+  const hasAnnotations = annotationModes.length > 0;
+  const zoomProps = {
+    onZoomIn,
+    onZoomOut,
+    scale
+  };
+  const items = [{
+    control: /*#__PURE__*/external_react_["default"].createElement(ZoomControlsV2, zoomProps),
+    id: 'zoom',
+    menu: /*#__PURE__*/external_react_["default"].createElement(ZoomMenuItemsV2, zoomProps),
+    priority: PRIORITY.zoom
+  }, {
+    control: /*#__PURE__*/external_react_["default"].createElement(RotateControlV2, {
+      onRotateLeft: onRotateLeft
+    }),
+    id: 'rotate',
+    menu: /*#__PURE__*/external_react_["default"].createElement(RotateMenuItemV2, {
+      label: ImageControlsV2_('controls_rotate_image'),
+      onRotateLeft: onRotateLeft
+    }),
+    priority: PRIORITY.rotate
+  }, {
+    control: /*#__PURE__*/external_react_["default"].createElement(FullscreenToggleV2, {
+      onFullscreenToggle: onFullscreenToggle
+    }),
+    id: 'fullscreen',
+    menu: /*#__PURE__*/external_react_["default"].createElement(FullscreenMenuItemV2, {
+      onFullscreenToggle: onFullscreenToggle
+    }),
+    priority: PRIORITY.fullscreen
+  }, hasAnnotations && {
+    control: /*#__PURE__*/external_react_["default"].createElement(AnnotationsControlsV2, {
+      annotationMode: annotationMode,
+      modes: annotationModes,
+      onAnnotationModeClick: onAnnotationModeClick,
+      onAnnotationModeEscape: onAnnotationModeEscape
+    }),
+    id: 'annotations'
+  }];
+  return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
+    experiences: experiences
+  }, /*#__PURE__*/external_react_["default"].createElement(ResponsiveControlsBarV2, {
+    items: items.filter(item => !!item)
+  }), hasAnnotations && /*#__PURE__*/external_react_["default"].createElement(AnnotationsPaletteControlsV2, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    modes: annotationModes,
+    onAnnotationColorChange: onAnnotationColorChange,
+    onAnnotationModeClick: onAnnotationModeClick
+  }));
+}
+;// ./src/lib/viewers/image/Image.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/image/ImageViewer.js
+
+
+
+
+
+
+
+
+
+
+const CSS_CLASS_IMAGE = 'bp-image';
+const IMAGE_PADDING = 15;
+const IMAGE_ZOOM_SCALE = 1.2;
+class ImageViewer extends image_ImageBaseViewer {
+  /** @inheritdoc */
+  constructor(options) {
+    super(options);
+    this.api = options.api;
+
+    // Bind context for callbacks
+    this.applyCursorFtux = this.applyCursorFtux.bind(this);
+    this.finishLoading = this.finishLoading.bind(this);
+    this.getViewportDimensions = this.getViewportDimensions.bind(this);
+    this.handleAnnotationColorChange = this.handleAnnotationColorChange.bind(this);
+    this.handleAnnotationControlsClick = this.handleAnnotationControlsClick.bind(this);
+    this.handleAnnotationCreateEvent = this.handleAnnotationCreateEvent.bind(this);
+    this.handleAssetAndRepLoad = this.handleAssetAndRepLoad.bind(this);
+    this.handleImageDownloadError = this.handleImageDownloadError.bind(this);
+    this.handleZoomEvent = this.handleZoomEvent.bind(this);
+    this.rotateLeft = this.rotateLeft.bind(this);
+    this.updateDiscoverabilityResinTag = this.updateDiscoverabilityResinTag.bind(this);
+    this.updateExperiences = this.updateExperiences.bind(this);
+    this.updatePannability = this.updatePannability.bind(this);
+    this.annotationControlsFSM = new AnnotationControlsFSM(this.isDiscoverabilityEnabled() ? AnnotationState.REGION_TEMP : AnnotationState.NONE);
+    this.annotationControlsFSM.subscribe(this.applyCursorFtux);
+    this.annotationControlsFSM.subscribe(this.updateDiscoverabilityResinTag);
+    if (this.isMobile) {
+      this.handleOrientationChange = this.handleOrientationChange.bind(this);
+    }
+  }
+
+  /**
+   * [destructor]
+   *
+   * @return {void}
+   */
+  destroy() {
+    if (this.isDiscoverabilityEnabled()) {
+      this.removeListener('zoom', this.handleZoomEvent);
+    }
+
+    // Blob URLs stay allocated until revoked.
+    if (this.imageEl && this.imageEl.src && this.imageEl.src.startsWith('blob:')) {
+      URL.revokeObjectURL(this.imageEl.src);
+    }
+    super.destroy();
+  }
+
+  /**
+   * @inheritdoc
+   */
+  setup() {
+    if (this.isSetup) {
+      return;
+    }
+
+    // Call super() to set up common layout
+    super.setup();
+    this.wrapperEl = this.createViewer(document.createElement('div'));
+    this.wrapperEl.classList.add(CSS_CLASS_IMAGE);
+    this.imageEl = this.wrapperEl.appendChild(document.createElement('img'));
+    this.imageEl.setAttribute('data-page-number', 1);
+
+    // hides image tag until content is loaded
+    this.imageEl.classList.add(constants/* CLASS_INVISIBLE */.Zb);
+    this.currentRotationAngle = 0;
+    const fileName = get_default()(this.options, 'file.name');
+    this.imageEl.setAttribute('alt', fileName);
+    if (this.isDiscoverabilityEnabled()) {
+      this.addListener('zoom', this.handleZoomEvent);
+    }
+    this.updateDiscoverabilityResinTag();
+  }
+
+  /**
+   * Loads an Image.
+   *
+   * @return {Promise}
+   */
+  load() {
+    super.load();
+    const {
+      representation,
+      viewer
+    } = this.options;
+    const template = representation.content.url_template;
+    this.bindDOMListeners();
+    const contentUrl = this.createContentUrlV2(template, viewer.ASSET);
+    return this.getRepStatus().getPromise().then(() => {
+      this.startLoadTimer();
+      return this.fetchContentAsBlobUrl(contentUrl);
+    }).then(blobUrl => {
+      if (this.isDestroyed()) {
+        URL.revokeObjectURL(blobUrl);
+        return;
+      }
+      this.imageEl.src = blobUrl;
+      if (this.imageEl.complete) {
+        this.finishLoading();
+      }
+      super.handleAssetAndRepLoad();
+    }).catch(this.handleAssetError);
+  }
+
+  /**
+   * Loads the image to be viewed
+   *
+   * @override
+   * @return {void}
+   */
+  handleAssetAndRepLoad(downloadUrl) {
+    this.startLoadTimer();
+    this.imageEl.src = downloadUrl;
+    if (this.imageEl.complete) {
+      this.finishLoading();
+    }
+    super.handleAssetAndRepLoad();
+  }
+  finishLoading() {
+    this.hidePreviewMask();
+    this.emitFirstRenderMetric();
+    return super.finishLoading();
+  }
+
+  /**
+   * Emits first render time metric.
+   * Overrides base implementation to use BaseViewer's emitMetric(event, data) format.
+   *
+   * @protected
+   * @return {void}
+   */
+  emitFirstRenderMetric() {
+    if (this.isDestroyed() || this.firstRenderEmitted) {
+      return;
+    }
+    const {
+      file
+    } = this.options;
+    const tag = lib_Timer.createTag(file.id, lib_events/* FIRST_RENDER_METRIC */.VT);
+    const time = lib_Timer.stop(tag);
+    if (time && time.elapsed) {
+      this.emitMetric(lib_events/* LOAD_METRIC */.Yy.firstRenderTime, time.elapsed);
+      this.firstRenderEmitted = true;
+    }
+  }
+
+  /**
+   * Prefetches assets for an image.
+   *
+   * @param {boolean} [options.content] - Whether or not to prefetch rep content
+   * @return {void}
+   */
+  prefetch({
+    content = true,
+    preload = false
+  } = {}) {
+    const {
+      file,
+      representation,
+      viewer
+    } = this.options;
+    const isWatermarked = file && file.watermark_info && file.watermark_info.is_watermarked;
+    if ((content || preload) && !isWatermarked && this.isRepresentationReady(representation)) {
+      const template = representation.content.url_template;
+      const contentUrl = this.createContentUrlV2(template, viewer.ASSET);
+      this.api.get(contentUrl, {
+        type: 'blob',
+        headers: this.appendAuthHeader()
+      }).catch(err => {
+        console.warn('Image prefetch failed', err); // eslint-disable-line no-console
+      });
+    }
+  }
+
+  /**
+   * Can the viewer currently be panned
+   *
+   * @private
+   * @return {void}
+   */
+  updatePannability() {
+    if (!this.imageEl) {
+      return;
+    }
+    if (this.isRotated()) {
+      this.isPannable = this.imageEl.height > this.wrapperEl.clientWidth || this.imageEl.width > this.wrapperEl.clientHeight;
+    } else {
+      this.isPannable = this.imageEl.width > this.wrapperEl.clientWidth || this.imageEl.height > this.wrapperEl.clientHeight;
+    }
+    this.didPan = false;
+    this.updateCursor();
+  }
+
+  /**
+   * Rotate image anti-clockwise by 90 degrees
+   *
+   * @return {void}
+   */
+  rotateLeft() {
+    this.currentRotationAngle = (this.currentRotationAngle - 90) % 3600 % 360;
+    this.imageEl.setAttribute('data-rotation-angle', this.currentRotationAngle);
+    this.imageEl.style.transform = `rotate(${this.currentRotationAngle}deg)`;
+    this.emit('rotate');
+
+    // Re-adjust image position after rotation
+    this.handleOrientationChange();
+    this.setScale(this.imageEl.offsetwidth, this.imageEl.offsetHeight);
+  }
+
+  /**
+   * Handles keyboard events for the image
+   *
+   * @param {string} key - Keydown key
+   * @return {boolean} Consumed or not
+   */
+  onKeydown(key) {
+    // This bare key belongs to the Blueprint controls bar, whose menu lists it; the older bar has no such shortcut
+    if (this.controls && (key === 'r' || key === 'R') && this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ)) {
+      this.rotateLeft();
+      return true;
+    }
+    return super.onKeydown(key);
+  }
+
+  // Annotation overrides
+  getInitialAnnotationMode() {
+    return this.isDiscoverabilityEnabled() ? AnnotationMode.REGION : AnnotationMode.NONE;
+  }
+
+  /**
+   * Gets the width & height after the transforms are applied.
+   * When an image is rotated, the width & height of an image, e.g. offsetWidth & offsetHeight,
+   * are the values before transforms are applied, so if the image is rotated we need to swap the
+   * width & height
+   *
+   * @private
+   * @param {number} [width] - The width in px
+   * @param {number} [height] - The height in px
+   * @param {boolean} [isRotated] - if the image has a transform rotate applied to it
+   * @return {Object} the width & height of the image after tranformations
+   */
+  getTransformWidthAndHeight(width, height, isRotated) {
+    if (isRotated) {
+      return {
+        width: height,
+        height: width
+      };
+    }
+    return {
+      width,
+      height
+    };
+  }
+
+  /**
+   * Gets the viewport dimensions.
+   *
+   * @return {Object} the width & height of the viewport
+   */
+  getViewportDimensions() {
+    return {
       width: this.wrapperEl.clientWidth - 2 * IMAGE_PADDING,
       height: this.wrapperEl.clientHeight - 2 * IMAGE_PADDING
     };
@@ -41820,7 +42906,8 @@ class ImageViewer extends image_ImageBaseViewer {
     }
     const canAnnotate = this.areNewAnnotationsEnabled() && this.hasAnnotationCreatePermission();
     const canDraw = canAnnotate && this.options.showAnnotationsDrawingCreate;
-    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(ImageControls, {
+    const Controls = this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ) ? ImageControlsV2 : ImageControls;
+    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Controls, {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
       experiences: this.experiences,
@@ -42192,6 +43279,214 @@ function MultiImageControls({
     onFullscreenToggle: onFullscreenToggle
   })));
 }
+;// external "@box/blueprint-web-assets/icons/Medium/ChevronDown"
+
+;// external "@box/blueprint-web-assets/icons/Medium/ChevronUp"
+
+;// ./src/lib/viewers/controls/page/PageControlsFormV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/controls/page/PageControlsFormV2.tsx
+/* provided dependency */ var PageControlsFormV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+function PageControlsFormV2({
+  onPageSubmit,
+  pageNumber,
+  pageCount
+}) {
+  const [isInputShown, setIsInputShown] = external_react_["default"].useState(false);
+  // A string because Toolbar.Input only supports text types, so a parsed number would show "NaN" once cleared
+  const [inputValue, setInputValue] = external_react_["default"].useState(pageNumber.toString());
+  const buttonElRef = external_react_["default"].useRef(null);
+  const inputElRef = external_react_["default"].useRef(null);
+  const isRetryRef = external_react_["default"].useRef(false);
+  const setPage = (allowRetry = false) => {
+    const newPageNumber = Number(inputValue);
+    if (Number.isInteger(newPageNumber) && newPageNumber >= 1 && newPageNumber <= pageCount && newPageNumber !== pageNumber) {
+      onPageSubmit(newPageNumber);
+    } else {
+      setInputValue(pageNumber.toString()); // Reset the invalid input value to the current page
+
+      if (allowRetry) {
+        isRetryRef.current = true;
+      }
+    }
+    setIsInputShown(false);
+  };
+  const handleNumInputChange = event => {
+    setInputValue(event.target.value);
+  };
+  const handleNumInputBlur = () => {
+    setPage();
+  };
+  const handleNumInputKeyDown = event => {
+    const key = (0,util/* decodeKeydown */.wU)(event);
+    switch (key) {
+      case ENTER:
+        event.stopPropagation();
+        event.preventDefault();
+        setPage(true);
+        break;
+      case ESCAPE:
+        event.stopPropagation();
+        event.preventDefault();
+        isRetryRef.current = true;
+        setIsInputShown(false);
+        setInputValue(pageNumber.toString());
+        break;
+      default:
+        break;
+    }
+  };
+  external_react_["default"].useEffect(() => {
+    setInputValue(pageNumber.toString()); // Keep internal state in sync with prop as it changes
+  }, [pageNumber]);
+  external_react_["default"].useLayoutEffect(() => {
+    if (inputElRef.current && isInputShown) {
+      inputElRef.current.select();
+    }
+    if (buttonElRef.current && !isInputShown) {
+      if (isRetryRef.current) {
+        buttonElRef.current.focus();
+      }
+      isRetryRef.current = false;
+    }
+  }, [isInputShown]);
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-PageControlsFormV2",
+    "data-testid": "bp-PageControlsForm"
+  }, isInputShown ? /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-PageControlsFormV2-input"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Input, {
+    ref: inputElRef,
+    "aria-label": PageControlsFormV2_('enter_page_num'),
+    "data-resin-target": "pageNumberInput",
+    "data-testid": "bp-PageControlsForm-input",
+    inputMode: "numeric",
+    onBlur: handleNumInputBlur,
+    onChange: handleNumInputChange,
+    onKeyDown: handleNumInputKeyDown,
+    pattern: "[0-9]*",
+    size: 3,
+    value: inputValue
+  })) : /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: PageControlsFormV2_('enter_page_num')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    ref: buttonElRef,
+    "data-resin-target": "pageNumberOpen",
+    "data-testid": "bp-PageControlsForm-button",
+    disabled: pageCount <= 1,
+    onClick: () => setIsInputShown(true)
+  }, /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-PageControlsFormV2-button-label",
+    "data-testid": "bp-PageControlsForm-button-label"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "span",
+    color: "textOnDarkDefault"
+  }, `${pageNumber} / ${pageCount}`)))));
+}
+;// ./src/lib/viewers/controls/page/PageControlsV2.tsx
+/* provided dependency */ var PageControlsV2_ = __webpack_require__(441)["Tl"];
+
+
+
+
+
+function PageControlsV2({
+  onPageChange,
+  onPageSubmit,
+  pageCount,
+  pageNumber
+}) {
+  if (pageCount <= 1) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: PageControlsV2_('previous_page')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": PageControlsV2_('previous_page'),
+    "data-resin-target": "pagePrevious",
+    "data-testid": "bp-PageControls-previous",
+    disabled: pageNumber === 1,
+    onClick: () => onPageChange(pageNumber - 1)
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronUp_d399c022_default__
+  }))), /*#__PURE__*/external_react_["default"].createElement(PageControlsFormV2, {
+    onPageSubmit: onPageSubmit,
+    pageCount: pageCount,
+    pageNumber: pageNumber
+  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: PageControlsV2_('next_page')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
+    "aria-label": PageControlsV2_('next_page'),
+    "data-resin-target": "pageNext",
+    "data-testid": "bp-PageControls-next",
+    disabled: pageNumber === pageCount,
+    onClick: () => onPageChange(pageNumber + 1)
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
+    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__
+  }))));
+}
+;// ./src/lib/viewers/image/MultiImageControlsV2.tsx
+
+
+
+
+
+// The same collapse order as documents: fullscreen, then zoom. Page has no menu form and never collapses.
+const MultiImageControlsV2_PRIORITY = {
+  fullscreen: 2,
+  zoom: 3
+};
+function MultiImageControlsV2({
+  onFullscreenToggle,
+  onPageChange,
+  onPageSubmit,
+  onZoomIn,
+  onZoomOut,
+  pageCount,
+  pageNumber,
+  scale
+}) {
+  const zoomProps = {
+    onZoomIn,
+    onZoomOut,
+    scale
+  };
+
+  // Page is gated here rather than only inside it, so the bar never reserves width for a control that
+  // would render nothing
+  const items = [pageCount > 1 && {
+    control: /*#__PURE__*/external_react_["default"].createElement(PageControlsV2, {
+      onPageChange: onPageChange,
+      onPageSubmit: onPageSubmit,
+      pageCount: pageCount,
+      pageNumber: pageNumber
+    }),
+    id: 'page'
+  }, {
+    control: /*#__PURE__*/external_react_["default"].createElement(ZoomControlsV2, zoomProps),
+    id: 'zoom',
+    menu: /*#__PURE__*/external_react_["default"].createElement(ZoomMenuItemsV2, zoomProps),
+    priority: MultiImageControlsV2_PRIORITY.zoom
+  }, {
+    control: /*#__PURE__*/external_react_["default"].createElement(FullscreenToggleV2, {
+      onFullscreenToggle: onFullscreenToggle
+    }),
+    id: 'fullscreen',
+    menu: /*#__PURE__*/external_react_["default"].createElement(FullscreenMenuItemV2, {
+      onFullscreenToggle: onFullscreenToggle
+    }),
+    priority: MultiImageControlsV2_PRIORITY.fullscreen
+  }];
+  return /*#__PURE__*/external_react_["default"].createElement(ResponsiveControlsBarV2, {
+    items: items.filter(item => !!item)
+  });
+}
 ;// ./src/lib/viewers/image/MultiImage.scss
 // extracted by mini-css-extract-plugin
 
@@ -42205,6 +43500,7 @@ function MultiImageViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) re
 
 
 
+
 const PADDING_BUFFER = 100;
 const MultiImageViewer_CSS_CLASS_IMAGE = 'bp-images';
 const CSS_CLASS_IMAGE_WRAPPER = 'bp-images-wrapper';
@@ -42471,7 +43767,8 @@ class MultiImageViewer extends image_ImageBaseViewer {
     if (!this.controls) {
       return;
     }
-    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(MultiImageControls, {
+    const Controls = this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ) ? MultiImageControlsV2 : MultiImageControls;
+    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Controls, {
       onFullscreenToggle: this.toggleFullscreen,
       onPageChange: this.setPage,
       onPageSubmit: this.handlePageSubmit,
@@ -44444,92 +45741,56 @@ function Image360Controls({
     onVrToggle: onVrToggle
   }));
 }
-// EXTERNAL MODULE: external "@box/blueprint-web"
-var blueprint_web_ = __webpack_require__(8912);
 ;// external "@box/blueprint-web-assets/icons/Medium/VrGoggles"
 
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/controls/box3d/VrToggleControlV2.tsx
 /* provided dependency */ var VrToggleControlV2_ = __webpack_require__(441)["Tl"];
+const VrToggleControlV2_excluded = ["buttonType", "isVrShown", "onVrToggle"];
+function VrToggleControlV2_extends() { return VrToggleControlV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, VrToggleControlV2_extends.apply(null, arguments); }
+function VrToggleControlV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = VrToggleControlV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function VrToggleControlV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
 
 
-function VrToggleControlV2({
-  isVrShown,
-  onVrToggle
-}) {
-  if (!isVrShown) {
+
+
+// Toolbar.Button throws outside a Toolbar.Root, so surfaces without one (the media bar) use IconButton.
+
+function VrToggleControlV2(props) {
+  if (!props.isVrShown) {
     return null;
   }
+  if (props.buttonType === 'icon') {
+    const {
+        buttonType,
+        isVrShown,
+        onVrToggle
+      } = props,
+      rest = VrToggleControlV2_objectWithoutProperties(props, VrToggleControlV2_excluded);
+    return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: VrToggleControlV2_('box3d_toggle_vr')
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, VrToggleControlV2_extends({
+      "data-target-id": "VrToggleControlV2-toggle",
+      onKeyDown: utils/* stopActivationKeyPropagation */.My
+    }, rest, {
+      "aria-label": VrToggleControlV2_('box3d_toggle_vr'),
+      "data-resin-target": "vrToggle",
+      icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_VrGoggles_9eb581be_default__,
+      onClick: onVrToggle
+    })));
+  }
   return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
     content: VrToggleControlV2_('box3d_toggle_vr')
   }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
     "aria-label": VrToggleControlV2_('box3d_toggle_vr'),
     "data-resin-target": "vrToggle",
-    onClick: onVrToggle
+    onClick: props.onVrToggle
   }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
     icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_VrGoggles_9eb581be_default__
   })));
 }
-;// ./src/lib/viewers/controls/controls-bar/ControlsBarV2.tsx
-const ControlsBarV2_excluded = ["children"];
-function ControlsBarV2_extends() { return ControlsBarV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsBarV2_extends.apply(null, arguments); }
-function ControlsBarV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsBarV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function ControlsBarV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-
-
-function ControlsBarV2(_ref, ref) {
-  let {
-      children
-    } = _ref,
-    rest = ControlsBarV2_objectWithoutProperties(_ref, ControlsBarV2_excluded);
-  if (!children) {
-    return null;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Root, ControlsBarV2_extends({
-    ref: ref,
-    colorScheme: "dark",
-    "data-testid": "bp-ControlsBar"
-  }, rest), children);
-}
-/* harmony default export */ const controls_bar_ControlsBarV2 = (/*#__PURE__*/external_react_["default"].forwardRef(ControlsBarV2));
-;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMaximize"
-
-;// external "@box/blueprint-web-assets/icons/Medium/ArrowsMinimize"
-
-;// ./src/lib/viewers/controls/fullscreen/FullscreenToggleV2.tsx
-/* provided dependency */ var FullscreenToggleV2_ = __webpack_require__(441)["Tl"];
-const FullscreenToggleV2_excluded = ["onFullscreenToggle"];
-function FullscreenToggleV2_extends() { return FullscreenToggleV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, FullscreenToggleV2_extends.apply(null, arguments); }
-function FullscreenToggleV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = FullscreenToggleV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function FullscreenToggleV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-
-
-
-
-
-function FullscreenToggleV2(_ref) {
-  let {
-      onFullscreenToggle
-    } = _ref,
-    rest = FullscreenToggleV2_objectWithoutProperties(_ref, FullscreenToggleV2_excluded);
-  const isFullscreen = useFullscreen();
-  const icon = isFullscreen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__;
-  const label = isFullscreen ? FullscreenToggleV2_('exit_fullscreen') : FullscreenToggleV2_('enter_fullscreen');
-  const handleClick = ({
-    currentTarget
-  }) => {
-    onFullscreenToggle(!isFullscreen, currentTarget);
-  };
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: label
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, FullscreenToggleV2_extends({
-    "aria-label": label,
-    "data-resin-target": "fullscreen",
-    onClick: handleClick
-  }, rest), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: icon
-  })));
-}
 ;// ./src/lib/viewers/box3d/image360/Image360ControlsV2.tsx
 
 
@@ -45266,78 +46527,6 @@ function TextControls({
     onFullscreenToggle: onFullscreenToggle
   })));
 }
-;// external "@box/blueprint-web-assets/icons/Medium/Minus"
-
-;// external "@box/blueprint-web-assets/icons/Medium/Plus"
-
-;// ./src/lib/viewers/controls/zoom/ZoomControlsV2.tsx
-/* provided dependency */ var ZoomControlsV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-
-
-function getZoomState({
-  maxScale = MAX_SCALE,
-  minScale = MIN_SCALE,
-  scale = 1
-}) {
-  const currentScale = Math.round((scale + Number.EPSILON) * 100) / 100;
-  const maxScaleValue = isFinite_default()(maxScale) ? Math.min(maxScale, MAX_SCALE) : MAX_SCALE;
-  const minScaleValue = isFinite_default()(minScale) ? Math.max(minScale, MIN_SCALE) : MIN_SCALE;
-  return {
-    canZoomIn: currentScale < maxScaleValue,
-    canZoomOut: currentScale > minScaleValue,
-    currentScale
-  };
-}
-function ZoomControlsV2({
-  maxScale,
-  minScale,
-  onZoomIn,
-  onZoomOut,
-  resinTargetZoomIn = 'zoomIn',
-  resinTargetZoomOut = 'zoomOut',
-  scale
-}) {
-  const {
-    canZoomIn,
-    canZoomOut,
-    currentScale
-  } = getZoomState({
-    maxScale,
-    minScale,
-    scale
-  });
-  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: ZoomControlsV2_('zoom_out')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": ZoomControlsV2_('zoom_out'),
-    "data-resin-target": resinTargetZoomOut,
-    "data-testid": "bp-ZoomControls-out",
-    disabled: !canZoomOut,
-    onClick: onZoomOut
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__
-  }))), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
-    as: "span",
-    color: "textOnDarkDefault",
-    "data-testid": "bp-ZoomControls-current",
-    title: ZoomControlsV2_('zoom_current_scale'),
-    variant: "bodyDefaultSemibold"
-  }, `${Math.round(currentScale * 100)}%`), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: ZoomControlsV2_('zoom_in')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": ZoomControlsV2_('zoom_in'),
-    "data-resin-target": resinTargetZoomIn,
-    "data-testid": "bp-ZoomControls-in",
-    disabled: !canZoomIn,
-    onClick: onZoomIn
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__
-  }))));
-}
 ;// ./src/lib/viewers/text/TextControlsV2.tsx
 
 
@@ -51976,8 +53165,6 @@ const arrow_curved_forward_24px_namespaceObject = "<svg width=\"24\" height=\"24
 var MediaLoadingIndicator = __webpack_require__(4301);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayOverlayIcon.tsx
 var PlayOverlayIcon = __webpack_require__(2048);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
-var utils = __webpack_require__(5346);
 ;// ./src/lib/viewers/media/fitFrameToViewport.js
 /**
  * Contain-fits a frame into the viewport (same model as object-fit: contain).
@@ -52713,7 +53900,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     this.bufferingSpinnerEl = this.mediaContainerEl.appendChild(document.createElement('div'));
     this.bufferingSpinnerEl.classList.add(constants/* CLASS_HIDDEN */.zX);
     // Shift up by half the control bar + half the spinner to visually center above the controls
-    const spinnerMarginTop = this.useReactControls() && !this.isVideoPlayerV2 ? `-${constants/* VIDEO_PLAYER_CONTROL_BAR_HEIGHT */.qL / 2 + SPINNER_HALF_SIZE}px` : undefined;
+    const spinnerMarginTop = this.useReactControls() && !this.isVideoControlsV2Enabled() ? `-${constants/* VIDEO_PLAYER_CONTROL_BAR_HEIGHT */.qL / 2 + SPINNER_HALF_SIZE}px` : undefined;
     if (this.isBlueprintMediaControlsEnabled()) {
       this.bufferingSpinnerRoot = (0,client_.createRoot)(this.bufferingSpinnerEl);
       this.bufferingSpinnerRoot.render(/*#__PURE__*/external_react_["default"].createElement(MediaLoadingIndicator/* default */.A, {
@@ -52739,6 +53926,16 @@ class VideoBaseViewer extends media_MediaBaseViewer {
     return true;
   }
 
+  /**
+   * Whether to render the V2 React controls. Separate from the V2 layout so a viewer
+   * can keep its own stage and still use the V2 controls.
+   *
+   * @return {boolean} true when the V2 controls should render
+   */
+  isVideoControlsV2Enabled() {
+    return this.isVideoPlayerV2;
+  }
+
   /**
    * Loads a media source.
    *
@@ -53047,9 +54244,9 @@ class VideoBaseViewer extends media_MediaBaseViewer {
   loadUIReact() {
     super.loadUIReact();
 
-    // For the V2 player, mount the controls on the wrapper (above the media container)
+    // For the V2 controls, mount on the wrapper (above the media container)
     // so their width is constrained by the viewport rather than the video
-    const controlsContainerEl = this.isVideoPlayerV2 ? this.wrapperEl : this.mediaContainerEl;
+    const controlsContainerEl = this.isVideoControlsV2Enabled() ? this.wrapperEl : this.mediaContainerEl;
     this.controls = new ControlsRoot({
       className: 'bp-VideoControlsRoot',
       containerEl: controlsContainerEl,
@@ -53368,7 +54565,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
    */
   handleNarrowVideoUI() {
     if (this.useReactControls()) {
-      const widthNumber = this.isVideoPlayerV2 ? this.wrapperEl.clientWidth : parseInt(this.mediaEl.style.width, 10);
+      const widthNumber = this.isVideoControlsV2Enabled() ? this.wrapperEl.clientWidth : parseInt(this.mediaEl.style.width, 10);
       if (!Number.isNaN(widthNumber)) {
         // check if play and seek buttons exist in the dom
         if (this.playContainerEl && widthNumber >= SMALL_VIDEO_WIDTH_THRESHOLD) {
@@ -53546,27 +54743,6 @@ function MediaFullscreenToggle(props) {
 var Medium_ = __webpack_require__(9747);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
 var MediaToggle = __webpack_require__(8997);
-;// ./src/lib/viewers/controls/tooltip/ToggleTooltipV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/tooltip/ToggleTooltipV2.tsx
-
-
-
-// Blueprint's Tooltip writes its own data-state onto the element it wraps, which overwrites the
-// data-state Toolbar.ToggleItem uses for its selected styling, so the tooltip gets its own element.
-function ToggleTooltipV2({
-  children,
-  content,
-  side
-}) {
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: content,
-    side: side
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-ToggleTooltipV2"
-  }, children));
-}
 ;// ./src/lib/viewers/controls/media/SubtitlesToggle.scss
 // extracted by mini-css-extract-plugin
 
@@ -53760,8 +54936,8 @@ var MediaSettingsV2 = __webpack_require__(4027);
 var PlayPauseButton = __webpack_require__(5760);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
 var SkipButton = __webpack_require__(2659);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 3 modules
-var TimestampControl = __webpack_require__(3308);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/TimestampControl.tsx + 1 modules
+var TimestampControl = __webpack_require__(3904);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
 var formatTimecode = __webpack_require__(4179);
 ;// ./src/lib/viewers/controls/media/FilmstripV2.scss
@@ -54110,6 +55286,13 @@ function TimeControlsV2({
 
 
 
+function isFocusVisible(el) {
+  try {
+    return !!el?.matches(':focus-visible');
+  } catch {
+    return true;
+  }
+}
 function VideoFullscreenButton({
   mediaEl,
   onFullscreenToggle,
@@ -54119,11 +55302,21 @@ function VideoFullscreenButton({
   const title = isFullscreen ? VideoFullscreenButton_('exit_fullscreen') : VideoFullscreenButton_('enter_fullscreen');
   const ref = external_react_["default"].useRef(null);
   const [position, setPosition] = external_react_["default"].useState(null);
+  const [isTooltipOpen, setIsTooltipOpen] = external_react_["default"].useState(false);
+  const isHoveredRef = external_react_["default"].useRef(false);
   external_react_["default"].useEffect(() => {
     if (!mediaEl) return undefined;
+    const observed = {};
     const update = () => {
       const parent = ref.current?.offsetParent;
       if (!parent) return;
+      if (parent !== observed.parent) {
+        if (observed.parent) {
+          observed.observer?.unobserve(observed.parent);
+        }
+        observed.parent = parent;
+        observed.observer?.observe(parent);
+      }
       const videoRect = mediaEl.getBoundingClientRect();
       const parentRect = parent.getBoundingClientRect();
       setPosition({
@@ -54131,17 +55324,20 @@ function VideoFullscreenButton({
         right: parentRect.right - videoRect.right + 24
       });
     };
-    update();
 
     // Watch both the video and the overlay parent. A sibling layout change
     // (e.g. a host-page sidebar) can shrink the parent and re-center the
     // video without changing the video element's box size, so observing
     // mediaEl alone would leave the button at a stale `right` offset.
+    // The button is watched too: it has no offsetParent while the preview is hidden during load, and the
+    // video can reach its final size before then, so the button appearing may be the only signal left.
     const resizeObserver = new ResizeObserver(update);
+    observed.observer = resizeObserver;
     resizeObserver.observe(mediaEl);
-    if (ref.current?.offsetParent) {
-      resizeObserver.observe(ref.current.offsetParent);
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
     }
+    update();
     window.addEventListener('resize', update);
     return () => {
       resizeObserver.disconnect();
@@ -54153,6 +55349,13 @@ function VideoFullscreenButton({
   }) => {
     onFullscreenToggle(!isFullscreen, target);
   };
+
+  // The viewer refocuses this button after a fullscreen change, mid-relayout. Show the tooltip for
+  // hover or keyboard focus only, not for that refocus after a mouse click.
+  const handleTooltipOpenChange = open => {
+    if (open && !isHoveredRef.current && !isFocusVisible(document.activeElement)) return;
+    setIsTooltipOpen(open);
+  };
   const positionStyle = position ? {
     top: position.top,
     right: position.right
@@ -54161,9 +55364,17 @@ function VideoFullscreenButton({
     return /*#__PURE__*/external_react_["default"].createElement("div", {
       ref: ref,
       className: "bp-VideoFullscreenButton-position",
+      onPointerEnter: () => {
+        isHoveredRef.current = true;
+      },
+      onPointerLeave: () => {
+        isHoveredRef.current = false;
+      },
       style: positionStyle
     }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-      content: title
+      content: title,
+      onOpenChange: handleTooltipOpenChange,
+      open: isTooltipOpen
     }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
       "aria-label": title,
       "data-resin-target": "videoFullscreen",
@@ -54245,238 +55456,6 @@ function AnnotationsPaletteAnchorV2({
     }
   }, children), container);
 }
-;// external "@box/blueprint-web-assets/icons/Medium/PencilTip"
-
-;// external "@box/blueprint-web-assets/icons/Medium/SquarePlus"
-
-;// external "@box/blueprint-web-assets/icons/Medium/TCursorHighlight"
-
-;// ./src/lib/viewers/controls/annotations/annotationModeIcons.ts
-
-
-
-
-const ANNOTATION_MODE_ICONS = {
-  [AnnotationMode.DRAWING]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_PencilTip_154ad3fd_default__,
-  [AnnotationMode.HIGHLIGHT]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_TCursorHighlight_508374cb_default__,
-  [AnnotationMode.REGION]: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_SquarePlus_c11758f1_default__
-};
-/* harmony default export */ const annotationModeIcons = (ANNOTATION_MODE_ICONS);
-;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/annotations/AnnotationsPaletteV2.tsx
-/* provided dependency */ var AnnotationsPaletteV2_ = __webpack_require__(441)["Tl"];
-function AnnotationsPaletteV2_extends() { return AnnotationsPaletteV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, AnnotationsPaletteV2_extends.apply(null, arguments); }
-
-
-
-
-
-
-
-
-function AnnotationsPaletteV2({
-  children
-}) {
-  return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-AnnotationsPaletteV2",
-    "data-testid": "bp-AnnotationsPaletteV2"
-  }, /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, null, children));
-}
-function Modes({
-  annotationMode,
-  children,
-  onAnnotationModeClick = (noop_default())
-}) {
-  // The single-select group reports an empty value when the active mode is clicked again. Exiting
-  // is left to the trigger on the main bar, so the palette never closes under the cursor.
-  const handleModeChange = mode => {
-    if (!mode || mode === annotationMode) {
-      return;
-    }
-    onAnnotationModeClick({
-      mode: mode
-    });
-  };
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
-    "data-testid": "bp-annotations-controls",
-    onValueChange: handleModeChange,
-    type: "single",
-    value: annotationMode
-  }, children);
-}
-function Mode({
-  value
-}) {
-  const {
-    label,
-    resinTarget,
-    testId
-  } = {
-    [AnnotationMode.DRAWING]: {
-      label: AnnotationsPaletteV2_('drawing_comment'),
-      resinTarget: 'draw',
-      testId: 'bp-AnnotationsControls-drawBtn'
-    },
-    [AnnotationMode.HIGHLIGHT]: {
-      label: AnnotationsPaletteV2_('highlight_text'),
-      resinTarget: 'highlightText',
-      testId: 'bp-AnnotationsControls-highlightBtn'
-    },
-    [AnnotationMode.REGION]: {
-      label: AnnotationsPaletteV2_('region_comment'),
-      resinTarget: 'highlightRegion',
-      testId: 'bp-AnnotationsControls-regionBtn'
-    }
-  }[value];
-  return /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
-    content: label
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, {
-    "aria-label": label,
-    "data-resin-target": resinTarget,
-    "data-testid": testId,
-    icon: annotationModeIcons[value],
-    value: value
-  }));
-}
-/* harmony default export */ const annotations_AnnotationsPaletteV2 = (AnnotationsPaletteV2_extends(AnnotationsPaletteV2, {
-  Mode,
-  Modes
-}));
-;// external "@box/blueprint-web-assets/icons/Medium/Comment"
-
-;// ./src/lib/viewers/controls/annotations/AnnotationsToggleV2.tsx
-/* provided dependency */ var AnnotationsToggleV2_ = __webpack_require__(441)["Tl"];
-function AnnotationsToggleV2_extends() { return AnnotationsToggleV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, AnnotationsToggleV2_extends.apply(null, arguments); }
-
-
-
-
-
-
-
-// The toolbar parts throw outside a Toolbar.Root, so surfaces without one (the media bar) use a standalone button.
-
-const TOGGLE_VALUE = 'annotations';
-function AnnotationsToggleV2(props, ref) {
-  const {
-    annotationMode = AnnotationMode.NONE,
-    isExpanded,
-    modes,
-    onAnnotationModeClick = (noop_default()),
-    onAnnotationModeEscape = (noop_default()),
-    tooltipSide
-  } = props;
-  const [lastMode, setLastMode] = external_react_["default"].useState(null);
-  const isActive = annotationMode !== AnnotationMode.NONE;
-  const resumeMode = lastMode && modes.includes(lastMode) ? lastMode : modes[0];
-  external_react_["default"].useEffect(() => {
-    if (annotationMode !== AnnotationMode.NONE) {
-      setLastMode(annotationMode);
-    }
-  }, [annotationMode]);
-
-  // Global event handlers
-  external_react_["default"].useEffect(() => {
-    const handleKeyDown = event => {
-      if (event.key !== 'Escape') {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      onAnnotationModeEscape();
-    };
-    if (annotationMode !== AnnotationMode.NONE) {
-      document.addEventListener('keydown', handleKeyDown);
-    }
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [annotationMode, onAnnotationModeEscape]);
-  if (!resumeMode) {
-    return null;
-  }
-  const handleToggle = isPressed => {
-    onAnnotationModeClick({
-      mode: isPressed ? resumeMode : AnnotationMode.NONE
-    });
-  };
-  const toggleProps = {
-    ref,
-    'aria-expanded': isExpanded ?? isActive,
-    'aria-label': AnnotationsToggleV2_('annotation_tools'),
-    'data-resin-target': 'annotations',
-    'data-testid': 'bp-AnnotationsControls-toggleBtn',
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Comment_c700dfbc_default__
-  };
-  const renderToggle = toggle => /*#__PURE__*/external_react_["default"].createElement(ToggleTooltipV2, {
-    content: AnnotationsToggleV2_('annotation_tools'),
-    side: tooltipSide
-  }, toggle);
-  if (props.buttonType === 'icon') {
-    const {
-      className,
-      size,
-      variant
-    } = props;
-    return renderToggle(/*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconToggleButton, AnnotationsToggleV2_extends({}, toggleProps, {
-      className: className,
-      onPressedChange: handleToggle,
-      pressed: isActive,
-      size: size,
-      variant: variant
-    })));
-  }
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleGroup, {
-    onValueChange: value => handleToggle(value.includes(TOGGLE_VALUE)),
-    type: "multiple",
-    value: isActive ? [TOGGLE_VALUE] : []
-  }, renderToggle(/*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.ToggleItem, AnnotationsToggleV2_extends({}, toggleProps, {
-    value: TOGGLE_VALUE
-  }))));
-}
-/* harmony default export */ const annotations_AnnotationsToggleV2 = (/*#__PURE__*/external_react_["default"].forwardRef(AnnotationsToggleV2));
-;// ./src/lib/viewers/controls/color-picker/ColorPickerControlV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/color-picker/ColorPickerControlV2.tsx
-/* provided dependency */ var ColorPickerControlV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-
-const getColorLabels = () => ({
-  [AnnotationColor.BOX_BLUE]: ColorPickerControlV2_('drawing_color_blue'),
-  [AnnotationColor.GREEN_LIGHT]: ColorPickerControlV2_('drawing_color_green'),
-  [AnnotationColor.WATERMELON_RED]: ColorPickerControlV2_('drawing_color_red'),
-  [AnnotationColor.YELLORANGE]: ColorPickerControlV2_('drawing_color_orange'),
-  [AnnotationColor.YELLOW]: ColorPickerControlV2_('drawing_color_yellow'),
-  [AnnotationColor.GRIMACE]: ColorPickerControlV2_('drawing_color_purple')
-});
-function ColorPickerControlV2({
-  activeColor = __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlBoxBlue__,
-  colors,
-  onColorSelect
-}) {
-  const colorLabels = getColorLabels();
-  return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-ColorPickerControlV2",
-    "data-testid": "bp-color-picker-control"
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.SelectMenu.Grid, {
-    "aria-label": ColorPickerControlV2_('drawing_color'),
-    columns: colors.length
-  }, colors.map(color => /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.SelectMenu.Option.ColorCircle, {
-    key: color,
-    active: color === activeColor,
-    "aria-label": colorLabels[color] || color,
-    className: "bp-ColorPickerControlV2-swatch",
-    color: color,
-    "data-resin-target": "colorSelect",
-    onClick: () => onColorSelect(color)
-  }))));
-}
 ;// ./src/lib/viewers/media/VideoControlsV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -54502,6 +55481,7 @@ function ColorPickerControlV2({
 
 
 
+
 
 
 function VideoControlsV2({
@@ -54547,12 +55527,14 @@ function VideoControlsV2({
   onSubtitlesToggle,
   onTimeChange,
   onVolumeChange,
+  onVrToggle,
   playNext,
   quality,
   rate,
   subtitle,
   subtitles = [],
   isBlueprintEnabled = false,
+  isVrShown = false,
   videoAnnotationsEnabled = false,
   volume
 }) {
@@ -54709,6 +55691,12 @@ function VideoControlsV2({
     rate: rate,
     subtitle: subtitle,
     subtitles: subtitles
+  }), onVrToggle && isBlueprintEnabled && /*#__PURE__*/external_react_["default"].createElement(VrToggleControlV2, {
+    buttonType: "icon",
+    isVrShown: isVrShown,
+    onVrToggle: onVrToggle,
+    size: "large",
+    variant: "on-dark"
   }), hasAnnotationsV2 && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControlsV2-divider"
   }), /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsToggleV2, {
@@ -56315,13 +57303,22 @@ class DashViewer extends media_VideoBaseViewer {
     this.setSubtitle(showSubtitles ? this.selectedSubtitle : constants/* SUBTITLES_OFF */.eA);
   }
 
+  /**
+   * Extra props a subclass passes to the V2 controls.
+   *
+   * @protected
+   * @return {Object} props spread onto VideoControlsV2
+   */
+  getVideoControlsV2Props() {
+    return {};
+  }
+
   /**
    * @inheritdoc
    */
   renderUI() {
     // Extra guard for `render` is needed because Video360Viewer extends DashViewer
-    // and creates and assigns the 360 control to this.controls which usually has
-    // been reserved for new React controls
+    // and, without React controls, assigns its imperative 360 controls to this.controls
     if (!this.controls || !this.controls.render) {
       return;
     }
@@ -56383,11 +57380,11 @@ class DashViewer extends media_VideoBaseViewer {
         mediaEl: this.mediaEl
       }));
     }
-    if (this.isVideoPlayerV2) {
+    if (this.isVideoControlsV2Enabled()) {
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, DashViewer_extends({
         commentMarkers: this.commentMarkers,
         onCommentMarkerClick: this.handleCommentMarkerClick
-      }, sharedProps, {
+      }, sharedProps, this.getVideoControlsV2Props(), {
         onPlayNextChange: this.setPlayNext,
         playNext: this.isPlayNextEnabled(),
         isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
@@ -56792,6 +57789,8 @@ class Video360Viewer extends media_DashViewer {
     Video360Viewer_defineProperty(this, "videoAsset", void 0);
     /** @property {Box3D.Components.SkyboxRenderer} - The component for rendering the video as 360 degree (on a skybox) */
     Video360Viewer_defineProperty(this, "skybox", void 0);
+    /** @property {boolean} - Whether the React controls show the VR toggle */
+    Video360Viewer_defineProperty(this, "isVrShown", false);
     this.create360Environment = this.create360Environment.bind(this);
     this.handleToggleVr = this.handleToggleVr.bind(this);
     this.handleShowVrButton = this.handleShowVrButton.bind(this);
@@ -56804,6 +57803,30 @@ class Video360Viewer extends media_DashViewer {
     return false;
   }
 
+  /** @inheritdoc */
+  isVideoControlsV2Enabled() {
+    return this.useReactControls() && this.featureEnabled('videoPlayerV2.enabled') && this.isBlueprintMediaControlsEnabled();
+  }
+
+  /** @inheritdoc */
+  getVideoControlsV2Props() {
+    return {
+      isVrShown: this.isVrShown,
+      onVrToggle: this.handleToggleVr
+    };
+  }
+
+  /**
+   * The canvas shows the picture, so the container fills the viewer instead of fitting the video, which
+   * Video360.scss sizes to place its captions. resize() clears the container size before calling this.
+   *
+   * @inheritdoc
+   */
+  setVideoDimensions() {
+    this.mediaContainerEl.style.width = '100%';
+    this.mediaContainerEl.style.height = '100%';
+  }
+
   /** @inheritdoc */
   setup() {
     if (this.isSetup) {
@@ -56814,18 +57837,25 @@ class Video360Viewer extends media_DashViewer {
     super.setup();
     this.destroyed = false;
 
-    // Hide video element
-    this.mediaEl.style.display = 'none';
     // Instead of keeping aspect ratio of video, we want full sized canvas to render to
     this.mediaContainerEl.style.width = '100%';
     this.mediaContainerEl.style.height = '100%';
     this.wrapperEl.classList.add(CSS_CLASS_VIDEO_360);
+
+    // The video is visible for its captions, but its own picture is flat; keep it out of casting and
+    // picture-in-picture.
+    this.mediaEl.setAttribute('disableremoteplayback', '');
+    this.mediaEl.setAttribute('disablepictureinpicture', '');
+    if (this.isVideoControlsV2Enabled()) {
+      // Scopes the V2 control styles without the padded V2 container or stage
+      this.wrapperEl.classList.add('bp-media--v2');
+    }
   }
 
   /** @inheritdoc */
   destroy() {
     // Tear down 360 controls before super.destroy(), which destroys this.controls
-    // (DashViewer's React ControlsRoot when createControls() has not run yet).
+    // (DashViewer's React ControlsRoot when the imperative 360 controls never replaced it).
     if (this.video360Controls) {
       this.destroyControls();
       this.video360Controls = null;
@@ -56896,6 +57926,10 @@ class Video360Viewer extends media_DashViewer {
    * @return {void}
    */
   createControls() {
+    // The V2 React controls render the VR toggle and show themselves on pointer movement.
+    if (this.isVideoControlsV2Enabled()) {
+      return;
+    }
     this.video360Controls = new video360_Video360Controls(this.mediaContainerEl);
     // Overwrite this.controls so DashViewer.renderUI() skips React controls.
     this.controls = this.video360Controls;
@@ -56975,6 +58009,8 @@ class Video360Viewer extends media_DashViewer {
     this.textureAsset = this.renderer.getBox3D().createTexture2d(VIDEO_TEXTURE_PROPS, 'VIDEO_TEX_ID');
     return new Promise(resolve => {
       this.textureAsset.load(() => {
+        // Box3D hides the video it reads frames from; show it again so the browser draws its captions
+        this.mediaEl.style.display = '';
         this.skybox.setAttribute('skyboxTexture', this.textureAsset.id);
         this.skybox.enable();
         this.renderer.getBox3D().on('mouseDown', this.onCanvasMouseDown);
@@ -57009,6 +58045,9 @@ class Video360Viewer extends media_DashViewer {
   handleShowVrButton() {
     if (this.video360Controls) {
       this.video360Controls.showVrButton();
+    } else if (this.isVideoControlsV2Enabled()) {
+      this.isVrShown = true;
+      this.renderUI();
     }
   }
 
@@ -57137,568 +58176,195 @@ function IconGridView24(props) {
     focusable: "false",
     height: "1em",
     role: "img",
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }, props), /*#__PURE__*/external_react_.createElement("path", {
-    d: "M8 13a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2ZM6 15a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2ZM8 3a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2ZM6 5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2Z",
-    fill: "#fff",
-    fillRule: "evenodd"
-  }));
-}
-/* harmony default export */ const icons_IconGridView24 = (IconGridView24);
-;// ./src/lib/viewers/controls/gallery/GalleryToggle.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/gallery/GalleryToggle.tsx
-/* provided dependency */ var GalleryToggle_ = __webpack_require__(441)["Tl"];
-
-
-
-function GalleryToggle({
-  onGalleryToggle,
-  isGalleryOpen
-}) {
-  if (!onGalleryToggle) {
-    return null;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-pressed": isGalleryOpen,
-    className: `bp-GalleryToggle${isGalleryOpen ? ' bp-is-active' : ''}`,
-    "data-resin-target": "galleryView",
-    onClick: onGalleryToggle,
-    title: GalleryToggle_('gallery_view'),
-    type: "button"
-  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconGridView24, null));
-}
-;// ./src/lib/viewers/controls/icons/IconNavMedium24.tsx
-function IconNavMedium24_extends() { return IconNavMedium24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconNavMedium24_extends.apply(null, arguments); }
-
-function IconNavMedium24(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", IconNavMedium24_extends({
-    "data-testid": "IconNavMedium24",
-    focusable: "false",
-    height: "1em",
-    role: "img",
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }, props), /*#__PURE__*/external_react_.createElement("path", {
-    clipRule: "evenodd",
-    d: "M11 6h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8V6ZM9 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h4ZM5 18a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4v12H5Zm0-9a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H6a1 1 0 0 1-1-1Zm1 2a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2H6Z",
-    fill: "#fff",
-    fillRule: "evenodd"
-  }));
-}
-/* harmony default export */ const icons_IconNavMedium24 = (IconNavMedium24);
-;// ./src/lib/viewers/controls/icons/IconNavMediumFilled24.tsx
-function IconNavMediumFilled24_extends() { return IconNavMediumFilled24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconNavMediumFilled24_extends.apply(null, arguments); }
-
-function IconNavMediumFilled24(props) {
-  return /*#__PURE__*/external_react_.createElement("svg", IconNavMediumFilled24_extends({
-    "data-testid": "IconNavMediumFilled24",
-    fill: "none",
-    focusable: "false",
-    height: "1em",
-    role: "img",
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }, props), /*#__PURE__*/external_react_.createElement("path", {
-    clipRule: "evenodd",
-    d: "M6 4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H6Zm0 4a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2H6Zm-1 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm13-6h-7v12h7a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Z",
-    fill: "#fff",
-    fillRule: "evenodd"
-  }));
-}
-/* harmony default export */ const icons_IconNavMediumFilled24 = (IconNavMediumFilled24);
-;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggle.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx
-/* provided dependency */ var ThumbnailsToggle_ = __webpack_require__(441)["Tl"];
-
-
-
-
-function ThumbnailsToggle({
-  onThumbnailsToggle,
-  isThumbnailsOpen
-}) {
-  if (!onThumbnailsToggle) {
-    return null;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement("button", {
-    "aria-expanded": isThumbnailsOpen,
-    className: "bp-ThumbnailsToggle",
-    "data-resin-target": "thumbnails",
-    onClick: onThumbnailsToggle,
-    title: ThumbnailsToggle_('toggle_thumbnails'),
-    type: "button"
-  }, isThumbnailsOpen ? /*#__PURE__*/external_react_["default"].createElement(icons_IconNavMediumFilled24, null) : /*#__PURE__*/external_react_["default"].createElement(icons_IconNavMedium24, null));
-}
-;// ./src/lib/viewers/doc/DocControls.tsx
-
-
-
-
-
-
-
-
-
-
-
-
-function DocControls({
-  annotationColor,
-  annotationMode,
-  experiences,
-  hasDrawing,
-  hasGalleryZoom = false,
-  hasHighlight,
-  hasRegion,
-  isGalleryOpen,
-  isThumbnailsOpen,
-  maxScale,
-  minScale,
-  onAnnotationColorChange,
-  onAnnotationModeClick,
-  onAnnotationModeEscape,
-  onFindBarToggle,
-  onFullscreenToggle,
-  onGalleryToggle,
-  onPageChange,
-  onPageSubmit,
-  onRotateLeft,
-  onThumbnailsToggle,
-  onZoomIn,
-  onZoomOut,
-  pageCount,
-  pageNumber,
-  scale
-}) {
-  return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
-    experiences: experiences
-  }, /*#__PURE__*/external_react_["default"].createElement(ControlsBar, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggle, {
-    isThumbnailsOpen: isThumbnailsOpen,
-    onThumbnailsToggle: onThumbnailsToggle
-  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggle, {
-    onFindBarToggle: onFindBarToggle
-  })), /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, {
-    isDistinct: true
-  }, /*#__PURE__*/external_react_["default"].createElement(PageControls, {
-    onPageChange: onPageChange,
-    onPageSubmit: onPageSubmit,
-    pageCount: pageCount,
-    pageNumber: pageNumber
-  }))), (!isGalleryOpen || hasGalleryZoom) && /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, {
-    isDistinct: true
-  }, /*#__PURE__*/external_react_["default"].createElement(ZoomControls, {
-    maxScale: maxScale,
-    minScale: minScale,
-    onZoomIn: onZoomIn,
-    onZoomOut: onZoomOut,
-    resinTargetZoomIn: isGalleryOpen ? 'galleryZoomIn' : undefined,
-    resinTargetZoomOut: isGalleryOpen ? 'galleryZoomOut' : undefined,
-    scale: scale
-  })), !isGalleryOpen && onRotateLeft && /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(RotateControl, {
-    onRotateLeft: onRotateLeft
-  })), /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(GalleryToggle, {
-    isGalleryOpen: isGalleryOpen,
-    onGalleryToggle: onGalleryToggle
-  }), /*#__PURE__*/external_react_["default"].createElement(FullscreenToggle, {
-    onFullscreenToggle: onFullscreenToggle
-  }), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(AnnotationsControls, {
-    annotationColor: annotationColor,
-    annotationMode: annotationMode,
-    hasDrawing: hasDrawing,
-    hasHighlight: hasHighlight,
-    hasRegion: hasRegion,
-    onAnnotationModeClick: onAnnotationModeClick,
-    onAnnotationModeEscape: onAnnotationModeEscape
-  }))), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(ControlsBar, null, /*#__PURE__*/external_react_["default"].createElement(DrawingControls, {
-    annotationColor: annotationColor,
-    annotationMode: annotationMode,
-    onAnnotationColorChange: onAnnotationColorChange
-  })));
-}
-;// external "@box/blueprint-web-assets/icons/Medium/GridView"
-
-;// external "@box/blueprint-web-assets/icons/Medium/Nav"
-
-;// external "@box/blueprint-web-assets/icons/Medium/RotateLeft"
-
-;// external "@box/blueprint-web-assets/icons/Medium/Search"
-
-;// external "@box/blueprint-web-assets/icons/Medium/XMark"
-
-;// ./src/lib/viewers/controls/annotations/AnnotationsExitButtonV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/annotations/AnnotationsExitButtonV2.tsx
-/* provided dependency */ var AnnotationsExitButtonV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-function AnnotationsExitButtonV2({
-  onClick
-}) {
-  return /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-AnnotationsControls-exitBtn"
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: AnnotationsExitButtonV2_('exit_annotations')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": AnnotationsExitButtonV2_('exit_annotations'),
-    "data-resin-target": "exit",
-    "data-testid": "bp-annotations-controls-exit-btn",
-    onClick: onClick
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_XMark_07fbe0f0_default__
-  }))));
-}
-;// ./src/lib/viewers/controls/controls-bar/useControlsOverflow.ts
-
-
-
-const ALWAYS_OVERFLOW = 0;
-// The space the mocks leave between the bar and the edges of the viewer
-const EDGE_MARGIN = 40;
-// One toolbar button, the estimate for a control or the overflow trigger before it has been measured
-const DEFAULT_WIDTH = 32;
-const isCollapsible = ({
-  menu,
-  priority
-}) => !!menu && priority !== undefined;
-function getOverflowIds(items, availableWidth, metrics) {
-  const {
-    chrome,
-    gap,
-    triggerWidth = DEFAULT_WIDTH,
-    widths
-  } = metrics;
-  const overflowIds = new Set(items.filter(item => isCollapsible(item) && item.priority === ALWAYS_OVERFLOW).map(({
-    id
-  }) => id));
-  const getBarWidth = () => {
-    const slots = items.filter(({
-      id
-    }) => !overflowIds.has(id)).map(({
-      id
-    }) => widths.get(id) ?? DEFAULT_WIDTH);
-    if (overflowIds.size) {
-      slots.push(triggerWidth);
-    }
-    return chrome + slots.reduce((total, width) => total + width, 0) + gap * Math.max(slots.length - 1, 0);
-  };
-  const priorities = items.filter(item => isCollapsible(item) && item.priority !== ALWAYS_OVERFLOW).map(({
-    priority
-  }) => priority).sort((a, b) => a - b);
-  Array.from(new Set(priorities)).every(priority => {
-    if (getBarWidth() <= availableWidth) {
-      return false;
-    }
-    items.filter(item => isCollapsible(item) && item.priority === priority).forEach(({
-      id
-    }) => overflowIds.add(id));
-    return true;
-  });
-  return overflowIds;
-}
-const getStyleWidth = (style, properties) => properties.reduce((total, property) => total + (parseFloat(style.getPropertyValue(property)) || 0), 0);
-function useControlsOverflow(items) {
-  const barRef = external_react_["default"].useRef(null);
-  const metricsRef = external_react_["default"].useRef({
-    chrome: 0,
-    gap: 0,
-    widths: new Map()
-  });
-  const portalContainer = external_react_["default"].useContext(BlueprintProviders/* PortalContainerContext */.n);
-  const [availableWidth, setAvailableWidth] = external_react_["default"].useState(Number.POSITIVE_INFINITY);
-  const [, forceUpdate] = external_react_["default"].useReducer(count => count + 1, 0);
-
-  // A control can only be measured while it is on the bar, so each width is cached as it renders and
-  // reused to decide whether that control would fit again
-  external_react_["default"].useLayoutEffect(() => {
-    const bar = barRef.current;
-    if (!bar) {
-      return;
-    }
-    const metrics = metricsRef.current;
-    const style = window.getComputedStyle(bar);
-    const chrome = getStyleWidth(style, ['padding-left', 'padding-right', 'border-left-width', 'border-right-width']);
-    const gap = getStyleWidth(style, ['column-gap']);
-    let hasChanged = chrome !== metrics.chrome || gap !== metrics.gap;
-    metrics.chrome = chrome;
-    metrics.gap = gap;
-    Array.from(bar.children).forEach(child => {
-      const {
-        offsetWidth
-      } = child;
-      const {
-        overflowId,
-        overflowTrigger
-      } = child.dataset;
-      if (!offsetWidth) {
-        return;
-      }
-      if (overflowId && metrics.widths.get(overflowId) !== offsetWidth) {
-        metrics.widths.set(overflowId, offsetWidth);
-        hasChanged = true;
-      }
-      if (overflowTrigger !== undefined && metrics.triggerWidth !== offsetWidth) {
-        metrics.triggerWidth = offsetWidth;
-        hasChanged = true;
-      }
-    });
-    if (hasChanged) {
-      forceUpdate();
-    }
-  });
-
-  // The bar renders nothing without items, so the viewer lookup reruns once it mounts
-  const hasItems = items.length > 0;
-
-  // The controls root is centered and shrinks to fit the bar, so the space the bar can grow into is the
-  // viewer's. Fullscreen resizes the viewer too, which the observer picks up.
-  external_react_["default"].useLayoutEffect(() => {
-    const container = portalContainer ?? barRef.current?.closest(`.${constants/* CLASS_BOX_PREVIEW_CONTENT */.SG}`) ?? null;
-    if (!container) {
-      return undefined;
-    }
-    const updateAvailableWidth = () => {
-      const {
-        clientWidth
-      } = container;
-
-      // A container that has not been laid out yet measures zero, which would collapse everything
-      setAvailableWidth(clientWidth > 0 ? clientWidth - EDGE_MARGIN : Number.POSITIVE_INFINITY);
-    };
-    updateAvailableWidth();
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-    const observer = new ResizeObserver(updateAvailableWidth);
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [hasItems, portalContainer]);
-  const overflowIds = getOverflowIds(items, availableWidth, metricsRef.current);
-  return {
-    barRef,
-    overflowItems: items.filter(({
-      id
-    }) => overflowIds.has(id)),
-    visibleItems: items.filter(({
-      id
-    }) => !overflowIds.has(id))
-  };
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M8 13a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3v-2a3 3 0 0 1 3-3h2ZM6 15a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-2ZM8 3a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2Zm10 0a3 3 0 0 1 3 3v2a3 3 0 0 1-3 3h-2a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h2ZM6 5a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H6Zm10 0a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-2Z",
+    fill: "#fff",
+    fillRule: "evenodd"
+  }));
 }
-;// external "@box/blueprint-web-assets/icons/Medium/EllipsisVertical"
-
-// EXTERNAL MODULE: ./src/lib/viewers/controls/tooltip/MenuTriggerTooltipV2.tsx
-var MenuTriggerTooltipV2 = __webpack_require__(6014);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/settings/stopMenuKeyPropagation.ts
-var stopMenuKeyPropagation = __webpack_require__(9646);
-;// ./src/lib/viewers/controls/controls-bar/ControlsOverflowMenuV2.scss
+/* harmony default export */ const icons_IconGridView24 = (IconGridView24);
+;// ./src/lib/viewers/controls/gallery/GalleryToggle.scss
 // extracted by mini-css-extract-plugin
 
-;// ./src/lib/viewers/controls/controls-bar/ControlsOverflowMenuV2.tsx
-/* provided dependency */ var ControlsOverflowMenuV2_ = __webpack_require__(441)["Tl"];
-function ControlsOverflowMenuV2_extends() { return ControlsOverflowMenuV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsOverflowMenuV2_extends.apply(null, arguments); }
-
-
+;// ./src/lib/viewers/controls/gallery/GalleryToggle.tsx
+/* provided dependency */ var GalleryToggle_ = __webpack_require__(441)["Tl"];
 
 
 
+function GalleryToggle({
+  onGalleryToggle,
+  isGalleryOpen
+}) {
+  if (!onGalleryToggle) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-pressed": isGalleryOpen,
+    className: `bp-GalleryToggle${isGalleryOpen ? ' bp-is-active' : ''}`,
+    "data-resin-target": "galleryView",
+    onClick: onGalleryToggle,
+    title: GalleryToggle_('gallery_view'),
+    type: "button"
+  }, /*#__PURE__*/external_react_["default"].createElement(icons_IconGridView24, null));
+}
+;// ./src/lib/viewers/controls/icons/IconNavMedium24.tsx
+function IconNavMedium24_extends() { return IconNavMedium24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconNavMedium24_extends.apply(null, arguments); }
 
+function IconNavMedium24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", IconNavMedium24_extends({
+    "data-testid": "IconNavMedium24",
+    focusable: "false",
+    height: "1em",
+    role: "img",
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    clipRule: "evenodd",
+    d: "M11 6h8a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-8V6ZM9 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h4ZM5 18a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h4v12H5Zm0-9a1 1 0 0 1 1-1h1a1 1 0 0 1 0 2H6a1 1 0 0 1-1-1Zm1 2a1 1 0 1 0 0 2h1a1 1 0 1 0 0-2H6Z",
+    fill: "#fff",
+    fillRule: "evenodd"
+  }));
+}
+/* harmony default export */ const icons_IconNavMedium24 = (IconNavMedium24);
+;// ./src/lib/viewers/controls/icons/IconNavMediumFilled24.tsx
+function IconNavMediumFilled24_extends() { return IconNavMediumFilled24_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, IconNavMediumFilled24_extends.apply(null, arguments); }
 
+function IconNavMediumFilled24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", IconNavMediumFilled24_extends({
+    "data-testid": "IconNavMediumFilled24",
+    fill: "none",
+    focusable: "false",
+    height: "1em",
+    role: "img",
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    clipRule: "evenodd",
+    d: "M6 4a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h12a4 4 0 0 0 4-4V8a4 4 0 0 0-4-4H6Zm0 4a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2H6Zm-1 4a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm13-6h-7v12h7a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2Z",
+    fill: "#fff",
+    fillRule: "evenodd"
+  }));
+}
+/* harmony default export */ const icons_IconNavMediumFilled24 = (IconNavMediumFilled24);
+;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggle.scss
+// extracted by mini-css-extract-plugin
 
-// Handlers that return focus to the control that invoked them get the trigger, since the row unmounts with the menu
-const ControlsOverflowTriggerContext = /*#__PURE__*/external_react_["default"].createContext({
-  current: null
-});
+;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx
+/* provided dependency */ var ThumbnailsToggle_ = __webpack_require__(441)["Tl"];
 
-// The menu portals out of the controls root, so it carries the root's Resin attributes itself
-const getResinAttributes = element => {
-  const resinComponent = element?.closest('[data-resin-component]');
-  return resinComponent ? Object.fromEntries(Array.from(resinComponent.attributes).filter(({
-    name
-  }) => name.startsWith('data-resin-')).map(({
-    name,
-    value
-  }) => [name, value])) : {};
-};
-function ControlsOverflowToggle(props, ref) {
-  const isMenuOpen = props['aria-expanded'] === true || props['aria-expanded'] === 'true';
-  return /*#__PURE__*/external_react_["default"].createElement(MenuTriggerTooltipV2/* default */.A, {
-    content: ControlsOverflowMenuV2_('controls_more'),
-    isMenuOpen: isMenuOpen
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, ControlsOverflowMenuV2_extends({
-    ref: ref,
-    "aria-label": ControlsOverflowMenuV2_('controls_more'),
-    "data-resin-target": "moreOptions",
-    "data-testid": "bp-ControlsBar-overflowBtn"
-  }, props), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_EllipsisVertical_06d33c4b_default__
-  })));
-}
-const ControlsOverflowToggleV2 = /*#__PURE__*/external_react_["default"].forwardRef(ControlsOverflowToggle);
-function ControlsOverflowMenuV2({
-  items
-}) {
-  const container = external_react_["default"].useContext(BlueprintProviders/* PortalContainerContext */.n) ?? undefined;
-  const {
-    setIsForced
-  } = external_react_["default"].useContext(ControlsLayerContext);
-  const triggerRef = external_react_["default"].useRef(null);
-  const [isOpen, setIsOpen] = external_react_["default"].useState(false);
-  const [resinAttributes, setResinAttributes] = external_react_["default"].useState({});
-  const handleOpenChange = open => {
-    if (open) {
-      setResinAttributes(getResinAttributes(triggerRef.current));
-    }
-    setIsOpen(open);
-  };
 
-  // The menu sits outside the controls layer, which would otherwise hide the bar under the open menu
-  external_react_["default"].useEffect(() => {
-    if (!isOpen) {
-      return undefined;
-    }
-    setIsForced(true);
-    return () => setIsForced(false);
-  }, [isOpen, setIsForced]);
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Root, {
-    modal: false,
-    onOpenChange: handleOpenChange,
-    open: isOpen
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Trigger, {
-    ref: triggerRef,
-    asChild: true,
-    "data-overflow-ids": items.map(({
-      id
-    }) => id).join(' '),
-    "data-overflow-trigger": ""
-  }, /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowToggleV2, null)), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Content, ControlsOverflowMenuV2_extends({
-    align: "end",
-    className: "bp-ControlsOverflowMenuV2",
-    container: container,
-    "data-testid": "bp-ControlsBar-overflowMenu",
-    onEscapeKeyDown: stopMenuKeyPropagation/* stopEscapePropagation */.s,
-    onKeyDown: stopMenuKeyPropagation/* stopKeyPropagation */.a,
-    side: "top"
-  }, resinAttributes), /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowTriggerContext.Provider, {
-    value: triggerRef
-  }, items.map(({
-    id,
-    menu
-  }) => /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, {
-    key: id
-  }, menu)))));
-}
-;// ./src/lib/viewers/controls/controls-bar/shortcuts.ts
-/* provided dependency */ var shortcuts_ = __webpack_require__(441)["Tl"];
 
-// iPads report a Mac user agent, and their keyboards have the command key too
-const isApplePlatform = () => /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
 
-// Preview binds its shortcuts to both Cmd and Ctrl, so each platform is shown the modifier its keyboard labels
-function getShortcut(key) {
-  return isApplePlatform() ? {
-    keys: `Meta+${key}`,
-    label: `⌘ + ${key}`
-  } : {
-    keys: `Control+${key}`,
-    label: (0,util/* replacePlaceholders */.Lb)(shortcuts_('controls_shortcut_ctrl'), [key])
-  };
+function ThumbnailsToggle({
+  onThumbnailsToggle,
+  isThumbnailsOpen
+}) {
+  if (!onThumbnailsToggle) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("button", {
+    "aria-expanded": isThumbnailsOpen,
+    className: "bp-ThumbnailsToggle",
+    "data-resin-target": "thumbnails",
+    onClick: onThumbnailsToggle,
+    title: ThumbnailsToggle_('toggle_thumbnails'),
+    type: "button"
+  }, isThumbnailsOpen ? /*#__PURE__*/external_react_["default"].createElement(icons_IconNavMediumFilled24, null) : /*#__PURE__*/external_react_["default"].createElement(icons_IconNavMedium24, null));
 }
-;// ./src/lib/viewers/controls/controls-bar/ControlsMenuItemV2.scss
-// extracted by mini-css-extract-plugin
+;// ./src/lib/viewers/doc/DocControls.tsx
 
-;// ./src/lib/viewers/controls/controls-bar/ControlsMenuItemV2.tsx
-const ControlsMenuItemV2_excluded = ["bareKey", "icon", "keepOpen", "label", "onSelect", "shortcutKey"];
-function ControlsMenuItemV2_extends() { return ControlsMenuItemV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, ControlsMenuItemV2_extends.apply(null, arguments); }
-function ControlsMenuItemV2_objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = ControlsMenuItemV2_objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function ControlsMenuItemV2_objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
 
 
 
 
-// The menu form of a bar control. Toggles are plain rows whose label names the next action, since checkbox
-// rows reserve space for a checkmark that the mocks do not have.
-function ControlsMenuItemV2(_ref) {
-  let {
-      bareKey,
-      icon,
-      keepOpen,
-      label,
-      onSelect,
-      shortcutKey
-    } = _ref,
-    rest = ControlsMenuItemV2_objectWithoutProperties(_ref, ControlsMenuItemV2_excluded);
-  const triggerRef = external_react_["default"].useContext(ControlsOverflowTriggerContext);
-  let shortcut = null;
-  if (shortcutKey) {
-    shortcut = getShortcut(shortcutKey);
-  } else if (bareKey) {
-    shortcut = {
-      keys: bareKey,
-      label: bareKey
-    };
-  }
-  const handleSelect = event => {
-    if (keepOpen) {
-      event.preventDefault();
-    }
-    onSelect(triggerRef.current);
-  };
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, ControlsMenuItemV2_extends({
-    "aria-keyshortcuts": shortcut?.keys,
-    onSelect: handleSelect
-  }, rest, {
-    className: "bp-ControlsMenuItemV2"
-  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
-    icon: icon
-  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
-    label: label
-  }), shortcut && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.EndElement, {
-    "aria-hidden": true
-  }, shortcut.label));
-}
-;// ./src/lib/viewers/controls/controls-bar/ResponsiveControlsBarV2.scss
-// extracted by mini-css-extract-plugin
 
-;// ./src/lib/viewers/controls/controls-bar/ResponsiveControlsBarV2.tsx
 
 
 
 
 
-// Moves controls into an overflow menu as the viewer narrows. Bars that always show everything, like the
-// annotations palette, use ControlsBarV2 directly.
-function ResponsiveControlsBarV2({
-  items
+function DocControls({
+  annotationColor,
+  annotationMode,
+  experiences,
+  hasDrawing,
+  hasGalleryZoom = false,
+  hasHighlight,
+  hasRegion,
+  isGalleryOpen,
+  isThumbnailsOpen,
+  maxScale,
+  minScale,
+  onAnnotationColorChange,
+  onAnnotationModeClick,
+  onAnnotationModeEscape,
+  onFindBarToggle,
+  onFullscreenToggle,
+  onGalleryToggle,
+  onPageChange,
+  onPageSubmit,
+  onRotateLeft,
+  onThumbnailsToggle,
+  onZoomIn,
+  onZoomOut,
+  pageCount,
+  pageNumber,
+  scale
 }) {
-  const {
-    barRef,
-    overflowItems,
-    visibleItems
-  } = useControlsOverflow(items);
-  if (!items.length) {
-    return null;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement(controls_bar_ControlsBarV2, {
-    ref: barRef
-  }, visibleItems.map(({
-    control,
-    id
-  }) => /*#__PURE__*/external_react_["default"].createElement("div", {
-    key: id,
-    className: "bp-ResponsiveControlsBarV2-item",
-    "data-overflow-id": id
-  }, control)), overflowItems.length > 0 && /*#__PURE__*/external_react_["default"].createElement(ControlsOverflowMenuV2, {
-    items: overflowItems
-  }));
+  return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
+    experiences: experiences
+  }, /*#__PURE__*/external_react_["default"].createElement(ControlsBar, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggle, {
+    isThumbnailsOpen: isThumbnailsOpen,
+    onThumbnailsToggle: onThumbnailsToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggle, {
+    onFindBarToggle: onFindBarToggle
+  })), /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, {
+    isDistinct: true
+  }, /*#__PURE__*/external_react_["default"].createElement(PageControls, {
+    onPageChange: onPageChange,
+    onPageSubmit: onPageSubmit,
+    pageCount: pageCount,
+    pageNumber: pageNumber
+  }))), (!isGalleryOpen || hasGalleryZoom) && /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, {
+    isDistinct: true
+  }, /*#__PURE__*/external_react_["default"].createElement(ZoomControls, {
+    maxScale: maxScale,
+    minScale: minScale,
+    onZoomIn: onZoomIn,
+    onZoomOut: onZoomOut,
+    resinTargetZoomIn: isGalleryOpen ? 'galleryZoomIn' : undefined,
+    resinTargetZoomOut: isGalleryOpen ? 'galleryZoomOut' : undefined,
+    scale: scale
+  })), !isGalleryOpen && onRotateLeft && /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(RotateControl, {
+    onRotateLeft: onRotateLeft
+  })), /*#__PURE__*/external_react_["default"].createElement(ControlsBarGroup, null, /*#__PURE__*/external_react_["default"].createElement(GalleryToggle, {
+    isGalleryOpen: isGalleryOpen,
+    onGalleryToggle: onGalleryToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(FullscreenToggle, {
+    onFullscreenToggle: onFullscreenToggle
+  }), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(AnnotationsControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    hasDrawing: hasDrawing,
+    hasHighlight: hasHighlight,
+    hasRegion: hasRegion,
+    onAnnotationModeClick: onAnnotationModeClick,
+    onAnnotationModeEscape: onAnnotationModeEscape
+  }))), !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(ControlsBar, null, /*#__PURE__*/external_react_["default"].createElement(DrawingControls, {
+    annotationColor: annotationColor,
+    annotationMode: annotationMode,
+    onAnnotationColorChange: onAnnotationColorChange
+  })));
 }
+;// external "@box/blueprint-web-assets/icons/Medium/GridView"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Nav"
+
+;// external "@box/blueprint-web-assets/icons/Medium/Search"
+
 ;// ./src/lib/viewers/controls/findbar/FindBarToggleV2.tsx
 /* provided dependency */ var FindBarToggleV2_ = __webpack_require__(441)["Tl"];
 
@@ -57749,176 +58415,6 @@ function GalleryToggleV2({
     value: "gallery"
   })));
 }
-;// external "@box/blueprint-web-assets/icons/Medium/ChevronDown"
-
-;// external "@box/blueprint-web-assets/icons/Medium/ChevronUp"
-
-;// ./src/lib/viewers/controls/page/PageControlsFormV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/page/PageControlsFormV2.tsx
-/* provided dependency */ var PageControlsFormV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-
-function PageControlsFormV2({
-  onPageSubmit,
-  pageNumber,
-  pageCount
-}) {
-  const [isInputShown, setIsInputShown] = external_react_["default"].useState(false);
-  // A string because Toolbar.Input only supports text types, so a parsed number would show "NaN" once cleared
-  const [inputValue, setInputValue] = external_react_["default"].useState(pageNumber.toString());
-  const buttonElRef = external_react_["default"].useRef(null);
-  const inputElRef = external_react_["default"].useRef(null);
-  const isRetryRef = external_react_["default"].useRef(false);
-  const setPage = (allowRetry = false) => {
-    const newPageNumber = Number(inputValue);
-    if (Number.isInteger(newPageNumber) && newPageNumber >= 1 && newPageNumber <= pageCount && newPageNumber !== pageNumber) {
-      onPageSubmit(newPageNumber);
-    } else {
-      setInputValue(pageNumber.toString()); // Reset the invalid input value to the current page
-
-      if (allowRetry) {
-        isRetryRef.current = true;
-      }
-    }
-    setIsInputShown(false);
-  };
-  const handleNumInputChange = event => {
-    setInputValue(event.target.value);
-  };
-  const handleNumInputBlur = () => {
-    setPage();
-  };
-  const handleNumInputKeyDown = event => {
-    const key = (0,util/* decodeKeydown */.wU)(event);
-    switch (key) {
-      case ENTER:
-        event.stopPropagation();
-        event.preventDefault();
-        setPage(true);
-        break;
-      case ESCAPE:
-        event.stopPropagation();
-        event.preventDefault();
-        isRetryRef.current = true;
-        setIsInputShown(false);
-        setInputValue(pageNumber.toString());
-        break;
-      default:
-        break;
-    }
-  };
-  external_react_["default"].useEffect(() => {
-    setInputValue(pageNumber.toString()); // Keep internal state in sync with prop as it changes
-  }, [pageNumber]);
-  external_react_["default"].useLayoutEffect(() => {
-    if (inputElRef.current && isInputShown) {
-      inputElRef.current.select();
-    }
-    if (buttonElRef.current && !isInputShown) {
-      if (isRetryRef.current) {
-        buttonElRef.current.focus();
-      }
-      isRetryRef.current = false;
-    }
-  }, [isInputShown]);
-  return /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-PageControlsFormV2",
-    "data-testid": "bp-PageControlsForm"
-  }, isInputShown ? /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: "bp-PageControlsFormV2-input"
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Input, {
-    ref: inputElRef,
-    "aria-label": PageControlsFormV2_('enter_page_num'),
-    "data-resin-target": "pageNumberInput",
-    "data-testid": "bp-PageControlsForm-input",
-    inputMode: "numeric",
-    onBlur: handleNumInputBlur,
-    onChange: handleNumInputChange,
-    onKeyDown: handleNumInputKeyDown,
-    pattern: "[0-9]*",
-    size: 3,
-    value: inputValue
-  })) : /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: PageControlsFormV2_('enter_page_num')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    ref: buttonElRef,
-    "data-resin-target": "pageNumberOpen",
-    "data-testid": "bp-PageControlsForm-button",
-    disabled: pageCount <= 1,
-    onClick: () => setIsInputShown(true)
-  }, /*#__PURE__*/external_react_["default"].createElement("span", {
-    className: "bp-PageControlsFormV2-button-label",
-    "data-testid": "bp-PageControlsForm-button-label"
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
-    as: "span",
-    color: "textOnDarkDefault"
-  }, `${pageNumber} / ${pageCount}`)))));
-}
-;// ./src/lib/viewers/controls/page/PageControlsV2.tsx
-/* provided dependency */ var PageControlsV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-
-function PageControlsV2({
-  onPageChange,
-  onPageSubmit,
-  pageCount,
-  pageNumber
-}) {
-  if (pageCount <= 1) {
-    return null;
-  }
-  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: PageControlsV2_('previous_page')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": PageControlsV2_('previous_page'),
-    "data-resin-target": "pagePrevious",
-    "data-testid": "bp-PageControls-previous",
-    disabled: pageNumber === 1,
-    onClick: () => onPageChange(pageNumber - 1)
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronUp_d399c022_default__
-  }))), /*#__PURE__*/external_react_["default"].createElement(PageControlsFormV2, {
-    onPageSubmit: onPageSubmit,
-    pageCount: pageCount,
-    pageNumber: pageNumber
-  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: PageControlsV2_('next_page')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": PageControlsV2_('next_page'),
-    "data-resin-target": "pageNext",
-    "data-testid": "bp-PageControls-next",
-    disabled: pageNumber === pageCount,
-    onClick: () => onPageChange(pageNumber + 1)
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ChevronDown_a545a634_default__
-  }))));
-}
-;// ./src/lib/viewers/controls/rotate/RotateControlV2.tsx
-/* provided dependency */ var RotateControlV2_ = __webpack_require__(441)["Tl"];
-
-
-
-function RotateControlV2({
-  onRotateLeft
-}) {
-  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
-    content: RotateControlV2_('rotate_left')
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Button, {
-    "aria-label": RotateControlV2_('rotate_left'),
-    "data-resin-target": "rotate",
-    onClick: onRotateLeft
-  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Icon, {
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__
-  })));
-}
 ;// external "@box/blueprint-web-assets/icons/MediumFilled/Nav"
 
 ;// ./src/lib/viewers/controls/sidebar/ThumbnailsToggleV2.scss
@@ -57972,64 +58468,6 @@ function useMediaQuery(query) {
   }, [query]);
   return matches;
 }
-;// ./src/lib/viewers/controls/zoom/ZoomMenuItemsV2.scss
-// extracted by mini-css-extract-plugin
-
-;// ./src/lib/viewers/controls/zoom/ZoomMenuItemsV2.tsx
-/* provided dependency */ var ZoomMenuItemsV2_ = __webpack_require__(441)["Tl"];
-
-
-
-
-
-
-
-
-
-// The overflow menu form of the zoom controls: the current scale, then zoom in and zoom out
-function ZoomMenuItemsV2({
-  maxScale,
-  minScale,
-  onZoomIn,
-  onZoomOut,
-  resinTargetZoomIn = 'zoomIn',
-  resinTargetZoomOut = 'zoomOut',
-  scale
-}) {
-  const {
-    canZoomIn,
-    canZoomOut,
-    currentScale
-  } = getZoomState({
-    maxScale,
-    minScale,
-    scale
-  });
-  const scaleLabel = (0,util/* replacePlaceholders */.Lb)(ZoomMenuItemsV2_('controls_zoom_scale'), [`${Math.round(currentScale * 100)}%`]);
-  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
-    as: "div",
-    className: "bp-ZoomMenuItemsV2-scale",
-    color: "textOnLightSecondary",
-    "data-testid": "bp-ZoomMenuItems-scale",
-    variant: "caption"
-  }, scaleLabel), /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
-    "data-resin-target": resinTargetZoomIn,
-    "data-testid": "bp-ZoomControls-in-menuItem",
-    disabled: !canZoomIn,
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Plus_aaa7b14f_default__,
-    keepOpen: true,
-    label: ZoomMenuItemsV2_('zoom_in'),
-    onSelect: () => onZoomIn()
-  }), /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
-    "data-resin-target": resinTargetZoomOut,
-    "data-testid": "bp-ZoomControls-out-menuItem",
-    disabled: !canZoomOut,
-    icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_Minus_cc9df143_default__,
-    keepOpen: true,
-    label: ZoomMenuItemsV2_('zoom_out'),
-    onSelect: () => onZoomOut()
-  }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Separator, null));
-}
 ;// ./src/lib/viewers/doc/DocControlsV2.tsx
 /* provided dependency */ var DocControlsV2_ = __webpack_require__(441)["Tl"];
 
@@ -58047,11 +58485,6 @@ function ZoomMenuItemsV2({
 
 
 
-
-
-
-
-
 
 
 
@@ -58064,7 +58497,7 @@ const THUMBNAILS_MEDIA_QUERY = '(min-width: 768px)';
 // open. Then the grid toggle is the button itself, and nothing else collapses into a more options menu.
 // Rotate collapses next, then thumbnails and fullscreen together, then zoom. Page and the markup trigger
 // have no menu form and never collapse.
-const PRIORITY = {
+const DocControlsV2_PRIORITY = {
   find: ALWAYS_OVERFLOW,
   fullscreen: 2,
   gallery: ALWAYS_OVERFLOW,
@@ -58100,30 +58533,14 @@ function DocControlsV2({
   pageNumber,
   scale
 }) {
-  const annotationsToggleRef = external_react_["default"].useRef(null);
   const isFullscreen = useFullscreen();
   const canShowThumbnails = useMediaQuery(THUMBNAILS_MEDIA_QUERY);
-
-  // Listed in the palette's button order, which is also the order the toggle falls back to
-  const annotationModes = [];
-  if (!isFullscreen) {
-    if (hasRegion) {
-      annotationModes.push(AnnotationMode.REGION);
-    }
-    if (hasHighlight) {
-      annotationModes.push(AnnotationMode.HIGHLIGHT);
-    }
-    if (hasDrawing) {
-      annotationModes.push(AnnotationMode.DRAWING);
-    }
-  }
+  const annotationModes = useAnnotationModes({
+    hasDrawing,
+    hasHighlight,
+    hasRegion
+  });
   const hasAnnotations = !isGalleryOpen && annotationModes.length > 0;
-  const handleAnnotationsExit = () => {
-    annotationsToggleRef.current?.focus();
-    onAnnotationModeClick({
-      mode: AnnotationMode.NONE
-    });
-  };
   const zoomProps = {
     maxScale,
     minScale,
@@ -58148,7 +58565,7 @@ function DocControlsV2({
       label: isThumbnailsOpen ? DocControlsV2_('controls_hide_thumbnails') : DocControlsV2_('controls_show_thumbnails'),
       onSelect: () => onThumbnailsToggle()
     }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Separator, null)),
-    priority: PRIORITY.thumbnails
+    priority: DocControlsV2_PRIORITY.thumbnails
   }, !isGalleryOpen && pageCount > 1 && {
     control: /*#__PURE__*/external_react_["default"].createElement(PageControlsV2, {
       onPageChange: onPageChange,
@@ -58161,7 +58578,7 @@ function DocControlsV2({
     control: /*#__PURE__*/external_react_["default"].createElement(ZoomControlsV2, zoomProps),
     id: 'zoom',
     menu: !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(ZoomMenuItemsV2, zoomProps),
-    priority: isGalleryOpen ? undefined : PRIORITY.zoom
+    priority: isGalleryOpen ? undefined : DocControlsV2_PRIORITY.zoom
   }, !isGalleryOpen && onFindBarToggle && {
     control: /*#__PURE__*/external_react_["default"].createElement(FindBarToggleV2, {
       onFindBarToggle: onFindBarToggle
@@ -58174,20 +58591,17 @@ function DocControlsV2({
       onSelect: onFindBarToggle,
       shortcutKey: "F"
     }),
-    priority: PRIORITY.find
+    priority: DocControlsV2_PRIORITY.find
   }, !isGalleryOpen && onRotateLeft && {
     control: /*#__PURE__*/external_react_["default"].createElement(RotateControlV2, {
       onRotateLeft: onRotateLeft
     }),
     id: 'rotate',
-    menu: /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
-      "data-resin-target": "rotate",
-      icon: __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_RotateLeft_c726d679_default__,
-      bareKey: "R",
+    menu: /*#__PURE__*/external_react_["default"].createElement(RotateMenuItemV2, {
       label: DocControlsV2_('controls_rotate_document'),
-      onSelect: () => onRotateLeft()
+      onRotateLeft: onRotateLeft
     }),
-    priority: PRIORITY.rotate
+    priority: DocControlsV2_PRIORITY.rotate
   }, onGalleryToggle && {
     control: /*#__PURE__*/external_react_["default"].createElement(GalleryToggleV2, {
       isGalleryOpen: isGalleryOpen,
@@ -58200,47 +58614,36 @@ function DocControlsV2({
       label: DocControlsV2_('controls_view_as_grid'),
       onSelect: () => onGalleryToggle()
     }),
-    priority: isGalleryOpen ? undefined : PRIORITY.gallery
+    priority: isGalleryOpen ? undefined : DocControlsV2_PRIORITY.gallery
   }, {
     control: /*#__PURE__*/external_react_["default"].createElement(FullscreenToggleV2, {
       onFullscreenToggle: onFullscreenToggle
     }),
     id: 'fullscreen',
-    menu: !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(ControlsMenuItemV2, {
-      "data-resin-target": "fullscreen",
-      icon: isFullscreen ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMinimize_35faab95_default__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_ArrowsMaximize_12b9ae40_default__,
-      bareKey: "F",
-      label: isFullscreen ? DocControlsV2_('exit_fullscreen') : DocControlsV2_('enter_fullscreen'),
-      onSelect: trigger => onFullscreenToggle(!isFullscreen, trigger)
+    menu: !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(FullscreenMenuItemV2, {
+      onFullscreenToggle: onFullscreenToggle
     }),
-    priority: isGalleryOpen ? undefined : PRIORITY.fullscreen
+    priority: isGalleryOpen ? undefined : DocControlsV2_PRIORITY.fullscreen
   }, hasAnnotations && {
-    control: /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), /*#__PURE__*/external_react_["default"].createElement(AnnotationsExitButtonV2, {
-      onClick: handleAnnotationsExit
-    }), /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsToggleV2, {
-      ref: annotationsToggleRef,
+    control: /*#__PURE__*/external_react_["default"].createElement(AnnotationsControlsV2, {
       annotationMode: annotationMode,
       modes: annotationModes,
       onAnnotationModeClick: onAnnotationModeClick,
       onAnnotationModeEscape: onAnnotationModeEscape
-    })),
+    }),
     id: 'annotations'
   }];
   return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
     experiences: experiences
   }, /*#__PURE__*/external_react_["default"].createElement(ResponsiveControlsBarV2, {
     items: items.filter(item => !!item)
-  }), hasAnnotations && annotationMode !== AnnotationMode.NONE && /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2, null, /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2.Modes, {
+  }), hasAnnotations && /*#__PURE__*/external_react_["default"].createElement(AnnotationsPaletteControlsV2, {
+    annotationColor: annotationColor,
     annotationMode: annotationMode,
+    modes: annotationModes,
+    onAnnotationColorChange: onAnnotationColorChange,
     onAnnotationModeClick: onAnnotationModeClick
-  }, annotationModes.map(mode => /*#__PURE__*/external_react_["default"].createElement(annotations_AnnotationsPaletteV2.Mode, {
-    key: mode,
-    value: mode
-  }))), annotationMode === AnnotationMode.DRAWING && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Toolbar.Separator, null), /*#__PURE__*/external_react_["default"].createElement(ColorPickerControlV2, {
-    activeColor: annotationColor,
-    colors: ANNOTATION_COLORS,
-    onColorSelect: onAnnotationColorChange
-  }))));
+  }));
 }
 ;// ./src/lib/icons/search.svg
 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";
@@ -58675,6 +59078,343 @@ class DocFindBar extends (events_default()) {
   }
 }
 /* harmony default export */ const doc_DocFindBar = (DocFindBar);
+;// external "@box/blueprint-web-assets/icons/Fill"
+
+// EXTERNAL MODULE: ./src/lib/TabularDigits.tsx + 1 modules
+var TabularDigits = __webpack_require__(2459);
+;// ./src/lib/viewers/doc/DocFindBarV2.scss
+// extracted by mini-css-extract-plugin
+
+;// ./src/lib/viewers/doc/DocFindBarV2.tsx
+/* provided dependency */ var DocFindBarV2_ = __webpack_require__(441)["Tl"];
+function DocFindBarV2_extends() { return DocFindBarV2_extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, DocFindBarV2_extends.apply(null, arguments); }
+function DocFindBarV2_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function DocFindBarV2_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? DocFindBarV2_ownKeys(Object(t), !0).forEach(function (r) { DocFindBarV2_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : DocFindBarV2_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function DocFindBarV2_defineProperty(e, r, t) { return (r = DocFindBarV2_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function DocFindBarV2_toPropertyKey(t) { var i = DocFindBarV2_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function DocFindBarV2_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Mirrors pdf.js FindState
+const FindState = {
+  FOUND: 0,
+  NOT_FOUND: 1,
+  WRAPPED: 2,
+  PENDING: 3
+};
+const canNavigateMatches = (query, isNotFound) => !!query && !isNotFound;
+const NO_MATCHES = {
+  current: 0,
+  total: 0
+};
+const formatMatchesCount = ({
+  current,
+  total
+}) => (0,util/* replacePlaceholders */.Lb)(DocFindBarV2_('find_match_count'), [String(current), String(total)]);
+function DocFindBarV2({
+  inputRef,
+  isNotFound,
+  matchesCount,
+  nextButtonRef,
+  onClose,
+  onFindNext,
+  onFindPrevious,
+  onQueryChange,
+  previousButtonRef,
+  query
+}) {
+  const canNavigate = canNavigateMatches(query, isNotFound);
+  const hasMatches = !!matchesCount && matchesCount.total > 0;
+  let displayedCount = null;
+  if (hasMatches) {
+    displayedCount = matchesCount;
+  } else if (query && isNotFound) {
+    displayedCount = NO_MATCHES;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "label",
+    className: classnames_default()('bp-DocFindBarV2-field', {
+      'bp-DocFindBarV2-field--filled': !!query
+    }),
+    variant: "bodyDefault"
+  }, /*#__PURE__*/external_react_["default"].createElement(__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Fill_15c08185_Search__, {
+    "aria-hidden": true,
+    className: "bp-DocFindBarV2-searchIcon",
+    color: tokens_.bpIconIconOnLightSecondary
+  }), /*#__PURE__*/external_react_["default"].createElement("input", {
+    ref: inputRef,
+    "aria-label": DocFindBarV2_('find_label'),
+    className: "bp-DocFindBarV2-input",
+    enterKeyHint: "search",
+    onChange: ({
+      currentTarget
+    }) => onQueryChange(currentTarget.value),
+    placeholder: DocFindBarV2_('find_placeholder'),
+    role: "searchbox",
+    value: query
+  }), /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-DocFindBarV2-count",
+    role: "status"
+  }, displayedCount && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Text, {
+    as: "span",
+    color: "textOnLightSecondary",
+    "data-testid": "bp-DocFindBarV2-count",
+    variant: "bodyDefault"
+  }, /*#__PURE__*/external_react_["default"].createElement(TabularDigits/* default */.Ay, null, formatMatchesCount(displayedCount))))), /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-DocFindBarV2-actions"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: DocFindBarV2_('find_previous')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    ref: previousButtonRef,
+    "aria-label": DocFindBarV2_('find_previous'),
+    "data-target-id": "DocFindBarV2-previous",
+    disabled: !canNavigate,
+    icon: Medium_.ChevronUp,
+    onClick: onFindPrevious
+  })), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: DocFindBarV2_('find_next')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    ref: nextButtonRef,
+    "aria-label": DocFindBarV2_('find_next'),
+    "data-target-id": "DocFindBarV2-next",
+    disabled: !canNavigate,
+    icon: Medium_.ChevronDown,
+    onClick: onFindNext
+  })), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: DocFindBarV2_('find_close')
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-label": DocFindBarV2_('find_close'),
+    "data-target-id": "DocFindBarV2-close",
+    icon: Medium_.XMark,
+    onClick: onClose
+  }))));
+}
+class DocFindBarV2Root extends (events_default()) {
+  constructor(containerEl, findController, eventBus) {
+    super();
+    DocFindBarV2_defineProperty(this, "containerEl", void 0);
+    DocFindBarV2_defineProperty(this, "eventBus", void 0);
+    DocFindBarV2_defineProperty(this, "findBarEl", void 0);
+    DocFindBarV2_defineProperty(this, "findController", void 0);
+    DocFindBarV2_defineProperty(this, "inputRef", /*#__PURE__*/(0,external_react_.createRef)());
+    DocFindBarV2_defineProperty(this, "isDestroyed", false);
+    DocFindBarV2_defineProperty(this, "nextButtonRef", /*#__PURE__*/(0,external_react_.createRef)());
+    DocFindBarV2_defineProperty(this, "opened", false);
+    DocFindBarV2_defineProperty(this, "prevSearchQuery", '');
+    DocFindBarV2_defineProperty(this, "previousButtonRef", /*#__PURE__*/(0,external_react_.createRef)());
+    DocFindBarV2_defineProperty(this, "root", void 0);
+    DocFindBarV2_defineProperty(this, "state", {
+      isNotFound: false,
+      matchesCount: null,
+      query: ''
+    });
+    DocFindBarV2_defineProperty(this, "findFieldHandler", () => {
+      this.dispatchFindEvent('find');
+    });
+    DocFindBarV2_defineProperty(this, "close", () => {
+      this.prevSearchQuery = this.state.query;
+      this.setFindFieldElValue('');
+      this.findFieldHandler();
+      if (!this.opened) {
+        return;
+      }
+      this.emit('close');
+      this.opened = false;
+      this.findBarEl.classList.add(constants/* CLASS_HIDDEN */.zX);
+    });
+    DocFindBarV2_defineProperty(this, "handleFindBarKeyDown", event => {
+      const key = (0,util/* decodeKeydown */.wU)(event).toLowerCase();
+      switch (key) {
+        case 'enter':
+        case 'shift+enter':
+          {
+            if (event.isComposing) {
+              break;
+            }
+            const navigationTargets = [this.inputRef.current, this.nextButtonRef.current, this.previousButtonRef.current];
+            if (!navigationTargets.some(el => el === event.target)) {
+              break;
+            }
+            const findPrevious = key === 'shift+enter';
+            const buttonRef = findPrevious ? this.previousButtonRef : this.nextButtonRef;
+            event.preventDefault();
+            buttonRef.current?.focus();
+            this.findAgain(findPrevious);
+            break;
+          }
+        case 'escape':
+        case 'esc':
+          if (!this.opened) {
+            return;
+          }
+          this.close();
+          event.stopPropagation();
+          event.preventDefault();
+          break;
+        case 'shift++':
+        case 'shift+_':
+        case '[':
+        case ']':
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    });
+    DocFindBarV2_defineProperty(this, "handleFindControlState", ({
+      matchesCount,
+      state
+    }) => {
+      const isNotFound = state === FindState.PENDING ? this.state.isNotFound : state === FindState.NOT_FOUND;
+      const hasNavigationFocus = [this.nextButtonRef.current, this.previousButtonRef.current].some(el => !!el && el === document.activeElement);
+      this.update({
+        isNotFound,
+        matchesCount: matchesCount || null
+      });
+      if (isNotFound && hasNavigationFocus) {
+        this.inputRef.current?.focus();
+      }
+    });
+    DocFindBarV2_defineProperty(this, "handleFindMatchesCount", ({
+      matchesCount
+    }) => {
+      this.update({
+        matchesCount: matchesCount || null
+      });
+    });
+    DocFindBarV2_defineProperty(this, "handleQueryChange", query => {
+      this.setFindFieldElValue(query);
+      this.findFieldHandler();
+    });
+    if (!containerEl) {
+      throw new Error('DocFindBar cannot be used without a container element.');
+    }
+    if (!eventBus) {
+      throw new Error('DocFindBar cannot be used without an EventBus instance.');
+    }
+    if (!findController) {
+      throw new Error('DocFindBar cannot be used without a PDFFindController instance.');
+    }
+    this.containerEl = containerEl;
+    this.eventBus = eventBus;
+    this.findController = findController;
+    this.findBarEl = document.createElement('div');
+    this.findBarEl.className = `bp-DocFindBarV2 ${constants/* CLASS_HIDDEN */.zX}`;
+    this.findBarEl.setAttribute('data-testid', 'document-findbar');
+    containerEl.appendChild(this.findBarEl);
+    this.root = (0,client_.createRoot)(this.findBarEl);
+    this.findBarEl.addEventListener('keydown', this.handleFindBarKeyDown, true);
+    this.eventBus.on('updatefindcontrolstate', this.handleFindControlState);
+    this.eventBus.on('updatefindmatchescount', this.handleFindMatchesCount);
+    this.render();
+  }
+  destroy() {
+    this.isDestroyed = true;
+    this.removeAllListeners();
+    this.eventBus.off('updatefindcontrolstate', this.handleFindControlState);
+    this.eventBus.off('updatefindmatchescount', this.handleFindMatchesCount);
+    this.findBarEl.removeEventListener('keydown', this.handleFindBarKeyDown, true);
+    this.root.unmount();
+    this.findBarEl.remove();
+  }
+  dispatchFindEvent(type, findPrevious) {
+    this.eventBus.dispatch('find', {
+      query: this.state.query,
+      phraseSearch: true,
+      highlightAll: true,
+      findPrevious,
+      type
+    });
+  }
+  setFindFieldElValue(phrase) {
+    this.update({
+      query: phrase
+    });
+  }
+  onKeydown(event) {
+    const key = (0,util/* decodeKeydown */.wU)(event).toLowerCase();
+    switch (key) {
+      case 'meta+f':
+      case 'control+f':
+      case 'meta+g':
+      case 'control+g':
+      case 'f3':
+        this.open();
+        event.preventDefault();
+        return true;
+      default:
+        return false;
+    }
+  }
+  open() {
+    if (this.prevSearchQuery) {
+      this.setFindFieldElValue(this.prevSearchQuery);
+      this.findFieldHandler();
+    }
+    if (!this.opened) {
+      this.opened = true;
+      this.findBarEl.classList.remove(constants/* CLASS_HIDDEN */.zX);
+      this.emit(lib_events/* VIEWER_EVENT */.Oi.metric, {
+        name: lib_events/* USER_DOCUMENT_FIND_EVENTS */.gV.OPEN
+      });
+    }
+    this.inputRef.current?.select();
+    this.inputRef.current?.focus();
+  }
+  toggle() {
+    if (this.opened) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+  findAgain(findPrevious) {
+    if (!canNavigateMatches(this.state.query, this.state.isNotFound)) {
+      return;
+    }
+    this.dispatchFindEvent('again', findPrevious);
+    this.emit(lib_events/* VIEWER_EVENT */.Oi.metric, {
+      name: findPrevious ? lib_events/* USER_DOCUMENT_FIND_EVENTS */.gV.PREVIOUS : lib_events/* USER_DOCUMENT_FIND_EVENTS */.gV.NEXT
+    });
+  }
+  update(nextState) {
+    if (this.isDestroyed) {
+      return;
+    }
+    this.state = DocFindBarV2_objectSpread(DocFindBarV2_objectSpread({}, this.state), nextState);
+    this.render();
+  }
+  render() {
+    // Commits synchronously so open() can focus and select the input right after
+    (0,external_react_dom_.flushSync)(() => {
+      this.root.render(/*#__PURE__*/external_react_["default"].createElement(BlueprintProviders/* default */.A, {
+        container: this.containerEl
+      }, /*#__PURE__*/external_react_["default"].createElement(DocFindBarV2, DocFindBarV2_extends({}, this.state, {
+        inputRef: this.inputRef,
+        nextButtonRef: this.nextButtonRef,
+        onClose: this.close,
+        onFindNext: () => this.findAgain(false),
+        onFindPrevious: () => this.findAgain(true),
+        onQueryChange: this.handleQueryChange,
+        previousButtonRef: this.previousButtonRef
+      }))));
+    });
+  }
+}
 ;// ./src/lib/Cache.js
 
 class Cache {
@@ -61991,6 +62731,7 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
 
 
 
+
 
 
 const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
@@ -63108,7 +63849,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     if (this.isFindDisabled()) {
       return;
     }
-    this.findBar = new doc_DocFindBar(this.containerEl, this.pdfFindController, this.pdfEventBus);
+    const FindBar = this.featureEnabled(constants/* BLUEPRINT_MIGRATION_SUPPORTING_UI */.Ed) ? DocFindBarV2Root : doc_DocFindBar;
+    this.findBar = new FindBar(this.containerEl, this.pdfFindController, this.pdfEventBus);
     this.findBar.addListener(lib_events/* VIEWER_EVENT */.Oi.metric, this.emitMetric);
     this.findBar.addListener('close', this.handleFindBarClose);
   }
@@ -69791,7 +70533,8 @@ function ComparisonBanner({
   return /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders/* default */.A, {
     container: menuContainer
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
-    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on
+    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on,
+    "data-resin-feature": "versionComparison"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     "aria-label": isComparedPreview ? ComparisonBanner_('comparison_banner_previous') : ComparisonBanner_('comparison_banner_current'),
     className: "bp-version-banner-details",
@@ -69829,8 +70572,10 @@ function ComparisonBanner({
   })), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Content, {
     align: "end",
     container: menuContainer ?? undefined,
+    "data-resin-feature": "versionComparison",
     side: "bottom"
   }, onMakeCurrent && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-resin-target": "makeCurrentVersion",
     "data-target-id": "ComparisonBanner-makeCurrent",
     onSelect: onMakeCurrent
   }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
@@ -69838,6 +70583,7 @@ function ComparisonBanner({
   }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
     label: ComparisonBanner_('comparison_banner_make_current')
   })), onDownload && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-resin-target": "downloadVersion",
     "data-target-id": "ComparisonBanner-download",
     onSelect: onDownload
   }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
@@ -69845,6 +70591,7 @@ function ComparisonBanner({
   }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
     label: ComparisonBanner_('download')
   })), onOpenFullPreview && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-resin-target": "openFullPreview",
     "data-target-id": "ComparisonBanner-openFullPreview",
     onSelect: onOpenFullPreview
   }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.StartElement, {
@@ -69852,6 +70599,7 @@ function ComparisonBanner({
   }), /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item.MainContent, {
     label: ComparisonBanner_('comparison_banner_open_full_preview')
   })), onDelete && (onMakeCurrent || onDownload || onOpenFullPreview) && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Separator, null), onDelete && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.DropdownMenu.Item, {
+    "data-resin-target": "deleteVersion",
     "data-target-id": "ComparisonBanner-delete",
     onSelect: onDelete,
     variant: "destructive"
@@ -69864,6 +70612,7 @@ function ComparisonBanner({
     className: "bp-version-banner-divider"
   }), showClose && /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
     "aria-label": ComparisonBanner_('comparison_banner_close'),
+    "data-resin-target": "closeComparison",
     "data-target-id": "ComparisonBanner-close",
     icon: Medium_.XMark,
     onClick: onOpenFullPreview,