box-content-preview 3.109.0 → 3.113.0

package/dist/lib/index.js

@@ -21,7 +21,10 @@
  * and limitations under the license.
  */
 import { decode as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_utils_keys_d752524f_decode__ } from "box-ui-elements/es/utils/keys";
+import { Pause as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__, Play as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__ } from "@box/blueprint-web-assets/icons/MediumFilled";
 import { createPortal as __WEBPACK_EXTERNAL_MODULE_react_dom_7dac9eee_createPortal__ } from "react-dom";
+import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__ from "@box/blueprint-web";
+import * as __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__ from "@box/blueprint-web-assets/icons/Medium";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 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__, bdlGreenLight as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGreenLight__, bdlGrimace as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlGrimace__, bdlWatermelonRed as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlWatermelonRed__, bdlYellorange as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellorange__, bdlYellow as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_bdlYellow__, white as __WEBPACK_EXTERNAL_MODULE_box_ui_elements_es_styles_variables_c815ce80_white__ } from "box-ui-elements/es/styles/variables";
@@ -355,6 +358,7 @@ class PreviewError extends Error {
 /* harmony export */   T2: () => (/* binding */ CLASS_BOX_PREVIEW_BUTTON),
 /* harmony export */   Td: () => (/* binding */ MIN_VIDEO_WIDTH_PX),
 /* harmony export */   U3: () => (/* binding */ CLASS_BOX_PREVIEW_TOGGLE_OVERLAY),
+/* harmony export */   Uj: () => (/* binding */ CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED),
 /* harmony export */   VC: () => (/* binding */ CLASS_IS_SELECTABLE),
 /* harmony export */   VF: () => (/* binding */ SELECTOR_BOX_PREVIEW_ICON),
 /* harmony export */   VL: () => (/* binding */ CLASS_MULTI_IMAGE_PAGE),
@@ -395,6 +399,7 @@ class PreviewError extends Error {
 /* harmony export */   nC: () => (/* binding */ X_REP_HINT_DOC_THUMBNAIL),
 /* harmony export */   oK: () => (/* binding */ CLASS_BOX_PREVIEW_PRELOAD_PLACEHOLDER),
 /* harmony export */   oS: () => (/* binding */ CLASS_BOX_PREVIEW_BASE_HEADER),
+/* harmony export */   on: () => (/* binding */ CLASS_BOX_PREVIEW_VERSION_BANNER),
 /* harmony export */   pM: () => (/* binding */ VIDEO_FTUX_CURSOR_SEEN_KEY),
 /* harmony export */   pl: () => (/* binding */ X_REP_HINT_BASE),
 /* harmony export */   qL: () => (/* binding */ VIDEO_PLAYER_CONTROL_BAR_HEIGHT),
@@ -425,7 +430,7 @@ class PreviewError extends Error {
 /* harmony export */   zb: () => (/* binding */ CLASS_DOC_FIRST_IMAGE),
 /* harmony export */   ze: () => (/* binding */ STATUS_PENDING)
 /* harmony export */ });
-/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_BOX_PREVIEW_VERSION_BANNER, CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_VERSION_BANNER, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
+/* unused harmony exports CLASS_ACTIVE, CLASS_BOX_PREVIEW, CLASS_BOX_PREVIEW_CONTAINER, CLASS_BOX_PREVIEW_HEADER_CONTAINER, CLASS_BOX_PREVIEW_ICON, CLASS_BOX_PREVIEW_LOGO_CUSTOM, CLASS_BOX_PREVIEW_LOGO_DEFAULT, CLASS_PREFETCHED_IMAGE, SELECTOR_BOX_PREVIEW_VERSION_BANNER, SELECTOR_BOX_PREVIEW_HEADER, SELECTOR_BOX_PREVIEW_NOTIFICATION */
 const CLASS_ACTIVE = 'bp-is-active';
 const CLASS_ANNOTATIONS_CREATE_DRAWING = 'bp-annotations-create--drawing';
 const CLASS_ANNOTATIONS_CREATE_HIGHLIGHT = 'bp-annotations-create--highlight';
@@ -1034,7 +1039,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.109.0"; // eslint-disable-line no-undef
+const CLIENT_VERSION = "3.113.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 = {};
@@ -1900,58 +1905,6 @@ function useClickOutside(element, callback) {
 
 /***/ },
 
-/***/ 5827
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
-function _extends() { return _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; }, _extends.apply(null, arguments); }
-
-function IconArrowCurveBack24(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "IconArrowCurveBack24",
-    fill: "none",
-    focusable: "false",
-    height: 24,
-    viewBox: "0 0 24 24",
-    width: 24
-  }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z",
-    fill: "#fff"
-  }));
-}
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconArrowCurveBack24);
-
-/***/ },
-
-/***/ 4419
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
-function _extends() { return _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; }, _extends.apply(null, arguments); }
-
-function IconArrowCurveForward24(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "IconArrowCurveForward24",
-    fill: "none",
-    focusable: "false",
-    height: 24,
-    viewBox: "0 0 24 24",
-    width: 24
-  }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z",
-    fill: "white"
-  }));
-}
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconArrowCurveForward24);
-
-/***/ },
-
 /***/ 6815
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -2055,56 +2008,6 @@ function IconExit24(props) {
 
 /***/ },
 
-/***/ 7502
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
-function _extends() { return _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; }, _extends.apply(null, arguments); }
-
-function IconPause24(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "IconPause24",
-    focusable: false,
-    height: 24,
-    viewBox: "0 0 24 24",
-    width: 24
-  }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M7 2C8.10457 2 9 2.89543 9 4V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2ZM17 2C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20V4C15 2.89543 15.8954 2 17 2Z",
-    fill: "#fff"
-  }));
-}
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconPause24);
-
-/***/ },
-
-/***/ 4684
-(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
-
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   A: () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
-function _extends() { return _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; }, _extends.apply(null, arguments); }
-
-function IconPlay24(props) {
-  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
-    "data-testid": "IconPlay24",
-    focusable: false,
-    height: 24,
-    viewBox: "0 0 24 24",
-    width: 24
-  }, props), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-    d: "M6 19.619V4.38098C6 3.16745 7.36603 2.45622 8.3602 3.15214L19.2445 10.7712C20.0976 11.3683 20.0976 12.6317 19.2445 13.2288L8.36019 20.8479C7.36603 21.5438 6 20.8326 6 19.619Z",
-    fill: "#fff"
-  }));
-}
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (IconPlay24);
-
-/***/ },
-
 /***/ 820
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -2671,25 +2574,111 @@ function MediaSettingsMenuGuides({
 /* harmony export */   A: () => (/* binding */ MediaToggle)
 /* harmony export */ });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1649);
-/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4410);
+/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5346);
 function _extends() { return _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; }, _extends.apply(null, arguments); }
 
 
 function MediaToggle(props) {
-  const handleKeydown = event => {
-    const key = (0,_util__WEBPACK_IMPORTED_MODULE_1__/* .decodeKeydown */ .wU)(event);
-    if (key === 'Enter' || key === 'Space') {
-      event.stopPropagation();
-    }
-  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["default"].createElement("button", _extends({
-    onKeyDown: handleKeydown,
+    onKeyDown: _utils__WEBPACK_IMPORTED_MODULE_1__/* .stopActivationKeyPropagation */ .My,
     type: "button"
   }, props));
 }
 
 /***/ },
 
+/***/ 2677
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ PlayPauseButton)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+;// external "@box/blueprint-web-assets/icons/MediumFilled"
+
+;// ./src/lib/viewers/controls/icons/IconPause24.tsx
+function _extends() { return _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; }, _extends.apply(null, arguments); }
+
+function IconPause24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    "data-testid": "IconPause24",
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M7 2C8.10457 2 9 2.89543 9 4V20C9 21.1046 8.10457 22 7 22C5.89543 22 5 21.1046 5 20V4C5 2.89543 5.89543 2 7 2ZM17 2C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22C15.8954 22 15 21.1046 15 20V4C15 2.89543 15.8954 2 17 2Z",
+    fill: "#fff"
+  }));
+}
+/* harmony default export */ const icons_IconPause24 = (IconPause24);
+;// ./src/lib/viewers/controls/icons/IconPlay24.tsx
+function IconPlay24_extends() { return IconPlay24_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; }, IconPlay24_extends.apply(null, arguments); }
+
+function IconPlay24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", IconPlay24_extends({
+    "data-testid": "IconPlay24",
+    focusable: false,
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M6 19.619V4.38098C6 3.16745 7.36603 2.45622 8.3602 3.15214L19.2445 10.7712C20.0976 11.3683 20.0976 12.6317 19.2445 13.2288L8.36019 20.8479C7.36603 21.5438 6 20.8326 6 19.619Z",
+    fill: "#fff"
+  }));
+}
+/* harmony default export */ const icons_IconPlay24 = (IconPlay24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
+var MediaToggle = __webpack_require__(8997);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
+;// ./src/lib/viewers/controls/media/PlayPauseButton.tsx
+
+
+
+
+
+
+
+function PlayPauseButton({
+  className,
+  isPlaying,
+  onPlayPause,
+  isBlueprintEnabled = false
+}) {
+  const title = isPlaying ? "Pause" : "Play";
+  const handleClick = () => onPlayPause(!isPlaying);
+  if (isBlueprintEnabled) {
+    return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: title
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+      "aria-label": title,
+      "data-resin-target": "playPause",
+      "data-target-id": "PlayPauseButton-playPause",
+      icon: isPlaying ? __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Pause__ : __WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_MediumFilled_1ed4080c_Play__,
+      onClick: handleClick,
+      onKeyDown: utils/* stopActivationKeyPropagation */.My,
+      size: "large",
+      variant: "on-dark"
+    }));
+  }
+  const Icon = isPlaying ? icons_IconPause24 : icons_IconPlay24;
+  return /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    className: className,
+    "data-resin-target": "playPause",
+    onClick: handleClick,
+    title: title
+  }, /*#__PURE__*/external_react_["default"].createElement(Icon, null));
+}
+
+/***/ },
+
 /***/ 6321
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
@@ -2704,18 +2693,10 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/noop.js
 var noop = __webpack_require__(3950);
 var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPlay24.tsx
-var IconPlay24 = __webpack_require__(4684);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPause24.tsx
-var IconPause24 = __webpack_require__(7502);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
-var IconArrowCurveForward24 = __webpack_require__(4419);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
-var IconArrowCurveBack24 = __webpack_require__(5827);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
-var MediaToggle = __webpack_require__(8997);
-// EXTERNAL MODULE: ./src/lib/constants.js
-var constants = __webpack_require__(9130);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
+var PlayPauseButton = __webpack_require__(2677);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/SkipButton.tsx + 2 modules
+var SkipButton = __webpack_require__(2659);
 ;// ./src/lib/viewers/controls/media/PlayPauseToggle.scss
 // extracted by mini-css-extract-plugin
 
@@ -2725,42 +2706,128 @@ var constants = __webpack_require__(9130);
 
 
 
-
-
-
-
 function PlayPauseToggle({
   isPlaying,
   onPlayPause = (noop_default()),
   movePlayback = (noop_default()),
-  hasSkipButtons = true
+  hasSkipButtons = true,
+  isBlueprintEnabled = false
 }) {
-  const PlayPauseIcon = isPlaying ? IconPause24/* default */.A : IconPlay24/* default */.A;
-  const title = isPlaying ? "Pause" : "Play";
-  const skipForwardTitle = "Skip forward";
-  const skipBackwardTitle = "Skip backward";
-  const moveForward = () => {
-    movePlayback(true, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
-  };
-  const moveBackward = () => {
-    movePlayback(false, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
-  };
-  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  return /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
     className: "bp-PlayPauseToggle",
-    "data-resin-target": "skipBackward",
-    onClick: moveBackward,
-    title: skipBackwardTitle
-  }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveBack24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    direction: "backward",
+    movePlayback: movePlayback,
+    isBlueprintEnabled: isBlueprintEnabled
+  }), /*#__PURE__*/external_react_["default"].createElement(PlayPauseButton/* default */.A, {
     className: "bp-PlayPauseToggle",
-    "data-resin-target": "playPause",
-    onClick: () => onPlayPause(!isPlaying),
-    title: title
-  }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseIcon, null)), hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    isPlaying: isPlaying,
+    onPlayPause: onPlayPause,
+    isBlueprintEnabled: isBlueprintEnabled
+  }), hasSkipButtons && /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
     className: "bp-PlayPauseToggle",
-    "data-resin-target": "skipForward",
-    onClick: moveForward,
-    title: skipForwardTitle
-  }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveForward24/* default */.A, null)));
+    direction: "forward",
+    movePlayback: movePlayback,
+    isBlueprintEnabled: isBlueprintEnabled
+  }));
+}
+
+/***/ },
+
+/***/ 2659
+(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
+
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  A: () => (/* binding */ SkipButton)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
+var Medium_ = __webpack_require__(9747);
+;// ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
+function _extends() { return _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; }, _extends.apply(null, arguments); }
+
+function IconArrowCurveBack24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", _extends({
+    "data-testid": "IconArrowCurveBack24",
+    fill: "none",
+    focusable: "false",
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M12.707 2.29346C12.3165 1.90293 11.6835 1.90293 11.293 2.29346L8.64648 4.93994C8.06097 5.52574 8.06083 6.47534 8.64648 7.06104L11.293 9.70752C11.6834 10.0976 12.3166 10.0976 12.707 9.70752C13.0974 9.3171 13.0972 8.68399 12.707 8.29346L11.4131 6.99951H12C15.3136 6.99951 17.9998 9.68597 18 12.9995C18 16.3132 15.3137 18.9995 12 18.9995C10.7239 18.9995 9.54372 18.6019 8.57227 17.9243C8.11945 17.6086 7.49569 17.7198 7.17969 18.1724C6.8638 18.6252 6.97502 19.2489 7.42773 19.5649C8.72394 20.4691 10.3016 20.9995 12 20.9995C16.4183 20.9995 20 17.4178 20 12.9995C19.9998 8.5814 16.4182 4.99951 12 4.99951H11.415L12.707 3.70752C13.0975 3.31707 13.0973 2.684 12.707 2.29346ZM3.2793 8.99951C2.67882 8.99951 2.32725 9.26833 2.27832 9.9126L2.09277 12.3882V12.4126C2.06348 12.8862 2.33203 13.2964 2.92285 13.2964C3.31348 13.2964 3.49414 13.2085 3.76758 12.9692C3.99217 12.7691 4.29991 12.5933 4.68555 12.5933C5.35925 12.5933 5.83283 13.0476 5.83301 13.6919C5.83301 14.3511 5.33984 14.8394 4.6709 14.8394C4.10449 14.8394 3.7627 14.5708 3.48926 14.1606C3.27447 13.8923 3.05948 13.7798 2.72266 13.7798C2.26868 13.7798 2.00015 14.0437 2 14.4829C2 14.6537 2.04404 14.8199 2.12207 14.9761C2.4834 15.6938 3.51855 16.2212 4.68555 16.2212C6.36035 16.2212 7.52246 15.2007 7.52246 13.6528C7.52229 12.3151 6.56531 11.3774 5.23242 11.3774C4.49526 11.3774 3.92389 11.6852 3.65039 12.1489H3.61621L3.75293 10.3765H6.44824C6.87793 10.3765 7.15137 10.1079 7.15137 9.68799C7.15121 9.26828 6.87292 8.99951 6.44824 8.99951H3.2793Z",
+    fill: "#fff"
+  }));
+}
+/* harmony default export */ const icons_IconArrowCurveBack24 = (IconArrowCurveBack24);
+;// ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
+function IconArrowCurveForward24_extends() { return IconArrowCurveForward24_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; }, IconArrowCurveForward24_extends.apply(null, arguments); }
+
+function IconArrowCurveForward24(props) {
+  return /*#__PURE__*/external_react_.createElement("svg", IconArrowCurveForward24_extends({
+    "data-testid": "IconArrowCurveForward24",
+    fill: "none",
+    focusable: "false",
+    height: 24,
+    viewBox: "0 0 24 24",
+    width: 24
+  }, props), /*#__PURE__*/external_react_.createElement("path", {
+    d: "M11.293 2.29346C11.6835 1.90293 12.3165 1.90293 12.707 2.29346L15.3535 4.93994C15.939 5.52574 15.9392 6.47535 15.3535 7.06104L12.707 9.70752C12.3166 10.0976 11.6834 10.0976 11.293 9.70752C10.9026 9.31711 10.9028 8.684 11.293 8.29346L12.5869 6.99951H12C8.68642 6.99951 6.00021 9.68598 6 12.9995C6 16.3132 8.68629 18.9995 12 18.9995C13.2761 18.9995 14.4563 18.6019 15.4277 17.9243C15.8805 17.6086 16.5043 17.7198 16.8203 18.1724C17.1362 18.6252 17.025 19.2489 16.5723 19.5649C15.2761 20.4691 13.6984 20.9995 12 20.9995C7.58172 20.9995 4 17.4178 4 12.9995C4.00021 8.58141 7.58185 4.99951 12 4.99951H12.585L11.293 3.70752C10.9025 3.31708 10.9027 2.684 11.293 2.29346ZM20.9258 8.99951C21.3505 8.99951 21.6287 9.26828 21.6289 9.68799C21.6289 10.1079 21.3555 10.3765 20.9258 10.3765H18.2305L18.0938 12.1489H18.1279C18.4014 11.6852 18.9728 11.3774 19.71 11.3774C21.0428 11.3774 21.9998 12.3151 22 13.6528C22 15.2007 20.8379 16.2212 19.1631 16.2212C17.9961 16.2212 16.9609 15.6938 16.5996 14.9761C16.5216 14.8199 16.4775 14.6537 16.4775 14.4829C16.4777 14.0437 16.7462 13.7798 17.2002 13.7798C17.537 13.7798 17.752 13.8923 17.9668 14.1606C18.2402 14.5708 18.582 14.8394 19.1484 14.8394C19.8174 14.8394 20.3105 14.3511 20.3105 13.6919C20.3104 13.0476 19.8368 12.5933 19.1631 12.5933C18.7774 12.5933 18.4697 12.7691 18.2451 12.9692C17.9717 13.2085 17.791 13.2964 17.4004 13.2964C16.8096 13.2964 16.541 12.8862 16.5703 12.4126V12.3882L16.7559 9.9126C16.8048 9.26833 17.1564 8.99951 17.7568 8.99951H20.9258Z",
+    fill: "white"
+  }));
+}
+/* harmony default export */ const icons_IconArrowCurveForward24 = (IconArrowCurveForward24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
+var MediaToggle = __webpack_require__(8997);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
+// EXTERNAL MODULE: ./src/lib/constants.js
+var constants = __webpack_require__(9130);
+;// ./src/lib/viewers/controls/media/SkipButton.tsx
+
+
+
+
+
+
+
+
+function SkipButton({
+  className,
+  direction,
+  movePlayback,
+  isBlueprintEnabled = false
+}) {
+  const isForward = direction === 'forward';
+  const resinTarget = isForward ? 'skipForward' : 'skipBackward';
+  const title = isForward ? "Skip forward" : "Skip backward";
+  const handleClick = () => movePlayback(isForward, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
+  if (isBlueprintEnabled) {
+    return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: title
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+      "aria-label": title,
+      "data-resin-target": resinTarget,
+      "data-target-id": `SkipButton-${resinTarget}`,
+      icon: isForward ? Medium_.ArrowCurveForward5 : Medium_.ArrowCurveBack5,
+      onClick: handleClick,
+      onKeyDown: utils/* stopActivationKeyPropagation */.My,
+      size: "large",
+      variant: "on-dark"
+    }));
+  }
+  const Icon = isForward ? icons_IconArrowCurveForward24 : icons_IconArrowCurveBack24;
+  return /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    className: className,
+    "data-resin-target": resinTarget,
+    onClick: handleClick,
+    title: title
+  }, /*#__PURE__*/external_react_["default"].createElement(Icon, null));
 }
 
 /***/ },
@@ -3005,9 +3072,13 @@ __webpack_require__.d(__webpack_exports__, {
 
 // EXTERNAL MODULE: external "react"
 var external_react_ = __webpack_require__(1649);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
 // EXTERNAL MODULE: ./node_modules/classnames/index.js
 var classnames = __webpack_require__(2485);
 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames);
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
+var Medium_ = __webpack_require__(9747);
 ;// ./src/lib/viewers/controls/icons/IconVolumeMed24.tsx
 function _extends() { return _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; }, _extends.apply(null, arguments); }
 
@@ -3059,6 +3130,8 @@ function IconVolumeMuted24(props) {
   }));
 }
 /* harmony default export */ const icons_IconVolumeMuted24 = (IconVolumeMuted24);
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/utils.ts
+var utils = __webpack_require__(5346);
 // EXTERNAL MODULE: ./src/lib/viewers/controls/media/MediaToggle.tsx
 var MediaToggle = __webpack_require__(8997);
 ;// ./src/lib/viewers/controls/hooks/useAttention.ts
@@ -3306,9 +3379,24 @@ function VolumeSliderControl(_ref) {
 
 
 
+
+
+
 /** Keyboard volume keeps the flyout open longer than the 200ms max-width transition. */
 const VOLUME_FLYOUT_DISMISS_MS = 1000;
-function getIcon(volume) {
+function getIcon(volume, isBlueprintEnabled = false) {
+  if (isBlueprintEnabled) {
+    if (volume >= 0.66) {
+      return Medium_.Volume2;
+    }
+    if (volume >= 0.33) {
+      return Medium_.Volume1;
+    }
+    if (volume >= 0.01) {
+      return Medium_.Volume0;
+    }
+    return Medium_.VolumeX;
+  }
   let Icon = icons_IconVolumeMuted24;
   if (volume >= 0.66) {
     Icon = icons_IconVolumeMax24;
@@ -3323,6 +3411,7 @@ function VolumeControls({
   keyboardVolumeStep = 0,
   onMuteChange,
   onVolumeChange,
+  isBlueprintEnabled = false,
   volume = 1
 }) {
   const [isActive, handlers, resetAttention] = useAttention();
@@ -3332,7 +3421,7 @@ function VolumeControls({
   const volumeControlElRef = (0,external_react_.useRef)(null); // root; outside pointerdown unpins the flyout
   const revealTimerRef = (0,external_react_.useRef)(0);
   const isMuted = !volume;
-  const Icon = isMuted ? icons_IconVolumeMuted24 : getIcon(volume);
+  const Icon = getIcon(volume, isBlueprintEnabled);
   const title = isMuted ? "Unmute" : "Mute";
   const value = Math.round(volume * 100);
   const isOpen = isActive || isRevealed || isPinned;
@@ -3385,7 +3474,9 @@ function VolumeControls({
   }, [isMuted, onMuteChange]);
   return /*#__PURE__*/external_react_["default"].createElement("div", {
     ref: volumeControlElRef,
-    className: "bp-VolumeControls",
+    className: classnames_default()('bp-VolumeControls', {
+      'bp-VolumeControls--blueprint': isBlueprintEnabled
+    }),
     "data-testid": "bp-volume-controls",
     onBlur: event => {
       handlers.onBlur(event);
@@ -3400,7 +3491,20 @@ function VolumeControls({
     onFocus: handlers.onFocus,
     onMouseOut: handlers.onMouseOut,
     onMouseOver: handlers.onMouseOver
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  }, isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+    content: title,
+    side: "left"
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+    "aria-label": title,
+    "data-resin-target": "volumeToggle",
+    "data-target-id": "VolumeControls-volumeToggle",
+    icon: Icon,
+    onClick: handleToggleClick,
+    onKeyDown: utils/* stopActivationKeyPropagation */.My,
+    onPointerDown: handleTogglePointerDown,
+    size: "large",
+    variant: "on-dark"
+  })) : /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
     className: "bp-VolumeControls-toggle",
     "data-resin-target": "volumeToggle",
     onClick: handleToggleClick,
@@ -3642,8 +3746,8 @@ const CLUSTER_THRESHOLD_PX = 2;
 
 /** Converts a group of markers into a ClusterData object with computed positions and metadata. */
 function finalizeCluster(group, durationValue) {
-  const leftPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .K)(group[0].time, durationValue);
-  const rightPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .K)(group[group.length - 1].time, durationValue);
+  const leftPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .KN)(group[0].time, durationValue);
+  const rightPercent = (0,_utils__WEBPACK_IMPORTED_MODULE_0__/* .percent */ .KN)(group[group.length - 1].time, durationValue);
   const isSinglePoint = leftPercent === rightPercent;
   return {
     id: group.map(m => m.id).join('|'),
@@ -3784,9 +3888,12 @@ function useDismissableMarkerSelection(hostSelectedId = null, selectionSeq = nul
 (__unused_webpack_module, __webpack_exports__, __webpack_require__) {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   K: () => (/* binding */ percent)
+/* harmony export */   KN: () => (/* binding */ percent),
+/* harmony export */   My: () => (/* binding */ stopActivationKeyPropagation)
 /* harmony export */ });
 /* unused harmony export round */
+/* harmony import */ var _util__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4410);
+
 const round = value => {
   return +value.toFixed(4);
 };
@@ -3794,6 +3901,14 @@ const percent = (value1, value2) => {
   return round(value1 / value2 * 100);
 };
 
+// Activation keys must not reach the viewer's keydown handler, which toggles playback on Space.
+const stopActivationKeyPropagation = event => {
+  const key = (0,_util__WEBPACK_IMPORTED_MODULE_0__/* .decodeKeydown */ .wU)(event);
+  if (key === 'Enter' || key === 'Space') {
+    event.stopPropagation();
+  }
+};
+
 /***/ },
 
 /***/ 709
@@ -4855,7 +4970,7 @@ function markerLeftPercent(time, durationSec, viewport) {
   const mapped = hasMappedWindow(viewport);
   const origin = mapped ? viewport.startSec : 0;
   const span = mapped ? viewport.endSec - viewport.startSec : durationSec;
-  return (0,utils/* percent */.K)(time - origin, span);
+  return (0,utils/* percent */.KN)(time - origin, span);
 }
 
 /** Width is unknown until layout. Still place badges, and stack exact same timestamps. */
@@ -4871,8 +4986,8 @@ function clustersByExactTime(markers, durationSec) {
     }
   });
   return groups.map(group => {
-    const leftPercent = (0,utils/* percent */.K)(group[0].time, durationSec);
-    const rightPercent = (0,utils/* percent */.K)(group[group.length - 1].time, durationSec);
+    const leftPercent = (0,utils/* percent */.KN)(group[0].time, durationSec);
+    const rightPercent = (0,utils/* percent */.KN)(group[group.length - 1].time, durationSec);
     return {
       id: group.map(m => m.id).join('|'),
       isSinglePoint: leftPercent === rightPercent,
@@ -7908,6 +8023,7 @@ function MP3ControlsV2({
   rate,
   shuttleDirection = null,
   shuttleRate = 0,
+  isBlueprintEnabled = false,
   volume
 }) {
   const durationValue = typeof durationTime === 'number' && isFinite_default()(durationTime) ? durationTime : 0;
@@ -8110,7 +8226,8 @@ function MP3ControlsV2({
   }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseToggle/* default */.A, {
     hasSkipButtons: false,
     isPlaying: isPlaying,
-    onPlayPause: onPlayPause
+    onPlayPause: onPlayPause,
+    isBlueprintEnabled: isBlueprintEnabled
   }), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-MP3ControlsV2-divider"
   }), /*#__PURE__*/external_react_["default"].createElement(TimestampControl/* default */.Ay, {
@@ -8122,6 +8239,7 @@ function MP3ControlsV2({
     keyboardVolumeStep: keyboardVolumeStep,
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
+    isBlueprintEnabled: isBlueprintEnabled,
     volume: volume
   }), /*#__PURE__*/external_react_["default"].createElement(MediaSettings/* default */.A, {
     autoplay: autoplay,
@@ -16508,6 +16626,28 @@ module.exports = "<svg fill=\"#fff\" height=\"48\" viewBox=\"0 0 24 24\" width=\
 
 /***/ },
 
+/***/ 8912
+(module, __unused_webpack_exports, __webpack_require__) {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["BlueprintProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.BlueprintProvider), ["IconButton"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.IconButton), ["Toolbar"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Toolbar), ["Tooltip"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.Tooltip), ["TooltipProvider"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.TooltipProvider), ["useNoopTreatment"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_e1e285a9__.useNoopTreatment) });
+
+/***/ },
+
+/***/ 9747
+(module, __unused_webpack_exports, __webpack_require__) {
+
+var x = (y) => {
+	var x = {}; __webpack_require__.d(x, y); return x
+} 
+var y = (x) => (() => (x))
+module.exports = x({ ["ArrowCurveBack5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveBack5), ["ArrowCurveForward5"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowCurveForward5), ["ArrowsMaximize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMaximize), ["ArrowsMinimize"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.ArrowsMinimize), ["Volume0"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume0), ["Volume1"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume1), ["Volume2"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.Volume2), ["VolumeX"]: () => (__WEBPACK_EXTERNAL_MODULE__box_blueprint_web_assets_icons_Medium_3b21b01f__.VolumeX) });
+
+/***/ },
+
 /***/ 1649
 (module, __unused_webpack_exports, __webpack_require__) {
 
@@ -25409,7 +25549,7 @@ class Browser {
 ;// ./src/lib/Logger.js
 /* eslint-disable no-undef */
 const CLIENT_NAME = "box-content-preview";
-const CLIENT_VERSION = "3.109.0";
+const CLIENT_VERSION = "3.113.0";
 /* eslint-enable no-undef */
 
 class Logger {
@@ -26425,12 +26565,17 @@ class AnnotationModule {
 }
 ;// ./src/lib/featureChecking.ts
 
+
 const isFeatureEnabled = (features, featureName) => {
   return !!get_default()(features, featureName, false);
 };
 const getFeatureConfig = (features, featureName) => {
   return get_default()(features, featureName, {});
 };
+
+// Every React root gates Blueprint providers on this rather than on its own wave's flag, so a
+// Blueprint surface from any wave always has its providers, whichever root it renders in.
+const isBlueprintEnabled = features => [constants/* BLUEPRINT_MIGRATION_ARCHIVE */.cA, constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ, constants/* BLUEPRINT_MIGRATION_MEDIA_CONTROLS */.dR, constants/* BLUEPRINT_MIGRATION_SUPPORTING_UI */.Ed].some(feature => isFeatureEnabled(features, feature));
 ;// ./src/lib/viewers/BaseViewer.js
 function BaseViewer_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 BaseViewer_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? BaseViewer_ownKeys(Object(t), !0).forEach(function (r) { BaseViewer_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : BaseViewer_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -27823,6 +27968,15 @@ class BaseViewer extends (events_default()) {
     return isFeatureEnabled(this.options.features, feature);
   }
 
+  /**
+   * Whether any Blueprint migration wave is on, which is when React roots mount Blueprint providers
+   *
+   * @return {boolean}
+   */
+  isBlueprintEnabled() {
+    return isBlueprintEnabled(this.options.features);
+  }
+
   /**
    * Hides the preview mask element if it exists
    *
@@ -27861,6 +28015,7 @@ function ArchiveViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
 
 
 
+
 const JS = ['archive.js'];
 const src_CSS = ['archive.css'];
 class ArchiveViewer extends viewers_BaseViewer {
@@ -27871,20 +28026,37 @@ class ArchiveViewer extends viewers_BaseViewer {
      *
      * @private
      * @param {Array<Object>} data - archive data collection
-     * @return {void}
+     * @return {Promise<void>|undefined} pending only when the v2 chunk is loading
      */
     ArchiveViewer_defineProperty(this, "finishLoading", data => {
       if (this.isDestroyed()) {
-        return;
+        return undefined;
       }
       try {
         /* global BoxArchive loaded from archive.js */
-        this.archiveComponent = new BoxArchive(this.archiveEl, this.options.file.name, data);
+        this.archiveComponent = new BoxArchive(this.archiveEl, this.options.file.name, data, {
+          isArchiveV2Enabled: this.isBlueprintEnabled() && this.featureEnabled(constants/* BLUEPRINT_MIGRATION_ARCHIVE */.cA),
+          resin: this.options.resin
+        });
       } catch (error) {
         throw new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.LOAD_VIEWER, "This preview didn’t load. Please try to open or download the file to view.", error);
       }
-      this.loaded = true;
-      this.emit(lib_events/* VIEWER_EVENT */.Oi.load);
+      const {
+        ready
+      } = this.archiveComponent;
+      if (!ready) {
+        this.finishRender();
+        return undefined;
+      }
+
+      // Flag on: hold `load` until the v2 chunk has loaded and rendered
+      return ready.then(() => {
+        if (!this.isDestroyed()) {
+          this.finishRender();
+        }
+      }, error => {
+        throw new PreviewError/* default */.A(lib_events/* ERROR_CODE */.bo.LOAD_VIEWER, "This preview didn’t load. Please try to open or download the file to view.", error);
+      });
     });
   }
   /**
@@ -27932,6 +28104,16 @@ class ArchiveViewer extends viewers_BaseViewer {
       });
     }).then(this.finishLoading).catch(this.handleAssetError);
   }
+  /**
+   * Marks the viewer loaded once the archive has rendered
+   *
+   * @private
+   * @return {void}
+   */
+  finishRender() {
+    this.loaded = true;
+    this.emit(lib_events/* VIEWER_EVENT */.Oi.load);
+  }
 }
 /* harmony default export */ const archive_ArchiveViewer = (ArchiveViewer);
 ;// ./src/lib/viewers/archive/ArchiveLoader.js
@@ -27960,6 +28142,22 @@ var external_react_ = __webpack_require__(1649);
 // EXTERNAL MODULE: ./node_modules/lodash/noop.js
 var noop = __webpack_require__(3950);
 var noop_default = /*#__PURE__*/__webpack_require__.n(noop);
+// EXTERNAL MODULE: external "@box/blueprint-web"
+var blueprint_web_ = __webpack_require__(8912);
+;// ./src/lib/BlueprintProviders.tsx
+
+
+// Preview has no Split client, so Blueprint's treatment-driven configuration resolves to its defaults.
+function BlueprintProviders({
+  children,
+  container
+}) {
+  return /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.BlueprintProvider, {
+    useTreatment: blueprint_web_.useNoopTreatment
+  }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.TooltipProvider, {
+    container: container
+  }, children));
+}
 ;// ./src/lib/viewers/controls/controls-layer/ControlsLayerContext.ts
 
 
@@ -28079,12 +28277,14 @@ function ControlsRoot_toPrimitive(t, r) { if ("object" != typeof t || !t) return
 
 
 
+
 class ControlsRoot {
   constructor({
     className = 'bp-ControlsRoot',
     containerEl,
     fileExtension,
     fileId,
+    isBlueprintEnabled = false,
     onHide = (noop_default()),
     onShow = (noop_default())
   }) {
@@ -28097,6 +28297,7 @@ class ControlsRoot {
     });
     ControlsRoot_defineProperty(this, "handleHide", void 0);
     ControlsRoot_defineProperty(this, "handleShow", void 0);
+    ControlsRoot_defineProperty(this, "isBlueprintEnabled", void 0);
     ControlsRoot_defineProperty(this, "root", void 0);
     ControlsRoot_defineProperty(this, "handleMount", helpers => {
       this.controlsLayer = helpers;
@@ -28123,6 +28324,7 @@ class ControlsRoot {
     this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.controlsEl);
     this.handleHide = onHide;
     this.handleShow = onShow;
+    this.isBlueprintEnabled = isBlueprintEnabled;
   }
   destroy() {
     this.root.unmount();
@@ -28139,11 +28341,14 @@ class ControlsRoot {
     this.controlsEl.classList.remove('bp-is-hidden');
   }
   render(controls) {
-    this.root.render(/*#__PURE__*/external_react_["default"].createElement(ControlsLayer, {
+    const layer = /*#__PURE__*/external_react_["default"].createElement(ControlsLayer, {
       onHide: this.handleHide,
       onMount: this.handleMount,
       onShow: this.handleShow
-    }, controls));
+    }, controls);
+    this.root.render(this.isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders, {
+      container: this.containerEl
+    }, layer) : layer);
   }
 }
 ;// ./src/lib/viewers/image/ImageBaseViewer.js
@@ -28362,7 +28567,8 @@ class ImageBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
   }
 
@@ -32837,7 +33043,8 @@ class Image360Viewer extends box3d_Box3DViewer {
   createSubModules() {
     this.controls = this.getViewerOption('useReactControls') ? new ControlsRoot({
       containerEl: this.wrapperEl,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     }) : new box3d_Box3DControls(this.wrapperEl);
     this.renderer = new image360_Image360Renderer(this.wrapperEl, this.boxSdk, {
       api: this.api
@@ -33813,7 +34020,8 @@ class TextBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
     this.bindDOMListeners();
     this.renderUI();
@@ -37135,6 +37343,16 @@ class MediaBaseViewer extends viewers_BaseViewer {
   isPlayNextEnabled() {
     return this.cache.get(MEDIA_PLAY_NEXT_CACHE_KEY) === 'Enabled';
   }
+
+  /**
+   * Determines if the media controls render their Blueprint versions
+   *
+   * @protected
+   * @return {boolean} Indicates if the Blueprint media controls flag is on
+   */
+  isBlueprintMediaControlsEnabled() {
+    return this.featureEnabled(constants/* BLUEPRINT_MIGRATION_MEDIA_CONTROLS */.dR);
+  }
   /**
    * Loads the controls
    *
@@ -38170,15 +38388,19 @@ function MP3ControlsRoot_toPropertyKey(t) { var i = MP3ControlsRoot_toPrimitive(
 function MP3ControlsRoot_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); }
 
 
+
+
 class MP3ControlsRoot {
   constructor({
     containerEl,
     fileExtension,
     fileId,
+    isBlueprintEnabled = false,
     resinFeature
   }) {
     MP3ControlsRoot_defineProperty(this, "containerEl", void 0);
     MP3ControlsRoot_defineProperty(this, "controlsEl", void 0);
+    MP3ControlsRoot_defineProperty(this, "isBlueprintEnabled", void 0);
     MP3ControlsRoot_defineProperty(this, "root", void 0);
     this.controlsEl = document.createElement('div');
     this.controlsEl.setAttribute('class', 'bp-MP3ControlsRoot');
@@ -38191,6 +38413,7 @@ class MP3ControlsRoot {
     this.controlsEl.setAttribute('data-resin-fileextension', fileExtension || '');
     this.containerEl = containerEl;
     this.containerEl.appendChild(this.controlsEl);
+    this.isBlueprintEnabled = isBlueprintEnabled;
     this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.controlsEl);
   }
   destroy() {
@@ -38200,7 +38423,9 @@ class MP3ControlsRoot {
     }
   }
   render(controls) {
-    this.root.render(controls);
+    this.root.render(this.isBlueprintEnabled ? /*#__PURE__*/external_react_["default"].createElement(BlueprintProviders, {
+      container: this.containerEl
+    }, controls) : controls);
   }
 }
 // EXTERNAL MODULE: ./src/lib/viewers/media/waveform/constants.ts
@@ -38631,6 +38856,7 @@ class MP3Viewer extends media_MediaBaseViewer {
       containerEl: this.mediaContainerEl,
       fileExtension: file.extension || '',
       fileId: file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled(),
       resinFeature: this.isAudioPlayerV2 ? constants/* AUDIO_PLAYER_V2_RESIN_FEATURE */.dl : undefined
     });
   }
@@ -39610,7 +39836,8 @@ class MP3Viewer extends media_MediaBaseViewer {
         peaks: this.waveformPeaks,
         playNext: this.isPlayNextEnabled(),
         shuttleDirection: this.shuttleDirection,
-        shuttleRate: this.shuttleRate
+        shuttleRate: this.shuttleRate,
+        isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
       })));
       return;
     }
@@ -40602,6 +40829,7 @@ class VideoBaseViewer extends media_MediaBaseViewer {
       className: 'bp-VideoControlsRoot',
       containerEl: controlsContainerEl,
       fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled(),
       onHide: this.handleControlsHide,
       onShow: this.handleControlsShow
     });
@@ -41235,6 +41463,10 @@ function VideoControls({
     onFullscreenToggle: onFullscreenToggle
   })))));
 }
+// EXTERNAL MODULE: ./src/lib/viewers/controls/media/PlayPauseButton.tsx + 3 modules
+var PlayPauseButton = __webpack_require__(2677);
+// 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 + 1 modules
 var TimestampControl = __webpack_require__(3904);
 // EXTERNAL MODULE: ./src/lib/viewers/media/formatTimecode.ts
@@ -41471,9 +41703,9 @@ function TimeControlsV2({
   } = (0,useDismissableMarkerSelection/* default */.A)(hostSelectedId, selectedMarker?.selectionSeq ?? null);
   const currentValue = isFinite_default()(currentTime) ? currentTime : 0;
   const durationValue = isFinite_default()(durationTime) ? durationTime : 0;
-  const currentPercentage = (0,utils/* percent */.K)(currentValue, durationValue);
+  const currentPercentage = (0,utils/* percent */.KN)(currentValue, durationValue);
   const bufferedAmount = bufferedRange && bufferedRange.length ? bufferedRange.end(bufferedRange.length - 1) : 0;
-  const bufferedPercentage = (0,utils/* percent */.K)(bufferedAmount, durationValue);
+  const bufferedPercentage = (0,utils/* percent */.KN)(bufferedAmount, durationValue);
   external_react_["default"].useLayoutEffect(() => {
     const el = scrubberRef.current;
     if (!el) return undefined;
@@ -41563,6 +41795,8 @@ function TimeControlsV2({
     selectedId: selectedId
   }))));
 }
+// EXTERNAL MODULE: external "@box/blueprint-web-assets/icons/Medium"
+var Medium_ = __webpack_require__(9747);
 ;// ./src/lib/viewers/controls/media/VideoFullscreenButton.scss
 // extracted by mini-css-extract-plugin
 
@@ -41572,9 +41806,13 @@ function TimeControlsV2({
 
 
 
+
+
+
 function VideoFullscreenButton({
   mediaEl,
-  onFullscreenToggle
+  onFullscreenToggle,
+  isBlueprintEnabled = false
 }) {
   const isFullscreen = useFullscreen();
   const title = isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
@@ -41614,27 +41852,38 @@ function VideoFullscreenButton({
   }) => {
     onFullscreenToggle(!isFullscreen, target);
   };
+  const positionStyle = position ? {
+    top: position.top,
+    right: position.right
+  } : undefined;
+  if (isBlueprintEnabled) {
+    return /*#__PURE__*/external_react_["default"].createElement("div", {
+      ref: ref,
+      className: "bp-VideoFullscreenButton-position",
+      style: positionStyle
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.Tooltip, {
+      content: title
+    }, /*#__PURE__*/external_react_["default"].createElement(blueprint_web_.IconButton, {
+      "aria-label": title,
+      "data-resin-target": "videoFullscreen",
+      "data-target-id": "VideoFullscreenButton-toggle",
+      icon: isFullscreen ? Medium_.ArrowsMinimize : Medium_.ArrowsMaximize,
+      onClick: handleClick,
+      onKeyDown: utils/* stopActivationKeyPropagation */.My,
+      size: "large",
+      variant: "on-dark"
+    })));
+  }
   return /*#__PURE__*/external_react_["default"].createElement("button", {
     ref: ref,
     className: "bp-VideoFullscreenButton",
     "data-resin-target": "videoFullscreen",
     onClick: handleClick,
-    style: position ? {
-      top: position.top,
-      right: position.right
-    } : undefined,
+    style: positionStyle,
     title: title,
     type: "button"
   }, isFullscreen ? /*#__PURE__*/external_react_["default"].createElement(icons_IconArrowsMinimizeMedium24, null) : /*#__PURE__*/external_react_["default"].createElement(icons_IconArrowsMaximizeMedium24, null));
 }
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPlay24.tsx
-var IconPlay24 = __webpack_require__(4684);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconPause24.tsx
-var IconPause24 = __webpack_require__(7502);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveForward24.tsx
-var IconArrowCurveForward24 = __webpack_require__(4419);
-// EXTERNAL MODULE: ./src/lib/viewers/controls/icons/IconArrowCurveBack24.tsx
-var IconArrowCurveBack24 = __webpack_require__(5827);
 ;// ./src/lib/viewers/media/VideoControlsV2.scss
 // extracted by mini-css-extract-plugin
 
@@ -41653,9 +41902,6 @@ var IconArrowCurveBack24 = __webpack_require__(5827);
 
 
 
-
-
-
 function VideoControlsV2({
   annotationColor,
   annotationMode,
@@ -41704,19 +41950,10 @@ function VideoControlsV2({
   rate,
   subtitle,
   subtitles = [],
+  isBlueprintEnabled = false,
   videoAnnotationsEnabled = false,
   volume
 }) {
-  const PlayPauseIcon = isPlaying ? IconPause24/* default */.A : IconPlay24/* default */.A;
-  const playPauseTitle = isPlaying ? "Pause" : "Play";
-  const skipForwardTitle = "Skip forward";
-  const skipBackwardTitle = "Skip backward";
-  const moveForward = () => {
-    movePlayback(true, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
-  };
-  const moveBackward = () => {
-    movePlayback(false, constants/* MEDIA_PLAYBACK_SKIP_DURATION */.uN);
-  };
   return /*#__PURE__*/external_react_["default"].createElement(ExperiencesProvider, {
     experiences: experiences
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
@@ -41724,7 +41961,8 @@ function VideoControlsV2({
     "data-testid": "media-controls-wrapper-v2"
   }, /*#__PURE__*/external_react_["default"].createElement(VideoFullscreenButton, {
     mediaEl: mediaEl,
-    onFullscreenToggle: onFullscreenToggle
+    onFullscreenToggle: onFullscreenToggle,
+    isBlueprintEnabled: isBlueprintEnabled
   }), /*#__PURE__*/external_react_["default"].createElement(TimeControlsV2, {
     aspectRatio: aspectRatio,
     bufferedRange: bufferedRange,
@@ -41740,24 +41978,24 @@ function VideoControlsV2({
     className: "bp-VideoControlsV2-bar"
   }, /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControlsV2-group bp-VideoControlsV2-group--left"
-  }, /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+  }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseButton/* default */.A, {
     className: "bp-VideoControlsV2-playPause",
-    "data-resin-target": "playPause",
-    onClick: () => onPlayPause(!isPlaying),
-    title: playPauseTitle
-  }, /*#__PURE__*/external_react_["default"].createElement(PlayPauseIcon, null)), !isNarrowVideo && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement("div", {
+    isPlaying: isPlaying,
+    onPlayPause: onPlayPause,
+    isBlueprintEnabled: isBlueprintEnabled
+  }), !isNarrowVideo && /*#__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(MediaToggle/* default */.A, {
+  }), /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
     className: "bp-VideoControlsV2-skipBtn",
-    "data-resin-target": "skipBackward",
-    onClick: moveBackward,
-    title: skipBackwardTitle
-  }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveBack24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement(MediaToggle/* default */.A, {
+    direction: "backward",
+    movePlayback: movePlayback,
+    isBlueprintEnabled: isBlueprintEnabled
+  }), /*#__PURE__*/external_react_["default"].createElement(SkipButton/* default */.A, {
     className: "bp-VideoControlsV2-skipBtn",
-    "data-resin-target": "skipForward",
-    onClick: moveForward,
-    title: skipForwardTitle
-  }, /*#__PURE__*/external_react_["default"].createElement(IconArrowCurveForward24/* default */.A, null)), /*#__PURE__*/external_react_["default"].createElement("div", {
+    direction: "forward",
+    movePlayback: movePlayback,
+    isBlueprintEnabled: isBlueprintEnabled
+  }), /*#__PURE__*/external_react_["default"].createElement("div", {
     className: "bp-VideoControlsV2-divider"
   })), /*#__PURE__*/external_react_["default"].createElement(TimestampControl/* default */.Ay, {
     canChangeTimeFormat: canChangeTimeFormat,
@@ -41771,6 +42009,7 @@ function VideoControlsV2({
   }, /*#__PURE__*/external_react_["default"].createElement(VolumeControls/* default */.Ay, {
     onMuteChange: onMuteChange,
     onVolumeChange: onVolumeChange,
+    isBlueprintEnabled: isBlueprintEnabled,
     volume: volume
   }), /*#__PURE__*/external_react_["default"].createElement(SubtitlesToggle, {
     isAutoGeneratedSubtitles: isAutoGeneratedSubtitles,
@@ -41952,7 +42191,8 @@ class MP4Viewer extends media_VideoBaseViewer {
     if (this.isVideoPlayerV2) {
       this.controls.render(/*#__PURE__*/external_react_["default"].createElement(VideoControlsV2, MP4Viewer_extends({}, sharedProps, {
         onPlayNextChange: this.setPlayNext,
-        playNext: this.isPlayNextEnabled()
+        playNext: this.isPlayNextEnabled(),
+        isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
       })));
       return;
     }
@@ -43451,7 +43691,8 @@ class DashViewer extends media_VideoBaseViewer {
         onCommentMarkerClick: this.handleCommentMarkerClick
       }, sharedProps, {
         onPlayNextChange: this.setPlayNext,
-        playNext: this.isPlayNextEnabled()
+        playNext: this.isPlayNextEnabled(),
+        isBlueprintEnabled: this.isBlueprintMediaControlsEnabled()
       })));
       return;
     }
@@ -44375,6 +44616,107 @@ function DocControls({
     onAnnotationColorChange: onAnnotationColorChange
   })));
 }
+;// ./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) {
+  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({
+    "data-testid": "bp-ControlsBar"
+  }, rest), children);
+}
+;// ./src/lib/viewers/doc/DocControlsV2.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+function DocControlsV2({
+  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(ControlsBarV2, null, !isGalleryOpen && /*#__PURE__*/external_react_["default"].createElement(external_react_["default"].Fragment, null, /*#__PURE__*/external_react_["default"].createElement(ThumbnailsToggle, {
+    isThumbnailsOpen: isThumbnailsOpen,
+    onThumbnailsToggle: onThumbnailsToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(FindBarToggle, {
+    onFindBarToggle: onFindBarToggle
+  }), /*#__PURE__*/external_react_["default"].createElement(PageControls, {
+    onPageChange: onPageChange,
+    onPageSubmit: onPageSubmit,
+    pageCount: pageCount,
+    pageNumber: pageNumber
+  })), (!isGalleryOpen || hasGalleryZoom) && /*#__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(RotateControl, {
+    onRotateLeft: onRotateLeft
+  }), /*#__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
+  })));
+}
 ;// ./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";
 ;// ./src/lib/icons/arrow_drop_up.svg
@@ -47955,6 +48297,7 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
 
 
 
+
 
 
 const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
@@ -49314,7 +49657,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     this.controls = new ControlsRoot({
       containerEl: this.containerEl,
       fileExtension: this.options.file.extension,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     });
     this.annotationControlsFSM.subscribe(() => this.renderUI());
     this.renderUI();
@@ -49352,7 +49696,8 @@ class DocBaseViewer extends viewers_BaseViewer {
     const canRotate = this.featureEnabled('rotate.enabled');
     const canGallery = !this.isMobile && this.galleryController.canRender(this.pdfViewer.pagesCount);
     const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.isEnhancedGalleryEnabled;
-    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(DocControls, {
+    const Controls = this.featureEnabled(constants/* BLUEPRINT_MIGRATION_CONTROLS_BAR */.OQ) ? DocControlsV2 : DocControls;
+    this.controls.render(/*#__PURE__*/external_react_["default"].createElement(Controls, {
       annotationColor: this.annotationModule.getColor(),
       annotationMode: this.annotationControlsFSM.getMode(),
       experiences: this.experiences,
@@ -54258,7 +54603,8 @@ class Model3DViewer extends box3d_Box3DViewer {
   createSubModules() {
     this.controls = this.getViewerOption('useReactControls') ? new ControlsRoot({
       containerEl: this.wrapperEl,
-      fileId: this.options.file.id
+      fileId: this.options.file.id,
+      isBlueprintEnabled: this.isBlueprintEnabled()
     }) : new model3d_Model3DControls(this.wrapperEl);
     this.renderer = new model3d_Model3DRenderer(this.wrapperEl, this.boxSdk, {
       api: this.api
@@ -55225,6 +55571,79 @@ office_OfficeLoader,
 doc_DocLoader,
 // should come after text
 swf_SWFLoader, video360_Video360Loader, media_MediaLoader, image360_Image360Loader, image_ImageLoader, model3d_Model3DLoader, iframe_IFrameLoader]);
+;// ./src/lib/ComparisonBanner.tsx
+function ComparisonBanner_defineProperty(e, r, t) { return (r = ComparisonBanner_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function ComparisonBanner_toPropertyKey(t) { var i = ComparisonBanner_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function ComparisonBanner_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); }
+
+
+
+function formatComparisonTimestamp(iso, locale) {
+  if (!iso) {
+    return '';
+  }
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale || 'en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit'
+  }).format(date);
+}
+function getComparisonBannerAuthor(file = {}) {
+  return file.modified_by?.name || file.created_by?.name || '';
+}
+function ComparisonBanner({
+  file = {},
+  isComparedPreview = false,
+  locale
+}) {
+  const versionNumber = file.version_number != null && file.version_number !== '' ? String(file.version_number) : '';
+  const timestamp = formatComparisonTimestamp(file.modified_at, locale);
+  const author = getComparisonBannerAuthor(file);
+  if (!versionNumber && !timestamp && !author) {
+    return null;
+  }
+  return /*#__PURE__*/external_react_["default"].createElement("div", {
+    "aria-label": isComparedPreview ? "Previous version" : "Current version",
+    className: isComparedPreview ? `${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on} ${constants/* CLASS_BOX_PREVIEW_VERSION_BANNER_COMPARED */.Uj}` : constants/* CLASS_BOX_PREVIEW_VERSION_BANNER */.on,
+    role: "status"
+  }, versionNumber && /*#__PURE__*/external_react_["default"].createElement("span", {
+    className: "bp-version-banner-badge"
+  }, versionNumber), (timestamp || author) && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-info"
+  }, timestamp && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-time"
+  }, timestamp), author && /*#__PURE__*/external_react_["default"].createElement("div", {
+    className: "bp-version-banner-author"
+  }, author)));
+}
+class ComparisonBannerRoot {
+  constructor(containerEl) {
+    ComparisonBanner_defineProperty(this, "hostEl", void 0);
+    ComparisonBanner_defineProperty(this, "root", void 0);
+    this.hostEl = document.createElement('div');
+    containerEl.insertBefore(this.hostEl, containerEl.firstChild);
+    this.root = __WEBPACK_EXTERNAL_MODULE_react_dom_client_4cb20cd7_createRoot__(this.hostEl);
+  }
+  render(file = {}, {
+    isComparedPreview = false,
+    locale
+  } = {}) {
+    this.root.render(/*#__PURE__*/external_react_["default"].createElement(ComparisonBanner, {
+      file: file,
+      isComparedPreview: isComparedPreview,
+      locale: locale
+    }));
+  }
+  destroy() {
+    this.root.unmount();
+    this.hostEl.remove();
+  }
+}
 ;// external "box-ui-elements/es/components/preview"
 
 ;// ./src/lib/viewers/error/ErrorIcon.tsx
@@ -55975,6 +56394,7 @@ function Preview_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; v
 
 
 
+
 const DEFAULT_DISABLED_VIEWERS = ['Office']; // viewers disabled by default
 const PREFETCH_COUNT = 4; // number of files to prefetch
 const MOUSEMOVE_THROTTLE_MS = 1500; // for showing or hiding the navigation icons
@@ -56043,6 +56463,8 @@ class Preview extends (events_default()) {
     Preview_defineProperty(this, "retryTimeout", void 0);
     /** @property {HTMLElement} - Preview DOM container */
     Preview_defineProperty(this, "container", void 0);
+    /** @property {ComparisonBannerRoot} - Version comparison banner */
+    Preview_defineProperty(this, "comparisonBannerRoot", void 0);
     /** @property {Function} - Throttled mousemove handler */
     Preview_defineProperty(this, "throttledMousemoveHandler", void 0);
     /** @property {Cache} - Preview's cache instance */
@@ -56182,6 +56604,7 @@ class Preview extends (events_default()) {
     if (this.perf) {
       this.perf.destroy();
     }
+    this.destroyComparisonBanner();
 
     // Clean the UI
     this.ui.cleanup();
@@ -56866,11 +57289,14 @@ class Preview extends (events_default()) {
    * @return {void}
    */
   setupUI() {
+    this.destroyComparisonBanner();
+
     // Setup the shell
     this.container = this.ui.setup(this.options, this.keydownHandler, this.navigateLeft, this.navigateRight, this.throttledMousemoveHandler);
 
     // Set up the notification
     this.ui.setupNotification();
+    this.updateComparisonBanner();
 
     // Update navigation
     this.ui.showNavigation(this.file.id, this.collection);
@@ -56884,6 +57310,67 @@ class Preview extends (events_default()) {
     lib_Timer.start(previewDurationTag);
   }
 
+  /**
+   * @public
+   * @param {Object} [mode]
+   * @param {boolean} [mode.isComparing] - This Preview is in a comparison (not “current pane”)
+   * @param {boolean} [mode.isComparedPreview] - Compared (previous version) pane; implies isComparing
+   * @return {void}
+   */
+  setComparisonMode(mode = {}) {
+    if ('isComparedPreview' in mode) {
+      this.options.isComparedPreview = !!mode.isComparedPreview;
+    }
+    if ('isComparing' in mode) {
+      this.options.isComparing = !!mode.isComparing;
+    }
+    if (this.options.isComparedPreview) {
+      this.options.isComparing = true;
+    }
+    this.updateComparisonBanner();
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  updateComparisonBanner() {
+    const {
+      comparisonBanner,
+      isComparing
+    } = this.options;
+    const isComparedPreview = !!this.options.isComparedPreview;
+    if (!isComparing && !isComparedPreview) {
+      this.destroyComparisonBanner();
+      return;
+    }
+    if (!this.container) {
+      return;
+    }
+    if (!this.comparisonBannerRoot) {
+      this.comparisonBannerRoot = new ComparisonBannerRoot(this.container);
+    }
+    const {
+      currentFileVersion,
+      previousFileVersion
+    } = comparisonBanner || {};
+    this.comparisonBannerRoot.render(isComparedPreview ? previousFileVersion : currentFileVersion, {
+      isComparedPreview,
+      locale: (0,util/* getProp */.GT)(this.location, 'locale')
+    });
+  }
+
+  /**
+   * @private
+   * @return {void}
+   */
+  destroyComparisonBanner() {
+    if (this.comparisonBannerRoot) {
+      this.comparisonBannerRoot.destroy();
+      this.comparisonBannerRoot = undefined;
+    }
+  }
+
   /**
    * Parses preview options.
    *
@@ -57011,6 +57498,11 @@ class Preview extends (events_default()) {
     // Options that are applicable to certain file ids
     this.options.fileOptions = options.fileOptions || {};
 
+    // isComparing = in a comparison; isComparedPreview = compared pane (implies isComparing)
+    this.options.comparisonBanner = options.comparisonBanner || {};
+    this.options.isComparedPreview = !!options.isComparedPreview;
+    this.options.isComparing = !!options.isComparing || this.options.isComparedPreview;
+
     // Option to enable use of thumbnails sidebar for document types
     this.options.enableThumbnailsSidebar = !!options.enableThumbnailsSidebar;