@atlaskit/media-avatar-picker 24.6.5 → 24.6.7

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

@@ -1,6 +1,5 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
 import React from 'react';
 import { Component } from 'react';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
@@ -8,28 +7,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';
-const 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, ${N50A})`
-  }
-});
 const removeImageContainerStyles = xcss({
   position: 'absolute',
   right: 'space.050',
@@ -46,9 +27,13 @@ const maskShadow = {
 };
 const 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: `${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: `${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: `${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: `${CONTAINER_PADDING}px`,
   opacity: 'opacity.disabled'
 });
@@ -116,16 +101,23 @@ export class ImageCropper extends Component {
       }
     } = this.props;
     const containerDimensions = xcss({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: `${containerSize}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: `${containerSize}px`
     });
     const width = imageWidth ? `${imageWidth}px` : 'auto';
     const height = imageHeight ? `${imageHeight}px` : 'auto';
     const imageContainerDynamicStyles = xcss({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       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: `${top}px`,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       left: `${left}px`
     });
     let crossOrigin;
@@ -134,13 +126,13 @@ export class ImageCropper extends 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,
@@ -149,30 +141,34 @@ export class ImageCropper extends 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: iconProps => /*#__PURE__*/React.createElement(CrossIcon, _extends({}, iconProps, {
+        size: "small"
+      })),
+      onClick: onRemoveImage,
+      label: formatMessage(messages.remove_image),
+      spacing: "compact",
+      appearance: "subtle"
+    })));
   }
 }
 _defineProperty(ImageCropper, "defaultProps", {

package/dist/es2019/image-navigator/dragZone.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 { dragZoneStyles } from './styles';
 export const DragZone = ({
@@ -8,6 +9,7 @@ export const DragZone = ({
   children,
   ...props
 }) => 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/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)"