@atlaskit/media-avatar-picker 24.6.5 → 24.6.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-avatar-picker
 
+## 24.6.7
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.6.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.6.5
 
 ### Patch Changes

package/compass.yml

@@ -1,6 +1,8 @@
 name: Media Avatar Picker
 id: 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/91b4a140-e4d9-4c93-b685-33ab22c6fa6d'
-description: 'A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.'
+description:
+  'A component to select, drag and resize image avatars. It also provides a default list of
+  predefined avatars.'
 configVersion: 1
 typeId: UI_ELEMENT
 ownerId: 'ari:cloud:teams::team/5e42d9d6-0823-4c6f-b469-7445522c9d10'
@@ -42,6 +44,5 @@ links:
     type: PROJECT
     url: 'https://product-fabric.atlassian.net/jira/software/c/projects/MEX/boards/713'
 relationships: {}
-
 # Learn more about formatting compass.yml:
 # https://go.atlassian.com/compass-yml-format

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

@@ -9,6 +9,7 @@ var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("./styles");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   var _ref$avatars = _ref.avatars,
@@ -43,7 +44,9 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
   });
   return (0, _react.jsx)("div", {
     role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.messages.select_an_avatar),
+    "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
   }, cards);
 };

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

@@ -6,12 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.smallAvatarImageStyles = exports.avatarListWrapperStyles = void 0;
 var _react = require("@emotion/react");
 var _styles = require("../styles");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var smallAvatarImageStyles = exports.smallAvatarImageStyles = (0, _react.css)(_styles.avatarImageStyles, {
   width: "var(--ds-space-500, 40px)",
   height: "var(--ds-space-500, 40px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var avatarListWrapperStyles = exports.avatarListWrapperStyles = (0, _react.css)({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   label: {
     paddingRight: "var(--ds-space-050, 4px)",
     display: 'inline-flex'

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

@@ -14,6 +14,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _reactIntlNext = require("react-intl-next");
 var _styles = require("./styles");
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog() {
   var intl = (0, _reactIntlNext.useIntl)();
@@ -23,17 +24,20 @@ var SubmitErrorDialog = exports.SubmitErrorDialog = function SubmitErrorDialog()
       flagContainerRef.current.children[0].focus();
     }
   }, []);
-  return (0, _react.jsx)("div", {
-    css: _styles.avatarPickerErrorStyles,
-    ref: flagContainerRef
-  }, (0, _react.jsx)(_flag.default, {
-    appearance: "error",
-    icon: (0, _react.jsx)(_error.default, {
-      label: "Error",
-      secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")")
-    }),
-    id: "avatar-picker-error",
-    key: "error",
-    title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
-  }));
+  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",
+        secondaryColor: "var(--ds-background-danger-bold, ".concat(_colors.R400, ")")
+      }),
+      id: "avatar-picker-error",
+      key: "error",
+      title: intl.formatMessage(_mediaUi.messages.or_select_default_avatars)
+    }))
+  );
 };

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

@@ -38,7 +38,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 && 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; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var MAX_SIZE_MB = exports.MAX_SIZE_MB = 10;
 var ERROR = exports.ERROR = {
   URL: _mediaUi.messages.image_url_invalid_error,
@@ -54,11 +54,14 @@ var fixedCrop = exports.fixedCrop = {
 var HeaderContent = function HeaderContent(_ref) {
   var title = _ref.title;
   var modal = (0, _modalDialog.useModal)();
-  return (0, _react2.jsx)("h1", {
-    css: _styles.modalHeaderStyles,
-    "data-test-id": "modal-header",
-    id: modal.titleId
-  }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar));
+  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", {
+      css: _styles.modalHeaderStyles,
+      "data-test-id": "modal-header",
+      id: modal.titleId
+    }, title || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_an_avatar))
+  );
 };
 var altTextFieldStyles = (0, _primitives.xcss)({
   paddingTop: 'space.100',

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

@@ -5,12 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.modalHeaderStyles = exports.formStyles = exports.avatarPickerViewWrapperStyles = exports.avatarPickerErrorStyles = void 0;
 var _react = require("@emotion/react");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var avatarPickerErrorStyles = exports.avatarPickerErrorStyles = (0, _react.css)({
   margin: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-200, 16px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var formStyles = exports.formStyles = (0, _react.css)({
   margin: 0
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0, _react.css)({
   display: 'flex',
   justifyContent: 'center',
@@ -18,8 +25,11 @@ var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0,
   textAlign: 'center',
   minHeight: '339px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)({
   // Using `&` twice to increase specificity
+  // 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,

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ImageCropper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -13,38 +14,20 @@ 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 = require("@emotion/react");
-var _react2 = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _isImageRemote = require("./isImageRemote");
 var _styles = require("./styles");
-var _colors = require("@atlaskit/theme/colors");
+var _new = require("@atlaskit/button/new");
 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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
-var removeImageButtonStyles = (0, _react.css)({
-  borderRadius: "var(--ds-border-radius-050, 3px)",
-  backgroundColor: 'transparent',
-  width: '24px',
-  height: '24px',
-  border: 'none',
-  cursor: 'pointer',
-  padding: 0,
-  svg: {
-    position: 'absolute',
-    top: "var(--ds-space-050, 4px)",
-    left: "var(--ds-space-050, 4px)"
-  },
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N50A, ")")
-  }
-});
+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',
   right: 'space.050',
@@ -61,9 +44,13 @@ var maskShadow = {
 };
 var maskStyles = (0, _primitives.xcss)({
   position: 'absolute',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   top: "".concat(_styles.CONTAINER_PADDING, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   bottom: "".concat(_styles.CONTAINER_PADDING, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   left: "".concat(_styles.CONTAINER_PADDING, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   right: "".concat(_styles.CONTAINER_PADDING, "px"),
   opacity: 'opacity.disabled'
 });
@@ -134,16 +121,23 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onImageLoaded = _this$props3.onImageLoaded,
         formatMessage = _this$props3.intl.formatMessage;
       var containerDimensions = (0, _primitives.xcss)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         width: "".concat(containerSize, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         height: "".concat(containerSize, "px")
       });
       var width = imageWidth ? "".concat(imageWidth, "px") : 'auto';
       var height = imageHeight ? "".concat(imageHeight, "px") : 'auto';
       var imageContainerDynamicStyles = (0, _primitives.xcss)({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         width: width,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         height: height,
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         display: width === 'auto' ? 'none' : 'block',
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         top: "".concat(top, "px"),
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         left: "".concat(left, "px")
       });
       var crossOrigin;
@@ -152,13 +146,13 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
       } catch (e) {
         return null;
       }
-      return (0, _react.jsx)(_primitives.Box, {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         id: "container",
         xcss: [containerStyles, containerDimensions]
-      }, (0, _react.jsx)(_primitives.Box, {
+      }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         id: "image-container",
         xcss: [imageContainerStyles, imageContainerDynamicStyles]
-      }, (0, _react.jsx)(_mediaUi.MediaImage, {
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
         crossOrigin: crossOrigin,
         dataURI: imageSource,
         crop: false,
@@ -167,34 +161,40 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
       })), isCircularMask ?
+      /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      (0, _react.jsx)(_primitives.Box, {
+      _react.default.createElement(_primitives.Box, {
         xcss: [maskStyles, circularMaskStyles],
         style: maskShadow
       }) :
+      /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      (0, _react.jsx)(_primitives.Box, {
+      _react.default.createElement(_primitives.Box, {
         xcss: [maskStyles, rectMaskStyles],
         style: maskShadow
-      }), (0, _react.jsx)(_primitives.Box, {
+      }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles,
         onMouseDown: this.onDragStarted
-      }), (0, _react.jsx)(_primitives.Box, {
+      }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles
-      }, (0, _react.jsx)("button", {
+      }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
         id: "remove-image-button",
-        css: removeImageButtonStyles,
-        onClick: onRemoveImage
-      }, (0, _react.jsx)(_cross.default, {
-        size: "small",
-        label: formatMessage(_mediaUi.messages.remove_image)
-      }))));
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/_react.default.createElement(_cross.default, (0, _extends2.default)({}, iconProps, {
+            size: "small"
+          }));
+        },
+        onClick: onRemoveImage,
+        label: formatMessage(_mediaUi.messages.remove_image),
+        spacing: "compact",
+        appearance: "subtle"
+      })));
     }
   }]);
   return ImageCropper;
-}(_react2.Component);
+}(_react.Component);
 (0, _defineProperty2.default)(ImageCropper, "defaultProps", {
   containerSize: _layoutConst.CONTAINER_INNER_SIZE,
   isCircleMask: false,

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

@@ -11,12 +11,14 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 var _excluded = ["showBorder", "isDroppingFile", "children"];
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var DragZone = exports.DragZone = function DragZone(_ref) {
   var showBorder = _ref.showBorder,
     isDroppingFile = _ref.isDroppingFile,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("div", (0, _extends2.default)({
+    // 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: (0, _styles.dragZoneStyles)({
       showBorder: showBorder,
       isDroppingFile: isDroppingFile

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

@@ -35,7 +35,7 @@ var _dragZone = require("./dragZone");
 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; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var viewport = exports.viewport = new _viewport2.Viewport(_layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_PADDING);
 var defaultState = {
   imagePos: new _mediaUi.Vector2(_layoutConst.CONTAINER_PADDING, _layoutConst.CONTAINER_PADDING),
@@ -319,23 +319,27 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var _this$props3 = this.props,
         errorMessage = _this$props3.errorMessage,
         isLoading = _this$props3.isLoading;
-      return (0, _react2.jsx)("div", {
-        id: "image-uploader",
-        css: _styles.imageUploaderStyles
-      }, this.renderDragZone(), isLoading ? null : (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", {
-        id: "padded-break",
-        css: _styles.paddedBreakStyles
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_standardButton.default, {
-        onClick: this.onUploadButtonClick,
-        isDisabled: isLoading,
-        testId: "upload-button"
-      }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
-        css: _styles.fileInputStyles,
-        type: "file",
-        id: "image-input",
-        onChange: this.onFileChange,
-        accept: _avatarPickerDialog.ACCEPT.join(',')
-      }))));
+      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)("div", {
+          id: "image-uploader",
+          css: _styles.imageUploaderStyles
+        }, this.renderDragZone(), isLoading ? null : (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", {
+          id: "padded-break",
+          css: _styles.paddedBreakStyles
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_standardButton.default, {
+          onClick: this.onUploadButtonClick,
+          isDisabled: isLoading,
+          testId: "upload-button"
+        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
+          // 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.fileInputStyles,
+          type: "file",
+          id: "image-input",
+          onChange: this.onFileChange,
+          accept: _avatarPickerDialog.ACCEPT.join(',')
+        }))))
+      );
     }
   }, {
     key: "renderImageCropper",
@@ -391,6 +395,8 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var isLoading = this.props.isLoading;
       var dataURI = this.dataURI;
       var content = dataURI && !isLoading ? this.renderImageCropper(dataURI) : this.renderImageUploader();
+
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       return (0, _react2.jsx)("div", {
         css: _styles.containerStyles
       }, content);

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

@@ -19,7 +19,7 @@ var _scaleSmall = _interopRequireDefault(require("@atlaskit/icon/glyph/media-ser
 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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var defaultProps = exports.defaultProps = {
   value: 0
 };
@@ -36,32 +36,35 @@ var Slider = exports.Slider = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         value = _this$props.value,
         onChange = _this$props.onChange;
-      return (0, _react.jsx)("div", {
-        css: _styles.sliderWrapperStyles
-      }, (0, _react.jsx)(_standardButton.default
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "zoom_button zoom_button_small",
-        iconAfter: (0, _react.jsx)(_scaleSmall.default, {
-          label: "scale-small-icon"
-        }),
-        onClick: function onClick() {
-          return onChange(0);
-        }
-      }), (0, _react.jsx)(_range.default, {
-        value: value,
-        onChange: onChange
-      }), (0, _react.jsx)(_standardButton.default
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "zoom_button zoom_button_large",
-        iconAfter: (0, _react.jsx)(_scaleLarge.default, {
-          label: "scale-large-icon"
-        }),
-        onClick: function onClick() {
-          return onChange(100);
-        }
-      }));
+      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.sliderWrapperStyles
+        }, (0, _react.jsx)(_standardButton.default
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "zoom_button zoom_button_small",
+          iconAfter: (0, _react.jsx)(_scaleSmall.default, {
+            label: "scale-small-icon"
+          }),
+          onClick: function onClick() {
+            return onChange(0);
+          }
+        }), (0, _react.jsx)(_range.default, {
+          value: value,
+          onChange: onChange
+        }), (0, _react.jsx)(_standardButton.default
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "zoom_button zoom_button_large",
+          iconAfter: (0, _react.jsx)(_scaleLarge.default, {
+            label: "scale-large-icon"
+          }),
+          onClick: function onClick() {
+            return onChange(100);
+          }
+        }))
+      );
     }
   }]);
   return Slider;

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

@@ -8,37 +8,51 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _images = require("./images");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var imageBgStyles = exports.imageBgStyles = (0, _react.css)({
   position: 'absolute',
   top: 0,
   left: 0,
   width: '256px',
   height: '256px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   background: "url('".concat(_images.checkeredBg, "')"),
   borderRadius: "var(--ds-border-radius, 3px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var containerStyles = exports.containerStyles = (0, _react.css)({
   boxSizing: 'border-box',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '*, *::before, *::after': {
     boxSizing: 'border-box'
   },
   position: 'relative'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var sliderContainerStyles = exports.sliderContainerStyles = (0, _react.css)({
   alignItems: 'center',
   justifyContent: 'center',
   display: 'flex',
   flexDirection: 'row',
   marginTop: "var(--ds-space-100, 8px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   input: {
     boxSizing: 'content-box',
     padding: 0
   },
   backgroundColor: "var(--ds-surface-overlay, #fff)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var fileInputStyles = exports.fileInputStyles = (0, _react.css)({
   display: 'none'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var imageUploaderStyles = exports.imageUploaderStyles = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column',
@@ -64,6 +78,7 @@ var getBorder = function getBorder(showBorder) {
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
   return isDroppingFile ? (0, _react.css)({
     backgroundColor: "var(--ds-background-information-hovered, #ddecfe)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     '&:after': droppingAnimation
   }) : '';
 };
@@ -81,6 +96,7 @@ var dragZoneStyles = exports.dragZoneStyles = function dragZoneStyles(props) {
     transition: 'background-color 0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
     '&::after': {
       content: "''",
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       border: getBorder(props.showBorder),
       borderRadius: '100%',
       position: 'absolute',
@@ -90,9 +106,13 @@ var dragZoneStyles = exports.dragZoneStyles = function dragZoneStyles(props) {
       height: '100%',
       transition: 'border-color 0.3s cubic-bezier(0.19, 1, 0.22, 1)'
     }
-  }, getDroppingAnimation(props.isDroppingFile));
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getDroppingAnimation(props.isDroppingFile));
 };
 dragZoneStyles.displayName = 'DragZone';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var dragZoneImageStyles = exports.dragZoneImageStyles = (0, _react.css)({
   width: '100px'
 });
@@ -103,8 +123,12 @@ var dragZoneTextStyles = exports.dragZoneTextStyles = function dragZoneTextStyle
   return (0, _react.css)({
     textAlign: 'center',
     color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")")
-  }, getWidth(props.isFullSize));
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getWidth(props.isFullSize));
 };
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)({
   position: 'fixed',
   left: 0,
@@ -114,15 +138,21 @@ var selectionBlockerStyles = exports.selectionBlockerStyles = (0, _react.css)({
   backgroundColor: 'transparent',
   userSelect: 'none'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var paddedBreakStyles = exports.paddedBreakStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   marginTop: "var(--ds-space-100, 10px)".concat(" !important"),
   marginBottom: "var(--ds-space-100, 10px)",
   textAlign: 'center'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var sliderWrapperStyles = exports.sliderWrapperStyles = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
   width: '100%',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.zoom_button svg': {
     position: 'relative',
     left: "var(--ds-space-negative-025, -2px)"

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

@@ -12,7 +12,9 @@ var _primitives = require("@atlaskit/primitives");
 var _styles = require("./styles");
 var _excluded = ["width", "height", "margin", "children"];
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var containerWrapperStyles = (0, _primitives.xcss)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   background: "url('".concat(_styles.checkeredBg, "')"),
   position: "relative",
   cursor: "move",
@@ -26,7 +28,9 @@ var ContainerWrapper = exports.ContainerWrapper = function ContainerWrapper(_ref
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var containerWrapperDimensions = (0, _primitives.xcss)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(width !== undefined ? width + margin * 2 : 0, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(height !== undefined ? height + margin * 2 : 0, "px")
   });
   return (0, _react.jsx)(_primitives.Box, (0, _extends2.default)({