@atlaskit/media-avatar-picker 24.6.5 → 24.6.7

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { AvatarList } from '../avatar-list';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
@@ -15,24 +16,27 @@ export const PredefinedAvatarList = ({
   showMoreAvatarsButtonLabel
 }) => {
   const intl = useIntl();
-  return jsx("div", {
-    css: predefinedAvatarsWrapperStyles,
-    id: "predefined-avatar-wrapper"
-  }, jsx(AvatarList, {
-    avatars: avatars,
-    selectedAvatar: selectedAvatar,
-    onItemClick: onAvatarSelected,
-    selectAvatarLabel: selectAvatarLabel
-  }), jsx(Button, {
-    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(messages.show_more_avatars_btn_label)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "show-more-button",
-    appearance: "subtle",
-    iconAfter: jsx(EditorMoreIcon, {
-      label: "",
-      size: "large"
-    }),
-    onClick: onShowMore
-  }));
+  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
+    jsx("div", {
+      css: predefinedAvatarsWrapperStyles,
+      id: "predefined-avatar-wrapper"
+    }, jsx(AvatarList, {
+      avatars: avatars,
+      selectedAvatar: selectedAvatar,
+      onItemClick: onAvatarSelected,
+      selectAvatarLabel: selectAvatarLabel
+    }), jsx(Button, {
+      "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(messages.show_more_avatars_btn_label)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "show-more-button",
+      appearance: "subtle",
+      iconAfter: jsx(EditorMoreIcon, {
+        label: "",
+        size: "large"
+      }),
+      onClick: onShowMore
+    }))
+  );
 };

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

@@ -1,7 +1,8 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow } from '../styles';
 
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const predefinedAvatarsWrapperStyles = css`
 	display: flex;
 

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

@@ -1,4 +1,5 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
@@ -38,27 +39,30 @@ export const PredefinedAvatarView = ({
       alt: ""
     }));
   });
-  return jsx("div", {
-    css: predefinedAvatarViewWrapperStyles,
-    id: "predefined-avatar-view-wrapper"
-  }, jsx("div", {
-    className: "header"
-  }, jsx(Button, {
-    "aria-label": intl.formatMessage(messages.avatar_picker_back_btn_label)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "back-button",
-    iconAfter: jsx(ArrowLeftIcon, {
-      label: ""
-    }),
-    onClick: onGoBack
-  }), jsx("h2", {
-    className: "description"
-  }, predefinedAvatarsText || jsx(FormattedMessage, messages.default_avatars))), jsx("div", {
-    role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(messages.select_an_avatar)
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    ,
-    className: "body"
-  }, cards));
+  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
+    jsx("div", {
+      css: predefinedAvatarViewWrapperStyles,
+      id: "predefined-avatar-view-wrapper"
+    }, jsx("div", {
+      className: "header"
+    }, jsx(Button, {
+      "aria-label": intl.formatMessage(messages.avatar_picker_back_btn_label)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "back-button",
+      iconAfter: jsx(ArrowLeftIcon, {
+        label: ""
+      }),
+      onClick: onGoBack
+    }), jsx("h2", {
+      className: "description"
+    }, predefinedAvatarsText || jsx(FormattedMessage, messages.default_avatars))), jsx("div", {
+      role: "radiogroup",
+      "aria-label": selectAvatarLabel || intl.formatMessage(messages.select_an_avatar)
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: "body"
+    }, cards))
+  );
 };

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

@@ -1,10 +1,16 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { visuallyHiddenRadioStyles, selectedShadow, focusedShadow, avatarImageStyles } from '../styles';
+
+// 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
 export const largeAvatarImageStyles = css(avatarImageStyles, {
   width: '72px',
   height: '72px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const predefinedAvatarViewWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.body': {
     display: 'flex',
     flexFlow: 'row wrap',
@@ -14,26 +20,33 @@ export const predefinedAvatarViewWrapperStyles = css({
     padding: `${"var(--ds-space-100, 8px)"} 0 0`,
     margin: 0
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   input: visuallyHiddenRadioStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   'input:checked + img': selectedShadow,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   'input:focus + img': focusedShadow,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   label: {
     paddingRight: "var(--ds-space-050, 4px)",
     paddingLeft: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-100, 8px)",
     display: 'inline-flex'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.header': {
     display: 'flex',
     alignItems: 'center',
     paddingTop: "var(--ds-space-050, 4px)",
     paddingBottom: "var(--ds-space-100, 8px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.description': {
       paddingLeft: "var(--ds-space-100, 8px)",
       margin: 0,
       fontSize: '14px',
       fontWeight: 400
     },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     '.back-button': {
       width: '32px',
       height: '32px',

package/dist/es2019/styles.js

@@ -1,9 +1,14 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { B200, B100 } from '@atlaskit/theme/colors';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const avatarImageStyles = css({
   borderRadius: "var(--ds-border-radius-100, 3px)",
   cursor: 'pointer'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const visuallyHiddenRadioStyles = css({
   width: '1px',
   height: '1px',
@@ -14,9 +19,13 @@ export const visuallyHiddenRadioStyles = css({
   overflow: 'hidden',
   whiteSpace: 'nowrap'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const selectedShadow = css({
   boxShadow: `0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-selected, ${B200})`}`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const focusedShadow = css({
   boxShadow: `0px 0px 0px 1px ${"var(--ds-border-inverse, white)"}, 0px 0px 0px 3px ${`var(--ds-border-focused, ${B100})`}`
 });

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
@@ -36,7 +37,9 @@ export var AvatarList = function AvatarList(_ref) {
   });
   return jsx("div", {
     role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(messages.select_an_avatar),
+    "aria-label": selectAvatarLabel || intl.formatMessage(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: avatarListWrapperStyles
   }, cards);
 };

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

@@ -1,11 +1,17 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { avatarImageStyles } from '../styles';
+
+// 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
 export var smallAvatarImageStyles = css(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
 export var avatarListWrapperStyles = 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/esm/avatar-picker-dialog/SubmitErrorDialog.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useRef, useEffect } from 'react';
 import { R400 } from '@atlaskit/theme/colors';
@@ -15,17 +16,20 @@ export var SubmitErrorDialog = function SubmitErrorDialog() {
       flagContainerRef.current.children[0].focus();
     }
   }, []);
-  return jsx("div", {
-    css: avatarPickerErrorStyles,
-    ref: flagContainerRef
-  }, jsx(Flag, {
-    appearance: "error",
-    icon: jsx(ErrorIcon, {
-      label: "Error",
-      secondaryColor: "var(--ds-background-danger-bold, ".concat(R400, ")")
-    }),
-    id: "avatar-picker-error",
-    key: "error",
-    title: intl.formatMessage(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
+    jsx("div", {
+      css: avatarPickerErrorStyles,
+      ref: flagContainerRef
+    }, jsx(Flag, {
+      appearance: "error",
+      icon: jsx(ErrorIcon, {
+        label: "Error",
+        secondaryColor: "var(--ds-background-danger-bold, ".concat(R400, ")")
+      }),
+      id: "avatar-picker-error",
+      key: "error",
+      title: intl.formatMessage(messages.or_select_default_avatars)
+    }))
+  );
 };

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

@@ -12,6 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import React, { Fragment } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import ModalDialog, { ModalFooter, ModalBody, useModal } from '@atlaskit/modal-dialog';
@@ -47,11 +48,14 @@ export var fixedCrop = {
 var HeaderContent = function HeaderContent(_ref) {
   var title = _ref.title;
   var modal = useModal();
-  return jsx("h1", {
-    css: modalHeaderStyles,
-    "data-test-id": "modal-header",
-    id: modal.titleId
-  }, title || jsx(FormattedMessage, 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
+    jsx("h1", {
+      css: modalHeaderStyles,
+      "data-test-id": "modal-header",
+      id: modal.titleId
+    }, title || jsx(FormattedMessage, messages.upload_an_avatar))
+  );
 };
 var altTextFieldStyles = xcss({
   paddingTop: 'space.100',

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

@@ -1,10 +1,17 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var avatarPickerErrorStyles = 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
 export var formStyles = 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
 export var avatarPickerViewWrapperStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -12,8 +19,11 @@ export var avatarPickerViewWrapperStyles = css({
   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
 export var modalHeaderStyles = 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/esm/image-cropper/index.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -7,8 +8,6 @@ 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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -16,28 +15,10 @@ import { injectIntl } from 'react-intl-next';
 import { messages, MediaImage } from '@atlaskit/media-ui';
 import { isImageRemote } from './isImageRemote';
 import { CONTAINER_PADDING } from './styles';
-import { N50A } from '@atlaskit/theme/colors';
-import { css } from '@emotion/react';
+import { IconButton } from '@atlaskit/button/new';
 import { Box, xcss } from '@atlaskit/primitives';
 import { ERROR } from '../avatar-picker-dialog';
 import { CONTAINER_INNER_SIZE } from '../avatar-picker-dialog/layout-const';
-var removeImageButtonStyles = 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(N50A, ")")
-  }
-});
 var removeImageContainerStyles = xcss({
   position: 'absolute',
   right: 'space.050',
@@ -54,9 +35,13 @@ var maskShadow = {
 };
 var maskStyles = 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(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(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(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(CONTAINER_PADDING, "px"),
   opacity: 'opacity.disabled'
 });
@@ -127,16 +112,23 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
         onImageLoaded = _this$props3.onImageLoaded,
         formatMessage = _this$props3.intl.formatMessage;
       var containerDimensions = 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 = 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;
@@ -145,13 +137,13 @@ export var ImageCropper = /*#__PURE__*/function (_Component) {
       } catch (e) {
         return null;
       }
-      return jsx(Box, {
+      return /*#__PURE__*/React.createElement(Box, {
         id: "container",
         xcss: [containerStyles, containerDimensions]
-      }, jsx(Box, {
+      }, /*#__PURE__*/React.createElement(Box, {
         id: "image-container",
         xcss: [imageContainerStyles, imageContainerDynamicStyles]
-      }, jsx(MediaImage, {
+      }, /*#__PURE__*/React.createElement(MediaImage, {
         crossOrigin: crossOrigin,
         dataURI: imageSource,
         crop: false,
@@ -160,30 +152,36 @@ export var 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
-      jsx(Box, {
+      React.createElement(Box, {
         xcss: [maskStyles, circularMaskStyles],
         style: maskShadow
       }) :
+      /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      jsx(Box, {
+      React.createElement(Box, {
         xcss: [maskStyles, rectMaskStyles],
         style: maskShadow
-      }), jsx(Box, {
+      }), /*#__PURE__*/React.createElement(Box, {
         id: "drag-overlay",
         xcss: dragOverlayStyles,
         onMouseDown: this.onDragStarted
-      }), jsx(Box, {
+      }), /*#__PURE__*/React.createElement(Box, {
         id: "remove-image-container",
         xcss: removeImageContainerStyles
-      }, jsx("button", {
+      }, /*#__PURE__*/React.createElement(IconButton, {
         id: "remove-image-button",
-        css: removeImageButtonStyles,
-        onClick: onRemoveImage
-      }, jsx(CrossIcon, {
-        size: "small",
-        label: formatMessage(messages.remove_image)
-      }))));
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
+            size: "small"
+          }));
+        },
+        onClick: onRemoveImage,
+        label: formatMessage(messages.remove_image),
+        spacing: "compact",
+        appearance: "subtle"
+      })));
     }
   }]);
   return ImageCropper;

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["showBorder", "isDroppingFile", "children"];
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { dragZoneStyles } from './styles';
 export var DragZone = function DragZone(_ref) {
@@ -10,6 +11,7 @@ export var DragZone = function DragZone(_ref) {
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
   return jsx("div", _extends({
+    // 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: dragZoneStyles({
       showBorder: showBorder,
       isDroppingFile: isDroppingFile

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

@@ -12,6 +12,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
 import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
@@ -311,23 +312,27 @@ export var ImageNavigator = /*#__PURE__*/function (_Component) {
       var _this$props3 = this.props,
         errorMessage = _this$props3.errorMessage,
         isLoading = _this$props3.isLoading;
-      return jsx("div", {
-        id: "image-uploader",
-        css: imageUploaderStyles
-      }, this.renderDragZone(), isLoading ? null : jsx("div", null, jsx("p", {
-        id: "padded-break",
-        css: paddedBreakStyles
-      }, jsx(FormattedMessage, errorMessage ? messages.try_again : messages.or)), jsx(Button, {
-        onClick: this.onUploadButtonClick,
-        isDisabled: isLoading,
-        testId: "upload-button"
-      }, jsx(FormattedMessage, messages.upload_photo), jsx("input", {
-        css: fileInputStyles,
-        type: "file",
-        id: "image-input",
-        onChange: this.onFileChange,
-        accept: 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
+        jsx("div", {
+          id: "image-uploader",
+          css: imageUploaderStyles
+        }, this.renderDragZone(), isLoading ? null : jsx("div", null, jsx("p", {
+          id: "padded-break",
+          css: paddedBreakStyles
+        }, jsx(FormattedMessage, errorMessage ? messages.try_again : messages.or)), jsx(Button, {
+          onClick: this.onUploadButtonClick,
+          isDisabled: isLoading,
+          testId: "upload-button"
+        }, jsx(FormattedMessage, messages.upload_photo), 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: fileInputStyles,
+          type: "file",
+          id: "image-input",
+          onChange: this.onFileChange,
+          accept: ACCEPT.join(',')
+        }))))
+      );
     }
   }, {
     key: "renderImageCropper",
@@ -383,6 +388,8 @@ export var 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 jsx("div", {
         css: containerStyles
       }, content);

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

@@ -7,6 +7,7 @@ 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 _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
 import { jsx } from '@emotion/react';
 import { Component } from 'react';
 import FieldRange from '@atlaskit/range';
@@ -30,32 +31,35 @@ export var Slider = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         value = _this$props.value,
         onChange = _this$props.onChange;
-      return jsx("div", {
-        css: sliderWrapperStyles
-      }, jsx(Button
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "zoom_button zoom_button_small",
-        iconAfter: jsx(ScaleSmallIcon, {
-          label: "scale-small-icon"
-        }),
-        onClick: function onClick() {
-          return onChange(0);
-        }
-      }), jsx(FieldRange, {
-        value: value,
-        onChange: onChange
-      }), jsx(Button
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      , {
-        className: "zoom_button zoom_button_large",
-        iconAfter: jsx(ScaleLargeIcon, {
-          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
+        jsx("div", {
+          css: sliderWrapperStyles
+        }, jsx(Button
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "zoom_button zoom_button_small",
+          iconAfter: jsx(ScaleSmallIcon, {
+            label: "scale-small-icon"
+          }),
+          onClick: function onClick() {
+            return onChange(0);
+          }
+        }), jsx(FieldRange, {
+          value: value,
+          onChange: onChange
+        }), jsx(Button
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
+          className: "zoom_button zoom_button_large",
+          iconAfter: jsx(ScaleLargeIcon, {
+            label: "scale-large-icon"
+          }),
+          onClick: function onClick() {
+            return onChange(100);
+          }
+        }))
+      );
     }
   }]);
   return Slider;