@atlaskit/media-avatar-picker 24.6.5 → 24.6.6

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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';
@@ -280,23 +281,27 @@ export class ImageNavigator extends Component {
       errorMessage,
       isLoading
     } = this.props;
-    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(',')
+      }))))
+    );
   }
   renderImageCropper(dataURI) {
     const {
@@ -360,6 +365,8 @@ export class ImageNavigator extends Component {
       dataURI
     } = this;
     const 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/es2019/image-navigator/slider.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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';
@@ -16,28 +17,31 @@ export class Slider extends Component {
       value,
       onChange
     } = this.props;
-    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: () => 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: () => 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: () => 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: () => onChange(100)
+      }))
+    );
   }
 }
 _defineProperty(Slider, "defaultProps", defaultProps);

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

@@ -1,38 +1,52 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 import { N200 } from '@atlaskit/theme/colors';
 import { checkeredBg } from './images';
 import { AVATAR_DIALOG_WIDTH } from '../avatar-picker-dialog/layout-const';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const imageBgStyles = 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('${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
 export const containerStyles = 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
 export const sliderContainerStyles = 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
 export const fileInputStyles = 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
 export const imageUploaderStyles = css({
   display: 'flex',
   flexDirection: 'column',
@@ -55,6 +69,7 @@ const droppingAnimation = css({
 const getBorder = showBorder => `${showBorder ? `2px dashed ${"var(--ds-border, #d0d6d0)"}` : 'none'}`;
 const getDroppingAnimation = isDroppingFile => isDroppingFile ? 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
 }) : '';
 export const dragZoneStyles = props => css({
@@ -70,6 +85,7 @@ export const dragZoneStyles = props => css({
   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',
@@ -79,8 +95,12 @@ export const dragZoneStyles = props => css({
     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
 export const dragZoneImageStyles = css({
   width: '100px'
 });
@@ -88,7 +108,11 @@ const getWidth = isFullSize => `${isFullSize ? `width: calc(${AVATAR_DIALOG_WIDT
 export const dragZoneTextStyles = props => css({
   textAlign: 'center',
   color: `var(--ds-text-subtlest, ${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
 export const selectionBlockerStyles = css({
   position: 'fixed',
   left: 0,
@@ -98,15 +122,21 @@ export const selectionBlockerStyles = 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
 export const paddedBreakStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
   marginTop: `${"var(--ds-space-100, 10px)"} !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
 export const sliderWrapperStyles = 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/es2019/image-placer/containerWrapper.js

@@ -1,9 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { checkeredBg } from './styles';
 const containerWrapperStyles = 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('${checkeredBg}')`,
   position: `relative`,
   cursor: `move`,
@@ -18,7 +20,9 @@ export const ContainerWrapper = ({
   ...props
 }) => {
   const containerWrapperDimensions = xcss({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: `${width !== undefined ? width + margin * 2 : 0}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${height !== undefined ? height + margin * 2 : 0}px`
   });
   return jsx(Box, _extends({

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

@@ -1,8 +1,11 @@
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { imagePlacerErrorWrapperStyles } from './styles';
 export const ImagePlacerErrorWrapper = ({
   children
-}) => jsx("div", {
+}) =>
+// 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: imagePlacerErrorWrapperStyles
 }, children);

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

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { imageWrapperStyles } from './styles';
 export const ImageWrapper = ({
@@ -8,7 +9,9 @@ export const ImageWrapper = ({
   width,
   height,
   ...props
-}) => jsx("img", _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
+jsx("img", _extends({
   css: imageWrapperStyles({
     x,
     y,

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import React from 'react';
 import { Rectangle, Vector2, Bounds, dataURItoFile, getFileInfo, getFileInfoFromSrc } from '@atlaskit/media-ui';
@@ -468,31 +469,34 @@ export class ImagePlacer extends React.Component {
       imageBounds
     } = this;
     const imgSrc = typeof src === 'string' ? src : undefined;
-    return jsx("div", {
-      css: imagePlacerWrapperStyles({
-        backgroundColor
-      })
-    }, jsx(ImagePlacerContainer, {
-      width: containerWidth,
-      height: containerHeight,
-      margin: margin,
-      onDragStart: this.onDragStart,
-      onDragMove: this.onDragMove,
-      onWheel: this.onWheel
-    }, errorMessage ? jsx(ImagePlacerErrorWrapper, null, onRenderError ? onRenderError(errorMessage) : errorMessage) : jsx("div", null, jsx(ImagePlacerImage, {
-      src: imgSrc,
-      x: imageBounds.x,
-      y: imageBounds.y,
-      width: imageBounds.width,
-      height: imageBounds.height,
-      onLoad: this.onImageLoad,
-      onError: this.onImageError
-    }), jsx(Margin, {
-      width: containerWidth,
-      height: containerHeight,
-      circular: isCircular,
-      size: margin
-    }))));
+    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: imagePlacerWrapperStyles({
+          backgroundColor
+        })
+      }, jsx(ImagePlacerContainer, {
+        width: containerWidth,
+        height: containerHeight,
+        margin: margin,
+        onDragStart: this.onDragStart,
+        onDragMove: this.onDragMove,
+        onWheel: this.onWheel
+      }, errorMessage ? jsx(ImagePlacerErrorWrapper, null, onRenderError ? onRenderError(errorMessage) : errorMessage) : jsx("div", null, jsx(ImagePlacerImage, {
+        src: imgSrc,
+        x: imageBounds.x,
+        y: imageBounds.y,
+        width: imageBounds.width,
+        height: imageBounds.height,
+        onLoad: this.onImageLoad,
+        onError: this.onImageError
+      }), jsx(Margin, {
+        width: containerWidth,
+        height: containerHeight,
+        circular: isCircular,
+        size: margin
+      }))))
+    );
   }
 }
 /* image element used to load */

package/dist/es2019/image-placer/margin.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 React from 'react';
 import { marginWrapperSquareStyles, marginWrapperCircleStyles } from './styles';
@@ -11,6 +12,8 @@ export class Margin extends React.Component {
       circular
     } = this.props;
     const [id, styles] = circular ? ['marginWrapperCircle', marginWrapperCircleStyles] : ['marginWrapperSquare', marginWrapperSquareStyles];
+
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     return jsx("div", {
       css: styles({
         width,

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

@@ -1,10 +1,14 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 export const checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
 export const imagePlacerWrapperStyles = props => css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   backgroundColor: props.backgroundColor,
   display: 'inline-block'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const imagePlacerErrorWrapperStyles = css({
   backgroundColor: `var(--ds-background-danger-bold, ${R500})`,
   color: "var(--ds-text-inverse, white)",
@@ -22,10 +26,15 @@ export const imageWrapperStyles = ({
   height,
   transform
 }) => css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   left: `${x}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   top: `${y}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: `${width}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: `${height}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   transform: transform,
   position: 'absolute',
   transition: `margin-left ${EASING}s ease-out, margin-top ${EASING}s ease-out, left ${EASING}s ease-out, top ${EASING}s ease-out, width ${EASING}s ease-out, height ${EASING}s ease-out`,
@@ -42,8 +51,11 @@ export const marginWrapperSquareStyles = ({
   top: 0,
   borderStyle: 'solid',
   borderColor: "var(--ds-surface-overlay, rgba(255, 255, 255))",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderWidth: `${size}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: `${width}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: `${height}px`,
   opacity: "var(--ds-opacity-disabled, 0.3)"
 });
@@ -56,15 +68,22 @@ export const marginWrapperCircleStyles = ({
   overflow: 'hidden',
   left: '0px',
   top: '0px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   width: `${width + size * 2}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: `${height + size * 2}px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&:after': {
     content: "''",
     position: 'absolute',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     left: `${size}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     top: `${size}px`,
     borderRadius: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: `${width}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${height}px`,
     boxShadow: `0px 0px 0px ${Math.max(width, height)}px ${"var(--ds-surface-overlay, rgba(255, 255, 255))"}`,
     opacity: "var(--ds-opacity-disabled, 0.3)"

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',