@atlaskit/media-ui 25.7.0 → 25.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/media-ui
 
+## 25.8.0
+
+### Minor Changes
+
+- [#80318](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80318) [`378835ef4c22`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/378835ef4c22) - ECA11Y-201: Make video volume regulation accessible and focusable
+
 ## 25.7.0
 
 ### Minor Changes

package/dist/cjs/MediaInlineCard/Frame/styled.js

@@ -5,10 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Wrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat("var(--ds-border-selected, ".concat(_colors.B300, ")"), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;
@@ -31,6 +29,21 @@ var isSelected = function isSelected(_ref) {
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-var Wrapper = exports.Wrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 16px;\n  padding: ", " ", "\n    ", " ", ";\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", ";\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)", "var(--ds-border-radius, 3px)", "var(--ds-text, ".concat(_colors.N900, ")"), "var(--ds-background-neutral, ".concat(_colors.N30A, ")"), function (props) {
+var Wrapper = exports.Wrapper = _styled.default.span({
+  lineHeight: '16px',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)"),
+  boxDecorationBreak: 'clone',
+  display: 'inline',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: "var(--ds-text, ".concat(_colors.N900, ")"),
+  backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N30A, ")")
+}, function (props) {
   return isSelected(props);
-}, "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")"));
+}, {
+  transition: '0.1s all ease-in-out',
+  MozUserSelect: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N40A, ")")
+  }
+});

package/dist/cjs/MediaInlineCard/Icon.js

@@ -5,17 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Icon = exports.AKIconWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2;
 // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-var Icon = exports.Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
+var Icon = exports.Icon = _styled.default.img({
+  height: '14px',
+  width: '14px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-var AKIconWrapper = exports.AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
+var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 // TODO: remove this override behaviour for @atlaskit/icon-object
 var IconObjectOverrides = exports.IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 // TODO: remove this override behaviour for @atlaskit/icon
@@ -19,24 +17,59 @@ var IconOverrides = exports.IconOverrides = "\n  & > * > span {\n    height: 16p
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-var IconWrapper = exports.IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var IconWrapper = exports.IconWrapper = _styled.default.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-var EmojiWrapper = exports.EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
+var EmojiWrapper = exports.EmojiWrapper = _styled.default.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
-var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"])));
+var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all'
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-var LozengeWrapper = exports.LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
+var LozengeWrapper = exports.LozengeWrapper = _styled.default.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0")
+  }
+});
 // TODO: Replace overrides with proper AtlasKit solution.
-var LozengeBlockWrapper = exports.LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
-var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
+var LozengeBlockWrapper = exports.LozengeBlockWrapper = _styled.default.span({
+  '& > span': {
+    marginLeft: "var(--ds-space-050, 4px)",
+    padding: "var(--ds-space-025, 2px)".concat(" 0 ", "var(--ds-space-025, 2px)", " 0")
+  }
+});
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
-var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
+var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span({
+  width: '14px',
+  height: '100%',
+  display: 'inline-block',
+  opacity: 0
+});

package/dist/cjs/MediaInlineCard/LoadingView/styled.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpinnerWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
-var _templateObject;
-var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: baseline;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");
+var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)({
+  verticalAlign: 'baseline',
+  marginLeft: "var(--ds-space-025, 2px)"
+});

package/dist/cjs/MediaInlineCard/styled.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoLinkAppearance = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
+var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
+});

package/dist/cjs/customMediaPlayer/index.js

@@ -30,6 +30,7 @@ var _widthDetector = require("@atlaskit/width-detector");
 var _reactVideoRenderer = _interopRequireDefault(require("react-video-renderer"));
 var _colors = require("@atlaskit/theme/colors");
 var _timeRange = require("./timeRange");
+var _volumeRange = _interopRequireDefault(require("./volumeRange"));
 var _styled = require("./styled");
 var _analytics = require("./analytics");
 var _formatDuration = require("../formatDuration");
@@ -44,6 +45,7 @@ var _playPauseBlanket = require("./playPauseBlanket");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _icons = require("./icons");
 var _getControlsWrapperClassName = require("./getControlsWrapperClassName");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -52,7 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep media player components used in media-viewer to use static colors from the new color palette to
 // support the hybrid theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "25.7.0";
+var packageVersion = "25.8.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -225,7 +227,12 @@ var CustomMediaPlayerBase = exports.CustomMediaPlayerBase = /*#__PURE__*/functio
         iconBefore: /*#__PURE__*/_react.default.createElement(_outgoingSound.default, {
           label: "volume"
         })
-      })), showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, null, /*#__PURE__*/_react.default.createElement(_timeRange.TimeRange, {
+      })), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, null, /*#__PURE__*/_react.default.createElement(_volumeRange.default, {
+        onChange: actions.setVolume,
+        currentVolume: videoState.volume,
+        isAlwaysActive: true,
+        onChanged: _this.onVolumeChanged
+      })) : showSlider && /*#__PURE__*/_react.default.createElement(_styled.VolumeTimeRangeWrapper, null, /*#__PURE__*/_react.default.createElement(_timeRange.TimeRange, {
         onChange: actions.setVolume,
         duration: 1,
         currentTime: videoState.volume,

package/dist/cjs/customMediaPlayer/playPauseBlanket.js

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PlayPauseBlanket = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject;
-var PlayPauseBlanket = exports.PlayPauseBlanket = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
+var PlayPauseBlanket = exports.PlayPauseBlanket = _styled.default.div({
+  width: '100%',
+  height: '100%',
+  cursor: 'pointer'
+});
 PlayPauseBlanket.displayName = 'PlayPauseBlanket';

package/dist/cjs/customMediaPlayer/styled.js

@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
 var _classNames = require("../classNames");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 var VolumeWrapper = exports.VolumeWrapper = _styled.default.div({
@@ -20,7 +21,7 @@ var VolumeWrapper = exports.VolumeWrapper = _styled.default.div({
   bottom: "var(--ds-space-0, 0px)",
   left: "var(--ds-space-500, 40px)"
 }, function (props) {
-  return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
+  return props.showSlider ? "\n    &:hover,\n    &:active\n    ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? ', &:focus-within' : '', "\n    {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  ") : '';
 });
 var CurrentTime = exports.CurrentTime = _styled.default.div({
   color: '#c7d1db',
@@ -115,5 +116,5 @@ var CurrentTimeTooltip = exports.CurrentTimeTooltip = _styled.default.div(functi
 });
 var TimeRangeWrapper = exports.TimeRangeWrapper = _styled.default.div(function (_ref3) {
   var showAsActive = _ref3.showAsActive;
-  return "\n  display: flex;\n  align-items: center;\n  height: 22px;\n\n  cursor: pointer;\n  width: 100%;\n\n  &:hover ".concat(TimeLine, " {\n    height: 4px;\n    transition: all 0.1s;\n  }\n\n  &:hover ").concat(Thumb, " {\n    transition: all 0.1s;\n    transform: translate(7px, -50%) scale(1);\n  }\n\n  ").concat(TimeLine, " {\n    transition-delay: 1s;\n    ").concat(showAsActive ? 'height: 4px;' : '', "\n  }\n  ").concat(Thumb, " {\n    ").concat(showAsActive ? 'transform: translate(7px, -50%) scale(1);' : '', "\n  }\n");
+  return "\n  display: flex;\n  align-items: center;\n  height: 22px;\n\n  cursor: pointer;\n  width: 100%;\n\n  &:hover ".concat(TimeLine, " {\n    height: 4px;\n    transition: all 0.1s;\n  }\n\n  &:hover ").concat(Thumb, " {\n    transition: all 0.1s;\n    transform: translate(7px, -50%) scale(1);\n  }\n\n  ").concat(TimeLine, " {\n    transition-delay: 1s;\n    ").concat(showAsActive ? 'height: 4px;' : '', "\n  }\n  ").concat(Thumb, " {\n    ").concat(showAsActive ? 'transform: translate(7px, -50%) scale(1);' : '', "\n  }\n\n  ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y_video_controls_keyboard_support_yhcxh') ? "\n    // a11y override default theme colors from '@atlaskit/range' to have better contrast with panel color\n    input[type=\"range\"] {\n      width:100%;\n      cursor: pointer;\n      height: 14px;\n    }\n\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none; /* Override default look */\n      appearance: none;\n      background: #9FADBC;\n      width: 14px;\n      height: 14px;\n      margin-top: -5px; // smaller thumb requires adjustment for margin\n    }\n\n    input[type=\"range\"]::-webkit-slider-runnable-track {\n      --webkit-appearance: none; /* Override default look */\n      --track-bg: #596773;\n      --track-fg: #9FADBC;\n    }\n\n    input[type=\"range\"]::-moz-range-progress {\n      background-color: #9FADBC;\n    }\n\n    input[type=\"range\"]::-moz-range-track {\n      background-color: #596773;\n    }\n\n    input[type=\"range\"]::-moz-range-thumb {\n      background: #9FADBC;\n      width: 14px;\n      height: 14px;\n    }\n    " : '', "\n");
 });

package/dist/cjs/customMediaPlayer/volumeRange.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styled = require("./styled");
+var _range = _interopRequireDefault(require("@atlaskit/range"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var increaseVolumeKeys = new Set(['ArrowRight', 'ArrowUp']);
+var decreaseVolumeKeys = new Set(['ArrowLeft', 'ArrowDown']);
+var VolumeRange = function VolumeRange(props) {
+  var _props$isAlwaysActive = props.isAlwaysActive,
+    isAlwaysActive = _props$isAlwaysActive === void 0 ? false : _props$isAlwaysActive,
+    onChange = props.onChange,
+    currentVolume = props.currentVolume,
+    onChanged = props.onChanged;
+  var wrapperElement = (0, _react.useRef)(null);
+  var mouseEventsSharedData = (0, _react.useRef)({
+    dragStartClientX: 0,
+    isDragging: false
+  });
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    wrapperElementWidth = _useState2[0],
+    _setWrapperElementWidth = _useState2[1];
+  var wrapperElementWidthRef = _react.default.useRef(wrapperElementWidth);
+  var setWrapperElementWidth = function setWrapperElementWidth(width) {
+    wrapperElementWidthRef.current = width;
+  };
+  var setWrapperWidth = (0, _react.useCallback)(function () {
+    if (!wrapperElement.current) {
+      return;
+    }
+    setWrapperElementWidth(wrapperElement.current.getBoundingClientRect().width);
+  }, []);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('resize', setWrapperWidth);
+    return function () {
+      window.removeEventListener('resize', setWrapperWidth);
+    };
+  }, [setWrapperWidth]);
+  var onMouseMove = function onMouseMove(e) {
+    if (!mouseEventsSharedData.current.isDragging) {
+      return;
+    }
+    e.stopPropagation();
+    var onChange = props.onChange,
+      currentVolume = props.currentVolume;
+    var clientX = e.clientX;
+    var absolutePosition = clientX - mouseEventsSharedData.current.dragStartClientX;
+    var isOutsideToRight = absolutePosition > wrapperElementWidthRef.current;
+    var isOutsideToLeft = absolutePosition < 0;
+
+    // Next to conditions take care of situation where user moves mouse very quickly out to the side
+    // left or right. It's very easy to leave thumb not at the end/beginning of a volume line.
+    // This will guarantee that in this case thumb will move to appropriate extreme.
+    if (isOutsideToRight) {
+      absolutePosition = wrapperElementWidthRef.current;
+    }
+    if (isOutsideToLeft) {
+      absolutePosition = 0;
+    }
+    var newVolumeWithBoundaries = absolutePosition / wrapperElementWidthRef.current;
+    if (currentVolume !== newVolumeWithBoundaries) {
+      // If value hasn't changed we don't want to call "change"
+      onChange(newVolumeWithBoundaries);
+    }
+  };
+  var onMouseUp = function onMouseUp() {
+    // As soon as user finished dragging, we should clean up events.
+    document.removeEventListener('mouseup', onMouseUp);
+    document.removeEventListener('mousemove', onMouseMove);
+    if (onChanged) {
+      onChanged();
+    }
+    mouseEventsSharedData.current.isDragging = false;
+  };
+  var onThumbMouseDown = function onThumbMouseDown(e) {
+    e.preventDefault();
+
+    // We need to recalculate every time, because width can change (thanks, editor ;-)
+    setWrapperWidth();
+
+    // We are implementing drag and drop here. There is no reason to start listening for mouseUp or move
+    // before that. Also if we start listening for mouseup before that we could pick up someone else's event
+    // For example editors resizing of a inline video player.
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+    var event = e.nativeEvent;
+    var x = event.offsetX;
+    var currentVolume = x / wrapperElementWidthRef.current;
+    currentVolume = currentVolume > 0 ? currentVolume : 0;
+    mouseEventsSharedData.current = {
+      dragStartClientX: event.clientX - x,
+      isDragging: true
+    };
+    // As soon as user clicks timeline we want to move thumb over to that place.
+    onChange(currentVolume);
+  };
+  var onThumbKeyDown = function onThumbKeyDown(e) {
+    var eventKey = e.key;
+    var isShiftPressed = e.shiftKey;
+    if (increaseVolumeKeys.has(eventKey) || decreaseVolumeKeys.has(eventKey)) {
+      // preventDefault call is needed to keep the volume regulator focused(visible) in FireFox (Editor mode)
+      e.preventDefault();
+      var _newVolume = currentVolume;
+      if (increaseVolumeKeys.has(eventKey)) {
+        _newVolume += isShiftPressed ? 0.1 : 0.01;
+      } else if (decreaseVolumeKeys.has(eventKey)) {
+        _newVolume -= isShiftPressed ? 0.1 : 0.01;
+      }
+      _newVolume = _newVolume > 1 ? 1 : _newVolume;
+      _newVolume = _newVolume < 0 ? 0 : _newVolume;
+      onChange(+_newVolume.toPrecision(2));
+      if (onChanged) {
+        onChanged();
+      }
+    }
+  };
+  var onInputChange = function onInputChange(newVolume) {
+    if (newVolume) {
+      onChange(newVolume / 100);
+      if (onChanged) {
+        onChanged();
+      }
+    }
+  };
+  var currentPosition = currentVolume * 100;
+  return /*#__PURE__*/_react.default.createElement(_styled.TimeRangeWrapper, {
+    showAsActive: isAlwaysActive,
+    onMouseDown: onThumbMouseDown,
+    onKeyDown: onThumbKeyDown,
+    ref: wrapperElement
+  }, /*#__PURE__*/_react.default.createElement(_range.default, {
+    tabIndex: 0,
+    step: 1,
+    min: 0,
+    max: 100,
+    value: currentPosition,
+    onChange: onInputChange
+  }));
+};
+var _default = exports.default = VolumeRange;

package/dist/cjs/ellipsify.js

@@ -6,16 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Ellipsify = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var exenv = _interopRequireWildcard(require("exenv"));
-var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var Wrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (_ref) {
+var Wrapper = _styled.default.div(function (_ref) {
   var inline = _ref.inline;
-  return inline && 'display: inline;' || '';
+  return {
+    display: inline ? 'inline' : undefined
+  };
 });
 Wrapper.displayName = 'Ellipsify';
 var Ellipsify = exports.Ellipsify = function Ellipsify(_ref2) {

package/dist/cjs/inactivityDetector/styled.js

@@ -13,5 +13,7 @@ var handleControlsVisibility = function handleControlsVisibility(_ref) {
   var controlsAreVisible = _ref.controlsAreVisible;
   return "\n  transition: opacity .3s;\n  opacity: ".concat(controlsAreVisible ? '1' : '0', ";\n");
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 var InactivityDetectorWrapper = exports.InactivityDetectorWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex: 1;\n  overflow: visible;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n\n  .", " {\n    ", ";\n  }\n"])), _classNames.hideControlsClassName, handleControlsVisibility);
 InactivityDetectorWrapper.displayName = 'InactivityDetectorWrapper';

package/dist/cjs/media-type-icon.js

@@ -11,7 +11,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _ = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/image/24"));
@@ -26,10 +25,11 @@ var _9 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/video/16
 var _10 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/document/16"));
 var _11 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/archive/16"));
 var _12 = _interopRequireDefault(require("@atlaskit/icon-file-type/glyph/generic/16"));
-var _templateObject;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var IconWrapper = exports.IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  ", "\n"])), function (_ref) {
+var IconWrapper = exports.IconWrapper = _styled.default.span({
+  display: 'inline-flex'
+}, function (_ref) {
   var size = _ref.size;
   return size === 'large' ? "padding: 4px;" : '';
 });

package/dist/cjs/modalSpinner.js

@@ -5,16 +5,26 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.SpinnerWrapper = exports.Blanket = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _constants = require("@atlaskit/theme/constants");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2;
 var overlayZindex = _constants.layers.modal() + 10;
-var Blanket = exports.Blanket = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  z-index: ", ";\n"])), overlayZindex);
+var Blanket = exports.Blanket = _styled.default.div({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+  zIndex: overlayZindex
+});
 Blanket.displayName = 'Blanket';
-var SpinnerWrapper = exports.SpinnerWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var SpinnerWrapper = exports.SpinnerWrapper = _styled.default.div({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
 SpinnerWrapper.displayName = 'SpinnerWrapper';
 var defaultProps = {
   blankedColor: 'none',

package/dist/cjs/truncateText.js

@@ -10,6 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _templateObject, _templateObject2;
 var truncateCommonStyles = "\n  display: inline-block;\n  vertical-align: bottom;\n  white-space: nowrap;\n  overflow: hidden;\n";
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 var TruncateLeft = exports.TruncateLeft = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  max-width: calc(100% - ", "em);\n  min-width: ", ";\n  text-overflow: ellipsis;\n"])), truncateCommonStyles, function (_ref) {
   var fontSizePX = _ref.fontSizePX,
     endFixedChars = _ref.endFixedChars;
@@ -19,6 +20,8 @@ var TruncateLeft = exports.TruncateLeft = _styled.default.span(_templateObject |
     startFixedChars = _ref2.startFixedChars;
   return fontFaceScaleFactor(fontSizePX) * startFixedChars;
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression -- needs manual remediation
 var TruncateRight = exports.TruncateRight = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  max-width: calc(100% - ", ");\n  position: relative;\n"])), truncateCommonStyles, function (_ref3) {
   var fontSizePX = _ref3.fontSizePX,
     startFixedChars = _ref3.startFixedChars;

package/dist/es2019/MediaInlineCard/Frame/styled.js

@@ -32,21 +32,19 @@ const isSelected = ({
 // NB: `padding` consistent with @mentions.
 // NB: `display: inline` required for `box-decoration-break` to work.
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-export const Wrapper = styled.span`
-  line-height: 16px;
-  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}
-    ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
-  box-decoration-break: clone;
-  display: inline;
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  color: ${`var(--ds-text, ${N900})`};
-  background-color: ${`var(--ds-background-neutral, ${N30A})`};
-  ${props => isSelected(props)};
-  transition: 0.1s all ease-in-out;
-  -moz-user-select: none;
-  cursor: pointer;
-
-  &:hover {
-    background-color: ${`var(--ds-background-neutral-hovered, ${N40A})`};
+export const Wrapper = styled.span({
+  lineHeight: '16px',
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`,
+  boxDecorationBreak: 'clone',
+  display: 'inline',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: `var(--ds-text, ${N900})`,
+  backgroundColor: `var(--ds-background-neutral, ${N30A})`
+}, props => isSelected(props), {
+  transition: '0.1s all ease-in-out',
+  MozUserSelect: 'none',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: `var(--ds-background-neutral-hovered, ${N40A})`
   }
-`;
+});

package/dist/es2019/MediaInlineCard/Icon.js

@@ -4,21 +4,21 @@ import styled from '@emotion/styled';
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-export const Icon = styled.img`
-  height: 14px;
-  width: 14px;
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  border-radius: 2px;
-  user-select: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-`;
+export const Icon = styled.img({
+  height: '14px',
+  width: '14px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export const AKIconWrapper = styled.span`
-  margin-right: ${"var(--ds-space-negative-025, -2px)"};
-`;
+export const AKIconWrapper = styled.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});