@atlaskit/media-card 77.10.6 → 77.10.8

package/dist/esm/utils/objectURLCache.js

@@ -5,7 +5,7 @@ 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; } }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { LRUMap } from 'lru_map';
 import { EventEmitter2 } from 'eventemitter2';
 export var PREVIEW_CACHE_LRU_SIZE = 50;

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.6";
+var packageVersion = "77.10.8";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/media-card-analytics-error-boundary.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { CardDimensions, CardOnClickCallback } from '../types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export type MediaCardAnalyticsErrorBoundaryProps = {
+export type MediaCardAnalyticsErrorBoundaryProps = PropsWithChildren<{
     dimensions?: CardDimensions;
     data?: {
         [k: string]: any;
     };
     onClick?: CardOnClickCallback;
     featureFlags?: MediaFeatureFlags;
-} & WithAnalyticsEventsProps;
+} & WithAnalyticsEventsProps>;
 declare const MediaCardAnalyticsErrorBoundary: React.ComponentType<MediaCardAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
 export default MediaCardAnalyticsErrorBoundary;

package/dist/types/inline/loader.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
 import { MediaInlineCardProps } from './mediaInlineCard';
 export type MediaInlineCardWithMediaClientConfigProps = WithMediaClientConfigProps<MediaInlineCardProps>;
 type MediaInlineCardWithMediaClientConfigComponent = React.ComponentType<MediaInlineCardWithMediaClientConfigProps>;
-type ErrorBoundaryComponent = React.ComponentType<{
+type ErrorBoundaryComponent = React.ComponentType<PropsWithChildren<{
     data?: {
         [k: string]: any;
     };
     isSelected?: boolean;
-}>;
+}>>;
 export interface MediaInlineCardLoaderState {
     MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
     ErrorBoundary?: ErrorBoundaryComponent;

package/dist/types/inline/mediaInlineAnalyticsErrorBoundary.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export type MediaInlineAnalyticsErrorBoundaryProps = {
+export type MediaInlineAnalyticsErrorBoundaryProps = PropsWithChildren<{
     isSelected?: boolean;
     data?: {
         [k: string]: any;
     };
     featureFlags?: MediaFeatureFlags;
-} & WithAnalyticsEventsProps;
+} & WithAnalyticsEventsProps>;
 declare const MediaInlineAnalyticsErrorBoundary: React.ComponentType<MediaInlineAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
 export default MediaInlineAnalyticsErrorBoundary;

package/dist/{types-ts4.5/utils → types/utils/analytics}/analytics.d.ts

@@ -1,8 +1,8 @@
 import { FileDetails, FileStatus, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common/analytics';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
-import { CardPreviewSource, CardDimensions, CardStatus } from '../types';
+import { MediaCardError, MediaCardErrorPrimaryReason } from '../../errors';
+import { CardPreviewSource, CardDimensions, CardStatus } from '../../types';
 export type CardPreviewAttributes = {
     fileId: string;
     prevDimensions: CardDimensions | undefined;

package/dist/types/utils/analytics/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardPreviewAttributes, FileUriFailReason, FailedErrorFailReason, MediaCardErrorInfo, SSRStatusFail, SSRStatus, WithSSRReliability, RenderFailedEventPayload, ErrorEventPayload, ErrorBoundaryErrorInfo, AnalyticsErrorBoundaryAttributes, AnalyticsErrorBoundaryCardPayload, AnalyticsErrorBoundaryInlinePayload, RenderInlineCardSucceededEventPayload, RenderInlineCardFailedEventPayload, RenderSucceededEventPayload, RenderCommencedEventPayload, CacheHitEventPayload, RemoteSuccessEventPayload, CopiedFileEventPayload, ClickedEventPayload, RenderScreenEventPayload, MediaCardAnalyticsEventPayload, } from './analytics';
+export { getFileAttributes, getRenderPreviewableCardPayload, getRenderCommencedEventPayload, getRenderSucceededEventPayload, getCacheHitEventPayload, getRemoteSuccessEventPayload, getRenderFailedExternalUriPayload, getRenderErrorFailReason, getRenderErrorErrorReason, getRenderErrorErrorDetail, getErrorTraceContext, getRenderErrorRequestMetadata, extractErrorInfo, getRenderErrorEventPayload, getErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, fireMediaCardEvent, createAndFireMediaCardEvent, } from './analytics';

package/dist/types/utils/viewportDetector.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export type ViewportDetectorProps = {
+import { PropsWithChildren } from 'react';
+export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
-};
-export declare const ViewportDetector: React.FC<ViewportDetectorProps>;
+}>;
+export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;

package/dist/types-ts4.5/card/media-card-analytics-error-boundary.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { CardDimensions, CardOnClickCallback } from '../types';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export type MediaCardAnalyticsErrorBoundaryProps = {
+export type MediaCardAnalyticsErrorBoundaryProps = PropsWithChildren<{
     dimensions?: CardDimensions;
     data?: {
         [k: string]: any;
     };
     onClick?: CardOnClickCallback;
     featureFlags?: MediaFeatureFlags;
-} & WithAnalyticsEventsProps;
+} & WithAnalyticsEventsProps>;
 declare const MediaCardAnalyticsErrorBoundary: React.ComponentType<MediaCardAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
 export default MediaCardAnalyticsErrorBoundary;

package/dist/types-ts4.5/inline/loader.d.ts

@@ -1,14 +1,14 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { WithMediaClientConfigProps } from '@atlaskit/media-client-react';
 import { MediaInlineCardProps } from './mediaInlineCard';
 export type MediaInlineCardWithMediaClientConfigProps = WithMediaClientConfigProps<MediaInlineCardProps>;
 type MediaInlineCardWithMediaClientConfigComponent = React.ComponentType<MediaInlineCardWithMediaClientConfigProps>;
-type ErrorBoundaryComponent = React.ComponentType<{
+type ErrorBoundaryComponent = React.ComponentType<PropsWithChildren<{
     data?: {
         [k: string]: any;
     };
     isSelected?: boolean;
-}>;
+}>>;
 export interface MediaInlineCardLoaderState {
     MediaInlineCard?: MediaInlineCardWithMediaClientConfigComponent;
     ErrorBoundary?: ErrorBoundaryComponent;

package/dist/types-ts4.5/inline/mediaInlineAnalyticsErrorBoundary.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-export type MediaInlineAnalyticsErrorBoundaryProps = {
+export type MediaInlineAnalyticsErrorBoundaryProps = PropsWithChildren<{
     isSelected?: boolean;
     data?: {
         [k: string]: any;
     };
     featureFlags?: MediaFeatureFlags;
-} & WithAnalyticsEventsProps;
+} & WithAnalyticsEventsProps>;
 declare const MediaInlineAnalyticsErrorBoundary: React.ComponentType<MediaInlineAnalyticsErrorBoundaryProps & WithAnalyticsEventsProps>;
 export default MediaInlineAnalyticsErrorBoundary;

package/dist/{types/utils → types-ts4.5/utils/analytics}/analytics.d.ts

@@ -1,8 +1,8 @@
 import { FileDetails, FileStatus, MediaClientErrorReason, RequestMetadata } from '@atlaskit/media-client';
-import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common';
+import { FileAttributes, PerformanceAttributes, OperationalEventPayload, UIEventPayload, WithFileAttributes, WithPerformanceAttributes, SuccessAttributes, FailureAttributes, ScreenEventPayload, ScreenAttributes, MediaTraceContext, WithTraceContext } from '@atlaskit/media-common/analytics';
 import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
-import { MediaCardError, MediaCardErrorPrimaryReason } from '../errors';
-import { CardPreviewSource, CardDimensions, CardStatus } from '../types';
+import { MediaCardError, MediaCardErrorPrimaryReason } from '../../errors';
+import { CardPreviewSource, CardDimensions, CardStatus } from '../../types';
 export type CardPreviewAttributes = {
     fileId: string;
     prevDimensions: CardDimensions | undefined;

package/dist/types-ts4.5/utils/analytics/index.d.ts

@@ -0,0 +1,2 @@
+export type { CardPreviewAttributes, FileUriFailReason, FailedErrorFailReason, MediaCardErrorInfo, SSRStatusFail, SSRStatus, WithSSRReliability, RenderFailedEventPayload, ErrorEventPayload, ErrorBoundaryErrorInfo, AnalyticsErrorBoundaryAttributes, AnalyticsErrorBoundaryCardPayload, AnalyticsErrorBoundaryInlinePayload, RenderInlineCardSucceededEventPayload, RenderInlineCardFailedEventPayload, RenderSucceededEventPayload, RenderCommencedEventPayload, CacheHitEventPayload, RemoteSuccessEventPayload, CopiedFileEventPayload, ClickedEventPayload, RenderScreenEventPayload, MediaCardAnalyticsEventPayload, } from './analytics';
+export { getFileAttributes, getRenderPreviewableCardPayload, getRenderCommencedEventPayload, getRenderSucceededEventPayload, getCacheHitEventPayload, getRemoteSuccessEventPayload, getRenderFailedExternalUriPayload, getRenderErrorFailReason, getRenderErrorErrorReason, getRenderErrorErrorDetail, getErrorTraceContext, getRenderErrorRequestMetadata, extractErrorInfo, getRenderErrorEventPayload, getErrorEventPayload, getRenderFailedFileStatusPayload, getCopiedFilePayload, fireMediaCardEvent, createAndFireMediaCardEvent, } from './analytics';

package/dist/types-ts4.5/utils/viewportDetector.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-export type ViewportDetectorProps = {
+import { PropsWithChildren } from 'react';
+export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
-};
-export declare const ViewportDetector: React.FC<ViewportDetectorProps>;
+}>;
+export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;

package/example-helpers/cardViewWrapper.tsx

@@ -1,29 +1,44 @@
 /**@jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
 import { token } from '@atlaskit/tokens';
 
 type CardViewWrapperProps = {
-  wrapperDimensions: { width: string; height: string };
+  small?: boolean;
   displayInline?: boolean;
   children?: JSX.Element;
 };
 
 const displayInlineStyles = (displayInline?: boolean) => {
-  return displayInline ? 'display: inline-block;' : '';
+  return displayInline ? 'inline-block;' : '';
 };
 
-const cardWrapperStyles = ({
-  wrapperDimensions,
-  displayInline,
-}: CardViewWrapperProps) =>
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  css`
-    ${displayInlineStyles(displayInline)}
-    width: ${wrapperDimensions.width};
-    height: ${wrapperDimensions.height};
-    margin: 15px ${token('space.250', '20px')};
-  `;
+// Minimum supported dimensions
+const smallStyles = xcss({
+  width: '156px',
+  height: '108px',
+});
+
+// Maximum supported dimensions
+const largeStyles = xcss({
+  width: '600px',
+  height: '450px',
+});
+
+const cardWrapperStyles = ({ small, displayInline }: CardViewWrapperProps) =>
+  xcss({
+    display: displayInlineStyles(displayInline),
+    margin: `${token('space.200', '16px')} ${token('space.250', '20px')}`,
+  });
 
 export const CardViewWrapper = (props: CardViewWrapperProps) => {
-  return <div css={cardWrapperStyles(props)}>{props.children}</div>;
+  if (props.small) {
+    return (
+      <Box xcss={[cardWrapperStyles(props), smallStyles]}>{props.children}</Box>
+    );
+  } else {
+    return (
+      <Box xcss={[cardWrapperStyles(props), largeStyles]}>{props.children}</Box>
+    );
+  }
 };

package/example-helpers/index.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-line no-console
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { FileItem, Identifier } from '@atlaskit/media-client';
 import {
   createPollingMaxAttemptsError,
@@ -125,16 +125,16 @@ export const wrongMediaClientConfig = createStorybookMediaClientConfig({
 });
 export const wrongCollection = 'adfasdf';
 
-export type MainWrapperProps = {
+export type MainWrapperProps = PropsWithChildren<{
   developmentOnly?: boolean;
   disableFeatureFlagWrapper?: boolean;
-};
+}>;
 
-export const MainWrapper: React.FC<MainWrapperProps> = ({
+export const MainWrapper = ({
   children,
   developmentOnly,
   disableFeatureFlagWrapper = false,
-}) => {
+}: MainWrapperProps) => {
   enableMediaUfoLogger(payloadPublisher);
   return (
     <>
@@ -166,7 +166,7 @@ export const mediaCardErrorState = (
   }
 };
 
-export const SSRAnalyticsWrapper: React.FC = ({ children }) => {
+export const SSRAnalyticsWrapper = ({ children }: PropsWithChildren<{}>) => {
   const mockClient: AnalyticsWebClient = {
     sendUIEvent: (e) => console.debug('UI event', e),
     sendOperationalEvent: (e) => console.debug('Operational event', e),

package/example-helpers/styles.ts

@@ -1,139 +1,122 @@
 import { token } from '@atlaskit/tokens';
 import { css } from '@emotion/react';
 
-export const editableCardOptionsStyles = css`
-  padding: ${token('space.250', '20px')};
-  border-bottom: 1px solid ${token('color.border', '#ccc')};
-  max-width: 700px;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const sliderWrapperStyles = css`
-  display: flex;
-  width: 50%;
-
-  > * {
-    flex: 1;
-    margin: 10px;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const editableCardContentStyles = css`
-  /* Not making the wrapper fancier or center elements in order to have a more realistic scenario */
-  padding: ${token('space.250', '20px')};
-  border: 2px dashed;
-  margin: 0 10px 50px 10px;
-  overflow: hidden;
-  background: ${token(
-    'color.background.accent.orange.subtlest',
-    'antiquewhite',
-  )};
-  box-sizing: border-box;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const optionsWrapperStyles = css`
-  display: flex;
-
-  > * {
-    flex: 1;
-    margin: 10px;
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardDimensionsWrapperStyles = css`
-  margin: 10px 10px ${token('space.250', '20px')} 10px;
-  display: flex;
-
-  > div {
-    border: 1px solid ${token('color.border.bold', 'black')};
-    margin: 5px;
-    padding: 5px;
-    border-radius: 3px;
-  }
-`;
-
-export const flexWrapperStyles = css`
-  display: flex;
-`;
-export const cardPreviewWrapperStyles = css`
-  flex: 1;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardWrapperStyles = css`
-  border: 1px solid ${token('color.border.bold', 'black')};
-  padding: 10px;
-  margin: 5px;
-  flex-direction: column;
-  width: 310px;
-  height: 280px;
-  overflow: auto;
-  display: inline-block;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const cardFlowHeaderStyles = css`
-  margin: ${token('space.250', '20px')} auto;
-  padding: 10px 0;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const externalIdentifierWrapperStyles = css`
-  display: flex;
-  justify-content: space-around;
-  margin: 0 auto;
-
-  h2 {
-    margin-bottom: 10px;
-  }
-`;
-
-export const unhandledErrorCardWrapperStyles = css`
-  padding: ${token('space.250', '20px')};
-
-  > div:first-child {
-    display: flex;
-    margin-bottom: ${token('space.250', '20px')};
-  }
-
-  label {
-    margin-right: ${token('space.250', '20px')};
-  }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const inlineCardVideoWrapperItemStyles = css`
-  padding: 10px;
-  border: 1px solid ${token('color.border.bold', 'black')};
-  margin: 10px;
-`;
-
-export const mediaViewerExampleColumnStyles = css`
-  flex: 1;
-
-  > div {
-  }
-`;
-
-export const mediaViewerExampleWrapperStyles = css`
-  display: flex;
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const mediaInlineWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  margin: 100px;
-`;
-
-export const mediaInlineTableStyles = css`
-  width: 800px;
-  tr,
-  td {
-    border: 1px solid ${token('color.border', '#ddd')};
-  }
-`;
+export const editableCardOptionsStyles = css({
+  padding: token('space.250', '20px'),
+  borderBottom: `1px solid ${token('color.border', '#ccc')}`,
+  maxWidth: '700px',
+});
+
+export const sliderWrapperStyles = css({
+  display: 'flex',
+  width: '50%',
+  '> *': {
+    flex: 1,
+    margin: token('space.100', '8px'),
+  },
+});
+
+export const editableCardContentStyles = css({
+  padding: token('space.250', '20px'),
+  border: '2px dashed',
+  margin: `${token('space.0', '0px')} ${token('space.150', '12px')} ${token(
+    'space.600',
+    '48px',
+  )} ${token('space.150', '12px')}`,
+  overflow: 'hidden',
+  background: token('color.background.accent.orange.subtlest', 'antiquewhite'),
+  boxSizing: 'border-box',
+});
+
+export const optionsWrapperStyles = css({
+  display: 'flex',
+  '> *': {
+    flex: 1,
+    margin: token('space.100', '8px'),
+  },
+});
+
+export const cardDimensionsWrapperStyles = css({
+  margin: `${token('space.100', '8px')} ${token('space.100', '8px')} ${token(
+    'space.250',
+    '20px',
+  )} ${token('space.100', '8px')}`,
+  display: 'flex',
+  '> div': {
+    border: `1px solid ${token('color.border.bold', 'black')}`,
+    margin: token('space.075', '6px'),
+    padding: token('space.075', '6px'),
+    borderRadius: '3px',
+  },
+});
+
+export const flexWrapperStyles = css({
+  display: 'flex',
+});
+export const cardPreviewWrapperStyles = css({
+  flex: 1,
+});
+
+export const cardWrapperStyles = css({
+  border: `1px solid ${token('color.border.bold', 'black')}`,
+  padding: token('space.150', '12px'),
+  margin: token('space.075', '6px'),
+  flexDirection: 'column',
+  width: '310px',
+  height: '280px',
+  overflow: 'auto',
+  display: 'inline-block',
+});
+
+export const cardFlowHeaderStyles = css({
+  margin: `${token('space.250', '20px')} auto`,
+  padding: `${token('space.150', '12px')} ${token('space.0', '0px')}`,
+});
+
+export const externalIdentifierWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-around',
+  margin: `${token('space.0', '0px')} auto`,
+  h2: {
+    marginBottom: token('space.150', '12px'),
+  },
+});
+
+export const unhandledErrorCardWrapperStyles = css({
+  padding: token('space.250', '20px'),
+  '> div:first-child': {
+    display: 'flex',
+    marginBottom: token('space.250', '20px'),
+  },
+  label: {
+    marginRight: token('space.250', '20px'),
+  },
+});
+
+export const inlineCardVideoWrapperItemStyles = css({
+  padding: token('space.150', '12px'),
+  border: `1px solid ${token('color.border.bold', 'black')}`,
+  margin: token('space.150', '12px'),
+});
+
+export const mediaViewerExampleColumnStyles = css({
+  flex: 1,
+});
+
+export const mediaViewerExampleWrapperStyles = css({
+  display: 'flex',
+});
+
+export const mediaInlineWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  margin: token('space.1000', '80px'),
+});
+
+export const mediaInlineTableStyles = css({
+  width: '800px',
+  'tr, td': {
+    border: `1px solid ${token('color.border', '#ddd')}`,
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.10.6",
+  "version": "77.10.8",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,20 +37,20 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/dropdown-menu": "^12.7.0",
+    "@atlaskit/dropdown-menu": "^12.8.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/media-client": "^26.2.0",
     "@atlaskit/media-client-react": "^2.0.0",
-    "@atlaskit/media-common": "^11.0.0",
+    "@atlaskit/media-common": "^11.1.0",
     "@atlaskit/media-file-preview": "^0.5.0",
     "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/primitives": "^4.0.0",
+    "@atlaskit/primitives": "^4.1.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.39.0",
+    "@atlaskit/tokens": "^1.41.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
     "@babel/runtime": "^7.0.0",