@atlaskit/smart-card 26.48.3 → 26.48.5

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -111,21 +111,22 @@ export var AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator2.f();
               }
-              _context2.next = 6;
+              _context2.prev = 4;
+              _context2.next = 7;
               return this.fetchStream(summaryStyle);
-            case 6:
+            case 7:
               stream = _context2.sent;
               bufferContent = '';
               _iteratorAbruptCompletion = false;
               _didIteratorError = false;
-              _context2.prev = 10;
+              _context2.prev = 11;
               _iterator = _asyncIterator(stream);
-            case 12:
-              _context2.next = 14;
+            case 13:
+              _context2.next = 15;
               return _iterator.next();
-            case 14:
+            case 15:
               if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-                _context2.next = 20;
+                _context2.next = 21;
                 break;
               }
               chunk = _step.value;
@@ -145,43 +146,53 @@ export var AISummaryService = /*#__PURE__*/function () {
                   _iterator3.f();
                 }
               }
-            case 17:
+            case 18:
               _iteratorAbruptCompletion = false;
-              _context2.next = 12;
+              _context2.next = 13;
               break;
-            case 20:
-              _context2.next = 26;
+            case 21:
+              _context2.next = 27;
               break;
-            case 22:
-              _context2.prev = 22;
-              _context2.t0 = _context2["catch"](10);
+            case 23:
+              _context2.prev = 23;
+              _context2.t0 = _context2["catch"](11);
               _didIteratorError = true;
               _iteratorError = _context2.t0;
-            case 26:
-              _context2.prev = 26;
+            case 27:
               _context2.prev = 27;
+              _context2.prev = 28;
               if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
-                _context2.next = 31;
+                _context2.next = 32;
                 break;
               }
-              _context2.next = 31;
+              _context2.next = 32;
               return _iterator.return();
-            case 31:
-              _context2.prev = 31;
+            case 32:
+              _context2.prev = 32;
               if (!_didIteratorError) {
-                _context2.next = 34;
+                _context2.next = 35;
                 break;
               }
               throw _iteratorError;
-            case 34:
-              return _context2.finish(31);
             case 35:
-              return _context2.finish(26);
+              return _context2.finish(32);
             case 36:
+              return _context2.finish(27);
+            case 37:
               this.state = {
                 status: 'done',
                 content: bufferContent
               };
+              _context2.next = 43;
+              break;
+            case 40:
+              _context2.prev = 40;
+              _context2.t1 = _context2["catch"](4);
+              this.state = {
+                status: 'error',
+                content: ''
+              };
+            case 43:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -193,11 +204,11 @@ export var AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 39:
+            case 45:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[10, 22, 26, 36], [27,, 31, 35]]);
+        }, _callee2, this, [[4, 40], [11, 23, 27, 37], [28,, 32, 36]]);
       }));
       function summariseUrl() {
         return _summariseUrl.apply(this, arguments);

package/dist/esm/utils/analytics/analytics.js

@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.3"
+  packageVersion: "26.48.5"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/index.js

@@ -341,4 +341,17 @@ export var openUrl = /*#__PURE__*/function () {
   return function openUrl(_x3) {
     return _ref3.apply(this, arguments);
   };
-}();
+}();
+
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export var combineFrameStyle = function combineFrameStyle(frameStyle, isFrameVisible) {
+  if (frameStyle !== undefined) {
+    return frameStyle;
+  }
+  if (isFrameVisible) {
+    return 'show';
+  }
+};

package/dist/esm/view/CardWithUrl/component.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
-import { isSpecialEvent } from '../../utils';
+import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
 import { useSmartLink } from '../../state';
@@ -20,7 +20,7 @@ function Component(_ref) {
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
     isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    frameStyleProp = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
     appearance = _ref.appearance,
@@ -65,6 +65,7 @@ function Component(_ref) {
   }, [children]);
   var enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   var actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
+  var frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
   // Setup UI handlers.
   var handleClickWrapper = useCallback(function (event) {
@@ -251,7 +252,6 @@ function Component(_ref) {
         handleInvoke: handleInvoke,
         analytics: analytics,
         isSelected: isSelected,
-        isFrameVisible: isFrameVisible,
         frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,

package/dist/esm/view/EmbedCard/components/ExpandedFrame.js

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
@@ -10,8 +10,8 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     icon = _ref.icon,
     text = _ref.text,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    _ref$frameStyle = _ref.frameStyle,
+    frameStyle = _ref$frameStyle === void 0 ? 'showOnHover' : _ref$frameStyle,
     href = _ref.href,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -27,9 +27,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return handleClickCommon(event, onClick);
   };
   var handleMouseDown = useMouseDownEvent();
-  var calculatedFrameStyle = useMemo(function () {
-    return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
-  }, [frameStyle, isFrameVisible]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/React.createElement(Header, {
       className: "embed-header",
@@ -57,7 +54,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
       "data-testid": testId,
@@ -73,7 +70,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       maxWidth: maxWidth,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,

package/dist/esm/view/EmbedCard/index.js

@@ -26,7 +26,6 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
     analytics = _ref.analytics,
     handleInvoke = _ref.handleInvoke,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onResolve = _ref.onResolve,
@@ -64,7 +63,6 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       if (resolvedViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
@@ -107,6 +105,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
         analytics: analytics,
         context: unauthorisedViewProps.context,
         extensionKey: extensionKey,
+        frameStyle: frameStyle,
         isProductIntegrationSupported: isProductIntegrationSupported,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
@@ -127,8 +126,8 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       if (forbiddenViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, forbiddenViewProps, {
           title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef
@@ -142,6 +141,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       });
       return /*#__PURE__*/React.createElement(ForbiddenView, {
         context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onAuthorize: handleAuthorize,
@@ -165,6 +165,7 @@ export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef)
       }) : undefined;
       return /*#__PURE__*/React.createElement(NotFoundView, {
         context: notFoundViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -11,7 +11,6 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     context = _ref.context,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     preview = _ref.preview,
     title = _ref.title,
@@ -49,7 +48,6 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
   }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
-    isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     href: link,
     testId: testId,

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -8,6 +8,7 @@ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleSt
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
+    frameStyle = _ref.frameStyle,
     iconUrlOrElement = _ref.icon,
     image = _ref.image,
     inheritDimensions = _ref.inheritDimensions,
@@ -31,8 +32,15 @@ var UnresolvedView = function UnresolvedView(_ref) {
     });
   }, [iconUrlOrElement]);
   return jsx(ExpandedFrame, {
-    allowScrollBar: true,
-    frameStyle: "show",
+    allowScrollBar: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
     href: url,
     icon: icon,
     inheritDimensions: inheritDimensions,

package/dist/esm/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -7,8 +7,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 import { ActionName } from '../../../../../../constants';
@@ -68,8 +66,7 @@ var PreviewAction = function PreviewAction(props) {
         if (_onClick) {
           _onClick();
         }
-      },
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+      }
     });
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-indicator-tooltip.js

@@ -1,24 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import React from 'react';
 import styled from '@emotion/styled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { Box, xcss } from '@atlaskit/primitives';
-var AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n  box-sizing: content-box;\n  padding: ", ";\n  max-width: 350px;\n"])), "var(--ds-border-radius, 3px)", "var(--ds-surface-raised, white)", "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))", "var(--ds-space-200, 16px)");
+var AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-raised, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))",
+  boxSizing: 'content-box',
+  padding: "var(--ds-space-200, 16px)",
+  maxWidth: '350px'
+});
 var triggerStyles = xcss({
   display: 'inline-flex'
 });
 var AIIndicatorTooltip = function AIIndicatorTooltip(_ref) {
   var content = _ref.content,
-    trigger = _ref.trigger;
+    trigger = _ref.trigger,
+    overrideXcss = _ref.xcss;
   return /*#__PURE__*/React.createElement(Tooltip, {
     component: AIIndicatorTooltipPrimitive,
     content: content,
     tag: "span"
   }, function (tooltipProps) {
     return /*#__PURE__*/React.createElement(Box, _extends({
-      xcss: triggerStyles
+      xcss: [triggerStyles, overrideXcss]
     }, tooltipProps), trigger);
   });
 };

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator/ai-state-done.js

@@ -41,6 +41,10 @@ var iconTooltipDescStyles = xcss({
   fontWeight: '400',
   lineHeight: '14px'
 });
+var iconTooltipTriggerStyles = xcss({
+  position: 'relative',
+  bottom: 'space.negative.050'
+});
 var AIStateDone = function AIStateDone(_ref) {
   var appearance = _ref.appearance,
     testId = _ref.testId;
@@ -73,7 +77,8 @@ var AIStateDone = function AIStateDone(_ref) {
             }
           }
         }))))),
-        trigger: icon
+        trigger: icon,
+        xcss: iconTooltipTriggerStyles
       });
     default:
       return jsx(AIIndicatorContainer, {

package/dist/esm/view/FlexibleCard/components/blocks/ai-summary-block/resolved/index.js

@@ -4,26 +4,26 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { Box, Inline } from '@atlaskit/primitives';
-import { ActionName, SmartLinkSize, SmartLinkWidth, SmartLinkDirection } from '../../../../../../constants';
+import { ActionName, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
 import AIStateIndicator from '../ai-state-indicator';
 import { renderElementItems } from '../../utils';
 import { messages } from '../../../../../../messages';
-import AiIcon from '../../../../../common/ai-icon';
-import AISummary from '../../../../../common/ai-summary';
 import { useAISummary } from '../../../../../../state/hooks/use-ai-summary';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import AIIcon from '../../../../../common/ai-icon';
+import AISummary from '../../../../../common/ai-summary';
 var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   var _props$actions = props.actions,
     actions = _props$actions === void 0 ? [] : _props$actions,
     metadata = props.metadata,
-    testId = props.testId,
     onActionMenuOpenChange = props.onActionMenuOpenChange,
     onAIActionChange = props.onAIActionChange,
     _props$size = props.size,
-    size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size;
+    size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+    testId = props.testId;
   var _useState = useState('ready'),
     _useState2 = _slicedToArray(_useState, 2),
     aiState = _useState2[0],
@@ -34,7 +34,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
   var aiSummary = useAISummary({
     url: url
   });
-  var content = aiSummary.state.content;
+  var content = aiSummary.state.content,
+    isSummarisedOnMount = aiSummary.isSummarisedOnMount;
   var onAIActionClick = useCallback(function () {
     setAIState('loading');
     if (onAIActionChange) {
@@ -48,8 +49,8 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
         name: ActionName.CustomAction,
         onClick: onAIActionClick,
         testId: "".concat(testId, "-ai-summary-action"),
-        icon: /*#__PURE__*/React.createElement(AiIcon, {
-          label: "AiIcon"
+        icon: /*#__PURE__*/React.createElement(AIIcon, {
+          label: "AIIcon"
         })
       };
       return [aiAction].concat(_toConsumableArray(actions));
@@ -67,17 +68,19 @@ var AISummaryBlockResolvedView = function AISummaryBlockResolvedView(props) {
     direction: SmartLinkDirection.Vertical,
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/React.createElement(AISummary, {
-    content: content
+    content: content,
+    showIcon: isSummarisedOnMount
   }), /*#__PURE__*/React.createElement(Inline, {
     alignBlock: "center",
     alignInline: "end",
     grow: "fill",
     spread: "space-between"
-  }, /*#__PURE__*/React.createElement(Box, null, aiState === 'loading' || aiState === 'done' ? /*#__PURE__*/React.createElement(AIStateIndicator, {
+  }, /*#__PURE__*/React.createElement(Box, null, !isSummarisedOnMount && (aiState === 'loading' || aiState === 'done') ? /*#__PURE__*/React.createElement(AIStateIndicator, {
     state: aiState,
-    testId: testId
+    testId: "".concat(testId, "-state-indicator")
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
-    width: SmartLinkWidth.FitToContent
+    width: SmartLinkWidth.FitToContent,
+    testId: "".concat(testId, "-metadata-group")
   }, metadataElements)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -12,11 +12,10 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-import { tokens } from '../../../../../../utils/token';
-var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), tokens.errorMessageHover);
+var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), tokens.errorMessage, tokens.focus);
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
 };
 
 /**

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -5,7 +5,6 @@ import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
-import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
 import HoverCardControl from './hover-card-control';
@@ -68,7 +67,7 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return React.Children.map(children, function (child) {

package/dist/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -4,15 +4,14 @@ var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), tokens.badgeIcon, getIconSizeStyles('1rem'));
-var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), tokens.badgeText);
+var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", getIconSizeStyles('1rem'));
+var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), "var(--ds-text-subtlest, #626F86)");
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -6,10 +6,9 @@ import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(1));
 var typeToDescriptorMap = {
   created: {
     relative: messages.created_on_relative,

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -7,7 +7,6 @@ import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
@@ -21,10 +20,10 @@ var getThemeStyles = function getThemeStyles(theme) {
       return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blackLink, tokens.blackLinkPressed, tokens.blackLink);
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-text-subtle, #44546F)", "var(--ds-text, #172B4D)", "var(--ds-text-subtle, #44546F)");
     case SmartLinkTheme.Link:
     default:
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), tokens.blueLink, tokens.blueLinkPressed, tokens.blueLink);
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-link, #0C66E4)", "var(--ds-link-pressed, #0055CC)", "var(--ds-link, #0C66E4)");
   }
 };
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {

package/dist/esm/view/FlexibleCard/components/elements/text/index.js

@@ -4,9 +4,8 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), tokens.text, getTruncateStyles(maxLines));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(maxLines));
 };
 
 /**

package/dist/esm/view/LinkUrl/index.js

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.48.3",
+  packageVersion: "26.48.5",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/common/ai-summary/index.js

@@ -1,10 +1,21 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import { css, jsx } from '@emotion/react';
-var AISummaryCSS = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  overflow-y: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  word-wrap: break-word;\n  white-space: normal;\n"])));
+import AIStateIndicator from '../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator';
+var AITooltipIcon = function AITooltipIcon() {
+  return jsx(AIStateIndicator, {
+    appearance: "icon-only",
+    state: "done",
+    testId: "ai-tooltip"
+  });
+};
+var AISummaryCSS = css({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -13,6 +24,9 @@ var AISummaryCSS = css(_templateObject || (_templateObject = _taggedTemplateLite
 
 var AISummary = function AISummary(_ref) {
   var content = _ref.content,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? false : _ref$showIcon,
+    iconComponent = _ref.iconComponent,
     overrideCss = _ref.overrideCss,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'ai-summary' : _ref$testId;
@@ -22,9 +36,12 @@ var AISummary = function AISummary(_ref) {
   return jsx(Markdown, {
     "data-testid": testId,
     css: [AISummaryCSS, overrideCss],
-    children: content,
+    children: showIcon ? "".concat(content, " <Icon />") : content,
     options: {
-      forceWrapper: true
+      forceWrapper: true,
+      overrides: {
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+      }
     }
   });
 };