@atlaskit/media-avatar-picker 24.0.3 → 24.1.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/media-avatar-picker
 
+## 24.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 24.1.0
+
+### Minor Changes
+
+- [`1f299384778`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1f299384778) - [ux] Instrumented `@atlaskit/media-avatar-picker` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.0.3
 
 ### Patch Changes

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

@@ -29,6 +29,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _mediaUi = require("@atlaskit/media-ui");
 
 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); }
@@ -119,7 +121,7 @@ var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         return /*#__PURE__*/_react.default.createElement(_mediaUi.ModalSpinner, {
-          blankedColor: "rgba(255, 255, 255, 0.53)",
+          blankedColor: "".concat((0, _tokens.token)('color.blanket', 'rgba(255, 255, 255, 0.53)')),
           invertSpinnerColor: false
         });
       }

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

@@ -9,6 +9,8 @@ exports.removeImageContainerStyles = exports.removeImageButtonStyles = exports.r
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -23,7 +25,7 @@ var imageContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2
 exports.imageContainerStyles = imageContainerStyles;
 var CONTAINER_PADDING = 28;
 exports.CONTAINER_PADDING = CONTAINER_PADDING;
-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 rgba(255, 255, 255, 0.5);\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING);
+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, (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), (0, _tokens.token)('opacity.disabled', '0.5'));
 var rectMaskStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, (0, _constants.borderRadius)());
 exports.rectMaskStyles = rectMaskStyles;
 var circularMaskStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
@@ -32,5 +34,5 @@ var dragOverlayStyles = (0, _react.css)(_templateObject6 || (_templateObject6 =
 exports.dragOverlayStyles = dragOverlayStyles;
 var removeImageContainerStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
 exports.removeImageContainerStyles = removeImageContainerStyles;
-var 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: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), _colors.N50A);
+var 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: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), (0, _constants.borderRadius)(), (0, _tokens.token)('color.background.neutral.hovered', _colors.N50A));
 exports.removeImageButtonStyles = removeImageButtonStyles;

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

@@ -9,6 +9,8 @@ exports.sliderWrapperStyles = exports.sliderContainerStyles = exports.selectionB
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
@@ -26,20 +28,20 @@ var imageBgStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0,
 exports.imageBgStyles = imageBgStyles;
 var containerStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])), (0, _constants.gridSize)() * 32);
 exports.containerStyles = containerStyles;
-var sliderContainerStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: #fff;\n"])), (0, _constants.gridSize)());
+var sliderContainerStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), (0, _constants.gridSize)(), (0, _tokens.token)('elevation.surface.overlay', '#fff'));
 exports.sliderContainerStyles = sliderContainerStyles;
 var fileInputStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: none;\n"])));
 exports.fileInputStyles = fileInputStyles;
 var imageUploaderStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 10px 20px 10px;\n"])));
 exports.imageUploaderStyles = imageUploaderStyles;
-var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-color: #0e56c4;\n  animation: ", " 8s linear infinite;\n"])), spin);
+var droppingAnimation = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), (0, _tokens.token)('color.border.information', '#0e56c4'), spin);
 
 var getBorder = function getBorder(showBorder) {
-  return "".concat(showBorder ? '2px dashed #d0d6d0' : 'none');
+  return "".concat(showBorder ? "2px dashed ".concat((0, _tokens.token)('color.border', '#d0d6d0')) : 'none');
 };
 
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
-  return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: #ddecfe;\n\n        &:after {\n          ", "\n        }\n      "])), droppingAnimation) : '';
+  return isDroppingFile ? (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), (0, _tokens.token)('color.background.information.hovered', '#ddecfe'), droppingAnimation) : '';
 };
 
 var dragZoneStyles = function dragZoneStyles(props) {
@@ -56,7 +58,7 @@ var getWidth = function getWidth(isFullSize) {
 };
 
 var dragZoneTextStyles = function dragZoneTextStyles(props) {
-  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), _colors.N200, getWidth(props.isFullSize));
+  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', _colors.N200), getWidth(props.isFullSize));
 };
 
 exports.dragZoneTextStyles = dragZoneTextStyles;

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

@@ -9,6 +9,8 @@ exports.marginWrapperSquareStyles = exports.marginWrapperCircleStyles = exports.
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -23,7 +25,7 @@ var imagePlacerWrapperStyles = function imagePlacerWrapperStyles(props) {
 };
 
 exports.imagePlacerWrapperStyles = imagePlacerWrapperStyles;
-var imagePlacerErrorWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: white;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), _colors.R500);
+var 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"])), (0, _tokens.token)('color.background.danger.bold', _colors.R500), (0, _tokens.token)('color.text.inverse', 'white'));
 exports.imagePlacerErrorWrapperStyles = imagePlacerErrorWrapperStyles;
 
 var containerWrapperStyles = function containerWrapperStyles(_ref) {
@@ -52,7 +54,7 @@ var marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref3) {
   var width = _ref3.width,
       height = _ref3.height,
       size = _ref3.size;
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border: 1px dotted white;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: rgba(255, 255, 255, 0.3);\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n"])), size, width, height);
+  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"])), (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), size, width, height, (0, _tokens.token)('opacity.disabled', '0.3'));
 };
 
 exports.marginWrapperSquareStyles = marginWrapperSquareStyles;
@@ -61,7 +63,7 @@ var 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      rgba(255, 255, 255, 0.3);\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height));
+  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), (0, _tokens.token)('elevation.surface.overlay', 'rgba(255, 255, 255)'), (0, _tokens.token)('opacity.disabled', '0.3'));
 };
 
 exports.marginWrapperCircleStyles = marginWrapperCircleStyles;

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

@@ -52,6 +52,7 @@ var ShowMoreButton = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(ShowMoreButton, [{
     key: "render",
     value: function render() {
+      // TODO: refactor this button to not use custom - component reverts to square shape when hovered
       return (0, _react.jsx)(_customThemeButton.default, {
         className: "show-more-button",
         iconAfter: (0, _react.jsx)(_more.default, {

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

@@ -9,6 +9,8 @@ exports.smallAvatarImageStyles = exports.predefinedAvatarViewWrapperStyles = exp
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _tokens = require("@atlaskit/tokens");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -18,7 +20,7 @@ var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var avatarImageStyles = function avatarImageStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), (0, _constants.borderRadius)(), props.isSelected ? " box-shadow: 0px 0px 0px 1px white, 0px 0px 0px 3px ".concat(_colors.B200, "; ") : '');
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), (0, _constants.borderRadius)(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat((0, _tokens.token)('color.border.inverse', 'white'), ", 0px 0px 0px 3px ").concat((0, _tokens.token)('color.border.selected', _colors.B200), "; ") : '');
 };
 
 var largeAvatarImageStyles = function largeAvatarImageStyles(props) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.0.3",
+	"version": "24.1.1",
 	"sideEffects": false
 }

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

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 import { ModalSpinner } from '@atlaskit/media-ui';
 export default class AsyncAvatarPickerDialog extends React.PureComponent {
   constructor(...args) {
@@ -37,7 +38,7 @@ export default class AsyncAvatarPickerDialog extends React.PureComponent {
       }
 
       return /*#__PURE__*/React.createElement(ModalSpinner, {
-        blankedColor: "rgba(255, 255, 255, 0.53)",
+        blankedColor: `${token('color.blanket', 'rgba(255, 255, 255, 0.53)')}`,
         invertSpinnerColor: false
       });
     }

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

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 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
@@ -24,7 +25,9 @@ const maskStyles = css`
   bottom: ${CONTAINER_PADDING}px;
   left: ${CONTAINER_PADDING}px;
   right: ${CONTAINER_PADDING}px;
-  box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.5);
+  box-shadow: 0 0 0 100px
+    ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
+  opacity: ${token('opacity.disabled', '0.5')};
 `;
 export const rectMaskStyles = css`
   ${maskStyles};
@@ -61,6 +64,6 @@ export const removeImageButtonStyles = css`
   }
 
   &:hover {
-    background-color: ${N50A};
+    background-color: ${token('color.background.neutral.hovered', N50A)};
   }
 `;

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

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
@@ -37,7 +38,7 @@ export const sliderContainerStyles = css`
     box-sizing: content-box;
     padding: 0;
   }
-  background-color: #fff;
+  background-color: ${token('elevation.surface.overlay', '#fff')};
 `;
 export const fileInputStyles = css`
   display: none;
@@ -50,14 +51,14 @@ export const imageUploaderStyles = css`
   margin: 0 10px 20px 10px;
 `;
 const droppingAnimation = css`
-  border-color: #0e56c4;
+  border-color: ${token('color.border.information', '#0e56c4')};
   animation: ${spin} 8s linear infinite;
 `;
 
-const getBorder = showBorder => `${showBorder ? '2px dashed #d0d6d0' : 'none'}`;
+const getBorder = showBorder => `${showBorder ? `2px dashed ${token('color.border', '#d0d6d0')}` : 'none'}`;
 
 const getDroppingAnimation = isDroppingFile => isDroppingFile ? css`
-        background-color: #ddecfe;
+        background-color: ${token('color.background.information.hovered', '#ddecfe')};
 
         &:after {
           ${droppingAnimation}
@@ -99,7 +100,7 @@ const getWidth = isFullSize => `${isFullSize ? `width:${AVATAR_DIALOG_WIDTH - gr
 
 export const dragZoneTextStyles = props => css`
   text-align: center;
-  color: ${N200};
+  color: ${token('color.text.subtlest', N200)};
   ${getWidth(props.isFullSize)};
 `;
 export const selectionBlockerStyles = css`

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

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 export const checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
@@ -6,8 +7,8 @@ export const imagePlacerWrapperStyles = props => css`
   display: inline-block;
 `;
 export const imagePlacerErrorWrapperStyles = css`
-  background-color: ${R500};
-  color: white;
+  background-color: ${token('color.background.danger.bold', R500)};
+  color: ${token('color.text.inverse', 'white')};
   width: 100%;
   height: 100%;
   text-align: center;
@@ -52,14 +53,14 @@ export const marginWrapperSquareStyles = ({
   size
 }) => css`
   position: absolute;
-  border: 1px dotted white;
   left: 0;
   top: 0;
   border-style: solid;
-  border-color: rgba(255, 255, 255, 0.3);
+  border-color: ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
   border-width: ${size}px;
   width: ${width}px;
   height: ${height}px;
+  opacity: ${token('opacity.disabled', '0.3')};
 `;
 export const marginWrapperCircleStyles = ({
   width,
@@ -82,6 +83,7 @@ export const marginWrapperCircleStyles = ({
     width: ${width}px;
     height: ${height}px;
     box-shadow: 0px 0px 0px ${Math.max(width, height)}px
-      rgba(255, 255, 255, 0.3);
+      ${token('elevation.surface.overlay', 'rgba(255, 255, 255)')};
+    opacity: ${token('opacity.disabled', '0.3')};
   }
 `;

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

@@ -10,6 +10,7 @@ import { predefinedAvatarsWrapperStyles } from './styles';
 
 class ShowMoreButton extends PureComponent {
   render() {
+    // TODO: refactor this button to not use custom - component reverts to square shape when hovered
     return jsx(Button, {
       className: "show-more-button",
       iconAfter: jsx(EditorMoreIcon, {

package/dist/es2019/predefined-avatar-view/styles.js

@@ -1,3 +1,4 @@
+import { token } from '@atlaskit/tokens';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { B200 } from '@atlaskit/theme/colors';
 import { css } from '@emotion/react';
@@ -5,7 +6,7 @@ import { css } from '@emotion/react';
 const avatarImageStyles = props => css`
   border-radius: ${borderRadius()};
   cursor: pointer;
-  ${props.isSelected ? ` box-shadow: 0px 0px 0px 1px white, 0px 0px 0px 3px ${B200}; ` : ''};
+  ${props.isSelected ? ` box-shadow: 0px 0px 0px 1px ${token('color.border.inverse', 'white')}, 0px 0px 0px 3px ${token('color.border.selected', B200)}; ` : ''};
 `;
 
 export const largeAvatarImageStyles = props => css`

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.0.3",
+	"version": "24.1.1",
 	"sideEffects": false
 }

package/dist/esm/avatar-picker-dialog/avatar-picker-dialog-loader.js

@@ -13,6 +13,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 import React from 'react';
+import { token } from '@atlaskit/tokens';
 import { ModalSpinner } from '@atlaskit/media-ui';
 
 var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
@@ -97,7 +98,7 @@ var AsyncAvatarPickerDialog = /*#__PURE__*/function (_React$PureComponent) {
         }
 
         return /*#__PURE__*/React.createElement(ModalSpinner, {
-          blankedColor: "rgba(255, 255, 255, 0.53)",
+          blankedColor: "".concat(token('color.blanket', 'rgba(255, 255, 255, 0.53)')),
           invertSpinnerColor: false
         });
       }

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

@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
+import { token } from '@atlaskit/tokens';
 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
@@ -10,9 +11,9 @@ import { N50A } from '@atlaskit/theme/colors'; // Using module augmentation to a
 export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  border-radius: ", "px;\n"])), borderRadius());
 export var imageContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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"])), borderRadius());
 export var CONTAINER_PADDING = 28;
-var maskStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", "px;\n  bottom: ", "px;\n  left: ", "px;\n  right: ", "px;\n  box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.5);\n"])), CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING, CONTAINER_PADDING);
+var maskStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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, token('elevation.surface.overlay', 'rgba(255, 255, 255)'), token('opacity.disabled', '0.5'));
 export var rectMaskStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  border-radius: ", "px;\n"])), maskStyles, borderRadius());
 export var circularMaskStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  border-radius: 500px;\n"])), maskStyles);
 export var dragOverlayStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  cursor: move;\n"])));
 export var removeImageContainerStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 4px;\n  top: 4px;\n"])));
-export var removeImageButtonStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), borderRadius(), N50A);
+export var removeImageButtonStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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: 4px;\n    left: 4px;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), borderRadius(), token('color.background.neutral.hovered', N50A));

package/dist/esm/image-navigator/styles.js

@@ -2,6 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 
+import { token } from '@atlaskit/tokens';
 import { css, keyframes } from '@emotion/react';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { N200 } from '@atlaskit/theme/colors';
@@ -10,17 +11,17 @@ import { AVATAR_DIALOG_WIDTH } from '../avatar-picker-dialog/layout-const';
 var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
 export var imageBgStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 256px;\n  height: 256px;\n  background: url('", "');\n  border-radius: ", ";\n"])), checkeredBg, borderRadius());
 export var containerStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n  box-sizing: border-box;\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n  position: relative;\n"])), gridSize() * 32);
-export var sliderContainerStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: #fff;\n"])), gridSize());
+export var sliderContainerStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  align-items: center;\n  justify-content: center;\n  display: flex;\n  flex-direction: row;\n  margin-top: ", "px;\n\n  input {\n    box-sizing: content-box;\n    padding: 0;\n  }\n  background-color: ", ";\n"])), gridSize(), token('elevation.surface.overlay', '#fff'));
 export var fileInputStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: none;\n"])));
 export var imageUploaderStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: 0 10px 20px 10px;\n"])));
-var droppingAnimation = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-color: #0e56c4;\n  animation: ", " 8s linear infinite;\n"])), spin);
+var droppingAnimation = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  border-color: ", ";\n  animation: ", " 8s linear infinite;\n"])), token('color.border.information', '#0e56c4'), spin);
 
 var getBorder = function getBorder(showBorder) {
-  return "".concat(showBorder ? '2px dashed #d0d6d0' : 'none');
+  return "".concat(showBorder ? "2px dashed ".concat(token('color.border', '#d0d6d0')) : 'none');
 };
 
 var getDroppingAnimation = function getDroppingAnimation(isDroppingFile) {
-  return isDroppingFile ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background-color: #ddecfe;\n\n        &:after {\n          ", "\n        }\n      "])), droppingAnimation) : '';
+  return isDroppingFile ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        background-color: ", ";\n\n        &:after {\n          ", "\n        }\n      "])), token('color.background.information.hovered', '#ddecfe'), droppingAnimation) : '';
 };
 
 export var dragZoneStyles = function dragZoneStyles(props) {
@@ -34,7 +35,7 @@ var getWidth = function getWidth(isFullSize) {
 };
 
 export var dragZoneTextStyles = function dragZoneTextStyles(props) {
-  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), N200, getWidth(props.isFullSize));
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  text-align: center;\n  color: ", ";\n  ", ";\n"])), token('color.text.subtlest', N200), getWidth(props.isFullSize));
 };
 export var selectionBlockerStyles = css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: fixed;\n  left: 0;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  background-color: transparent;\n  user-select: none;\n"])));
 export var paddedBreakStyles = css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  margin-top: 10px !important;\n  margin-bottom: 10px;\n"])));

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

@@ -2,13 +2,14 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 import { R500 } from '@atlaskit/theme/colors';
 export var checkeredBg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxOC0xMC0zMFQxMjoxMDo5MjwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjcuNTwveG1wOkNyZWF0b3JUb29sPgogICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICAgICA8dGlmZjpDb21wcmVzc2lvbj4wPC90aWZmOkNvbXByZXNzaW9uPgogICAgICAgICA8dGlmZjpSZXNvbHV0aW9uVW5pdD4yPC90aWZmOlJlc29sdXRpb25Vbml0PgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjwvdGlmZjpZUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzI8L3RpZmY6WFJlc29sdXRpb24+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj4xMDwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTA8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KX+XPjwAAACtJREFUGBljPHv27H8GNGBsbMyIJsTAhC6Aiz+ACjEcDXIjNg8OoBuJthoAzy0HeT3Qcc0AAAAASUVORK5CYII=';
 export var imagePlacerWrapperStyles = function imagePlacerWrapperStyles(props) {
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  display: inline-block;\n"])), props.backgroundColor);
 };
-export var imagePlacerErrorWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), R500);
+export var imagePlacerErrorWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: ", ";\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  padding-top: 45%;\n"])), token('color.background.danger.bold', R500), token('color.text.inverse', 'white'));
 export var containerWrapperStyles = function containerWrapperStyles(_ref) {
   var width = _ref.width,
       height = _ref.height,
@@ -28,11 +29,11 @@ export var marginWrapperSquareStyles = function marginWrapperSquareStyles(_ref3)
   var width = _ref3.width,
       height = _ref3.height,
       size = _ref3.size;
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  border: 1px dotted white;\n  left: 0;\n  top: 0;\n  border-style: solid;\n  border-color: rgba(255, 255, 255, 0.3);\n  border-width: ", "px;\n  width: ", "px;\n  height: ", "px;\n"])), size, width, height);
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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"])), token('elevation.surface.overlay', 'rgba(255, 255, 255)'), size, width, height, token('opacity.disabled', '0.3'));
 };
 export var marginWrapperCircleStyles = function marginWrapperCircleStyles(_ref4) {
   var width = _ref4.width,
       height = _ref4.height,
       size = _ref4.size;
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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      rgba(255, 255, 255, 0.3);\n  }\n"])), width + size * 2, height + size * 2, size, size, width, height, Math.max(width, height));
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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), token('elevation.surface.overlay', 'rgba(255, 255, 255)'), token('opacity.disabled', '0.3'));
 };

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

@@ -35,6 +35,7 @@ var ShowMoreButton = /*#__PURE__*/function (_PureComponent) {
   _createClass(ShowMoreButton, [{
     key: "render",
     value: function render() {
+      // TODO: refactor this button to not use custom - component reverts to square shape when hovered
       return jsx(Button, {
         className: "show-more-button",
         iconAfter: jsx(EditorMoreIcon, {

package/dist/esm/predefined-avatar-view/styles.js

@@ -2,12 +2,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
+import { token } from '@atlaskit/tokens';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { B200 } from '@atlaskit/theme/colors';
 import { css } from '@emotion/react';
 
 var avatarImageStyles = function avatarImageStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), borderRadius(), props.isSelected ? " box-shadow: 0px 0px 0px 1px white, 0px 0px 0px 3px ".concat(B200, "; ") : '');
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  cursor: pointer;\n  ", ";\n"])), borderRadius(), props.isSelected ? " box-shadow: 0px 0px 0px 1px ".concat(token('color.border.inverse', 'white'), ", 0px 0px 0px 3px ").concat(token('color.border.selected', B200), "; ") : '');
 };
 
 export var largeAvatarImageStyles = function largeAvatarImageStyles(props) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-avatar-picker",
-	"version": "24.0.3",
+	"version": "24.1.1",
 	"sideEffects": false
 }

package/example-helpers/StatefulAvatarPickerDialog.tsx

@@ -107,10 +107,8 @@ export default class StatefulAvatarPickerDialog extends React.Component<
   }
 
   render() {
-    const {
-      imagePreviewSourceViaDataURIAPI,
-      imagePreviewSourceViaFileAPI,
-    } = this.state;
+    const { imagePreviewSourceViaDataURIAPI, imagePreviewSourceViaFileAPI } =
+      this.state;
 
     return (
       <div css={layoutStyles}>

package/example-helpers/styles.ts

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
 import { checkeredBg } from '../src/image-placer/styles';
 export const labelStyles = css`
   display: block;
@@ -14,24 +15,14 @@ export const labelStyles = css`
   }
 `;
 export const exportedImageStyles = css`
-  border: 1px solid #ccc;
+  border: 1px solid ${token('color.border', '#ccc')};
 `;
+
 export const exportedImageWrapperStyles = css`
   display: inline-block;
   background: url('${checkeredBg}');
   margin-top: 20px;
   position: relative;
-
-  p {
-    position: absolute;
-    top: -18px;
-    left: 0px;
-    margin-top: 0;
-    width: 100%;
-    text-align: center;
-    font-size: 12px;
-    color: blue;
-  }
 `;
 
 export const layoutStyles = css`

package/example-helpers/viewport-debug.ts

@@ -18,9 +18,8 @@ interface Pos {
 
 export class ViewportDebugger {
   private viewport: Viewport;
-  private navigationCanvas: HTMLCanvasElement = document.createElement(
-    'canvas',
-  );
+  private navigationCanvas: HTMLCanvasElement =
+    document.createElement('canvas');
   private previewCanvas: HTMLCanvasElement = document.createElement('canvas');
   private previousItemBounds: Bounds = new Bounds(0, 0, 0, 0);
   public imageElement?: HTMLImageElement;
@@ -36,12 +35,8 @@ export class ViewportDebugger {
   }
 
   initCanvas() {
-    const {
-      previewCanvas,
-      navigationCanvasPos,
-      previewCanvasPos,
-      viewport,
-    } = this;
+    const { previewCanvas, navigationCanvasPos, previewCanvasPos, viewport } =
+      this;
     const { innerBounds } = viewport;
     previewCanvas.width = innerBounds.width;
     previewCanvas.height = innerBounds.height;