@atlaskit/media-avatar-picker 24.6.5 → 24.6.6

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

@@ -26,7 +26,7 @@ var _imageProcessor = require("./imageProcessor");
 var _constraints = require("./constraints");
 var _imagePlacerErrorWrapper = require("./imagePlacerErrorWrapper");
 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
 /*
 "container(Width|Height)" is the outputed size of the final image plus "margin"s.
 "visibleBounds" is the exact output size of the final image
@@ -508,31 +508,34 @@ var ImagePlacer = exports.ImagePlacer = /*#__PURE__*/function (_React$Component)
         src = _this$state6.src;
       var imageBounds = this.imageBounds;
       var imgSrc = typeof src === 'string' ? src : undefined;
-      return (0, _react.jsx)("div", {
-        css: (0, _styles.imagePlacerWrapperStyles)({
-          backgroundColor: backgroundColor
-        })
-      }, (0, _react.jsx)(_container.ImagePlacerContainer, {
-        width: containerWidth,
-        height: containerHeight,
-        margin: margin,
-        onDragStart: this.onDragStart,
-        onDragMove: this.onDragMove,
-        onWheel: this.onWheel
-      }, errorMessage ? (0, _react.jsx)(_imagePlacerErrorWrapper.ImagePlacerErrorWrapper, null, onRenderError ? onRenderError(errorMessage) : errorMessage) : (0, _react.jsx)("div", null, (0, _react.jsx)(_image.ImagePlacerImage, {
-        src: imgSrc,
-        x: imageBounds.x,
-        y: imageBounds.y,
-        width: imageBounds.width,
-        height: imageBounds.height,
-        onLoad: this.onImageLoad,
-        onError: this.onImageError
-      }), (0, _react.jsx)(_margin.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
+        (0, _react.jsx)("div", {
+          css: (0, _styles.imagePlacerWrapperStyles)({
+            backgroundColor: backgroundColor
+          })
+        }, (0, _react.jsx)(_container.ImagePlacerContainer, {
+          width: containerWidth,
+          height: containerHeight,
+          margin: margin,
+          onDragStart: this.onDragStart,
+          onDragMove: this.onDragMove,
+          onWheel: this.onWheel
+        }, errorMessage ? (0, _react.jsx)(_imagePlacerErrorWrapper.ImagePlacerErrorWrapper, null, onRenderError ? onRenderError(errorMessage) : errorMessage) : (0, _react.jsx)("div", null, (0, _react.jsx)(_image.ImagePlacerImage, {
+          src: imgSrc,
+          x: imageBounds.x,
+          y: imageBounds.y,
+          width: imageBounds.width,
+          height: imageBounds.height,
+          onLoad: this.onImageLoad,
+          onError: this.onImageError
+        }), (0, _react.jsx)(_margin.Margin, {
+          width: containerWidth,
+          height: containerHeight,
+          circular: isCircular,
+          size: margin
+        }))))
+      );
     }
   }]);
   return ImagePlacer;

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

@@ -15,7 +15,7 @@ var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 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 Margin = exports.Margin = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Margin, _React$Component);
   var _super = _createSuper(Margin);
@@ -35,6 +35,8 @@ var Margin = exports.Margin = /*#__PURE__*/function (_React$Component) {
         _ref2 = (0, _slicedToArray2.default)(_ref, 2),
         id = _ref2[0],
         styles = _ref2[1];
+
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       return (0, _react.jsx)("div", {
         css: styles({
           width: width,

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

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.marginWrapperSquareStyles = exports.marginWrapperCircleStyles = exports.imageWrapperStyles = exports.imagePlacerWrapperStyles = exports.imagePlacerErrorWrapperStyles = exports.checkeredBg = exports.EASING = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var checkeredBg = exports.checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
 var imagePlacerWrapperStyles = exports.imagePlacerWrapperStyles = function imagePlacerWrapperStyles(props) {
   return (0, _react.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
 var imagePlacerErrorWrapperStyles = exports.imagePlacerErrorWrapperStyles = (0, _react.css)({
   backgroundColor: "var(--ds-background-danger-bold, ".concat(_colors.R500, ")"),
   color: "var(--ds-text-inverse, white)",
@@ -30,10 +35,15 @@ var imageWrapperStyles = exports.imageWrapperStyles = function imageWrapperStyle
     height = _ref.height,
     transform = _ref.transform;
   return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     left: "".concat(x, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     top: "".concat(y, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(width, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(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 ".concat(EASING, "s ease-out, margin-top ").concat(EASING, "s ease-out, left ").concat(EASING, "s ease-out, top ").concat(EASING, "s ease-out, width ").concat(EASING, "s ease-out, height ").concat(EASING, "s ease-out"),
@@ -51,8 +61,11 @@ var marginWrapperSquareStyles = exports.marginWrapperSquareStyles = function mar
     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: "".concat(size, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(width, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(height, "px"),
     opacity: "var(--ds-opacity-disabled, 0.3)"
   });
@@ -66,15 +79,22 @@ var marginWrapperCircleStyles = exports.marginWrapperCircleStyles = function mar
     overflow: 'hidden',
     left: '0px',
     top: '0px',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     width: "".concat(width + size * 2, "px"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: "".concat(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: "".concat(size, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       top: "".concat(size, "px"),
       borderRadius: '100%',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       width: "".concat(width, "px"),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: "".concat(height, "px"),
       boxShadow: "0px 0px 0px ".concat(Math.max(width, height), "px ", "var(--ds-surface-overlay, rgba(255, 255, 255))"),
       opacity: "var(--ds-opacity-disabled, 0.3)"

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

@@ -13,6 +13,7 @@ var _styles = require("./styles");
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var PredefinedAvatarList = exports.PredefinedAvatarList = function PredefinedAvatarList(_ref) {
   var _ref$avatars = _ref.avatars,
@@ -23,24 +24,27 @@ var PredefinedAvatarList = exports.PredefinedAvatarList = function PredefinedAva
     selectAvatarLabel = _ref.selectAvatarLabel,
     showMoreAvatarsButtonLabel = _ref.showMoreAvatarsButtonLabel;
   var intl = (0, _reactIntlNext.useIntl)();
-  return (0, _react.jsx)("div", {
-    css: _styles.predefinedAvatarsWrapperStyles,
-    id: "predefined-avatar-wrapper"
-  }, (0, _react.jsx)(_avatarList.AvatarList, {
-    avatars: avatars,
-    selectedAvatar: selectedAvatar,
-    onItemClick: onAvatarSelected,
-    selectAvatarLabel: selectAvatarLabel
-  }), (0, _react.jsx)(_standardButton.default, {
-    "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(_mediaUi.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: (0, _react.jsx)(_more.default, {
-      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
+    (0, _react.jsx)("div", {
+      css: _styles.predefinedAvatarsWrapperStyles,
+      id: "predefined-avatar-wrapper"
+    }, (0, _react.jsx)(_avatarList.AvatarList, {
+      avatars: avatars,
+      selectedAvatar: selectedAvatar,
+      onItemClick: onAvatarSelected,
+      selectAvatarLabel: selectAvatarLabel
+    }), (0, _react.jsx)(_standardButton.default, {
+      "aria-label": showMoreAvatarsButtonLabel || intl.formatMessage(_mediaUi.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: (0, _react.jsx)(_more.default, {
+        label: "",
+        size: "large"
+      }),
+      onClick: onShowMore
+    }))
+  );
 };

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

@@ -8,6 +8,6 @@ exports.predefinedAvatarsWrapperStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("../styles");
-var _templateObject;
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+// 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
 var predefinedAvatarsWrapperStyles = exports.predefinedAvatarsWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: flex;\n\n\tinput {\n\t\t", "\n\t}\n\n\tinput:checked + img {\n\t\t", "\n\t}\n\n\tinput:focus + img {\n\t\t", "\n\t}\n\n\t.show-more-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tborder-radius: ", ";\n\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n"])), _styles.visuallyHiddenRadioStyles, _styles.selectedShadow, _styles.focusedShadow, "var(--ds-border-radius-circle, 50%)");

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

@@ -12,6 +12,7 @@ var _styles = require("./styles");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 /**@jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAvatarView(_ref) {
   var _ref$avatars = _ref.avatars,
@@ -46,27 +47,30 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = function PredefinedAva
       alt: ""
     }));
   });
-  return (0, _react.jsx)("div", {
-    css: _styles.predefinedAvatarViewWrapperStyles,
-    id: "predefined-avatar-view-wrapper"
-  }, (0, _react.jsx)("div", {
-    className: "header"
-  }, (0, _react.jsx)(_standardButton.default, {
-    "aria-label": intl.formatMessage(_mediaUi.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: (0, _react.jsx)(_arrowLeft.default, {
-      label: ""
-    }),
-    onClick: onGoBack
-  }), (0, _react.jsx)("h2", {
-    className: "description"
-  }, predefinedAvatarsText || (0, _react.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.default_avatars))), (0, _react.jsx)("div", {
-    role: "radiogroup",
-    "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.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
+    (0, _react.jsx)("div", {
+      css: _styles.predefinedAvatarViewWrapperStyles,
+      id: "predefined-avatar-view-wrapper"
+    }, (0, _react.jsx)("div", {
+      className: "header"
+    }, (0, _react.jsx)(_standardButton.default, {
+      "aria-label": intl.formatMessage(_mediaUi.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: (0, _react.jsx)(_arrowLeft.default, {
+        label: ""
+      }),
+      onClick: onGoBack
+    }), (0, _react.jsx)("h2", {
+      className: "description"
+    }, predefinedAvatarsText || (0, _react.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.default_avatars))), (0, _react.jsx)("div", {
+      role: "radiogroup",
+      "aria-label": selectAvatarLabel || intl.formatMessage(_mediaUi.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/cjs/predefined-avatar-view/styles.js

@@ -6,11 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.predefinedAvatarViewWrapperStyles = exports.largeAvatarImageStyles = 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 largeAvatarImageStyles = exports.largeAvatarImageStyles = (0, _react.css)(_styles.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
 var predefinedAvatarViewWrapperStyles = exports.predefinedAvatarViewWrapperStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '.body': {
     display: 'flex',
     flexFlow: 'row wrap',
@@ -20,26 +26,33 @@ var predefinedAvatarViewWrapperStyles = exports.predefinedAvatarViewWrapperStyle
     padding: "var(--ds-space-100, 8px)".concat(" 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: _styles.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': _styles.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': _styles.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/cjs/styles.js

@@ -6,10 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.visuallyHiddenRadioStyles = exports.selectedShadow = exports.focusedShadow = exports.avatarImageStyles = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
+// 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 avatarImageStyles = exports.avatarImageStyles = (0, _react.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
 var visuallyHiddenRadioStyles = exports.visuallyHiddenRadioStyles = (0, _react.css)({
   width: '1px',
   height: '1px',
@@ -20,9 +25,13 @@ var visuallyHiddenRadioStyles = exports.visuallyHiddenRadioStyles = (0, _react.c
   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
 var selectedShadow = exports.selectedShadow = (0, _react.css)({
   boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"))
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 var focusedShadow = exports.focusedShadow = (0, _react.css)({
   boxShadow: "0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
 });

package/dist/es2019/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';
@@ -34,7 +35,9 @@ export const AvatarList = ({
   });
   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/es2019/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 const 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 const 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/es2019/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 const 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, ${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, ${R400})`
+      }),
+      id: "avatar-picker-error",
+      key: "error",
+      title: intl.formatMessage(messages.or_select_default_avatars)
+    }))
+  );
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @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';
@@ -38,11 +39,14 @@ const HeaderContent = ({
   title
 }) => {
   const 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))
+  );
 };
 const altTextFieldStyles = xcss({
   paddingTop: 'space.100',

package/dist/es2019/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 const avatarPickerErrorStyles = css({
   margin: `0 ${"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 const 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 const avatarPickerViewWrapperStyles = css({
   display: 'flex',
   justifyContent: 'center',
@@ -12,8 +19,11 @@ export const 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 const 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/es2019/image-cropper/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 { Component } from 'react';
@@ -9,6 +10,7 @@ import { messages, MediaImage } from '@atlaskit/media-ui';
 import { isImageRemote } from './isImageRemote';
 import { CONTAINER_PADDING } from './styles';
 import { N50A } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { Box, xcss } from '@atlaskit/primitives';
 import { ERROR } from '../avatar-picker-dialog';
@@ -21,6 +23,7 @@ const removeImageButtonStyles = css({
   border: 'none',
   cursor: 'pointer',
   padding: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   svg: {
     position: 'absolute',
     top: "var(--ds-space-050, 4px)",
@@ -46,9 +49,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 +123,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;

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