@atlaskit/media-card 77.11.0 → 77.11.2

package/dist/cjs/card/card.js

@@ -50,7 +50,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

@@ -90,7 +90,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -1,21 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyles = exports.cardActionButtonStyles = exports.CardActionIconButtonVariant = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("../../styles");
 var _constants = require("@atlaskit/theme/constants");
-var _templateObject, _templateObject2, _templateObject3;
-var rootStyles = function rootStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  font-family: ", ";\n\n  * {\n    box-sizing: border-box;\n  }\n"])), (0, _constants.fontFamily)());
-};
-var wrapperStyles = exports.wrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
+var wrapperStyles = exports.wrapperStyles = (0, _react.css)({
+  boxSizing: 'border-box',
+  fontFamily: (0, _constants.fontFamily)(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 var CardActionIconButtonVariant = exports.CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -26,5 +29,13 @@ var getVariantStyles = function getVariantStyles(variant) {
 };
 var cardActionButtonStyles = exports.cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  ", "\n  ", "\n    ", "\n    color: ", ";\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  ", "\n"])), _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), "var(--ds-icon, ".concat(_colors.N500, ")"), getVariantStyles(variant));
+  return (0, _react.css)({
+    appearance: 'none',
+    border: 'none'
+  }, _mediaUi.center, _mediaUi.borderRadius, (0, _mediaUi.size)(26), {
+    color: "var(--ds-icon, ".concat(_colors.N500, ")"),
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  }, getVariantStyles(variant));
 };

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

@@ -1,17 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyles = exports.fixedActionBarStyles = exports.actionsBarClassName = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("../styles");
-var _templateObject;
 var actionsBarClassName = exports.actionsBarClassName = 'media-card-actions-bar';
 var fixedActionBarStyles = exports.fixedActionBarStyles = "opacity: 1;";
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(isFixed) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;', (0, _styles.transition)(), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+  return (0, _react.css)(isFixed ? fixedActionBarStyles : 'opacity: 0;', (0, _styles.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/cjs/card/ui/blanket/styles.js

@@ -1,18 +1,23 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 var blanketClassName = exports.blanketClassName = 'media-card-blanket';
 var fixedBlanketStyles = exports.fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(_colors.N90A, ")"), ";");
 var blanketStyles = exports.blanketStyles = function blanketStyles(isFixed) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.transition)(), isFixed ? fixedBlanketStyles : '');
+  return (0, _react.css)((0, _styles.transition)(), {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    left: 0,
+    top: 0
+  }, isFixed ? fixedBlanketStyles : '');
 };
 blanketStyles.displayName = 'Blanket';

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.IconMessageWrapper = void 0;
 var _react = require("@emotion/react");
-var _primitives = require("@atlaskit/primitives");
 /**@jsx jsx */
 
 var breatheAnimation = (0, _react.keyframes)({
@@ -19,32 +18,32 @@ var breatheAnimation = (0, _react.keyframes)({
     opacity: 1
   }
 });
-var animatedStyles = (0, _primitives.xcss)({
+var animatedStyles = (0, _react.css)({
   animationName: breatheAnimation,
   animationDuration: '3.5s',
   animationTimingFunction: 'ease-in-out',
   animationIterationCount: 'infinite'
 });
-var reducedFontStyle = (0, _primitives.xcss)({
+var reducedFontStyle = (0, _react.css)({
   fontSize: '0.7em'
 });
-var baseStyles = (0, _primitives.xcss)({
+var baseStyles = (0, _react.css)({
   overflow: 'hidden',
   opacity: 1,
   fontWeight: 450,
-  color: 'color.text.subtlest',
+  color: "var(--ds-text-subtlest, #7A869A)",
   textAlign: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginBottom: '-1em',
   // Needs pixel precision to align the icon at the center of the box
-  paddingBlock: 'space.050',
-  paddingInline: 'space.100'
+  paddingBlock: "var(--ds-space-050, 4px)",
+  paddingInline: "var(--ds-space-100, 8px)"
 });
 var IconMessageWrapper = exports.IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
-  return (0, _react.jsx)(_primitives.Box, {
+  return (0, _react.jsx)("div", {
     id: "iconMessageWrapper",
-    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
+    css: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

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

@@ -1,15 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.iconWrapperStyles = void 0;
 exports.titleBoxHeight = titleBoxHeight;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _common = require("../common");
-var _templateObject;
 function titleBoxHeight(hasTitleBox, breakpoint) {
   // there is no titlebox
   if (!hasTitleBox) {
@@ -23,6 +20,14 @@ function titleBoxHeight(hasTitleBox, breakpoint) {
 var iconWrapperStyles = exports.iconWrapperStyles = function iconWrapperStyles(_ref) {
   var hasTitleBox = _ref.hasTitleBox,
     breakpoint = _ref.breakpoint;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react.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/cjs/card/ui/playButton/styles.js

@@ -1,18 +1,36 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.playButtonWrapperStyles = exports.playButtonClassName = exports.fixedPlayButtonStyles = exports.bkgClassName = exports.backgroundStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2;
 var playButtonClassName = exports.playButtonClassName = 'media-card-play-button';
 var bkgClassName = exports.bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
 var fixedPlayButtonStyles = exports.fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N0, ")"));
-var backgroundStyles = exports.backgroundStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N90A, ")"));
+var playButtonWrapperStyles = exports.playButtonWrapperStyles = (0, _react.css)({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+  span: {
+    position: 'absolute'
+  }
+});
+var backgroundStyles = exports.backgroundStyles = (0, _react.css)({
+  transitionProperty: 'width, height',
+  transitionDuration: '0.1s',
+  position: 'absolute',
+  width: "".concat(discSize, "px"),
+  height: "".concat(discSize, "px"),
+  background: "var(--ds-background-neutral-bold, ".concat(_colors.N90A, ")"),
+  borderRadius: '100%'
+});

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

@@ -1,18 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.generateResponsiveStyles = generateResponsiveStyles;
 exports.styledBarStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _common = require("../common");
-var _templateObject;
 var height = 3;
 var padding = 1;
 var width = 95; // %
@@ -43,6 +40,6 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 var styledBarStyles = exports.styledBarStyles = function styledBarStyles(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
+  return (0, _react.css)(getStyledBarStylesBasedOnProps(props));
 };
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transition = exports.rgba = exports.getWrapperShadow = exports.getWrapperDimensions = exports.getSelectableTickBoxStyles = exports.getCursorStyle = exports.getClickablePlayButtonStyles = exports.generateResponsiveStyles = exports.cardImageContainerStyles = exports.calcBreakpointSize = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
@@ -16,7 +15,6 @@ var _cardDimensions = require("../../utils/cardDimensions");
 var _styles = require("./tickBox/styles");
 var _styles2 = require("./playButton/styles");
 var _common = require("./common");
-var _templateObject;
 var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
 var calcBreakpointSize = exports.calcBreakpointSize = function calcBreakpointSize() {
   var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -68,7 +66,15 @@ var getSelectableTickBoxStyles = exports.getSelectableTickBoxStyles = function g
   }
   return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
 };
-var cardImageContainerStyles = exports.cardImageContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _mediaUi.borderRadius);
+var cardImageContainerStyles = exports.cardImageContainerStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  maxWidth: '100%',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden'
+}, _mediaUi.borderRadius);
 var defaultTransitionDuration = '.3s';
 var transition = exports.transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';

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

@@ -1,16 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleBoxWrapperStyles = exports.titleBoxIconStyles = exports.titleBoxHeaderStyles = exports.titleBoxFooterStyles = exports.errorMessageWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _common = require("../common");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("../styles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 var generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
@@ -23,20 +20,50 @@ var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     titleBoxBgColor = _ref.titleBoxBgColor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"), "var(--ds-text, ".concat(_colors.N800, ")"), generateResponsiveStyles(breakpoint));
+  return (0, _react.css)({
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+    backgroundColor: "var(--ds-surface, ".concat((0, _styles.rgba)(titleBoxBgColor && HEX_REGEX.test(titleBoxBgColor) ? titleBoxBgColor : _colors.N0, 1), ")"),
+    color: "var(--ds-text, ".concat(_colors.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;";
 var titleBoxHeaderStyles = exports.titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
   var hasIconOverlap = _ref2.hasIconOverlap;
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return (0, _react.css)({
+    fontWeight: 600
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
 var titleBoxFooterStyles = exports.titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
   var hasIconOverlap = _ref3.hasIconOverlap;
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-overflow: ellipsis;\n  ", "\n  ", "\n"])), infoStyles, hasIconOverlap && iconOverlapStyles);
+  return (0, _react.css)({
+    textOverflow: 'ellipsis'
+  }, infoStyles, hasIconOverlap && iconOverlapStyles);
 };
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
-var errorMessageWrapperStyles = exports.errorMessageWrapperStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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)");
+var titleBoxIconStyles = exports.titleBoxIconStyles = (0, _react.css)({
+  position: 'absolute',
+  right: "var(--ds-space-050, 4px)",
+  bottom: '0px'
+});
+var errorMessageWrapperStyles = exports.errorMessageWrapperStyles = (0, _react.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/cjs/card/ui/unhandledErrorCard/index.js

@@ -10,7 +10,6 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
@@ -18,10 +17,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _mediaUi = require("@atlaskit/media-ui");
 var _utils = require("../../../utils");
-var _templateObject;
-/** @jsx jsx */
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var isPercentage = function isPercentage(value) {
   return /^\d+(\.\d+)?%$/.test(value);
 };
@@ -50,7 +47,20 @@ var getConvertedDimension = function getConvertedDimension(dimensions) {
 var wrapperStyles = function wrapperStyles() {
   var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _utils.defaultImageCardDimensions;
   try {
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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    "])), _mediaUi.center, _mediaUi.borderRadius, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-text-subtle, ".concat(_colors.N800, ")"), getConvertedDimension(dimensions), (0, _constants.fontSize)(), shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none');
+    return (0, _react2.css)(_mediaUi.center, _mediaUi.borderRadius, {
+      background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+      color: "var(--ds-text-subtle, ".concat(_colors.N800, ")"),
+      maxHeight: '100%',
+      maxWidth: '100%'
+    }, getConvertedDimension(dimensions), {
+      display: 'flex',
+      flexDirection: 'column',
+      p: {
+        fontSize: "".concat((0, _constants.fontSize)(), "px"),
+        textAlign: 'center',
+        display: shouldShowText(getConvertedDimension(dimensions)) ? 'block' : 'none'
+      }
+    });
   } catch (e) {
     return null;
   }

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

@@ -16,7 +16,7 @@ var _externalImageCard = require("./externalImageCard");
 var _fileCard = require("./fileCard");
 var _excluded = ["identifier"];
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/inline/loader.js

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

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.errorIconWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  color: ", ";\n"])), "var(--ds-icon-warning, #ff991f)");
+var errorIconWrapperStyles = exports.errorIconWrapperStyles = (0, _react.css)({
+  display: 'flex',
+  color: "var(--ds-icon-warning, #ff991f)"
+});

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

@@ -1,16 +1,21 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.wrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
   var dimensions = _ref.dimensions;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  background: ", ";\n  color: ", ";\n  ", "\n  max-height: 100%;\n  max-width: 100%;\n  width: ", ";\n  height: ", ";\n"])), _mediaUi.center, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-icon, ".concat(_colors.N50, ")"), _mediaUi.borderRadius, dimensions.width, dimensions.height);
+  return (0, _react.css)(_mediaUi.center, {
+    background: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    color: "var(--ds-icon, ".concat(_colors.N50, ")")
+  }, _mediaUi.borderRadius, {
+    maxHeight: '100%',
+    maxWidth: '100%',
+    width: dimensions.width,
+    height: dimensions.height
+  });
 };

package/dist/cjs/utils/ufoExperiences.js

@@ -14,7 +14,7 @@ var _mediaClient = require("@atlaskit/media-client");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.11.0";
+var packageVersion = "77.11.2";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/es2019/card/card.js

@@ -28,7 +28,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.0";
+const packageVersion = "77.11.2";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

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

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "77.11.0";
+const packageVersion = "77.11.2";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -3,20 +3,16 @@ 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';
-const rootStyles = () => css`
-  box-sizing: border-box;
-  font-family: ${fontFamily()};
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-export const wrapperStyles = css`
-  ${rootStyles()}
-  display: flex;
-  position: relative;
-  line-height: 0;
-`;
+export const wrapperStyles = css({
+  boxSizing: 'border-box',
+  fontFamily: fontFamily(),
+  '*': {
+    boxSizing: 'border-box'
+  },
+  display: 'flex',
+  position: 'relative',
+  lineHeight: 0
+});
 export let CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
@@ -42,17 +38,12 @@ const getVariantStyles = variant => {
 };
 export const cardActionButtonStyles = ({
   variant
-}) => css`
-  appearance: none;
-  border: none;
-  ${center}
-  ${borderRadius}
-    ${size(26)}
-    color: ${`var(--ds-icon, ${N500})`};
-
-  &:hover {
-    cursor: pointer;
+}) => css({
+  appearance: 'none',
+  border: 'none'
+}, center, borderRadius, size(26), {
+  color: `var(--ds-icon, ${N500})`,
+  '&:hover': {
+    cursor: 'pointer'
   }
-
-  ${getVariantStyles(variant)}
-`;
+}, getVariantStyles(variant));

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

@@ -2,14 +2,12 @@ import { css } from '@emotion/react';
 import { transition } from '../styles';
 export const actionsBarClassName = 'media-card-actions-bar';
 export const fixedActionBarStyles = `opacity: 1;`;
-export const wrapperStyles = isFixed => css`
-  ${isFixed ? fixedActionBarStyles : 'opacity: 0;'}
-  ${transition()}
-  position: absolute;
-  top: ${"var(--ds-space-100, 8px)"};
-  right: ${"var(--ds-space-100, 8px)"};
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-`;
+export const wrapperStyles = isFixed => 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/es2019/card/ui/blanket/styles.js

@@ -3,15 +3,13 @@ import { transition } from '../styles';
 import { N90A } from '@atlaskit/theme/colors';
 export const blanketClassName = 'media-card-blanket';
 export const fixedBlanketStyles = `background-color: ${`var(--ds-blanket, ${N90A})`};`;
-export const blanketStyles = isFixed => css`
-  ${transition()}
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  max-width: 100%;
-  left: 0;
-  top: 0;
-  ${isFixed ? fixedBlanketStyles : ''}
-`;
+export const blanketStyles = isFixed => css(transition(), {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  maxHeight: '100%',
+  maxWidth: '100%',
+  left: 0,
+  top: 0
+}, isFixed ? fixedBlanketStyles : '');
 blanketStyles.displayName = 'Blanket';