@atlaskit/media-card 77.10.5 → 77.10.6

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/media-card
 
+## 77.10.6
+
+### Patch Changes
+
+- [#79344](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79344) [`b6bc418abde3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6bc418abde3) - CXP-3050 Enforced design tokens and primitives on media-card
+
 ## 77.10.5
 
 ### Patch 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() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "77.10.5";
+var packageVersion = "77.10.6";
 var CardBase = exports.CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

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

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

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

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

@@ -1,23 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyles = exports.tickboxFixedStyles = exports.tickBoxClassName = exports.getSelectedStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _styles = require("../styles");
+exports.tickboxFixedStyles = exports.tickBoxClassName = void 0;
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject;
 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
-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));
-};
-wrapperStyles.displayName = 'TickBoxWrapper';
+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");

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

@@ -6,12 +6,36 @@ Object.defineProperty(exports, "__esModule", {
 exports.TickBoxWrapper = void 0;
 var _react = require("@emotion/react");
 var _styles = require("./styles");
+var _styles2 = require("../styles");
+var _colors = require("@atlaskit/theme/colors");
 /**@jsx jsx */
 
+var getSelectedStyles = function getSelectedStyles(selected) {
+  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(_colors.B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
+};
+var wrapperStyles = function wrapperStyles(selected) {
+  return (0, _react.css)(_styles2.transition && (0, _styles2.transition)(), {
+    fontSize: '14px',
+    width: '14px',
+    height: '14px',
+    position: 'absolute',
+    top: "var(--ds-space-075, 7px)",
+    left: "var(--ds-space-075, 7px)",
+    borderRadius: '20px',
+    color: 'transparent',
+    span: {
+      display: 'block',
+      svg: {
+        height: '14px'
+      }
+    }
+  }, getSelectedStyles(selected));
+};
+wrapperStyles.displayName = 'TickBoxWrapper';
 var TickBoxWrapper = exports.TickBoxWrapper = function TickBoxWrapper(props) {
   return (0, _react.jsx)("div", {
     id: "tickBoxWrapper",
-    css: (0, _styles.wrapperStyles)(props.selected),
+    css: wrapperStyles(props.selected),
     className: _styles.tickBoxClassName
   }, props.children);
 };

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

package/dist/cjs/inline/loader.js

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

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.10.5";
+var packageVersion = "77.10.6";
 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.10.5";
+const packageVersion = "77.10.6";
 export class CardBase extends Component {
   constructor(props) {
     super(props);

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

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

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

@@ -1,16 +1,46 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { iconMessageWrapperStyles } from './styles';
+import { keyframes } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+const breatheAnimation = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+const animatedStyles = xcss({
+  animationName: breatheAnimation,
+  animationDuration: '3.5s',
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite'
+});
+const reducedFontStyle = xcss({
+  fontSize: '0.7em'
+});
+const baseStyles = xcss({
+  overflow: 'hidden',
+  opacity: 1,
+  fontWeight: 450,
+  color: 'color.text.subtlest',
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginBottom: '-1em',
+  // Needs pixel precision to align the icon at the center of the box
+  paddingBlock: 'space.050',
+  paddingInline: 'space.100'
+});
 export const IconMessageWrapper = props => {
   const {
     animated,
     reducedFont
   } = props;
-  return jsx("div", {
+  return jsx(Box, {
     id: "iconMessageWrapper",
-    css: iconMessageWrapperStyles({
-      animated: animated,
-      reducedFont: reducedFont
-    })
+    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

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

@@ -1,32 +1,6 @@
-import { css } from '@emotion/react';
-import { transition } from '../styles';
-import { B200, N0, N100 } from '@atlaskit/theme/colors';
+import { N0, N100 } from '@atlaskit/theme/colors';
 export const tickBoxClassName = 'media-card-tickbox';
 export const tickboxFixedStyles = `
   background-color: ${`var(--ds-background-input, ${N0})`};
   color: ${`var(--ds-icon-subtle, ${N100})`};
-`;
-export const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
-      color: ${"var(--ds-icon-inverse, white)"};` : ``;
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const wrapperStyles = selected => css`
-  ${transition && transition()}
-  font-size: 14px;
-  width: 14px;
-  height: 14px;
-  position: absolute;
-  top: 7px;
-  left: 7px;
-  border-radius: 20px;
-  color: transparent;
-  /* Enforce dimensions and position of "tick" icon */
-  span {
-    display: block;
-    svg {
-      height: 14px;
-    }
-  }
-  ${getSelectedStyles(selected)}
-`;
-wrapperStyles.displayName = 'TickBoxWrapper';
+`;

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

@@ -1,6 +1,28 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { wrapperStyles, tickBoxClassName } from './styles';
+import { tickBoxClassName } from './styles';
+import { css } from '@emotion/react';
+import { transition } from '../styles';
+import { B200 } from '@atlaskit/theme/colors';
+const getSelectedStyles = selected => selected ? `background-color: ${`var(--ds-icon-information, ${B200})`};
+      color: ${"var(--ds-icon-inverse, white)"};` : ``;
+const wrapperStyles = selected => css(transition && transition(), {
+  fontSize: '14px',
+  width: '14px',
+  height: '14px',
+  position: 'absolute',
+  top: "var(--ds-space-075, 7px)",
+  left: "var(--ds-space-075, 7px)",
+  borderRadius: '20px',
+  color: 'transparent',
+  span: {
+    display: 'block',
+    svg: {
+      height: '14px'
+    }
+  }
+}, getSelectedStyles(selected));
+wrapperStyles.displayName = 'TickBoxWrapper';
 export const TickBoxWrapper = props => {
   return jsx("div", {
     id: "tickBoxWrapper",

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.10.5";
+const packageVersion = "77.10.6";
 export const CardV2Base = ({
   identifier,
   ...otherProps

package/dist/es2019/inline/loader.js

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

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.10.5";
+const packageVersion = "77.10.6";
 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.10.5";
+var packageVersion = "77.10.6";
 export var CardBase = /*#__PURE__*/function (_Component) {
   _inherits(CardBase, _Component);
   var _super = _createSuper(CardBase);

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

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

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

@@ -1,14 +1,44 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { iconMessageWrapperStyles } from './styles';
+import { keyframes } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+var breatheAnimation = keyframes({
+  '0%': {
+    opacity: 1
+  },
+  '50%': {
+    opacity: 0.3
+  },
+  '100%': {
+    opacity: 1
+  }
+});
+var animatedStyles = xcss({
+  animationName: breatheAnimation,
+  animationDuration: '3.5s',
+  animationTimingFunction: 'ease-in-out',
+  animationIterationCount: 'infinite'
+});
+var reducedFontStyle = xcss({
+  fontSize: '0.7em'
+});
+var baseStyles = xcss({
+  overflow: 'hidden',
+  opacity: 1,
+  fontWeight: 450,
+  color: 'color.text.subtlest',
+  textAlign: 'center',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+  marginBottom: '-1em',
+  // Needs pixel precision to align the icon at the center of the box
+  paddingBlock: 'space.050',
+  paddingInline: 'space.100'
+});
 export var IconMessageWrapper = function IconMessageWrapper(props) {
   var animated = props.animated,
     reducedFont = props.reducedFont;
-  return jsx("div", {
+  return jsx(Box, {
     id: "iconMessageWrapper",
-    css: iconMessageWrapperStyles({
-      animated: animated,
-      reducedFont: reducedFont
-    })
+    xcss: [baseStyles, reducedFont && reducedFontStyle, animated && animatedStyles]
   }, props.children);
 };

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

@@ -1,16 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
-import { css } from '@emotion/react';
-import { transition } from '../styles';
-import { B200, N0, N100 } from '@atlaskit/theme/colors';
+import { N0, N100 } from '@atlaskit/theme/colors';
 export var tickBoxClassName = 'media-card-tickbox';
-export var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(N100, ")"), ";\n");
-export var getSelectedStyles = function getSelectedStyles(selected) {
-  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
-};
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var wrapperStyles = function wrapperStyles(selected) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), transition && transition(), getSelectedStyles(selected));
-};
-wrapperStyles.displayName = 'TickBoxWrapper';
+export var tickboxFixedStyles = "\n  background-color: ".concat("var(--ds-background-input, ".concat(N0, ")"), ";\n  color: ", "var(--ds-icon-subtle, ".concat(N100, ")"), ";\n");

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

@@ -1,6 +1,31 @@
 /**@jsx jsx */
 import { jsx } from '@emotion/react';
-import { wrapperStyles, tickBoxClassName } from './styles';
+import { tickBoxClassName } from './styles';
+import { css } from '@emotion/react';
+import { transition } from '../styles';
+import { B200 } from '@atlaskit/theme/colors';
+var getSelectedStyles = function getSelectedStyles(selected) {
+  return selected ? "background-color: ".concat("var(--ds-icon-information, ".concat(B200, ")"), ";\n      color: ", "var(--ds-icon-inverse, white)", ";") : "";
+};
+var wrapperStyles = function wrapperStyles(selected) {
+  return css(transition && transition(), {
+    fontSize: '14px',
+    width: '14px',
+    height: '14px',
+    position: 'absolute',
+    top: "var(--ds-space-075, 7px)",
+    left: "var(--ds-space-075, 7px)",
+    borderRadius: '20px',
+    color: 'transparent',
+    span: {
+      display: 'block',
+      svg: {
+        height: '14px'
+      }
+    }
+  }, getSelectedStyles(selected));
+};
+wrapperStyles.displayName = 'TickBoxWrapper';
 export var TickBoxWrapper = function TickBoxWrapper(props) {
   return jsx("div", {
     id: "tickBoxWrapper",

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.10.5";
+var packageVersion = "77.10.6";
 export var CardV2Base = function CardV2Base(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/inline/loader.js

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

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

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

@@ -1,7 +1,2 @@
 export declare const tickBoxClassName = "media-card-tickbox";
 export declare const tickboxFixedStyles: string;
-export declare const getSelectedStyles: (selected?: boolean) => string;
-export declare const wrapperStyles: {
-    (selected?: boolean): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};

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

@@ -1,7 +1,2 @@
 export declare const tickBoxClassName = "media-card-tickbox";
 export declare const tickboxFixedStyles: string;
-export declare const getSelectedStyles: (selected?: boolean) => string;
-export declare const wrapperStyles: {
-    (selected?: boolean): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/media-card",
-  "version": "77.10.5",
+  "version": "77.10.6",
   "description": "Includes all media card related components, CardView, CardViewSmall, Card...",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,6 +47,7 @@
     "@atlaskit/media-ui": "^25.4.0",
     "@atlaskit/media-viewer": "^48.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
+    "@atlaskit/primitives": "^4.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.39.0",
@@ -114,4 +115,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}

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

@@ -1,22 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iconMessageWrapperStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var breatheAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
-var animatedStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  animation-name: ", ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n"])), breatheAnimation);
-var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
-  var animated = _ref.animated,
-    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 = exports.iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), getStylesBasedOnProps(props));
-};
-iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

@@ -1,30 +0,0 @@
-import { css, keyframes } from '@emotion/react';
-import { N300 } from '@atlaskit/theme/colors';
-const breatheAnimation = keyframes`
- 0% { opacity: 1}
- 50% { opacity: 0.3 }
- 100% { opacity: 1; }`;
-const animatedStyles = css`
-  animation-name: ${breatheAnimation};
-  animation-duration: 3.5s;
-  animation-timing-function: ease-in-out;
-  animation-iteration-count: infinite;
-`;
-const getStylesBasedOnProps = ({
-  animated,
-  reducedFont
-}) => css`
-  overflow: hidden;
-  opacity: 1;
-  font-weight: 450;
-  ${reducedFont ? 'font-size: 0.7em;' : ''}
-  color: ${`var(--ds-text-subtlest, ${N300})`};
-  text-align: center;
-  ${animated ? animatedStyles : ''}
-  margin-bottom: -1em;
-  padding: 3px 10px;
-`;
-export const iconMessageWrapperStyles = props => css`
-  ${getStylesBasedOnProps(props)}
-`;
-iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

@@ -1,15 +0,0 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { css, keyframes } from '@emotion/react';
-import { N300 } from '@atlaskit/theme/colors';
-var breatheAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% { opacity: 1}\n 50% { opacity: 0.3 }\n 100% { opacity: 1; }"])));
-var animatedStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  animation-name: ", ";\n  animation-duration: 3.5s;\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n"])), breatheAnimation);
-var getStylesBasedOnProps = function getStylesBasedOnProps(_ref) {
-  var animated = _ref.animated,
-    reducedFont = _ref.reducedFont;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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(N300, ")"), animated ? animatedStyles : '');
-};
-export var iconMessageWrapperStyles = function iconMessageWrapperStyles(props) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n"])), getStylesBasedOnProps(props));
-};
-iconMessageWrapperStyles.displayName = 'IconMessageWrapper';

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

@@ -1,5 +0,0 @@
-import { StyledTextProps } from './types';
-export declare const iconMessageWrapperStyles: {
-    (props: StyledTextProps): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};

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

@@ -1,5 +0,0 @@
-import { StyledTextProps } from './types';
-export declare const iconMessageWrapperStyles: {
-    (props: StyledTextProps): import("@emotion/react").SerializedStyles;
-    displayName: string;
-};