@atlaskit/media-avatar-picker 28.3.4 → 28.3.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/media-avatar-picker
 
+## 28.3.6
+
+### Patch Changes
+
+- [`cabdc28eee7be`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cabdc28eee7be) -
+  AvatarPickerDialog now forwards its maxImageSize prop to ImageNavigator behind the
+  platform_media_avatar_picker_max_image_size feature gate; with the gate off, behaviour is
+  unchanged (prop ignored, 10 MB default).
+
+## 28.3.5
+
+### Patch Changes
+
+- [`db4ffeaeaec78`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db4ffeaeaec78) -
+  Avatar picker dialog now keeps its 470px preferred height as a minimum and grows to fit the submit
+  error flag, so the Save and Cancel buttons stay within the modal.
+
 ## 28.3.4
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -33,7 +33,9 @@ var _modalDialog = _interopRequireDefault(require("@atlaskit/modal-dialog/modal-
 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 _compiled = require("@atlaskit/primitives/compiled");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _box = require("@atlaskit/primitives/compiled/box");
+var _stack = require("@atlaskit/primitives/compiled/stack");
 var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
 var _imageNavigator = _interopRequireDefault(require("../image-navigator"));
 var _predefinedAvatarList = require("../predefined-avatar-list");
@@ -57,6 +59,11 @@ var fixedCrop = exports.fixedCrop = {
   y: 0,
   size: _layoutConst.CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+var AVATAR_DIALOG_HEIGHT = 470;
+var dialogContentStyles = {
+  root: "_1tke1784"
+};
 var formStyles = null;
 var avatarPickerViewWrapperStyles = null;
 var altTextFieldStyles = {
@@ -258,10 +265,12 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     key: "render",
     value: function render() {
       var content = /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
-        height: "".concat(_layoutConst.AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(_layoutConst.AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
+      }, /*#__PURE__*/_react.default.createElement(_stack.Stack, {
+        xcss: dialogContentStyles.root,
+        testId: "avatar-picker-dialog-content"
       }, this.props.avatars.length > 0 && /*#__PURE__*/_react.default.createElement(_SRLiveTitle.SRLiveTitle, {
         mode: this.state.mode
       }), /*#__PURE__*/_react.default.createElement(_modalHeader.default, {
@@ -270,10 +279,10 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       }, /*#__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"])
+        className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
       }, /*#__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()));
+      }, this.renderBody())), this.footerContent())));
       return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntl.IntlProvider, {
         locale: "en"
       }, content);
@@ -365,7 +374,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     value: function renderAltTextField() {
       var _this2 = this;
       var altText = this.state.altText;
-      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      return /*#__PURE__*/_react.default.createElement(_box.Box, {
         xcss: altTextFieldStyles.root
       }, /*#__PURE__*/_react.default.createElement(_field.default, {
         name: "altText",
@@ -388,7 +397,8 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         avatars = _this$props5.avatars,
         isLoading = _this$props5.isLoading,
         predefinedAvatarsText = _this$props5.predefinedAvatarsText,
-        requireAltText = _this$props5.requireAltText;
+        requireAltText = _this$props5.requireAltText,
+        maxImageSize = _this$props5.maxImageSize;
       var _this$state3 = this.state,
         mode = _this$state3.mode,
         selectedImageSource = _this$state3.selectedImageSource,
@@ -396,7 +406,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         errorMessage = _this$state3.errorMessage;
       switch (mode) {
         case _types.Mode.Cropping:
-          return /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+          return /*#__PURE__*/_react.default.createElement(_box.Box, null, /*#__PURE__*/_react.default.createElement(_box.Box, {
             xcss: croppingWrapperStyles.root
           }, /*#__PURE__*/_react.default.createElement(_imageNavigator.default, {
             imageSource: selectedImageSource,
@@ -406,10 +416,11 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
             onRemoveImage: this.onRemoveImage,
             onImageUploaded: this.onImageUploaded,
             onImageError: this.onImageError,
-            isLoading: isLoading
+            isLoading: isLoading,
+            maxImageSize: (0, _fg.fg)('platform_media_avatar_picker_max_image_size') ? maxImageSize : undefined
           }), this.renderPredefinedAvatarList()), requireAltText && this.renderAltTextField());
         case _types.Mode.PredefinedAvatars:
-          return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+          return /*#__PURE__*/_react.default.createElement(_box.Box, {
             xcss: predefinedAvatarWrapperStyles.root
           }, /*#__PURE__*/_react.default.createElement(_predefinedAvatarView.PredefinedAvatarView, {
             avatars: avatars,

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

@@ -3,11 +3,10 @@
 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;
+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 = void 0;
 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;
 var PREDEFINED_AVATARS_VIEW_WIDTH = exports.PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 var PREDEFINED_AVATARS_VIEW_HEIGHT = exports.PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 var CONTAINER_SIZE = exports.CONTAINER_SIZE = 8 * 32;

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -23,7 +23,7 @@ var _css = require("@atlaskit/css");
 var _cross = _interopRequireDefault(require("@atlaskit/icon/core/cross"));
 var _mediaImage = require("@atlaskit/media-ui/mediaImage");
 var _messages = require("@atlaskit/media-ui/messages");
-var _compiled = require("@atlaskit/primitives/compiled");
+var _box = require("@atlaskit/primitives/compiled/box");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 var _isImageRemote = require("./isImageRemote");
@@ -162,7 +162,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
       } catch (e) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      return /*#__PURE__*/_react.default.createElement(_box.Box, {
         testId: "image-cropper",
         id: "container",
         xcss: containerStyles.root,
@@ -170,7 +170,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
           width: "".concat(containerSize, "px"),
           height: "".concat(containerSize, "px")
         }
-      }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      }, /*#__PURE__*/_react.default.createElement(_box.Box, {
         id: "image-container",
         xcss: imageContainerStyles.root,
         style: {
@@ -188,7 +188,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         previewOrientation: "from-image",
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
-      })), isCircularMask ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      })), isCircularMask ? /*#__PURE__*/_react.default.createElement(_box.Box, {
         testId: "image-cropper-mask",
         xcss: (0, _css.cx)(circularMaskStyles.root, maskPositionStyle.root)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -198,7 +198,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onKeyDown: this.onKeyDown,
         role: "button",
         "aria-label": formatMessage(_messages.messages.image_cropper_arrow_keys_label)
-      }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      }) : /*#__PURE__*/_react.default.createElement(_box.Box, {
         testId: "image-cropper-mask",
         xcss: (0, _css.cx)(rectMaskStyles.root, maskPositionStyle.root)
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
@@ -208,7 +208,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onKeyDown: this.onKeyDown,
         role: "button",
         "aria-label": formatMessage(_messages.messages.image_cropper_arrow_keys_label)
-      }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      }), /*#__PURE__*/_react.default.createElement(_box.Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles.root,
         onMouseDown: this.onDragStarted
@@ -222,7 +222,7 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         style: _objectSpread(_objectSpread({}, offscreenStyles), {}, {
           position: 'absolute'
         })
-      }, this.state.liveMsg), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      }, this.state.liveMsg), /*#__PURE__*/_react.default.createElement(_box.Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles.root
       }, /*#__PURE__*/_react.default.createElement(_button.default, {

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

@@ -1,4 +1,4 @@
-/* dragZone.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* dragZone.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* slider.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* slider.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _compiled = require("@atlaskit/primitives/compiled");
+var _box = require("@atlaskit/primitives/compiled/box");
 var _excluded = ["width", "height", "margin", "children"];
 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 containerWrapperStyles = {
@@ -25,7 +25,7 @@ var ContainerWrapper = exports.ContainerWrapper = function ContainerWrapper(_ref
     margin = _ref.margin,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_compiled.Box, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_box.Box, (0, _extends2.default)({
     id: 'container-wrapper',
     xcss: containerWrapperStyles.root,
     style: {

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

@@ -1,4 +1,4 @@
-/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

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

@@ -1,4 +1,4 @@
-/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* margin.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* margin.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./SubmitErrorDialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
@@ -19,13 +19,15 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';
-import { Box } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';
 import { PredefinedAvatarList } from '../predefined-avatar-list';
 import { PredefinedAvatarView } from '../predefined-avatar-view';
 import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
-import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
+import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
 import { SRLiveTitle } from './SRLiveTitle';
 import { SubmitErrorDialog } from './SubmitErrorDialog';
 import { Mode } from './types';
@@ -41,6 +43,11 @@ export const fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+const AVATAR_DIALOG_HEIGHT = 470;
+const dialogContentStyles = {
+  root: "_1tke1784"
+};
 const formStyles = null;
 const avatarPickerViewWrapperStyles = null;
 const altTextFieldStyles = {
@@ -225,10 +232,12 @@ export class AvatarPickerDialog extends PureComponent {
   }
   render() {
     const content = /*#__PURE__*/React.createElement(ModalDialog, {
-      height: `${AVATAR_DIALOG_HEIGHT}px`,
       width: `${AVATAR_DIALOG_WIDTH}px`,
       shouldScrollInViewport: true,
       onClose: this.props.onCancel
+    }, /*#__PURE__*/React.createElement(Stack, {
+      xcss: dialogContentStyles.root,
+      testId: "avatar-picker-dialog-content"
     }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
       mode: this.state.mode
     }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -237,10 +246,10 @@ export class AvatarPickerDialog extends PureComponent {
     }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
       "aria-label": "form",
       onSubmit: this.onSave,
-      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+      className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
     }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
       className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
-    }, this.renderBody())), this.footerContent()));
+    }, this.renderBody())), this.footerContent())));
     return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
       locale: "en"
     }, content);
@@ -342,7 +351,8 @@ export class AvatarPickerDialog extends PureComponent {
       avatars,
       isLoading,
       predefinedAvatarsText,
-      requireAltText
+      requireAltText,
+      maxImageSize
     } = this.props;
     const {
       mode,
@@ -362,7 +372,8 @@ export class AvatarPickerDialog extends PureComponent {
           onRemoveImage: this.onRemoveImage,
           onImageUploaded: this.onImageUploaded,
           onImageError: this.onImageError,
-          isLoading: isLoading
+          isLoading: isLoading,
+          maxImageSize: fg('platform_media_avatar_picker_max_image_size') ? maxImageSize : undefined
         }), this.renderPredefinedAvatarList()), requireAltText && this.renderAltTextField());
       case Mode.PredefinedAvatars:
         return /*#__PURE__*/React.createElement(Box, {

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

@@ -1,7 +1,6 @@
 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;
 export const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export const CONTAINER_SIZE = 8 * 32;

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
@@ -11,7 +11,7 @@ import { cx } from '@atlaskit/css';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { MediaImage } from '@atlaskit/media-ui/mediaImage';
 import { messages } from '@atlaskit/media-ui/messages';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 import { ERROR } from '../avatar-picker-dialog';
 import { CONTAINER_INNER_SIZE } from '../avatar-picker-dialog/layout-const';
 import { isImageRemote } from './isImageRemote';

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

@@ -1,4 +1,4 @@
-/* dragZone.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* dragZone.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./dragZone.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* slider.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* slider.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./slider.compiled.css";
 import * as React from 'react';

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

@@ -1,9 +1,9 @@
-/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containerWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 const containerWrapperStyles = {
   root: "_1reo15vq _18m915vq _kqswh2mm _80om15ng _uiztglyw"
 };

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

@@ -1,4 +1,4 @@
-/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./imagePlacerErrorWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./imageWrapper.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* margin.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* margin.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./margin.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./index.compiled.css";

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

@@ -1,4 +1,4 @@
-/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./SubmitErrorDialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/avatar-picker-dialog/index.compiled.css

@@ -1,10 +1,13 @@
+._16jlkb7n{flex-grow:1}
 ._18u0idpf{margin-left:0}
 ._19pkidpf{margin-top:0}
 ._1bah1h6o{justify-content:center}
 ._1e0c1o8l{display:inline-block}
 ._1e0c1txw{display:flex}
+._1tke1784{min-height:470px}
 ._1tkeqbeb{min-height:339px}
 ._2hwxidpf{margin-right:0}
+._2lx21bp4{flex-direction:column}
 ._4cvr1y6m{align-items:flex-start}
 ._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
 ._otyridpf{margin-bottom:0}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -28,13 +28,15 @@ import ModalDialog from '@atlaskit/modal-dialog/modal-dialog';
 import ModalFooter from '@atlaskit/modal-dialog/modal-footer';
 import ModalHeader from '@atlaskit/modal-dialog/modal-header';
 import ModalTitle from '@atlaskit/modal-dialog/modal-title';
-import { Box } from '@atlaskit/primitives/compiled';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { Box } from '@atlaskit/primitives/compiled/box';
+import { Stack } from '@atlaskit/primitives/compiled/stack';
 import Textfield from '@atlaskit/textfield/text-field';
 import ImageNavigator from '../image-navigator';
 import { PredefinedAvatarList } from '../predefined-avatar-list';
 import { PredefinedAvatarView } from '../predefined-avatar-view';
 import { DEFAULT_VISIBLE_PREDEFINED_AVATARS } from './layout-const';
-import { AVATAR_DIALOG_WIDTH, AVATAR_DIALOG_HEIGHT, CONTAINER_INNER_SIZE } from './layout-const';
+import { AVATAR_DIALOG_WIDTH, CONTAINER_INNER_SIZE } from './layout-const';
 import { SRLiveTitle } from './SRLiveTitle';
 import { SubmitErrorDialog } from './SubmitErrorDialog';
 import { Mode } from './types';
@@ -50,6 +52,11 @@ export var fixedCrop = {
   y: 0,
   size: CONTAINER_INNER_SIZE
 };
+// Preferred dialog height (470px); grows beyond this so the submit error flag cannot push the footer outside the modal.
+var AVATAR_DIALOG_HEIGHT = 470;
+var dialogContentStyles = {
+  root: "_1tke1784"
+};
 var formStyles = null;
 var avatarPickerViewWrapperStyles = null;
 var altTextFieldStyles = {
@@ -251,10 +258,12 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var content = /*#__PURE__*/React.createElement(ModalDialog, {
-        height: "".concat(AVATAR_DIALOG_HEIGHT, "px"),
         width: "".concat(AVATAR_DIALOG_WIDTH, "px"),
         shouldScrollInViewport: true,
         onClose: this.props.onCancel
+      }, /*#__PURE__*/React.createElement(Stack, {
+        xcss: dialogContentStyles.root,
+        testId: "avatar-picker-dialog-content"
       }, this.props.avatars.length > 0 && /*#__PURE__*/React.createElement(SRLiveTitle, {
         mode: this.state.mode
       }), /*#__PURE__*/React.createElement(ModalHeader, {
@@ -263,10 +272,10 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/React.createElement(ModalTitle, null, this.props.title || /*#__PURE__*/React.createElement(FormattedMessage, messages.upload_an_avatar))), this.state.isSubmitted && /*#__PURE__*/React.createElement(SubmitErrorDialog, null), /*#__PURE__*/React.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
-        className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+        className: ax(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1e0c1txw _2lx21bp4 _16jlkb7n"])
       }, /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
         className: ax(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
-      }, this.renderBody())), this.footerContent()));
+      }, this.renderBody())), this.footerContent())));
       return this.props.intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
         locale: "en"
       }, content);
@@ -381,7 +390,8 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
         avatars = _this$props5.avatars,
         isLoading = _this$props5.isLoading,
         predefinedAvatarsText = _this$props5.predefinedAvatarsText,
-        requireAltText = _this$props5.requireAltText;
+        requireAltText = _this$props5.requireAltText,
+        maxImageSize = _this$props5.maxImageSize;
       var _this$state3 = this.state,
         mode = _this$state3.mode,
         selectedImageSource = _this$state3.selectedImageSource,
@@ -399,7 +409,8 @@ export var AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
             onRemoveImage: this.onRemoveImage,
             onImageUploaded: this.onImageUploaded,
             onImageError: this.onImageError,
-            isLoading: isLoading
+            isLoading: isLoading,
+            maxImageSize: fg('platform_media_avatar_picker_max_image_size') ? maxImageSize : undefined
           }), this.renderPredefinedAvatarList()), requireAltText && this.renderAltTextField());
         case Mode.PredefinedAvatars:
           return /*#__PURE__*/React.createElement(Box, {

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

@@ -1,7 +1,6 @@
 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;
 export var PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export var PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export var CONTAINER_SIZE = 8 * 32;

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -20,7 +20,7 @@ import { cx } from '@atlaskit/css';
 import CrossIcon from '@atlaskit/icon/core/cross';
 import { MediaImage } from '@atlaskit/media-ui/mediaImage';
 import { messages } from '@atlaskit/media-ui/messages';
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 import { ERROR } from '../avatar-picker-dialog';
 import { CONTAINER_INNER_SIZE } from '../avatar-picker-dialog/layout-const';
 import { isImageRemote } from './isImageRemote';

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

@@ -1,4 +1,4 @@
-/* dragZone.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* dragZone.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["showBorder", "isDroppingFile", "children"];

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";

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

@@ -1,4 +1,4 @@
-/* slider.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* slider.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";

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

@@ -1,11 +1,11 @@
-/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* containerWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["width", "height", "margin", "children"];
 import "./containerWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { Box } from '@atlaskit/primitives/compiled';
+import { Box } from '@atlaskit/primitives/compiled/box';
 var containerWrapperStyles = {
   root: "_1reo15vq _18m915vq _kqswh2mm _80om15ng _uiztglyw"
 };

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

@@ -1,4 +1,4 @@
-/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./imagePlacerErrorWrapper.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* imageWrapper.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["x", "y", "width", "height", "transform"];

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";

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

@@ -1,4 +1,4 @@
-/* margin.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* margin.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* index.tsx generated by @compiled/babel-plugin v3.0.4 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./index.compiled.css";

package/dist/types/avatar-picker-dialog/layout-const.d.ts

@@ -1,7 +1,6 @@
 import { Rectangle } from '@atlaskit/media-ui/rectangle';
 export declare const DEFAULT_VISIBLE_PREDEFINED_AVATARS = 5;
 export declare const AVATAR_DIALOG_WIDTH = 375;
-export declare const AVATAR_DIALOG_HEIGHT = 470;
 export declare const PREDEFINED_AVATARS_VIEW_WIDTH = 343;
 export declare const PREDEFINED_AVATARS_VIEW_HEIGHT = 290;
 export declare const CONTAINER_SIZE: number;

package/dist/types/avatar-picker-dialog/types.d.ts

@@ -28,7 +28,7 @@ export interface CommonAvatarPickerDialogProps {
     predefinedAvatarsText?: string;
     /** The target width/height of the resulting (square) avatar. Leave blank for default (200x200) */
     outputSize?: number;
-    /** This optional property allows the consumer to define the maximum image size that can be uploaded. */
+    /** This optional property allows the consumer to define the maximum image size, in MB, that can be uploaded. The default is 10. */
     maxImageSize?: number;
     /** This optional property allows the consumer to define a custom label for select default avatar. The default is _Select a default avatar_. */
     selectAvatarLabel?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "28.3.4",
+	"version": "28.3.6",
 	"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/"
@@ -33,20 +33,20 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/button": "^25.4.0",
+		"@atlaskit/button": "^25.8.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/flag": "^19.0.0",
-		"@atlaskit/form": "^18.0.0",
+		"@atlaskit/form": "^18.3.0",
 		"@atlaskit/icon": "^38.0.0",
-		"@atlaskit/media-ui": "^31.0.0",
-		"@atlaskit/modal-dialog": "^17.0.0",
+		"@atlaskit/media-ui": "^31.9.0",
+		"@atlaskit/modal-dialog": "^17.2.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.5.0",
+		"@atlaskit/primitives": "^22.7.0",
 		"@atlaskit/range": "^12.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/spinner": "^20.4.0",
-		"@atlaskit/textfield": "^10.2.0",
-		"@atlaskit/tokens": "^20.0.0",
+		"@atlaskit/textfield": "^10.3.0",
+		"@atlaskit/tokens": "^20.11.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
@@ -59,12 +59,13 @@
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},
 	"devDependencies": {
+		"@atlaskit/docs": "^12.3.0",
 		"@atlaskit/media-core": "^39.0.0",
 		"@atlaskit/media-test-helpers": "^43.0.0",
 		"@atlaskit/page": "^15.3.0",
 		"@atlassian/a11y-jest-testing": "^0.17.0",
 		"@atlassian/feature-flags-test-utils": "^1.3.0",
-		"@atlassian/testing-library": "^0.11.0",
+		"@atlassian/testing-library": "^0.12.0",
 		"@atlassian/workbench": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
@@ -76,6 +77,9 @@
 	"platform-feature-flags": {
 		"platform_media_a11y_avatar_radio_label": {
 			"type": "boolean"
+		},
+		"platform_media_avatar_picker_max_image_size": {
+			"type": "boolean"
 		}
 	}
 }