@atlaskit/media-avatar-picker 24.2.0 → 24.2.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/media-avatar-picker
 
+## 24.2.1
+
+### Patch Changes
+
+- [`564b251839c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/564b251839c) - [ux] Fixed avatar picker not showing correct orientation for images with exif data
+- Updated dependencies
+
 ## 24.2.0
 
 ### Minor Changes

package/dist/cjs/avatar-picker-dialog/avatar-picker-dialog-loader.js

@@ -29,8 +29,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -121,7 +119,7 @@ var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
-          blankedColor: "".concat((0, _tokens.token)('color.blanket', 'rgba(255, 255, 255, 0.53)')),
+          blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
           invertSpinnerColor: false
         });
       }

package/dist/cjs/image-cropper/index.js

@@ -104,7 +104,6 @@ var ImageCropper = /*#__PURE__*/function (_Component) {
           imageHeight = _this$props3.imageHeight,
           imageSource = _this$props3.imageSource,
           onRemoveImage = _this$props3.onRemoveImage,
-          imageOrientation = _this$props3.imageOrientation,
           onImageLoaded = _this$props3.onImageLoaded,
           formatMessage = _this$props3.intl.formatMessage;
       var containerStyle = {
@@ -141,7 +140,7 @@ var ImageCropper = /*#__PURE__*/function (_Component) {
         dataURI: imageSource,
         crop: false,
         stretch: true,
-        previewOrientation: imageOrientation,
+        previewOrientation: "from-image",
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
       })), isCircularMask ? (0, _react.jsx)("div", {

package/dist/cjs/image-cropper/styles.js

@@ -9,8 +9,6 @@ exports.removeImageContainerStyles = exports.removeImageButtonStyles = exports.r
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -25,7 +23,7 @@ var imageContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2
 exports.imageContainerStyles = imageContainerStyles;
 var CONTAINER_PADDING = 28;
 exports.CONTAINER_PADDING = CONTAINER_PADDING;
-var maskStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), (0, _tokens.token)('opacity.disabled', '0.5'));
+var maskStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.5)");
 var rectMaskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, (0, _constants.borderRadius)());
 exports.rectMaskStyles = rectMaskStyles;
 var circularMaskStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
@@ -34,5 +32,5 @@ var dragOverlayStyles = (0, _react.css)(_templateObject6 || (_templateObject6 =
 exports.dragOverlayStyles = dragOverlayStyles;
 var removeImageContainerStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
 exports.removeImageContainerStyles = removeImageContainerStyles;
-var removeImageButtonStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('color.background.neutral.hovered', _colors.N50A));
+var removeImageButtonStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), "var(--ds-background-neutral-hovered, ".concat(_colors.N50A, ")"));
 exports.removeImageButtonStyles = removeImageButtonStyles;

package/dist/cjs/image-navigator/index.js

@@ -144,7 +144,7 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
       var width = image.naturalWidth,
           height = image.naturalHeight;
 
-      if ((0, _mediaUi.isRotated)(_this.state.imageOrientation)) {
+      if (!CSS.supports('image-orientation', 'from-image') && (0, _mediaUi.isRotated)(_this.state.imageOrientation)) {
         var _ref = [height, width];
         width = _ref[0];
         height = _ref[1];
@@ -396,7 +396,8 @@ var ImageNavigator = /*#__PURE__*/function (_Component) {
         css: _styles.paddedBreakStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_customThemeButton.default, {
         onClick: this.onUploadButtonClick,
-        isDisabled: isLoading
+        isDisabled: isLoading,
+        testId: "upload-button"
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
         css: _styles.fileInputStyles,
         type: "file",

package/dist/cjs/image-navigator/styles.js

@@ -9,8 +9,6 @@ exports.sliderWrapperStyles = exports.sliderContainerStyles = exports.selectionB
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -28,20 +26,20 @@ var imageBgStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0,
 exports.imageBgStyles = imageBgStyles;
 var containerStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])), (0, _constants.gridSize)() * 32);
 exports.containerStyles = containerStyles;
-var sliderContainerStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface.overlay', '#fff'));
+var sliderContainerStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), (0, _constants.gridSize)(), "var(--ds-surface-overlay, #fff)");
 exports.sliderContainerStyles = sliderContainerStyles;
 var fileInputStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
 exports.fileInputStyles = fileInputStyles;
 var imageUploaderStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 10px 20px 10px;\n"])));
 exports.imageUploaderStyles = imageUploaderStyles;
-var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), (0, _tokens.token)('color.border.information', '#0e56c4'), spin);
+var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), "var(--ds-border-information, #0e56c4)", spin);
 
 var getBorder = function getBorder(showBorder) {
-  return "".concat(showBorder ? "2px dashed ".concat((0, _tokens.token)('color.border', '#d0d6d0')) : 'none');
+  return "".concat(showBorder ? "2px dashed ".concat("var(--ds-border, #d0d6d0)") : 'none');
 };
 
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
-  return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), (0, _tokens.token)('color.background.information.hovered', '#ddecfe'), droppingAnimation) : '';
+  return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), "var(--ds-background-information-hovered, #ddecfe)", droppingAnimation) : '';
 };
 
 var dragZoneStyles = function dragZoneStyles(props) {
@@ -58,7 +56,7 @@ var getWidth = function getWidth(isFullSize) {
 };
 
 var dragZoneTextStyles = function dragZoneTextStyles(props) {
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), getWidth(props.isFullSize));
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), getWidth(props.isFullSize));
 };
 
 exports.dragZoneTextStyles = dragZoneTextStyles;

package/dist/cjs/image-placer/imageProcessor.js

@@ -101,7 +101,11 @@ function _initialiseImagePreview() {
 
           case 4:
             result = _context.sent;
-            orientation = result[0];
+
+            if (!CSS.supports('image-orientation', 'from-image')) {
+              orientation = result[0];
+            }
+
             img = result[1];
             _context.next = 12;
             break;

package/dist/cjs/image-placer/styles.js

@@ -9,8 +9,6 @@ exports.marginWrapperSquareStyles = exports.marginWrapperCircleStyles = exports.
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -25,7 +23,7 @@ var imagePlacerWrapperStyles = function imagePlacerWrapperStyles(props) {
 };
 
 exports.imagePlacerWrapperStyles = imagePlacerWrapperStyles;
-var imagePlacerErrorWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), (0, _tokens.token)('color.background.danger.bold', _colors.R500), (0, _tokens.token)('color.text.inverse', 'white'));
+var imagePlacerErrorWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), "var(--ds-background-danger-bold, ".concat(_colors.R500, ")"), "var(--ds-text-inverse, white)");
 exports.imagePlacerErrorWrapperStyles = imagePlacerErrorWrapperStyles;
 
 var containerWrapperStyles = function containerWrapperStyles(_ref) {
@@ -54,7 +52,7 @@ var marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref3) {
   var width = _ref3.width,
       height = _ref3.height,
       size = _ref3.size;
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: ", ";\n"])), (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), size, width, height, (0, _tokens.token)('opacity.disabled', '0.3'));
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: ", ";\n"])), "var(--ds-surface-overlay, rgba(255, 255, 255))", size, width, height, "var(--ds-opacity-disabled, 0.3)");
 };
 
 exports.marginWrapperSquareStyles = marginWrapperSquareStyles;
@@ -63,7 +61,7 @@ var marginWrapperCircleStyles = function marginWrapperCircleStyles(_ref4) {
   var width = _ref4.width,
       height = _ref4.height,
       size = _ref4.size;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  overflow: hidden;\n  left: 0px;\n  top: 0px;\n  width: ", "px;\n  height: ", "px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    border-radius: 100%;\n    width: ", "px;\n    height: ", "px;\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    opacity: ", ";\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height), (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), (0, _tokens.token)('opacity.disabled', '0.3'));
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  overflow: hidden;\n  left: 0px;\n  top: 0px;\n  width: ", "px;\n  height: ", "px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    border-radius: 100%;\n    width: ", "px;\n    height: ", "px;\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    opacity: ", ";\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height), "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.3)");
 };
 
 exports.marginWrapperCircleStyles = marginWrapperCircleStyles;

package/dist/cjs/predefined-avatar-view/styles.js

@@ -9,8 +9,6 @@ exports.smallAvatarImageStyles = exports.predefinedAvatarViewWrapperStyles = exp
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -20,7 +18,7 @@ var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var avatarImageStyles = function avatarImageStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), (0, _constants.borderRadius)(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat((0, _tokens.token)('color.border.inverse', 'white'), ", 0px 0px 0px 3px ").concat((0, _tokens.token)('color.border.selected', _colors.B200), "; ") : '');
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), (0, _constants.borderRadius)(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"), "; ") : '');
 };
 
 var largeAvatarImageStyles = function largeAvatarImageStyles(props) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.2.0",
+	"version": "24.2.1",
 	"sideEffects": false
 }

package/dist/cjs/viewport/viewport-render.js

@@ -16,9 +16,9 @@ var renderViewport = function renderViewport(viewport, image) {
   var outputSize = arguments.length > 3 ? arguments[3] : undefined;
   var visibleSourceBounds = viewport.visibleSourceBounds,
       innerBounds = viewport.innerBounds,
-      itemSourceBounds = viewport.itemSourceBounds,
-      orientation = viewport.orientation;
+      itemSourceBounds = viewport.itemSourceBounds;
   var sourceBounds = visibleSourceBounds;
+  var orientation = CSS.supports('image-orientation', 'from-image') ? 1 : viewport.orientation;
   var width = innerBounds.width,
       height = innerBounds.height;
   var targetSizeActual = outputSize !== null && outputSize !== void 0 ? outputSize : width;

package/dist/es2019/avatar-picker-dialog/avatar-picker-dialog-loader.js

@@ -1,6 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 import { ModalSpinner } from '@atlaskit/media-ui';
 export default class AsyncAvatarPickerDialog extends React.PureComponent {
   constructor(...args) {
@@ -38,7 +37,7 @@ export default class AsyncAvatarPickerDialog extends React.PureComponent {
       }
 
       return /*#__PURE__*/React.createElement(ModalSpinner, {
-        blankedColor: `${token('color.blanket', 'rgba(255, 255, 255, 0.53)')}`,
+        blankedColor: `${"var(--ds-blanket, rgba(255, 255, 255, 0.53))"}`,
         invertSpinnerColor: false
       });
     }

package/dist/es2019/image-cropper/index.js

@@ -58,7 +58,6 @@ export class ImageCropper extends Component {
       imageHeight,
       imageSource,
       onRemoveImage,
-      imageOrientation,
       onImageLoaded,
       intl: {
         formatMessage
@@ -98,7 +97,7 @@ export class ImageCropper extends Component {
       dataURI: imageSource,
       crop: false,
       stretch: true,
-      previewOrientation: imageOrientation,
+      previewOrientation: "from-image",
       onImageLoad: onImageLoaded,
       onImageError: this.onImageError
     })), isCircularMask ? jsx("div", {

package/dist/es2019/image-cropper/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N50A } from '@atlaskit/theme/colors'; // Using module augmentation to add crossOrigin attribute as it does not exist yet, PR has been opened in
@@ -26,8 +25,8 @@ const maskStyles = css`
   left: ${CONTAINER_PADDING}px;
   right: ${CONTAINER_PADDING}px;
   box-shadow: 0 0 0 100px
-    ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
-  opacity: ${token('opacity.disabled', '0.5')};
+    ${"var(--ds-surface-overlay, rgba(255, 255, 255))"};
+  opacity: ${"var(--ds-opacity-disabled, 0.5)"};
 `;
 export const rectMaskStyles = css`
   ${maskStyles};
@@ -64,6 +63,6 @@ export const removeImageButtonStyles = css`
   }
 
   &:hover {
-    background-color: ${token('color.background.neutral.hovered', N50A)};
+    background-color: ${`var(--ds-background-neutral-hovered, ${N50A})`};
   }
 `;

package/dist/es2019/image-navigator/index.js

@@ -84,7 +84,7 @@ export class ImageNavigator extends Component {
         naturalHeight: height
       } = image;
 
-      if (isRotated(this.state.imageOrientation)) {
+      if (!CSS.supports('image-orientation', 'from-image') && isRotated(this.state.imageOrientation)) {
         [width, height] = [height, width];
       }
 
@@ -319,7 +319,8 @@ export class ImageNavigator extends Component {
       css: paddedBreakStyles
     }, jsx(FormattedMessage, errorMessage ? messages.try_again : messages.or)), jsx(Button, {
       onClick: this.onUploadButtonClick,
-      isDisabled: isLoading
+      isDisabled: isLoading,
+      testId: "upload-button"
     }, jsx(FormattedMessage, messages.upload_photo), jsx("input", {
       css: fileInputStyles,
       type: "file",

package/dist/es2019/image-navigator/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
@@ -38,7 +37,7 @@ export const sliderContainerStyles = css`
     box-sizing: content-box;
     padding: 0;
   }
-  background-color: ${token('elevation.surface.overlay', '#fff')};
+  background-color: ${"var(--ds-surface-overlay, #fff)"};
 `;
 export const fileInputStyles = css`
   display: none;
@@ -51,14 +50,14 @@ export const imageUploaderStyles = css`
   margin: 0 10px 20px 10px;
 `;
 const droppingAnimation = css`
-  border-color: ${token('color.border.information', '#0e56c4')};
+  border-color: ${"var(--ds-border-information, #0e56c4)"};
   animation: ${spin} 8s linear infinite;
 `;
 
-const getBorder = showBorder => `${showBorder ? `2px dashed ${token('color.border', '#d0d6d0')}` : 'none'}`;
+const getBorder = showBorder => `${showBorder ? `2px dashed ${"var(--ds-border, #d0d6d0)"}` : 'none'}`;
 
 const getDroppingAnimation = isDroppingFile => isDroppingFile ? css`
-        background-color: ${token('color.background.information.hovered', '#ddecfe')};
+        background-color: ${"var(--ds-background-information-hovered, #ddecfe)"};
 
         &:after {
           ${droppingAnimation}
@@ -100,7 +99,7 @@ const getWidth = isFullSize => `${isFullSize ? `width:${AVATAR_DIALOG_WIDTH - gr
 
 export const dragZoneTextStyles = props => css`
   text-align: center;
-  color: ${token('color.text.subtlest', N200)};
+  color: ${`var(--ds-text-subtlest, ${N200})`};
   ${getWidth(props.isFullSize)};
 `;
 export const selectionBlockerStyles = css`

package/dist/es2019/image-placer/imageProcessor.js

@@ -70,7 +70,11 @@ export async function initialiseImagePreview(fileInfo, containerRect, maxZoom) {
 
   try {
     const result = await Promise.all([getOrientation(fileInfo.file), loadImage(fileInfo.src)]);
-    orientation = result[0];
+
+    if (!CSS.supports('image-orientation', 'from-image')) {
+      orientation = result[0];
+    }
+
     img = result[1];
   } catch (e) {
     return null;

package/dist/es2019/image-placer/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 export const checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
@@ -7,8 +6,8 @@ export const imagePlacerWrapperStyles = props => css`
   display: inline-block;
 `;
 export const imagePlacerErrorWrapperStyles = css`
-  background-color: ${token('color.background.danger.bold', R500)};
-  color: ${token('color.text.inverse', 'white')};
+  background-color: ${`var(--ds-background-danger-bold, ${R500})`};
+  color: ${"var(--ds-text-inverse, white)"};
   width: 100%;
   height: 100%;
   text-align: center;
@@ -56,11 +55,11 @@ export const marginWrapperSquareStyles = ({
   left: 0;
   top: 0;
   border-style: solid;
-  border-color: ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
+  border-color: ${"var(--ds-surface-overlay, rgba(255, 255, 255))"};
   border-width: ${size}px;
   width: ${width}px;
   height: ${height}px;
-  opacity: ${token('opacity.disabled', '0.3')};
+  opacity: ${"var(--ds-opacity-disabled, 0.3)"};
 `;
 export const marginWrapperCircleStyles = ({
   width,
@@ -83,7 +82,7 @@ export const marginWrapperCircleStyles = ({
     width: ${width}px;
     height: ${height}px;
     box-shadow: 0px 0px 0px ${Math.max(width, height)}px
-      ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
-    opacity: ${token('opacity.disabled', '0.3')};
+      ${"var(--ds-surface-overlay, rgba(255, 255, 255))"};
+    opacity: ${"var(--ds-opacity-disabled, 0.3)"};
   }
 `;

package/dist/es2019/predefined-avatar-view/styles.js

@@ -1,4 +1,3 @@
-import { token } from '@atlaskit/tokens';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { B200 } from '@atlaskit/theme/colors';
 import { css } from '@emotion/react';
@@ -6,7 +5,7 @@ import { css } from '@emotion/react';
 const avatarImageStyles = props => css`
   border-radius: ${borderRadius()};
   cursor: pointer;
-  ${props.isSelected ? ` box-shadow: 0px 0px 0px 1px ${token('color.border.inverse', 'white')}, 0px 0px 0px 3px ${token('color.border.selected', B200)}; ` : ''};
+  ${props.isSelected ? ` box-shadow: 0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-selected, ${B200})`}; ` : ''};
 `;
 
 export const largeAvatarImageStyles = props => css`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.2.0",
+	"version": "24.2.1",
 	"sideEffects": false
 }

package/dist/es2019/viewport/viewport-render.js

@@ -3,10 +3,10 @@ export const renderViewport = (viewport, image, canvas = document.createElement(
   const {
     visibleSourceBounds,
     innerBounds,
-    itemSourceBounds,
-    orientation
+    itemSourceBounds
   } = viewport;
   let sourceBounds = visibleSourceBounds;
+  const orientation = CSS.supports('image-orientation', 'from-image') ? 1 : viewport.orientation;
   const {
     width,
     height

package/dist/esm/avatar-picker-dialog/avatar-picker-dialog-loader.js

@@ -13,7 +13,6 @@ 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; } }
 
 import React from 'react';
-import { token } from '@atlaskit/tokens';
 import { ModalSpinner } from '@atlaskit/media-ui';
 
 var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
@@ -98,7 +97,7 @@ var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         return /*#__PURE__*/React.createElement(ModalSpinner, {
-          blankedColor: "".concat(token('color.blanket', 'rgba(255, 255, 255, 0.53)')),
+          blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
           invertSpinnerColor: false
         });
       }

package/dist/esm/image-cropper/index.js

@@ -79,7 +79,6 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
           imageHeight = _this$props3.imageHeight,
           imageSource = _this$props3.imageSource,
           onRemoveImage = _this$props3.onRemoveImage,
-          imageOrientation = _this$props3.imageOrientation,
           onImageLoaded = _this$props3.onImageLoaded,
           formatMessage = _this$props3.intl.formatMessage;
       var containerStyle = {
@@ -116,7 +115,7 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
         dataURI: imageSource,
         crop: false,
         stretch: true,
-        previewOrientation: imageOrientation,
+        previewOrientation: "from-image",
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
       })), isCircularMask ? jsx("div", {

package/dist/esm/image-cropper/styles.js

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N50A } from '@atlaskit/theme/colors'; // Using module augmentation to add crossOrigin attribute as it does not exist yet, PR has been opened in
@@ -11,9 +10,9 @@ import { N50A } from '@atlaskit/theme/colors'; // Using module augmentation to a
 export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"])), borderRadius());
 export var imageContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  /* Is needed so image is not selected, when dragged */\n  -webkit-user-select: none; /* Chrome all / Safari all */\n  -moz-user-select: none; /* Firefox all */\n  -ms-user-select: none; /* IE 10+ */\n  user-select: none; /* Likely future */\n  border-radius: ", "px;\n"])), borderRadius());
 export var CONTAINER_PADDING = 28;
-var maskStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, token('elevation.surface.overlay', 'rgba(255, 255, 255)'), token('opacity.disabled', '0.5'));
+var maskStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.5)");
 export var rectMaskStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, borderRadius());
 export var circularMaskStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
 export var dragOverlayStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"])));
 export var removeImageContainerStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
-export var removeImageButtonStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), borderRadius(), token('color.background.neutral.hovered', N50A));
+export var removeImageButtonStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), borderRadius(), "var(--ds-background-neutral-hovered, ".concat(N50A, ")"));

package/dist/esm/image-navigator/index.js

@@ -110,7 +110,7 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
       var width = image.naturalWidth,
           height = image.naturalHeight;
 
-      if (isRotated(_this.state.imageOrientation)) {
+      if (!CSS.supports('image-orientation', 'from-image') && isRotated(_this.state.imageOrientation)) {
         var _ref = [height, width];
         width = _ref[0];
         height = _ref[1];
@@ -372,7 +372,8 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
         css: paddedBreakStyles
       }, jsx(FormattedMessage, errorMessage ? messages.try_again : messages.or)), jsx(Button, {
         onClick: this.onUploadButtonClick,
-        isDisabled: isLoading
+        isDisabled: isLoading,
+        testId: "upload-button"
       }, jsx(FormattedMessage, messages.upload_photo), jsx("input", {
         css: fileInputStyles,
         type: "file",

package/dist/esm/image-navigator/styles.js

@@ -2,7 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
-import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
@@ -11,17 +10,17 @@ import { AVATAR_DIALOG_WIDTH } from '../avatar-picker-dialog/layout-const';
 var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
 export var imageBgStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 256px;\n  height: 256px;\n  background: url('", "');\n  border-radius: ", ";\n"])), checkeredBg, borderRadius());
 export var containerStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])), gridSize() * 32);
-export var sliderContainerStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), gridSize(), token('elevation.surface.overlay', '#fff'));
+export var sliderContainerStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), gridSize(), "var(--ds-surface-overlay, #fff)");
 export var fileInputStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: none;\n"])));
 export var imageUploaderStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 10px 20px 10px;\n"])));
-var droppingAnimation = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), token('color.border.information', '#0e56c4'), spin);
+var droppingAnimation = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), "var(--ds-border-information, #0e56c4)", spin);
 
 var getBorder = function getBorder(showBorder) {
-  return "".concat(showBorder ? "2px dashed ".concat(token('color.border', '#d0d6d0')) : 'none');
+  return "".concat(showBorder ? "2px dashed ".concat("var(--ds-border, #d0d6d0)") : 'none');
 };
 
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
-  return isDroppingFile ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), token('color.background.information.hovered', '#ddecfe'), droppingAnimation) : '';
+  return isDroppingFile ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), "var(--ds-background-information-hovered, #ddecfe)", droppingAnimation) : '';
 };
 
 export var dragZoneStyles = function dragZoneStyles(props) {
@@ -35,7 +34,7 @@ var getWidth = function getWidth(isFullSize) {
 };
 
 export var dragZoneTextStyles = function dragZoneTextStyles(props) {
-  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), token('color.text.subtlest', N200), getWidth(props.isFullSize));
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), getWidth(props.isFullSize));
 };
 export var selectionBlockerStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n  user-select: none;\n"])));
 export var paddedBreakStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 10px !important;\n  margin-bottom: 10px;\n"])));

package/dist/esm/image-placer/imageProcessor.js

@@ -84,7 +84,11 @@ function _initialiseImagePreview() {
 
           case 4:
             result = _context.sent;
-            orientation = result[0];
+
+            if (!CSS.supports('image-orientation', 'from-image')) {
+              orientation = result[0];
+            }
+
             img = result[1];
             _context.next = 12;
             break;

package/dist/esm/image-placer/styles.js

@@ -2,14 +2,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 export var checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
 export var imagePlacerWrapperStyles = function imagePlacerWrapperStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: inline-block;\n"])), props.backgroundColor);
 };
-export var imagePlacerErrorWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), token('color.background.danger.bold', R500), token('color.text.inverse', 'white'));
+export var imagePlacerErrorWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), "var(--ds-background-danger-bold, ".concat(R500, ")"), "var(--ds-text-inverse, white)");
 export var containerWrapperStyles = function containerWrapperStyles(_ref) {
   var width = _ref.width,
       height = _ref.height,
@@ -29,11 +28,11 @@ export var marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref3)
   var width = _ref3.width,
       height = _ref3.height,
       size = _ref3.size;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: ", ";\n"])), token('elevation.surface.overlay', 'rgba(255, 255, 255)'), size, width, height, token('opacity.disabled', '0.3'));
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: ", ";\n"])), "var(--ds-surface-overlay, rgba(255, 255, 255))", size, width, height, "var(--ds-opacity-disabled, 0.3)");
 };
 export var marginWrapperCircleStyles = function marginWrapperCircleStyles(_ref4) {
   var width = _ref4.width,
       height = _ref4.height,
       size = _ref4.size;
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  overflow: hidden;\n  left: 0px;\n  top: 0px;\n  width: ", "px;\n  height: ", "px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    border-radius: 100%;\n    width: ", "px;\n    height: ", "px;\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    opacity: ", ";\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height), token('elevation.surface.overlay', 'rgba(255, 255, 255)'), token('opacity.disabled', '0.3'));
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  overflow: hidden;\n  left: 0px;\n  top: 0px;\n  width: ", "px;\n  height: ", "px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    border-radius: 100%;\n    width: ", "px;\n    height: ", "px;\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    opacity: ", ";\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height), "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.3)");
 };

package/dist/esm/predefined-avatar-view/styles.js

@@ -2,13 +2,12 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { token } from '@atlaskit/tokens';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { B200 } from '@atlaskit/theme/colors';
 import { css } from '@emotion/react';
 
 var avatarImageStyles = function avatarImageStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), borderRadius(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat(token('color.border.inverse', 'white'), ", 0px 0px 0px 3px ").concat(token('color.border.selected', B200), "; ") : '');
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), borderRadius(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(B200, ")"), "; ") : '');
 };
 
 export var largeAvatarImageStyles = function largeAvatarImageStyles(props) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.2.0",
+	"version": "24.2.1",
 	"sideEffects": false
 }

package/dist/esm/viewport/viewport-render.js

@@ -6,9 +6,9 @@ export var renderViewport = function renderViewport(viewport, image) {
   var outputSize = arguments.length > 3 ? arguments[3] : undefined;
   var visibleSourceBounds = viewport.visibleSourceBounds,
       innerBounds = viewport.innerBounds,
-      itemSourceBounds = viewport.itemSourceBounds,
-      orientation = viewport.orientation;
+      itemSourceBounds = viewport.itemSourceBounds;
   var sourceBounds = visibleSourceBounds;
+  var orientation = CSS.supports('image-orientation', 'from-image') ? 1 : viewport.orientation;
   var width = innerBounds.width,
       height = innerBounds.height;
   var targetSizeActual = outputSize !== null && outputSize !== void 0 ? outputSize : width;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-avatar-picker",
-  "version": "24.2.0",
+  "version": "24.2.1",
   "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   "dependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-ui": "^22.3.0",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/range": "^7.0.0",
     "@atlaskit/spinner": "^15.3.0",
@@ -47,6 +47,7 @@
     "@atlaskit/media-core": "^34.0.0",
     "@atlaskit/media-test-helpers": "^30.1.0",
     "@atlaskit/page": "^12.2.0",
+    "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@types/enzyme": "^3.1.15",
     "enzyme": "^3.10.0",

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -126,3 +127,17 @@ export type OnLoadHandler = (params: LoadParameters) => void;
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "@emotion/react": "^11.7.1",
+  "react": "^16.8.0",
+  "react-intl-next": "npm:react-intl@^5.18.1"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->