@atlaskit/media-avatar-picker 24.3.21 → 24.3.23

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-avatar-picker
 
+## 24.3.23
+
+### Patch Changes
+
+- [#78361](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78361) [`195d62082a3a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/195d62082a3a) - CXP-3050 Enforced design tokens and primitives
+
+## 24.3.22
+
+### Patch Changes
+
+- [#71706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/71706) [`9f5b710e6a66`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f5b710e6a66) - [ux] fix dialog header style
+
 ## 24.3.21
 
 ### Patch Changes

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

@@ -7,9 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.modalHeaderStyles = exports.formStyles = exports.croppingWrapperStyles = exports.avatarPickerViewWrapperStyles = exports.avatarPickerErrorStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 var avatarPickerErrorStyles = exports.avatarPickerErrorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 var formStyles = exports.formStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
 var avatarPickerViewWrapperStyles = exports.avatarPickerViewWrapperStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  text-align: center;\n  min-height: 339px;\n"])));
-var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", ";\n  font-weight: 500;\n  font-size: 20px;\n"])), "var(--ds-space-200, 16px)");
-var croppingWrapperStyles = exports.croppingWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));
+var modalHeaderStyles = exports.modalHeaderStyles = (0, _react.css)({
+  // Using `&` twice to increase specificity
+  '&&': {
+    margin: "var(--ds-space-200, 16px)",
+    fontWeight: 500,
+    fontSize: '20px'
+  }
+});
+var croppingWrapperStyles = exports.croppingWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  user-select: none;\n\n  * {\n    user-select: none;\n  }\n"])));

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

@@ -20,12 +20,69 @@ var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _isImageRemote = require("./isImageRemote");
 var _styles = require("./styles");
+var _colors = require("@atlaskit/theme/colors");
+var _primitives = require("@atlaskit/primitives");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var removeImageButtonStyles = (0, _react.css)({
+  borderRadius: "var(--ds-border-radius-050, 3px)",
+  backgroundColor: 'transparent',
+  width: '24px',
+  height: '24px',
+  border: 'none',
+  cursor: 'pointer',
+  padding: 0,
+  svg: {
+    position: 'absolute',
+    top: "var(--ds-space-050, 4px)",
+    left: "var(--ds-space-050, 4px)"
+  },
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N50A, ")")
+  }
+});
+var removeImageContainerStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  right: 'space.050',
+  top: 'space.050'
+});
+var dragOverlayStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  cursor: 'move'
+});
+var maskShadow = {
+  boxShadow: "0 0 0 100px ".concat("var(--ds-surface-overlay, rgba(255, 255, 255))")
+};
+var maskStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  top: "".concat(_styles.CONTAINER_PADDING, "px"),
+  bottom: "".concat(_styles.CONTAINER_PADDING, "px"),
+  left: "".concat(_styles.CONTAINER_PADDING, "px"),
+  right: "".concat(_styles.CONTAINER_PADDING, "px"),
+  opacity: 'opacity.disabled'
+});
+var rectMaskStyles = (0, _primitives.xcss)({
+  borderRadius: 'border.radius.100'
+});
+var circularMaskStyles = (0, _primitives.xcss)({
+  borderRadius: 'border.radius.circle'
+});
+var containerStyles = (0, _primitives.xcss)({
+  position: 'relative',
+  overflow: 'hidden',
+  borderRadius: 'border.radius.100'
+});
+var imageContainerStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  userSelect: 'none',
+  borderRadius: 'border.radius.100'
+});
 var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ImageCropper, _Component);
   var _super = _createSuper(ImageCropper);
@@ -76,33 +133,31 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onRemoveImage = _this$props3.onRemoveImage,
         onImageLoaded = _this$props3.onImageLoaded,
         formatMessage = _this$props3.intl.formatMessage;
-      var containerStyle = {
+      var containerDimensions = (0, _primitives.xcss)({
         width: "".concat(containerSize, "px"),
         height: "".concat(containerSize, "px")
-      };
+      });
       var width = imageWidth ? "".concat(imageWidth, "px") : 'auto';
       var height = imageHeight ? "".concat(imageHeight, "px") : 'auto';
-      var imageContainerStyle = {
+      var imageContainerDynamicStyles = (0, _primitives.xcss)({
         width: width,
         height: height,
         display: width === 'auto' ? 'none' : 'block',
         top: "".concat(top, "px"),
         left: "".concat(left, "px")
-      };
+      });
       var crossOrigin;
       try {
         crossOrigin = (0, _isImageRemote.isImageRemote)(imageSource) ? 'anonymous' : undefined;
       } catch (e) {
         return null;
       }
-      return (0, _react.jsx)("div", {
+      return (0, _react.jsx)(_primitives.Box, {
         id: "container",
-        css: _styles.containerStyles,
-        style: containerStyle
-      }, (0, _react.jsx)("div", {
+        xcss: [containerStyles, containerDimensions]
+      }, (0, _react.jsx)(_primitives.Box, {
         id: "image-container",
-        css: _styles.imageContainerStyles,
-        style: imageContainerStyle
+        xcss: [imageContainerStyles, imageContainerDynamicStyles]
       }, (0, _react.jsx)(_mediaUi.MediaImage, {
         crossOrigin: crossOrigin,
         dataURI: imageSource,
@@ -111,20 +166,22 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         previewOrientation: "from-image",
         onImageLoad: onImageLoaded,
         onImageError: this.onImageError
-      })), isCircularMask ? (0, _react.jsx)("div", {
-        css: _styles.circularMaskStyles
-      }) : (0, _react.jsx)("div", {
-        css: _styles.rectMaskStyles
-      }), (0, _react.jsx)("div", {
+      })), isCircularMask ? (0, _react.jsx)(_primitives.Box, {
+        xcss: [maskStyles, circularMaskStyles],
+        style: maskShadow
+      }) : (0, _react.jsx)(_primitives.Box, {
+        xcss: [maskStyles, rectMaskStyles],
+        style: maskShadow
+      }), (0, _react.jsx)(_primitives.Box, {
         id: "drag-overlay",
-        css: _styles.dragOverlayStyles,
+        xcss: dragOverlayStyles,
         onMouseDown: this.onDragStarted
-      }), (0, _react.jsx)("div", {
+      }), (0, _react.jsx)(_primitives.Box, {
         id: "remove-image-container",
-        css: _styles.removeImageContainerStyles
+        xcss: removeImageContainerStyles
       }, (0, _react.jsx)("button", {
         id: "remove-image-button",
-        css: _styles.removeImageButtonStyles,
+        css: removeImageButtonStyles,
         onClick: onRemoveImage
       }, (0, _react.jsx)(_cross.default, {
         size: "small",

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

@@ -1,26 +1,7 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeImageContainerStyles = exports.removeImageButtonStyles = exports.rectMaskStyles = exports.imageContainerStyles = exports.dragOverlayStyles = exports.containerStyles = exports.circularMaskStyles = exports.CONTAINER_PADDING = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-// Using module augmentation to add crossOrigin attribute as it does not exist yet, PR has been opened in
-// DefinitelyTyped for it
-
-var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
-var imageContainerStyles = exports.imageContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  /* Is needed so image is not selected, when dragged */\n  -webkit-user-select: none; /* Chrome all / Safari all */\n  -moz-user-select: none; /* Firefox all */\n  -ms-user-select: none; /* IE 10+ */\n  user-select: none; /* Likely future */\n  border-radius: ", "px;\n"])), (0, _constants.borderRadius)());
-var CONTAINER_PADDING = exports.CONTAINER_PADDING = 28;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var maskStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px\n    ", ";\n  opacity: ", ";\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.5)");
-var rectMaskStyles = exports.rectMaskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, (0, _constants.borderRadius)());
-var circularMaskStyles = exports.circularMaskStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
-var dragOverlayStyles = exports.dragOverlayStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"])));
-var removeImageContainerStyles = exports.removeImageContainerStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
-var removeImageButtonStyles = exports.removeImageButtonStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", "px;\n  background-color: transparent;\n  width: 24px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n\n  svg {\n    position: absolute;\n    top: ", ";\n    left: ", ";\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-background-neutral-hovered, ".concat(_colors.N50A, ")"));
+exports.CONTAINER_PADDING = void 0;
+var CONTAINER_PADDING = exports.CONTAINER_PADDING = 28;

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

@@ -8,20 +8,29 @@ exports.ContainerWrapper = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
+var _primitives = require("@atlaskit/primitives");
 var _styles = require("./styles");
 var _excluded = ["width", "height", "margin", "children"];
 /**@jsx jsx */
+var containerWrapperStyles = (0, _primitives.xcss)({
+  background: "url('".concat(_styles.checkeredBg, "')"),
+  position: "relative",
+  cursor: "move",
+  userSelect: "none",
+  overflow: "hidden"
+});
 var ContainerWrapper = exports.ContainerWrapper = function ContainerWrapper(_ref) {
   var width = _ref.width,
     height = _ref.height,
     margin = _ref.margin,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    css: (0, _styles.containerWrapperStyles)({
-      width: width,
-      height: height,
-      margin: margin
-    })
+  var containerWrapperDimensions = (0, _primitives.xcss)({
+    width: "".concat(width !== undefined ? width + margin * 2 : 0, "px"),
+    height: "".concat(height !== undefined ? height + margin * 2 : 0, "px")
+  });
+  return (0, _react.jsx)(_primitives.Box, (0, _extends2.default)({
+    id: 'container-wrapper',
+    xcss: [containerWrapperStyles, containerWrapperDimensions]
   }, props), children);
 };

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

@@ -1,43 +1,82 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.marginWrapperSquareStyles = exports.marginWrapperCircleStyles = exports.imageWrapperStyles = exports.imagePlacerWrapperStyles = exports.imagePlacerErrorWrapperStyles = exports.containerWrapperStyles = exports.checkeredBg = exports.EASING = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+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");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  display: inline-block;\n"])), props.backgroundColor);
+  return (0, _react.css)({
+    backgroundColor: props.backgroundColor,
+    display: 'inline-block'
+  });
 };
-var imagePlacerErrorWrapperStyles = exports.imagePlacerErrorWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), "var(--ds-background-danger-bold, ".concat(_colors.R500, ")"), "var(--ds-text-inverse, white)");
-var containerWrapperStyles = exports.containerWrapperStyles = function containerWrapperStyles(_ref) {
-  var width = _ref.width,
+var imagePlacerErrorWrapperStyles = exports.imagePlacerErrorWrapperStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-danger-bold, ".concat(_colors.R500, ")"),
+  color: "var(--ds-text-inverse, white)",
+  width: '100%',
+  height: '100%',
+  textAlign: 'center',
+  paddingTop: '45%'
+});
+var EASING = exports.EASING = 0.15;
+var imageWrapperStyles = exports.imageWrapperStyles = function imageWrapperStyles(_ref) {
+  var x = _ref.x,
+    y = _ref.y,
+    width = _ref.width,
     height = _ref.height,
-    margin = _ref.margin;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  background: url('", "');\n  position: relative;\n  cursor: move;\n  user-select: none;\n  overflow: hidden;\n"])), width !== undefined ? width + margin * 2 : 0, height !== undefined ? height + margin * 2 : 0, checkeredBg);
+    transform = _ref.transform;
+  return (0, _react.css)({
+    left: "".concat(x, "px"),
+    top: "".concat(y, "px"),
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px"),
+    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"),
+    userSelect: 'none',
+    pointerEvents: 'none'
+  });
 };
-var EASING = exports.EASING = 0.15;
-var imageWrapperStyles = exports.imageWrapperStyles = function imageWrapperStyles(_ref2) {
-  var x = _ref2.x,
-    y = _ref2.y,
-    width = _ref2.width,
+var marginWrapperSquareStyles = exports.marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref2) {
+  var width = _ref2.width,
     height = _ref2.height,
-    transform = _ref2.transform;
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  left: ", "px;\n  top: ", "px;\n  width: ", "px;\n  height: ", "px;\n  transform: ", ";\n  position: absolute;\n  transition: margin-left ", "s ease-out, margin-top ", "s ease-out,\n    left ", "s ease-out, top ", "s ease-out, width ", "s ease-out,\n    height ", "s ease-out;\n  user-select: none;\n  pointer-events: none;\n"])), x, y, width, height, transform, EASING, EASING, EASING, EASING, EASING, EASING);
+    size = _ref2.size;
+  return (0, _react.css)({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    borderStyle: 'solid',
+    borderColor: "var(--ds-surface-overlay, rgba(255, 255, 255))",
+    borderWidth: "".concat(size, "px"),
+    width: "".concat(width, "px"),
+    height: "".concat(height, "px"),
+    opacity: "var(--ds-opacity-disabled, 0.3)"
+  });
 };
-var marginWrapperSquareStyles = exports.marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref3) {
+var marginWrapperCircleStyles = exports.marginWrapperCircleStyles = function marginWrapperCircleStyles(_ref3) {
   var width = _ref3.width,
     height = _ref3.height,
     size = _ref3.size;
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: ", ";\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: ", ";\n"])), "var(--ds-surface-overlay, rgba(255, 255, 255))", size, width, height, "var(--ds-opacity-disabled, 0.3)");
-};
-var marginWrapperCircleStyles = exports.marginWrapperCircleStyles = function marginWrapperCircleStyles(_ref4) {
-  var width = _ref4.width,
-    height = _ref4.height,
-    size = _ref4.size;
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  overflow: hidden;\n  left: 0px;\n  top: 0px;\n  width: ", "px;\n  height: ", "px;\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    border-radius: 100%;\n    width: ", "px;\n    height: ", "px;\n    box-shadow: 0px 0px 0px ", "px\n      ", ";\n    opacity: ", ";\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height), "var(--ds-surface-overlay, rgba(255, 255, 255))", "var(--ds-opacity-disabled, 0.3)");
+  return (0, _react.css)({
+    position: 'absolute',
+    overflow: 'hidden',
+    left: '0px',
+    top: '0px',
+    width: "".concat(width + size * 2, "px"),
+    height: "".concat(height + size * 2, "px"),
+    '&:after': {
+      content: "''",
+      position: 'absolute',
+      left: "".concat(size, "px"),
+      top: "".concat(size, "px"),
+      borderRadius: '100%',
+      width: "".concat(width, "px"),
+      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/es2019/avatar-picker-dialog/styles.js

@@ -12,11 +12,14 @@ export const avatarPickerViewWrapperStyles = css`
   text-align: center;
   min-height: 339px;
 `;
-export const modalHeaderStyles = css`
-  margin: ${"var(--ds-space-200, 16px)"};
-  font-weight: 500;
-  font-size: 20px;
-`;
+export const modalHeaderStyles = css({
+  // Using `&` twice to increase specificity
+  '&&': {
+    margin: "var(--ds-space-200, 16px)",
+    fontWeight: 500,
+    fontSize: '20px'
+  }
+});
 export const croppingWrapperStyles = css`
   display: inline-block;
   user-select: none;

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

@@ -7,9 +7,67 @@ import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { injectIntl } from 'react-intl-next';
 import { messages, MediaImage } from '@atlaskit/media-ui';
 import { isImageRemote } from './isImageRemote';
-import { circularMaskStyles, containerStyles, dragOverlayStyles, rectMaskStyles, removeImageContainerStyles, removeImageButtonStyles, imageContainerStyles } from './styles';
+import { CONTAINER_PADDING } from './styles';
+import { N50A } from '@atlaskit/theme/colors';
+import { css } from '@emotion/react';
+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',
+  top: 'space.050'
+});
+const dragOverlayStyles = xcss({
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  cursor: 'move'
+});
+const maskShadow = {
+  boxShadow: `0 0 0 100px ${"var(--ds-surface-overlay, rgba(255, 255, 255))"}`
+};
+const maskStyles = xcss({
+  position: 'absolute',
+  top: `${CONTAINER_PADDING}px`,
+  bottom: `${CONTAINER_PADDING}px`,
+  left: `${CONTAINER_PADDING}px`,
+  right: `${CONTAINER_PADDING}px`,
+  opacity: 'opacity.disabled'
+});
+const rectMaskStyles = xcss({
+  borderRadius: 'border.radius.100'
+});
+const circularMaskStyles = xcss({
+  borderRadius: 'border.radius.circle'
+});
+const containerStyles = xcss({
+  position: 'relative',
+  overflow: 'hidden',
+  borderRadius: 'border.radius.100'
+});
+const imageContainerStyles = xcss({
+  position: 'absolute',
+  userSelect: 'none',
+  borderRadius: 'border.radius.100'
+});
 export class ImageCropper extends Component {
   constructor(...args) {
     super(...args);
@@ -57,33 +115,31 @@ export class ImageCropper extends Component {
         formatMessage
       }
     } = this.props;
-    const containerStyle = {
+    const containerDimensions = xcss({
       width: `${containerSize}px`,
       height: `${containerSize}px`
-    };
+    });
     const width = imageWidth ? `${imageWidth}px` : 'auto';
     const height = imageHeight ? `${imageHeight}px` : 'auto';
-    const imageContainerStyle = {
+    const imageContainerDynamicStyles = xcss({
       width,
       height,
       display: width === 'auto' ? 'none' : 'block',
       top: `${top}px`,
       left: `${left}px`
-    };
+    });
     let crossOrigin;
     try {
       crossOrigin = isImageRemote(imageSource) ? 'anonymous' : undefined;
     } catch (e) {
       return null;
     }
-    return jsx("div", {
+    return jsx(Box, {
       id: "container",
-      css: containerStyles,
-      style: containerStyle
-    }, jsx("div", {
+      xcss: [containerStyles, containerDimensions]
+    }, jsx(Box, {
       id: "image-container",
-      css: imageContainerStyles,
-      style: imageContainerStyle
+      xcss: [imageContainerStyles, imageContainerDynamicStyles]
     }, jsx(MediaImage, {
       crossOrigin: crossOrigin,
       dataURI: imageSource,
@@ -92,17 +148,19 @@ export class ImageCropper extends Component {
       previewOrientation: "from-image",
       onImageLoad: onImageLoaded,
       onImageError: this.onImageError
-    })), isCircularMask ? jsx("div", {
-      css: circularMaskStyles
-    }) : jsx("div", {
-      css: rectMaskStyles
-    }), jsx("div", {
+    })), isCircularMask ? jsx(Box, {
+      xcss: [maskStyles, circularMaskStyles],
+      style: maskShadow
+    }) : jsx(Box, {
+      xcss: [maskStyles, rectMaskStyles],
+      style: maskShadow
+    }), jsx(Box, {
       id: "drag-overlay",
-      css: dragOverlayStyles,
+      xcss: dragOverlayStyles,
       onMouseDown: this.onDragStarted
-    }), jsx("div", {
+    }), jsx(Box, {
       id: "remove-image-container",
-      css: removeImageContainerStyles
+      xcss: removeImageContainerStyles
     }, jsx("button", {
       id: "remove-image-button",
       css: removeImageButtonStyles,

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

@@ -1,71 +1 @@
-import { css } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { N50A } from '@atlaskit/theme/colors';
-
-// Using module augmentation to add crossOrigin attribute as it does not exist yet, PR has been opened in
-// DefinitelyTyped for it
-export const containerStyles = css`
-  position: relative;
-  overflow: hidden;
-  border-radius: ${borderRadius()}px;
-`;
-export const imageContainerStyles = css`
-  position: absolute;
-  /* Is needed so image is not selected, when dragged */
-  -webkit-user-select: none; /* Chrome all / Safari all */
-  -moz-user-select: none; /* Firefox all */
-  -ms-user-select: none; /* IE 10+ */
-  user-select: none; /* Likely future */
-  border-radius: ${borderRadius()}px;
-`;
-export const CONTAINER_PADDING = 28;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-const maskStyles = css`
-  position: absolute;
-  top: ${CONTAINER_PADDING}px;
-  bottom: ${CONTAINER_PADDING}px;
-  left: ${CONTAINER_PADDING}px;
-  right: ${CONTAINER_PADDING}px;
-  box-shadow: 0 0 0 100px
-    ${"var(--ds-surface-overlay, rgba(255, 255, 255))"};
-  opacity: ${"var(--ds-opacity-disabled, 0.5)"};
-`;
-export const rectMaskStyles = css`
-  ${maskStyles};
-  border-radius: ${borderRadius()}px;
-`;
-export const circularMaskStyles = css`
-  ${maskStyles};
-  border-radius: 500px;
-`;
-export const dragOverlayStyles = css`
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  cursor: move;
-`;
-export const removeImageContainerStyles = css`
-  position: absolute;
-  right: ${"var(--ds-space-050, 4px)"};
-  top: ${"var(--ds-space-050, 4px)"};
-`;
-export const removeImageButtonStyles = css`
-  border-radius: ${borderRadius()}px;
-  background-color: 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 {
-    background-color: ${`var(--ds-background-neutral-hovered, ${N50A})`};
-  }
-`;
+export const CONTAINER_PADDING = 28;

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

@@ -1,17 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { containerWrapperStyles } from './styles';
+import { Box, xcss } from '@atlaskit/primitives';
+import { checkeredBg } from './styles';
+const containerWrapperStyles = xcss({
+  background: `url('${checkeredBg}')`,
+  position: `relative`,
+  cursor: `move`,
+  userSelect: `none`,
+  overflow: `hidden`
+});
 export const ContainerWrapper = ({
   width,
   height,
   margin,
   children,
   ...props
-}) => jsx("div", _extends({
-  css: containerWrapperStyles({
-    width,
-    height,
-    margin
-  })
-}, props), children);
+}) => {
+  const containerWrapperDimensions = xcss({
+    width: `${width !== undefined ? width + margin * 2 : 0}px`,
+    height: `${height !== undefined ? height + margin * 2 : 0}px`
+  });
+  return jsx(Box, _extends({
+    id: 'container-wrapper',
+    xcss: [containerWrapperStyles, containerWrapperDimensions]
+  }, props), children);
+};