@atlaskit/media-card 74.2.0 → 74.3.0

package/dist/types/card/getCardPreview/helpers.d.ts

@@ -1,4 +1,5 @@
 import { MediaClient, FilePreview, MediaStoreGetFileImageParams, MediaType } from '@atlaskit/media-client';
+import { MediaTraceContext } from '@atlaskit/media-common';
 import { CardPreview } from '../../types';
 /**
  * This method tells the support for the media
@@ -6,4 +7,4 @@ import { CardPreview } from '../../types';
  */
 export declare const isSupportedLocalPreview: (mediaType?: MediaType | undefined) => boolean;
 export declare const getCardPreviewFromFilePreview: (filePreview: FilePreview | Promise<FilePreview>) => Promise<CardPreview>;
-export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceId?: string | undefined) => Promise<CardPreview>;
+export declare const getCardPreviewFromBackend: (mediaClient: MediaClient, id: string, params: MediaStoreGetFileImageParams, traceContext?: MediaTraceContext | undefined) => Promise<CardPreview>;

package/dist/types/card/getCardPreview/index.d.ts

@@ -1,5 +1,5 @@
 import { MediaClient, FilePreview, FileState, MediaStoreGetFileImageParams, MediaBlobUrlAttrs, FileIdentifier } from '@atlaskit/media-client';
-import { MediaFeatureFlags, SSR } from '@atlaskit/media-common';
+import { MediaFeatureFlags, SSR, MediaTraceContext } from '@atlaskit/media-common';
 import { ImageResizeMode } from '@atlaskit/media-client';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { CardDimensions } from '../../types';
@@ -25,7 +25,7 @@ export declare type CardPreviewParams = {
     mediaBlobUrlAttrs?: MediaBlobUrlAttrs;
     createAnalyticsEvent?: CreateUIAnalyticsEvent;
     featureFlags?: MediaFeatureFlags;
-    traceId?: string;
+    traceContext?: MediaTraceContext;
 };
 /**
  * This function will try to return a Card preview, either from cache, local preview or remote preview.
@@ -37,7 +37,7 @@ export declare type CardPreviewParams = {
  * In that case, we still want to report the local preview error to the caller, for feature realiability track.
  * hence the use of the optional callback onLocalPreviewError
  */
-export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceId, }: CardPreviewParams) => Promise<CardPreview>;
+export declare const getCardPreview: ({ mediaClient, id, dimensions, filePreview, onLocalPreviewError, isRemotePreviewReady, imageUrlParams, mediaBlobUrlAttrs, createAnalyticsEvent, featureFlags, traceContext, }: CardPreviewParams) => Promise<CardPreview>;
 export declare const shouldResolvePreview: ({ status, fileState, prevDimensions, dimensions, identifier, fileImageMode, hasCardPreview, isBannedLocalPreview, featureFlags, }: {
     status: CardStatus;
     fileState: FileState;
@@ -55,4 +55,4 @@ export declare const isSSRPreview: (preview: CardPreview) => boolean;
 export declare const isSSRServerPreview: (preview: CardPreview) => boolean;
 export declare const isSSRClientPreview: (preview: CardPreview) => boolean;
 export declare const isSSRDataPreview: (preview: CardPreview) => boolean;
-export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined, traceId?: string | undefined) => Promise<CardPreview>;
+export declare const fetchAndCacheRemotePreview: (mediaClient: MediaClient, id: string, dimensions: CardDimensions, params: MediaStoreGetFileImageParams, mediaBlobUrlAttrs?: MediaBlobUrlAttrs | undefined, traceContext?: MediaTraceContext | undefined) => Promise<CardPreview>;

package/dist/types/card/styles/index.d.ts

@@ -4,6 +4,6 @@ export type { WithAppearanceProps } from './mixins';
 export { easeOutCubic, easeOutExpo } from './easing';
 export { spin } from './animations';
 export declare const rootStyles: () => import("@emotion/react").SerializedStyles;
-export declare const cardShadow = "\n  box-shadow: 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24);\n";
+export declare const cardShadow: string;
 export declare const fadeinImageStyles: () => import("@emotion/react").SerializedStyles;
 export default rootStyles;

package/example-helpers/styles.ts

@@ -1,8 +1,9 @@
+import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
 export const editableCardOptionsStyles = css`
   padding: 20px;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${token('color.border', '#ccc')};
   max-width: 700px;
 `;
 
@@ -22,7 +23,10 @@ export const editableCardContentStyles = css`
   border: 2px dashed;
   margin: 0 10px 50px 10px;
   overflow: hidden;
-  background: antiquewhite;
+  background: ${token(
+    'color.background.accent.orange.subtlest',
+    'antiquewhite',
+  )};
   box-sizing: border-box;
 `;
 
@@ -40,7 +44,7 @@ export const cardDimensionsWrapperStyles = css`
   display: flex;
 
   > div {
-    border: 1px solid;
+    border: 1px solid ${token('color.border.bold', 'black')};
     margin: 5px;
     padding: 5px;
     border-radius: 3px;
@@ -55,7 +59,7 @@ export const cardPreviewWrapperStyles = css`
 `;
 
 export const cardWrapperStyles = css`
-  border: 1px solid;
+  border: 1px solid ${token('color.border.bold', 'black')};
   padding: 10px;
   margin: 5px;
   flex-direction: column;
@@ -82,7 +86,7 @@ export const externalIdentifierWrapperStyles = css`
 
 export const inlineCardVideoWrapperItemStyles = css`
   padding: 10px;
-  border: 1px solid;
+  border: 1px solid ${token('color.border.bold', 'black')};
   margin: 10px;
 `;
 
@@ -110,6 +114,6 @@ export const mediaInlineTableStyles = css`
   width: 800px;
   tr,
   td {
-    border: 1px solid #ddd;
+    border: 1px solid ${token('color.border', '#ddd')};
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "74.2.0",
+  "version": "74.3.0",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.ts",
   "af:exports": {
@@ -40,12 +32,13 @@
     "@atlaskit/dropdown-menu": "^11.5.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/media-client": "^18.1.0",
+    "@atlaskit/media-client": "^19.0.0",
     "@atlaskit/media-common": "^2.17.0",
-    "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^47.1.0",
-    "@atlaskit/spinner": "^15.2.0",
+    "@atlaskit/media-ui": "^22.2.0",
+    "@atlaskit/media-viewer": "^47.2.0",
+    "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
+    "@atlaskit/tokens": "^0.11.1",
     "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -63,7 +56,7 @@
   "devDependencies": {
     "@atlaskit/analytics-listeners": "^8.3.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/inline-message": "^11.4.0",
@@ -72,7 +65,7 @@
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/radio": "^5.4.0",
     "@atlaskit/range": "^7.0.0",
-    "@atlaskit/select": "^15.7.0",
+    "@atlaskit/select": "^16.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
@@ -93,5 +86,10 @@
     "uuid": "^3.1.0",
     "wait-for-expect": "^1.2.0"
   },
+  "techstack": {
+    "@repo/internal": {
+      "theming": "tokens"
+    }
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.2 -->
+
 ## API Report File for "@atlaskit/media-card"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
+
+- [Main Entry Types](#main-entry-types)
 
-<!--
-	Generated API Report version: 2.0
--->
+### Main Entry Types
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 /// <reference types="react" />
@@ -45,7 +50,7 @@ export interface CardAction {
 }
 
 // @public (undocumented)
-export type CardAppearance = 'auto' | 'image' | 'square' | 'horizontal';
+export type CardAppearance = 'auto' | 'horizontal' | 'image' | 'square';
 
 // @public (undocumented)
 type CardBaseProps = CardProps &
@@ -121,16 +126,16 @@ export interface CardPreview {
 
 // @public (undocumented)
 type CardPreviewSource =
-  | 'local'
-  | 'remote'
-  | 'ssr-server'
-  | 'ssr-client'
-  | 'ssr-data'
   | 'cache-local'
   | 'cache-remote'
   | 'cache-ssr-client'
   | 'cache-ssr-server'
-  | 'external';
+  | 'external'
+  | 'local'
+  | 'remote'
+  | 'ssr-client'
+  | 'ssr-data'
+  | 'ssr-server';
 
 // @public (undocumented)
 export interface CardProps extends SharedCardProps, CardEventProps {
@@ -184,13 +189,13 @@ export interface CardState {
 
 // @public (undocumented)
 export type CardStatus =
-  | 'uploading'
-  | 'loading'
-  | 'processing'
-  | 'loading-preview'
   | 'complete'
   | 'error'
-  | 'failed-processing';
+  | 'failed-processing'
+  | 'loading'
+  | 'loading-preview'
+  | 'processing'
+  | 'uploading';
 
 // @public (undocumented)
 type CardWithMediaClientConfigProps = WithMediaClientConfigProps<CardBaseProps>;
@@ -211,7 +216,7 @@ type ErrorBoundaryComponent = React_2.ComponentType<{
 // @public (undocumented)
 interface ErrorCardProps extends StaticCardProps {
   // (undocumented)
-  readonly size: 'small' | 'medium' | 'large' | 'xlarge';
+  readonly size: 'large' | 'medium' | 'small' | 'xlarge';
 }
 
 // @public (undocumented)
@@ -223,11 +228,11 @@ export const fileCardImageViewSelector = 'media-file-card-view';
 
 // @public (undocumented)
 type ImageLoadPrimaryReason =
-  | 'cache-remote-uri'
   | 'cache-local-uri'
+  | 'cache-remote-uri'
+  | 'external-uri'
   | 'local-uri'
   | 'remote-uri'
-  | 'external-uri'
   | 'unknown-uri';
 
 // @public (undocumented)
@@ -236,9 +241,9 @@ export const inlinePlayerClassName = 'media-card-inline-player';
 // @public (undocumented)
 type LocalPreviewPrimaryReason =
   | 'local-preview-get'
-  | 'local-preview-unsupported'
-  | 'local-preview-rejected'
   | 'local-preview-image'
+  | 'local-preview-rejected'
+  | 'local-preview-unsupported'
   | 'local-preview-video';
 
 // @public (undocumented)
@@ -255,15 +260,15 @@ class MediaCardError extends Error {
 
 // @public
 type MediaCardErrorPrimaryReason =
-  | 'upload'
-  | 'metadata-fetch'
   | 'error-file-state'
-  | RemotePreviewPrimaryReason
-  | LocalPreviewPrimaryReason
-  | ImageLoadPrimaryReason
-  | SsrPreviewPrimaryReason
+  | 'metadata-fetch'
   | 'missing-error-data'
-  | 'preview-fetch';
+  | 'preview-fetch'
+  | 'upload'
+  | ImageLoadPrimaryReason
+  | LocalPreviewPrimaryReason
+  | RemotePreviewPrimaryReason
+  | SsrPreviewPrimaryReason;
 
 // @public (undocumented)
 export class MediaInlineCard extends React_2.PureComponent<
@@ -307,20 +312,18 @@ interface MediaInlineCardProps {
   // (undocumented)
   mediaViewerDataSource?: MediaViewerDataSource;
   // (undocumented)
-  onClick?: React_2.EventHandler<React_2.MouseEvent | React_2.KeyboardEvent>;
+  onClick?: React_2.EventHandler<React_2.KeyboardEvent | React_2.MouseEvent>;
   // (undocumented)
   shouldOpenMediaViewer?: boolean;
 }
 
 // @public (undocumented)
-type MediaInlineCardWithMediaClientConfigComponent = React_2.ComponentType<
-  MediaInlineCardWithMediaClientConfigProps
->;
+type MediaInlineCardWithMediaClientConfigComponent =
+  React_2.ComponentType<MediaInlineCardWithMediaClientConfigProps>;
 
 // @public (undocumented)
-type MediaInlineCardWithMediaClientConfigProps = WithMediaClientConfigProps<
-  MediaInlineCardProps
->;
+type MediaInlineCardWithMediaClientConfigProps =
+  WithMediaClientConfigProps<MediaInlineCardProps>;
 
 // @public (undocumented)
 export const newFileExperienceClassName = 'new-file-experience-wrapper';
@@ -364,10 +367,10 @@ export interface SharedCardProps {
 
 // @public (undocumented)
 type SsrPreviewPrimaryReason =
-  | 'ssr-client-uri'
   | 'ssr-client-load'
-  | 'ssr-server-uri'
-  | 'ssr-server-load';
+  | 'ssr-client-uri'
+  | 'ssr-server-load'
+  | 'ssr-server-uri';
 
 // @public (undocumented)
 interface StaticCardProps {
@@ -384,3 +387,5 @@ export type TitleBoxIcon = 'LockFilledIcon';
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/cjs/utils/mediaTypeIcon/iconWrapper.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.IconWrapper = void 0;
-
-var _react = require("@emotion/react");
-
-var _styles = require("./styles");
-
-/**@jsx jsx */
-var IconWrapper = function IconWrapper(props) {
-  return (0, _react.jsx)("div", {
-    id: "iconWrapper",
-    css: (0, _styles.iconWrapperStyles)(props)
-  }, props.children);
-};
-
-exports.IconWrapper = IconWrapper;

package/dist/cjs/utils/mediaTypeIcon/index.js

@@ -1,81 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MediaTypeIcon = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _image = _interopRequireDefault(require("@atlaskit/icon/glyph/image"));
-
-var _audio = _interopRequireDefault(require("@atlaskit/icon/glyph/audio"));
-
-var _zip = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/zip"));
-
-var _video = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/video"));
-
-var _document = _interopRequireDefault(require("@atlaskit/icon/glyph/document"));
-
-var _page = _interopRequireDefault(require("@atlaskit/icon/glyph/page"));
-
-var _iconWrapper = require("./iconWrapper");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-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; } }
-
-var icons = {
-  image: _image.default,
-  audio: _audio.default,
-  video: _video.default,
-  doc: _document.default,
-  unknown: _page.default,
-  archive: _zip.default
-};
-
-var MediaTypeIcon = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(MediaTypeIcon, _React$Component);
-
-  var _super = _createSuper(MediaTypeIcon);
-
-  function MediaTypeIcon() {
-    (0, _classCallCheck2.default)(this, MediaTypeIcon);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2.default)(MediaTypeIcon, [{
-    key: "render",
-    value: // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-    function render() {
-      var _this$props = this.props,
-          type = _this$props.type,
-          _this$props$size = _this$props.size,
-          size = _this$props$size === void 0 ? 'small' : _this$props$size,
-          className = _this$props.className;
-      var Icon = type && icons[type] || icons.unknown;
-      return /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
-        type: type || 'unknown'
-      }, /*#__PURE__*/_react.default.createElement(Icon, {
-        label: "media-type",
-        size: size,
-        className: className
-      }));
-    }
-  }]);
-  return MediaTypeIcon;
-}(_react.default.Component);
-
-exports.MediaTypeIcon = MediaTypeIcon;

package/dist/cjs/utils/mediaTypeIcon/styles.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iconWrapperStyles = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = require("@emotion/react");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _templateObject;
-
-var typeToColorMap = {
-  image: _colors.Y200,
-  audio: _colors.P200,
-  video: '#ff7143',
-  doc: _colors.B300,
-  unknown: '#3dc7dc',
-  archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-
-};
-
-var getWrapperColor = function getWrapperColor(_ref) {
-  var type = _ref.type;
-  return typeToColorMap[type] || typeToColorMap.unknown;
-};
-
-var iconWrapperStyles = function iconWrapperStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
-};
-
-exports.iconWrapperStyles = iconWrapperStyles;

package/dist/cjs/utils/mediaTypeIcon/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/dist/es2019/utils/mediaTypeIcon/iconWrapper.js

@@ -1,9 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { iconWrapperStyles } from './styles';
-export const IconWrapper = props => {
-  return jsx("div", {
-    id: "iconWrapper",
-    css: iconWrapperStyles(props)
-  }, props.children);
-};

package/dist/es2019/utils/mediaTypeIcon/index.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import ImageIcon from '@atlaskit/icon/glyph/image';
-import AudioIcon from '@atlaskit/icon/glyph/audio';
-import ArchiveIcon from '@atlaskit/icon/glyph/media-services/zip';
-import VideoIcon from '@atlaskit/icon/glyph/media-services/video';
-import DocIcon from '@atlaskit/icon/glyph/document';
-import UnknownIcon from '@atlaskit/icon/glyph/page';
-import { IconWrapper } from './iconWrapper';
-const icons = {
-  image: ImageIcon,
-  audio: AudioIcon,
-  video: VideoIcon,
-  doc: DocIcon,
-  unknown: UnknownIcon,
-  archive: ArchiveIcon
-};
-export class MediaTypeIcon extends React.Component {
-  // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-  render() {
-    const {
-      type,
-      size = 'small',
-      className
-    } = this.props;
-    const Icon = type && icons[type] || icons.unknown;
-    return /*#__PURE__*/React.createElement(IconWrapper, {
-      type: type || 'unknown'
-    }, /*#__PURE__*/React.createElement(Icon, {
-      label: "media-type",
-      size: size,
-      className: className
-    }));
-  }
-
-}

package/dist/es2019/utils/mediaTypeIcon/styles.js

@@ -1,22 +0,0 @@
-import { css } from '@emotion/react';
-import { Y200, P200, B300 } from '@atlaskit/theme/colors';
-const typeToColorMap = {
-  image: Y200,
-  audio: P200,
-  video: '#ff7143',
-  doc: B300,
-  unknown: '#3dc7dc',
-  archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-
-};
-
-const getWrapperColor = ({
-  type
-}) => {
-  return typeToColorMap[type] || typeToColorMap.unknown;
-};
-
-export const iconWrapperStyles = props => css`
-  display: inline-flex;
-  color: ${getWrapperColor(props)};
-`;

package/dist/es2019/utils/mediaTypeIcon/types.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/utils/mediaTypeIcon/iconWrapper.js

@@ -1,9 +0,0 @@
-/**@jsx jsx */
-import { jsx } from '@emotion/react';
-import { iconWrapperStyles } from './styles';
-export var IconWrapper = function IconWrapper(props) {
-  return jsx("div", {
-    id: "iconWrapper",
-    css: iconWrapperStyles(props)
-  }, props.children);
-};

package/dist/esm/utils/mediaTypeIcon/index.js

@@ -1,59 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-import React from 'react';
-import ImageIcon from '@atlaskit/icon/glyph/image';
-import AudioIcon from '@atlaskit/icon/glyph/audio';
-import ArchiveIcon from '@atlaskit/icon/glyph/media-services/zip';
-import VideoIcon from '@atlaskit/icon/glyph/media-services/video';
-import DocIcon from '@atlaskit/icon/glyph/document';
-import UnknownIcon from '@atlaskit/icon/glyph/page';
-import { IconWrapper } from './iconWrapper';
-var icons = {
-  image: ImageIcon,
-  audio: AudioIcon,
-  video: VideoIcon,
-  doc: DocIcon,
-  unknown: UnknownIcon,
-  archive: ArchiveIcon
-};
-export var MediaTypeIcon = /*#__PURE__*/function (_React$Component) {
-  _inherits(MediaTypeIcon, _React$Component);
-
-  var _super = _createSuper(MediaTypeIcon);
-
-  function MediaTypeIcon() {
-    _classCallCheck(this, MediaTypeIcon);
-
-    return _super.apply(this, arguments);
-  }
-
-  _createClass(MediaTypeIcon, [{
-    key: "render",
-    value: // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-    function render() {
-      var _this$props = this.props,
-          type = _this$props.type,
-          _this$props$size = _this$props.size,
-          size = _this$props$size === void 0 ? 'small' : _this$props$size,
-          className = _this$props.className;
-      var Icon = type && icons[type] || icons.unknown;
-      return /*#__PURE__*/React.createElement(IconWrapper, {
-        type: type || 'unknown'
-      }, /*#__PURE__*/React.createElement(Icon, {
-        label: "media-type",
-        size: size,
-        className: className
-      }));
-    }
-  }]);
-
-  return MediaTypeIcon;
-}(React.Component);

package/dist/esm/utils/mediaTypeIcon/styles.js

@@ -1,24 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
-
-import { css } from '@emotion/react';
-import { Y200, P200, B300 } from '@atlaskit/theme/colors';
-var typeToColorMap = {
-  image: Y200,
-  audio: P200,
-  video: '#ff7143',
-  doc: B300,
-  unknown: '#3dc7dc',
-  archive: '' // TODO [BMPT-389]: Remove this and use existing MediaTypeIcon in media-ui
-
-};
-
-var getWrapperColor = function getWrapperColor(_ref) {
-  var type = _ref.type;
-  return typeToColorMap[type] || typeToColorMap.unknown;
-};
-
-export var iconWrapperStyles = function iconWrapperStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  color: ", ";\n"])), getWrapperColor(props));
-};