@atlaskit/media-ui 23.0.5 → 23.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 23.1.0
+
+### Minor Changes
+
+- [`a67386c9448`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a67386c9448) - add missing label for media avatar picker back button
+
+## 23.0.6
+
+### Patch Changes
+
+- [`48e4a655534`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48e4a655534) - Internal change to enforce token usage for spacing properties. There is no expected visual or behaviour change.
+
 ## 23.0.5
 
 ### Patch Changes

package/dist/cjs/MediaInlineCard/Icon.js

@@ -13,11 +13,11 @@ var _templateObject, _templateObject2;
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: -2px;\n"])));
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
 exports.AKIconWrapper = AKIconWrapper;

package/dist/cjs/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -25,7 +25,7 @@ var IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0,
 
 // Wraps all emoji in Inline Links similar to icon
 exports.IconWrapper = IconWrapper;
-var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
@@ -35,18 +35,18 @@ var IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject
 
 // TODO: Replace overrides with proper AtlasKit solution.
 exports.IconTitleWrapper = IconTitleWrapper;
-var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+var LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
 // TODO: Replace overrides with proper AtlasKit solution.
 exports.LozengeWrapper = LozengeWrapper;
-var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+var LozengeBlockWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
 exports.LozengeBlockWrapper = LozengeBlockWrapper;
-var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var RightIconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 exports.RightIconPositionWrapper = RightIconPositionWrapper;
-var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+var IconPositionWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
 exports.IconPositionWrapper = IconPositionWrapper;
 var IconEmptyWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
 exports.IconEmptyWrapper = IconEmptyWrapper;

package/dist/cjs/MediaInlineCard/LoadingView/styled.js

@@ -9,5 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
 var _templateObject;
-var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: baseline;\n  margin-left: 2px;\n"])));
+var SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: baseline;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");
 exports.SpinnerWrapper = SpinnerWrapper;

package/dist/cjs/customMediaPlayer/index.js

@@ -51,7 +51,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; } } /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */ // Keep media player components used in media-viewer to use static colors from the new color palette to
 // support the hybrid theming in media viewer https://product-fabric.atlassian.net/browse/DSP-6067
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "23.0.5";
+var packageVersion = "23.1.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/cjs/customMediaPlayer/styled.js

@@ -13,14 +13,21 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var CustomVideoWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  user-select: none;\n"])));
 exports.CustomVideoWrapper = CustomVideoWrapper;
 var VideoWrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.VideoWrapper = VideoWrapper;
 var TimebarWrapper = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
 exports.TimebarWrapper = TimebarWrapper;
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 var VolumeWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.VolumeWrapper = VolumeWrapper;
-var TimeWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 20px 10px 20px;\n  margin-bottom: 44px;\n"])));
+var TimeWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.TimeWrapper = TimeWrapper;
 var CurrentTime = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 exports.CurrentTime = CurrentTime;
@@ -31,24 +38,33 @@ exports.CurrentTimeLine = CurrentTimeLine;
 var Thumb = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 100%;\n  background-color: white;\n  border: 1px solid #666;\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  transform: translate(7px, -50%) scale(0);\n  transition: all 0.1s;\n  transition-delay: 1s;\n\n  &:hover .current-time-tooltip {\n    opacity: 1;\n  }\n"])));
 exports.Thumb = Thumb;
 var BufferedTime = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.BufferedTime = BufferedTime;
 var LeftControls = _styled.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: 10px;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.LeftControls = LeftControls;
 var RightControls = _styled.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 exports.RightControls = RightControls;
 var ControlsWrapper = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.ControlsWrapper = ControlsWrapper;
 var VolumeToggleWrapper = _styled.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
   return isMuted ? "#EF5C48 !important;" : '';
 });
 exports.VolumeToggleWrapper = VolumeToggleWrapper;
-var VolumeTimeRangeWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-right: 20px;\n"])));
+var VolumeTimeRangeWrapper = _styled.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 exports.VolumeTimeRangeWrapper = VolumeTimeRangeWrapper;
 var MutedIndicator = _styled.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), _colors.R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
 exports.MutedIndicator = MutedIndicator;
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 var CurrentTimeTooltip = _styled.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/cjs/messages.js

@@ -231,6 +231,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Default avatars',
     description: 'Showed above the default avatar list'
   },
+  avatar_picker_back_btn_label: {
+    id: 'fabric.media.avatar_picker_back_btn_label',
+    defaultMessage: 'Go Back',
+    description: 'Button text to navigate back to the previous screen'
+  },
   drag_and_drop_images_here: {
     id: 'fabric.media.drag_and_drop_images_here',
     defaultMessage: 'Drag and drop your images here',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.0.5",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/es2019/MediaInlineCard/Icon.js

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
@@ -8,7 +7,7 @@ import styled from '@emotion/styled';
 export const Icon = styled.img`
   height: 14px;
   width: 14px;
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   border-radius: 2px;
   user-select: none;
   position: absolute;
@@ -21,5 +20,5 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: -2px;
+  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
 `;

package/dist/es2019/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export const IconObjectOverrides = `
   & > span {
@@ -49,7 +48,7 @@ export const IconWrapper = styled.span`
 // Wraps all emoji in Inline Links similar to icon
 export const EmojiWrapper = styled.span`
   display: inline-block;
-  margin-right: 2px;
+  margin-right: ${"var(--ds-space-025, 2px)"};
   user-select: none;
   ${IconOverrides}
   ${IconObjectOverrides}
@@ -68,20 +67,20 @@ export const LozengeWrapper = styled.span`
   display: inline-block;
   vertical-align: 1px;
   & > span {
-    margin-left: 4px;
-    padding: 2px 0 2px 0;
+    margin-left: ${"var(--ds-space-050, 4px)"};
+    padding: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"} 0;
   }
 `;
 // TODO: Replace overrides with proper AtlasKit solution.
 export const LozengeBlockWrapper = styled.span`
   & > span {
-    margin-left: 4px;
-    padding: 2px 0 2px 0;
+    margin-left: ${"var(--ds-space-050, 4px)"};
+    padding: ${"var(--ds-space-025, 2px)"} 0 ${"var(--ds-space-025, 2px)"} 0;
   }
 `;
 export const RightIconPositionWrapper = styled.span`
-  margin-left: 2px;
-  margin-right: 4px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;
@@ -90,7 +89,7 @@ export const RightIconPositionWrapper = styled.span`
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 export const IconPositionWrapper = styled.span`
-  margin-right: 4px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
   position: relative;
   display: inline-block;
 `;

package/dist/es2019/MediaInlineCard/LoadingView/styled.js

@@ -2,5 +2,5 @@ import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
 export const SpinnerWrapper = styled(IconTitleWrapper)`
   vertical-align: baseline;
-  margin-left: 2px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
 `;

package/dist/es2019/customMediaPlayer/index.js

@@ -34,7 +34,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 const packageName = "@atlaskit/media-ui";
-const packageVersion = "23.0.5";
+const packageVersion = "23.1.0";
 const MEDIUM_VIDEO_MAX_WIDTH = 400;
 const SMALL_VIDEO_MAX_WIDTH = 160;
 const MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/es2019/customMediaPlayer/styled.js

@@ -12,6 +12,8 @@ export const VideoWrapper = styled.div`
   display: flex;
   flex-direction: column;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const TimebarWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -21,6 +23,7 @@ export const TimebarWrapper = styled.div`
   width: 100%;
   bottom: 10px;
 `;
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const VolumeWrapper = styled.div`
   display: flex;
   width: 35px;
@@ -38,10 +41,14 @@ export const VolumeWrapper = styled.div`
     }
   ` : ''}
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const TimeWrapper = styled.div`
-  margin: 0 20px 10px 20px;
+  margin: 0 ${"var(--ds-space-250, 20px)"} 10px ${"var(--ds-space-250, 20px)"};
   margin-bottom: 44px;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const CurrentTime = styled.div`
   color: #c7d1db;
   user-select: none;
@@ -90,10 +97,14 @@ export const BufferedTime = styled.div`
   border-radius: inherit;
   width: 0;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const LeftControls = styled.div`
   display: flex;
   margin-left: 10px;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const RightControls = styled.div`
   display: flex;
   align-items: center;
@@ -108,6 +119,8 @@ export const ControlsWrapper = styled.div`
   background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));
   position: absolute;
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const VolumeToggleWrapper = styled.div`
   position: relative;
   margin-right: 13px;
@@ -121,8 +134,10 @@ export const VolumeToggleWrapper = styled.div`
 `;
 export const VolumeTimeRangeWrapper = styled.div`
   width: 100%;
-  margin-right: 20px;
+  margin-right: ${"var(--ds-space-250, 20px)"};
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const MutedIndicator = styled.div`
   width: 29px;
   height: 2px;
@@ -139,6 +154,7 @@ export const MutedIndicator = styled.div`
     opacity: 1;
   ` : ''};
 `;
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const CurrentTimeTooltip = styled.div`
   position: absolute;
   user-select: none;

package/dist/es2019/messages.js

@@ -225,6 +225,11 @@ export const messages = defineMessages({
     defaultMessage: 'Default avatars',
     description: 'Showed above the default avatar list'
   },
+  avatar_picker_back_btn_label: {
+    id: 'fabric.media.avatar_picker_back_btn_label',
+    defaultMessage: 'Go Back',
+    description: 'Button text to navigate back to the previous screen'
+  },
   drag_and_drop_images_here: {
     id: 'fabric.media.drag_and_drop_images_here',
     defaultMessage: 'Drag and drop your images here',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.0.5",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/esm/MediaInlineCard/Icon.js

@@ -1,15 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
 import styled from '@emotion/styled';
-
 // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
 // Current rationale: vertically positioned at the top of
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
-export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: 4px;\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+export var Icon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 14px;\n  width: 14px;\n  margin-right: ", ";\n  border-radius: 2px;\n  user-select: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])), "var(--ds-space-050, 4px)");
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: -2px;\n"])));
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");

package/dist/esm/MediaInlineCard/IconAndTitleLayout/styled.js

@@ -1,7 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import styled from '@emotion/styled';
-
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 0;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 // TODO: remove this override behaviour for @atlaskit/icon
@@ -16,7 +15,7 @@ export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 14
 export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: 2px;\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
@@ -24,13 +23,13 @@ export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _t
 export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n"])));
 
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
+export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: 4px;\n    padding: 2px 0 2px 0;\n  }\n"])));
-export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: 2px;\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+export var LozengeBlockWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  & > span {\n    margin-left: ", ";\n    padding: ", " 0 ", " 0;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)");
+export var RightIconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: 4px;\n  position: relative;\n  display: inline-block;\n"])));
+export var IconPositionWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
 export var IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));

package/dist/esm/MediaInlineCard/LoadingView/styled.js

@@ -2,4 +2,4 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: baseline;\n  margin-left: 2px;\n"])));
+export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: baseline;\n  margin-left: ", ";\n"])), "var(--ds-space-025, 2px)");

package/dist/esm/customMediaPlayer/index.js

@@ -44,7 +44,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "23.0.5";
+var packageVersion = "23.1.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;

package/dist/esm/customMediaPlayer/styled.js

@@ -5,27 +5,43 @@ import styled from '@emotion/styled';
 import { R300 } from '@atlaskit/theme/colors';
 export var CustomVideoWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  user-select: none;\n"])));
 export var VideoWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var TimebarWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  color: white;\n  position: absolute;\n  width: 100%;\n  bottom: 10px;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var VolumeWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 35px;\n  overflow: hidden;\n  transition: width 0.3s;\n  align-items: center;\n  bottom: 0px;\n  left: 43px;\n\n  ", "\n"])), function (props) {
   return props.showSlider ? "\n    &:hover,\n    &:active {\n      width: 150px;\n      transition: width 0.3s ease-out;\n    }\n  " : '';
 });
-export var TimeWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 20px 10px 20px;\n  margin-bottom: 44px;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+export var TimeWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", " 10px ", ";\n  margin-bottom: 44px;\n"])), "var(--ds-space-250, 20px)", "var(--ds-space-250, 20px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var CurrentTime = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: #c7d1db;\n  user-select: none;\n  margin-right: 10px;\n  white-space: nowrap;\n"])));
 export var TimeLine = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 2px;\n  transition-delay: 1s;\n  transition: all 0.1s;\n  background-color: #596773;\n  border-radius: 5px;\n  position: relative;\n"])));
 export var CurrentTimeLine = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #05c;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
 export var Thumb = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  width: 14px;\n  height: 14px;\n  border-radius: 100%;\n  background-color: white;\n  border: 1px solid #666;\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  transform: translate(7px, -50%) scale(0);\n  transition: all 0.1s;\n  transition-delay: 1s;\n\n  &:hover .current-time-tooltip {\n    opacity: 1;\n  }\n"])));
 export var BufferedTime = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var LeftControls = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var RightControls = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: '#c7d1db';\n"])));
 export var ControlsWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var VolumeToggleWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: relative;\n  margin-right: 13px;\n\n  button {\n    width: 36px !important;\n    color: ", ";\n  }\n"])), function (_ref) {
   var isMuted = _ref.isMuted;
   return isMuted ? "#EF5C48 !important;" : '';
 });
-export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: 20px;\n"])));
+export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: ", ";\n"])), "var(--ds-space-250, 20px)");
+
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var MutedIndicator = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  width: 29px;\n  height: 2px;\n  position: absolute;\n  top: 10px;\n  left: 9px;\n  z-index: 2;\n  background: ", ";\n  transform: rotate(32deg) translateY(10px);\n  opacity: 0;\n  pointer-events: none;\n\n  ", ";\n"])), R300, function (props) {
   return props.isMuted ? "\n    opacity: 1;\n  " : '';
 });
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export var CurrentTimeTooltip = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  position: absolute;\n  user-select: none;\n  top: -28px;\n  background-color: #182c4c;\n  color: #eff1f3;\n  font-size: 12px;\n  padding: 3px 7px;\n  border-radius: 3px;\n  left: 50%;\n  transform: translateX(-50%);\n  opacity: ", ";\n  transition: opacity 0.3s;\n  word-break: keep-all;\n"])), function (props) {
   return props.isDragging ? '1' : '0';
 });

package/dist/esm/messages.js

@@ -225,6 +225,11 @@ export var messages = defineMessages({
     defaultMessage: 'Default avatars',
     description: 'Showed above the default avatar list'
   },
+  avatar_picker_back_btn_label: {
+    id: 'fabric.media.avatar_picker_back_btn_label',
+    defaultMessage: 'Go Back',
+    description: 'Button text to navigate back to the previous screen'
+  },
   drag_and_drop_images_here: {
     id: 'fabric.media.drag_and_drop_images_here',
     defaultMessage: 'Drag and drop your images here',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.0.5",
+	"version": "23.1.0",
 	"sideEffects": false
 }

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'request_access_description' | 'click_to_join_description' | 'request_access_pending_description' | 'click_to_join' | 'request_access' | 'request_access_pending' | 'forbidden_description' | 'request_denied_description';
-export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
+export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types-ts4.5/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'request_access_description' | 'click_to_join_description' | 'request_access_pending_description' | 'click_to_join' | 'request_access' | 'request_access_pending' | 'forbidden_description' | 'request_denied_description';
-export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
+export type MessageKey = 'retry' | 'failed_to_load' | 'failed_to_upload' | 'recent_uploads' | 'upload_file' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'upload' | 'cancel' | 'search_all_gifs' | 'cant_retrieve_gifs' | 'cant_retrieve_files' | 'check_your_network' | 'try_again' | 'try_another_account' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'load_more_gifs' | 'add_account' | 'unlink_account' | 'upload_file_from' | 'connect_to' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'invalid_permissions' | 'invalid_permissions_description' | 'upload_an_avatar' | 'loading' | 'loading_file' | 'save' | 'or' | 'upload_photo' | 'default_avatars' | 'avatar_picker_back_btn_label' | 'drag_and_drop_images_here' | 'upload_image' | 'image_url_invalid_error' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'something_went_wrong' | 'might_be_a_hiccup' | 'couldnt_generate_preview' | 'couldnt_generate_encrypted_entry_preview' | 'cant_preview_file_type' | 'item_not_found_in_list' | 'not_found_title' | 'not_found_description' | 'no_pdf_artifacts' | 'give_feedback' | 'try_downloading_file' | 'webgl_warning_description' | 'unable_to_annotate_image' | 'learn_more' | 'accounts' | 'actions' | 'error_hint_retry' | 'error_hint_critical' | 'close' | 'could_not_load_editor' | 'could_not_save_image' | 'could_not_load_link' | 'annotate' | 'annotate_tool_arrow' | 'annotate_tool_text' | 'annotate_tool_shape' | 'annotate_tool_brush' | 'annotate_tool_blur' | 'annotate_tool_line_thickness' | 'annotate_tool_color' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_heading' | 'annotate_confirmation_content' | 'drop_your_files_here' | 'share_files_instantly' | 'insert_files' | 'zoom_out' | 'zoom_in' | 'remove_image' | 'play' | 'pause' | 'disable_fullscreen' | 'enable_fullscreen' | 'error_loading_file' | 'error_generating_preview' | 'download' | 'unknown' | 'document' | 'audio' | 'video' | 'image' | 'archive' | 'email' | 'text' | 'displayThumbnail' | 'search' | 'view' | 'viewIn' | 'viewOriginal' | 'changeView' | 'playbackSpeed' | 'skipBackward' | 'skipForward' | 'playbackDefaultSpeed' | 'preview' | 'preview_unavailable' | 'preview_currently_unavailable' | 'creating_preview' | 'couldnt_load_file' | 'error_429' | 'close_and_reopen' | 'viewer_rateLimited' | 'zip_entry_load_fail' | RequestAccessMessageKey;
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/example-helpers/styled.ts

@@ -3,7 +3,7 @@ import { N900 } from '@atlaskit/theme/colors';
 import styled from '@emotion/styled';
 
 export const InputWrapper = styled.div`
-  margin: 20px 0;
+  margin: ${token('space.250', '20px')} 0;
 `;
 
 export const PreviewList = styled.ul`
@@ -16,6 +16,7 @@ export const PreviewInfo = styled.pre`
   font-size: 80%;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const PreviewItem = styled.li`
   border-radius: 10px;
   border: 1px solid ${token('color.border', '#ccc')};
@@ -26,6 +27,7 @@ export const PreviewItem = styled.li`
   margin-bottom: 10px;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const Code = styled.code`
   padding: 5px;
   border-radius: 5px;
@@ -34,6 +36,7 @@ export const Code = styled.code`
   font-size: 80%;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const CloseButton = styled.button`
   position: absolute;
   top: 5px;
@@ -41,18 +44,19 @@ export const CloseButton = styled.button`
   cursor: pointer;
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
 export const PreviewImageContainer = styled.div`
   margin-top: 10px;
   margin-bottom: 10px;
 `;
 
 export const OrientationSelectWrapper = styled.label`
-  margin-bottom: 20px;
+  margin-bottom: ${token('space.250', '20px')};
   display: block;
 `;
 
 export const TimeRangeWrapper = styled.div`
-  margin-top: 40px;
+  margin-top: ${token('space.500', '40px')};
 `;
 
 export const Container = styled.div`
@@ -60,7 +64,8 @@ export const Container = styled.div`
   flex-direction: row;
   flex-wrap: wrap;
 `;
+
 export const Group = styled.div`
   width: 250px;
-  padding: 20px;
+  padding: ${token('space.250', '20px')};
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-ui",
-  "version": "23.0.5",
+  "version": "23.1.0",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/icon-file-type": "^6.4.0",
@@ -57,7 +57,7 @@
     "@atlaskit/select": "^16.5.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/width-detector": "^4.1.0",
     "@babel/runtime": "^7.0.0",
@@ -76,8 +76,7 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.7.0",
-    "@atlaskit/button": "^16.7.0",
-    "@atlaskit/checkbox": "^12.6.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/docs": "*",
     "@atlaskit/lozenge": "^11.4.0",
     "@atlaskit/media-test-helpers": "^33.0.0",
@@ -107,7 +106,8 @@
     },
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   },

package/report.api.md

@@ -545,6 +545,7 @@ export type MessageKey =
   | 'annotate_tool_text'
   | 'archive'
   | 'audio'
+  | 'avatar_picker_back_btn_label'
   | 'cancel'
   | 'cant_preview_file_type'
   | 'cant_retrieve_files'

package/tmp/api-report-tmp.d.ts

@@ -466,7 +466,7 @@ type MediaTypeProps = {
 };
 
 // @public (undocumented)
-export type MessageKey = 'accounts' | 'actions' | 'add_account' | 'annotate' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_content' | 'annotate_confirmation_heading' | 'annotate_tool_arrow' | 'annotate_tool_blur' | 'annotate_tool_brush' | 'annotate_tool_color' | 'annotate_tool_line_thickness' | 'annotate_tool_shape' | 'annotate_tool_text' | 'archive' | 'audio' | 'cancel' | 'cant_preview_file_type' | 'cant_retrieve_files' | 'cant_retrieve_gifs' | 'changeView' | 'check_your_network' | 'close' | 'close_and_reopen' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_description' | 'connect_link_account_card_name' | 'connect_to' | 'could_not_load_editor' | 'could_not_load_link' | 'could_not_save_image' | 'couldnt_generate_encrypted_entry_preview' | 'couldnt_generate_preview' | 'couldnt_load_file' | 'creating_preview' | 'default_avatars' | 'disable_fullscreen' | 'displayThumbnail' | 'document' | 'download' | 'drag_and_drop_images_here' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'drop_your_files_here' | 'email' | 'enable_fullscreen' | 'error_429' | 'error_generating_preview' | 'error_hint_critical' | 'error_hint_retry' | 'error_loading_file' | 'failed_to_load' | 'failed_to_upload' | 'give_feedback' | 'image' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'image_url_invalid_error' | 'insert_files' | 'invalid_permissions' | 'invalid_permissions_description' | 'item_not_found_in_list' | 'learn_more' | 'load_more_gifs' | 'loading' | 'loading_file' | 'might_be_a_hiccup' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'no_pdf_artifacts' | 'not_found_description' | 'not_found_title' | 'or' | 'pause' | 'play' | 'playbackDefaultSpeed' | 'playbackSpeed' | 'preview' | 'preview_currently_unavailable' | 'preview_unavailable' | 'recent_uploads' | 'remove_image' | 'retry' | 'save' | 'search' | 'search_all_gifs' | 'share_files_instantly' | 'skipBackward' | 'skipForward' | 'something_went_wrong' | 'text' | 'try_again' | 'try_another_account' | 'try_downloading_file' | 'unable_to_annotate_image' | 'unknown' | 'unlink_account' | 'upload' | 'upload_an_avatar' | 'upload_file' | 'upload_file_from' | 'upload_image' | 'upload_photo' | 'video' | 'view' | 'viewIn' | 'viewOriginal' | 'viewer_rateLimited' | 'webgl_warning_description' | 'zip_entry_load_fail' | 'zoom_in' | 'zoom_out' | RequestAccessMessageKey;
+export type MessageKey = 'accounts' | 'actions' | 'add_account' | 'annotate' | 'annotate_confirmation_close_anyway' | 'annotate_confirmation_content' | 'annotate_confirmation_heading' | 'annotate_tool_arrow' | 'annotate_tool_blur' | 'annotate_tool_brush' | 'annotate_tool_color' | 'annotate_tool_line_thickness' | 'annotate_tool_shape' | 'annotate_tool_text' | 'archive' | 'audio' | 'avatar_picker_back_btn_label' | 'cancel' | 'cant_preview_file_type' | 'cant_retrieve_files' | 'cant_retrieve_gifs' | 'changeView' | 'check_your_network' | 'close' | 'close_and_reopen' | 'connect_account_description' | 'connect_link_account' | 'connect_link_account_card' | 'connect_link_account_card_description' | 'connect_link_account_card_name' | 'connect_to' | 'could_not_load_editor' | 'could_not_load_link' | 'could_not_save_image' | 'couldnt_generate_encrypted_entry_preview' | 'couldnt_generate_preview' | 'couldnt_load_file' | 'creating_preview' | 'default_avatars' | 'disable_fullscreen' | 'displayThumbnail' | 'document' | 'download' | 'drag_and_drop_images_here' | 'drag_and_drop_your_files' | 'drag_and_drop_your_files_and_folders' | 'drop_your_files' | 'drop_your_files_here' | 'email' | 'enable_fullscreen' | 'error_429' | 'error_generating_preview' | 'error_hint_critical' | 'error_hint_retry' | 'error_loading_file' | 'failed_to_load' | 'failed_to_upload' | 'give_feedback' | 'image' | 'image_format_invalid_error' | 'image_size_too_large_error' | 'image_url_invalid_error' | 'insert_files' | 'invalid_permissions' | 'invalid_permissions_description' | 'item_not_found_in_list' | 'learn_more' | 'load_more_gifs' | 'loading' | 'loading_file' | 'might_be_a_hiccup' | 'no_gifs_found' | 'no_gifs_found_suggestion' | 'no_pdf_artifacts' | 'not_found_description' | 'not_found_title' | 'or' | 'pause' | 'play' | 'playbackDefaultSpeed' | 'playbackSpeed' | 'preview' | 'preview_currently_unavailable' | 'preview_unavailable' | 'recent_uploads' | 'remove_image' | 'retry' | 'save' | 'search' | 'search_all_gifs' | 'share_files_instantly' | 'skipBackward' | 'skipForward' | 'something_went_wrong' | 'text' | 'try_again' | 'try_another_account' | 'try_downloading_file' | 'unable_to_annotate_image' | 'unknown' | 'unlink_account' | 'upload' | 'upload_an_avatar' | 'upload_file' | 'upload_file_from' | 'upload_image' | 'upload_photo' | 'video' | 'view' | 'viewIn' | 'viewOriginal' | 'viewer_rateLimited' | 'webgl_warning_description' | 'zip_entry_load_fail' | 'zoom_in' | 'zoom_out' | RequestAccessMessageKey;
 
 // @public (undocumented)
 type Messages = {