@atlaskit/media-card 77.12.0 → 77.12.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/media-card
 
+## 77.12.1
+
+### Patch Changes
+
+- [#109692](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109692)
+  [`e947830ffb91c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e947830ffb91c) -
+  Updated feature flag key for SVG rendering
+
 ## 77.12.0
 
 ### Minor Changes

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.12.0";
+var packageVersion = "77.12.1";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -290,8 +290,8 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-        */
+             If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+           */
 
         if ((0, _getCardPreview.isSSRDataPreview)(cardPreview)) {
           _this.ssrReliability.server = failedSSRObject;
@@ -339,8 +339,8 @@ var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
-        */
+             If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+           */
 
         if ((0, _getCardPreview.isSSRDataPreview)(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
           _this.ssrReliability.server = {

package/dist/cjs/card/inlinePlayerWrapperStyles.js

@@ -23,6 +23,6 @@ var inlinePlayerClassName = exports.inlinePlayerClassName = 'media-card-inline-p
 var inlinePlayerWrapperStyles = exports.inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
   var dimensions = _ref2.dimensions,
     selected = _ref2.selected;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%', (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto', (0, _constants.borderRadius)(), getSelectedBorderStyle(selected));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\twidth: ", ";\n\theight: ", ";\n\toverflow: hidden;\n\tborder-radius: ", "px;\n\tposition: relative;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\n\t", "\n\n\tvideo {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).width || '100%', (0, _getDimensionsWithDefault.getDimensionsWithDefault)(dimensions).height || 'auto', (0, _constants.borderRadius)(), getSelectedBorderStyle(selected));
 };
 inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

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

@@ -26,6 +26,6 @@ var wrapperStyles = exports.wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", ", &:focus-within .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n\n  button:focus + & {\n    outline: solid 2px ", ";\n  }\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(_colors.B100, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), (0, _styles.transition)(), (0, _constants.fontFamily)(), (0, _styles.getWrapperDimensions)(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(_colors.N20, ")"), ";"), _mediaUi.borderRadius, (0, _styles.getCursorStyle)(mediaCardCursor), (0, _styles.getWrapperShadow)(disableOverlay, selected), (0, _styles.generateResponsiveStyles)(breakpoint), _selection.hideNativeBrowserTextSelectionStyles, (0, _styles.getClickablePlayButtonStyles)(isPlayButtonClickable), (0, _styles.getSelectableTickBoxStyles)(isTickBoxSelectable), _styles2.blanketClassName, _styles2.fixedBlanketStyles, _styles3.actionsBarClassName, _styles3.actionsBarClassName, _styles3.fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

@@ -449,7 +449,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   (0, _react.useEffect)(function () {
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-svg-rendering') &&
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.media-card-svg-rendering_6tdbv') &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before

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.12.0",
+        packageName: "77.12.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -33,17 +33,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   };
 
   /* Note:
-   - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
-   - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
-     color: `${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600),
-    })}`,
-    backgroundColor: `${themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80),
-    })}`,
-   */
+    - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
+    - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
+      color: `${themed({
+       light: token('color.text', N900),
+       dark: token('color.text', DN600),
+     })}`,
+     backgroundColor: `${themed({
+       light: token('color.background.neutral', N30A),
+       dark: token('color.background.neutral', DN80),
+     })}`,
+    */
 
   var style = _objectSpread({
     lineHeight: '16px',

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.12.0";
+var packageVersion = "77.12.1";
 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.12.0";
+const packageVersion = "77.12.1";
 export class CardBase extends Component {
   constructor(props) {
     super(props);
@@ -220,8 +220,8 @@ export class CardBase extends Component {
         }
 
         /*
-          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-        */
+             If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview)) {
           this.ssrReliability.server = failedSSRObject;
@@ -272,8 +272,8 @@ export class CardBase extends Component {
         }
 
         /*
-          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
-        */
+             If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview) && this.ssrReliability.server.status === 'unknown') {
           this.ssrReliability.server = {

package/dist/es2019/card/inlinePlayerWrapperStyles.js

@@ -29,19 +29,19 @@ export const inlinePlayerWrapperStyles = ({
   dimensions,
   selected
 }) => css`
-  width: ${getDimensionsWithDefault(dimensions).width || '100%'};
-  height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
-  overflow: hidden;
-  border-radius: ${borderRadius()}px;
-  position: relative;
-  max-width: 100%;
-  max-height: 100%;
+	width: ${getDimensionsWithDefault(dimensions).width || '100%'};
+	height: ${getDimensionsWithDefault(dimensions).height || 'auto'};
+	overflow: hidden;
+	border-radius: ${borderRadius()}px;
+	position: relative;
+	max-width: 100%;
+	max-height: 100%;
 
-  ${getSelectedBorderStyle(selected)}
+	${getSelectedBorderStyle(selected)}
 
-  video {
-    width: 100%;
-    height: 100%;
-  }
+	video {
+		width: 100%;
+		height: 100%;
+	}
 `;
 inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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.12.0";
+const packageVersion = "77.12.1";
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({
   packageVersion,
   packageName,

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

@@ -19,36 +19,36 @@ export const wrapperStyles = ({
   shouldDisplayTooltip,
   mediaCardCursor
 }) => css`
-  ${transition()}
-  box-sizing: border-box;
-  * {
-    box-sizing: border-box;
-  }
-  position: relative;
-  font-family: ${fontFamily()};
-  ${getWrapperDimensions(dimensions, appearance)}
-  ${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
+	${transition()}
+	box-sizing: border-box;
+	* {
+		box-sizing: border-box;
+	}
+	position: relative;
+	font-family: ${fontFamily()};
+	${getWrapperDimensions(dimensions, appearance)}
+	${displayBackground && `background: ${`var(--ds-background-neutral, ${N20})`};`}
   ${borderRadius}
   ${getCursorStyle(mediaCardCursor)}
   ${getWrapperShadow(disableOverlay, selected)}
   ${generateResponsiveStyles(breakpoint)};
-  ${hideNativeBrowserTextSelectionStyles}
+	${hideNativeBrowserTextSelectionStyles}
 
-  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
+	/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */
   ${getClickablePlayButtonStyles(isPlayButtonClickable)}
   ${getSelectableTickBoxStyles(isTickBoxSelectable)}
   &:hover .${blanketClassName} {
-    ${fixedBlanketStyles}
-  }
-  &:hover .${actionsBarClassName}, &:focus-within .${actionsBarClassName} {
-    ${fixedActionBarStyles}
-  }
+		${fixedBlanketStyles}
+	}
+	&:hover .${actionsBarClassName}, &:focus-within .${actionsBarClassName} {
+		${fixedActionBarStyles}
+	}
 
-  /* Tooltip does not support percentage dimensions. We enforce them here */
-  ${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
+	/* Tooltip does not support percentage dimensions. We enforce them here */
+	${shouldDisplayTooltip && `> div { width: 100%; height: 100%; }`}
 
-  button:focus + & {
-    outline: solid 2px ${`var(--ds-border-focused, ${B100})`};
-  }
+	button:focus + & {
+		outline: solid 2px ${`var(--ds-border-focused, ${B100})`};
+	}
 `;
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

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

@@ -400,7 +400,7 @@ export const FileCard = ({
   //----------------------------------------------------------------//
 
   useEffect(() => {
-    if (getBooleanFF('platform.media-svg-rendering') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before

package/dist/es2019/inline/loader.js

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

package/dist/es2019/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -17,17 +17,17 @@ const ErrorBoundaryComponent = ({
   };
 
   /* Note:
-   - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
-   - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
-     color: `${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600),
-    })}`,
-    backgroundColor: `${themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80),
-    })}`,
-   */
+    - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
+    - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
+      color: `${themed({
+       light: token('color.text', N900),
+       dark: token('color.text', DN600),
+     })}`,
+     backgroundColor: `${themed({
+       light: token('color.background.neutral', N30A),
+       dark: token('color.background.neutral', DN80),
+     })}`,
+    */
 
   const style = {
     lineHeight: '16px',

package/dist/es2019/utils/ufoExperiences.js

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

package/dist/esm/card/card.js

@@ -41,7 +41,7 @@ import { completeUfoExperience, startUfoExperience, abortUfoExperience } from '.
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { DateOverrideContext } from '../dateOverrideContext';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.0";
+var packageVersion = "77.12.1";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);
@@ -281,8 +281,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
-        */
+             If the cardPreview failed and it comes from server (global scope / ssrData), it means that we have reused it in client and the error counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview)) {
           _this.ssrReliability.server = failedSSRObject;
@@ -330,8 +330,8 @@ export var CardBase = /*#__PURE__*/function (_Component) {
         }
 
         /*
-          If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
-        */
+             If the image loads successfully and it comes from server (global scope / ssrData), it means that we have reused it in client and the success counts for both: server & client.
+           */
 
         if (isSSRDataPreview(cardPreview) && _this.ssrReliability.server.status === 'unknown') {
           _this.ssrReliability.server = {

package/dist/esm/card/inlinePlayerWrapperStyles.js

@@ -17,6 +17,6 @@ export var inlinePlayerClassName = 'media-card-inline-player';
 export var inlinePlayerWrapperStyles = function inlinePlayerWrapperStyles(_ref2) {
   var dimensions = _ref2.dimensions,
     selected = _ref2.selected;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  overflow: hidden;\n  border-radius: ", "px;\n  position: relative;\n  max-width: 100%;\n  max-height: 100%;\n\n  ", "\n\n  video {\n    width: 100%;\n    height: 100%;\n  }\n"])), getDimensionsWithDefault(dimensions).width || '100%', getDimensionsWithDefault(dimensions).height || 'auto', borderRadius(), getSelectedBorderStyle(selected));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\twidth: ", ";\n\theight: ", ";\n\toverflow: hidden;\n\tborder-radius: ", "px;\n\tposition: relative;\n\tmax-width: 100%;\n\tmax-height: 100%;\n\n\t", "\n\n\tvideo {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n"])), getDimensionsWithDefault(dimensions).width || '100%', getDimensionsWithDefault(dimensions).height || 'auto', borderRadius(), getSelectedBorderStyle(selected));
 };
 inlinePlayerWrapperStyles.displayName = 'InlinePlayerWrapper';

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

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

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

@@ -20,6 +20,6 @@ export var wrapperStyles = function wrapperStyles(_ref) {
     isTickBoxSelectable = _ref.isTickBoxSelectable,
     shouldDisplayTooltip = _ref.shouldDisplayTooltip,
     mediaCardCursor = _ref.mediaCardCursor;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  position: relative;\n  font-family: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n\n  /* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n    ", "\n  }\n  &:hover .", ", &:focus-within .", " {\n    ", "\n  }\n\n  /* Tooltip does not support percentage dimensions. We enforce them here */\n  ", "\n\n  button:focus + & {\n    outline: solid 2px ", ";\n  }\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(B100, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t", "\n\tbox-sizing: border-box;\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\tposition: relative;\n\tfont-family: ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\n\t/* We use classnames from here exceptionally to be able to handle styles when the Card is on hover */\n  ", "\n  ", "\n  &:hover .", " {\n\t\t", "\n\t}\n\t&:hover .", ", &:focus-within .", " {\n\t\t", "\n\t}\n\n\t/* Tooltip does not support percentage dimensions. We enforce them here */\n\t", "\n\n\tbutton:focus + & {\n\t\toutline: solid 2px ", ";\n\t}\n"])), transition(), fontFamily(), getWrapperDimensions(dimensions, appearance), displayBackground && "background: ".concat("var(--ds-background-neutral, ".concat(N20, ")"), ";"), borderRadius, getCursorStyle(mediaCardCursor), getWrapperShadow(disableOverlay, selected), generateResponsiveStyles(breakpoint), hideNativeBrowserTextSelectionStyles, getClickablePlayButtonStyles(isPlayButtonClickable), getSelectableTickBoxStyles(isTickBoxSelectable), blanketClassName, fixedBlanketStyles, actionsBarClassName, actionsBarClassName, fixedActionBarStyles, shouldDisplayTooltip && "> div { width: 100%; height: 100%; }", "var(--ds-border-focused, ".concat(B100, ")"));
 };
 wrapperStyles.displayName = 'NewFileExperienceWrapper';

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

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

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

@@ -440,7 +440,7 @@ export var FileCard = function FileCard(_ref) {
   //----------------------------------------------------------------//
 
   useEffect(function () {
-    if (getBooleanFF('platform.media-svg-rendering') &&
+    if (getBooleanFF('platform.media-card-svg-rendering_6tdbv') &&
     /**
      * We need to check that the card is visible before switching to SVG
      * in order to avoid race conditions of the ViewportDector being unmounted before

package/dist/esm/inline/loader.js

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

package/dist/esm/inline/mediaInlineAnalyticsErrorBoundary.js

@@ -26,17 +26,17 @@ var ErrorBoundaryComponent = function ErrorBoundaryComponent(_ref) {
   };
 
   /* Note:
-   - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
-   - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
-     color: `${themed({
-      light: token('color.text', N900),
-      dark: token('color.text', DN600),
-    })}`,
-    backgroundColor: `${themed({
-      light: token('color.background.neutral', N30A),
-      dark: token('color.background.neutral', DN80),
-    })}`,
-   */
+    - styling is borrowed from packages/media/media-ui/src/MediaInlineCard/Frame/styled.ts
+    - because we are not using styled components, we are not able to use themed(), here is the "themed" property of color and backgroundColor
+      color: `${themed({
+       light: token('color.text', N900),
+       dark: token('color.text', DN600),
+     })}`,
+     backgroundColor: `${themed({
+       light: token('color.background.neutral', N30A),
+       dark: token('color.background.neutral', DN80),
+     })}`,
+    */
 
   var style = _objectSpread({
     lineHeight: '16px',

package/dist/esm/utils/ufoExperiences.js

@@ -7,7 +7,7 @@ import { extractErrorInfo, getRenderErrorRequestMetadata } from './analytics';
 import { MediaCardError } from '../errors';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.12.0";
+var packageVersion = "77.12.1";
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {

package/dist/types/card/ui/iconWrapper/styles.d.ts

@@ -2,6 +2,6 @@ import { type Breakpoint } from '../common';
 import { type IconWrapperProps } from './types';
 export declare function titleBoxHeight(hasTitleBox: boolean, breakpoint: Breakpoint): string;
 export declare const iconWrapperStyles: {
-    ({ hasTitleBox, breakpoint, }: IconWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ hasTitleBox, breakpoint }: IconWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

package/dist/types/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { type TitleBoxFooterProps, type TitleBoxHeaderProps, type TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types/utils/preventClickThrough.d.ts

@@ -3,6 +3,6 @@ import { type ReactNode } from 'react';
 export type PreventClickThroughProps = {
     readonly children?: ReactNode;
 };
-export declare function PreventClickThrough({ children, }: PreventClickThroughProps): JSX.Element;
+export declare function PreventClickThrough({ children }: PreventClickThroughProps): JSX.Element;
 export type CreatePreventClickThrough = <T>(onClick: () => void) => (event: React.MouseEvent<T, MouseEvent>) => void;
 export declare const createPreventClickThrough: CreatePreventClickThrough;

package/dist/types/utils/viewportDetector.d.ts

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => JSX.Element;

package/dist/types-ts4.5/card/ui/iconWrapper/styles.d.ts

@@ -2,6 +2,6 @@ import { type Breakpoint } from '../common';
 import { type IconWrapperProps } from './types';
 export declare function titleBoxHeight(hasTitleBox: boolean, breakpoint: Breakpoint): string;
 export declare const iconWrapperStyles: {
-    ({ hasTitleBox, breakpoint, }: IconWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ hasTitleBox, breakpoint }: IconWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };

package/dist/types-ts4.5/card/ui/titleBox/styles.d.ts

@@ -1,6 +1,6 @@
 import { type TitleBoxFooterProps, type TitleBoxHeaderProps, type TitleBoxWrapperProps } from './types';
 export declare const titleBoxWrapperStyles: {
-    ({ breakpoint, titleBoxBgColor, }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
+    ({ breakpoint, titleBoxBgColor }: TitleBoxWrapperProps): import("@emotion/react").SerializedStyles;
     displayName: string;
 };
 export declare const titleBoxHeaderStyles: {

package/dist/types-ts4.5/utils/preventClickThrough.d.ts

@@ -3,6 +3,6 @@ import { type ReactNode } from 'react';
 export type PreventClickThroughProps = {
     readonly children?: ReactNode;
 };
-export declare function PreventClickThrough({ children, }: PreventClickThroughProps): JSX.Element;
+export declare function PreventClickThrough({ children }: PreventClickThroughProps): JSX.Element;
 export type CreatePreventClickThrough = <T>(onClick: () => void) => (event: React.MouseEvent<T, MouseEvent>) => void;
 export declare const createPreventClickThrough: CreatePreventClickThrough;

package/dist/types-ts4.5/utils/viewportDetector.d.ts

@@ -3,4 +3,4 @@ export type ViewportDetectorProps = PropsWithChildren<{
     cardEl: HTMLElement | null;
     onVisible: () => void;
 }>;
-export declare const ViewportDetector: ({ cardEl, onVisible, children, }: ViewportDetectorProps) => JSX.Element;
+export declare const ViewportDetector: ({ cardEl, onVisible, children }: ViewportDetectorProps) => JSX.Element;

package/example-helpers/DelayedRender.tsx

@@ -1,31 +1,31 @@
 import React, { Component } from 'react';
 
 interface Props {
-  timeout: number;
-  component: React.ElementType;
-  componentProps: { [key: string]: any };
+	timeout: number;
+	component: React.ElementType;
+	componentProps: { [key: string]: any };
 }
 
 interface State {
-  hidden: boolean;
+	hidden: boolean;
 }
 
 export class DelayedRender extends Component<Props, State> {
-  state: State = {
-    hidden: true,
-  };
+	state: State = {
+		hidden: true,
+	};
 
-  componentDidMount() {
-    window.setTimeout(() => {
-      this.setState({ hidden: false });
-    }, this.props.timeout);
-  }
+	componentDidMount() {
+		window.setTimeout(() => {
+			this.setState({ hidden: false });
+		}, this.props.timeout);
+	}
 
-  render() {
-    if (this.state.hidden) {
-      return null;
-    }
-    const { component: Component, componentProps } = this.props;
-    return <Component {...componentProps} />;
-  }
+	render() {
+		if (this.state.hidden) {
+			return null;
+		}
+		const { component: Component, componentProps } = this.props;
+		return <Component {...componentProps} />;
+	}
 }