@atlaskit/media-viewer 54.9.9 → 54.10.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/media-viewer
 
+## 54.10.0
+
+### Minor Changes
+
+- [`f4b5f17c2d1c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f4b5f17c2d1c0) -
+  [ux] Add an opt-in inset Media Viewer presentation behind the new `useInsetViewer` field on
+  `MediaViewerExtensions`, gated at runtime by the `cc_comments_inset_media_viewer` feature gate.
+  When a consumer passes `useInsetViewer` and the feature gate is enabled, the viewer renders as a
+  rounded card on a dimmed blanket instead of the full-bleed overlay: clicking the blanket closes
+  the viewer, clicking the media itself no longer does, the overlay header is not rendered, and
+  prev/next use circular icon buttons. With the feature gate disabled, or with `useInsetViewer`
+  absent or false, the default full-bleed overlay renders unchanged.
+
 ## 54.9.9
 
 ### Patch Changes

package/dist/cjs/analytics/ufoExperiences.js

@@ -14,7 +14,7 @@ var _experienceTypes = require("@atlaskit/ufo/experience-types");
 function 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 _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "54.9.8";
+var packageVersion = "54.9.9";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {

package/dist/cjs/insetViewerContext.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withInsetViewer = exports.useIsInsetViewer = exports.InsetViewerProvider = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var InsetViewerContext = /*#__PURE__*/(0, _react.createContext)(false);
+var InsetViewerProvider = exports.InsetViewerProvider = function InsetViewerProvider(_ref) {
+  var _ref$isInsetViewer = _ref.isInsetViewer,
+    isInsetViewer = _ref$isInsetViewer === void 0 ? false : _ref$isInsetViewer,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(InsetViewerContext.Provider, {
+    value: isInsetViewer
+  }, children);
+};
+var useIsInsetViewer = exports.useIsInsetViewer = function useIsInsetViewer() {
+  return (0, _react.useContext)(InsetViewerContext);
+};
+var withInsetViewer = exports.withInsetViewer = function withInsetViewer(WrappedComponent) {
+  var WithInsetViewer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+    var isInsetViewer = useIsInsetViewer();
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({}, props, {
+      ref: ref,
+      isInsetViewer: isInsetViewer
+    }));
+  });
+  WithInsetViewer.displayName = "WithInsetViewer(".concat(WrappedComponent.displayName || WrappedComponent.name || 'Component', ")");
+  return WithInsetViewer;
+};

package/dist/cjs/list.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _mediaCommon = require("@atlaskit/media-common");
 var _classNames = require("@atlaskit/media-ui/classNames");
 var _headerWithIntl = _interopRequireDefault(require("./headerWithIntl"));
+var _insetViewerContext = require("./insetViewerContext");
 var _itemViewer = require("./item-viewer");
 var _navigation = require("./navigation");
 var _styleWrappers = require("./styleWrappers");
@@ -44,7 +45,9 @@ var List = exports.List = function List(_ref) {
   var traceContext = (0, _react.useRef)({
     traceId: (0, _mediaCommon.getRandomTelemetryId)()
   });
-  return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper
+  var isInsetViewer = (0, _insetViewerContext.useIsInsetViewer)();
+  var ViewerWrapper = isInsetViewer ? _styleWrappers.ItemStage : _react.default.Fragment;
+  return /*#__PURE__*/_react.default.createElement(_styleWrappers.ListWrapper, null, !isInsetViewer && /*#__PURE__*/_react.default.createElement(_styleWrappers.HeaderWrapper
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   , {
     className: _classNames.hideControlsClassName,
@@ -60,7 +63,7 @@ var List = exports.List = function List(_ref) {
     onSetArchiveSideBarVisible: setIsArchiveSideBarVisible,
     traceContext: traceContext.current,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), /*#__PURE__*/_react.default.createElement(_itemViewer.ItemViewer, {
+  })), /*#__PURE__*/_react.default.createElement(ViewerWrapper, null, /*#__PURE__*/_react.default.createElement(_itemViewer.ItemViewer, {
     identifier: selectedItem,
     showControls: showControls,
     onClose: onClose,
@@ -69,7 +72,7 @@ var List = exports.List = function List(_ref) {
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     traceContext: traceContext.current
-  }), /*#__PURE__*/_react.default.createElement(_navigation.Navigation, {
+  })), /*#__PURE__*/_react.default.createElement(_navigation.Navigation, {
     items: items,
     selectedItem: selectedItem,
     onChange: function onChange(nextSelectedItem) {

package/dist/cjs/media-viewer.js

@@ -17,11 +17,13 @@ var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents"
 var _mediaClient = require("@atlaskit/media-client");
 var _shortcut = require("@atlaskit/media-ui/shortcut");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _modal = require("./analytics/events/screen/modal");
 var _closed = require("./analytics/events/ui/closed");
 var _fireAnalytics = require("./analytics/fireAnalytics");
 var _classnames = require("./classnames");
 var _content = require("./content");
+var _insetViewerContext = require("./insetViewerContext");
 var _list = require("./list");
 var _styleWrappers = require("./styleWrappers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -54,6 +56,10 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSidebarVisible = _useState2[0],
     setIsSidebarVisibleState = _useState2[1];
+  // The inset presentation has its own feature gate, separate from the functionality above. The
+  // value flows out through InsetViewerProvider, so with the gate off every downstream
+  // useIsInsetViewer() is false and the full-bleed overlay renders unchanged.
+  var isInsetViewer = (0, _fg.fg)('cc_comments_inset_media_viewer') && !!(extensions !== null && extensions !== void 0 && extensions.useInsetViewer);
   var setIsSidebarVisible = (0, _react.useCallback)(function (isVisible) {
     setIsSidebarVisibleState(isVisible);
     onSidebarVisibilityChange === null || onSidebarVisibilityChange === void 0 || onSidebarVisibilityChange(isVisible);
@@ -159,19 +165,29 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
       }));
     }
   };
+  var ConditionalInsetViewerShell = isInsetViewer ? _styleWrappers.InsetViewerShell : _react.default.Fragment;
+  var ConditionalInsetViewerLayout = isInsetViewer ? _styleWrappers.InsetViewerLayout : _react.default.Fragment;
+  var ConditionalInsetMediaColumn = isInsetViewer ? _styleWrappers.MediaColumn : _react.default.Fragment;
+  var ConditionalInsetMediaStage = isInsetViewer ? _styleWrappers.MediaStage : _react.default.Fragment;
   var content = /*#__PURE__*/_react.default.createElement("div", {
     ref: innerRef
+  }, /*#__PURE__*/_react.default.createElement(_insetViewerContext.InsetViewerProvider, {
+    isInsetViewer: isInsetViewer
   }, /*#__PURE__*/_react.default.createElement(_styleWrappers.Blanket, {
     "data-testid": "media-viewer-popup"
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
     className: _classnames.mediaViewerPopupClass
-  }, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
+  }, isInsetViewer ? /*#__PURE__*/_react.default.createElement(_styleWrappers.BlanketCloseButton, {
+    onClick: function onClick() {
+      return handlePreviewClose('blanket');
+    }
+  }) : null, /*#__PURE__*/_react.default.createElement(_shortcut.Shortcut, {
     code: 'Escape',
     handler: function handler() {
       handlePreviewClose('escKey');
     }
-  }), /*#__PURE__*/_react.default.createElement(_content.Content, {
+  }), /*#__PURE__*/_react.default.createElement(ConditionalInsetViewerShell, null, /*#__PURE__*/_react.default.createElement(ConditionalInsetViewerLayout, null, /*#__PURE__*/_react.default.createElement(ConditionalInsetMediaColumn, null, /*#__PURE__*/_react.default.createElement(ConditionalInsetMediaStage, null, /*#__PURE__*/_react.default.createElement(_content.Content, {
     isSidebarVisible: isSidebarVisible,
     onClose: function onClose(_e, analyticsEvent) {
       var _analyticsEvent$paylo;
@@ -210,7 +226,7 @@ var MediaViewerComponent = function MediaViewerComponent(_ref) {
     featureFlags: featureFlags,
     viewerOptions: viewerOptions,
     fallbackMediaNameFetcher: fallbackMediaNameFetcher
-  })), renderSidebar()));
+  })))), renderSidebar())))));
   return intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
     locale: "en"
   }, content);

package/dist/cjs/navigation.js

@@ -13,6 +13,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
 var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
+var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
+var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/core/arrow-right"));
 var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _classNames = require("@atlaskit/media-ui/classNames");
@@ -21,6 +24,7 @@ var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _primitives = require("@atlaskit/primitives");
 var _createNavigatedEvent = require("./analytics/events/ui/createNavigatedEvent");
 var _fireAnalytics = require("./analytics/fireAnalytics");
+var _insetViewerContext = require("./insetViewerContext");
 var _styleWrappers = require("./styleWrappers");
 var _getSelectedIndex = require("./utils/getSelectedIndex");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -101,6 +105,29 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
         selectedItem = _this$props2.selectedItem;
       return (0, _getSelectedIndex.getSelectedIndex)(items, selectedItem);
     }
+  }, {
+    key: "renderArrowButton",
+    value: function renderArrowButton(direction, label, clickHandler, testId) {
+      if (this.props.isInsetViewer) {
+        var _Icon = direction === 'next' ? _arrowRight.default : _arrowLeft.default;
+        return /*#__PURE__*/_react.default.createElement(_button.default, {
+          appearance: "default",
+          shape: "circle",
+          spacing: "default",
+          label: label,
+          icon: _Icon,
+          onClick: clickHandler('mouse'),
+          testId: testId,
+          isTooltipDisabled: false
+        });
+      }
+      var Icon = direction === 'next' ? NextIcon : PreviousIcon;
+      return /*#__PURE__*/_react.default.createElement(Icon, {
+        label: label,
+        clickHandler: clickHandler,
+        testId: testId
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -131,11 +158,7 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
         code: 'ArrowLeft',
         handler: prev('keyboard'),
         eventType: 'keyup'
-      }), /*#__PURE__*/_react.default.createElement(PreviousIcon, {
-        label: (0, _fg.fg)('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous',
-        clickHandler: prev,
-        testId: prevNavButtonId
-      })) : null), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightWrapper, null, isRightVisible ?
+      }), this.renderArrowButton('prev', (0, _fg.fg)('platform_media_a11y_nav_button_labels') ? 'Previous attachment' : 'Previous', prev, prevNavButtonId)) : null), /*#__PURE__*/_react.default.createElement(_styleWrappers.RightWrapper, null, isRightVisible ?
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       _react.default.createElement(_styleWrappers.Arrow, {
@@ -144,12 +167,8 @@ var NavigationBase = exports.NavigationBase = /*#__PURE__*/function (_Component)
         code: 'ArrowRight',
         handler: next('keyboard'),
         eventType: 'keyup'
-      }), /*#__PURE__*/_react.default.createElement(NextIcon, {
-        label: (0, _fg.fg)('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next',
-        clickHandler: next,
-        testId: nextNavButtonId
-      })) : null));
+      }), this.renderArrowButton('next', (0, _fg.fg)('platform_media_a11y_nav_button_labels') ? 'Next attachment' : 'Next', next, nextNavButtonId)) : null));
     }
   }]);
 }(_react.Component);
-var Navigation = exports.Navigation = (0, _withAnalyticsEvents.default)({})(NavigationBase);
+var Navigation = exports.Navigation = (0, _withAnalyticsEvents.default)({})((0, _insetViewerContext.withInsetViewer)(NavigationBase));

package/dist/cjs/styleWrappers.compiled.css

@@ -1,11 +1,18 @@
 ._11q75a80{background:linear-gradient(180deg,#101214,rgba(14,22,36,0)) no-repeat}
 ._151kfhey._151kfhey h1{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._189eidpf{border-width:0}
+._1ii7cs5v{grid-row:2}
+._yyhykb7n{grid-column:1}._11pt15ty svg{filter:drop-shadow(0 1px 1px rgb(9 30 66/25%)) drop-shadow(0 0 1px rgb(9 30 66/31%))}
+._152tidpf{inset-block-start:0}
 ._154i1ejb{top:var(--ds-space-300,24px)}
 ._154i1ssb{top:50%}
 ._154iidpf{top:0}
+._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
+._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
 ._18ew1wq8._18ew1wq8 h1{font-weight:var(--ds-font-weight-medium,500)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
@@ -13,9 +20,11 @@
 ._19bv1mjv{padding-left:300px}
 ._19bvidpf{padding-left:0}
 ._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19kzstnw >*{position:absolute}
 ._19pk1ejb{margin-top:var(--ds-space-300,24px)}
 ._1bah1h6o{justify-content:center}
+._1bah1y6m{justify-content:flex-start}
 ._1bahusic{justify-content:right}
 ._1bsb1ber{width:26pc}
 ._1bsb1kdj{width:25pc}
@@ -24,6 +33,8 @@
 ._1bsbauwl{width:100vw}
 ._1bsbyazj{width:calc(100% - 26pc)}
 ._1bto1l2s{text-overflow:ellipsis}
+._1e02idpf{inset-inline-start:0}
+._1e0c11p5{display:grid}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
 ._1ghp1kxc video{max-height:100vh}
@@ -31,17 +42,22 @@
 ._1jyy1poe._1jyy1poe h1{color:#c7d1db}
 ._1kemd8h4{image-rendering:pixelated}
 ._1l1f1n9t .mvng-hide-controls{position:fixed}
+._1ltv1ejb{left:var(--ds-space-300,24px)}
 ._1ltv1mjv{left:300px}
 ._1ltvidpf{left:0}
+._1o9zidpf{flex-shrink:0}
 ._1o9zkb7n{flex-shrink:1}
 ._1p351l2s._1p351l2s h1{text-overflow:ellipsis}
 ._1p6zkb7n video{flex-grow:1}
 ._1p8j15vq._1p8j15vq h1{overflow-y:hidden}
 ._1pby1qpw{z-index:520}
 ._1pby3tda{z-index:521}
+._1pbykb7n{z-index:1}
 ._1pbyuou7{z-index:522}
 ._1reo15vq{overflow-x:hidden}
 ._1reo1wug{overflow-x:auto}
+._1tkeidpf{min-height:0}
+._1ul9idpf{min-width:0}
 ._1ul9uuw1{min-width:200px}
 ._1vgl1rj4 >*{pointer-events:all}
 ._1vnlkb7n video{flex-shrink:1}
@@ -52,6 +68,8 @@
 ._20ka1poe._20ka1poe button:active svg{color:#c7d1db}
 ._2hwx1jfw{margin-right:var(--ds-space-500,40px)}
 ._2lx21bp4{flex-direction:column}
+._2z055wi5{grid-template-rows:var(--_1dd8ooc)}
+._4cvr1fhb{align-items:stretch}
 ._4cvr1h6o{align-items:center}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1kdj{height:25pc}
@@ -60,17 +78,26 @@
 ._4t3i1uc6{height:98px}
 ._4t3izwfg{height:2pc}
 ._5ralzm06{object-fit:scale-down}
+._7dir1j9a button{background-color:var(--ds-background-input,#fff)}
+._80om73ad{cursor:default}
 ._80omtlke{cursor:pointer}
 ._8at415vq._8at415vq h1{overflow-x:hidden}
 ._8g8b1q9c._8g8b1q9c h1{white-space:nowrap}
 ._94n5idpf{bottom:0}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bfhk1i5c{background-color:var(--ds-blanket,#050c1f75)}
+._bfhk1j28{background-color:transparent}
 ._bfhk1tzm{background-color:#22272b}
 ._bfhkr3uz{background-color:#000}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
+._c71l1osq{max-height:100%}
 ._ca0q1azu{padding-top:var(--ds-space-100,8px) var(--ds-space-300,24px)}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qidpf{padding-top:0}
 ._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._di7o9txx._di7o9txx button:hover svg{color:#b6c2cf}
+._i0dl1wug{flex-basis:auto}
 ._i0dlf1ug{flex-basis:0%}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqsw1n9t{position:fixed}
@@ -79,8 +106,10 @@
 ._lcxv1rj4{pointer-events:all}
 ._lcxvglyw{pointer-events:none}
 ._n3td1ejb{padding-bottom:var(--ds-space-300,24px)}
+._n3tdidpf{padding-bottom:0}
 ._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
 ._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._o5721q9c{white-space:nowrap}
 ._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._ouxl1klg{background-position:300px 0}
@@ -88,13 +117,17 @@
 ._p12f1osq{max-width:100%}
 ._qbrxf1ug video{flex-basis:0%}
 ._qvww1osq._qvww1osq h1{max-width:100%}
+._rjxpidpf{inset-inline-end:0}
 ._s7n4nkob{vertical-align:middle}
 ._syaz1poe{color:#c7d1db}
 ._syazi7uo{color:var(--ds-text,#292a2e)}
 ._t9ec1i34{transform:translateY(-50%)}
 ._tzy41w01{opacity:.85}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3idpf{padding-right:0}
 ._u5f3v47k{padding-right:var(--ds-space-250,20px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._u7coidpf{inset-block-end:0}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._umc418ws >*{transform:scale(2)}
 ._vchhusvi{box-sizing:border-box}
@@ -102,7 +135,9 @@
 ._y3gn1e5h{text-align:left}
 ._y3gn1h6o{text-align:center}
 ._y3gnusic{text-align:right}
+._yv0ehpfy{grid-template-columns:minmax(0,1fr) auto}
 ._z18o1kxc video{height:100vh}
 ._zcqx1osq p{line-height:100%}
 ._4pkp1fjg button:hover{color:#161a1d!important}
+._6pupl4ek button:hover{background-color:var(--ds-background-input-hovered,#f8f8f8)}
 ._1sfy1fjg button:active{color:#161a1d!important}