@atlaskit/media-card 74.3.2 → 74.4.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/media-card
 
+## 74.4.1
+
+### Patch Changes
+
+- [`6adc56f320d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6adc56f320d) - [MEX-2003] Fix dark mode regression in new card experience
+- Updated dependencies
+
+## 74.4.0
+
+### Minor Changes
+
+- [`81573c1dfa7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81573c1dfa7) - Media Card logs metadata trace Id
+- [`0bccac57db6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0bccac57db6) - remove mediaUploadApiV2 Feature flag
+
+### Patch Changes
+
+- [`5f36954436c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5f36954436c) - Ensure all secondary errors from backend responses are logged in media card
+- [`2b5f5a740d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b5f5a740d3) - [ux] catch unexpected error in media card error boundary with a fallback error component and fire analytics event
+- [`8b373447406`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8b373447406) - Updated names for Media card examples and updated their references.
+- [`f36a3d972cf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f36a3d972cf) - Updated Media-Card documentation with new tab structure and simpler usage example
+- [`3d40d5e9b37`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d40d5e9b37) - Adopt updated version of getRandomHex function for generating traceId
+- Updated dependencies
+
 ## 74.3.2
 
 ### Patch Changes

package/dist/cjs/card/card.js

@@ -90,7 +90,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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 = "74.3.2";
+var packageVersion = "74.4.1";
 
 var CardBase = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(CardBase, _Component);
@@ -123,7 +123,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "timeElapsedTillCommenced", performance.now());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "traceContext", {
-      traceId: (0, _mediaCommon.getRandomHex)(16)
+      traceId: (0, _mediaCommon.getRandomHex)(8)
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getImageURLParams", function (_ref) {
       var collection = _ref.collectionName;
@@ -170,7 +170,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         mediaClient: mediaClient,
         id: id,
         dimensions: dimensions,
-        onLocalPreviewError: _this.fireLocalPreviewErrorEvent,
+        onLocalPreviewError: _this.fireNonCriticalErrorEvent,
         filePreview: isBannedLocalPreview ? undefined : (0, _getCardPreview.getFilePreviewFromFileState)(fileState),
         isRemotePreviewReady: (0, _mediaClient2.isImageRepresentationReady)(fileState),
         imageUrlParams: _this.getImageURLParams(identifier),
@@ -193,7 +193,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "refetchSSRPreview", /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(identifier) {
-        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview;
+        var _this$props4, mediaClient, _this$props4$dimensio, dimensions, cardPreview, wrappedError;
 
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) {
@@ -211,14 +211,17 @@ var CardBase = /*#__PURE__*/function (_Component) {
                   cardPreview: cardPreview
                 });
 
-                _context.next = 10;
+                _context.next = 12;
                 break;
 
               case 8:
                 _context.prev = 8;
                 _context.t0 = _context["catch"](1);
+                wrappedError = (0, _errors.ensureMediaCardError)('remote-preview-fetch-ssr', _context.t0, true);
 
-              case 10:
+                _this.fireNonCriticalErrorEvent(wrappedError);
+
+              case 12:
               case "end":
                 return _context.stop();
             }
@@ -261,6 +264,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
                 //  If it's any other error we set status 'error'
 
                 if ((0, _errors.isLocalPreviewError)(wrappedError)) {
+                  // This error should already been logged inside the getCardPreview. No need to log it here.
                   _this.safeSetState({
                     isBannedLocalPreview: true
                   });
@@ -337,7 +341,7 @@ var CardBase = /*#__PURE__*/function (_Component) {
         if (isLocal) {
           updateState.isBannedLocalPreview = true;
 
-          _this.fireLocalPreviewErrorEvent(error);
+          _this.fireNonCriticalErrorEvent(error);
         }
 
         var _this$props5 = _this.props,
@@ -395,17 +399,21 @@ var CardBase = /*#__PURE__*/function (_Component) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
       createAnalyticsEvent && (0, _cardAnalytics.fireScreenEvent)(createAnalyticsEvent, _this.fileAttributes);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireLocalPreviewErrorEvent", function (error) {// TODO: track local preview success rate
-      // https://product-fabric.atlassian.net/browse/MEX-774
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireNonCriticalErrorEvent", function (error) {
+      var createAnalyticsEvent = _this.props.createAnalyticsEvent;
+      var fileState = _this.state.fileState;
+      createAnalyticsEvent && (0, _cardAnalytics.fireNonCriticalErrorEvent)(createAnalyticsEvent, _this.state.status, _this.fileAttributes, _this.ssrReliability, error, _this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (state) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "safeSetState", function (newState) {
       if (_this.hasBeenMounted) {
-        // If it's setting the status, we need to use a state updater function,
-        // which ensures that no non-final status overrides a final status.
-        // If no status is set, we don't need a sate updater
-        var updater = !!state.status ? (0, _cardState.createStateUpdater)(state) : state;
-
-        _this.setState(updater);
+        /**
+         * createStateUpdater helper returns a callback to be passed to setState.
+         * It decides wether to update the 'status' depending on the current state vs the input state.
+         * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date."
+         * If the input state brings an error and it won't be updating the state, the error will be logged as non-critical inside the helper.
+         * If the error persists int the state, it means it is a critical error and should be logged as a failed event for Card
+         */
+        _this.setState((0, _cardState.createStateUpdater)(newState, _this.fireNonCriticalErrorEvent));
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unsubscribe", function () {
@@ -992,9 +1000,10 @@ var CardBase = /*#__PURE__*/function (_Component) {
     value: function fireOperationalEvent() {
       var _this$state7 = this.state,
           status = _this$state7.status,
-          error = _this$state7.error;
+          error = _this$state7.error,
+          fileState = _this$state7.fileState;
       var createAnalyticsEvent = this.props.createAnalyticsEvent;
-      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext);
+      createAnalyticsEvent && (0, _cardAnalytics.fireOperationalEvent)(createAnalyticsEvent, status, this.fileAttributes, this.getPerformanceAttributes(), this.ssrReliability, error, this.traceContext, fileState === null || fileState === void 0 ? void 0 : fileState.metadataTraceContext);
       (0, _ufoExperiences.completeUfoExperience)(this.internalOccurrenceKey, status, this.fileAttributes, this.fileStateFlags, this.ssrReliability, error);
     }
   }, {

package/dist/cjs/card/cardAnalytics.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
+exports.fireScreenEvent = exports.fireOperationalEvent = exports.fireNonCriticalErrorEvent = exports.fireCopiedEvent = exports.fireCommencedEvent = void 0;
 
 var _analytics = require("../utils/analytics");
 
@@ -12,6 +12,7 @@ var _errors = require("../errors");
 var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
   var traceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var metadataTraceContext = arguments.length > 7 ? arguments[7] : undefined;
 
   var fireEvent = function fireEvent(payload) {
     return (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
@@ -19,15 +20,15 @@ var fireOperationalEvent = function fireOperationalEvent(createAnalyticsEvent, s
 
   switch (status) {
     case 'complete':
-      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderSucceededEventPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'failed-processing':
-      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderFailedFileStatusPayload)(fileAttributes, performanceAttributes, ssrReliability, traceContext, metadataTraceContext));
       break;
 
     case 'error':
-      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability, traceContext));
+      fireEvent((0, _analytics.getRenderErrorEventPayload)(fileAttributes, performanceAttributes, error, ssrReliability, traceContext, metadataTraceContext));
       break;
   }
 };
@@ -58,4 +59,14 @@ var fireScreenEvent = function fireScreenEvent(createAnalyticsEvent, fileAttribu
   (0, _analytics.fireMediaCardEvent)((0, _analytics.getRenderPreviewableCardPayload)(fileAttributes), createAnalyticsEvent);
 };
 
-exports.fireScreenEvent = fireScreenEvent;
+exports.fireScreenEvent = fireScreenEvent;
+
+var fireNonCriticalErrorEvent = function fireNonCriticalErrorEvent(createAnalyticsEvent, cardStatus, fileAttributes, ssrReliability) {
+  var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new _errors.MediaCardError('missing-error-data');
+  var traceContext = arguments.length > 5 ? arguments[5] : undefined;
+  var metadataTraceContext = arguments.length > 6 ? arguments[6] : undefined;
+  var errorPayload = (0, _analytics.getErrorEventPayload)(cardStatus, fileAttributes, error, ssrReliability, traceContext, metadataTraceContext);
+  (0, _analytics.fireMediaCardEvent)(errorPayload, createAnalyticsEvent);
+};
+
+exports.fireNonCriticalErrorEvent = fireNonCriticalErrorEvent;

package/dist/cjs/card/cardImageView/cardOverlay/index.js

@@ -29,8 +29,6 @@ var _react2 = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _check = _interopRequireDefault(require("@atlaskit/icon/glyph/check"));
 
 var _mediaUi = require("@atlaskit/media-ui");
@@ -119,7 +117,7 @@ var CardOverlay = /*#__PURE__*/function (_Component) {
           selected = _this$props2.selected,
           actions = _this$props2.actions;
       var titleText = resolveTitleText(cardStatus, mediaName, error, selected);
-      var menuTriggerColor = !persistent ? (0, _tokens.token)('color.icon.inverse', 'white') : undefined;
+      var menuTriggerColor = !persistent ? "var(--ds-icon-inverse, white)" : undefined;
       return (0, _react.jsx)(_cardOverlayComponents.Overlay, {
         hasError: !!error,
         noHover: noHover,

package/dist/cjs/card/cardImageView/cardOverlay/styles.js

@@ -19,8 +19,6 @@ var _components = require("@atlaskit/theme/components");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _styles = require("../../styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
@@ -29,7 +27,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 tickBoxStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), (0, _mediaUi.size)(14), (0, _styles.transition)(), (0, _tokens.token)('elevation.surface.overlay', (0, _styles.rgba)('#ffffff', 0.5)), (0, _tokens.token)('color.icon.subtle', '#798599'), (0, _tokens.token)('color.icon.inverse', 'white'), (0, _tokens.token)('color.icon.selected', '#0052cc'));
+var tickBoxStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 20px;\n  color: ", "; /* CLEANUP - TODO FIL-3884: Align color with new design */\n  display: flex;\n  opacity: 0;\n\n  &.selected {\n    opacity: 1;\n    color: ", ";\n    background-color: ", "; /* CLEANUP - TODO FIL-3884: Align with tickbox icons */\n  }\n\n  /* Enforce dimensions of \"tick\" icon */\n  svg {\n    position: absolute;\n    width: 14px;\n  }\n"])), (0, _mediaUi.size)(14), (0, _styles.transition)(), "var(--ds-surface-overlay, ".concat((0, _styles.rgba)('#ffffff', 0.5), ")"), "var(--ds-icon-subtle, #798599)", "var(--ds-icon-inverse, white)", "var(--ds-icon-selected, #0052cc)");
 exports.tickBoxStyles = tickBoxStyles;
 
 var getOverlayStyles = function getOverlayStyles(_ref) {
@@ -42,7 +40,7 @@ var getOverlayStyles = function getOverlayStyles(_ref) {
 };
 
 var overlayStyles = function overlayStyles(props) {
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), (0, _mediaUi.size)(), (0, _mediaUi.absolute)(), _mediaUi.borderRadius, _styles.easeOutCubic, getOverlayStyles(props), (0, _tokens.token)('color.text.information', colors.B400), (0, _tokens.token)('color.text', colors.N800), (0, _tokens.token)('color.background.neutral.hovered', (0, _styles.rgba)(colors.N900, 0.06)), (0, _tokens.token)('color.background.selected', colors.B200), (0, _tokens.token)('color.background.selected.hovered', (0, _styles.rgba)(colors.N900, 0.16)), (0, _tokens.token)('color.text', colors.N900), (0, _tokens.token)('color.text', 'white'), (0, _tokens.token)('color.text', 'white'), (0, _tokens.token)('color.interaction.hovered', (0, _styles.rgba)(colors.N900, 0.5)), (0, _tokens.token)('color.background.selected.bold', colors.B200), (0, _tokens.token)('color.icon.inverse', 'white'), (0, _tokens.token)('color.text', colors.N800));
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " display: flex;\n  justify-content: space-between;\n  flex-direction: column;\n  background: transparent;\n  transition: 0.3s background ", ", 0.3s border-color;\n  padding: 16px;\n\n  ", "\n  &:not(.persistent):hover, &.active {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  &.noHover:hover {\n    .top-row {\n      .title {\n        color: ", ";\n      }\n    }\n  }\n\n  .file-type-icon {\n    display: block;\n  }\n\n  &:not(.persistent) {\n    &:not(.error, .noHover):hover {\n      background-color: ", ";\n    }\n\n    &.selectable {\n      &.selected {\n        background-color: ", ";\n\n        &:hover {\n          /* CLEANUP - TODO FIL-3884 add new overlay with rgba(colors.N900, 0.16) */\n          background-color: ", ";\n        }\n\n        .title,\n        .bottom-row,\n        .file-size {\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.persistent {\n    &:not(.active) {\n      overflow: hidden;\n    }\n\n    .top-row {\n      .title {\n        transition: opacity 0.3s;\n        opacity: 0;\n        color: ", ";\n        visibility: hidden;\n      }\n    }\n\n    .bottom-row {\n      opacity: 0;\n      transition: transform 0.2s, opacity 0.5s;\n      /* This is the height of the overlay footer, needs to be present now since the parent uses flex and 100% doesn't look right anymore */\n      transform: translateY(35px);\n\n      .file-type-icon {\n        display: none;\n      }\n\n      .file-size {\n        color: ", ";\n        display: none;\n      }\n    }\n\n    &:hover,\n    &.active {\n      background-color: ", ";\n\n      .title {\n        opacity: 1;\n        visibility: visible;\n      }\n\n      .file-type-icon,\n      .file-size {\n        display: block;\n      }\n\n      .bottom-row {\n        opacity: 1;\n        transform: translateY(0);\n      }\n    }\n\n    /* Selectable */\n    &.selectable {\n      &:hover {\n        .tickbox {\n          opacity: 1;\n        }\n      }\n\n      &.selected {\n        .tickbox {\n          background-color: ", " !important;\n          color: ", ";\n        }\n      }\n    }\n  }\n\n  &.error {\n    .top-row {\n      overflow: visible;\n    }\n    &:hover,\n    &.active {\n      .top-row {\n        .title {\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), (0, _mediaUi.size)(), (0, _mediaUi.absolute)(), _mediaUi.borderRadius, _styles.easeOutCubic, getOverlayStyles(props), "var(--ds-text-information, ".concat(colors.B400, ")"), "var(--ds-text, ".concat(colors.N800, ")"), "var(--ds-background-neutral-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.06), ")"), "var(--ds-background-selected, ".concat(colors.B200, ")"), "var(--ds-background-selected-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.16), ")"), "var(--ds-text, ".concat(colors.N900, ")"), "var(--ds-text, white)", "var(--ds-text, white)", "var(--ds-interaction-hovered, ".concat((0, _styles.rgba)(colors.N900, 0.5), ")"), "var(--ds-background-selected-bold, ".concat(colors.B200, ")"), "var(--ds-icon-inverse, white)", "var(--ds-text, ".concat(colors.N800, ")"));
 };
 
 exports.overlayStyles = overlayStyles;
@@ -56,22 +54,22 @@ var bottomRowStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0
 exports.bottomRowStyles = bottomRowStyles;
 var rightColumnStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([""])));
 exports.rightColumnStyles = rightColumnStyles;
-var errorMessageStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), _styles.antialiased, (0, _tokens.token)('color.text.subtlest', colors.N70));
+var errorMessageStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", " display: inline-block;\n  vertical-align: middle;\n  font-weight: bold;\n  color: ", ";\n  font-size: 12px;\n  line-height: 15px;\n  overflow: hidden;\n  max-width: 'calc(100% - 24px)';\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  margin: auto 3px;\n"])), _styles.antialiased, "var(--ds-text-subtlest, ".concat(colors.N70, ")"));
 exports.errorMessageStyles = errorMessageStyles;
 var altWrapperStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  font-weight: normal;\n"])), errorMessageStyles);
 exports.altWrapperStyles = altWrapperStyles;
 
 var titleWrapperStyles = function titleWrapperStyles(theme) {
   return (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  box-sizing: border-box;\n  word-wrap: break-word;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('color.text', colors.N800),
-    dark: (0, _tokens.token)('color.text', colors.DN900)
+    light: "var(--ds-text, ".concat(colors.N800, ")"),
+    dark: "var(--ds-text, ".concat(colors.DN900, ")")
   })({
     theme: theme
   }));
 };
 
 exports.titleWrapperStyles = titleWrapperStyles;
-var subtitleStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-size: 12px;\n  color: ", ";\n"])), (0, _mediaUi.ellipsis)('100px'), (0, _tokens.token)('color.text.subtlest', '#5e6c84'));
+var subtitleStyles = (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-size: 12px;\n  color: ", ";\n"])), (0, _mediaUi.ellipsis)('100px'), "var(--ds-text-subtlest, #5e6c84)");
 exports.subtitleStyles = subtitleStyles;
 var metadataStyles = (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
 exports.metadataStyles = metadataStyles;

package/dist/cjs/card/cardImageView/fileCardImageView.js

@@ -27,8 +27,6 @@ var _react = require("@emotion/react");
 
 var _react2 = _interopRequireWildcard(require("react"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _vidPlay = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-play"));
@@ -254,7 +252,7 @@ var FileCardImageView = /*#__PURE__*/function (_Component) {
         css: _styles.cardActionsWrapperStyles
       }, actions ? (0, _react.jsx)(_cardActions.default, {
         actions: actions,
-        triggerColor: (0, _tokens.token)('color.icon.inverse', 'white')
+        triggerColor: "var(--ds-icon-inverse, white)"
       }) : null))));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSuccessCardContents", function () {

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

@@ -11,8 +11,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("@emotion/react");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _mediaUi = require("@atlaskit/media-ui");
 
 var _components = require("@atlaskit/theme/components");
@@ -33,8 +31,8 @@ var getShadowAttribute = function getShadowAttribute(props) {
 var getBackgroundColor = function getBackgroundColor(props) {
   var mediaType = props.mediaType;
   return "background: ".concat(mediaType === 'image' ? 'transparent' : (0, _components.themed)({
-    light: (0, _tokens.token)('color.background.neutral', _colors.N20),
-    dark: (0, _tokens.token)('color.background.neutral', _colors.DN50)
+    light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
   })(props), ";");
 };
 
@@ -43,18 +41,18 @@ var wrapperStyles = function wrapperStyles(props) {
 };
 
 exports.wrapperStyles = wrapperStyles;
-var playIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (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\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])), (0, _tokens.token)('color.icon.inverse', 'white'));
+var playIconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (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\n  /* we want to override default icon size and hover state */\n  &:hover > * {\n    width: 64px;\n    height: 64px;\n  }\n"])), "var(--ds-icon-inverse, white)");
 exports.playIconWrapperStyles = playIconWrapperStyles;
-var playIconBackgroundStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])), (0, _tokens.token)('color.background.neutral.bold', 'rgba(23, 43, 77, 0.7)'));
+var playIconBackgroundStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  border-radius: 100%;\n  padding: 10px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition-property: width, height;\n  transition-duration: 0.1s;\n  width: 56px;\n  height: 56px;\n"])), "var(--ds-background-neutral-bold, rgba(23, 43, 77, 0.7))");
 exports.playIconBackgroundStyles = playIconBackgroundStyles;
 var bodyHeight = 26;
 var progressBarWrapperStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: 100%;\n  width: 100%;\n"])));
 exports.progressBarWrapperStyles = progressBarWrapperStyles;
-var overlayStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), (0, _mediaUi.absolute)(), (0, _mediaUi.size)(), (0, _tokens.token)('color.blanket', 'rgba(9, 30, 66, 0.5)'));
+var overlayStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  border-radius: inherit;\n  background-color: ", ";\n"])), (0, _mediaUi.absolute)(), (0, _mediaUi.size)(), "var(--ds-blanket, rgba(9, 30, 66, 0.5))");
 exports.overlayStyles = overlayStyles;
-var titleStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), (0, _mediaUi.absolute)(), (0, _tokens.token)('color.text.inverse', _colors.N0));
+var titleStyles = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " width: 100%;\n  padding: 8px;\n  color: ", ";\n  font-size: 12px;\n  line-height: 18px;\n  word-wrap: break-word;\n"])), (0, _mediaUi.absolute)(), "var(--ds-text-inverse, ".concat(_colors.N0, ")"));
 exports.titleStyles = titleStyles;
-var bodyStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), (0, _tokens.token)('color.text.inverse', _colors.N0));
+var bodyStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  bottom: 0;\n  width: 100%;\n  padding: 8px;\n  color: ", ";\n"])), "var(--ds-text-inverse, ".concat(_colors.N0, ")"));
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 exports.bodyStyles = bodyStyles;

package/dist/cjs/card/cardLoader.js

@@ -45,7 +45,7 @@ var MediaCard = (0, _reactLoadable.default)({
 var MediaCardErrorBoundary = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('../utils/media-card-analytics-error-boundary'));
+      return _interopRequireWildcard(require('./media-card-analytics-error-boundary'));
     }).then(function (mod) {
       return mod.default;
     });
@@ -72,14 +72,23 @@ var MediaCardWithMediaClient = (0, _reactLoadable.default)({
 
 var CardWithMediaClient = function CardWithMediaClient(props) {
   var withMediaClient = props.withMediaClient,
-      featureFlags = props.featureFlags;
+      dimensions = props.dimensions,
+      featureFlags = props.featureFlags,
+      onClick = props.onClick;
   var memoizedFeatureFlags = (0, _mediaCommon.useMemoizeFeatureFlags)(featureFlags);
 
   var Card = _react.default.useMemo(function () {
     return withMediaClient(MediaCard, memoizedFeatureFlags);
   }, [withMediaClient, memoizedFeatureFlags]);
 
-  return /*#__PURE__*/_react.default.createElement(MediaCardErrorBoundary, null, /*#__PURE__*/_react.default.createElement(Card, props));
+  return (
+    /*#__PURE__*/
+    // onClick is passed into MediaCardErrorBoundary so MediaGroup items can get the toolbar menu in Editor
+    _react.default.createElement(MediaCardErrorBoundary, {
+      dimensions: dimensions,
+      onClick: onClick
+    }, /*#__PURE__*/_react.default.createElement(Card, props))
+  );
 };
 
 var CardLoader = function CardLoader(props) {

package/dist/cjs/card/cardState.js

@@ -1,14 +1,10 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCardStateFromFileState = exports.createStateUpdater = void 0;
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _mediaClient = require("@atlaskit/media-client");
 
 var _errors = require("../errors");
@@ -17,19 +13,21 @@ var _getCardStatus = require("./getCardStatus");
 
 var _getCardPreview = require("./getCardPreview");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var createStateUpdater = function createStateUpdater(newState) {
+/**
+ * From docs: "Both state and props received by the updater function are guaranteed to be up-to-date.
+ * The output of the updater is shallowly merged with state."
+ */
+var createStateUpdater = function createStateUpdater(newState, fireErrorEvent) {
   return function (prevState) {
-    // Only override if previous status is non-final
-    // or new status is 'complete'
-    if ((0, _getCardStatus.isFinalCardStatus)(prevState.status) && newState.status !== 'complete') {
+    // Only override if previous status is non-final or new status is 'complete'
+    if (!!newState.status && (0, _getCardStatus.isFinalCardStatus)(prevState.status) && newState.status !== 'complete') {
+      // Log the error if the new state is not going to store it.
+      // i.e. this is a non critical error
+      !!newState.error && fireErrorEvent(newState.error);
       return prevState;
     }
 
-    return _objectSpread(_objectSpread({}, prevState), newState);
+    return newState;
   };
 };
 

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

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mediaCommon = require("@atlaskit/media-common");
+
+var _unhandledErrorCard = require("./ui/unhandledErrorCard");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = require("../utils/analytics");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(WrappedMediaCardAnalyticsErrorBoundary, _React$Component);
+
+  var _super = _createSuper(WrappedMediaCardAnalyticsErrorBoundary);
+
+  function WrappedMediaCardAnalyticsErrorBoundary(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, WrappedMediaCardAnalyticsErrorBoundary);
+    _this = _super.call(this, props);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireOperationalEvent", function (error, info) {
+      var _window, _window$navigator;
+
+      var _this$props = _this.props,
+          _this$props$data = _this$props.data,
+          data = _this$props$data === void 0 ? {} : _this$props$data,
+          createAnalyticsEvent = _this$props.createAnalyticsEvent;
+      var payload = {
+        eventType: 'operational',
+        action: 'failed',
+        actionSubject: 'mediaCardRender',
+        attributes: _objectSpread({
+          browserInfo: (_window = window) !== null && _window !== void 0 && (_window$navigator = _window.navigator) !== null && _window$navigator !== void 0 && _window$navigator.userAgent ? window.navigator.userAgent : 'unknown',
+          error: error,
+          info: info,
+          failReason: 'unexpected-error'
+        }, data)
+      };
+      (0, _analytics.fireMediaCardEvent)(payload, createAnalyticsEvent);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnClick", function (event) {
+      try {
+        var _this$props$onClick, _this$props2;
+
+        (_this$props$onClick = (_this$props2 = _this.props).onClick) === null || _this$props$onClick === void 0 ? void 0 : _this$props$onClick.call(_this$props2, {
+          event: event
+        });
+      } catch (e) {}
+    });
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+
+  (0, _createClass2.default)(WrappedMediaCardAnalyticsErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      try {
+        this.fireOperationalEvent(error, info);
+      } catch (e) {}
+
+      this.setState({
+        hasError: true
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var _this$props3 = this.props,
+          dimensions = _this$props3.dimensions,
+          children = _this$props3.children;
+
+      if (hasError) {
+        return /*#__PURE__*/_react.default.createElement(_unhandledErrorCard.UnhandledErrorCard, {
+          dimensions: dimensions,
+          onClick: this.handleOnClick
+        });
+      }
+
+      return children;
+    }
+  }]);
+  return WrappedMediaCardAnalyticsErrorBoundary;
+}(_react.default.Component);
+
+(0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
+var packageName = "@atlaskit/media-card";
+var packageVersion = "74.4.1";
+var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({
+  packageVersion: packageVersion,
+  packageName: packageName,
+  componentName: 'mediaCard',
+  component: 'mediaCard'
+})((0, _analyticsNext.withAnalyticsEvents)()(WrappedMediaCardAnalyticsErrorBoundary));
+var _default = MediaCardAnalyticsErrorBoundary;
+exports.default = _default;

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

@@ -114,8 +114,6 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _mediaUi = require("@atlaskit/media-ui");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _config = require("./config");
 
 var _mixins = require("./mixins");
@@ -131,7 +129,7 @@ var rootStyles = function rootStyles() {
 };
 
 exports.rootStyles = rootStyles;
-var cardShadow = "\n  box-shadow: ".concat((0, _tokens.token)('elevation.shadow.raised', '0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24)'), ";\n");
+var cardShadow = "\n  box-shadow: ".concat("var(--ds-shadow-raised, 0 1px 1px rgba(9, 30, 66, 0.2), 0 0 1px 0 rgba(9, 30, 66, 0.24))", ";\n");
 exports.cardShadow = cardShadow;
 
 var fadeinImageStyles = function fadeinImageStyles() {

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

@@ -9,8 +9,6 @@ exports.fixedBlanketStyles = exports.blanketStyles = exports.blanketClassName =
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _styles = require("../../styles");
@@ -21,7 +19,7 @@ var _templateObject;
 
 var blanketClassName = 'media-card-blanket';
 exports.blanketClassName = blanketClassName;
-var fixedBlanketStyles = "background-color: ".concat((0, _tokens.token)('color.blanket', _colors.N90A), ";");
+var fixedBlanketStyles = "background-color: ".concat("var(--ds-blanket, ".concat(_colors.N90A, ")"), ";");
 exports.fixedBlanketStyles = fixedBlanketStyles;
 
 var blanketStyles = function blanketStyles(isFixed) {

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

@@ -9,8 +9,6 @@ exports.iconMessageWrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
@@ -23,7 +21,7 @@ var animatedStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0,
 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;' : '', (0, _tokens.token)('color.text.subtlest', _colors.N300), animated ? animatedStyles : '');
+  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) {