@atlaskit/media-avatar-picker 24.10.5 → 25.0.0

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ImageCropper = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -19,57 +22,45 @@ var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _isImageRemote = require("./isImageRemote");
-var _styles = require("./styles");
 var _new = require("@atlaskit/button/new");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _css = require("@atlaskit/css");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
 var _layoutConst = require("../avatar-picker-dialog/layout-const");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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 = {
+var CONTAINER_PADDING = 28;
+var removeImageContainerStyles = {
+  root: "_kqswstnw _1xi21b66 _154i1b66"
+};
+var dragOverlayStyles = {
+  root: "_kqswstnw _1bsb1osq _4t3i1osq _80om15ng"
+};
+var maskPositionStyle = {
+  root: "_kqswstnw"
+};
+var maskStyles = {
+  top: "".concat(CONTAINER_PADDING, "px"),
+  bottom: "".concat(CONTAINER_PADDING, "px"),
+  left: "".concat(CONTAINER_PADDING, "px"),
+  right: "".concat(CONTAINER_PADDING, "px"),
+  opacity: "var(--ds-opacity-disabled, 0.4)",
   boxShadow: "0 0 0 100px ".concat("var(--ds-surface-overlay, rgba(255, 255, 255))")
 };
-var maskStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  top: "".concat(_styles.CONTAINER_PADDING, "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  bottom: "".concat(_styles.CONTAINER_PADDING, "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  left: "".concat(_styles.CONTAINER_PADDING, "px"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  right: "".concat(_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 rectMaskStyles = {
+  root: "_2rkoiti9"
+};
+var circularMaskStyles = {
+  root: "_2rko14q2"
+};
+var containerStyles = {
+  root: "_kqswh2mm _1reo15vq _18m915vq _2rkoiti9"
+};
+var imageContainerStyles = {
+  root: "_kqswstnw _uiztglyw _2rkoiti9"
+};
 var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ImageCropper, _Component);
   var _super = _createSuper(ImageCropper);
@@ -120,83 +111,65 @@ var ImageCropper = exports.ImageCropper = /*#__PURE__*/function (_Component) {
         onRemoveImage = _this$props3.onRemoveImage,
         onImageLoaded = _this$props3.onImageLoaded,
         formatMessage = _this$props3.intl.formatMessage;
-      var containerDimensions = (0, _primitives.xcss)({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        width: "".concat(containerSize, "px"),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        height: "".concat(containerSize, "px")
-      });
       var width = imageWidth ? "".concat(imageWidth, "px") : 'auto';
-      var height = imageHeight ? "".concat(imageHeight, "px") : 'auto';
-      var imageContainerDynamicStyles = (0, _primitives.xcss)({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        width: width,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        height: height,
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        display: width === 'auto' ? 'none' : 'block',
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        top: "".concat(top, "px"),
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        left: "".concat(left, "px")
-      });
       var crossOrigin;
       try {
         crossOrigin = (0, _isImageRemote.isImageRemote)(imageSource) ? 'anonymous' : undefined;
       } catch (e) {
         return null;
       }
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        _react.default.createElement(_primitives.Box, {
-          testId: "image-cropper",
-          id: "container",
-          xcss: [containerStyles, containerDimensions]
-        }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-          id: "image-container",
-          xcss: [imageContainerStyles, imageContainerDynamicStyles]
-        }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
-          crossOrigin: crossOrigin,
-          dataURI: imageSource,
-          crop: false,
-          stretch: true,
-          previewOrientation: "from-image",
-          onImageLoad: onImageLoaded,
-          onImageError: this.onImageError
-        })), isCircularMask ?
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        _react.default.createElement(_primitives.Box, {
-          xcss: [maskStyles, circularMaskStyles],
-          style: maskShadow
-        }) :
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        _react.default.createElement(_primitives.Box, {
-          xcss: [maskStyles, rectMaskStyles],
-          style: maskShadow
-        }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-          id: "drag-overlay",
-          xcss: dragOverlayStyles,
-          onMouseDown: this.onDragStarted
-        }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-          id: "remove-image-container",
-          xcss: removeImageContainerStyles
-        }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-          id: "remove-image-button",
-          icon: function icon(iconProps) {
-            return /*#__PURE__*/_react.default.createElement(_closeCross.default, (0, _extends2.default)({}, iconProps, {
-              LEGACY_size: "small",
-              color: "currentColor"
-            }));
-          },
-          onClick: onRemoveImage,
-          label: formatMessage(_mediaUi.messages.remove_image),
-          spacing: "compact",
-          appearance: "subtle"
-        })))
-      );
+      return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        testId: "image-cropper",
+        id: "container",
+        xcss: containerStyles.root,
+        style: {
+          width: "".concat(containerSize, "px"),
+          height: "".concat(containerSize, "px")
+        }
+      }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        id: "image-container",
+        xcss: imageContainerStyles.root,
+        style: {
+          width: imageWidth ? "".concat(imageWidth, "px") : 'auto',
+          height: imageHeight ? "".concat(imageHeight, "px") : 'auto',
+          display: width === 'auto' ? 'none' : 'block',
+          top: "".concat(top, "px"),
+          left: "".concat(left, "px")
+        }
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.MediaImage, {
+        crossOrigin: crossOrigin,
+        dataURI: imageSource,
+        crop: false,
+        stretch: true,
+        previewOrientation: "from-image",
+        onImageLoad: onImageLoaded,
+        onImageError: this.onImageError
+      })), isCircularMask ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        xcss: (0, _css.cx)(circularMaskStyles.root, maskPositionStyle.root),
+        style: maskStyles
+      }) : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        xcss: (0, _css.cx)(rectMaskStyles.root, maskPositionStyle.root),
+        style: maskStyles
+      }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        id: "drag-overlay",
+        xcss: dragOverlayStyles.root,
+        onMouseDown: this.onDragStarted
+      }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+        id: "remove-image-container",
+        xcss: removeImageContainerStyles.root
+      }, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+        id: "remove-image-button",
+        icon: function icon(iconProps) {
+          return /*#__PURE__*/_react.default.createElement(_closeCross.default, (0, _extends2.default)({}, iconProps, {
+            LEGACY_size: "small",
+            color: "currentColor"
+          }));
+        },
+        onClick: onRemoveImage,
+        label: formatMessage(_mediaUi.messages.remove_image),
+        spacing: "compact",
+        appearance: "subtle"
+      })));
     }
   }]);
   return ImageCropper;

package/dist/cjs/image-navigator/dragZone.compiled.css

@@ -0,0 +1,24 @@
+._14mj1osq:after{border-radius:100%}
+._1yt41q64{padding:var(--ds-space-200,15px)}
+._2rko1osq{border-radius:100%}
+._46tsilf2:after{animation:var(--_s2m8ls)}
+._eq431kyj:after{border:var(--_16hqum)}
+._eq43glyw:after{border:none}
+._qc5o1qgh:after{transition:border-color .3s cubic-bezier(.19,1,.22,1)}
+._v5641ggo{transition:background-color .3s cubic-bezier(.215,.61,.355,1)}
+._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
+._15l2idpf:after{top:0}
+._18postnw:after{position:absolute}
+._19doidpf:after{left:0}
+._1bah1h6o{justify-content:center}
+._1bsbuuw1{width:200px}
+._1e0c1txw{display:flex}
+._1qdg1osq:after{height:100%}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3iuuw1{height:200px}
+._aetrb3bt:after{content:""}
+._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
+._kqswh2mm{position:relative}
+._re8d1dpy{display-name:DragZone}
+._z0ai1osq:after{width:100%}

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

@@ -1,32 +1,37 @@
+/* dragZone.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DragZone = void 0;
+require("./dragZone.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
-var _styles = require("./styles");
 var _excluded = ["showBorder", "isDroppingFile", "children"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var dragZoneStyles = null;
+var spin = null;
+var droppingAnimation = null;
+var border = null;
+var noBorder = null;
 var DragZone = exports.DragZone = function DragZone(_ref) {
   var showBorder = _ref.showBorder,
     isDroppingFile = _ref.isDroppingFile,
     children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     "data-testid": "dragzone"
-    // 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: (0, _styles.dragZoneStyles)({
-      showBorder: showBorder,
-      isDroppingFile: isDroppingFile
-    })
-  }, props), children);
+  }, props, {
+    className: (0, _runtime.ax)(["_1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _1yt41q64 _kqswh2mm _2rko1osq _v5641ggo _re8d1dpy _aetrb3bt _14mj1osq _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq _qc5o1qgh", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _46tsilf2", showBorder && "_eq431kyj", !showBorder && "_eq43glyw"]),
+    style: {
+      "--_s2m8ls": (0, _runtime.ix)("".concat(spin, " 8s linear infinite")),
+      "--_16hqum": (0, _runtime.ix)("2px dashed ".concat("var(--ds-border, #d0d6d0)"))
+    }
+  }), children);
 };

package/dist/cjs/image-navigator/index.compiled.css

@@ -0,0 +1,35 @@
+
+._18s81k2y{margin:var(--_p0hvw3)}
+._2rko1sit{border-radius:var(--ds-border-radius,3px)}._154iidpf{top:0}
+._19pk1rei{margin-top:var(--_9hbjja)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1h6o{justify-content:center}
+._1bsb1k99{width:16pc}
+._1bsb1wug{width:auto}
+._1bsb53f4{width:75pt}
+._1bsb6aa1{width:var(--_19s8yqa)}
+._1e0c1txw{display:flex}
+._1e0cglyw{display:none}
+._1ltvidpf{left:0}
+._1qtqidpf input{padding-bottom:0}
+._1rquusvi *, ._1dzousvi :after, ._gxv5usvi :before{box-sizing:border-box}
+._1xi2idpf{right:0}
+._2lx21bp4{flex-direction:column}
+._2lx2vrvc{flex-direction:row}
+._406318uv input{box-sizing:initial}
+._4cvr1h6o{align-items:center}
+._4t3i1k99{height:16pc}
+._94n5idpf{bottom:0}
+._bfhk18uv{background-color:initial}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._kqsw1n9t{position:fixed}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._n9z4idpf input{padding-left:0}
+._ogxmidpf input{padding-right:0}
+._otyr1yov{margin-bottom:var(--ds-space-100,10px)}
+._syazpsu8{color:var(--_vrm7dk)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._v69yidpf input{padding-top:0}
+._vchhusvi{box-sizing:border-box}
+._y3gn1h6o{text-align:center}

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

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,7 +6,9 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.viewport = exports.default = exports.ImageNavigator = void 0;
+exports.viewport = exports.default = exports.ImageNavigator = exports.AVATAR_DIALOG_WIDTH = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -17,14 +20,13 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
 var _reactIntlNext = require("react-intl-next");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _imageCropper = _interopRequireDefault(require("../image-cropper"));
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _mediaUi = require("@atlaskit/media-ui");
 var exenv = _interopRequireWildcard(require("exenv"));
-var _styles = require("./styles");
 var _images = require("./images");
 var _util = require("../util");
 var _avatarPickerDialog = require("../avatar-picker-dialog");
@@ -36,10 +38,20 @@ var _exportCroppedImage = require("./exportCroppedImage");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAABCJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjU8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjg8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgICAgPHJkZjpTZXEvPgogICAgICAgICA8L2RjOnN1YmplY3Q+CiAgICAgICAgIDx4bXA6TW9kaWZ5RGF0ZT4yMDE4OjA3OjE4IDEwOjA3OjUwPC94bXA6TW9kaWZ5RGF0ZT4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5QaXhlbG1hdG9yIDMuNy4zPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgrsp//0AAAAKUlEQVQIHWP8//8/Aww8ffoUxmRggrPQGKRLsCCbKy0tDTeQdKNw6gAAbSMIvvnXfF4AAAAASUVORK5CYII=';
+var AVATAR_DIALOG_WIDTH = exports.AVATAR_DIALOG_WIDTH = 375;
+var containerStyles = null;
+var sliderContainerStyles = null;
+var fileInputStyles = null;
+var imageUploaderStyles = null;
+var dragZoneImageStyles = null;
+var imageBgStyles = null;
+var dragZoneTextBaseStyles = null;
+var dragZoneTextStylesFullSize = null;
+var dragZoneTextStylesNotFullSize = null;
+var selectionBlockerStyles = null;
+var paddedBreakStyles = null;
 var viewport = exports.viewport = new _viewport2.Viewport(_layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_SIZE, _layoutConst.CONTAINER_PADDING);
 var defaultState = {
   imagePos: new _mediaUi.Vector2(_layoutConst.CONTAINER_PADDING, _layoutConst.CONTAINER_PADDING),
@@ -191,27 +203,38 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var showBorder = !isLoading && !!!errorMessage;
       var dropZoneImageSrc = errorMessage ? _images.errorIcon : _images.uploadPlaceholder;
       var dragZoneText = errorMessage || formatMessage(_mediaUi.messages.drag_and_drop_images_here);
-      return (0, _react2.jsx)(_dragZone.DragZone, {
+      return /*#__PURE__*/_react.default.createElement(_dragZone.DragZone, {
         showBorder: showBorder,
         isDroppingFile: isDroppingFile,
         onDragLeave: _this.onDragLeave,
         onDragEnter: _this.onDragEnter,
         onDragOver: _this.onDragOver,
         onDrop: _this.onDrop
-      }, isLoading ? (0, _react2.jsx)(_spinner.default, {
+      }, isLoading ? /*#__PURE__*/_react.default.createElement(_spinner.default, {
         testId: "spinner",
         size: "medium"
-      }) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("img", {
+      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("img", {
         id: "drag-zone-image",
-        css: _styles.dragZoneImageStyles,
         src: dropZoneImageSrc,
-        alt: ""
-      }), (0, _react2.jsx)("div", {
+        alt: "",
+        className: (0, _runtime.ax)(["_1bsb53f4"])
+      }), !!errorMessage ? /*#__PURE__*/_react.default.createElement("div", {
         id: "drag-zone-text",
-        css: (0, _styles.dragZoneTextStyles)({
-          isFullSize: !!errorMessage
-        })
-      }, (0, _react2.jsx)(_mediaUi.Ellipsify, {
+        className: (0, _runtime.ax)(["_y3gn1h6o _syazpsu8", "_1bsb6aa1"]),
+        style: {
+          "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")")),
+          "--_19s8yqa": (0, _runtime.ix)("calc(".concat(AVATAR_DIALOG_WIDTH, " - ", "var(--ds-space-100, 8px)", " * 8)px"))
+        }
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
+        text: dragZoneText,
+        lines: 3
+      })) : /*#__PURE__*/_react.default.createElement("div", {
+        id: "drag-zone-text",
+        className: (0, _runtime.ax)(["_y3gn1h6o _syazpsu8", "_1bsb1wug"]),
+        style: {
+          "--_vrm7dk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N200, ")"))
+        }
+      }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
         text: dragZoneText,
         lines: 3
       }))));
@@ -316,29 +339,30 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var _this$props3 = this.props,
         errorMessage = _this$props3.errorMessage,
         isLoading = _this$props3.isLoading;
-      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, _react2.jsx)("div", {
-          id: "image-uploader",
-          css: _styles.imageUploaderStyles
-        }, this.renderDragZone(), isLoading ? null : (0, _react2.jsx)("div", null, (0, _react2.jsx)("p", {
-          id: "padded-break",
-          css: _styles.paddedBreakStyles
-        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), (0, _react2.jsx)(_standardButton.default, {
-          onClick: this.onUploadButtonClick,
-          isDisabled: isLoading,
-          testId: "upload-button"
-        }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), (0, _react2.jsx)("input", {
-          "data-testid": "image-navigator-input-file"
-          // 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: _styles.fileInputStyles,
-          type: "file",
-          id: "image-input",
-          onChange: this.onFileChange,
-          accept: _avatarPickerDialog.ACCEPT.join(',')
-        }))))
-      );
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: "image-uploader",
+        className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _18s81k2y"]),
+        style: {
+          "--_p0hvw3": (0, _runtime.ix)("0 ".concat("var(--ds-space-150, 10px)", " ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-150, 10px)"))
+        }
+      }, this.renderDragZone(), isLoading ? null : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+        id: "padded-break",
+        className: (0, _runtime.ax)(["_19pk1rei _otyr1yov _y3gn1h6o"]),
+        style: {
+          "--_9hbjja": (0, _runtime.ix)("var(--ds-space-100, 10px)".concat(" !important"))
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, errorMessage ? _mediaUi.messages.try_again : _mediaUi.messages.or)), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+        onClick: this.onUploadButtonClick,
+        isDisabled: isLoading,
+        testId: "upload-button"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _mediaUi.messages.upload_photo), /*#__PURE__*/_react.default.createElement("input", {
+        "data-testid": "image-navigator-input-file",
+        type: "file",
+        id: "image-input",
+        onChange: this.onFileChange,
+        accept: _avatarPickerDialog.ACCEPT.join(','),
+        className: (0, _runtime.ax)(["_1e0cglyw"])
+      }))));
     }
   }, {
     key: "renderImageCropper",
@@ -353,9 +377,12 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         onImageLoaded = this.onImageLoaded,
         onRemoveImage = this.onRemoveImage;
       var itemBounds = viewport.itemBounds;
-      return (0, _react2.jsx)("div", null, (0, _react2.jsx)("div", {
-        css: _styles.imageBgStyles
-      }), (0, _react2.jsx)(_imageCropper.default, {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          background: "url('".concat(checkeredBg, "')")
+        },
+        className: (0, _runtime.ax)(["_kqswstnw _154iidpf _1ltvidpf _1bsb1k99 _4t3i1k99 _2rko1sit"])
+      }), /*#__PURE__*/_react.default.createElement(_imageCropper.default, {
         imageSource: dataURI,
         imageOrientation: imageOrientation,
         containerSize: _layoutConst.CONTAINER_SIZE,
@@ -368,14 +395,14 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         onImageLoaded: onImageLoaded,
         onRemoveImage: onRemoveImage,
         onImageError: onImageError
-      }), (0, _react2.jsx)("div", {
-        css: _styles.sliderContainerStyles
-      }, (0, _react2.jsx)(_slider.Slider, {
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)(["_4cvr1h6o _1bah1h6o _1e0c1txw _2lx2vrvc _19pku2gc _bfhk1bhr _406318uv _v69yidpf _ogxmidpf _1qtqidpf _n9z4idpf"])
+      }, /*#__PURE__*/_react.default.createElement(_slider.Slider, {
         value: scale,
         onChange: this.onScaleChange
-      })), isDragging ? (0, _react2.jsx)("div", {
+      })), isDragging ? /*#__PURE__*/_react.default.createElement("div", {
         "data-testid": "selection-blocker",
-        css: _styles.selectionBlockerStyles
+        className: (0, _runtime.ax)(["_kqsw1n9t _1ltvidpf _154iidpf _1xi2idpf _94n5idpf _bfhk18uv _uiztglyw"])
       }) : null);
     }
 
@@ -395,10 +422,8 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
       var isLoading = this.props.isLoading;
       var dataURI = this.dataURI;
       var content = dataURI && !isLoading ? this.renderImageCropper(dataURI) : this.renderImageUploader();
-
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      return (0, _react2.jsx)("div", {
-        css: _styles.containerStyles
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _runtime.ax)(["_vchhusvi _kqswh2mm _1rquusvi _1dzousvi _gxv5usvi"])
       }, content);
     }
   }]);

package/dist/cjs/image-navigator/slider.compiled.css

@@ -0,0 +1,5 @@
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1grc1i6y .zoom_button svg{left:var(--ds-space-negative-025,-2px)}
+._4cvr1h6o{align-items:center}
+._yw87h2mm .zoom_button svg{position:relative}