@atlaskit/smart-card 26.48.3 → 26.48.5

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

@@ -5,13 +5,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _markdownToJsx = _interopRequireDefault(require("markdown-to-jsx"));
 var _react2 = require("@emotion/react");
-var _templateObject;
+var _aiStateIndicator = _interopRequireDefault(require("../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator"));
 /** @jsx jsx */
-var AISummaryCSS = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  overflow-y: auto;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  word-wrap: break-word;\n  white-space: normal;\n"])));
+
+var AITooltipIcon = function AITooltipIcon() {
+  return (0, _react2.jsx)(_aiStateIndicator.default, {
+    appearance: "icon-only",
+    state: "done",
+    testId: "ai-tooltip"
+  });
+};
+var AISummaryCSS = (0, _react2.css)({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -20,6 +32,9 @@ var AISummaryCSS = (0, _react2.css)(_templateObject || (_templateObject = (0, _t
 
 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;
@@ -29,9 +44,12 @@ var AISummary = function AISummary(_ref) {
   return (0, _react2.jsx)(_markdownToJsx.default, {
     "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
+      }
     }
   });
 };

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

@@ -50,23 +50,30 @@ export class AISummaryService {
     for (const subscriber of this.subscribedStateSetters) {
       subscriber(this.state);
     }
-    const stream = await this.fetchStream(summaryStyle);
-    let bufferContent = '';
-    for await (const chunk of stream) {
-      if (chunk.type === 'ANSWER_PART') {
-        bufferContent += chunk.message.content;
-        for (const subscriber of this.subscribedStateSetters) {
-          subscriber({
-            ...this.state,
-            content: bufferContent
-          });
+    try {
+      const stream = await this.fetchStream(summaryStyle);
+      let bufferContent = '';
+      for await (const chunk of stream) {
+        if (chunk.type === 'ANSWER_PART') {
+          bufferContent += chunk.message.content;
+          for (const subscriber of this.subscribedStateSetters) {
+            subscriber({
+              ...this.state,
+              content: bufferContent
+            });
+          }
         }
       }
+      this.state = {
+        status: 'done',
+        content: bufferContent
+      };
+    } catch {
+      this.state = {
+        status: 'error',
+        content: ''
+      };
     }
-    this.state = {
-      status: 'done',
-      content: bufferContent
-    };
     for (const subscriber of this.subscribedStateSetters) {
       subscriber(this.state);
     }

package/dist/es2019/utils/analytics/analytics.js

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

package/dist/es2019/utils/index.js

@@ -154,4 +154,17 @@ export const openUrl = async url => {
     return;
   }
   window.open(url, '_blank', 'noopener=yes');
+};
+
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export const combineFrameStyle = (frameStyle, isFrameVisible) => {
+  if (frameStyle !== undefined) {
+    return frameStyle;
+  }
+  if (isFrameVisible) {
+    return 'show';
+  }
 };

package/dist/es2019/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({
   isSelected,
   isHovered,
   isFrameVisible,
-  frameStyle,
+  frameStyle: frameStyleProp,
   platform,
   onClick,
   appearance,
@@ -66,6 +66,7 @@ function Component({
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   const actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
+  const frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
@@ -248,7 +249,6 @@ function Component({
         handleInvoke: handleInvoke,
         analytics: analytics,
         isSelected: isSelected,
-        isFrameVisible: isFrameVisible,
         frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,

package/dist/es2019/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';
@@ -9,8 +9,7 @@ export const ExpandedFrame = ({
   icon,
   text,
   isSelected,
-  isFrameVisible,
-  frameStyle,
+  frameStyle = 'showOnHover',
   href,
   minWidth,
   maxWidth,
@@ -21,7 +20,6 @@ export const ExpandedFrame = ({
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
-  const calculatedFrameStyle = useMemo(() => frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover', [frameStyle, isFrameVisible]);
   const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
     className: "embed-header",
     frameStyle: frameStyle
@@ -45,7 +43,7 @@ export const ExpandedFrame = ({
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
       "data-testid": testId,
@@ -61,7 +59,7 @@ export const ExpandedFrame = ({
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       maxWidth: maxWidth,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,

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

@@ -26,7 +26,6 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   analytics,
   handleInvoke,
   isSelected,
-  isFrameVisible,
   frameStyle,
   platform,
   onResolve,
@@ -67,7 +66,6 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       if (resolvedViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
@@ -110,6 +108,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         analytics: analytics,
         context: unauthorisedViewProps.context,
         extensionKey: extensionKey,
+        frameStyle: frameStyle,
         isProductIntegrationSupported: isProductIntegrationSupported,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
@@ -130,8 +129,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       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
@@ -145,6 +144,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       });
       return /*#__PURE__*/React.createElement(ForbiddenView, {
         context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onAuthorize: handleAuthorize,
@@ -168,6 +168,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }) : undefined;
       return /*#__PURE__*/React.createElement(NotFoundView, {
         context: notFoundViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onClick: handleFrameClick,

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

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

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

@@ -8,6 +8,7 @@ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleSt
 const UnresolvedView = ({
   button,
   description,
+  frameStyle,
   icon: iconUrlOrElement,
   image,
   inheritDimensions,
@@ -32,8 +33,15 @@ const UnresolvedView = ({
     });
   }, [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/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
@@ -51,8 +49,7 @@ const PreviewAction = props => {
         if (onClick) {
           onClick();
         }
-      },
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+      }
     };
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

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

@@ -3,27 +3,28 @@ import React from 'react';
 import styled from '@emotion/styled';
 import Tooltip, { TooltipPrimitive } from '@atlaskit/tooltip';
 import { Box, xcss } from '@atlaskit/primitives';
-const AIIndicatorTooltipPrimitive = styled(TooltipPrimitive)`
-  border-radius: ${"var(--ds-border-radius, 3px)"};
-  background-color: ${"var(--ds-surface-raised, white)"};
-  box-shadow: ${"var(--ds-shadow-overlay, 0px 8px 12px rgba(9, 30, 66, 0.15),0px 0px 1px rgba(9, 30, 66, 0.31))"};
-  box-sizing: content-box;
-  padding: ${"var(--ds-space-200, 16px)"};
-  max-width: 350px;
-`;
+const 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'
+});
 const triggerStyles = xcss({
   display: 'inline-flex'
 });
 const AIIndicatorTooltip = ({
   content,
-  trigger
+  trigger,
+  xcss: overrideXcss
 }) => {
   return /*#__PURE__*/React.createElement(Tooltip, {
     component: AIIndicatorTooltipPrimitive,
     content: content,
     tag: "span"
   }, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
-    xcss: triggerStyles
+    xcss: [triggerStyles, overrideXcss]
   }, tooltipProps), trigger));
 };
 export default AIIndicatorTooltip;

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

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

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

@@ -2,25 +2,25 @@ import _extends from "@babel/runtime/helpers/extends";
 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';
 const AISummaryBlockResolvedView = props => {
   const {
     actions = [],
     metadata,
-    testId,
     onActionMenuOpenChange,
     onAIActionChange,
-    size = SmartLinkSize.Medium
+    size = SmartLinkSize.Medium,
+    testId
   } = props;
   const [aiState, setAIState] = useState('ready');
   const metadataElements = renderElementItems(metadata);
@@ -30,8 +30,11 @@ const AISummaryBlockResolvedView = props => {
     url
   });
   const {
-    content
-  } = aiSummary.state;
+    state: {
+      content
+    },
+    isSummarisedOnMount
+  } = aiSummary;
   const onAIActionClick = useCallback(() => {
     setAIState('loading');
     if (onAIActionChange) {
@@ -45,8 +48,8 @@ const AISummaryBlockResolvedView = props => {
         name: ActionName.CustomAction,
         onClick: onAIActionClick,
         testId: `${testId}-ai-summary-action`,
-        icon: /*#__PURE__*/React.createElement(AiIcon, {
-          label: "AiIcon"
+        icon: /*#__PURE__*/React.createElement(AIIcon, {
+          label: "AIIcon"
         })
       };
       return [aiAction, ...actions];
@@ -64,17 +67,19 @@ const AISummaryBlockResolvedView = props => {
     direction: SmartLinkDirection.Vertical,
     testId: `${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: `${testId}-state-indicator`
   }) : /*#__PURE__*/React.createElement(ElementGroup, {
-    width: SmartLinkWidth.FitToContent
+    width: SmartLinkWidth.FitToContent,
+    testId: `${testId}-metadata-group`
   }, metadataElements)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: combinedActions,

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

@@ -8,11 +8,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';
 const actionStyles = css`
   cursor: pointer;
   :hover {
-    color: ${tokens.errorMessageHover};
+    color: ${"var(--ds-text-subtle, #8993A4)"};
     text-decoration: underline;
   }
 `;
@@ -24,9 +23,9 @@ const getMessageStyles = (size, hasAction) => {
     ${hasAction ? actionStyles : ''}
     ${sizeStyles}
     ${getTruncateStyles(1, getLinkLineHeight(size))}
-    color: ${tokens.errorMessage};
+    color: ${"var(--ds-text-disabled, #6B778C)"};
     :focus {
-      outline: ${tokens.focus} solid 2px;
+      outline: ${"var(--ds-border-focused, #388BFF)"} solid 2px;
     }
   `;
 };

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

@@ -3,7 +3,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';
@@ -99,7 +98,7 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
     min-width: 0;
     overflow-x: hidden;
     position: relative;
-    ${hideBackground ? '' : `background-color: ${tokens.background};`}
+    ${hideBackground ? '' : `background-color: ${"var(--ds-surface-raised, #FFFFFF)"};`}
     ${paddingCss}
     ${hideElevation ? '' : elevationStyles}
     ${clickableContainer ? clickableContainerStyles : ''}

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

@@ -1,7 +1,6 @@
 /** @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';
@@ -13,7 +12,7 @@ const badgeStyles = css`
   min-width: fit-content;
 `;
 const iconStyles = css`
-  color: ${tokens.badgeIcon};
+  color: ${"var(--ds-icon-subtle, #626F86)"};
   line-height: 0;
   vertical-align: middle;
   ${getIconSizeStyles('1rem')}
@@ -25,7 +24,7 @@ const iconStyles = css`
   }
 `;
 const labelStyles = css`
-  color: ${tokens.badgeText};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   padding-left: 0.125rem;

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

@@ -4,11 +4,10 @@ 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';
 const styles = css`
-  color: ${tokens.text};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   ${getTruncateStyles(1)}

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

@@ -5,7 +5,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';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
@@ -34,24 +33,24 @@ const getThemeStyles = theme => {
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case SmartLinkTheme.Black:
       return css`
-        color: ${tokens.blackLink};
+        color: ${"var(--ds-text-subtle, #44546F)"};
         :active {
-          color: ${tokens.blackLinkPressed};
+          color: ${"var(--ds-text, #172B4D)"};
         }
         :hover {
-          color: ${tokens.blackLink};
+          color: ${"var(--ds-text-subtle, #44546F)"};
           text-decoration: underline;
         }
       `;
     case SmartLinkTheme.Link:
     default:
       return css`
-        color: ${tokens.blueLink};
+        color: ${"var(--ds-link, #0C66E4)"};
         :active {
-          color: ${tokens.blueLinkPressed};
+          color: ${"var(--ds-link-pressed, #0055CC)"};
         }
         :hover {
-          color: ${tokens.blueLink};
+          color: ${"var(--ds-link, #0C66E4)"};
           text-decoration: underline;
         }
       `;

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

@@ -2,9 +2,8 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-import { tokens } from '../../../../../utils/token';
 const getStyles = maxLines => css`
-  color: ${tokens.text};
+  color: ${"var(--ds-text-subtlest, #626F86)"};
   font-size: 0.75rem;
   line-height: 1rem;
   white-space: normal;

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

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

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

@@ -2,13 +2,18 @@
 import React from 'react';
 import Markdown from 'markdown-to-jsx';
 import { css, jsx } from '@emotion/react';
-const AISummaryCSS = css`
-  overflow-y: auto;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  word-wrap: break-word;
-  white-space: normal;
-`;
+import AIStateIndicator from '../../FlexibleCard/components/blocks/ai-summary-block/ai-state-indicator';
+const AITooltipIcon = () => jsx(AIStateIndicator, {
+  appearance: "icon-only",
+  state: "done",
+  testId: "ai-tooltip"
+});
+const AISummaryCSS = css({
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  wordWrap: 'break-word',
+  whiteSpace: 'normal'
+});
 /**
  * A component to render a response from AI in markdown text.
  * @internal
@@ -17,6 +22,8 @@ const AISummaryCSS = css`
 
 const AISummary = ({
   content,
+  showIcon = false,
+  iconComponent,
   overrideCss,
   testId = 'ai-summary'
 }) => {
@@ -26,9 +33,12 @@ const AISummary = ({
   return jsx(Markdown, {
     "data-testid": testId,
     css: [AISummaryCSS, overrideCss],
-    children: content,
+    children: showIcon ? `${content} <Icon />` : content,
     options: {
-      forceWrapper: true
+      forceWrapper: true,
+      overrides: {
+        Icon: iconComponent !== null && iconComponent !== void 0 ? iconComponent : AITooltipIcon
+      }
     }
   });
 };