@atlaskit/media-card 77.11.1 → 77.11.2

package/dist/es2019/card/ui/playButton/styles.js

@@ -10,26 +10,26 @@ export const fixedPlayButtonStyles = `
     height: ${discSizeHover}px;
   }
 `;
-export const playButtonWrapperStyles = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: ${`var(--ds-icon-inverse, ${N0})`};
-  span {
-    position: absolute;
+export const playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: `var(--ds-icon-inverse, ${N0})`,
+  span: {
+    position: 'absolute'
   }
-`;
-export const backgroundStyles = css`
-  transition-property: width, height;
-  transition-duration: 0.1s;
-  position: absolute;
-  width: ${discSize}px;
-  height: ${discSize}px;
-  background: ${`var(--ds-background-neutral-bold, ${N90A})`};
-  border-radius: 100%;
-`;
+});
+export const backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: `${discSize}px`,
+  height: `${discSize}px`,
+  background: `var(--ds-background-neutral-bold, ${N90A})`,
+  borderRadius: '100%'
+});

package/dist/es2019/card/ui/progressBar/styles.js

@@ -53,8 +53,6 @@ ${generateResponsiveStyles(breakpoint, positionBottom, showOnTop)}
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export const styledBarStyles = props => {
-  return css`
-    ${getStyledBarStylesBasedOnProps(props)}
-  `;
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

package/dist/es2019/card/ui/styles.js

@@ -65,16 +65,15 @@ export const getSelectableTickBoxStyles = isTickBoxSelectable => {
     }
   `;
 };
-export const cardImageContainerStyles = css`
-  display: flex;
-  position: relative;
-  max-width: 100%;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
-  ${borderRadius}
-`;
+export const cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 const defaultTransitionDuration = '.3s';
 export const transition = (propertyName = 'all') => `
   transition: ${propertyName} ${defaultTransitionDuration};

package/dist/es2019/card/ui/titleBox/styles.js

@@ -14,52 +14,47 @@ const HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export const titleBoxWrapperStyles = ({
   breakpoint,
   titleBoxBgColor
-}) => css`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  background-color: ${`var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`};
-  color: ${`var(--ds-text, ${N800})`};
-  cursor: inherit;
-  pointer-events: none;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  ${generateResponsiveStyles(breakpoint)}
-`;
+}) => css({
+  position: 'absolute',
+  bottom: 0,
+  width: '100%',
+  backgroundColor: `var(--ds-surface, ${rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1)})`,
+  color: `var(--ds-text, ${N800})`,
+  cursor: 'inherit',
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center'
+}, generateResponsiveStyles(breakpoint));
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 const infoStyles = `white-space: nowrap;overflow: hidden;`;
 const iconOverlapStyles = `padding-right: 10px;`;
 export const titleBoxHeaderStyles = ({
   hasIconOverlap
-}) => css`
-  font-weight: 600;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  fontWeight: 600
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export const titleBoxFooterStyles = ({
   hasIconOverlap
-}) => css`
-  text-overflow: ellipsis;
-  ${infoStyles}
-  ${hasIconOverlap && iconOverlapStyles}
-`;
+}) => css({
+  textOverflow: 'ellipsis'
+}, infoStyles, hasIconOverlap && iconOverlapStyles);
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export const titleBoxIconStyles = css`
-  position: absolute;
-  right: ${"var(--ds-space-050, 4px)"};
-  bottom: 0px;
-`;
-export const errorMessageWrapperStyles = css`
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  span {
-    vertical-align: middle;
-    :nth-child(2) {
-      margin-left: ${"var(--ds-space-050, 4px)"};
-      margin-right: ${"var(--ds-space-050, 4px)"};
+export const titleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+export const errorMessageWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  span: {
+    verticalAlign: 'middle',
+    ':nth-child(2)': {
+      marginLeft: "var(--ds-space-050, 4px)",
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }
-`;
+});

package/dist/es2019/card/ui/unhandledErrorCard/index.js

@@ -32,23 +32,20 @@ const getConvertedDimension = dimensions => {
 };
 const wrapperStyles = (dimensions = defaultImageCardDimensions) => {
   try {
-    return css`
-      ${center};
-      ${borderRadius};
-      background: ${`var(--ds-background-neutral, ${N20})`};
-      color: ${`var(--ds-text-subtle, ${N800})`};
-      max-height: 100%;
-      max-width: 100%;
-      ${getConvertedDimension(dimensions)};
-      display: flex;
-      flex-direction: column;
-
-      p {
-        font-size: ${fontSize()}px;
-        text-align: center;
-        display: ${shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'};
+    return css(center, borderRadius, {
+      background: `var(--ds-background-neutral, ${N20})`,
+      color: `var(--ds-text-subtle, ${N800})`,
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: `${fontSize()}px`,
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
       }
-    `;
+    });
   } catch (e) {
     return null;
   }

package/dist/es2019/card/v2/cardV2.js

@@ -7,7 +7,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.1";
+const packageVersion = "77.11.2";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "77.11.1",
+      packageName: "77.11.2",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/utils/lightCards/errorIcon/styles.js

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-export const errorIconWrapperStyles = css`
-  display: flex;
-  color: ${"var(--ds-icon-warning, #ff991f)"};
-`;
+export const errorIconWrapperStyles = css({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

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

@@ -3,13 +3,12 @@ import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export const wrapperStyles = ({
   dimensions
-}) => css`
-  ${center}
-  background: ${`var(--ds-background-neutral, ${N20})`};
-  color: ${`var(--ds-icon, ${N50})`};
-  ${borderRadius}
-  max-height: 100%;
-  max-width: 100%;
-  width: ${dimensions.width};
-  height: ${dimensions.height};
-`;
+}) => css(center, {
+  background: `var(--ds-background-neutral, ${N20})`,
+  color: `var(--ds-icon, ${N50})`
+}, borderRadius, {
+  maxHeight: '100%',
+  maxWidth: '100%',
+  width: dimensions.width,
+  height: dimensions.height
+});

package/dist/es2019/utils/ufoExperiences.js

@@ -4,7 +4,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.1";
+const packageVersion = "77.11.2";
 let concurrentExperience;
 const getExperience = id => {
   if (!concurrentExperience) {

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.1";
+var packageVersion = "77.11.2";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -83,7 +83,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.1";
+var packageVersion = "77.11.2";
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion: packageVersion,
   packageName: packageName,

package/dist/esm/card/ui/actionsBar/cardActions/styles.js

@@ -1,14 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 import { N500, N0 } from '@atlaskit/theme/colors';
 import { borderRadius, size, center } from '@atlaskit/media-ui';
 import { rgba } from '../../styles';
 import { fontFamily } from '@atlaskit/theme/constants';
-var rootStyles = function rootStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), fontFamily());
-};
-export var wrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
+export var wrapperStyles = css({
+  boxSizing: 'border-box',
+  fontFamily: fontFamily(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 export var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -19,5 +23,13 @@ var getVariantStyles = function getVariantStyles(variant) {
 };
 export var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  appearance: none;\n  border: none;\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), center, borderRadius, size(26), "var(--ds-icon, ".concat(N500, ")"), getVariantStyles(variant));
+  return css({
+    appearance: 'none',
+    border: 'none'
+  }, center, borderRadius, size(26), {
+    color: "var(--ds-icon, ".concat(N500, ")"),
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }, getVariantStyles(variant));
 };

package/dist/esm/card/ui/actionsBar/styles.js

@@ -1,10 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 export var actionsBarClassName = 'media-card-actions-bar';
 export var fixedActionBarStyles = "opacity: 1;";
 export var wrapperStyles = function wrapperStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  position: absolute;\n  top: ", ";\n  right: ", ";\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n"])), isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+  return css(isFixed ? fixedActionBarStyles : 'opacity: 0;', transition(), {
+    position: 'absolute',
+    top: "var(--ds-space-100, 8px)",
+    right: "var(--ds-space-100, 8px)",
+    display: 'flex',
+    flexFlow: 'row nowrap',
+    alignItems: 'center'
+  });
 };
 wrapperStyles.displayName = 'ActionsBarWrapper';

package/dist/esm/card/ui/blanket/styles.js

@@ -1,11 +1,17 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export var blanketClassName = 'media-card-blanket';
 export var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(N90A, ")"), ";");
 export var blanketStyles = function blanketStyles(isFixed) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  max-width: 100%;\n  left: 0;\n  top: 0;\n  ", "\n"])), transition(), isFixed ? fixedBlanketStyles : '');
+  return css(transition(), {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    left: 0,
+    top: 0
+  }, isFixed ? fixedBlanketStyles : '');
 };
 blanketStyles.displayName = 'Blanket';

package/dist/esm/card/ui/iconWrapper/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { getTitleBoxHeight } from '../common';
 export function titleBoxHeight(hasTitleBox, breakpoint) {
@@ -15,6 +13,14 @@ export function titleBoxHeight(hasTitleBox, breakpoint) {
 export var iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
     breakpoint = _ref.breakpoint;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  height: calc(100% - ", ");\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n"])), titleBoxHeight(hasTitleBox, breakpoint));
+  return css({
+    position: 'absolute',
+    width: '100%',
+    height: "calc(100% - ".concat(titleBoxHeight(hasTitleBox, breakpoint), ")"),
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center'
+  });
 };
 iconWrapperStyles.displayName = 'MediaIconWrapper';

package/dist/esm/card/ui/playButton/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N0, N90A } from '@atlaskit/theme/colors';
 export var playButtonClassName = 'media-card-play-button';
@@ -7,5 +5,26 @@ export var bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 export var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-export var playButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  span {\n    position: absolute;\n  }\n"])), "var(--ds-icon-inverse, ".concat(N0, ")"));
-export var backgroundStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n  background: ", ";\n  border-radius: 100%;\n"])), discSize, discSize, "var(--ds-background-neutral-bold, ".concat(N90A, ")"));
+export var playButtonWrapperStyles = css({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: "var(--ds-icon-inverse, ".concat(N0, ")"),
+  span: {
+    position: 'absolute'
+  }
+});
+export var backgroundStyles = css({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: "".concat(discSize, "px"),
+  height: "".concat(discSize, "px"),
+  background: "var(--ds-background-neutral-bold, ".concat(N90A, ")"),
+  borderRadius: '100%'
+});

package/dist/esm/card/ui/progressBar/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { rgba } from '../styles';
@@ -35,6 +33,6 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 export var styledBarStyles = function styledBarStyles(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
+  return css(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

package/dist/esm/card/ui/styles.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/media-ui';
 import { N60A } from '@atlaskit/theme/colors';
@@ -61,7 +59,15 @@ export var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTi
   }
   return "\n    &:hover .".concat(tickBoxClassName, " {\n      ").concat(tickboxFixedStyles, "\n    }\n  ");
 };
-export var cardImageContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  width: 100%;\n  height: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  ", "\n"])), borderRadius);
+export var cardImageContainerStyles = css({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, borderRadius);
 var defaultTransitionDuration = '.3s';
 export var transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';

package/dist/esm/card/ui/titleBox/styles.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { responsiveSettings, getTitleBoxHeight, Breakpoint } from '../common';
 import { N0, N800 } from '@atlaskit/theme/colors';
@@ -16,20 +14,50 @@ var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 export var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     titleBoxBgColor = _ref.titleBoxBgColor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  background-color: ", ";\n  color: ", ";\n  cursor: inherit;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  ", "\n"])), "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"), "var(--ds-text, ".concat(N800, ")"), generateResponsiveStyles(breakpoint));
+  return css({
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    backgroundColor: "var(--ds-surface, ".concat(rgba(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : N0, 1), ")"),
+    color: "var(--ds-text, ".concat(N800, ")"),
+    cursor: 'inherit',
+    pointerEvents: 'none',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center'
+  }, generateResponsiveStyles(breakpoint));
 };
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";
 var iconOverlapStyles = "padding-right: 10px;";
 export var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-weight: 600;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return css({
+    fontWeight: 600
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 export var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return css({
+    textOverflow: 'ellipsis'
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-export var titleBoxIconStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
-export var errorMessageWrapperStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  span {\n    vertical-align: middle;\n    :nth-child(2) {\n      margin-left: ", ";\n      margin-right: ", ";\n    }\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)");
+export var titleBoxIconStyles = css({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+export var errorMessageWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  span: {
+    verticalAlign: 'middle',
+    ':nth-child(2)': {
+      marginLeft: "var(--ds-space-050, 4px)",
+      marginRight: "var(--ds-space-050, 4px)"
+    }
+  }
+});

package/dist/esm/card/ui/unhandledErrorCard/index.js

@@ -3,8 +3,6 @@ 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";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
@@ -43,7 +41,20 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultImageCardDimensions;
   try {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", ";\n      ", ";\n      background: ", ";\n      color: ", ";\n      max-height: 100%;\n      max-width: 100%;\n      ", ";\n      display: flex;\n      flex-direction: column;\n\n      p {\n        font-size: ", "px;\n        text-align: center;\n        display: ", ";\n      }\n    "])), center, borderRadius, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-text-subtle, ".concat(N800, ")"), getConvertedDimension(dimensions), fontSize(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+    return css(center, borderRadius, {
+      background: "var(--ds-background-neutral, ".concat(N20, ")"),
+      color: "var(--ds-text-subtle, ".concat(N800, ")"),
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: "".concat(fontSize(), "px"),
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
+      }
+    });
   } catch (e) {
     return null;
   }

package/dist/esm/card/v2/cardV2.js

@@ -9,7 +9,7 @@ import { IntlProvider, injectIntl } from 'react-intl-next';
 import { ExternalImageCard } from './externalImageCard';
 import { FileCard } from './fileCard';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.1";
+var packageVersion = "77.11.2";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/inline/loader.js

@@ -103,7 +103,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "77.11.1",
+        packageName: "77.11.2",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

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

@@ -1,4 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-export var errorIconWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");
+export var errorIconWrapperStyles = css({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

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

@@ -1,9 +1,15 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
 import { center, borderRadius } from '@atlaskit/media-ui';
 import { N20, N50 } from '@atlaskit/theme/colors';
 export var wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), center, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-icon, ".concat(N50, ")"), borderRadius, dimensions.width, dimensions.height);
+  return css(center, {
+    background: "var(--ds-background-neutral, ".concat(N20, ")"),
+    color: "var(--ds-icon, ".concat(N50, ")")
+  }, borderRadius, {
+    maxHeight: '100%',
+    maxWidth: '100%',
+    width: dimensions.width,
+    height: dimensions.height
+  });
 };

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.11.1";
+var packageVersion = "77.11.2";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {