@atlaskit/smart-card 26.52.2 → 26.52.4

package/dist/cjs/view/FlexibleCard/components/actions/index.js

@@ -4,14 +4,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DeleteAction = exports.CustomAction = void 0;
+exports.CustomAction = void 0;
+Object.defineProperty(exports, "DeleteAction", {
+  enumerable: true,
+  get: function get() {
+    return _deleteAction.default;
+  }
+});
 Object.defineProperty(exports, "DownloadAction", {
   enumerable: true,
   get: function get() {
     return _downloadAction.default;
   }
 });
-exports.EditAction = void 0;
+Object.defineProperty(exports, "EditAction", {
+  enumerable: true,
+  get: function get() {
+    return _editAction.default;
+  }
+});
 Object.defineProperty(exports, "FollowAction", {
   enumerable: true,
   get: function get() {
@@ -30,19 +41,8 @@ var _utils = require("./utils");
 var _followAction = _interopRequireDefault(require("./follow-action"));
 var _previewAction = _interopRequireDefault(require("./preview-action"));
 var _downloadAction = _interopRequireDefault(require("./download-action"));
-/**
- * Creates a DeleteAction component. Accepts default ActionProps, but defaults
- * the icon to a cross icon.
- * @see Action
- */
-var DeleteAction = exports.DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
-/**
- * Creates a EditAction component. Accepts default ActionProps, but defaults
- * the icon to an edit (pencil) icon.
- * @see Action
- */
-var EditAction = exports.EditAction = (0, _utils.createUIAction)(_constants.ActionName.EditAction);
-
+var _editAction = _interopRequireDefault(require("./edit-action"));
+var _deleteAction = _interopRequireDefault(require("./delete-action"));
 /**
  * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
  * to the text 'View' inside the button.

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

@@ -20,6 +20,7 @@ var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _useInvokeClientAction = _interopRequireDefault(require("../../../../../state/hooks/use-invoke-client-action"));
 var _utils = require("../../utils");
 var _action = _interopRequireDefault(require("../action"));
+var _previewIcon = _interopRequireDefault(require("./preview-icon"));
 var _excluded = ["onClick"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -70,14 +71,17 @@ var PreviewAction = function PreviewAction(_ref) {
       onClickCallback();
     }
   }, [analytics, data, invoke, onClickCallback]);
+  var isStackItem = props.as === 'stack-item';
+  var Icon = isStackItem ? _previewIcon.default : _vidFullScreenOn.default;
+  var tooltipMessage = isStackItem ? _messages.messages.preview_description : _messages.messages.preview_improved;
   return data ? /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
     content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved),
-    icon: /*#__PURE__*/_react.default.createElement(_vidFullScreenOn.default, {
+    icon: /*#__PURE__*/_react.default.createElement(Icon, {
       label: "Open preview"
     }),
     onClick: onClick,
     testId: "smart-action-preview-action",
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, tooltipMessage)
   }, data, props)) : null;
 };
 var _default = exports.default = PreviewAction;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireDefault(require("react"));
+var iconStyles = (0, _primitives.xcss)({
+  transform: 'rotate(-45deg)'
+});
+var PreviewIcon = function PreviewIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconStyles
+  }, /*#__PURE__*/_react.default.createElement(_expand.default, props));
+};
+var _default = exports.default = PreviewIcon;

package/dist/cjs/view/FlexibleCard/components/actions/utils.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _action = _interopRequireDefault(require("./action"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("../../../../messages");
-var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
-var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
 var _viewAction = _interopRequireDefault(require("./action/view-action"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _actionMappings;
@@ -27,26 +25,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.CustomAction, {
   component: _action.default,
   props: {}
-}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.DeleteAction, {
-  component: _action.default,
-  props: {
-    testId: 'smart-action-delete-action',
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete),
-    icon: /*#__PURE__*/_react.default.createElement(_cross.default, {
-      label: "Delete"
-    }),
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
-  }
-}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.EditAction, {
-  component: _action.default,
-  props: {
-    testId: 'smart-action-edit-action',
-    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit),
-    icon: /*#__PURE__*/_react.default.createElement(_edit.default, {
-      label: "Edit"
-    }),
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.edit)
-  }
 }), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.ViewAction, {
   component: _viewAction.default,
   props: {

package/dist/cjs/view/FlexibleCard/components/blocks/action-block/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireWildcard(require("react"));
+var _constants = require("../../../../../constants");
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+var Actions = _interopRequireWildcard(require("../../actions"));
+var _utils = require("../../utils");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// We have to find a better way to ignore container padding
+// This has become more and more of a common use case.
+var ignoreContainerPaddingStyles = (0, _primitives.xcss)({
+  marginLeft: 'calc(var(--container-gap-left) * -1)',
+  marginRight: 'calc(var(--container-gap-right) * -1)'
+});
+var ActionBlock = function ActionBlock(_ref) {
+  var blockRef = _ref.blockRef,
+    onClickCallback = _ref.onClick,
+    size = _ref.size,
+    sort = _ref.sort,
+    spaceInline = _ref.spaceInline,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-block-action' : _ref$testId;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
+  var padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? (0, _utils.getPrimitivesPaddingSpaceBySize)((ui === null || ui === void 0 ? void 0 : ui.size) || _constants.SmartLinkSize.Medium) : undefined;
+  var actions = (0, _react.useMemo)(function () {
+    if (!(context !== null && context !== void 0 && context.actions)) {
+      return;
+    }
+    var arr = Object.keys(context.actions);
+    if (sort) {
+      arr.sort(sort);
+    }
+    return arr.map(function (name) {
+      var Action = Actions[name];
+      return Action ? /*#__PURE__*/_react.default.createElement(Action, {
+        as: "stack-item",
+        spaceInline: spaceInline,
+        key: name,
+        onClick: function onClick() {
+          return onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(name);
+        },
+        size: size
+        // Remove url once ViewAction is retired.
+        // This seems to be a typescript workaround
+        // because ViewAction marks it as required,
+        // which does not reflect actual implementation as the url
+        // came from data context and not all actions require url.
+        // https://product-fabric.atlassian.net/browse/EDM-9547
+        ,
+        url: "",
+        xcss: (0, _primitives.xcss)({
+          paddingInline: padding
+        })
+      }) : null;
+    });
+  }, [context === null || context === void 0 ? void 0 : context.actions, onClickCallback, padding, size, sort, spaceInline]);
+  return actions ? /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
+    grow: "fill",
+    xcss: ignoreContainerPaddingStyles,
+    ref: blockRef,
+    testId: testId
+  }, actions) : null;
+};
+var _default = exports.default = ActionBlock;

package/dist/cjs/view/FlexibleCard/components/blocks/action-block/types.js

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

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

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "AISummaryBlock", {
     return _aiSummaryBlock.default;
   }
 });
+Object.defineProperty(exports, "ActionBlock", {
+  enumerable: true,
+  get: function get() {
+    return _actionBlock.default;
+  }
+});
 Object.defineProperty(exports, "CustomBlock", {
   enumerable: true,
   get: function get() {
@@ -66,4 +72,5 @@ var _titleBlock = _interopRequireDefault(require("./title-block"));
 var _block = _interopRequireDefault(require("./block"));
 var _resolved = _interopRequireDefault(require("./footer-block/resolved"));
 var _relatedUrlsBlock = _interopRequireDefault(require("./related-urls-block"));
-var _aiSummaryBlock = _interopRequireDefault(require("./ai-summary-block"));
+var _aiSummaryBlock = _interopRequireDefault(require("./ai-summary-block"));
+var _actionBlock = _interopRequireDefault(require("./action-block"));

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

@@ -40,6 +40,12 @@ var getDirectionStyles = function getDirectionStyles(direction) {
       });
   }
 };
+
+/**
+ * Get gap size between elements inside a block
+ * Equivalent version for DS primitives space token is getPrimitivesInlineSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
 var getGapSize = exports.getGapSize = function getGapSize(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:

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

@@ -17,11 +17,15 @@ var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _utils = require("../../../../state/flexible-ui-context/utils");
 var _colors = require("@atlaskit/theme/colors");
 var _reactMagneticDi = require("react-magnetic-di");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid ", ";\n  border-radius: ", ";\n  margin: ", ";\n"])), "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-border-radius-200, 8px)", "var(--ds-space-025, 2px)");
+var elevationStyles = (0, _react2.css)({
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  margin: "var(--ds-space-025, 2px)"
+});
 var getGap = function getGap(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -35,6 +39,12 @@ var getGap = function getGap(size) {
       return '.25rem';
   }
 };
+
+/**
+ * Get container padding based on smart link size
+ * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
 var getPadding = function getPadding(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -48,13 +58,24 @@ var getPadding = function getPadding(size) {
       return '.5rem';
   }
 };
-var clickableContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+var clickableContainerStyles = (0, _react2.css)({
+  'a, button, .has-action': {
+    position: 'relative',
+    zIndex: 1
+  }
+});
 var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var previewOnLeft = childrenOptions.previewOnLeft,
     previewOnRight = childrenOptions.previewOnRight;
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    // Set variables for PreviewBlock to use.\n    --container-padding: ", ";\n    --container-gap-left: ", ";\n    --container-gap-right: ", ";\n    --preview-block-width: 30%;\n\n    padding: ", ";\n    ", "\n    ", "\n  "])), padding, previewOnLeft ? gap : padding, previewOnRight ? gap : padding, padding, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+  return (0, _react2.css)({
+    '--container-padding': padding,
+    '--container-gap-left': previewOnLeft ? gap : padding,
+    '--container-gap-right': previewOnRight ? gap : padding,
+    '--preview-block-width': '30%',
+    padding: padding
+  }, previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '', previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
 };
 var getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
@@ -77,7 +98,7 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 var getContainerStyles = exports.getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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 : '');
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.default.Children.map(children, function (child) {

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
+exports.sizeToButtonSpacing = exports.openEmbedModalWithFlexibleUiIcon = exports.hasWhiteSpace = exports.getTruncateStyles = exports.getPrimitivesPaddingSpaceBySize = exports.getPrimitivesInlineSpaceBySize = exports.getMaxLines = exports.getMaxLineHeight = exports.getLinkSizeStyles = exports.getLinkLineHeight = exports.getIconWidth = exports.getIconSizeStyles = exports.getFormattedMessageAsString = exports.getFormattedMessage = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -16,7 +16,7 @@ var _constants = require("../../../constants");
 var _icon = _interopRequireDefault(require("./elements/icon"));
 var _utils = require("../../EmbedModal/utils");
 var _excluded = ["linkIcon"];
-var _sizeToButtonSpacing, _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _sizeToButtonSpacing, _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var sizeToButtonSpacing = exports.sizeToButtonSpacing = (_sizeToButtonSpacing = {}, (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Small, 'none'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Medium, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.Large, 'compact'), (0, _defineProperty2.default)(_sizeToButtonSpacing, _constants.SmartLinkSize.XLarge, 'default'), _sizeToButtonSpacing);
@@ -36,11 +36,18 @@ var getFormattedMessageAsString = exports.getFormattedMessageAsString = function
   }) : '';
 };
 var getIconDimensionStyles = function getIconDimensionStyles(value) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  width: ", ";\n  min-width: ", ";\n  max-width: ", ";\n"])), value, value, value, value, value, value);
+  return (0, _react2.css)({
+    height: value,
+    minHeight: value,
+    maxHeight: value,
+    width: value,
+    minWidth: value,
+    maxWidth: value
+  });
 };
 var getIconSizeStyles = exports.getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
 };
 var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
   switch (size) {
@@ -69,13 +76,28 @@ var getLinkLineHeight = exports.getLinkLineHeight = function getLinkLineHeight(s
 var getLinkSizeStyles = exports.getLinkSizeStyles = function getLinkSizeStyles(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 1.25rem;\n        font-weight: 400;\n        letter-spacing: -0.008em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)({
+        fontSize: '1.25rem',
+        fontWeight: 400,
+        letterSpacing: '-0.008em',
+        lineHeight: getLinkLineHeight(size)
+      });
     case _constants.SmartLinkSize.Large:
     case _constants.SmartLinkSize.Medium:
-      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.875rem;\n        font-weight: 400;\n        letter-spacing: -0.003em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)({
+        fontSize: '0.875rem',
+        fontWeight: 400,
+        letterSpacing: '-0.003em',
+        lineHeight: getLinkLineHeight(size)
+      });
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        font-size: 0.75rem;\n        font-weight: 400;\n        letter-spacing: 0em;\n        line-height: ", ";\n      "])), getLinkLineHeight(size));
+      return (0, _react2.css)({
+        fontSize: '0.75rem',
+        fontWeight: 400,
+        letterSpacing: '0em',
+        lineHeight: getLinkLineHeight(size)
+      });
   }
 };
 var getMaxLineHeight = exports.getMaxLineHeight = function getMaxLineHeight(size) {
@@ -100,10 +122,56 @@ var getMaxLines = exports.getMaxLines = function getMaxLines(value, defaultValue
   }
   return value;
 };
+
+/**
+ * A space between element based on smart link size
+ * To replace blocks/utils.tsz getGapSize() with space token for primitives
+ */
+var getPrimitivesInlineSpaceBySize = exports.getPrimitivesInlineSpaceBySize = function getPrimitivesInlineSpaceBySize(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return 'space.250';
+    case _constants.SmartLinkSize.Large:
+      return 'space.200';
+    case _constants.SmartLinkSize.Medium:
+      return 'space.100';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 'space.050';
+  }
+};
+
+/**
+ * Get container padding based on smart link size
+ * To replace container/index.tsx getPadding() with space token for primitives
+ */
+var getPrimitivesPaddingSpaceBySize = exports.getPrimitivesPaddingSpaceBySize = function getPrimitivesPaddingSpaceBySize(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return 'space.300';
+    case _constants.SmartLinkSize.Large:
+      return 'space.250';
+    case _constants.SmartLinkSize.Medium:
+      return 'space.200';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return 'space.100';
+  }
+};
 var getTruncateStyles = exports.getTruncateStyles = function getTruncateStyles(maxLines) {
   var lineHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '1rem';
   var wordBreak = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'break-word';
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: ", ";\n    -webkit-line-clamp: ", ";\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: calc(", " * ", ");\n    }\n  "])), wordBreak, maxLines, maxLines, lineHeight);
+  return (0, _react2.css)({
+    display: '-webkit-box',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    wordBreak: wordBreak,
+    WebkitLineClamp: maxLines,
+    WebkitBoxOrient: 'vertical',
+    '@supports not (-webkit-line-clamp: 1)': {
+      maxHeight: "calc(".concat(maxLines, " * ").concat(lineHeight, ")")
+    }
+  });
 };
 var hasWhiteSpace = exports.hasWhiteSpace = function hasWhiteSpace(str) {
   return str.search(/\s/) >= 0;

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

@@ -192,6 +192,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     actions: footerActions,
     size: _constants.SmartLinkSize.Large,
     overrideCss: _styled.footerBlockCss
+  }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/_react.default.createElement(_blocks.ActionBlock, {
+    spaceInline: "space.150"
   }));
 };
 var _default = exports.default = HoverCardResolvedView;

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.52.2",
+  packageVersion: "26.52.4",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/extractors/flexible/actions/index.js

@@ -4,9 +4,9 @@ import { extractPreviewAction } from './extract-preview-action';
 import extractFollowAction from './extract-follow-action';
 const extractActions = (response, data, actionOptions, id) => {
   const action = {
-    [ActionName.PreviewAction]: extractPreviewAction(response, actionOptions),
     [ActionName.DownloadAction]: extractDownloadAction(data, actionOptions),
-    [ActionName.FollowAction]: extractFollowAction(response, actionOptions, id)
+    [ActionName.FollowAction]: extractFollowAction(response, actionOptions, id),
+    [ActionName.PreviewAction]: extractPreviewAction(response, actionOptions)
   };
   return Object.values(action).some(value => Boolean(value)) ? action : undefined;
 };

package/dist/es2019/messages.js

@@ -255,6 +255,11 @@ export const messages = defineMessages({
     defaultMessage: 'Owned by {context}',
     description: 'Indicates the person or entity that owns or maintains the resource.'
   },
+  preview_description: {
+    id: 'fabric.linking.preview_description.nonfinal',
+    defaultMessage: 'Open a full screen preview of this link',
+    description: 'Description on what Preview does'
+  },
   preview_improved: {
     id: 'fabric.linking.preview_improved',
     defaultMessage: 'Open preview',

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

@@ -9,13 +9,13 @@ export class AISummaryService {
       status: 'ready'
     });
     _defineProperty(this, "subscribedStateSetters", new Set());
-    _defineProperty(this, "fetchStream", async summaryStyle => {
+    _defineProperty(this, "fetchStream", async () => {
       const payload = {
         recipient_agent_named_id: 'summary_agent',
         agent_input_context: {
           content_url: this.url,
           content_ari: this.ari,
-          summary_style: summaryStyle,
+          prompt_id: 'smart_links',
           summary_output_mimetype: 'text/markdown'
         }
       };
@@ -54,7 +54,7 @@ export class AISummaryService {
     this.onSuccess = props.onSuccess;
     this.onError = props.onError;
   }
-  async summariseUrl(summaryStyle = 'medium') {
+  async summariseUrl() {
     this.state = {
       status: 'loading',
       content: ''
@@ -66,7 +66,7 @@ export class AISummaryService {
     try {
       var _this$onStart, _this$onSuccess;
       (_this$onStart = this.onStart) === null || _this$onStart === void 0 ? void 0 : _this$onStart.call(this, id);
-      const stream = await this.fetchStream(summaryStyle);
+      const stream = await this.fetchStream();
       let bufferContent = '';
       for await (const chunk of stream) {
         if (chunk.type === 'ANSWER_PART') {

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

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -14,17 +14,32 @@ const getIconWidth = size => {
       return '1rem';
   }
 };
-const getIconStyles = (size, isDisabled) => css`
-  color: ${isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"};
-  ${getIconSizeStyles(getIconWidth(size))};
-`;
+const getIconStyles = isDisabled => css({
+  color: isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"
+});
+const backgroundStyles = css({
+  backgroundColor: "var(--ds-background-brand-subtlest, #E9F2FF)",
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  color: "var(--ds-icon-brand, #0C66E4)",
+  display: 'inline-block',
+  lineHeight: 0,
+  padding: "var(--ds-space-025, 2px)",
+  'span,svg,img': {
+    lineHeight: 0
+  },
+  // Use !important to win over `style` prop specificity in DS Spinner. :(
+  circle: {
+    stroke: `${"var(--ds-icon-brand, #0C66E4)"} !important`
+  }
+});
 const ActionIcon = ({
   size,
   testId,
   icon,
-  isDisabled
+  isDisabled,
+  showBackground
 }) => jsx("span", {
-  css: getIconStyles(size, isDisabled),
+  css: [getIconStyles(isDisabled), getIconSizeStyles(getIconWidth(size)), showBackground && backgroundStyles],
   "data-testid": `${testId}-icon`
 }, icon);
 export default ActionIcon;