@atlaskit/media-avatar-picker 28.2.0 → 28.3.0

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

@@ -17,7 +17,12 @@ 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 _rectangle = require("@atlaskit/media-ui/rectangle");
+var _vector = require("@atlaskit/media-ui/vector2");
+var _bounds = require("@atlaskit/media-ui/bounds");
+var _dataURItoFile = require("@atlaskit/media-ui/dataURItoFile");
+var _getFileInfo = require("@atlaskit/media-ui/getFileInfo");
+var _getFileInfoFromSrc = require("@atlaskit/media-ui/getFileInfoFromSrc");
 var _container = require("./container");
 var _image = require("./image");
 var _margin = require("./margin");
@@ -77,7 +82,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
     var _this;
     (0, _classCallCheck2.default)(this, ImagePlacer);
     _this = _callSuper(this, ImagePlacer, [_props]);
-    (0, _defineProperty2.default)(_this, "imageSourceRect", new _mediaUi.Rectangle(0, 0));
+    (0, _defineProperty2.default)(_this, "imageSourceRect", new _rectangle.Rectangle(0, 0));
     (0, _defineProperty2.default)(_this, "state", {
       imageWidth: 0,
       imageHeight: 0,
@@ -112,12 +117,12 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
     });
     /* convert current visible view to File */
     (0, _defineProperty2.default)(_this, "toFile", function () {
-      return (0, _mediaUi.dataURItoFile)(_this.toDataURL());
+      return (0, _dataURItoFile.dataURItoFile)(_this.toDataURL());
     });
     /* image has loaded */
     (0, _defineProperty2.default)(_this, "onImageLoad", function (imageElement, width, height) {
       var onImageChange = _this.props.onImageChange;
-      _this.imageSourceRect = new _mediaUi.Rectangle(width, height);
+      _this.imageSourceRect = new _rectangle.Rectangle(width, height);
       _this.imageElement = imageElement;
       _this.setState({
         imageWidth: width,
@@ -139,7 +144,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
         originX = _this$state.originX,
         originY = _this$state.originY;
       _this.setState({
-        dragOrigin: new _mediaUi.Vector2(originX, originY)
+        dragOrigin: new _vector.Vector2(originX, originY)
       });
     });
     /* drag within container has started */
@@ -176,7 +181,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
         containerWidth = _this$props.containerWidth,
         containerHeight = _this$props.containerHeight,
         margin = _this$props.margin;
-      return new _mediaUi.Rectangle(containerWidth + margin * 2, containerHeight + margin * 2);
+      return new _rectangle.Rectangle(containerWidth + margin * 2, containerHeight + margin * 2);
     }
 
     /* the local rect of the container without margins */
@@ -186,7 +191,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
       var _this$props2 = this.props,
         containerWidth = _this$props2.containerWidth,
         containerHeight = _this$props2.containerHeight;
-      return new _mediaUi.Rectangle(containerWidth, containerHeight);
+      return new _rectangle.Rectangle(containerWidth, containerHeight);
     }
 
     /* the bounds of the scaled/panned image, relative to container */
@@ -213,7 +218,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
       var maxHeightDiff = imageHeight * maxZoom - imageHeight;
       var width = imageWidth + maxWidthDiff * zoom;
       var height = imageHeight + maxHeightDiff * zoom;
-      return new _mediaUi.Bounds(x, y, width, height);
+      return new _bounds.Bounds(x, y, width, height);
     }
 
     /* the bounds of the visible area (container - margins), relative to container */
@@ -224,7 +229,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
         containerWidth = _this$props4.containerWidth,
         containerHeight = _this$props4.containerHeight,
         margin = _this$props4.margin;
-      return new _mediaUi.Bounds(margin, margin, containerWidth, containerHeight);
+      return new _bounds.Bounds(margin, margin, containerWidth, containerHeight);
     }
 
     /* a coordinate mapping from visibleBounds to local rect of image */
@@ -240,7 +245,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
       var _this$transformVisibl2 = this.transformVisibleBoundsToImageCoords(containerWidth, containerHeight),
         cornerX = _this$transformVisibl2.x,
         cornerY = _this$transformVisibl2.y;
-      return new _mediaUi.Bounds(originX, originY, cornerX - originX, cornerY - originY);
+      return new _bounds.Bounds(originX, originY, cornerX - originX, cornerY - originY);
     }
   }, {
     key: "provideImageActions",
@@ -298,7 +303,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
                 break;
               }
               _context.next = 1;
-              return (0, _mediaUi.getFileInfo)(nextSrc);
+              return (0, _getFileInfo.getFileInfo)(nextSrc);
             case 1:
               fileInfo = _context.sent;
             case 2:
@@ -307,7 +312,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
                 break;
               }
               _context.next = 3;
-              return (0, _mediaUi.getFileInfoFromSrc)(nextSrc);
+              return (0, _getFileInfoFromSrc.getFileInfoFromSrc)(nextSrc);
             case 3:
               fileInfo = _context.sent;
             case 4:
@@ -347,7 +352,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
               previewInfo = _context2.sent;
               if (previewInfo) {
                 width = previewInfo.width, height = previewInfo.height;
-                this.imageSourceRect = new _mediaUi.Rectangle(width, height);
+                this.imageSourceRect = new _rectangle.Rectangle(width, height);
                 this.setSrc(previewInfo.fileInfo);
               } else {
                 /* TODO: i18n https://product-fabric.atlassian.net/browse/MS-1261 */
@@ -472,7 +477,7 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
       var _lastItemBounds$cente = lastItemBounds.center.sub(imageBounds.center),
         deltaX = _lastItemBounds$cente.x,
         deltaY = _lastItemBounds$cente.y;
-      var origin = new _mediaUi.Vector2(originX + deltaX, originY + deltaY);
+      var origin = new _vector.Vector2(originX + deltaX, originY + deltaY);
       this.setState({
         zoom: newZoom,
         originX: origin.x,

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

@@ -15,7 +15,7 @@ var _avatarList = require("../avatar-list");
 var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _reactIntl = require("react-intl");
-var _mediaUi = require("@atlaskit/media-ui");
+var _messages = require("@atlaskit/media-ui/messages");
 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 predefinedAvatarsWrapperStyles = null;
 var showMoreButtonStyles = null;
@@ -37,7 +37,7 @@ var PredefinedAvatarList = exports.PredefinedAvatarList = /*#__PURE__*/(0, _reac
     onItemClick: onAvatarSelected,
     selectAvatarLabel: selectAvatarLabel
   }), /*#__PURE__*/React.createElement(_standardButton.default, {
-    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(_mediaUi.messages.show_more_avatars_btn_label),
+    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(_messages.messages.show_more_avatars_btn_label),
     appearance: "subtle",
     iconAfter: /*#__PURE__*/React.createElement(_showMoreHorizontal.default, {
       label: "",

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

@@ -14,7 +14,7 @@ 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 _messages = require("@atlaskit/media-ui/messages");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 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); }
@@ -81,7 +81,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _reac
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _ca0q1b66 _n3tdu2gc"])
   }, /*#__PURE__*/React.createElement(_standardButton.default, {
-    "aria-label": intl.formatMessage(_mediaUi.messages.avatar_picker_back_btn_label),
+    "aria-label": intl.formatMessage(_messages.messages.avatar_picker_back_btn_label),
     iconAfter: /*#__PURE__*/React.createElement(_arrowLeft.default, {
       color: "currentColor",
       label: ""
@@ -91,9 +91,9 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _reac
     className: (0, _runtime.ax)(["_2rko1i7s _19pkidpf _2hwxidpf _otyridpf _18u0idpf _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsbzwfg _4t3izwfg _4cvr1h6o _1bah1h6o"])
   }), /*#__PURE__*/React.createElement("h2", {
     className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _11c8fhey _19bvu2gc"])
-  }, predefinedAvatarsText || /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _mediaUi.messages.default_avatars))), /*#__PURE__*/React.createElement("div", {
+  }, predefinedAvatarsText || /*#__PURE__*/React.createElement(_reactIntl.FormattedMessage, _messages.messages.default_avatars))), /*#__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)(["_2lx2vrvc _1n261g80 _19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _1bsb1665 _c71lgrxc _18m91wug _ca0qu2gc _u5f3idpf _n3tdidpf _19bvidpf"])
   }, cards));
 });

package/dist/cjs/viewport/viewport.js

@@ -8,7 +8,9 @@ exports.Viewport = exports.MAX_SCALE = exports.DEFAULT_WIDTH = exports.DEFAULT_M
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _mediaUi = require("@atlaskit/media-ui");
+var _rectangle = require("@atlaskit/media-ui/rectangle");
+var _bounds = require("@atlaskit/media-ui/bounds");
+var _vector = require("@atlaskit/media-ui/vector2");
 /**
  * maximum amount to allow scaling up from "100%"
  * - when the image is smaller than the view size, "100%" is the view size
@@ -43,9 +45,9 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
     var height = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_HEIGHT;
     var margin = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : DEFAULT_MARGIN;
     (0, _classCallCheck2.default)(this, Viewport);
-    (0, _defineProperty2.default)(this, "itemSourceRect", new _mediaUi.Rectangle(0, 0));
-    (0, _defineProperty2.default)(this, "dragStartPos", new _mediaUi.Vector2(0, 0));
-    (0, _defineProperty2.default)(this, "itemBounds", new _mediaUi.Bounds(0, 0, 0, 0));
+    (0, _defineProperty2.default)(this, "itemSourceRect", new _rectangle.Rectangle(0, 0));
+    (0, _defineProperty2.default)(this, "dragStartPos", new _vector.Vector2(0, 0));
+    (0, _defineProperty2.default)(this, "itemBounds", new _bounds.Bounds(0, 0, 0, 0));
     (0, _defineProperty2.default)(this, "orientation", 1);
     this.width = width;
     this.height = height;
@@ -81,7 +83,7 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
       if (itemBounds.left < innerBounds.left && itemBounds.right < innerBounds.right) {
         x += deltaRight;
       }
-      this.itemBounds = new _mediaUi.Bounds(x, y, itemBounds.width, itemBounds.height);
+      this.itemBounds = new _bounds.Bounds(x, y, itemBounds.width, itemBounds.height);
     }
   }, {
     key: "innerBounds",
@@ -89,12 +91,12 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
       var margin = this.margin,
         width = this.width,
         height = this.height;
-      return new _mediaUi.Bounds(margin, margin, width - margin * 2, height - margin * 2);
+      return new _bounds.Bounds(margin, margin, width - margin * 2, height - margin * 2);
     }
   }, {
     key: "outerBounds",
     get: function get() {
-      return new _mediaUi.Bounds(0, 0, this.width, this.height);
+      return new _bounds.Bounds(0, 0, this.width, this.height);
     }
   }, {
     key: "visibleSourceBounds",
@@ -102,13 +104,13 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
       var innerBounds = this.innerBounds;
       var origin = this.viewToLocalPoint(0, 0);
       var corner = this.viewToLocalPoint(innerBounds.width, innerBounds.height);
-      return new _mediaUi.Bounds(origin.x, origin.y, corner.x - origin.x, corner.y - origin.y);
+      return new _bounds.Bounds(origin.x, origin.y, corner.x - origin.x, corner.y - origin.y);
     }
   }, {
     key: "itemSourceBounds",
     get: function get() {
       var itemSourceRect = this.itemSourceRect;
-      return new _mediaUi.Bounds(0, 0, itemSourceRect.width, itemSourceRect.height);
+      return new _bounds.Bounds(0, 0, itemSourceRect.width, itemSourceRect.height);
     }
   }, {
     key: "fittedItemBounds",
@@ -121,7 +123,7 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
       var height = itemSourceRect.height * ratio;
       var x = margin + (innerBounds.width - width) * 0.5;
       var y = margin + (innerBounds.height - height) * 0.5;
-      return new _mediaUi.Bounds(x, y, width, height);
+      return new _bounds.Bounds(x, y, width, height);
     }
   }, {
     key: "isEmpty",
@@ -147,19 +149,19 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
         maxScale = this.maxScale;
       var maxWidth = fittedItemBounds.width * maxScale;
       var maxHeight = fittedItemBounds.height * maxScale;
-      return new _mediaUi.Rectangle(maxWidth, maxHeight);
+      return new _rectangle.Rectangle(maxWidth, maxHeight);
     }
   }, {
     key: "clear",
     value: function clear() {
-      this.itemBounds = new _mediaUi.Bounds(0, 0, 0, 0);
-      this.itemSourceRect = new _mediaUi.Rectangle(0, 0);
+      this.itemBounds = new _bounds.Bounds(0, 0, 0, 0);
+      this.itemSourceRect = new _rectangle.Rectangle(0, 0);
       delete this.item;
     }
   }, {
     key: "setItemSize",
     value: function setItemSize(width, height) {
-      this.itemSourceRect = new _mediaUi.Rectangle(width, height);
+      this.itemSourceRect = new _rectangle.Rectangle(width, height);
       this.zoomToFit();
       return this;
     }
@@ -184,12 +186,12 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
         var floatingScale = clampedScale / 100;
         var width = fittedItemBounds.width + (maxItemViewRect.width - fittedItemBounds.width) * floatingScale;
         var height = fittedItemBounds.height + (maxItemViewRect.height - fittedItemBounds.height) * floatingScale;
-        var scaledBounds = new _mediaUi.Bounds(itemBounds.x, itemBounds.y, width, height);
+        var scaledBounds = new _bounds.Bounds(itemBounds.x, itemBounds.y, width, height);
         var localCenterBefore = this.viewToLocalPoint(innerBounds.width * 0.5, innerBounds.height * 0.5);
         var center = itemBounds.center;
         var left = center.x - scaledBounds.width * 0.5;
         var top = center.y - scaledBounds.height * 0.5;
-        this.itemBounds = new _mediaUi.Bounds(left, top, scaledBounds.width, scaledBounds.height);
+        this.itemBounds = new _bounds.Bounds(left, top, scaledBounds.width, scaledBounds.height);
         var localCenterAfter = this.viewToLocalPoint(innerBounds.width * 0.5, innerBounds.height * 0.5);
         this.itemBounds = this.itemBounds.translated(localCenterAfter.x - localCenterBefore.x, localCenterAfter.y - localCenterBefore.y);
         this.applyConstraints();
@@ -214,7 +216,7 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
         itemBounds = this.itemBounds;
       var x = dragStartPos.x + xDelta;
       var y = dragStartPos.y + yDelta;
-      this.itemBounds = new _mediaUi.Bounds(x, y, itemBounds.width, itemBounds.height);
+      this.itemBounds = new _bounds.Bounds(x, y, itemBounds.width, itemBounds.height);
       this.applyConstraints();
       return this;
     }
@@ -228,7 +230,7 @@ var Viewport = exports.Viewport = /*#__PURE__*/function () {
       var rect = itemBounds.rect;
       var localX = (offset.x + viewX) / rect.width;
       var localY = (offset.y + viewY) / rect.height;
-      return new _mediaUi.Vector2(itemSourceRect.width * localX, itemSourceRect.height * localY);
+      return new _vector.Vector2(itemSourceRect.width * localX, itemSourceRect.height * localY);
     }
   }]);
 }();

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

@@ -3,7 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import { useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 const smallAvatarImageStyles = null;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { Mode } from './types';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 export const SRLiveTitle = ({
   mode
 }) => {

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useRef, useEffect } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
 import Flag from '@atlaskit/flag/flag';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import { useIntl } from 'react-intl';
 const avatarPickerErrorStyles = null;
 export const SubmitErrorDialog = () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalSpinner } from '@atlaskit/media-ui';
+import ModalSpinner from '@atlaskit/media-ui/modalSpinner';
 export const CustomSpinner = () => {
   return /*#__PURE__*/React.createElement(ModalSpinner, {
     blankedColor: `${"var(--ds-blanket, #050C1F75)"}`,

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

@@ -14,7 +14,9 @@ import Button from '@atlaskit/button/standard-button';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl';
 import Field from '@atlaskit/form/field';
 import { HelperMessage } from '@atlaskit/form/helper-message';
-import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
+import { fileToDataURI } from '@atlaskit/media-ui/fileToDataURI';
+import { dataURItoFile } from '@atlaskit/media-ui/dataURItoFile';
+import { messages } from '@atlaskit/media-ui/messages';
 import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';

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

@@ -1,4 +1,4 @@
-import { Rectangle } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export const AVATAR_DIALOG_WIDTH = 375;
 export const AVATAR_DIALOG_HEIGHT = 470;

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

@@ -1,4 +1,4 @@
-import { isRotated } from '@atlaskit/media-ui';
+import { isRotated } from '@atlaskit/media-ui/imageMetaData/isRotated';
 import { getCanvas } from '../util';
 const CONTAINER_PADDING = 28;
 export const cropToDataURI = (imageElement, imageRect, cropRect, scale, imageOrientation) => {

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

@@ -7,7 +7,8 @@ import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { injectIntl } from 'react-intl';
-import { messages, MediaImage } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
+import { MediaImage } from '@atlaskit/media-ui/mediaImage';
 import { isImageRemote } from './isImageRemote';
 import IconButton from '@atlaskit/button/icon/button';
 import { Box } from '@atlaskit/primitives/compiled';

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

@@ -8,7 +8,13 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/standard-button';
 import ImageCropper from '../image-cropper';
 import Spinner from '@atlaskit/spinner/spinner';
-import { fileToDataURI, dataURItoFile, getOrientation, isRotated, Ellipsify, Vector2, messages } from '@atlaskit/media-ui';
+import { fileToDataURI } from '@atlaskit/media-ui/fileToDataURI';
+import { dataURItoFile } from '@atlaskit/media-ui/dataURItoFile';
+import { getOrientation } from '@atlaskit/media-ui/imageMetaData/getOrientation';
+import { isRotated } from '@atlaskit/media-ui/imageMetaData/isRotated';
+import { Ellipsify } from '@atlaskit/media-ui/ellipsify/ellipsify';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
+import { messages } from '@atlaskit/media-ui/messages';
 import * as exenv from 'exenv';
 import { uploadPlaceholder, errorIcon } from './images';
 import { fileSizeMb } from '../util';

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

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Component } from 'react';
 import FieldRange from '@atlaskit/range/range';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import ScaleLargeIcon from '@atlaskit/icon/core/image';
 import ScaleSmallIcon from '@atlaskit/icon/core/image';
 import Button from '@atlaskit/button/standard-button';

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

@@ -1,4 +1,5 @@
-import { Rectangle, Vector2 } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
 export function zoomToFit(imageWidth, imageHeight, visibleBounds) {
   const itemRect = new Rectangle(imageWidth, imageHeight);
   const scaleFactor = itemRect.scaleToFitSmallestSide(visibleBounds);

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * This way, you can still move the image without clicking directly on it.
  */
 import React from 'react';
-import { Vector2 } from '@atlaskit/media-ui';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
 import { ContainerWrapper } from './containerWrapper';
 export class ImagePlacerContainer extends React.Component {
   constructor(...args) {

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

@@ -1,4 +1,6 @@
-import { Rectangle, loadImage, getOrientation } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { loadImage } from '@atlaskit/media-ui/loadImage';
+import { getOrientation } from '@atlaskit/media-ui/imageMetaData/getOrientation';
 import { getCanvas } from '../util';
 export function radians(deg) {
   return deg * (Math.PI / 180);

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

@@ -4,7 +4,7 @@ import "./imageWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 const imageWrapperStyles = null;
 export const ImageWrapper = ({
   x,

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

@@ -3,7 +3,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Rectangle, Vector2, Bounds, dataURItoFile, getFileInfo, getFileInfoFromSrc } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
+import { Bounds } from '@atlaskit/media-ui/bounds';
+import { dataURItoFile } from '@atlaskit/media-ui/dataURItoFile';
+import { getFileInfo } from '@atlaskit/media-ui/getFileInfo';
+import { getFileInfoFromSrc } from '@atlaskit/media-ui/getFileInfoFromSrc';
 import { ImagePlacerContainer } from './container';
 import { ImagePlacerImage } from './image';
 import { Margin } from './margin';

package/dist/es2019/predefined-avatar-list/index.js

@@ -6,7 +6,7 @@ import { AvatarList } from '../avatar-list';
 import EditorMoreIcon from '@atlaskit/icon/core/show-more-horizontal';
 import Button from '@atlaskit/button/standard-button';
 import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import { forwardRef } from 'react';
 const predefinedAvatarsWrapperStyles = null;
 const showMoreButtonStyles = null;

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

@@ -3,7 +3,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage, useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import ArrowLeftIcon from '@atlaskit/icon/core/arrow-left';
 import Button from '@atlaskit/button/standard-button';
 import { forwardRef, useState } from 'react';

package/dist/es2019/viewport/viewport.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Rectangle, Bounds, Vector2 } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { Bounds } from '@atlaskit/media-ui/bounds';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
 
 /**
  * maximum amount to allow scaling up from "100%"

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

@@ -7,7 +7,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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) { _defineProperty(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; }
 import { useIntl } from 'react-intl';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import { useState } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 var smallAvatarImageStyles = null;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import VisuallyHidden from '@atlaskit/visually-hidden/visually-hidden';
 import { Mode } from './types';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 export var SRLiveTitle = function SRLiveTitle(_ref) {
   var mode = _ref.mode;
   var intl = useIntl();

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

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useRef, useEffect } from 'react';
 import ErrorIcon from '@atlaskit/icon/core/status-error';
 import Flag from '@atlaskit/flag/flag';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import { useIntl } from 'react-intl';
 var avatarPickerErrorStyles = null;
 export var SubmitErrorDialog = function SubmitErrorDialog() {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ModalSpinner } from '@atlaskit/media-ui';
+import ModalSpinner from '@atlaskit/media-ui/modalSpinner';
 export var CustomSpinner = function CustomSpinner() {
   return /*#__PURE__*/React.createElement(ModalSpinner, {
     blankedColor: "var(--ds-blanket, #050C1F75)",

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

@@ -23,7 +23,9 @@ import Button from '@atlaskit/button/standard-button';
 import { FormattedMessage, IntlProvider, injectIntl } from 'react-intl';
 import Field from '@atlaskit/form/field';
 import { HelperMessage } from '@atlaskit/form/helper-message';
-import { fileToDataURI, dataURItoFile, messages } from '@atlaskit/media-ui';
+import { fileToDataURI } from '@atlaskit/media-ui/fileToDataURI';
+import { dataURItoFile } from '@atlaskit/media-ui/dataURItoFile';
+import { messages } from '@atlaskit/media-ui/messages';
 import { Box } from '@atlaskit/primitives/compiled';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';

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

@@ -1,4 +1,4 @@
-import { Rectangle } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export var DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export var AVATAR_DIALOG_WIDTH = 375;
 export var AVATAR_DIALOG_HEIGHT = 470;

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

@@ -1,4 +1,4 @@
-import { isRotated } from '@atlaskit/media-ui';
+import { isRotated } from '@atlaskit/media-ui/imageMetaData/isRotated';
 import { getCanvas } from '../util';
 var CONTAINER_PADDING = 28;
 export var cropToDataURI = function cropToDataURI(imageElement, imageRect, cropRect, scale, imageOrientation) {

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

@@ -16,7 +16,8 @@ import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { injectIntl } from 'react-intl';
-import { messages, MediaImage } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
+import { MediaImage } from '@atlaskit/media-ui/mediaImage';
 import { isImageRemote } from './isImageRemote';
 import IconButton from '@atlaskit/button/icon/button';
 import { Box } from '@atlaskit/primitives/compiled';

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

@@ -18,7 +18,13 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '@atlaskit/button/standard-button';
 import ImageCropper from '../image-cropper';
 import Spinner from '@atlaskit/spinner/spinner';
-import { fileToDataURI, dataURItoFile, getOrientation, isRotated, Ellipsify, Vector2, messages } from '@atlaskit/media-ui';
+import { fileToDataURI } from '@atlaskit/media-ui/fileToDataURI';
+import { dataURItoFile } from '@atlaskit/media-ui/dataURItoFile';
+import { getOrientation } from '@atlaskit/media-ui/imageMetaData/getOrientation';
+import { isRotated } from '@atlaskit/media-ui/imageMetaData/isRotated';
+import { Ellipsify } from '@atlaskit/media-ui/ellipsify/ellipsify';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
+import { messages } from '@atlaskit/media-ui/messages';
 import * as exenv from 'exenv';
 import { uploadPlaceholder, errorIcon } from './images';
 import { fileSizeMb } from '../util';

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

@@ -12,7 +12,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { Component } from 'react';
 import FieldRange from '@atlaskit/range/range';
-import { messages } from '@atlaskit/media-ui';
+import { messages } from '@atlaskit/media-ui/messages';
 import ScaleLargeIcon from '@atlaskit/icon/core/image';
 import ScaleSmallIcon from '@atlaskit/icon/core/image';
 import Button from '@atlaskit/button/standard-button';

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

@@ -1,4 +1,5 @@
-import { Rectangle, Vector2 } from '@atlaskit/media-ui';
+import { Rectangle } from '@atlaskit/media-ui/rectangle';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
 export function zoomToFit(imageWidth, imageHeight, visibleBounds) {
   var itemRect = new Rectangle(imageWidth, imageHeight);
   var scaleFactor = itemRect.scaleToFitSmallestSide(visibleBounds);

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

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * This way, you can still move the image without clicking directly on it.
  */
 import React from 'react';
-import { Vector2 } from '@atlaskit/media-ui';
+import { Vector2 } from '@atlaskit/media-ui/vector2';
 import { ContainerWrapper } from './containerWrapper';
 export var ImagePlacerContainer = /*#__PURE__*/function (_React$Component) {
   function ImagePlacerContainer() {