@atlaskit/media-avatar-picker 24.10.5 → 25.0.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-avatar-picker
 
+## 25.0.0
+
+### Major Changes
+
+- [#163285](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163285)
+  [`8227541db679d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8227541db679d) -
+  Migrates Avatar Picker from Emotion to Compiled CSS
+
 ## 24.10.5
 
 ### Patch Changes

package/dist/cjs/avatar-list/index.compiled.css

@@ -0,0 +1,21 @@
+
+._19itidpf{border:0}
+._2rkosqtm{border-radius:var(--ds-border-radius-100,3px)}._16qsbenk{box-shadow:var(--_5tra1i)}
+._16qsvj57{box-shadow:var(--_zp4yxx)}
+._18m915vq{overflow-y:hidden}
+._19bvidpf{padding-left:0}
+._1bsb1jfw{width:var(--ds-space-500,40px)}
+._1bsbt94y{width:1px}
+._1e0c116y{display:inline-flex}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._4t3i1jfw{height:var(--ds-space-500,40px)}
+._4t3it94y{height:1px}
+._80omtlke{cursor:pointer}
+._ca0qidpf{padding-top:0}
+._kqsw1n9t{position:fixed}
+._n3tdidpf{padding-bottom:0}
+._o5721q9c{white-space:nowrap}
+._ogto7mnp{clip:rect(1px,1px,1px,1px)}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._u5f3idpf{padding-right:0}

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

@@ -1,19 +1,31 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AvatarList = void 0;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _colors = require("@atlaskit/theme/colors");
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var smallAvatarImageStyles = null;
+var avatarListWrapperStyles = null;
+var labelStyles = null;
+var inputStyles = null;
+var imageCheckedStyles = null;
+var imageFocusedStyles = null;
 var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   var _ref$avatars = _ref.avatars,
     avatars = _ref$avatars === void 0 ? [] : _ref$avatars,
@@ -21,6 +33,12 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
     onItemClick = _ref.onItemClick,
     selectAvatarLabel = _ref.selectAvatarLabel;
   var intl = (0, _reactIntlNext.useIntl)();
+  var _useState = (0, _react.useState)(Object.fromEntries(avatars.map(function (avatar) {
+      return [avatar.dataURI, false];
+    }))),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isFocused = _useState2[0],
+    setIsFocused = _useState2[1];
   var createOnItemClickHandler = function createOnItemClickHandler(avatar) {
     return function () {
       if (onItemClick) {
@@ -30,26 +48,36 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   };
   var cards = avatars.map(function (avatar, idx) {
     var elementKey = "predefined-avatar-".concat(idx);
-    return (0, _react.jsx)("label", {
-      key: elementKey
-    }, (0, _react.jsx)("input", {
+    return /*#__PURE__*/React.createElement("label", {
+      key: elementKey,
+      className: (0, _runtime.ax)(["_u5f31b66 _1e0c116y"])
+    }, /*#__PURE__*/React.createElement("input", {
       type: "radio",
       name: "avatar",
       value: avatar.dataURI,
       "aria-label": avatar.name || undefined,
       checked: avatar === selectedAvatar,
-      onChange: createOnItemClickHandler(avatar)
-    }), (0, _react.jsx)("img", {
-      css: _styles.smallAvatarImageStyles,
+      onChange: createOnItemClickHandler(avatar),
+      onFocus: function onFocus() {
+        return setIsFocused(_objectSpread(_objectSpread({}, isFocused), {}, (0, _defineProperty2.default)({}, avatar.dataURI, true)));
+      },
+      onBlur: function onBlur() {
+        return setIsFocused(_objectSpread(_objectSpread({}, isFocused), {}, (0, _defineProperty2.default)({}, avatar.dataURI, false)));
+      },
+      className: (0, _runtime.ax)(["_1bsbt94y _4t3it94y _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _kqsw1n9t _19itidpf _ogto7mnp _1reo15vq _18m915vq _o5721q9c"])
+    }), /*#__PURE__*/React.createElement("img", {
       src: avatar.dataURI,
-      alt: ""
+      alt: "",
+      className: (0, _runtime.ax)(["_2rkosqtm _80omtlke _1bsb1jfw _4t3i1jfw", avatar === selectedAvatar && "_16qsbenk", isFocused[avatar.dataURI] && "_16qsvj57"]),
+      style: {
+        "--_5tra1i": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"))),
+        "--_zp4yxx": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")")))
+      }
     }));
   });
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    ,
-    css: _styles.avatarListWrapperStyles
+    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
+    className: (0, _runtime.ax)(["_1e0c1txw"])
   }, cards);
 };

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

@@ -0,0 +1,4 @@
+._18u0pxbi{margin-left:var(--ds-space-200,1pc)}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
+._2hwxpxbi{margin-right:var(--ds-space-200,1pc)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}

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

@@ -1,48 +1,45 @@
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SubmitErrorDialog = void 0;
-var _react = require("@emotion/react");
-var _react2 = require("react");
+require("./SubmitErrorDialog.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
 var _flag = _interopRequireDefault(require("@atlaskit/flag"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _reactIntlNext = require("react-intl-next");
-var _styles = require("./styles");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+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; }
+var avatarPickerErrorStyles = null;
 var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog() {
   var intl = (0, _reactIntlNext.useIntl)();
-  var flagContainerRef = (0, _react2.useRef)(null);
-  (0, _react2.useEffect)(function () {
+  var flagContainerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
     if (flagContainerRef.current) {
       flagContainerRef.current.children[0].focus();
     }
   }, []);
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react.jsx)("div", {
-      css: _styles.avatarPickerErrorStyles,
-      ref: flagContainerRef
-    }, (0, _react.jsx)(_flag.default, {
-      appearance: "error",
-      icon: (0, _react.jsx)(_error.default, {
-        label: "Error",
-        color: "currentColor",
-        LEGACY_secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
-        spacing: "spacious"
-      }),
-      id: "avatar-picker-error",
-      key: "error",
-      title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    ref: flagContainerRef,
+    className: (0, _runtime.ax)(["_19pkze3t _2hwxpxbi _18u0pxbi _otyrpxbi"])
+  }, /*#__PURE__*/React.createElement(_flag.default, {
+    appearance: "error",
+    icon: /*#__PURE__*/React.createElement(_error.default, {
+      label: "Error",
+      color: "currentColor",
+      LEGACY_secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")"),
+      spacing: "spacious"
+    }),
+    id: "avatar-picker-error",
+    key: "error",
+    title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
+  }));
 };

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

@@ -0,0 +1,15 @@
+
+._fqoxo0gd._fqoxo0gd{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)}
+._peycpxbi._peycpxbi{margin:var(--ds-space-200,1pc)}._18u0idpf{margin-left:0}
+._19pkidpf{margin-top:0}
+._1bah1h6o{justify-content:center}
+._1e0c1o8l{display:inline-block}
+._1e0c1txw{display:flex}
+._1tkeqbeb{min-height:339px}
+._2hwxidpf{margin-right:0}
+._4cvr1y6m{align-items:flex-start}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._y3gn1e5h{text-align:left}
+._y3gn1h6o{text-align:center}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fixedCrop = exports.default = exports.MAX_SIZE_MB = exports.ERROR = exports.AvatarPickerDialog = exports.ACCEPT = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -17,17 +20,15 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _reactIntlNext = require("react-intl-next");
 var _form = require("@atlaskit/form");
 var _mediaUi = require("@atlaskit/media-ui");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
 var _imageNavigator = _interopRequireDefault(require("../image-navigator"));
 var _predefinedAvatarList = require("../predefined-avatar-list");
-var _styles = require("./styles");
 var _predefinedAvatarView = require("../predefined-avatar-view");
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 var _layoutConst = require("./layout-const");
@@ -38,10 +39,7 @@ 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 && {}.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
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MAX_SIZE_MB = exports.MAX_SIZE_MB = 10;
 var ERROR = exports.ERROR = {
   URL: _mediaUi.messages.image_url_invalid_error,
@@ -54,30 +52,27 @@ var fixedCrop = exports.fixedCrop = {
   y: 0,
   size: _layoutConst.CONTAINER_INNER_SIZE
 };
+var modalHeaderStyles = null;
+var formStyles = null;
+var avatarPickerViewWrapperStyles = null;
 var HeaderContent = function HeaderContent(_ref) {
   var title = _ref.title;
   var modal = (0, _modalDialog.useModal)();
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    (0, _react2.jsx)("h1", {
-      "data-testid": "modal-header",
-      css: _styles.modalHeaderStyles,
-      id: modal.titleId
-    }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar))
-  );
+  return /*#__PURE__*/_react.default.createElement("h1", {
+    "data-testid": "modal-header",
+    id: modal.titleId,
+    className: (0, _runtime.ax)(["_peycpxbi _fqoxo0gd"])
+  }, title || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
+};
+var altTextFieldStyles = {
+  root: "_ca0qu2gc _y3gn1e5h"
+};
+var croppingWrapperStyles = {
+  root: "_1e0c1o8l _uiztglyw"
+};
+var predefinedAvatarWrapperStyles = {
+  root: "_1e0c1o8l _uiztglyw"
 };
-var altTextFieldStyles = (0, _primitives.xcss)({
-  paddingTop: 'space.100',
-  textAlign: 'left'
-});
-var croppingWrapperStyles = (0, _primitives.xcss)({
-  display: 'inline-block',
-  userSelect: 'none'
-});
-var predefinedAvatarWrapperStyles = (0, _primitives.xcss)({
-  display: 'inline-block',
-  userSelect: 'none'
-});
 var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(AvatarPickerDialog, _PureComponent);
   var _super = _createSuper(AvatarPickerDialog);
@@ -242,39 +237,39 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         primaryButtonText = _this$props2.primaryButtonText,
         onCancel = _this$props2.onCancel,
         isLoading = _this$props2.isLoading;
-      return (0, _react2.jsx)(_modalDialog.ModalFooter, {
+      return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, {
         testId: "avatar-picker-dialog-footer"
-      }, (0, _react2.jsx)(_buttonGroup.default, null, (0, _react2.jsx)(_standardButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
         appearance: "default",
         onClick: onCancel
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel)), (0, _react2.jsx)(_loadingButton.default, {
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.cancel)), /*#__PURE__*/_react.default.createElement(_loadingButton.default, {
         appearance: "primary",
         isLoading: isLoading,
         type: "submit"
-      }, primaryButtonText || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.save))));
+      }, primaryButtonText || /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.save))));
     });
     return _this;
   }
   (0, _createClass2.default)(AvatarPickerDialog, [{
     key: "render",
     value: function render() {
-      var content = (0, _react2.jsx)(_modalDialog.default, {
+      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
-      }, this.props.avatars.length > 0 && (0, _react2.jsx)(_SRLiveTitle.SRLiveTitle, {
+      }, this.props.avatars.length > 0 && /*#__PURE__*/_react.default.createElement(_SRLiveTitle.SRLiveTitle, {
         mode: this.state.mode
-      }), (0, _react2.jsx)(HeaderContent, {
+      }), /*#__PURE__*/_react.default.createElement(HeaderContent, {
         title: this.props.title
-      }), this.state.isSubmitted && (0, _react2.jsx)(_SubmitErrorDialog.SubmitErrorDialog, null), (0, _react2.jsx)("form", {
+      }), this.state.isSubmitted && /*#__PURE__*/_react.default.createElement(_SubmitErrorDialog.SubmitErrorDialog, null), /*#__PURE__*/_react.default.createElement("form", {
         "aria-label": "form",
         onSubmit: this.onSave,
-        css: _styles.formStyles
-      }, (0, _react2.jsx)(_modalDialog.ModalBody, null, (0, _react2.jsx)("div", {
-        css: _styles.avatarPickerViewWrapperStyles
+        className: (0, _runtime.ax)(["_19pkidpf _2hwxidpf _otyridpf _18u0idpf"])
+      }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)(["_1e0c1txw _1bah1h6o _4cvr1y6m _y3gn1h6o _1tkeqbeb"])
       }, this.renderBody())), this.footerContent()));
-      return this.props.intl ? content : (0, _react2.jsx)(_reactIntlNext.IntlProvider, {
+      return this.props.intl ? content : /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
         locale: "en"
       }, content);
     }
@@ -304,7 +299,7 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
       if (isLoading || selectedImage || selectedImageSource || avatars.length === 0) {
         return null;
       }
-      return (0, _react2.jsx)(_predefinedAvatarList.PredefinedAvatarList, {
+      return /*#__PURE__*/_react.default.createElement(_predefinedAvatarList.PredefinedAvatarList, {
         selectedAvatar: selectedAvatar,
         avatars: avatars,
         onAvatarSelected: this.setSelectedAvatarState,
@@ -364,21 +359,21 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
     value: function renderAltTextField() {
       var _this2 = this;
       var altText = this.state.altText;
-      return (0, _react2.jsx)(_primitives.Box, {
-        xcss: altTextFieldStyles
-      }, (0, _react2.jsx)(_form.Field, {
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        xcss: altTextFieldStyles.root
+      }, /*#__PURE__*/_react.default.createElement(_form.Field, {
         "aria-required": true,
         name: "altText",
         isRequired: true,
-        label: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text)
+        label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text)
       }, function (_ref3) {
         var fieldProps = _ref3.fieldProps;
-        return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_textfield.default, (0, _extends2.default)({}, fieldProps, {
+        return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.default, (0, _extends2.default)({}, fieldProps, {
           onChange: function onChange(event) {
             return _this2.updateAltText(event.currentTarget.value);
           },
           value: altText || ''
-        })), (0, _react2.jsx)(_form.HelperMessage, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text_description)));
+        })), /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.alt_text_description)));
       }));
     }
   }, {
@@ -396,9 +391,9 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
         errorMessage = _this$state3.errorMessage;
       switch (mode) {
         case _types.Mode.Cropping:
-          return (0, _react2.jsx)(_primitives.Box, null, (0, _react2.jsx)(_primitives.Box, {
-            xcss: croppingWrapperStyles
-          }, (0, _react2.jsx)(_imageNavigator.default, {
+          return /*#__PURE__*/_react.default.createElement(_compiled.Box, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+            xcss: croppingWrapperStyles.root
+          }, /*#__PURE__*/_react.default.createElement(_imageNavigator.default, {
             imageSource: selectedImageSource,
             errorMessage: errorMessage,
             onImageLoaded: this.setSelectedImageState,
@@ -409,9 +404,9 @@ var AvatarPickerDialog = exports.AvatarPickerDialog = /*#__PURE__*/function (_Pu
             isLoading: isLoading
           }), this.renderPredefinedAvatarList()), requireAltText && this.renderAltTextField());
         case _types.Mode.PredefinedAvatars:
-          return (0, _react2.jsx)(_primitives.Box, {
-            xcss: predefinedAvatarWrapperStyles
-          }, (0, _react2.jsx)(_predefinedAvatarView.PredefinedAvatarView, {
+          return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+            xcss: predefinedAvatarWrapperStyles.root
+          }, /*#__PURE__*/_react.default.createElement(_predefinedAvatarView.PredefinedAvatarView, {
             avatars: avatars,
             onAvatarSelected: this.setSelectedAvatarState,
             onGoBack: this.onGoBack,

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

@@ -5,16 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.cropToDataURI = void 0;
 var _mediaUi = require("@atlaskit/media-ui");
-var _styles = require("./styles");
 var _util = require("../util");
+var CONTAINER_PADDING = 28;
 var cropToDataURI = exports.cropToDataURI = function cropToDataURI(imageElement, imageRect, cropRect, scale, imageOrientation) {
   var top = cropRect.top,
     left = cropRect.left,
     width = cropRect.width,
     height = cropRect.height;
   var scaleWithDefault = scale || 1;
-  var destinationWidth = Math.max(width - _styles.CONTAINER_PADDING * 2, 0);
-  var destinationHeight = Math.max(height - _styles.CONTAINER_PADDING * 2, 0);
+  var destinationWidth = Math.max(width - CONTAINER_PADDING * 2, 0);
+  var destinationHeight = Math.max(height - CONTAINER_PADDING * 2, 0);
   var _getCanvas = (0, _util.getCanvas)(destinationWidth, destinationHeight),
     canvas = _getCanvas.canvas,
     context = _getCanvas.context;
@@ -47,8 +47,8 @@ var cropToDataURI = exports.cropToDataURI = function cropToDataURI(imageElement,
 
   var sourceImageWidth = imageRect.width / scaleWithDefault;
   var sourceImageHeight = imageRect.height / scaleWithDefault;
-  var sourceLeft = (_styles.CONTAINER_PADDING - left) / scaleWithDefault;
-  var sourceTop = (_styles.CONTAINER_PADDING - top) / scaleWithDefault;
+  var sourceLeft = (CONTAINER_PADDING - left) / scaleWithDefault;
+  var sourceTop = (CONTAINER_PADDING - top) / scaleWithDefault;
   var sourceWidth = destinationWidth / scaleWithDefault;
   var sourceHeight = destinationHeight / scaleWithDefault;
   var sourceRight = sourceImageWidth - sourceWidth - sourceLeft;

package/dist/cjs/image-cropper/index.compiled.css

@@ -0,0 +1,12 @@
+
+._2rko14q2{border-radius:var(--ds-border-radius-circle,2002pc)}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._154i1b66{top:var(--ds-space-050,4px)}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1reo15vq{overflow-x:hidden}
+._1xi21b66{right:var(--ds-space-050,4px)}
+._4t3i1osq{height:100%}
+._80om15ng{cursor:move}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}