@atlaskit/media-ui 22.1.2 → 22.2.0

package/dist/es2019/customMediaPlayer/playbackSpeedControls.js

@@ -1,8 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Keep PlaybackSpeedControls 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
 import React from 'react';
 import { Component } from 'react';
 import { PopupSelect } from '@atlaskit/select';
-import { B200, N900, N0, N600 } from '@atlaskit/theme/colors';
+import { N600 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import MediaButton from '../MediaButton';
@@ -16,7 +20,7 @@ export class PlaybackSpeedControls extends Component {
       popupHeight: 255
     });
 
-    _defineProperty(this, "onPlaybackSpeedChange", option => {
+    _defineProperty(this, "onPlaybackSpeedChange", (option, _actionMeta) => {
       const {
         onPlaybackSpeedChange
       } = this.props;
@@ -30,6 +34,7 @@ export class PlaybackSpeedControls extends Component {
     });
 
     _defineProperty(this, "speedOptions", () => [{
+      // @ts-ignore: FormattedMessage is returning an Element which is a type mismatch with what OptionType wants. This can be fix by using 'intl' object once this packages gets refactor later.
       label: /*#__PURE__*/React.createElement(FormattedMessage, messages.playbackSpeed),
       options: [{
         label: '0.75x',
@@ -51,7 +56,8 @@ export class PlaybackSpeedControls extends Component {
 
     _defineProperty(this, "popupCustomStyles", {
       container: styles => ({ ...styles,
-        backgroundColor: N900
+        backgroundColor: '#22272b',
+        boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
       }),
       // added these overrides to keep the look of the current design
       // however this does not benefit from the DS a11y changes
@@ -62,8 +68,14 @@ export class PlaybackSpeedControls extends Component {
         isFocused,
         isSelected
       }) => ({ ...styles,
-        color: isSelected ? N0 : 'inherit',
-        backgroundColor: isSelected ? B200 : isFocused ? N600 : N900
+        color: isSelected ? '#579dff' : 'inherit',
+        backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
+        ':active': {
+          backgroundColor: '#a6c5e229'
+        }
+      }),
+      groupHeading: styles => ({ ...styles,
+        color: '#9fadbc'
       })
     });
 

package/dist/es2019/customMediaPlayer/styled.js

@@ -1,5 +1,6 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import styled from '@emotion/styled';
-import { R300, N60 } from '@atlaskit/theme/colors';
+import { R300 } from '@atlaskit/theme/colors';
 export const CustomVideoWrapper = styled.div`
   width: 100%;
   height: 100%;
@@ -42,7 +43,7 @@ export const TimeWrapper = styled.div`
   margin-bottom: 44px;
 `;
 export const CurrentTime = styled.div`
-  color: #a4b4cb;
+  color: #c7d1db;
   user-select: none;
   margin-right: 10px;
   white-space: nowrap;
@@ -52,12 +53,12 @@ export const TimeLine = styled.div`
   height: 2px;
   transition-delay: 1s;
   transition: all 0.1s;
-  background-color: #5d646f;
+  background-color: #596773;
   border-radius: 5px;
   position: relative;
 `;
 export const CurrentTimeLine = styled.div`
-  background-color: #3383ff;
+  background-color: #05c;
   border-radius: inherit;
   height: inherit;
   position: absolute;
@@ -84,7 +85,7 @@ export const Thumb = styled.div`
   }
 `;
 export const BufferedTime = styled.div`
-  background-color: #aeb1b7;
+  background-color: #8696a7;
   height: inherit;
   border-radius: inherit;
   width: 0;
@@ -97,14 +98,14 @@ export const RightControls = styled.div`
   display: flex;
   align-items: center;
   margin-right: 10px;
-  color: ${N60};
+  color: '#c7d1db';
 `;
 export const ControlsWrapper = styled.div`
   bottom: 0;
   left: 0;
   width: 100%;
   height: auto;
-  background: linear-gradient(to top, #0e1624, rgba(14, 22, 36, 0));
+  background: linear-gradient(to top, #101214, rgba(14, 22, 36, 0));
   position: absolute;
 `;
 export const VolumeToggleWrapper = styled.div`
@@ -115,7 +116,7 @@ export const VolumeToggleWrapper = styled.div`
     width: 36px !important;
     color: ${({
   isMuted
-}) => isMuted ? `${R300} !important;` : ''};
+}) => isMuted ? `#EF5C48 !important;` : ''};
   }
 `;
 export const VolumeTimeRangeWrapper = styled.div`

package/dist/es2019/errorIcon.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 const style = `
 .cls-1{fill:url(#linear-gradient);}

package/dist/es2019/mime-type-icon.js

@@ -26,7 +26,7 @@ export const MimeTypeIcon = ({
     }, /*#__PURE__*/React.createElement(Icon, {
       label: iconInfo.label
     }));
-  } // no correponding mimetype icon/label was found.
+  } // no corresponding mimetype icon/label was found.
   // Hence, return a mediatype (image/doc/audio/video/unknown) icon
 
 

package/dist/es2019/version.json

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

package/dist/esm/MediaButton.js

@@ -9,9 +9,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// Keep Media buttons 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
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-import { DN60, B75, DN400, B400, DN100, B100, B200, DN70, DN30 } from '@atlaskit/theme/colors';
 var buttonTheme = {
   default: {
     background: {
@@ -19,55 +21,65 @@ var buttonTheme = {
         light: 'transparent'
       },
       hover: {
-        light: DN60
+        light: '#a1bdd914'
       },
       active: {
-        light: B75
+        light: '#a6c5e229'
       }
     },
     boxShadowColor: {
       focus: {
-        light: B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: DN400
+        light: '#c7d1db'
       },
       hover: {
-        light: DN400
+        light: '#c7d1db'
       },
       active: {
-        light: B400
+        light: '#c7d1db'
       },
       disabled: {
-        light: DN100
+        light: '#bfdbf847'
+      },
+      focus: {
+        light: '#c7d1db'
       }
     }
   },
   primary: {
     background: {
       default: {
-        light: B100
+        light: '#579dff'
       },
       hover: {
-        light: B75
+        light: '#85b8ff'
       },
       active: {
-        light: B200
+        light: '#cce0ff'
       },
       disabled: {
-        light: DN70
+        light: '#bcd6f00a'
       }
     },
     boxShadowColor: {
       focus: {
-        light: B75
+        light: '#85b8ff'
       }
     },
     color: {
       default: {
-        light: DN30
+        light: '#161a1d'
+      }
+    }
+  },
+  selected: {
+    color: {
+      default: {
+        light: 'red'
       }
     }
   }

package/dist/esm/MediaInlineCard/ErroredView/index.js

@@ -10,6 +10,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+import { token } from '@atlaskit/tokens';
 import React from 'react';
 import { R300 } from '@atlaskit/theme/colors';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
@@ -59,7 +60,7 @@ export var MediaInlineCardErroredView = /*#__PURE__*/function (_React$Component)
         icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(WarningIcon, {
           label: "error",
           size: "small",
-          primaryColor: R300
+          primaryColor: token('color.icon.danger', R300)
         })),
         title: this.renderMessage()
       }));

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

@@ -2,14 +2,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
-import { B300, N30A, N40A, text } from '@atlaskit/theme/colors';
+import { B300, N30A, N40A, N900 } from '@atlaskit/theme/colors';
 import { borderRadius as akBorderRadius } from '@atlaskit/theme/constants';
-import { themed } from '@atlaskit/theme/components';
-var FONT_COLOR = text; // TODO: Dark mode background color to be added in the future.
-
-var BACKGROUND_COLOR_LIGHT = N30A;
-var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(B300, ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
+var FONT_COLOR = token('color.text', N900);
+var BACKGROUND_COLOR = token('color.background.neutral', N30A);
+var selected = "\n  cursor: pointer;\n  box-shadow: 0 0 0 1px ".concat(token('color.border.selected', B300), ";\n  outline: none;\n  user-select: none;\n  border-color: transparent;\n  &, :hover, :focus, :active {\n    text-decoration: none;\n  }\n");
 
 var isSelected = function isSelected(_ref) {
   var isSelected = _ref.isSelected;
@@ -34,8 +33,6 @@ var isSelected = function isSelected(_ref) {
 // NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
 
 
-export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), akBorderRadius(), FONT_COLOR, themed({
-  light: BACKGROUND_COLOR_LIGHT
-}), function (props) {
+export var Wrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  line-height: 16px;\n  padding: 2px 4px 2px 4px;\n  box-decoration-break: clone;\n  display: inline;\n  border-radius: ", "px;\n  color: ", ";\n  background-color: ", ";\n  ", ";\n  transition: 0.1s all ease-in-out;\n  -moz-user-select: none;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), akBorderRadius(), FONT_COLOR, BACKGROUND_COLOR, function (props) {
   return isSelected(props);
-}, N40A);
+}, token('color.background.neutral.hovered', N40A));

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

@@ -13,6 +13,8 @@ import ImageLoader from 'react-render-image';
 import { Icon } from '../Icon';
 import { IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, EmojiWrapper } from './styled';
 import LinkIcon from '@atlaskit/icon/glyph/link';
+import { token } from '@atlaskit/tokens';
+import { N900 } from '@atlaskit/theme/colors';
 export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   _inherits(IconAndTitleLayout, _React$Component);
 
@@ -103,7 +105,7 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2$testId === void 0 ? 'media-inline-card-icon-and-title' : _this$props2$testId;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconTitleWrapper, {
         style: {
-          color: titleColor
+          color: titleColor || token('color.text', N900)
         }
       }, /*#__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)));
     }

package/dist/esm/MediaInlineCard/styled.js

@@ -2,10 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+import { token } from '@atlaskit/tokens';
 import styled from '@emotion/styled';
 import { N200 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components'; // TODO: Dark mode colors to be added in the future.
-
-export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), themed({
-  light: N200
-}));
+export var NoLinkAppearance = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), token('color.text.subtlest', N200));

package/dist/esm/customMediaPlayer/index.js

@@ -14,6 +14,9 @@ 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
 import React from 'react';
 import { Component } from 'react';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -29,7 +32,7 @@ import MediaButton from '../MediaButton';
 import Spinner from '@atlaskit/spinner';
 import { WidthObserver } from '@atlaskit/width-detector';
 import MediaPlayer from 'react-video-renderer';
-import { B200, DN400, N0, DN60 } from '@atlaskit/theme/colors';
+import { N0, DN60 } from '@atlaskit/theme/colors';
 import { TimeRange } from './timeRange';
 import { CurrentTime, VideoWrapper, CustomVideoWrapper, TimebarWrapper, VolumeWrapper, TimeWrapper, LeftControls, RightControls, ControlsWrapper, VolumeToggleWrapper, MutedIndicator, SpinnerWrapper, VolumeTimeRangeWrapper } from './styled';
 import { fireAnalyticsEvent, relevantFeatureFlagNames, createCustomMediaPlayerScreenEvent, createMediaButtonClickedEvent, createMediaShortcutPressedEvent, createPlayPauseBlanketClickedEvent, createTimeRangeNavigatedEvent, createPlaybackSpeedChangedEvent, createFirstPlayedTrackEvent, createPlayedTrackEvent } from './analytics';
@@ -46,7 +49,7 @@ import Tooltip from '@atlaskit/tooltip';
 import { SkipTenBackwardIcon, SkipTenForwardIcon } from './icons';
 import { getControlsWrapperClassName } from './getControlsWrapperClassName';
 var packageName = "@atlaskit/media-ui";
-var packageVersion = "22.1.2";
+var packageVersion = "22.2.0";
 var MEDIUM_VIDEO_MAX_WIDTH = 400;
 var SMALL_VIDEO_MAX_WIDTH = 160;
 var MINIMUM_DURATION_BEFORE_SAVING_TIME = 60;
@@ -145,7 +148,7 @@ export var CustomMediaPlayerBase = /*#__PURE__*/function (_Component) {
         return;
       }
 
-      var primaryColor = isHDActive ? B200 : DN400;
+      var primaryColor = isHDActive ? '#579DFF' : '#c7d1db';
       var secondaryColor = isHDActive ? N0 : DN60;
       return /*#__PURE__*/React.createElement(MediaButton, {
         testId: "custom-media-player-hd-button",

package/dist/esm/customMediaPlayer/playbackSpeedControls.js

@@ -14,10 +14,13 @@ 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 PlaybackSpeedControls 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
 import React from 'react';
 import { Component } from 'react';
 import { PopupSelect } from '@atlaskit/select';
-import { B200, N900, N0, N600 } from '@atlaskit/theme/colors';
+import { N600 } from '@atlaskit/theme/colors';
 import { FormattedMessage, injectIntl } from 'react-intl-next';
 import Tooltip from '@atlaskit/tooltip';
 import MediaButton from '../MediaButton';
@@ -43,7 +46,7 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
       popupHeight: 255
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onPlaybackSpeedChange", function (option) {
+    _defineProperty(_assertThisInitialized(_this), "onPlaybackSpeedChange", function (option, _actionMeta) {
       var onPlaybackSpeedChange = _this.props.onPlaybackSpeedChange;
 
       if (!option) {
@@ -56,6 +59,7 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "speedOptions", function () {
       return [{
+        // @ts-ignore: FormattedMessage is returning an Element which is a type mismatch with what OptionType wants. This can be fix by using 'intl' object once this packages gets refactor later.
         label: /*#__PURE__*/React.createElement(FormattedMessage, messages.playbackSpeed),
         options: [{
           label: '0.75x',
@@ -79,7 +83,8 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "popupCustomStyles", {
       container: function container(styles) {
         return _objectSpread(_objectSpread({}, styles), {}, {
-          backgroundColor: N900
+          backgroundColor: '#22272b',
+          boxShadow: 'inset 0px 0px 0px 1px #bcd6f00a,0px 8px 12px #0304045c,0px 0px 1px #03040480'
         });
       },
       // added these overrides to keep the look of the current design
@@ -93,8 +98,16 @@ export var PlaybackSpeedControls = /*#__PURE__*/function (_Component) {
         var isFocused = _ref.isFocused,
             isSelected = _ref.isSelected;
         return _objectSpread(_objectSpread({}, styles), {}, {
-          color: isSelected ? N0 : 'inherit',
-          backgroundColor: isSelected ? B200 : isFocused ? N600 : N900
+          color: isSelected ? '#579dff' : 'inherit',
+          backgroundColor: isSelected ? '#082145' : isFocused ? '#a1bdd914' : '#22272b',
+          ':active': {
+            backgroundColor: '#a6c5e229'
+          }
+        });
+      },
+      groupHeading: function groupHeading(styles) {
+        return _objectSpread(_objectSpread({}, styles), {}, {
+          color: '#9fadbc'
         });
       }
     });

package/dist/esm/customMediaPlayer/styled.js

@@ -2,8 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import styled from '@emotion/styled';
-import { R300, N60 } from '@atlaskit/theme/colors';
+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"])));
 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"])));
@@ -11,17 +12,17 @@ export var VolumeWrapper = styled.div(_templateObject4 || (_templateObject4 = _t
   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"])));
-export var CurrentTime = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: #a4b4cb;\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: #5d646f;\n  border-radius: 5px;\n  position: relative;\n"])));
-export var CurrentTimeLine = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  background-color: #3383ff;\n  border-radius: inherit;\n  height: inherit;\n  position: absolute;\n  top: 0;\n  max-width: 100%;\n"])));
+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: #aeb1b7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
+export var BufferedTime = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  background-color: #8696a7;\n  height: inherit;\n  border-radius: inherit;\n  width: 0;\n"])));
 export var LeftControls = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: 10px;\n"])));
-export var RightControls = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-right: 10px;\n  color: ", ";\n"])), N60);
-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, #0e1624, rgba(14, 22, 36, 0));\n  position: absolute;\n"])));
+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"])));
 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 ? "".concat(R300, " !important;") : '';
+  return isMuted ? "#EF5C48 !important;" : '';
 });
 export var VolumeTimeRangeWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin-right: 20px;\n"])));
 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) {

package/dist/esm/errorIcon.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React from 'react';
 var style = "\n.cls-1{fill:url(#linear-gradient);}\n.cls-2{fill:#253858;}\n.cls-3{fill:#ffc400;}\n.cls-4{fill:#ffab00;}\n.cls-5,.cls-6{fill:none;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}\n.cls-5{stroke:#344563;}\n.cls-6{stroke:#5e6c84;}\n";
 export var errorIcon = /*#__PURE__*/React.createElement("svg", {

package/dist/esm/mime-type-icon.js

@@ -29,7 +29,7 @@ export var MimeTypeIcon = function MimeTypeIcon(_ref) {
     }, /*#__PURE__*/React.createElement(Icon, {
       label: iconInfo.label
     }));
-  } // no correponding mimetype icon/label was found.
+  } // no corresponding mimetype icon/label was found.
   // Hence, return a mediatype (image/doc/audio/video/unknown) icon
 
 

package/dist/esm/version.json

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

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

@@ -1,4 +1,2 @@
 /// <reference types="react" />
-export declare const NoLinkAppearance: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("@emotion/styled-base/types/helper").Overwrapped<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, import("@atlaskit/theme").ThemeProps | undefined>, never>, {
-    __ATLASKIT_THEME__: import("@atlaskit/theme").Theme;
-}>;
+export declare const NoLinkAppearance: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>, keyof import("react").HTMLAttributes<HTMLSpanElement>>, object>;

package/dist/types/media-type-icon.d.ts

@@ -7,6 +7,7 @@ export interface FileIconProps {
     testId?: string;
     type?: MediaType;
     size?: 'small' | 'large';
+    className?: string;
 }
 export declare const IconWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size: Required<FileIconProps['size']>;

package/errorIcon/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/errorIcon.js",
   "module:es2019": "../dist/es2019/errorIcon.js",
   "sideEffects": false,
-  "types": "../dist/types/errorIcon.d.ts"
+  "types": "../dist/types/errorIcon.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/errorIcon.d.ts"
+      ]
+    }
+  }
 }

package/example-helpers/styled.ts

@@ -1,3 +1,5 @@
+import { token } from '@atlaskit/tokens';
+import { N900 } from '@atlaskit/theme/colors';
 import styled from '@emotion/styled';
 
 export const InputWrapper = styled.div`
@@ -16,7 +18,7 @@ export const PreviewInfo = styled.pre`
 
 export const PreviewItem = styled.li`
   border-radius: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid ${token('color.border', '#ccc')};
   padding: 10px;
   overflow: auto;
   max-height: 600px;
@@ -27,8 +29,8 @@ export const PreviewItem = styled.li`
 export const Code = styled.code`
   padding: 5px;
   border-radius: 5px;
-  background-color: #ccc;
-  color: white;
+  background-color: ${token('color.background.inverse.subtle', '#0002')};
+  color: ${token('color.text', N900)};
   font-size: 80%;
 `;
 

package/formatDate/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/formatDate.js",
   "module:es2019": "../dist/es2019/formatDate.js",
   "sideEffects": false,
-  "types": "../dist/types/formatDate.d.ts"
+  "types": "../dist/types/formatDate.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/formatDate.d.ts"
+      ]
+    }
+  }
 }

package/locales/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/locales.js",
   "module:es2019": "../dist/es2019/locales.js",
   "sideEffects": false,
-  "types": "../dist/types/locales.d.ts"
+  "types": "../dist/types/locales.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/locales.d.ts"
+      ]
+    }
+  }
 }

package/media-type-icon/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/media-type-icon.js",
   "module:es2019": "../dist/es2019/media-type-icon.js",
   "sideEffects": false,
-  "types": "../dist/types/media-type-icon.d.ts"
+  "types": "../dist/types/media-type-icon.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/media-type-icon.d.ts"
+      ]
+    }
+  }
 }

package/messages/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/messages.js",
   "module:es2019": "../dist/es2019/messages.js",
   "sideEffects": false,
-  "types": "../dist/types/messages.d.ts"
+  "types": "../dist/types/messages.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/messages.d.ts"
+      ]
+    }
+  }
 }

package/mime-type-icon/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/mime-type-icon.js",
   "module:es2019": "../dist/es2019/mime-type-icon.js",
   "sideEffects": false,
-  "types": "../dist/types/mime-type-icon.d.ts"
+  "types": "../dist/types/mime-type-icon.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/mime-type-icon.d.ts"
+      ]
+    }
+  }
 }

package/modalSpinner/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/modalSpinner.js",
   "module:es2019": "../dist/es2019/modalSpinner.js",
   "sideEffects": false,
-  "types": "../dist/types/modalSpinner.d.ts"
+  "types": "../dist/types/modalSpinner.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/modalSpinner.d.ts"
+      ]
+    }
+  }
 }