@atlaskit/media-avatar-picker 24.6.16 → 24.8.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/media-avatar-picker
 
+## 24.8.0
+
+### Minor Changes
+
+- [#140915](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/140915)
+  [`36b5acc412af5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/36b5acc412af5) -
+  Design system typography uplift
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.7.0
+
+### Minor Changes
+
+- [#136440](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136440)
+  [`57f424ae5180e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f424ae5180e) -
+  Added compatibility with React 18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.6.16
 
 ### Patch Changes

package/dist/cjs/avatar-picker-dialog/avatar-picker-dialog-error-boundary.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AvatarPickerDialogErrorBoundary;
+var _react = _interopRequireWildcard(require("react"));
+var _reactErrorBoundary = require("react-error-boundary");
+var _ = _interopRequireDefault(require("./"));
+var _customSpinner = require("./custom-spinner");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function AvatarPickerDialogErrorBoundary(props) {
+  var ErrorBoundaryFallback = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.placeholder || /*#__PURE__*/_react.default.createElement(_customSpinner.CustomSpinner, null));
+  }, [props.placeholder]);
+  return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
+    FallbackComponent: ErrorBoundaryFallback
+  }, /*#__PURE__*/_react.default.createElement(_.default, props));
+}

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

@@ -1,98 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
-var _mediaUi = require("@atlaskit/media-ui");
+exports.default = AsyncAvatarPickerDialog;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+var _customSpinner = require("./custom-spinner");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var AsyncAvatarPickerDialog = exports.default = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(AsyncAvatarPickerDialog, _React$PureComponent);
-  var _super = _createSuper(AsyncAvatarPickerDialog);
-  function AsyncAvatarPickerDialog() {
-    var _this;
-    (0, _classCallCheck2.default)(this, AsyncAvatarPickerDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      // Set state value to equal to current static value of this class.
-      AvatarPickerDialog: AsyncAvatarPickerDialog.AvatarPickerDialog
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(AsyncAvatarPickerDialog, [{
-    key: "UNSAFE_componentWillMount",
-    value: function () {
-      var _UNSAFE_componentWillMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-        var module;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (this.state.AvatarPickerDialog) {
-                _context.next = 11;
-                break;
-              }
-              _context.prev = 1;
-              _context.next = 4;
-              return Promise.resolve().then(function () {
-                return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */
-                '.'));
-              });
-            case 4:
-              module = _context.sent;
-              AsyncAvatarPickerDialog.AvatarPickerDialog = module.default;
-              this.setState({
-                AvatarPickerDialog: module.default
-              });
-              _context.next = 11;
-              break;
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](1);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this, [[1, 9]]);
-      }));
-      function UNSAFE_componentWillMount() {
-        return _UNSAFE_componentWillMount.apply(this, arguments);
-      }
-      return UNSAFE_componentWillMount;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.AvatarPickerDialog) {
-        var placeholder = this.props.placeholder;
-        if (placeholder) {
-          return placeholder;
-        }
-        return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
-          blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
-          invertSpinnerColor: false
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(this.state.AvatarPickerDialog, this.props);
-    }
-  }]);
-  return AsyncAvatarPickerDialog;
-}(_react.default.PureComponent);
-(0, _defineProperty2.default)(AsyncAvatarPickerDialog, "displayName", 'AsyncAvatarPickerDialog');
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var AvatarPickerDialogErrorBoundary = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */'./avatar-picker-dialog-error-boundary'));
+  });
+});
+function AsyncAvatarPickerDialog(props) {
+  var SuspenseFallback = (0, _react.useCallback)(function () {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.placeholder || /*#__PURE__*/_react.default.createElement(_customSpinner.CustomSpinner, null));
+  }, [props.placeholder]);
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(SuspenseFallback, null)
+  }, /*#__PURE__*/_react.default.createElement(AvatarPickerDialogErrorBoundary, props));
+}

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomSpinner = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _mediaUi = require("@atlaskit/media-ui");
+var CustomSpinner = exports.CustomSpinner = function CustomSpinner() {
+  return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
+    blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
+    invertSpinnerColor: false
+  });
+};

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

@@ -36,8 +36,8 @@ var _SRLiveTitle = require("./SRLiveTitle");
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _SubmitErrorDialog = require("./SubmitErrorDialog");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -32,7 +32,6 @@ var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     margin: "var(--ds-space-200, 16px)",
-    fontWeight: 500,
-    fontSize: '20px'
+    font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });

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

@@ -25,8 +25,8 @@ var _primitives = require("@atlaskit/primitives");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var removeImageContainerStyles = (0, _primitives.xcss)({
   position: 'absolute',

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

@@ -34,8 +34,8 @@ var _layoutConst = require("../avatar-picker-dialog/layout-const");
 var _dragZone = require("./dragZone");
 var _exportCroppedImage = require("./exportCroppedImage");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -149,12 +149,12 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChange", function (e) {
       e.stopPropagation();
       if (e.currentTarget.files && e.currentTarget.files.length) {
-        var _file = e.currentTarget.files[0];
-        var validationError = _this.validateFile(_file);
+        var file = e.currentTarget.files[0];
+        var validationError = _this.validateFile(file);
         if (validationError) {
           _this.props.onImageError(validationError);
         } else {
-          _this.readFile(_file);
+          _this.readFile(file);
         }
       }
     });

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

@@ -18,7 +18,7 @@ var _scaleLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/media-ser
 var _scaleSmall = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/scale-small"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _styles = require("./styles");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _containerWrapper = require("./containerWrapper");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * The Container is responsible for implementing the mouse/touch events.
  * This way, you can still move the image without clicking directly on it.
@@ -48,8 +48,8 @@ var ImagePlacerContainer = exports.ImagePlacerContainer = /*#__PURE__*/function
       var _assertThisInitialize = (0, _assertThisInitialized2.default)(_this),
         dragClientStart = _assertThisInitialize.dragClientStart;
       if (dragClientStart) {
-        var _delta = new _mediaUi.Vector2(e.clientX - dragClientStart.x, e.clientY - dragClientStart.y);
-        _this.props.onDragMove(_delta);
+        var delta = new _mediaUi.Vector2(e.clientX - dragClientStart.x, e.clientY - dragClientStart.y);
+        _this.props.onDragMove(delta);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTouchMove", function (e) {
@@ -58,8 +58,8 @@ var ImagePlacerContainer = exports.ImagePlacerContainer = /*#__PURE__*/function
       if (e.touches && e.touches.length >= 1) {
         var touch = e.touches[0];
         if (touch && dragClientStart) {
-          var _delta2 = new _mediaUi.Vector2(touch.clientX - dragClientStart.x, touch.clientY - dragClientStart.y);
-          _this.props.onDragMove(_delta2);
+          var delta = new _mediaUi.Vector2(touch.clientX - dragClientStart.x, touch.clientY - dragClientStart.y);
+          _this.props.onDragMove(delta);
         }
       }
     });

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

@@ -15,7 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _isImageRemote = require("../image-cropper/isImageRemote");
 var _imageWrapper = require("./imageWrapper");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 // TODO: i18n https://product-fabric.atlassian.net/browse/MS-1261
 var IMAGE_ERRORS = exports.IMAGE_ERRORS = {

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

@@ -25,7 +25,7 @@ var _styles = require("./styles");
 var _imageProcessor = require("./imageProcessor");
 var _constraints = require("./constraints");
 var _imagePlacerErrorWrapper = require("./imagePlacerErrorWrapper");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -14,7 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _styles = require("./styles");
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx

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

@@ -49,8 +49,7 @@ var predefinedAvatarViewWrapperStyles = exports.predefinedAvatarViewWrapperStyle
     '.description': {
       paddingLeft: "var(--ds-space-100, 8px)",
       margin: 0,
-      fontSize: '14px',
-      fontWeight: 400
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.back-button': {

package/dist/es2019/avatar-picker-dialog/avatar-picker-dialog-error-boundary.js

@@ -0,0 +1,10 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import AvatarPickerDialog from './';
+import { CustomSpinner } from './custom-spinner';
+export default function AvatarPickerDialogErrorBoundary(props) {
+  const ErrorBoundaryFallback = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, props.placeholder || /*#__PURE__*/React.createElement(CustomSpinner, null)), [props.placeholder]);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: ErrorBoundaryFallback
+  }, /*#__PURE__*/React.createElement(AvatarPickerDialog, props));
+}

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

@@ -1,42 +1,9 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { ModalSpinner } from '@atlaskit/media-ui';
-export default class AsyncAvatarPickerDialog extends React.PureComponent {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "state", {
-      // Set state value to equal to current static value of this class.
-      AvatarPickerDialog: AsyncAvatarPickerDialog.AvatarPickerDialog
-    });
-  }
-  async UNSAFE_componentWillMount() {
-    if (!this.state.AvatarPickerDialog) {
-      try {
-        const module = await import( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */
-        '.');
-        AsyncAvatarPickerDialog.AvatarPickerDialog = module.default;
-        this.setState({
-          AvatarPickerDialog: module.default
-        });
-      } catch (error) {
-        // TODO [MS-2272]: Add operational error to catch async import error
-      }
-    }
-  }
-  render() {
-    if (!this.state.AvatarPickerDialog) {
-      const {
-        placeholder
-      } = this.props;
-      if (placeholder) {
-        return placeholder;
-      }
-      return /*#__PURE__*/React.createElement(ModalSpinner, {
-        blankedColor: `${"var(--ds-blanket, rgba(255, 255, 255, 0.53))"}`,
-        invertSpinnerColor: false
-      });
-    }
-    return /*#__PURE__*/React.createElement(this.state.AvatarPickerDialog, this.props);
-  }
-}
-_defineProperty(AsyncAvatarPickerDialog, "displayName", 'AsyncAvatarPickerDialog');
+import React, { lazy, Suspense, useCallback } from 'react';
+import { CustomSpinner } from './custom-spinner';
+const AvatarPickerDialogErrorBoundary = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */'./avatar-picker-dialog-error-boundary'));
+export default function AsyncAvatarPickerDialog(props) {
+  const SuspenseFallback = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, props.placeholder || /*#__PURE__*/React.createElement(CustomSpinner, null)), [props.placeholder]);
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(SuspenseFallback, null)
+  }, /*#__PURE__*/React.createElement(AvatarPickerDialogErrorBoundary, props));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalSpinner } from '@atlaskit/media-ui';
+export const CustomSpinner = () => {
+  return /*#__PURE__*/React.createElement(ModalSpinner, {
+    blankedColor: `${"var(--ds-blanket, rgba(255, 255, 255, 0.53))"}`,
+    invertSpinnerColor: false
+  });
+};

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

@@ -26,7 +26,6 @@ export const modalHeaderStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     margin: "var(--ds-space-200, 16px)",
-    fontWeight: 500,
-    fontSize: '20px'
+    font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });

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

@@ -43,8 +43,7 @@ export const predefinedAvatarViewWrapperStyles = css({
     '.description': {
       paddingLeft: "var(--ds-space-100, 8px)",
       margin: 0,
-      fontSize: '14px',
-      fontWeight: 400
+      font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.back-button': {

package/dist/esm/avatar-picker-dialog/avatar-picker-dialog-error-boundary.js

@@ -0,0 +1,12 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import AvatarPickerDialog from './';
+import { CustomSpinner } from './custom-spinner';
+export default function AvatarPickerDialogErrorBoundary(props) {
+  var ErrorBoundaryFallback = useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, props.placeholder || /*#__PURE__*/React.createElement(CustomSpinner, null));
+  }, [props.placeholder]);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: ErrorBoundaryFallback
+  }, /*#__PURE__*/React.createElement(AvatarPickerDialog, props));
+}

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

@@ -1,87 +1,13 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { ModalSpinner } from '@atlaskit/media-ui';
-var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(AsyncAvatarPickerDialog, _React$PureComponent);
-  var _super = _createSuper(AsyncAvatarPickerDialog);
-  function AsyncAvatarPickerDialog() {
-    var _this;
-    _classCallCheck(this, AsyncAvatarPickerDialog);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      // Set state value to equal to current static value of this class.
-      AvatarPickerDialog: AsyncAvatarPickerDialog.AvatarPickerDialog
-    });
-    return _this;
-  }
-  _createClass(AsyncAvatarPickerDialog, [{
-    key: "UNSAFE_componentWillMount",
-    value: function () {
-      var _UNSAFE_componentWillMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var module;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (this.state.AvatarPickerDialog) {
-                _context.next = 11;
-                break;
-              }
-              _context.prev = 1;
-              _context.next = 4;
-              return import( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */
-              '.');
-            case 4:
-              module = _context.sent;
-              AsyncAvatarPickerDialog.AvatarPickerDialog = module.default;
-              this.setState({
-                AvatarPickerDialog: module.default
-              });
-              _context.next = 11;
-              break;
-            case 9:
-              _context.prev = 9;
-              _context.t0 = _context["catch"](1);
-            case 11:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, this, [[1, 9]]);
-      }));
-      function UNSAFE_componentWillMount() {
-        return _UNSAFE_componentWillMount.apply(this, arguments);
-      }
-      return UNSAFE_componentWillMount;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      if (!this.state.AvatarPickerDialog) {
-        var placeholder = this.props.placeholder;
-        if (placeholder) {
-          return placeholder;
-        }
-        return /*#__PURE__*/React.createElement(ModalSpinner, {
-          blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
-          invertSpinnerColor: false
-        });
-      }
-      return /*#__PURE__*/React.createElement(this.state.AvatarPickerDialog, this.props);
-    }
-  }]);
-  return AsyncAvatarPickerDialog;
-}(React.PureComponent);
-_defineProperty(AsyncAvatarPickerDialog, "displayName", 'AsyncAvatarPickerDialog');
-export { AsyncAvatarPickerDialog as default };
+import React, { lazy, Suspense, useCallback } from 'react';
+import { CustomSpinner } from './custom-spinner';
+var AvatarPickerDialogErrorBoundary = /*#__PURE__*/lazy(function () {
+  return import( /* webpackChunkName: "@atlaskit-internal_media-avatar-picker" */'./avatar-picker-dialog-error-boundary');
+});
+export default function AsyncAvatarPickerDialog(props) {
+  var SuspenseFallback = useCallback(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, props.placeholder || /*#__PURE__*/React.createElement(CustomSpinner, null));
+  }, [props.placeholder]);
+  return /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement(SuspenseFallback, null)
+  }, /*#__PURE__*/React.createElement(AvatarPickerDialogErrorBoundary, props));
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ModalSpinner } from '@atlaskit/media-ui';
+export var CustomSpinner = function CustomSpinner() {
+  return /*#__PURE__*/React.createElement(ModalSpinner, {
+    blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
+    invertSpinnerColor: false
+  });
+};

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

@@ -8,7 +8,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic

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

@@ -26,7 +26,6 @@ export var modalHeaderStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&&': {
     margin: "var(--ds-space-200, 16px)",
-    fontWeight: 500,
-    fontSize: '20px'
+    font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
   }
 });

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

@@ -6,7 +6,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import { Component } from 'react';