@atlaskit/media-avatar-picker 28.1.10 → 28.3.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/media-avatar-picker
 
+## 28.3.0
+
+### Minor Changes
+
+- [`bd2c5b0112185`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bd2c5b0112185) -
+  Remove stale API report artifacts from published Platform packages.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 28.2.0
+
+### Minor Changes
+
+- [`d82e6f76528ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d82e6f76528ab) -
+  Add direct subpath package exports as part of the linking-platform, search, media, and
+  design-system barrel-removal (de-barrel) migration.
+
+  These packages now expose their individual modules via explicit `package.json` `exports` subpaths
+  so that consumers can import directly from the leaf module (e.g. `@atlaskit/pkg/thing`) instead of
+  the package barrel/index. This adds new public entry points without changing or removing any
+  existing exports, so it is a backwards-compatible additive change.
+
+  No runtime behaviour changes; this is an API-surface (entry-point) addition to support
+  tree-shaking and to unblock removal of the barrel index files.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 28.1.10
 
 ### Patch Changes

package/dist/cjs/avatar-list/index.js

@@ -14,8 +14,8 @@ var _runtime = require("@compiled/react/runtime");
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _messages = require("@atlaskit/media-ui/messages");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -47,7 +47,7 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   };
   var cards = avatars.map(function (avatar, idx) {
     var elementKey = "predefined-avatar-".concat(idx);
-    var fallbackAvatarLabel = (0, _platformFeatureFlags.fg)('platform_media_a11y_avatar_radio_label') ? intl.formatMessage(_mediaUi.messages.select_an_avatar_option, {
+    var fallbackAvatarLabel = (0, _fg.fg)('platform_media_a11y_avatar_radio_label') ? intl.formatMessage(_messages.messages.select_an_avatar_option, {
       number: idx + 1
     }) : undefined;
     return /*#__PURE__*/React.createElement("label", {
@@ -75,7 +75,7 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   });
   return /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
+    "aria-label": selectAvatarLabel || intl.formatMessage(_messages.messages.select_an_avatar),
     className: (0, _runtime.ax)(["_1e0c1txw"])
   }, cards);
 };

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

@@ -9,11 +9,11 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
 var _types = require("./types");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 var SRLiveTitle = exports.SRLiveTitle = function SRLiveTitle(_ref) {
   var mode = _ref.mode;
   var intl = (0, _reactIntl.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, /*#__PURE__*/_react.default.createElement("div", {
     "aria-live": "polite"
-  }, mode === _types.Mode.Cropping && intl.formatMessage(_mediaUi.messages.or_select_default_avatars), mode === _types.Mode.PredefinedAvatars && intl.formatMessage(_mediaUi.messages.select_an_avatar_from_all_defaults)));
+  }, mode === _types.Mode.Cropping && intl.formatMessage(_messages.messages.or_select_default_avatars), mode === _types.Mode.PredefinedAvatars && intl.formatMessage(_messages.messages.select_an_avatar_from_all_defaults)));
 };

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

@@ -12,8 +12,8 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
-var _flag = _interopRequireDefault(require("@atlaskit/flag"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _flag = _interopRequireDefault(require("@atlaskit/flag/flag"));
+var _messages = require("@atlaskit/media-ui/messages");
 var _reactIntl = require("react-intl");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var avatarPickerErrorStyles = null;
@@ -37,6 +37,6 @@ var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog()
     }),
     id: "avatar-picker-error",
     key: "error",
-    title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
+    title: intl.formatMessage(_messages.messages.or_select_default_avatars)
   }));
 };

package/dist/cjs/avatar-picker-dialog/custom-spinner.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CustomSpinner = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _modalSpinner = _interopRequireDefault(require("@atlaskit/media-ui/modalSpinner"));
 var CustomSpinner = exports.CustomSpinner = function CustomSpinner() {
-  return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
+  return /*#__PURE__*/_react.default.createElement(_modalSpinner.default, {
     blankedColor: "var(--ds-blanket, #050C1F75)",
     invertSpinnerColor: false
   });

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

@@ -19,13 +19,20 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-dialog"));
+var _modalBody = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-body"));
+var _modalFooter = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-footer"));
+var _modalHeader = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-header"));
+var _modalTitle = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-title"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _reactIntl = require("react-intl");
-var _form = require("@atlaskit/form");
-var _mediaUi = require("@atlaskit/media-ui");
+var _field = _interopRequireDefault(require("@atlaskit/form/field"));
+var _helperMessage = require("@atlaskit/form/helper-message");
+var _fileToDataURI = require("@atlaskit/media-ui/fileToDataURI");
+var _dataURItoFile = require("@atlaskit/media-ui/dataURItoFile");
+var _messages = require("@atlaskit/media-ui/messages");
 var _compiled = require("@atlaskit/primitives/compiled");
-var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
 var _imageNavigator = _interopRequireDefault(require("../image-navigator"));
 var _predefinedAvatarList = require("../predefined-avatar-list");
 var _predefinedAvatarView = require("../predefined-avatar-view");
@@ -40,9 +47,9 @@ function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0,
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MAX_SIZE_MB = exports.MAX_SIZE_MB = 10;
 var ERROR = exports.ERROR = {
-  URL: _mediaUi.messages.image_url_invalid_error,
-  FORMAT: _mediaUi.messages.image_format_invalid_error,
-  SIZE: _mediaUi.messages.image_size_too_large_error
+  URL: _messages.messages.image_url_invalid_error,
+  FORMAT: _messages.messages.image_format_invalid_error,
+  SIZE: _messages.messages.image_size_too_large_error
 };
 var ACCEPT = exports.ACCEPT = ['image/gif', 'image/jpeg', 'image/png'];
 var fixedCrop = exports.fixedCrop = {
@@ -92,7 +99,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
                 selectedImage: selectedImage
               });
               _context.next = 1;
-              return (0, _mediaUi.fileToDataURI)(selectedImage);
+              return (0, _fileToDataURI.fileToDataURI)(selectedImage);
             case 1:
               dataURI = _context.sent;
               _this.setState({
@@ -161,10 +168,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       if (selectedImage) {
         var exportedCroppedImageURI = _this.exportCroppedImage(outputSize);
         if (requireAltText) {
-          onImagePicked === null || onImagePicked === void 0 || onImagePicked((0, _mediaUi.dataURItoFile)(exportedCroppedImageURI), fixedCrop, altText);
+          onImagePicked === null || onImagePicked === void 0 || onImagePicked((0, _dataURItoFile.dataURItoFile)(exportedCroppedImageURI), fixedCrop, altText);
           onImagePickedDataURI === null || onImagePickedDataURI === void 0 || onImagePickedDataURI(exportedCroppedImageURI, altText);
         } else {
-          onImagePicked === null || onImagePicked === void 0 || onImagePicked((0, _mediaUi.dataURItoFile)(exportedCroppedImageURI), fixedCrop);
+          onImagePicked === null || onImagePicked === void 0 || onImagePicked((0, _dataURItoFile.dataURItoFile)(exportedCroppedImageURI), fixedCrop);
           onImagePickedDataURI === null || onImagePickedDataURI === void 0 || onImagePickedDataURI(exportedCroppedImageURI);
         }
       } else if (selectedAvatar) {
@@ -233,16 +240,16 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         primaryButtonText = _this$props2.primaryButtonText,
         onCancel = _this$props2.onCancel,
         isLoading = _this$props2.isLoading;
-      return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, {
+      return /*#__PURE__*/_react.default.createElement(_modalFooter.default, {
         testId: "avatar-picker-dialog-footer"
       }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         appearance: "default",
         onClick: onCancel
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.cancel)), /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.cancel)), /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
         appearance: "primary",
         isLoading: isLoading,
         type: "submit"
-      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.save))));
+      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.save))));
     });
     return _this;
   }
@@ -257,14 +264,14 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         onClose: this.props.onCancel
       }, this.props.avatars.length > 0 && /*#__PURE__*/_react.default.createElement(_SRLiveTitle.SRLiveTitle, {
         mode: this.state.mode
-      }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+      }), /*#__PURE__*/_react.default.createElement(_modalHeader.default, {
         testId: "modal-header",
         hasCloseButton: true
-      }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
+      }, /*#__PURE__*/_react.default.createElement(_modalTitle.default, null, this.props.title || /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
         className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
-      }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement(_modalBody.default, null, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
       }, this.renderBody())), this.footerContent()));
       return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
@@ -360,18 +367,18 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       var altText = this.state.altText;
       return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         xcss: altTextFieldStyles.root
-      }, /*#__PURE__*/_react.default.createElement(_form.Field, {
+      }, /*#__PURE__*/_react.default.createElement(_field.default, {
         name: "altText",
         isRequired: true,
-        label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.alt_text)
+        label: /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.alt_text)
       }, function (_ref2) {
         var fieldProps = _ref2.fieldProps;
-        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textField.default, (0, _extends2.default)({}, fieldProps, {
           onChange: function onChange(event) {
             return _this2.updateAltText(event.currentTarget.value);
           },
           value: altText || ''
-        })), /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.alt_text_description)));
+        })), /*#__PURE__*/_react.default.createElement(_helperMessage.HelperMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.alt_text_description)));
       }));
     }
   }, {

package/dist/cjs/avatar-picker-dialog/layout-const.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = exports.IMAGE_MOVE_UNIT = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.CONTAINER_SIZE = exports.CONTAINER_RECT = exports.CONTAINER_PADDING = exports.CONTAINER_INNER_SIZE = exports.AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_HEIGHT = void 0;
-var _mediaUi = require("@atlaskit/media-ui");
+var _rectangle = require("@atlaskit/media-ui/rectangle");
 var DEFAULT_VISIBLE_PREDEFINED_AVATARS = exports.DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 var AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_WIDTH = 375;
 var AVATAR_DIALOG_HEIGHT = exports.AVATAR_DIALOG_HEIGHT = 470;
@@ -13,5 +13,5 @@ var PREDEFINED_AVATARS_VIEW_HEIGHT = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = 29
 var CONTAINER_SIZE = exports.CONTAINER_SIZE = 8 * 32;
 var CONTAINER_INNER_SIZE = exports.CONTAINER_INNER_SIZE = 8 * 25;
 var CONTAINER_PADDING = exports.CONTAINER_PADDING = (CONTAINER_SIZE - CONTAINER_INNER_SIZE) / 2;
-var CONTAINER_RECT = exports.CONTAINER_RECT = new _mediaUi.Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
+var CONTAINER_RECT = exports.CONTAINER_RECT = new _rectangle.Rectangle(CONTAINER_SIZE, CONTAINER_SIZE);
 var IMAGE_MOVE_UNIT = exports.IMAGE_MOVE_UNIT = 5;

package/dist/cjs/image-cropper/crop-to-data-uri.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.cropToDataURI = void 0;
-var _mediaUi = require("@atlaskit/media-ui");
+var _isRotated = require("@atlaskit/media-ui/imageMetaData/isRotated");
 var _util = require("../util");
 var CONTAINER_PADDING = 28;
 var cropToDataURI = exports.cropToDataURI = function cropToDataURI(imageElement, imageRect, cropRect, scale, imageOrientation) {
@@ -322,7 +322,7 @@ var cropToDataURI = exports.cropToDataURI = function cropToDataURI(imageElement,
       context.rotate(ccw90);
       break;
   }
-  if ((0, _mediaUi.isRotated)(imageOrientation)) {
+  if ((0, _isRotated.isRotated)(imageOrientation)) {
     var _ref6 = [sourceHeight, sourceWidth];
     sourceWidth = _ref6[0];
     sourceHeight = _ref6[1];

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

@@ -19,9 +19,10 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
+var _mediaImage = require("@atlaskit/media-ui/mediaImage");
 var _isImageRemote = require("./isImageRemote");
-var _new = require("@atlaskit/button/new");
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _css = require("@atlaskit/css");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
@@ -86,22 +87,22 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
       var msg = '';
       switch (e.key) {
         case 'ArrowLeft':
-          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+          msg = formatMessage(_messages.messages.image_cropper_image_moved, {
             key: 'left'
           });
           break;
         case 'ArrowRight':
-          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+          msg = formatMessage(_messages.messages.image_cropper_image_moved, {
             key: 'right'
           });
           break;
         case 'ArrowUp':
-          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+          msg = formatMessage(_messages.messages.image_cropper_image_moved, {
             key: 'top'
           });
           break;
         case 'ArrowDown':
-          msg = formatMessage(_mediaUi.messages.image_cropper_image_moved, {
+          msg = formatMessage(_messages.messages.image_cropper_image_moved, {
             key: 'bottom'
           });
           break;
@@ -179,7 +180,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
           top: "".concat(top, "px"),
           left: "".concat(left, "px")
         }
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
+      }, /*#__PURE__*/_react.default.createElement(_mediaImage.MediaImage, {
         crossOrigin: crossOrigin,
         dataURI: imageSource,
         crop: false,
@@ -196,7 +197,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
         role: "button",
-        "aria-label": formatMessage(_mediaUi.messages.image_cropper_arrow_keys_label)
+        "aria-label": formatMessage(_messages.messages.image_cropper_arrow_keys_label)
       }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         testId: "image-cropper-mask",
         xcss: (0, _css.cx)(rectMaskStyles.root, maskPositionStyle.root)
@@ -206,7 +207,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         tabIndex: 0,
         onKeyDown: this.onKeyDown,
         role: "button",
-        "aria-label": formatMessage(_mediaUi.messages.image_cropper_arrow_keys_label)
+        "aria-label": formatMessage(_messages.messages.image_cropper_arrow_keys_label)
       }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles.root,
@@ -224,7 +225,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
       }, this.state.liveMsg), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles.root
-      }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+      }, /*#__PURE__*/_react.default.createElement(_button.default, {
         id: "remove-image-button",
         icon: function icon(iconProps) {
           return /*#__PURE__*/_react.default.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
@@ -232,7 +233,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
           }));
         },
         onClick: onRemoveImage,
-        label: formatMessage(_mediaUi.messages.remove_image),
+        label: formatMessage(_messages.messages.remove_image),
         spacing: "compact",
         appearance: "subtle"
       })));

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

@@ -22,8 +22,14 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _imageCropper = _interopRequireDefault(require("../image-cropper"));
-var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
+var _fileToDataURI = require("@atlaskit/media-ui/fileToDataURI");
+var _dataURItoFile = require("@atlaskit/media-ui/dataURItoFile");
+var _getOrientation = require("@atlaskit/media-ui/imageMetaData/getOrientation");
+var _isRotated = require("@atlaskit/media-ui/imageMetaData/isRotated");
+var _ellipsify = require("@atlaskit/media-ui/ellipsify/ellipsify");
+var _vector = require("@atlaskit/media-ui/vector2");
+var _messages = require("@atlaskit/media-ui/messages");
 var exenv = _interopRequireWildcard(require("exenv"));
 var _images = require("./images");
 var _util = require("../util");
@@ -51,8 +57,8 @@ var selectionBlockerStyles = null;
 var paddedBreakStyles = null;
 var viewport = exports.viewport = new _viewport2.Viewport(_layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_PADDING);
 var defaultState = {
-  imagePos: new _mediaUi.Vector2(_layoutConst.CONTAINER_PADDING, _layoutConst.CONTAINER_PADDING),
-  dragStartPoint: new _mediaUi.Vector2(0, 0),
+  imagePos: new _vector.Vector2(_layoutConst.CONTAINER_PADDING, _layoutConst.CONTAINER_PADDING),
+  dragStartPoint: new _vector.Vector2(0, 0),
   scale: 0,
   isDragging: false,
   fileImageSource: undefined,
@@ -73,7 +79,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       _this.state.viewport.startDrag();
       _this.setState({
         isDragging: true,
-        dragStartPoint: new _mediaUi.Vector2(x, y)
+        dragStartPoint: new _vector.Vector2(x, y)
       });
     });
     (0, _defineProperty2.default)(_this, "moveImage", function (key) {
@@ -103,7 +109,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         var _this$state = _this.state,
           dragStartPoint = _this$state.dragStartPoint,
           _viewport = _this$state.viewport;
-        var currentMousePoint = new _mediaUi.Vector2(e.screenX, e.screenY);
+        var currentMousePoint = new _vector.Vector2(e.screenX, e.screenY);
         var dragDelta = currentMousePoint.sub(dragStartPoint);
         _viewport.dragMove(dragDelta.x, dragDelta.y);
         _this.setState({
@@ -140,7 +146,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       _this.imageElement = image;
       var width = image.naturalWidth,
         height = image.naturalHeight;
-      if (!CSS.supports('image-orientation', 'from-image') && (0, _mediaUi.isRotated)(_this.state.imageOrientation)) {
+      if (!CSS.supports('image-orientation', 'from-image') && (0, _isRotated.isRotated)(_this.state.imageOrientation)) {
         var _ref = [height, width];
         width = _ref[0];
         height = _ref[1];
@@ -152,7 +158,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       viewport.setItemSize(width, height).setScale(defaultZoomedOutScale).setItem(image);
       // imageFile will not exist if imageSource passed through props.
       // therefore we have to create a File, as one needs to be raised by dialog parent component when Save clicked.
-      var file = imageFile || _this.dataURI && (0, _mediaUi.dataURItoFile)(_this.dataURI);
+      var file = imageFile || _this.dataURI && (0, _dataURItoFile.dataURItoFile)(_this.dataURI);
       if (file) {
         _this.props.onImageLoaded(file);
       }
@@ -219,7 +225,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         isLoading = _this$props.isLoading;
       var showBorder = !isLoading && !!!errorMessage;
       var dropZoneImageSrc = errorMessage ? _images.errorIcon : _images.uploadPlaceholder;
-      var dragZoneText = errorMessage || formatMessage(_mediaUi.messages.drag_and_drop_images_here);
+      var dragZoneText = errorMessage || formatMessage(_messages.messages.drag_and_drop_images_here);
       return /*#__PURE__*/_react.default.createElement(_dragZone.DragZone, {
         showBorder: showBorder,
         isDroppingFile: isDroppingFile,
@@ -241,13 +247,13 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         style: {
           "--_19s8yqa": (0, _runtime.ix)("calc(".concat(AVATAR_DIALOG_WIDTH, " - ", "var(--ds-space-100, 8px)", " * 8)px"))
         }
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+      }, /*#__PURE__*/_react.default.createElement(_ellipsify.Ellipsify, {
         text: dragZoneText,
         lines: 3
       })) : /*#__PURE__*/_react.default.createElement("div", {
         id: "drag-zone-text",
         className: (0, _runtime.ax)(["_y3gn1h6o _syaz1rpy", "_1bsb1wug"])
-      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+      }, /*#__PURE__*/_react.default.createElement(_ellipsify.Ellipsify, {
         text: dragZoneText,
         lines: 3
       }))));
@@ -312,7 +318,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
             case 0:
               onImageUploaded = this.props.onImageUploaded;
               _context.next = 1;
-              return Promise.all([(0, _mediaUi.fileToDataURI)(imageFile), (0, _mediaUi.getOrientation)(imageFile)]);
+              return Promise.all([(0, _fileToDataURI.fileToDataURI)(imageFile), (0, _getOrientation.getOrientation)(imageFile)]);
             case 1:
               _yield$Promise$all = _context.sent;
               _yield$Promise$all2 = (0, _slicedToArray2.default)(_yield$Promise$all, 2);
@@ -359,11 +365,11 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       }, this.renderDragZone(), isLoading ? null : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
         id: "padded-break",
         className: (0, _runtime.ax)(["_19pk1a66 _otyru2gc _y3gn1h6o"])
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, errorMessage ? _messages.messages.try_again : _messages.messages.or)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         onClick: this.onUploadButtonClick,
         isDisabled: isLoading,
         testId: "upload-button"
-      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.upload_photo), /*#__PURE__*/_react.default.createElement("input", {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, _messages.messages.upload_photo), /*#__PURE__*/_react.default.createElement("input", {
         "data-testid": "image-navigator-input-file",
         type: "file",
         id: "image-input",

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

@@ -17,8 +17,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _range = _interopRequireDefault(require("@atlaskit/range"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _range = _interopRequireDefault(require("@atlaskit/range/range"));
+var _messages = require("@atlaskit/media-ui/messages");
 var _image = _interopRequireDefault(require("@atlaskit/icon/core/image"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _reactIntl = require("react-intl");
@@ -57,11 +57,11 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           return onChange(0);
         },
-        "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_out)
+        "aria-label": formatMessage(_messages.messages.image_cropper_zoom_out)
       }), /*#__PURE__*/React.createElement(_range.default, {
         value: value,
         onChange: onChange,
-        "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_slider)
+        "aria-label": formatMessage(_messages.messages.image_cropper_zoom_slider)
       }), /*#__PURE__*/React.createElement(_standardButton.default
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
@@ -73,7 +73,7 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           return onChange(100);
         },
-        "aria-label": formatMessage(_mediaUi.messages.image_cropper_zoom_in)
+        "aria-label": formatMessage(_messages.messages.image_cropper_zoom_in)
       }));
     }
   }]);

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

@@ -8,9 +8,10 @@ exports.applyFullConstraints = applyFullConstraints;
 exports.applyPartialConstraints = applyPartialConstraints;
 exports.transformVisibleBoundsToImageCoords = transformVisibleBoundsToImageCoords;
 exports.zoomToFit = zoomToFit;
-var _mediaUi = require("@atlaskit/media-ui");
+var _rectangle = require("@atlaskit/media-ui/rectangle");
+var _vector = require("@atlaskit/media-ui/vector2");
 function zoomToFit(imageWidth, imageHeight, visibleBounds) {
-  var itemRect = new _mediaUi.Rectangle(imageWidth, imageHeight);
+  var itemRect = new _rectangle.Rectangle(imageWidth, imageHeight);
   var scaleFactor = itemRect.scaleToFitSmallestSide(visibleBounds);
   return itemRect.scaled(scaleFactor);
 }
@@ -42,7 +43,7 @@ function applyFullConstraints(imageBounds, visibleBounds) {
   if (imageBounds.left < visibleBounds.left && imageBounds.right < visibleBounds.right) {
     deltaX += deltaRight;
   }
-  return new _mediaUi.Vector2(deltaX, deltaY);
+  return new _vector.Vector2(deltaX, deltaY);
 }
 function applyPartialConstraints(imageBounds, visibleBounds) {
   var deltaTop = visibleBounds.top - imageBounds.bottom;
@@ -63,12 +64,12 @@ function applyPartialConstraints(imageBounds, visibleBounds) {
   if (imageBounds.left > visibleBounds.right) {
     deltaX += deltaRight;
   }
-  return new _mediaUi.Vector2(deltaX, deltaY);
+  return new _vector.Vector2(deltaX, deltaY);
 }
 function transformVisibleBoundsToImageCoords(visibleBoundsX, visibleBoundsY, imageSourceRect, imageBounds, visibleBounds) {
   var offset = visibleBounds.origin.sub(imageBounds.origin);
   var rect = imageBounds.rect;
   var x = (offset.x + visibleBoundsX) / rect.width;
   var y = (offset.y + visibleBoundsY) / rect.height;
-  return new _mediaUi.Vector2(imageSourceRect.width * x, imageSourceRect.height * y).rounded();
+  return new _vector.Vector2(imageSourceRect.width * x, imageSourceRect.height * y).rounded();
 }

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

@@ -12,7 +12,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _vector = require("@atlaskit/media-ui/vector2");
 var _containerWrapper = require("./containerWrapper");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
@@ -31,13 +31,13 @@ var ImagePlacerContainer = exports.ImagePlacerContainer = /*#__PURE__*/function
       if (e.button === 2) {
         return;
       }
-      _this.dragClientStart = new _mediaUi.Vector2(e.clientX, e.clientY);
+      _this.dragClientStart = new _vector.Vector2(e.clientX, e.clientY);
       _this.props.onDragStart();
     });
     (0, _defineProperty2.default)(_this, "onTouchStart", function (e) {
       if (e.touches && e.touches.length >= 1) {
         var touch = e.touches[0];
-        _this.dragClientStart = new _mediaUi.Vector2(touch.clientX, touch.clientY);
+        _this.dragClientStart = new _vector.Vector2(touch.clientX, touch.clientY);
         _this.props.onDragStart();
       }
     });
@@ -45,7 +45,7 @@ var ImagePlacerContainer = exports.ImagePlacerContainer = /*#__PURE__*/function
       var _this2 = _this,
         dragClientStart = _this2.dragClientStart;
       if (dragClientStart) {
-        var delta = new _mediaUi.Vector2(e.clientX - dragClientStart.x, e.clientY - dragClientStart.y);
+        var delta = new _vector.Vector2(e.clientX - dragClientStart.x, e.clientY - dragClientStart.y);
         _this.props.onDragMove(delta);
       }
     });
@@ -55,7 +55,7 @@ var ImagePlacerContainer = exports.ImagePlacerContainer = /*#__PURE__*/function
       if (e.touches && e.touches.length >= 1) {
         var touch = e.touches[0];
         if (touch && dragClientStart) {
-          var delta = new _mediaUi.Vector2(touch.clientX - dragClientStart.x, touch.clientY - dragClientStart.y);
+          var delta = new _vector.Vector2(touch.clientX - dragClientStart.x, touch.clientY - dragClientStart.y);
           _this.props.onDragMove(delta);
         }
       }

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

@@ -10,7 +10,9 @@ exports.radians = radians;
 exports.renderImageAtCurrentView = renderImageAtCurrentView;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _rectangle = require("@atlaskit/media-ui/rectangle");
+var _loadImage = require("@atlaskit/media-ui/loadImage");
+var _getOrientation = require("@atlaskit/media-ui/imageMetaData/getOrientation");
 var _util = require("../util");
 function radians(deg) {
   return deg * (Math.PI / 180);
@@ -77,7 +79,7 @@ function _initialiseImagePreview() {
           orientation = 1;
           _context.prev = 1;
           _context.next = 2;
-          return Promise.all([(0, _mediaUi.getOrientation)(fileInfo.file), (0, _mediaUi.loadImage)(fileInfo.src)]);
+          return Promise.all([(0, _getOrientation.getOrientation)(fileInfo.file), (0, _loadImage.loadImage)(fileInfo.src)]);
         case 2:
           result = _context.sent;
           if (!CSS.supports('image-orientation', 'from-image')) {
@@ -96,8 +98,8 @@ function _initialiseImagePreview() {
             break;
           }
           _img = img, naturalWidth = _img.naturalWidth, naturalHeight = _img.naturalHeight;
-          srcRect = new _mediaUi.Rectangle(naturalWidth, naturalHeight);
-          maxRect = new _mediaUi.Rectangle(containerRect.width * maxZoom, containerRect.height * maxZoom);
+          srcRect = new _rectangle.Rectangle(naturalWidth, naturalHeight);
+          maxRect = new _rectangle.Rectangle(containerRect.width * maxZoom, containerRect.height * maxZoom);
           scaleFactor = srcRect.scaleToFitLargestSide(maxRect);
           scaledRect = scaleFactor < 1 ? srcRect.scaled(scaleFactor) : srcRect;
           imageWidth = scaledRect.width, imageHeight = scaledRect.height;