@atlaskit/media-card 77.0.2 → 77.1.0

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var CardActionIconButtonWithProps = function CardActionIconButtonWithProps(props) {
   return (0, _react.jsx)(_cardActionIconButton.CardActionIconButton, props);
 };
-var CardActionsView = /*#__PURE__*/function (_Component) {
+var CardActionsView = exports.CardActionsView = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardActionsView, _Component);
   var _super = _createSuper(CardActionsView);
   function CardActionsView() {
@@ -100,7 +100,6 @@ var CardActionsView = /*#__PURE__*/function (_Component) {
   }]);
   return CardActionsView;
 }(_react2.Component);
-exports.CardActionsView = CardActionsView;
 function actionWithIcon(action) {
   return !!action.icon;
 }

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

@@ -15,19 +15,16 @@ 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 = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  display: flex;\n  position: relative;\n  line-height: 0;\n"])), rootStyles());
-exports.wrapperStyles = wrapperStyles;
-var CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
+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 CardActionIconButtonVariant = exports.CardActionIconButtonVariant = /*#__PURE__*/function (CardActionIconButtonVariant) {
   CardActionIconButtonVariant["default"] = "default";
   CardActionIconButtonVariant["filled"] = "filled";
   return CardActionIconButtonVariant;
 }({});
-exports.CardActionIconButtonVariant = CardActionIconButtonVariant;
 var getVariantStyles = function getVariantStyles(variant) {
   return variant === 'filled' ? "\n    background-color: ".concat("var(--ds-surface-overlay, ".concat((0, _styles.rgba)(_colors.N0, 0.8), ")"), ";\n    margin-right: 8px;\n\n    &:last-child {\n      margin-right: 0;\n    }\n\n    &:hover {\n      background-color: ", "var(--ds-surface-overlay-hovered, ".concat((0, _styles.rgba)(_colors.N0, 0.6), ")"), "\n    }\n  ") : "\n    &:hover {\n      background-color: ".concat("var(--ds-background-neutral-subtle-hovered, rgba(9, 30, 66, 0.06))", ";\n    }\n  ");
 };
-var cardActionButtonStyles = function cardActionButtonStyles(_ref) {
+var cardActionButtonStyles = exports.cardActionButtonStyles = function cardActionButtonStyles(_ref) {
   var variant = _ref.variant;
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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));
-};
-exports.cardActionButtonStyles = cardActionButtonStyles;
+};

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

@@ -9,12 +9,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _styles = require("../styles");
 var _templateObject;
-var actionsBarClassName = 'media-card-actions-bar';
-exports.actionsBarClassName = actionsBarClassName;
-var fixedActionBarStyles = "opacity: 1;";
-exports.fixedActionBarStyles = fixedActionBarStyles;
-var wrapperStyles = function wrapperStyles(isFixed) {
+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)");
 };
-exports.wrapperStyles = wrapperStyles;
 wrapperStyles.displayName = 'ActionsBarWrapper';

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

@@ -8,11 +8,11 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var Blanket = function Blanket(props) {
+var Blanket = exports.Blanket = function Blanket(props) {
   var isFixed = props.isFixed;
   return (0, _react.jsx)("div", {
     css: (0, _styles.blanketStyles)(isFixed),
-    className: _styles.blanketClassName
+    className: _styles.blanketClassName,
+    "data-testid": "media-card-blanket"
   });
-};
-exports.Blanket = Blanket;
+};

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

@@ -10,12 +10,9 @@ var _react = require("@emotion/react");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
-var blanketClassName = 'media-card-blanket';
-exports.blanketClassName = blanketClassName;
-var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(_colors.N90A, ")"), ";");
-exports.fixedBlanketStyles = fixedBlanketStyles;
-var blanketStyles = function blanketStyles(isFixed) {
+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 : '');
 };
-exports.blanketStyles = blanketStyles;
 blanketStyles.displayName = 'Blanket';

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

@@ -7,13 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.responsiveSettings = exports.getTitleBoxHeight = exports.Breakpoint = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _responsiveSettings;
-var Breakpoint = /*#__PURE__*/function (Breakpoint) {
+var Breakpoint = exports.Breakpoint = /*#__PURE__*/function (Breakpoint) {
   Breakpoint["SMALL"] = "small";
   Breakpoint["LARGE"] = "large";
   return Breakpoint;
 }({});
-exports.Breakpoint = Breakpoint;
-var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.SMALL, {
+var responsiveSettings = exports.responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default)(_responsiveSettings, Breakpoint.SMALL, {
   fontSize: 11,
   lineHeight: 14,
   titleBox: {
@@ -28,8 +27,6 @@ var responsiveSettings = (_responsiveSettings = {}, (0, _defineProperty2.default
     horizontalPadding: 12
   }
 }), _responsiveSettings);
-exports.responsiveSettings = responsiveSettings;
-var getTitleBoxHeight = function getTitleBoxHeight(breakpoint) {
+var getTitleBoxHeight = exports.getTitleBoxHeight = function getTitleBoxHeight(breakpoint) {
   return (responsiveSettings[breakpoint].lineHeight + responsiveSettings[breakpoint].titleBox.verticalPadding) * 2;
-};
-exports.getTitleBoxHeight = getTitleBoxHeight;
+};

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

@@ -8,7 +8,7 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var IconMessageWrapper = function IconMessageWrapper(props) {
+var IconMessageWrapper = exports.IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
   return (0, _react.jsx)("div", {
@@ -18,5 +18,4 @@ var IconMessageWrapper = function IconMessageWrapper(props) {
       reducedFont: reducedFont
     })
   }, props.children);
-};
-exports.IconMessageWrapper = IconMessageWrapper;
+};

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

@@ -10,7 +10,7 @@ var _react = _interopRequireDefault(require("react"));
 var _iconMessageWrapper = require("./iconMessageWrapper");
 var _mediaUi = require("@atlaskit/media-ui");
 var _reactIntlNext = require("react-intl-next");
-var IconMessage = function IconMessage(_ref) {
+var IconMessage = exports.IconMessage = function IconMessage(_ref) {
   var messageDescriptor = _ref.messageDescriptor,
     _ref$animated = _ref.animated,
     animated = _ref$animated === void 0 ? false : _ref$animated,
@@ -21,37 +21,31 @@ var IconMessage = function IconMessage(_ref) {
     reducedFont: reducedFont
   }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, messageDescriptor)));
 };
-exports.IconMessage = IconMessage;
-var CreatingPreview = function CreatingPreview(_ref2) {
+var CreatingPreview = exports.CreatingPreview = function CreatingPreview(_ref2) {
   var disableAnimation = _ref2.disableAnimation;
   return /*#__PURE__*/_react.default.createElement(IconMessage, {
     messageDescriptor: _mediaUi.messages.creating_preview,
     animated: !disableAnimation
   });
 };
-exports.CreatingPreview = CreatingPreview;
-var PreviewUnavailable = function PreviewUnavailable(props) {
+var PreviewUnavailable = exports.PreviewUnavailable = function PreviewUnavailable(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
     messageDescriptor: _mediaUi.messages.preview_unavailable
   }));
 };
-exports.PreviewUnavailable = PreviewUnavailable;
-var FailedToLoad = function FailedToLoad(props) {
+var FailedToLoad = exports.FailedToLoad = function FailedToLoad(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
     messageDescriptor: _mediaUi.messages.failed_to_load
   }));
 };
-exports.FailedToLoad = FailedToLoad;
-var FailedToUpload = function FailedToUpload(props) {
+var FailedToUpload = exports.FailedToUpload = function FailedToUpload(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
     messageDescriptor: _mediaUi.messages.failed_to_upload
   }));
 };
-exports.FailedToUpload = FailedToUpload;
-var PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {
+var PreviewCurrentlyUnavailable = exports.PreviewCurrentlyUnavailable = function PreviewCurrentlyUnavailable(props) {
   return /*#__PURE__*/_react.default.createElement(IconMessage, (0, _extends2.default)({}, props, {
     messageDescriptor: _mediaUi.messages.preview_currently_unavailable,
     reducedFont: true
   }));
-};
-exports.PreviewCurrentlyUnavailable = PreviewCurrentlyUnavailable;
+};

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

@@ -16,8 +16,7 @@ var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
     reducedFont = _ref.reducedFont;
   return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  opacity: 1;\n  font-weight: 450;\n  ", "\n  color: ", ";\n  text-align: center;\n  ", "\n  margin-bottom: -1em;\n  padding: 3px 10px;\n"])), reducedFont ? 'font-size: 0.7em;' : '', "var(--ds-text-subtlest, ".concat(_colors.N300, ")"), animated ? animatedStyles : '');
 };
-var iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
+var iconMessageWrapperStyles = exports.iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
   return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), getStylesBasedOnProps(props));
 };
-exports.iconMessageWrapperStyles = iconMessageWrapperStyles;
 iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

@@ -8,7 +8,7 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var IconWrapper = function IconWrapper(props) {
+var IconWrapper = exports.IconWrapper = function IconWrapper(props) {
   var breakpoint = props.breakpoint,
     hasTitleBox = props.hasTitleBox;
   return (0, _react.jsx)("div", {
@@ -18,5 +18,4 @@ var IconWrapper = function IconWrapper(props) {
       hasTitleBox: hasTitleBox
     })
   }, props.children);
-};
-exports.IconWrapper = IconWrapper;
+};

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

@@ -20,10 +20,9 @@ function titleBoxHeight(hasTitleBox, breakpoint) {
   var marginBottom = (0, _common.getTitleBoxHeight)(breakpoint);
   return "".concat(marginBottom, "px");
 }
-var iconWrapperStyles = function iconWrapperStyles(_ref) {
+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));
 };
-exports.iconWrapperStyles = iconWrapperStyles;
 iconWrapperStyles.displayName = 'MediaIconWrapper';

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

@@ -12,7 +12,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _resizeModeToMediaImageProps = require("./resizeModeToMediaImageProps");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var ImageRenderer = function ImageRenderer(_ref) {
+var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
   var cardPreview = _ref.cardPreview,
     alt = _ref.alt,
     resizeMode = _ref.resizeMode,
@@ -43,5 +43,4 @@ var ImageRenderer = function ImageRenderer(_ref) {
     loading: nativeLazyLoad ? 'lazy' : undefined,
     forceSyncDisplay: forceSyncDisplay
   }, (0, _resizeModeToMediaImageProps.resizeModeToMediaImageProps)(resizeMode)));
-};
-exports.ImageRenderer = ImageRenderer;
+};

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

@@ -9,10 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
 var _playButtonWrapper = require("./playButtonWrapper");
 var _playButtonBackground = require("./playButtonBackground");
-var PlayButton = function PlayButton() {
+var PlayButton = exports.PlayButton = function PlayButton() {
   return /*#__PURE__*/_react.default.createElement(_playButtonWrapper.PlayButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_playButtonBackground.PlayButtonBackground, null), /*#__PURE__*/_react.default.createElement(_vidPlay.default, {
     label: "play",
     size: "large"
   }));
-};
-exports.PlayButton = PlayButton;
+};

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

@@ -8,10 +8,9 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var PlayButtonBackground = function PlayButtonBackground() {
+var PlayButtonBackground = exports.PlayButtonBackground = function PlayButtonBackground() {
   return (0, _react.jsx)("div", {
     css: _styles.backgroundStyles,
     className: _styles.bkgClassName
   });
-};
-exports.PlayButtonBackground = PlayButtonBackground;
+};

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

@@ -8,10 +8,9 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var PlayButtonWrapper = function PlayButtonWrapper(props) {
+var PlayButtonWrapper = exports.PlayButtonWrapper = function PlayButtonWrapper(props) {
   return (0, _react.jsx)("div", {
     css: _styles.playButtonWrapperStyles,
     className: _styles.playButtonClassName
   }, props.children);
-};
-exports.PlayButtonWrapper = PlayButtonWrapper;
+};

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

@@ -9,15 +9,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
-var playButtonClassName = 'media-card-play-button';
-exports.playButtonClassName = playButtonClassName;
-var bkgClassName = 'play-icon-background';
-exports.bkgClassName = bkgClassName;
+var playButtonClassName = exports.playButtonClassName = 'media-card-play-button';
+var bkgClassName = exports.bkgClassName = 'play-icon-background';
 var discSize = 48;
 var discSizeHover = 56;
-var fixedPlayButtonStyles = "\n  .".concat(bkgClassName, " {\n    width: ").concat(discSizeHover, "px;\n    height: ").concat(discSizeHover, "px;\n  }\n");
-exports.fixedPlayButtonStyles = fixedPlayButtonStyles;
-var 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, ")"));
-exports.playButtonWrapperStyles = playButtonWrapperStyles;
-var 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, ")"));
-exports.backgroundStyles = backgroundStyles;
+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, ")"));

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

@@ -8,11 +8,10 @@ exports.getNormalizedProgress = exports.ProgressBar = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledBar = require("./styledBar");
 var _common = require("../common");
-var getNormalizedProgress = function getNormalizedProgress(progress) {
+var getNormalizedProgress = exports.getNormalizedProgress = function getNormalizedProgress(progress) {
   return Math.min(1, Math.max(0, progress || 0)) * 100;
 };
-exports.getNormalizedProgress = getNormalizedProgress;
-var ProgressBar = function ProgressBar(_ref) {
+var ProgressBar = exports.ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
     _ref$breakpoint = _ref.breakpoint,
     breakpoint = _ref$breakpoint === void 0 ? _common.Breakpoint.SMALL : _ref$breakpoint,
@@ -26,5 +25,4 @@ var ProgressBar = function ProgressBar(_ref) {
     positionBottom: positionBottom,
     showOnTop: showOnTop
   });
-};
-exports.ProgressBar = ProgressBar;
+};

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

@@ -8,14 +8,15 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var StyledBar = function StyledBar(props) {
+var StyledBar = exports.StyledBar = function StyledBar(props) {
   var progress = props.progress,
     breakpoint = props.breakpoint,
     positionBottom = props.positionBottom,
     showOnTop = props.showOnTop;
   return (0, _react.jsx)("div", {
     id: "styledBar",
-    "data-testid": "media-progress-bar",
+    role: "progressbar",
+    "aria-valuenow": progress,
     css: (0, _styles.styledBarStyles)({
       progress: progress,
       breakpoint: breakpoint,
@@ -23,5 +24,4 @@ var StyledBar = function StyledBar(props) {
       showOnTop: showOnTop
     })
   });
-};
-exports.StyledBar = StyledBar;
+};

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

@@ -42,8 +42,7 @@ var getStyledBarStylesBasedOnProps = function getStyledBarStylesBasedOnProps(_re
 };
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
-var styledBarStyles = function styledBarStyles(props) {
+var styledBarStyles = exports.styledBarStyles = function styledBarStyles(props) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n  "])), getStyledBarStylesBasedOnProps(props));
 };
-exports.styledBarStyles = styledBarStyles;
 styledBarStyles.displayName = 'StyledProgressBar';

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

@@ -18,7 +18,7 @@ var _styles2 = require("./playButton/styles");
 var _common = require("./common");
 var _templateObject;
 var breakpointSizes = [[_common.Breakpoint.SMALL, 599], [_common.Breakpoint.LARGE, Infinity]];
-var calcBreakpointSize = function calcBreakpointSize() {
+var calcBreakpointSize = exports.calcBreakpointSize = function calcBreakpointSize() {
   var wrapperWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var _ref = breakpointSizes.find(function (_ref3) {
       var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
@@ -30,14 +30,12 @@ var calcBreakpointSize = function calcBreakpointSize() {
     breakpoint = _ref2[0];
   return breakpoint;
 };
-exports.calcBreakpointSize = calcBreakpointSize;
-var generateResponsiveStyles = function generateResponsiveStyles() {
+var generateResponsiveStyles = exports.generateResponsiveStyles = function generateResponsiveStyles() {
   var breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _common.Breakpoint.SMALL;
   var setting = _common.responsiveSettings[breakpoint];
   return "\n    font-size: ".concat(setting.fontSize, "px;\n    line-height: ").concat(setting.lineHeight, "px;\n  ");
 };
-exports.generateResponsiveStyles = generateResponsiveStyles;
-var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
+var getWrapperDimensions = exports.getWrapperDimensions = function getWrapperDimensions(dimensions, appearance) {
   var _ref5 = dimensions || {},
     width = _ref5.width,
     height = _ref5.height;
@@ -49,45 +47,37 @@ var getWrapperDimensions = function getWrapperDimensions(dimensions, appearance)
 
 // This is a trick to simulate the blue border without affecting the dimensions.
 // CSS outline has no 'radius', therefore we can't achieve the same effect with it
-exports.getWrapperDimensions = getWrapperDimensions;
-var getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
+var getWrapperShadow = exports.getWrapperShadow = function getWrapperShadow(disableOverlay, selected) {
   var withOverlayShadow = !disableOverlay ? "".concat("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N60A, ", 0 0 1px 0 ").concat(_colors.N60A), ")")) : '';
   var selectedShadow = selected ? _consts.akEditorSelectedBoxShadow : '';
   var shadow = [selectedShadow, withOverlayShadow].filter(Boolean).join(', ');
   return shadow ? "box-shadow: ".concat(shadow, ";") : '';
 };
-exports.getWrapperShadow = getWrapperShadow;
-var getCursorStyle = function getCursorStyle(cursor) {
+var getCursorStyle = exports.getCursorStyle = function getCursorStyle(cursor) {
   return !!cursor ? "cursor: ".concat(cursor, ";") : '';
 };
-exports.getCursorStyle = getCursorStyle;
-var getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
+var getClickablePlayButtonStyles = exports.getClickablePlayButtonStyles = function getClickablePlayButtonStyles(isPlayButtonClickable) {
   if (!isPlayButtonClickable) {
     return '';
   }
   return "\n    &:hover .".concat(_styles2.playButtonClassName, " {\n      ").concat(_styles2.fixedPlayButtonStyles, "\n    }\n  ");
 };
-exports.getClickablePlayButtonStyles = getClickablePlayButtonStyles;
-var getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
+var getSelectableTickBoxStyles = exports.getSelectableTickBoxStyles = function getSelectableTickBoxStyles(isTickBoxSelectable) {
   if (!isTickBoxSelectable) {
     return '';
   }
   return "\n    &:hover .".concat(_styles.tickBoxClassName, " {\n      ").concat(_styles.tickboxFixedStyles, "\n    }\n  ");
 };
-exports.getSelectableTickBoxStyles = getSelectableTickBoxStyles;
-var 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);
-exports.cardImageContainerStyles = cardImageContainerStyles;
+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 defaultTransitionDuration = '.3s';
-var transition = function transition() {
+var transition = exports.transition = function transition() {
   var propertyName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
   return "\n  transition: ".concat(propertyName, " ").concat(defaultTransitionDuration, ";\n");
 };
-exports.transition = transition;
 var hexToRgb = function hexToRgb(hex) {
   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? "".concat(parseInt(result[1], 16), ",").concat(parseInt(result[2], 16), ",").concat(parseInt(result[3], 16)) : null;
 };
-var rgba = function rgba(hex, opacity) {
+var rgba = exports.rgba = function rgba(hex, opacity) {
   return "rgba(".concat(hexToRgb(hex), ", ").concat(opacity, ")");
-};
-exports.rgba = rgba;
+};

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

@@ -10,18 +10,14 @@ var _react = require("@emotion/react");
 var _styles = require("../styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
-var tickBoxClassName = 'media-card-tickbox';
-exports.tickBoxClassName = tickBoxClassName;
-var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(_colors.N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(_colors.N100, ")"), ";\n");
-exports.tickboxFixedStyles = tickboxFixedStyles;
-var getSelectedStyles = function getSelectedStyles(selected) {
+var tickBoxClassName = exports.tickBoxClassName = 'media-card-tickbox';
+var tickboxFixedStyles = exports.tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(_colors.N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(_colors.N100, ")"), ";\n");
+var getSelectedStyles = exports.getSelectedStyles = function getSelectedStyles(selected) {
   return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(_colors.B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-exports.getSelectedStyles = getSelectedStyles;
-var wrapperStyles = function wrapperStyles(selected) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), (0, _styles.transition)(), getSelectedStyles(selected));
+var wrapperStyles = exports.wrapperStyles = function wrapperStyles(selected) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-size: 14px;\n  width: 14px;\n  height: 14px;\n  position: absolute;\n  top: 7px;\n  left: 7px;\n  border-radius: 20px;\n  color: transparent;\n  /* Enforce dimensions and position of \"tick\" icon */\n  span {\n    display: block;\n    svg {\n      height: 14px;\n    }\n  }\n  ", "\n"])), _styles.transition && (0, _styles.transition)(), getSelectedStyles(selected));
 };
-exports.wrapperStyles = wrapperStyles;
 wrapperStyles.displayName = 'TickBoxWrapper';

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

@@ -8,12 +8,11 @@ exports.TickBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
 var _tickBoxWrapper = require("./tickBoxWrapper");
-var TickBox = function TickBox(_ref) {
+var TickBox = exports.TickBox = function TickBox(_ref) {
   var selected = _ref.selected;
   return /*#__PURE__*/_react.default.createElement(_tickBoxWrapper.TickBoxWrapper, {
     selected: selected
   }, /*#__PURE__*/_react.default.createElement(_check.default, {
     label: "tick"
   }));
-};
-exports.TickBox = TickBox;
+};

package/dist/cjs/card/ui/tickBox/tickBoxWrapper.js

@@ -8,11 +8,10 @@ var _react = require("@emotion/react");
 var _styles = require("./styles");
 /**@jsx jsx */
 
-var TickBoxWrapper = function TickBoxWrapper(props) {
+var TickBoxWrapper = exports.TickBoxWrapper = function TickBoxWrapper(props) {
   return (0, _react.jsx)("div", {
     id: "tickBoxWrapper",
     css: (0, _styles.wrapperStyles)(props.selected),
     className: _styles.tickBoxClassName
   }, props.children);
-};
-exports.TickBoxWrapper = TickBoxWrapper;
+};

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

@@ -11,7 +11,7 @@ var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warni
 var _mediaUi = require("@atlaskit/media-ui");
 var _colors = require("@atlaskit/theme/colors");
 var _titleBoxComponents = require("./titleBoxComponents");
-var FailedTitleBox = function FailedTitleBox(_ref) {
+var FailedTitleBox = exports.FailedTitleBox = function FailedTitleBox(_ref) {
   var breakpoint = _ref.breakpoint,
     _ref$customMessage = _ref.customMessage,
     customMessage = _ref$customMessage === void 0 ? _mediaUi.messages.failed_to_load : _ref$customMessage;
@@ -22,5 +22,4 @@ var FailedTitleBox = function FailedTitleBox(_ref) {
     size: 'small',
     primaryColor: "var(--ds-text-danger, ".concat(_colors.R300, ")")
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, customMessage))));
-};
-exports.FailedTitleBox = FailedTitleBox;
+};

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

@@ -23,7 +23,7 @@ var generateResponsiveStyles = function generateResponsiveStyles() {
 var HEX_REGEX = /^#[0-9A-F]{6}$/i;
 var BACKGROUND_COLOR_DARK = '#161a1d';
 var TEXT_COLOR_DARK = '#C7D1DB';
-var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
+var titleBoxWrapperStyles = exports.titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
   var breakpoint = _ref.breakpoint,
     titleBoxBgColor = _ref.titleBoxBgColor,
     theme = _ref.theme;
@@ -41,23 +41,18 @@ var titleBoxWrapperStyles = function titleBoxWrapperStyles(_ref) {
     theme: theme
   }), generateResponsiveStyles(breakpoint));
 };
-exports.titleBoxWrapperStyles = titleBoxWrapperStyles;
 titleBoxWrapperStyles.displayName = 'TitleBoxWrapper';
 var infoStyles = "white-space: nowrap;overflow: hidden;";
 var iconOverlapStyles = "padding-right: 10px;";
-var titleBoxHeaderStyles = function titleBoxHeaderStyles(_ref2) {
+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);
 };
-exports.titleBoxHeaderStyles = titleBoxHeaderStyles;
 titleBoxHeaderStyles.displayName = 'FailedTitleBoxHeader';
-var titleBoxFooterStyles = function titleBoxFooterStyles(_ref3) {
+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);
 };
-exports.titleBoxFooterStyles = titleBoxFooterStyles;
 titleBoxFooterStyles.displayName = 'TitleBoxFooter';
-var titleBoxIconStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: ", ";\n  bottom: 0px;\n"])), "var(--ds-space-050, 4px)");
-exports.titleBoxIconStyles = titleBoxIconStyles;
-var 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)");
-exports.errorMessageWrapperStyles = errorMessageWrapperStyles;
+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)");

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

@@ -11,7 +11,7 @@ var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-fill
 var _truncateText = require("@atlaskit/media-ui/truncateText");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 var _titleBoxComponents = require("./titleBoxComponents");
-var FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
+var FormattedDate = exports.FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
   var timestamp = _ref.timestamp,
     intl = _ref.intl;
   var _ref2 = intl || {
@@ -21,8 +21,7 @@ var FormattedDate = (0, _reactIntlNext.injectIntl)(function (_ref) {
     locale = _ref2$locale === void 0 ? 'en' : _ref2$locale;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _formatDate.formatDate)(timestamp, locale));
 });
-exports.FormattedDate = FormattedDate;
-var TitleBox = function TitleBox(_ref3) {
+var TitleBox = exports.TitleBox = function TitleBox(_ref3) {
   var name = _ref3.name,
     createdAt = _ref3.createdAt,
     breakpoint = _ref3.breakpoint,
@@ -43,5 +42,4 @@ var TitleBox = function TitleBox(_ref3) {
     label: "",
     size: "small"
   })));
-};
-exports.TitleBox = TitleBox;
+};