@atlaskit/media-card 77.10.5 → 77.10.7

package/dist/esm/utils/globalScope/globalScope.js

@@ -4,6 +4,7 @@ import { printFunctionCall, printScript } from '../printScript';
 // Any changes to this file must be tested directly in product before merging.
 // The scripts printed here might differ from what we observe in our internal tests
 // due to minimification, for example.
+
 export var GLOBAL_MEDIA_CARD_SSR = 'mediaCardSsr';
 export var GLOBAL_MEDIA_NAMESPACE = '__MEDIA_INTERNAL';
 export function getMediaGlobalScope() {

package/dist/esm/utils/lightCards/cardError.js

@@ -5,7 +5,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 React from 'react';
 import { Component } from 'react';
 import { ErrorIcon } from './errorIcon';

package/dist/esm/utils/lightCards/cardLoading.js

@@ -4,7 +4,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 React from 'react';
 import { Component } from 'react';
 import { getDimensionsWithDefault } from './getDimensionsWithDefault';

package/dist/esm/utils/lightCards/errorIcon/index.js

@@ -5,7 +5,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; })(); }
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
 import { Component } from 'react';

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.5";
+var packageVersion = "77.10.7";
 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/card/ui/tickBox/styles.d.ts

@@ -1,7 +1,2 @@
 export declare const tickBoxClassName = "media-card-tickbox";
 export declare const tickboxFixedStyles: string;
-export declare const getSelectedStyles: (selected?: boolean) => string;
-export declare const wrapperStyles: {
-    (selected?: boolean): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};

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/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/card/ui/tickBox/styles.d.ts

@@ -1,7 +1,2 @@
 export declare const tickBoxClassName = "media-card-tickbox";
 export declare const tickboxFixedStyles: string;
-export declare const getSelectedStyles: (selected?: boolean) => string;
-export declare const wrapperStyles: {
-    (selected?: boolean): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};

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-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.5",
+  "version": "77.10.7",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
   },
   "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",
@@ -47,9 +47,10 @@
     "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
+    "@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",
@@ -114,4 +115,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

package/dist/cjs/card/ui/iconMessage/styles.js

@@ -1,22 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iconMessageWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var breatheAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
-var animatedStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  animation-name: ", ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n"])), breatheAnimation);
-var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
-  var animated = _ref.animated,
-    reducedFont = _ref.reducedFont;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), animated ? animatedStyles : '');
-};
-var iconMessageWrapperStyles = exports.iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), getStylesBasedOnProps(props));
-};
-iconMessageWrapperStyles.displayName = 'IconMessageWrapper';