@atlaskit/media-avatar-picker 26.4.8 → 26.4.10

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/media-avatar-picker
 
+## 26.4.10
+
+### Patch Changes
+
+- [`715629fc18fc8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/715629fc18fc8) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+- Updated dependencies
+
+## 26.4.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.4.8
 
 ### Patch Changes

package/dist/cjs/avatar-list/index.compiled.css

@@ -1,7 +1,7 @@
 
 ._19itidpf{border:0}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qsbenk{box-shadow:var(--_5tra1i)}
-._16qsvj57{box-shadow:var(--_zp4yxx)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1941{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-selected,#1868db)}
+._16qsgwzo{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._19bvidpf{padding-left:0}
 ._1bsb1jfw{width:var(--ds-space-500,40px)}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -67,11 +66,7 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
     }), /*#__PURE__*/React.createElement("img", {
       src: avatar.dataURI,
       alt: "",
-      className: (0, _runtime.ax)(["_2rkofajl _80omtlke _1bsb1jfw _4t3i1jfw", avatar === selectedAvatar && "_16qsbenk", isFocused[avatar.dataURI] && "_16qsvj57"]),
-      style: {
-        "--_5tra1i": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"))),
-        "--_zp4yxx": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")")))
-      }
+      className: (0, _runtime.ax)(["_2rkofajl _80omtlke _1bsb1jfw _4t3i1jfw", avatar === selectedAvatar && "_16qs1941", isFocused[avatar.dataURI] && "_16qsgwzo"])
     }));
   });
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,4 +1,4 @@
-/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/avatar-picker-dialog/custom-spinner.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mediaUi = require("@atlaskit/media-ui");
 var CustomSpinner = exports.CustomSpinner = function CustomSpinner() {
   return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
-    blankedColor: "var(--ds-blanket, rgba(255, 255, 255, 0.53))",
+    blankedColor: "var(--ds-blanket, #050C1F75)",
     invertSpinnerColor: false
   });
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -47,7 +47,7 @@ var maskStyles = {
   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))")
+  boxShadow: "0 0 0 100px ".concat("var(--ds-surface-overlay, #FFFFFF)")
 };
 var offscreenStyles = {
   clip: 'rect(1px, 1px, 1px, 1px)',

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

@@ -1,13 +1,13 @@
 ._14mj1rr0:after{border-radius:var(--ds-radius-full,9999px)}
-._1yt41q64{padding:var(--ds-space-200,15px)}
+._1yt4pxbi{padding:var(--ds-space-200,1pc)}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._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)}
 ._1tv3gq9o:after{border-style:dashed}
 ._39yq1dm9:after{border-width:var(--ds-border-width-selected,2px)}
-._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
-._8l3m1lp0:after{border-color:var(--ds-border,#d0d6d0)}
+._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
+._8l3mvbh5:after{border-color:var(--ds-border-information,#357de8)}
 ._15l2idpf:after{top:0}
 ._18f312c5:after{animation-iteration-count:infinite}
 ._18lgp3kn:after{animation-timing-function:linear}
@@ -22,7 +22,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3iuuw1{height:200px}
 ._aetrb3bt:after{content:""}
-._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
+._bfhk86z5{background-color:var(--ds-background-information-hovered,#cfe1fd)}
 ._kqswh2mm{position:relative}
 ._kwc012me:after{animation-duration:8s}
 ._re8d1dpy{display-name:DragZone}

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

@@ -1,4 +1,4 @@
-/* dragZone.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* dragZone.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -27,6 +27,6 @@ var DragZone = exports.DragZone = function DragZone(_ref) {
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     "data-testid": "dragzone"
   }, props, {
-    className: (0, _runtime.ax)(["_1yt41q64 _2rko1rr0 _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1rr0 _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yq1dm9 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
+    className: (0, _runtime.ax)(["_1yt4pxbi _2rko1rr0 _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1rr0 _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk86z5 _8l3mvbh5 _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yq1dm9 _1tv3gq9o _8l3m1l7x", !showBorder && "_eq43glyw"])
   }), children);
 };

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

@@ -1,7 +1,7 @@
 
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
-._18u068s0{margin-left:var(--ds-space-150,10px)}
-._19pk19ol{margin-top:var(--ds-space-100,10px)!important}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pk1a66{margin-top:var(--ds-space-100,8px)!important}
 ._19pkidpf{margin-top:0}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
@@ -16,7 +16,7 @@
 ._1qtqidpf input{padding-bottom:0}
 ._1rquusvi *{box-sizing:border-box}
 ._1xi2idpf{right:0}
-._2hwx68s0{margin-right:var(--ds-space-150,10px)}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
 ._2lx21bp4{flex-direction:column}
 ._2lx2vrvc{flex-direction:row}
 ._40631ntv input{box-sizing:content-box}
@@ -31,9 +31,9 @@
 ._kqswstnw{position:absolute}
 ._n9z4idpf input{padding-left:0}
 ._ogxmidpf input{padding-right:0}
-._otyr1yov{margin-bottom:var(--ds-space-100,10px)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._otyrv47k{margin-bottom:var(--ds-space-250,20px)}
-._syazpsu8{color:var(--_vrm7dk)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._v69yidpf input{padding-top:0}
 ._vchhusvi{box-sizing:border-box}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -19,7 +19,6 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("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"));
@@ -238,9 +237,8 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         className: (0, _runtime.ax)(["_1bsb53f4"])
       }), !!errorMessage ? /*#__PURE__*/_react.default.createElement("div", {
         id: "drag-zone-text",
-        className: (0, _runtime.ax)(["_y3gn1h6o _syazpsu8", "_1bsb6aa1"]),
+        className: (0, _runtime.ax)(["_y3gn1h6o _syaz1rpy", "_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, {
@@ -248,10 +246,7 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         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, ")"))
-        }
+        className: (0, _runtime.ax)(["_y3gn1h6o _syaz1rpy", "_1bsb1wug"])
       }, /*#__PURE__*/_react.default.createElement(_mediaUi.Ellipsify, {
         text: dragZoneText,
         lines: 3
@@ -360,10 +355,10 @@ var ImageNavigator = exports.ImageNavigator = /*#__PURE__*/function (_Component)
         isLoading = _this$props3.isLoading;
       return /*#__PURE__*/_react.default.createElement("div", {
         id: "image-uploader",
-        className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _19pkidpf _2hwx68s0 _otyrv47k _18u068s0"])
+        className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _19pkidpf _2hwxutpp _otyrv47k _18u0utpp"])
       }, this.renderDragZone(), isLoading ? null : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
         id: "padded-break",
-        className: (0, _runtime.ax)(["_19pk19ol _otyr1yov _y3gn1h6o"])
+        className: (0, _runtime.ax)(["_19pk1a66 _otyru2gc _y3gn1h6o"])
       }, /*#__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,

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

@@ -1,4 +1,4 @@
-/* slider.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* slider.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -1,4 +1,4 @@
-/* containerWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containerWrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/image-placer/imagePlacerErrorWrapper.compiled.css

@@ -1,6 +1,6 @@
 ._1bsb1osq{width:100%}
 ._4t3i1osq{height:100%}
-._bfhk8zhm{background-color:var(--_vkg0y2)}
+._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._ca0qmko7{padding-top:45%}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._y3gn1h6o{text-align:center}

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

@@ -1,4 +1,4 @@
-/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* imagePlacerErrorWrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -9,15 +9,11 @@ exports.ImagePlacerErrorWrapper = void 0;
 require("./imagePlacerErrorWrapper.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var imagePlacerErrorWrapperStyles = null;
 var ImagePlacerErrorWrapper = exports.ImagePlacerErrorWrapper = function ImagePlacerErrorWrapper(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)(["_bfhk8zhm _syaz15cr _1bsb1osq _4t3i1osq _y3gn1h6o _ca0qmko7"]),
-    style: {
-      "--_vkg0y2": (0, _runtime.ix)("var(--ds-background-danger-bold, ".concat(_colors.R500, ")"))
-    }
+    className: (0, _runtime.ax)(["_bfhkybec _syaz15cr _1bsb1osq _4t3i1osq _y3gn1h6o _ca0qmko7"])
   }, children);
 };

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

@@ -1,4 +1,4 @@
-/* imageWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* imageWrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -12,6 +12,8 @@ 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 _reactIntlNext = require("react-intl-next");
+var _mediaUi = require("@atlaskit/media-ui");
 var _excluded = ["x", "y", "width", "height", "transform"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var imageWrapperStyles = null;
@@ -22,6 +24,7 @@ var ImageWrapper = exports.ImageWrapper = function ImageWrapper(_ref) {
     height = _ref.height,
     transform = _ref.transform,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/React.createElement("img", (0, _extends2.default)({
     style: {
       left: "".concat(x, "px"),
@@ -29,7 +32,8 @@ var ImageWrapper = exports.ImageWrapper = function ImageWrapper(_ref) {
       width: "".concat(width, "px"),
       height: "".concat(height, "px"),
       transform: transform
-    }
+    },
+    alt: intl.formatMessage(_mediaUi.messages.image_placer_img_alt)
   }, props, {
     className: (0, _runtime.ax)(["_v56416z2 _kqswstnw _uiztglyw _lcxvglyw"])
   }));

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/image-placer/margin.compiled.css

@@ -7,4 +7,4 @@
 ._1reo15vq{overflow-x:hidden}
 ._1sb2b3bt{content:""}
 ._kqswstnw{position:absolute}
-._tzy4167h{opacity:var(--ds-opacity-disabled,.3)}
+._tzy42wxo{opacity:var(--ds-opacity-disabled,.4)}

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

@@ -1,4 +1,4 @@
-/* margin.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* margin.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -47,9 +47,9 @@ var Margin = exports.Margin = /*#__PURE__*/function (_React$Component) {
           top: "".concat(size, "px"),
           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))")
+          boxShadow: "0px 0px 0px ".concat(Math.max(width, height), "px ", "var(--ds-surface-overlay, #FFFFFF)")
         },
-        className: (0, _runtime.ax)(["_2rko1rr0 _1sb2b3bt _kqswstnw _tzy4167h"])
+        className: (0, _runtime.ax)(["_2rko1rr0 _1sb2b3bt _kqswstnw _tzy42wxo"])
       })) : /*#__PURE__*/_react.default.createElement("div", {
         style: {
           borderWidth: "".concat(size, "px"),
@@ -57,7 +57,7 @@ var Margin = exports.Margin = /*#__PURE__*/function (_React$Component) {
           height: "".concat(height, "px")
         },
         id: id,
-        className: (0, _runtime.ax)(["_1dqonqa1 _1h6d1bhr _kqswstnw _1ltvidpf _154iidpf _tzy4167h"])
+        className: (0, _runtime.ax)(["_1dqonqa1 _1h6d1bhr _kqswstnw _1ltvidpf _154iidpf _tzy42wxo"])
       });
     }
   }]);

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

package/dist/cjs/predefined-avatar-view/index.compiled.css

@@ -2,8 +2,8 @@
 ._19itidpf{border:0}
 ._2rko1i7s{border-radius:var(--ds-radius-full,1pc)}
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}
-._16qsbenk{box-shadow:var(--_5tra1i)}
-._16qsvj57{box-shadow:var(--_zp4yxx)}
+._16qs1941{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-selected,#1868db)}
+._16qsgwzo{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._18m91wug{overflow-y:auto}
 ._18u0idpf{margin-left:0}

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,7 +17,6 @@ var _reactIntlNext = require("react-intl-next");
 var _mediaUi = require("@atlaskit/media-ui");
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/core/arrow-left"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _colors = require("@atlaskit/theme/colors");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -74,11 +73,7 @@ var PredefinedAvatarView = exports.PredefinedAvatarView = /*#__PURE__*/(0, _reac
     }), /*#__PURE__*/React.createElement("img", {
       src: avatar.dataURI,
       alt: "",
-      className: (0, _runtime.ax)(["_2rkofajl _80omtlke _1bsbt9kd _4t3it9kd", avatar === selectedAvatar && "_16qsbenk", isFocused[avatar.dataURI] && "_16qsvj57"]),
-      style: {
-        "--_5tra1i": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-selected, ".concat(_colors.B200, ")"))),
-        "--_zp4yxx": (0, _runtime.ix)("0px 0px 0px 1px ".concat("var(--ds-border-inverse, white)", ", 0px 0px 0px 3px ", "var(--ds-border-focused, ".concat(_colors.B100, ")")))
-      }
+      className: (0, _runtime.ax)(["_2rkofajl _80omtlke _1bsbt9kd _4t3it9kd", avatar === selectedAvatar && "_16qs1941", isFocused[avatar.dataURI] && "_16qsgwzo"])
     }));
   });
   return /*#__PURE__*/React.createElement("div", {

package/dist/es2019/avatar-list/index.compiled.css

@@ -1,7 +1,7 @@
 
 ._19itidpf{border:0}
-._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1ng2{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-focused,#4c9aff)}
-._16qsvuh8{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-selected,#2684ff)}
+._2rkofajl{border-radius:var(--ds-radius-small,3px)}._16qs1941{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-selected,#1868db)}
+._16qsgwzo{box-shadow:0 0 0 1px var(--ds-border-inverse,#fff),0 0 0 3px var(--ds-border-focused,#4688ec)}
 ._18m915vq{overflow-y:hidden}
 ._19bvidpf{padding-left:0}
 ._1bsb1jfw{width:var(--ds-space-500,40px)}

package/dist/es2019/avatar-list/index.js

@@ -1,10 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui';
-import { B200, B100 } from '@atlaskit/theme/colors';
 import { useState } from 'react';
 const smallAvatarImageStyles = null;
 const avatarListWrapperStyles = null;
@@ -49,7 +48,7 @@ export const AvatarList = ({
     }), /*#__PURE__*/React.createElement("img", {
       src: avatar.dataURI,
       alt: "",
-      className: ax(["_2rkofajl _80omtlke _1bsb1jfw _4t3i1jfw", avatar === selectedAvatar && "_16qsvuh8", isFocused[avatar.dataURI] && "_16qs1ng2"])
+      className: ax(["_2rkofajl _80omtlke _1bsb1jfw _4t3i1jfw", avatar === selectedAvatar && "_16qs1941", isFocused[avatar.dataURI] && "_16qsgwzo"])
     }));
   });
   return /*#__PURE__*/React.createElement("div", {

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

@@ -1,4 +1,4 @@
-/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* SubmitErrorDialog.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./SubmitErrorDialog.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/avatar-picker-dialog/custom-spinner.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { ModalSpinner } from '@atlaskit/media-ui';
 export const CustomSpinner = () => {
   return /*#__PURE__*/React.createElement(ModalSpinner, {
-    blankedColor: `${"var(--ds-blanket, rgba(255, 255, 255, 0.53))"}`,
+    blankedColor: `${"var(--ds-blanket, #050C1F75)"}`,
     invertSpinnerColor: false
   });
 };

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";

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

@@ -1,4 +1,4 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
@@ -30,7 +30,7 @@ const maskStyles = {
   left: `${CONTAINER_PADDING}px`,
   right: `${CONTAINER_PADDING}px`,
   opacity: "var(--ds-opacity-disabled, 0.4)",
-  boxShadow: `0 0 0 100px ${"var(--ds-surface-overlay, rgba(255, 255, 255))"}`
+  boxShadow: `0 0 0 100px ${"var(--ds-surface-overlay, #FFFFFF)"}`
 };
 const offscreenStyles = {
   clip: 'rect(1px, 1px, 1px, 1px)',

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

@@ -1,13 +1,13 @@
 ._14mj1rr0:after{border-radius:var(--ds-radius-full,9999px)}
-._1yt41q64{padding:var(--ds-space-200,15px)}
+._1yt4pxbi{padding:var(--ds-space-200,1pc)}
 ._2rko1rr0{border-radius:var(--ds-radius-full,9999px)}
 ._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)}
 ._1tv3gq9o:after{border-style:dashed}
 ._39yq1dm9:after{border-width:var(--ds-border-width-selected,2px)}
-._8l3m1hxg:after{border-color:var(--ds-border-information,#0e56c4)}
-._8l3m1lp0:after{border-color:var(--ds-border,#d0d6d0)}
+._8l3m1l7x:after{border-color:var(--ds-border,#0b120e24)}
+._8l3mvbh5:after{border-color:var(--ds-border-information,#357de8)}
 ._15l2idpf:after{top:0}
 ._18f312c5:after{animation-iteration-count:infinite}
 ._18lgp3kn:after{animation-timing-function:linear}
@@ -22,7 +22,7 @@
 ._4cvr1h6o{align-items:center}
 ._4t3iuuw1{height:200px}
 ._aetrb3bt:after{content:""}
-._bfhk1iy1{background-color:var(--ds-background-information-hovered,#ddecfe)}
+._bfhk86z5{background-color:var(--ds-background-information-hovered,#cfe1fd)}
 ._kqswh2mm{position:relative}
 ._kwc012me:after{animation-duration:8s}
 ._re8d1dpy{display-name:DragZone}

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

@@ -1,4 +1,4 @@
-/* dragZone.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* dragZone.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./dragZone.compiled.css";
 import * as React from 'react';
@@ -16,5 +16,5 @@ export const DragZone = ({
 }) => /*#__PURE__*/React.createElement("div", _extends({
   "data-testid": "dragzone"
 }, props, {
-  className: ax(["_1yt41q64 _2rko1rr0 _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1rr0 _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk1iy1 _8l3m1hxg _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yq1dm9 _1tv3gq9o _8l3m1lp0", !showBorder && "_eq43glyw"])
+  className: ax(["_1yt4pxbi _2rko1rr0 _v5641ggo _1bsbuuw1 _4t3iuuw1 _1e0c1txw _2lx21bp4 _4cvr1h6o _1bah1h6o _kqswh2mm _re8d1dpy _14mj1rr0 _qc5o1qgh _aetrb3bt _18postnw _15l2idpf _19doidpf _z0ai1osq _1qdg1osq", isDroppingFile && "", isDroppingFile && "_bfhk86z5 _8l3mvbh5 _19ohtakz _kwc012me _18lgp3kn _18f312c5", showBorder && "_39yq1dm9 _1tv3gq9o _8l3m1l7x", !showBorder && "_eq43glyw"])
 }), children);

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

@@ -1,7 +1,7 @@
 
 ._2rkofajl{border-radius:var(--ds-radius-small,3px)}._154iidpf{top:0}
-._18u068s0{margin-left:var(--ds-space-150,10px)}
-._19pk19ol{margin-top:var(--ds-space-100,10px)!important}
+._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._19pk1a66{margin-top:var(--ds-space-100,8px)!important}
 ._19pkidpf{margin-top:0}
 ._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bah1h6o{justify-content:center}
@@ -16,7 +16,7 @@
 ._1qtqidpf input{padding-bottom:0}
 ._1rquusvi *{box-sizing:border-box}
 ._1xi2idpf{right:0}
-._2hwx68s0{margin-right:var(--ds-space-150,10px)}
+._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
 ._2lx21bp4{flex-direction:column}
 ._2lx2vrvc{flex-direction:row}
 ._40631ntv input{box-sizing:content-box}
@@ -31,9 +31,9 @@
 ._kqswstnw{position:absolute}
 ._n9z4idpf input{padding-left:0}
 ._ogxmidpf input{padding-right:0}
-._otyr1yov{margin-bottom:var(--ds-space-100,10px)}
+._otyru2gc{margin-bottom:var(--ds-space-100,8px)}
 ._otyrv47k{margin-bottom:var(--ds-space-250,20px)}
-._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
 ._v69yidpf input{padding-top:0}
 ._vchhusvi{box-sizing:border-box}

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

@@ -1,9 +1,8 @@
-/* index.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { N200 } from '@atlaskit/theme/colors';
 import { Component } from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
@@ -230,13 +229,13 @@ export class ImageNavigator extends Component {
         className: ax(["_1bsb53f4"])
       }), !!errorMessage ? /*#__PURE__*/React.createElement("div", {
         id: "drag-zone-text",
-        className: ax(["_y3gn1h6o _syaz1wmz", "_1bsb1vr8"])
+        className: ax(["_y3gn1h6o _syaz1rpy", "_1bsb1vr8"])
       }, /*#__PURE__*/React.createElement(Ellipsify, {
         text: dragZoneText,
         lines: 3
       })) : /*#__PURE__*/React.createElement("div", {
         id: "drag-zone-text",
-        className: ax(["_y3gn1h6o _syaz1wmz", "_1bsb1wug"])
+        className: ax(["_y3gn1h6o _syaz1rpy", "_1bsb1wug"])
       }, /*#__PURE__*/React.createElement(Ellipsify, {
         text: dragZoneText,
         lines: 3
@@ -317,10 +316,10 @@ export class ImageNavigator extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       id: "image-uploader",
-      className: ax(["_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _19pkidpf _2hwx68s0 _otyrv47k _18u068s0"])
+      className: ax(["_1e0c1txw _2lx21bp4 _1bah1h6o _4cvr1h6o _19pkidpf _2hwxutpp _otyrv47k _18u0utpp"])
     }, this.renderDragZone(), isLoading ? null : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
       id: "padded-break",
-      className: ax(["_19pk19ol _otyr1yov _y3gn1h6o"])
+      className: ax(["_19pk1a66 _otyru2gc _y3gn1h6o"])
     }, /*#__PURE__*/React.createElement(FormattedMessage, errorMessage ? messages.try_again : messages.or)), /*#__PURE__*/React.createElement(Button, {
       onClick: this.onUploadButtonClick,
       isDisabled: isLoading,

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

@@ -1,4 +1,4 @@
-/* slider.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* slider.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./slider.compiled.css";
 import * as React from 'react';

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

@@ -1,4 +1,4 @@
-/* containerWrapper.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* containerWrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./containerWrapper.compiled.css";
 import * as React from 'react';

package/dist/es2019/image-placer/imagePlacerErrorWrapper.compiled.css

@@ -1,6 +1,6 @@
 ._1bsb1osq{width:100%}
 ._4t3i1osq{height:100%}
-._bfhk1rjm{background-color:var(--ds-background-danger-bold,#bf2600)}
+._bfhkybec{background-color:var(--ds-background-danger-bold,#c9372c)}
 ._ca0qmko7{padding-top:45%}
 ._syaz15cr{color:var(--ds-text-inverse,#fff)}
 ._y3gn1h6o{text-align:center}