@atlaskit/media-ui 23.1.1 → 23.2.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/media-ui
 
+## 23.2.0
+
+### Minor Changes
+
+- [`f486dbd535c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f486dbd535c) - MEX-2481 Fix minor gap between image and border
+
 ## 23.1.1
 
 ### Patch Changes

package/dist/cjs/customMediaPlayer/index.js

@@ -51,7 +51,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* 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 = "23.1.1";
+var packageVersion = "23.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/cjs/customMediaPlayer/styled.js

@@ -14,20 +14,20 @@ var CustomVideoWrapper = _styled.default.div(_templateObject || (_templateObject
 exports.CustomVideoWrapper = CustomVideoWrapper;
 var VideoWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VideoWrapper = VideoWrapper;
 var TimebarWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
 exports.TimebarWrapper = TimebarWrapper;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var VolumeWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VolumeWrapper = VolumeWrapper;
 var TimeWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.TimeWrapper = TimeWrapper;
 var CurrentTime = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 exports.CurrentTime = CurrentTime;
@@ -39,17 +39,17 @@ var Thumb = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 exports.Thumb = Thumb;
 var BufferedTime = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.BufferedTime = BufferedTime;
 var LeftControls = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 10px;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.LeftControls = LeftControls;
 var RightControls = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 exports.RightControls = RightControls;
 var ControlsWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.ControlsWrapper = ControlsWrapper;
 var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
@@ -58,13 +58,13 @@ var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObj
 exports.VolumeToggleWrapper = VolumeToggleWrapper;
 var VolumeTimeRangeWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.VolumeTimeRangeWrapper = VolumeTimeRangeWrapper;
 var MutedIndicator = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), _colors.R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
 exports.MutedIndicator = MutedIndicator;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 var CurrentTimeTooltip = _styled.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/cjs/i18n/en.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/cjs/i18n/en_GB.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/cjs/i18n/en_ZZ.js

@@ -29,6 +29,7 @@ var _default = {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/cjs/mediaImage/index.js

@@ -270,6 +270,16 @@ var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
+      /*
+        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+      */
+
+      if (this.props.expandByPixel !== undefined) {
+        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
+      }
+
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.1",
+	"version": "23.2.0",
 	"sideEffects": false
 }

package/dist/es2019/customMediaPlayer/index.js

@@ -34,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "23.1.1";
+const packageVersion = "23.2.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/es2019/customMediaPlayer/styled.js

@@ -13,7 +13,7 @@ export const VideoWrapper = styled.div`
   flex-direction: column;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const TimebarWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -23,7 +23,7 @@ export const TimebarWrapper = styled.div`
   width: 100%;
   bottom: 10px;
 `;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const VolumeWrapper = styled.div`
   display: flex;
   width: 35px;
@@ -42,13 +42,13 @@ export const VolumeWrapper = styled.div`
   ` : ''}
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const TimeWrapper = styled.div`
   margin: 0 ${"var(--ds-space-250, 20px)"} 10px ${"var(--ds-space-250, 20px)"};
   margin-bottom: 44px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CurrentTime = styled.div`
   color: #c7d1db;
   user-select: none;
@@ -98,13 +98,13 @@ export const BufferedTime = styled.div`
   width: 0;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const LeftControls = styled.div`
   display: flex;
   margin-left: 10px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const RightControls = styled.div`
   display: flex;
   align-items: center;
@@ -120,7 +120,7 @@ export const ControlsWrapper = styled.div`
   position: absolute;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const VolumeToggleWrapper = styled.div`
   position: relative;
   margin-right: 13px;
@@ -137,7 +137,7 @@ export const VolumeTimeRangeWrapper = styled.div`
   margin-right: ${"var(--ds-space-250, 20px)"};
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const MutedIndicator = styled.div`
   width: 29px;
   height: 2px;
@@ -154,7 +154,7 @@ export const MutedIndicator = styled.div`
     opacity: 1;
   ` : ''};
 `;
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CurrentTimeTooltip = styled.div`
   position: absolute;
   user-select: none;

package/dist/es2019/i18n/en.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/es2019/i18n/en_GB.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/es2019/i18n/en_ZZ.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/es2019/mediaImage/index.js

@@ -248,6 +248,16 @@ export class MediaImage extends Component {
       }
     }
 
+    /*
+      For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+      Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+       Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+    */
+
+    if (this.props.expandByPixel !== undefined) {
+      percentSize = `calc(${percentSize} + ${this.props.expandByPixel}px)`;
+    }
+
     /*
       When isStretchingAllowed is false image is as big as it is, but as small as container
       (according to strategy - cover or fit).

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.1",
+	"version": "23.2.0",
 	"sideEffects": false
 }

package/dist/esm/customMediaPlayer/index.js

@@ -44,7 +44,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "23.1.1";
+var packageVersion = "23.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/esm/customMediaPlayer/styled.js

@@ -6,42 +6,42 @@ import { R300 } from '@atlaskit/theme/colors';
 export var CustomVideoWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  user-select: none;\n"])));
 export var VideoWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var TimebarWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var VolumeWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var TimeWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var CurrentTime = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 export var TimeLine = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #596773;\n  border-radius: 5px;\n  position: relative;\n"])));
 export var CurrentTimeLine = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #05c;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
 export var Thumb = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 100%;\n  background-color: white;\n  border: 1px solid #666;\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  transform: translate(7px, -50%) scale(0);\n  transition: all 0.1s;\n  transition-delay: 1s;\n\n  &:hover .current-time-tooltip {\n    opacity: 1;\n  }\n"])));
 export var BufferedTime = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var LeftControls = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var RightControls = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 export var ControlsWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var VolumeToggleWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
   return isMuted ? "#EF5C48 !important;" : '';
 });
 export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var MutedIndicator = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export var CurrentTimeTooltip = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/esm/i18n/en.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/esm/i18n/en_GB.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': 'Text',
   'fabric.media.archive': 'archive',
   'fabric.media.audio': 'audio',
+  'fabric.media.avatar_picker_back_btn_label': 'Go Back',
   'fabric.media.cancel': 'Cancel',
   'fabric.media.cant_preview_file_type': "We can't preview this file type.",
   'fabric.media.cant_retrieve_files': 'Ouch! We could not retrieve any files',

package/dist/esm/i18n/en_ZZ.js

@@ -23,6 +23,7 @@ export default {
   'fabric.media.annotate.tool.text': '⁣⁢Text⁡⁡⁠⁠⁡؜‌‌‍⁡⁠‌‍⁣⁤',
   'fabric.media.archive': '⁣⁢archive‌⁡‌‍‍‌؜⁡⁠⁣⁤',
   'fabric.media.audio': '⁣⁢audio‍⁡⁡؜⁡⁣⁤',
+  'fabric.media.avatar_picker_back_btn_label': '⁣⁢Go Back؜⁡‌‌⁡⁡⁠‌‌⁣⁤',
   'fabric.media.cancel': '⁣⁢Cancel‌‍؜⁠‍؜‌‌⁠⁡⁣⁤',
   'fabric.media.cant_preview_file_type': "⁣⁢We can't preview this file type.⁠‍‌⁡⁡‍؜‍⁠؜⁣⁤",
   'fabric.media.cant_retrieve_files': '⁣⁢Ouch! We could not retrieve any files⁠‍؜؜‌؜⁡‌⁡؜⁠⁣⁤',

package/dist/esm/mediaImage/index.js

@@ -261,6 +261,16 @@ export var MediaImage = /*#__PURE__*/function (_Component) {
         }
       }
 
+      /*
+        For images with borders, there may be an intermittent gap between the image and the border due to weird browser behaviour.
+        Part of the solution is to expand the image equally in all directions (width & height) by 1px, and the below calculation is to ensure just that.
+         Read more: https://product-fabric.atlassian.net/browse/MEX-2481
+      */
+
+      if (this.props.expandByPixel !== undefined) {
+        percentSize = "calc(".concat(percentSize, " + ").concat(this.props.expandByPixel, "px)");
+      }
+
       /*
         When isStretchingAllowed is false image is as big as it is, but as small as container
         (according to strategy - cover or fit).

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.1.1",
+	"version": "23.2.0",
 	"sideEffects": false
 }

package/dist/types/i18n/en.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/i18n/en_GB.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/i18n/en_ZZ.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types/mediaImage/index.d.ts

@@ -11,6 +11,7 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'auto' | 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
+    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/dist/types-ts4.5/i18n/en.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/i18n/en_GB.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/i18n/en_ZZ.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
     'fabric.media.annotate.tool.text': string;
     'fabric.media.archive': string;
     'fabric.media.audio': string;
+    'fabric.media.avatar_picker_back_btn_label': string;
     'fabric.media.cancel': string;
     'fabric.media.cant_preview_file_type': string;
     'fabric.media.cant_retrieve_files': string;

package/dist/types-ts4.5/mediaImage/index.d.ts

@@ -11,6 +11,7 @@ export interface MediaImageProps {
     onImageError?: () => void;
     loading?: 'auto' | 'lazy' | 'eager';
     forceSyncDisplay?: boolean;
+    expandByPixel?: number;
 }
 export interface MediaImageState {
     isImageLoaded: boolean;

package/example-helpers/styled.ts

@@ -16,7 +16,7 @@ export const PreviewInfo = styled.pre`
   font-size: 80%;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const PreviewItem = styled.li`
   border-radius: 10px;
   border: 1px solid ${token('color.border', '#ccc')};
@@ -27,7 +27,7 @@ export const PreviewItem = styled.li`
   margin-bottom: 10px;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const Code = styled.code`
   padding: 5px;
   border-radius: 5px;
@@ -36,7 +36,7 @@ export const Code = styled.code`
   font-size: 80%;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const CloseButton = styled.button`
   position: absolute;
   top: 5px;
@@ -44,7 +44,7 @@ export const CloseButton = styled.button`
   cursor: pointer;
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 export const PreviewImageContainer = styled.div`
   margin-top: 10px;
   margin-bottom: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "23.1.1",
+  "version": "23.2.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,32 +12,8 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
-  "af:exports": {
-    "./classNames": "./src/classNames.ts",
-    "./media-type-icon": "./src/media-type-icon.tsx",
-    "./mime-type-icon": "./src/mime-type-icon.tsx",
-    "./truncateText": "./src/truncateText.tsx",
-    "./messages": "./src/messages.ts",
-    "./modalSpinner": "./src/modalSpinner.tsx",
-    "./browser": "./src/browser.tsx",
-    "./codeViewer": "./src/codeViewer.ts",
-    "./util": "./src/util.ts",
-    "./errorIcon": "./src/errorIcon.tsx",
-    "./types": "./src/types.ts",
-    "./formatDate": "./src/formatDate.ts",
-    "./locales": "./src/locales.ts",
-    ".": "./src/index.ts"
-  },
   "atlassian": {
     "team": "Media Experience",
     "inPublicMirror": true,
@@ -53,11 +29,11 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
     "@atlaskit/locale": "^2.5.0",
-    "@atlaskit/media-common": "^7.0.0",
+    "@atlaskit/media-common": "^7.1.0",
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.9.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -75,12 +51,10 @@
     "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "devDependencies": {
+    "@af/visual-regression": "*",
     "@atlaskit/analytics-listeners": "^8.7.0",
     "@atlaskit/button": "^16.8.0",
-    "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
-    "@atlaskit/page": "^12.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -111,5 +85,29 @@
       ]
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "af:exports": {
+    "./classNames": "./src/classNames.ts",
+    "./media-type-icon": "./src/media-type-icon.tsx",
+    "./mime-type-icon": "./src/mime-type-icon.tsx",
+    "./truncateText": "./src/truncateText.tsx",
+    "./messages": "./src/messages.ts",
+    "./modalSpinner": "./src/modalSpinner.tsx",
+    "./browser": "./src/browser.tsx",
+    "./codeViewer": "./src/codeViewer.ts",
+    "./util": "./src/util.ts",
+    "./errorIcon": "./src/errorIcon.tsx",
+    "./types": "./src/types.ts",
+    "./formatDate": "./src/formatDate.ts",
+    "./locales": "./src/locales.ts",
+    ".": "./src/index.ts"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -439,6 +439,8 @@ export interface MediaImageProps {
   // (undocumented)
   dataURI: string;
   // (undocumented)
+  expandByPixel?: number;
+  // (undocumented)
   forceSyncDisplay?: boolean;
   // (undocumented)
   loading?: 'auto' | 'eager' | 'lazy';

package/tmp/api-report-tmp.d.ts

@@ -377,6 +377,8 @@ export interface MediaImageProps {
     // (undocumented)
     dataURI: string;
     // (undocumented)
+    expandByPixel?: number;
+    // (undocumented)
     forceSyncDisplay?: boolean;
     // (undocumented)
     loading?: 'auto' | 'eager' | 'lazy';