@atlaskit/smart-card 26.46.0 → 26.46.2

package/dist/cjs/view/common/ai-prism/ai-glowing-border/animated-svg-container.js

@@ -0,0 +1,249 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _constants = require("../constants");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+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; }
+/** @jsx jsx */
+
+var namespaceUUID = 0;
+var svgStyles = (0, _react.css)({
+  position: 'absolute',
+  borderRadius: _constants.OUTER_BORDER_RADIUS
+});
+var blurredStyles = (0, _react.css)({
+  width: "calc(100% - ".concat(_constants.GLOW_SIZE / 2, "px)"),
+  height: "calc(100% - ".concat(_constants.GLOW_SIZE / 2, "px)"),
+  top: _constants.GLOW_SIZE / 2,
+  left: _constants.GLOW_SIZE / 2,
+  filter: "blur(".concat(_constants.GLOW_SIZE, "px)"),
+  // for safari... : https://stackoverflow.com/a/71353198
+  backfaceVisibility: 'hidden',
+  transform: 'translate3d(0, 0, 0)'
+});
+var notBlurredStyles = (0, _react.css)({
+  left: 0,
+  top: 0,
+  width: '100%',
+  height: '100%'
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+var AnimatedSvgContainer = function AnimatedSvgContainer(_ref) {
+  var palette = _ref.palette,
+    isMoving = _ref.isMoving,
+    isGlowing = _ref.isGlowing,
+    additionalCss = _ref.additionalCss;
+  var svgRef = (0, _react2.useRef)(null);
+  var namespaceId = (0, _react2.useRef)();
+  if (namespaceId.current === undefined) {
+    namespaceId.current = namespaceUUID;
+    namespaceUUID += 1;
+  }
+  (0, _react2.useEffect)(function () {
+    if (isMoving) {
+      var svg = svgRef.current;
+
+      // Schedule animation to begin before next browser paint
+      var beginReq = requestAnimationFrame(function () {
+        svg === null || svg === void 0 || svg.querySelectorAll('animate').forEach(function (node) {
+          return node.beginElement();
+        });
+      });
+      return function () {
+        // Ensure any pending animation frame is cancelled as the element animation does not end properly if it
+        // begins in the same event tick, i.e. isLoading synchronously changes to true then false.
+        cancelAnimationFrame(beginReq);
+        requestAnimationFrame(function () {
+          svg === null || svg === void 0 || svg.querySelectorAll('animate').forEach(function (node) {
+            return node.endElement();
+          });
+        });
+      };
+    }
+    return undefined;
+  }, [isMoving]);
+  return (0, _react.jsx)("svg", {
+    css: [svgStyles, isGlowing ? blurredStyles : notBlurredStyles, additionalCss],
+    ref: svgRef,
+    viewBox: "0 0 24 24",
+    preserveAspectRatio: "none"
+  }, (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: "".concat(namespaceId.current, "_lg1"),
+    gradientUnits: "userSpaceOnUse",
+    x1: "0%",
+    y1: "0",
+    x2: "400%",
+    y2: "0",
+    spreadMethod: "reflect"
+  }, (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "x1",
+    from: "0%",
+    to: "400%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "x2",
+    from: "400%",
+    to: "800%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), (0, _react.jsx)("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), (0, _react.jsx)("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), (0, _react.jsx)("linearGradient", {
+    id: "".concat(namespaceId.current, "_lg2"),
+    gradientUnits: "userSpaceOnUse",
+    x1: "0",
+    y1: "-100%",
+    x2: "0",
+    y2: "300%",
+    spreadMethod: "reflect"
+  }, (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "y1",
+    from: "-100%",
+    to: "300%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "y2",
+    from: "300%",
+    to: "700%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), (0, _react.jsx)("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), (0, _react.jsx)("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), (0, _react.jsx)("linearGradient", {
+    id: "".concat(namespaceId.current, "_lg3"),
+    gradientUnits: "userSpaceOnUse",
+    x1: "300%",
+    y1: "0",
+    x2: "700%",
+    y2: "0",
+    spreadMethod: "reflect"
+  }, (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "x1",
+    from: "300%",
+    to: "-100%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "x2",
+    from: "700%",
+    to: "300%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), (0, _react.jsx)("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), (0, _react.jsx)("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  })), (0, _react.jsx)("linearGradient", {
+    id: "".concat(namespaceId.current, "_lg4"),
+    gradientUnits: "userSpaceOnUse",
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "400%",
+    spreadMethod: "reflect"
+  }, (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "y1",
+    from: "0%",
+    to: "-400%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("animate", {
+    begin: "indefinite",
+    attributeName: "y2",
+    from: "400%",
+    to: "0%",
+    repeatCount: "indefinite",
+    dur: "3s"
+  }), (0, _react.jsx)("stop", {
+    offset: "0",
+    stopColor: palette.blue
+  }), (0, _react.jsx)("stop", {
+    offset: "0.25",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "0.5",
+    stopColor: palette.yellow
+  }), (0, _react.jsx)("stop", {
+    offset: "0.75",
+    stopColor: palette.teal
+  }), (0, _react.jsx)("stop", {
+    offset: "1",
+    stopColor: palette.blue
+  }))), (0, _react.jsx)("g", {
+    strokeWidth: "8"
+  }, (0, _react.jsx)("path", {
+    stroke: "url(#".concat(namespaceId.current, "_lg1)"),
+    d: "M0 0h24",
+    vectorEffect: "non-scaling-stroke"
+  }), (0, _react.jsx)("path", {
+    stroke: "url(#".concat(namespaceId.current, "_lg2)"),
+    d: "M24 0v24",
+    vectorEffect: "non-scaling-stroke"
+  }), (0, _react.jsx)("path", {
+    stroke: "url(#".concat(namespaceId.current, "_lg3)"),
+    d: "M24 24H0",
+    vectorEffect: "non-scaling-stroke"
+  }), (0, _react.jsx)("path", {
+    stroke: "url(#".concat(namespaceId.current, "_lg4)"),
+    d: "M0 24V0",
+    vectorEffect: "non-scaling-stroke"
+  })));
+};
+var _default = exports.default = AnimatedSvgContainer;

package/dist/cjs/view/common/ai-prism/ai-glowing-border/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.borderContentStyles = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _animatedSvgContainer = _interopRequireDefault(require("./animated-svg-container"));
+var _constants = require("../constants");
+/** @jsx jsx */
+
+var borderContainerStyles = (0, _react.css)({
+  display: 'flex',
+  position: 'relative',
+  padding: "var(--ds-space-025, 2px)",
+  width: 'fit-content'
+});
+var borderContentStyles = exports.borderContentStyles = (0, _react.css)({
+  borderRadius: _constants.INNER_BORDER_RADIUS,
+  flexGrow: 1,
+  zIndex: 1 // needs to be more than the svg container at least
+});
+
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+var AIGlowingBorder = function AIGlowingBorder(_ref) {
+  var children = _ref.children,
+    palette = _ref.palette,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isGlowing = _ref.isGlowing,
+    testId = _ref.testId,
+    additionalCss = _ref.additionalCss;
+  return (0, _react.jsx)("div", {
+    css: [borderContainerStyles, additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.container],
+    "data-testid": testId
+  }, (0, _react.jsx)(_animatedSvgContainer.default, {
+    palette: palette,
+    isMoving: isMoving,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), isGlowing && (0, _react.jsx)(_animatedSvgContainer.default, {
+    palette: palette,
+    isMoving: isMoving,
+    isGlowing: true,
+    additionalCss: additionalCss === null || additionalCss === void 0 ? void 0 : additionalCss.animatedSvgContainer
+  }), (0, _react.jsx)("div", {
+    css: borderContentStyles
+  }, children, " "));
+};
+var _default = exports.default = AIGlowingBorder;

package/dist/cjs/view/common/ai-prism/ai-glowing-border/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/view/common/ai-prism/constants.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.aiThemeTokens = exports.OUTER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = exports.GLOW_SIZE = exports.AI_BORDER_PALETTE = void 0;
+/**
+ * The bulk of this file is originally from
+ * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
+ * with modifications.
+ */
+
+var GLOW_SIZE = exports.GLOW_SIZE = 8;
+var INNER_BORDER_RADIUS = exports.INNER_BORDER_RADIUS = 8;
+var OUTER_BORDER_RADIUS = exports.OUTER_BORDER_RADIUS = 10;
+
+// We don't yet have design system tokens representing the AI prism colour palette. We should replace this with
+// equivalent tokens when available
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var aiThemeTokens = exports.aiThemeTokens = {
+  blueUniqueGradientLight: '#00ACF8',
+  blueUniqueGradientDark: '#008BD2',
+  blue1000: '#092957',
+  blue800: '#0055CC',
+  blue700: '#0C66E4',
+  blue600: '#1D7AFC',
+  blue500: '#388BFF',
+  blue300: '#85B8FF',
+  blue200: '#CCE0FF',
+  blue100: '#E9F2FF',
+  teal500: '#37B4C3',
+  teal300: '#8BDBE5',
+  yellow500: '#CF9F02',
+  yellow200: '#F8E6A0',
+  red800: '#AE2A19',
+  red600: '#E34935',
+  orange500: '#F18D13',
+  orange300: '#FEC57B'
+};
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
+
+var AI_BORDER_PALETTE = exports.AI_BORDER_PALETTE = {
+  dark: {
+    blue: aiThemeTokens.blue800,
+    teal: aiThemeTokens.teal500,
+    yellow: aiThemeTokens.yellow500
+  },
+  light: {
+    blue: aiThemeTokens.blue600,
+    teal: aiThemeTokens.teal300,
+    yellow: aiThemeTokens.yellow200
+  }
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _tokens = require("@atlaskit/tokens");
+var _constants = require("./constants");
+var _aiGlowingBorder = _interopRequireDefault(require("./ai-glowing-border"));
+/** @jsx jsx */
+
+var contentStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-raised, white)",
+  borderRadius: _constants.INNER_BORDER_RADIUS
+});
+var AIPrism = function AIPrism(_ref) {
+  var _AI_BORDER_PALETTE$co;
+  var children = _ref.children,
+    _ref$isGlowing = _ref.isGlowing,
+    isGlowing = _ref$isGlowing === void 0 ? true : _ref$isGlowing,
+    _ref$isMoving = _ref.isMoving,
+    isMoving = _ref$isMoving === void 0 ? true : _ref$isMoving,
+    isVisible = _ref.isVisible,
+    testId = _ref.testId;
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    _useThemeObserver$col = _useThemeObserver.colorMode,
+    colorMode = _useThemeObserver$col === void 0 ? 'light' : _useThemeObserver$col;
+  return (0, _react.jsx)(_aiGlowingBorder.default, {
+    additionalCss: {
+      animatedSvgContainer: (0, _react.css)({
+        opacity: isVisible ? 1 : 0
+      })
+    },
+    palette: (_AI_BORDER_PALETTE$co = _constants.AI_BORDER_PALETTE[colorMode]) !== null && _AI_BORDER_PALETTE$co !== void 0 ? _AI_BORDER_PALETTE$co : _constants.AI_BORDER_PALETTE.light,
+    isGlowing: isGlowing,
+    isMoving: isMoving,
+    testId: testId
+  }, (0, _react.jsx)("div", {
+    css: contentStyles
+  }, children));
+};
+var _default = exports.default = AIPrism;

package/dist/cjs/view/common/ai-prism/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/messages.js

@@ -13,6 +13,11 @@ export const messages = defineMessages({
     defaultMessage: 'Add account',
     description: 'Allows to add a new account'
   },
+  ai_summarize: {
+    id: 'fabric.linking.ai_summarize',
+    defaultMessage: 'Summarize',
+    description: 'Action to summarize link resource content with AI'
+  },
   assigned_to: {
     id: 'fabric.linking.assigned_to',
     defaultMessage: 'Assigned to {context}',

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.46.0"
+  packageVersion: "26.46.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import AISummaryBlockResolvedView from './resolved';
+import { SmartLinkStatus } from '../../../../../constants';
+
+/**
+ * Represents an AISummaryBlock, designed to summarising link resource
+ * content using AI.
+ * @public
+ * @param {AISummaryBlockProps} AISummaryBlock
+ * @see Block
+ */
+const AISummaryBlock = ({
+  status,
+  testId = 'smart-ai-summary-block',
+  ...props
+}) => {
+  if (status !== SmartLinkStatus.Resolved) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(AISummaryBlockResolvedView, _extends({}, props, {
+    testId: testId
+  }));
+};
+export default AISummaryBlock;

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

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ActionName, SmartLinkAlignment, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems, getActionGroupStyles, renderElementItems } from '../../utils';
+import { messages } from '../../../../../../messages';
+import AiIcon from '../../../../../common/ai-icon';
+const AISummaryBlockResolvedView = props => {
+  const {
+    actions = [],
+    metadata,
+    testId,
+    onActionMenuOpenChange,
+    onAIActionChange,
+    size = SmartLinkSize.Medium
+  } = props;
+  const context = useFlexibleUiContext();
+  const metadataElements = renderElementItems(metadata);
+  const onAIActionClick = useCallback(() => {
+    if (onAIActionChange) {
+      onAIActionChange();
+    }
+  }, [onAIActionChange]);
+  const combinedActions = useMemo(() => {
+    const aiAction = {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.ai_summarize),
+      name: ActionName.CustomAction,
+      onClick: onAIActionClick,
+      testId: `${testId}-ai-summary-action`,
+      icon: /*#__PURE__*/React.createElement(AiIcon, {
+        label: "AiIcon"
+      })
+    };
+    return [aiAction, ...actions];
+  }, [actions, onAIActionClick, testId]);
+  const hasActions = useMemo(() => {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(combinedActions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [combinedActions, context]);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: `${testId}-resolved-view`
+  }), /*#__PURE__*/React.createElement(ElementGroup, {
+    width: SmartLinkWidth.Flexible
+  }, metadataElements), hasActions && /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: combinedActions,
+    appearance: "default"
+  })));
+};
+export default AISummaryBlockResolvedView;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { css } from '@emotion/react';
 import React, { useCallback, useMemo } from 'react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -7,17 +6,7 @@ import { Provider } from '../../../elements';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems } from '../../utils';
-const getActionGroupStyles = size => {
-  if (size === SmartLinkSize.XLarge) {
-    // The biggest height of the action button exceeds the max line-height
-    // of the elements causing the action on the block with x-large size to
-    // get cut at the bottom.
-    return css`
-      max-height: 2rem;
-    `;
-  }
-};
+import { filterActionItems, getActionGroupStyles } from '../../utils';
 const FooterBlockResolvedView = props => {
   const {
     actions,

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

@@ -7,4 +7,5 @@ export { default as CustomBlock } from './block';
 
 // Internal components to be used within @atlaskit/smart-card only.
 export { default as InternalFooterBlock } from './footer-block/resolved';
-export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as RelatedUrlsBlock } from './related-urls-block';
+export { default as AISummaryBlock } from './ai-summary-block';

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -111,6 +111,16 @@ export const isJSXElementNull = children => {
   return Boolean(children.type() === null);
 };
 const isElementOrElementGroup = node => /*#__PURE__*/React.isValidElement(node) && (isFlexibleUiElement(node) || node.type === ElementGroup);
+export const getActionGroupStyles = size => {
+  if (size === SmartLinkSize.XLarge) {
+    // The biggest height of the action button exceeds the max line-height
+    // of the elements causing the action on the block with x-large size to
+    // get cut at the bottom.
+    return css`
+      max-height: 2rem;
+    `;
+  }
+};
 export const filterActionItems = (items = [], context) => {
   return items.filter(item => {
     switch (item.name) {

package/dist/es2019/view/HoverCard/components/views/resolved/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { ActionName, CardDisplay, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
-import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock } from '../../../../FlexibleCard/components/blocks';
+import { ActionName, CardDisplay, ElementName, SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
+import { FooterBlock, MetadataBlock, RelatedUrlsBlock, SnippetBlock, TitleBlock, AISummaryBlock } from '../../../../FlexibleCard/components/blocks';
 import { footerBlockCss, hiddenSnippetStyles, metadataBlockCss } from './styled';
 import FlexibleCard from '../../../../FlexibleCard';
 import { getSimulatedBetterMetadata } from '../../../utils';
@@ -11,6 +11,7 @@ import { messages } from '../../../../../messages';
 import { FormattedMessage } from 'react-intl-next';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getCanBeDatasource } from '../../../../../state/helpers';
+import { useSmartLinkContext } from '../../../../../state';
 export const toFooterActions = (cardActions, onActionClick) => {
   const followAction = {
     hideIcon: true,
@@ -55,7 +56,7 @@ const HoverCardResolvedView = ({
   extensionKey,
   url
 }) => {
-  var _cardState$details;
+  var _cardState$details, _cardState$details2, _cardState$details2$m, _cardState$details2$m2;
   const canBeDatasource = getCanBeDatasource(cardState.details);
   useEffect(() => {
     // Since this hover view is only rendered on resolved status,
@@ -90,6 +91,10 @@ const HoverCardResolvedView = ({
     data: data,
     fallbackElementHeight: snippetHeight.current
   });
+  const {
+    isAdminHubAIEnabled
+  } = useSmartLinkContext();
+  const showAiView = getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries') && isAdminHubAIEnabled && ((_cardState$details2 = cardState.details) === null || _cardState$details2 === void 0 ? void 0 : (_cardState$details2$m = _cardState$details2.meta) === null || _cardState$details2$m === void 0 ? void 0 : (_cardState$details2$m2 = _cardState$details2$m.supportedFeatures) === null || _cardState$details2$m2 === void 0 ? void 0 : _cardState$details2$m2.includes('AISummary'));
   return /*#__PURE__*/React.createElement(FlexibleCard, flexibleCardProps, imagePreview, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockProps, {
     metadataPosition: SmartLinkPosition.Top
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
@@ -111,7 +116,12 @@ const HoverCardResolvedView = ({
   }), getBooleanFF('platform.linking-platform.smart-card.enable-hover-card-related-urls') && /*#__PURE__*/React.createElement(RelatedUrlsBlock, {
     url: url,
     size: SmartLinkSize.Small
-  }), /*#__PURE__*/React.createElement(FooterBlock, {
+  }), showAiView ? /*#__PURE__*/React.createElement(AISummaryBlock, {
+    metadata: [{
+      name: ElementName.Provider
+    }],
+    actions: footerActions
+  }) : /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss

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.46.0",
+  packageVersion: "26.46.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');