@atlaskit/media-card 77.11.1 → 77.11.3

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.1";
+var packageVersion = "77.11.3";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

package/dist/cjs/card/cardView.js

@@ -207,7 +207,9 @@ var CardViewBase = exports.CardViewBase = /*#__PURE__*/function (_React$Componen
         name = _ref3.name;
       var hasTitleBox = !!renderTitleBox || !!renderFailedTitleBox;
       return (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-        css: _styles.cardImageContainerStyles,
+        css: _styles.cardImageContainerStyles
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: _classnames.fileCardImageViewSelector,
         "data-testid": _classnames.fileCardImageViewSelector,
         "data-test-media-name": name,

package/dist/cjs/card/inlinePlayerWrapper.js

@@ -16,7 +16,9 @@ var InlinePlayerWrapper = exports.InlinePlayerWrapper = function InlinePlayerWra
     innerRef = props.innerRef;
   return (0, _react.jsx)("div", {
     id: "inlinePlayerWrapper",
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _inlinePlayerWrapperStyles.inlinePlayerClassName,
     css: (0, _inlinePlayerWrapperStyles.inlinePlayerWrapperStyles)({
       selected: selected,

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.1";
+var packageVersion = "77.11.3";
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
   packageVersion: packageVersion,
   packageName: packageName,

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

@@ -11,7 +11,9 @@ var _styles = require("./styles");
 var ActionsBarWrapper = exports.ActionsBarWrapper = function ActionsBarWrapper(props) {
   return (0, _react.jsx)("div", {
     id: "actionsBarWrapper",
-    css: (0, _styles.wrapperStyles)(props.isFixed),
+    css: (0, _styles.wrapperStyles)(props.isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _styles.actionsBarClassName
   }, props.children);
 };

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

@@ -16,7 +16,9 @@ var CardActionButton = exports.CardActionButton = /*#__PURE__*/(0, _react.forwar
     id: "cardActionButton",
     "data-testid": "media-card-primary-action",
     "aria-label": props.label,
-    css: (0, _styles.cardActionButtonStyles)(props),
+    css: (0, _styles.cardActionButtonStyles)(props)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: props.style,
     onClick: props.onClick,
     onMouseDown: props.onMouseDown,

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

@@ -47,7 +47,9 @@ var CardActionIconButton = exports.CardActionIconButton = /*#__PURE__*/function
         variant = _this$props.variant;
       return /*#__PURE__*/_react.default.createElement(_cardActionButton.CardActionButton, {
         onClick: onClick,
-        onMouseDown: this.onMouseDown,
+        onMouseDown: this.onMouseDown
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: {
           color: triggerColor
         },

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

@@ -81,7 +81,9 @@ var CardActionsDropdownMenu = exports.CardActionsDropdownMenu = /*#__PURE__*/fun
             var triggerRef = _ref.triggerRef,
               providedProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
             return /*#__PURE__*/_react.default.createElement(CardActionButtonWithAnalytics, (0, _extends2.default)({
-              variant: triggerVariant,
+              variant: triggerVariant
+              // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+              ,
               style: {
                 color: triggerColor
               },

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/blanket.js

@@ -11,7 +11,9 @@ var _styles = require("./styles");
 var Blanket = exports.Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   return (0, _react.jsx)("div", {
-    css: (0, _styles.blanketStyles)(isFixed),
+    css: (0, _styles.blanketStyles)(isFixed)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _styles.blanketClassName,
     "data-testid": "media-card-blanket"
   });

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/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/playButtonBackground.js

@@ -9,6 +9,7 @@ var _styles = require("./styles");
 /**@jsx jsx */
 
 var PlayButtonBackground = exports.PlayButtonBackground = function PlayButtonBackground() {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return (0, _react.jsx)("div", {
     css: _styles.backgroundStyles,
     className: _styles.bkgClassName

package/dist/cjs/card/ui/playButton/playButtonWrapper.js

@@ -9,8 +9,11 @@ var _styles = require("./styles");
 /**@jsx jsx */
 
 var PlayButtonWrapper = exports.PlayButtonWrapper = function PlayButtonWrapper(props) {
-  return (0, _react.jsx)("div", {
-    css: _styles.playButtonWrapperStyles,
-    className: _styles.playButtonClassName
-  }, props.children);
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    (0, _react.jsx)("div", {
+      css: _styles.playButtonWrapperStyles,
+      className: _styles.playButtonClassName
+    }, props.children)
+  );
 };

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/tickBox/tickBoxWrapper.js

@@ -35,7 +35,9 @@ wrapperStyles.displayName = 'TickBoxWrapper';
 var TickBoxWrapper = exports.TickBoxWrapper = function TickBoxWrapper(props) {
   return (0, _react.jsx)("div", {
     id: "tickBoxWrapper",
-    css: wrapperStyles(props.selected),
+    css: wrapperStyles(props.selected)
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _styles.tickBoxClassName
   }, props.children);
 };

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/ui/wrapper/wrapper.js

@@ -25,7 +25,9 @@ var Wrapper = exports.Wrapper = function Wrapper(props) {
     isTickBoxSelectable = props.isTickBoxSelectable,
     shouldDisplayTooltip = props.shouldDisplayTooltip;
   return (0, _react.jsx)("div", {
-    id: "newFileExperienceWrapper",
+    id: "newFileExperienceWrapper"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _cardConstants.newFileExperienceClassName,
     "data-testid": testId,
     css: (0, _styles.wrapperStyles)({

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.1";
+var packageVersion = "77.11.3";
 var CardV2Base = exports.CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

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

@@ -66,7 +66,8 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     disableAnimation = _ref.disableAnimation,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
-    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer;
+    shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
+    overriddenCreationDate = _ref.overriddenCreationDate;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -210,7 +211,9 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     createdAt = _ref5.createdAt;
   var actionsWithDetails = metadata && actions ? (0, _actions.attachDetailsToActions)(actions, metadata) : [];
   var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", {
-    css: _styles.cardImageContainerStyles,
+    css: _styles.cardImageContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _classnames.fileCardImageViewSelector,
     "data-testid": _classnames.fileCardImageViewSelector,
     "data-test-media-name": name,
@@ -249,7 +252,7 @@ var CardViewV2Base = exports.CardViewV2Base = function CardViewV2Base(_ref) {
     isFixed: isFixedBlanket
   }), renderTitleBox && name && (0, _react.jsx)(_titleBox.TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor

package/dist/cjs/card/v2/cardviews/cardViewWrapper.js

@@ -19,7 +19,7 @@ var _blanket = require("../../ui/blanket/blanket");
 var _actionsBar = require("../../ui/actionsBar/actionsBar");
 var _classnames = require("../../classnames");
 var _openMediaViewerButton = _interopRequireDefault(require("../../ui/openMediaViewerButton/openMediaViewerButton"));
-var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef"];
+var _excluded = ["cardPreview", "testId", "dimensions", "appearance", "metadata", "selected", "selectable", "actions", "breakpoint", "disableOverlay", "titleBoxBgColor", "titleBoxIcon", "shouldHideTooltip", "children", "onClick", "onMouseEnter", "mediaCardCursor", "customBlanket", "customTitleBox", "progressBar", "shouldOpenMediaViewer", "openMediaViewerButtonRef", "overriddenCreationDate"];
 /** @jsx jsx */
 var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.forwardRef(function (_ref, ref) {
   var cardPreview = _ref.cardPreview,
@@ -46,6 +46,7 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
     _ref$openMediaViewerB = _ref.openMediaViewerButtonRef,
     openMediaViewerButtonRef = _ref$openMediaViewerB === void 0 ? null : _ref$openMediaViewerB,
+    overriddenCreationDate = _ref.overriddenCreationDate,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _ref2 = metadata || {},
     name = _ref2.name,
@@ -55,13 +56,15 @@ var CardViewWrapper = exports.CardViewWrapper = /*#__PURE__*/_react2.default.for
   var defaultBlanket = !disableOverlay && (0, _react.jsx)(_blanket.Blanket, null);
   var defaultTitleBox = !disableOverlay && !!name && (0, _react.jsx)(_titleBox.TitleBox, {
     name: name,
-    createdAt: createdAt,
+    createdAt: overriddenCreationDate !== null && overriddenCreationDate !== void 0 ? overriddenCreationDate : createdAt,
     breakpoint: breakpoint,
     titleBoxIcon: titleBoxIcon,
     titleBoxBgColor: titleBoxBgColor
   });
   var contents = (0, _react.jsx)(_react2.default.Fragment, null, (0, _react.jsx)("div", (0, _extends2.default)({
-    css: _styles.cardImageContainerStyles,
+    css: _styles.cardImageContainerStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: _classnames.fileCardImageViewSelector,
     "data-testid": _classnames.fileCardImageViewSelector,
     "data-test-media-name": name,

package/dist/cjs/card/v2/cardviews/index.js

@@ -53,7 +53,8 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
     error = _ref.error,
     disableAnimation = _ref.disableAnimation,
     shouldOpenMediaViewer = _ref.shouldOpenMediaViewer,
-    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef;
+    openMediaViewerButtonRef = _ref.openMediaViewerButtonRef,
+    overriddenCreationDate = _ref.overriddenCreationDate;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didImageRender = _useState2[0],
@@ -112,7 +113,8 @@ var CardViewsBase = exports.CardViewsBase = function CardViewsBase(_ref) {
       mediaCardCursor: mediaCardCursor,
       innerRef: innerRef,
       shouldOpenMediaViewer: shouldOpenMediaViewer,
-      openMediaViewerButtonRef: openMediaViewerButtonRef
+      openMediaViewerButtonRef: openMediaViewerButtonRef,
+      overriddenCreationDate: overriddenCreationDate
     };
     switch (status) {
       case 'uploading':