@atlaskit/media-ui 23.0.4 → 23.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/media-ui
 
+## 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
+
+- [`da9024f099f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/da9024f099f) - MEX-2432 Enable range selection on MediaInline component
+
 ## 23.0.4
 
 ### 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/index.js

@@ -96,7 +96,9 @@ var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         style: titleColor ? {
           color: titleColor
         } : undefined
-      }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, null, title)));
+      }, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, null, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement("span", {
+        "data-test-id": "title"
+      }, title)));
     }
   }]);
   return IconAndTitleLayout;

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

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.LozengeBlockWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 // TODO: remove this override behaviour for @atlaskit/icon-object
 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
@@ -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,20 +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;
-var TitleWrapper = _styled.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ::selection {\n    background: none;\n  }\n"])));
-exports.TitleWrapper = TitleWrapper;
+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.4";
+var packageVersion = "23.0.6";
 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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.0.4",
+	"version": "23.0.6",
 	"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/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
-import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
+import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 export class IconAndTitleLayout extends React.Component {
   renderAtlaskitIcon() {
@@ -71,6 +71,8 @@ export class IconAndTitleLayout extends React.Component {
       style: titleColor ? {
         color: titleColor
       } : undefined
-    }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
+    }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement("span", {
+      "data-test-id": "title"
+    }, title)));
   }
 }

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;
 `;
@@ -99,9 +98,4 @@ export const IconEmptyWrapper = styled.span`
   height: 100%;
   display: inline-block;
   opacity: 0;
-`;
-export const TitleWrapper = styled.span`
-  ::selection {
-    background: none;
-  }
 `;

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.4";
+const packageVersion = "23.0.6";
 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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/media-ui",
-	"version": "23.0.4",
+	"version": "23.0.6",
 	"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/index.js

@@ -8,7 +8,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
-import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
+import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
 export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(IconAndTitleLayout, _React$Component);
@@ -89,7 +89,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         style: titleColor ? {
           color: titleColor
         } : undefined
-      }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, null, title)));
+      }, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement("span", {
+        "data-test-id": "title"
+      }, title)));
     }
   }]);
   return IconAndTitleLayout;

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, _templateObject9;
+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,14 +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 IconEmptyWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
-export var TitleWrapper = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ::selection {\n    background: none;\n  }\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.4";
+var packageVersion = "23.0.6";
 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/version.json

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

package/dist/types/MediaInlineCard/IconAndTitleLayout/styled.d.ts

@@ -33,7 +33,3 @@ export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/types-ts4.5/MediaInlineCard/IconAndTitleLayout/styled.d.ts

@@ -33,7 +33,3 @@ export declare const IconEmptyWrapper: import("@emotion/styled").StyledComponent
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const TitleWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

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.4",
+  "version": "23.0.6",
   "description": "Includes common components and utilities used by other media packages",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -107,7 +107,8 @@
     },
     "@repo/internal": {
       "design-tokens": [
-        "color"
+        "color",
+        "spacing"
       ]
     }
   },