@atlaskit/smart-card 26.22.1 → 26.23.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 26.23.1
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
+## 26.23.0
+
+### Minor Changes
+
+- [`253d4604c50`](https://bitbucket.org/atlassian/atlassian-frontend/commits/253d4604c50) - We are testing support for allow-storage-access-by-user-activation sandbox permission on untrusted embeds behind the "platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation" feature flag. If this is successful it will always be enabled for unstrusted embeds in a future release.
+
+### Patch Changes
+
+- [`f85b3744521`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f85b3744521) - Add async action base component to flexible smart links (internal)
+
 ## 26.22.1
 
 ### Patch Changes

package/dist/cjs/utils/actions/create-invoke-request.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 createInvokeRequest = function createInvokeRequest(request, payload) {
+  return {
+    action: _objectSpread(_objectSpread({}, request.action), {}, {
+      payload: payload
+    }),
+    providerKey: request.providerKey
+  };
+};
+var _default = createInvokeRequest;
+exports.default = _default;

package/dist/cjs/utils/analytics/analytics.js

@@ -21,7 +21,7 @@ exports.ANALYTICS_CHANNEL = ANALYTICS_CHANNEL;
 var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.22.1"
+  packageVersion: "26.23.1"
 };
 exports.context = context;
 var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {

package/dist/cjs/utils/index.js

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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; }
 var isCardWithData = function isCardWithData(props) {
@@ -338,7 +339,15 @@ var typeToIcon = {
   }]
 };
 var getIframeSandboxAttribute = function getIframeSandboxAttribute(isTrusted) {
-  return isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+  if (isTrusted) {
+    return undefined;
+  }
+  var sandboxPermissions = 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+  var allowStorageAccess = 'allow-storage-access-by-user-activation';
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation')) {
+    return "".concat(sandboxPermissions, " ").concat(allowStorageAccess);
+  }
+  return sandboxPermissions;
 };
 exports.getIframeSandboxAttribute = getIframeSandboxAttribute;
 var handleOnClick = function handleOnClick(handler) {

package/dist/cjs/view/BlockCard/components/Emoji.js

@@ -19,7 +19,7 @@ var Emoji = function Emoji(_ref) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      marginTop: '-2px'
+      marginTop: "var(--ds-space-negative-025, -2px)"
     }
   }, emoji);
 };

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -66,7 +66,7 @@ var height = function height(_ref5) {
   return inheritDimensions ? 'height: 100%;' : "height: ".concat((0, _utils.gs)(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
+  return "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
 var visibleStyles = "\n  ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border-input, ".concat(colors.N40, ")"), ";\n           background-color: ", (0, _components.themed)({
   light: "var(--ds-surface-raised, white)",

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

@@ -10,6 +10,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _button = require("@atlaskit/button");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
@@ -34,6 +36,7 @@ var ActionButton = function ActionButton(_ref) {
     content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     onClick = _ref.onClick,
     overrideCss = _ref.overrideCss,
     size = _ref.size,
@@ -53,7 +56,15 @@ var ActionButton = function ActionButton(_ref) {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, (0, _react2.jsx)(_customThemeButton.default, {
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.follow-button') ? (0, _react2.jsx)(_button.LoadingButton, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onButtonClick(onClick),
+    spacing: _utils.sizeToButtonSpacing[size],
+    testId: testId
+  }, content) : (0, _react2.jsx)(_customThemeButton.default, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

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

@@ -12,11 +12,13 @@ var ActionDropdownItem = function ActionDropdownItem(_ref) {
   var content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     elemAfter: iconAfter,
     elemBefore: iconBefore,
+    isDisabled: isLoading,
     onClick: (0, _utils.handleOnClick)(onClick),
     testId: testId
   }, content);

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

@@ -25,6 +25,8 @@ var Action = function Action(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
     content = _ref.content,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _constants.SmartLinkSize.Medium : _ref$size,
@@ -51,6 +53,7 @@ var Action = function Action(_ref) {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       testId: testId
     });
@@ -60,6 +63,7 @@ var Action = function Action(_ref) {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       overrideCss: overrideCss,
       size: size,

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _useInvoke = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke"));
+var _useResolve = _interopRequireDefault(require("../../../../../../state/hooks/use-resolve"));
+var _createInvokeRequest = _interopRequireDefault(require("../../../../../../utils/actions/create-invoke-request"));
+var _index = _interopRequireDefault(require("../index"));
+var _excluded = ["action", "onClick"];
+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; }
+var ServerAction = function ServerAction(_ref) {
+  var action = _ref.action,
+    onClick = _ref.onClick,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var invoke = (0, _useInvoke.default)();
+  var reload = (0, _useResolve.default)();
+  var handleClick = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var request;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!action) {
+            _context.next = 16;
+            break;
+          }
+          _context.prev = 1;
+          setIsLoading(true);
+          request = (0, _createInvokeRequest.default)(action);
+          _context.next = 6;
+          return invoke(request);
+        case 6:
+          setIsLoading(false);
+          if (!(action.reload && action.reload.url)) {
+            _context.next = 10;
+            break;
+          }
+          _context.next = 10;
+          return reload(action.reload.url, true, undefined, action.reload.id);
+        case 10:
+          if (onClick) {
+            onClick();
+          }
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](1);
+          setIsLoading(false);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 13]]);
+  })), [action, invoke, onClick, reload]);
+  return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, props, {
+    isLoading: isLoading,
+    onClick: handleClick
+  }));
+};
+var _default = ServerAction;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/actions/action/server-action/types.js

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

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -12,7 +12,7 @@ var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject =
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
 exports.triggerButtonStyles = triggerButtonStyles;
-var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
+var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: ", "\n      ", "\n      ", " -1px;\n  }\n"])), "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-050, -4px)");
 exports.triggerLozengeStyles = triggerLozengeStyles;
 var dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
 exports.dropdownItemGroupStyles = dropdownItemGroupStyles;

package/dist/cjs/view/InlineCard/Icon.js

@@ -21,7 +21,7 @@ var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _tagged
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
 exports.AKIconWrapper = AKIconWrapper;
 var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;

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

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

package/dist/cjs/view/RedesignedInlineCard/Icon.js

@@ -21,7 +21,7 @@ var Icon = _styled.default.img(_templateObject || (_templateObject = (0, _tagged
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 exports.Icon = Icon;
-var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+var AKIconWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
 exports.AKIconWrapper = AKIconWrapper;
 var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;

package/dist/cjs/view/RedesignedInlineCard/styled.js

@@ -14,7 +14,6 @@ var LINK_COLOR_DARK = '#4794FF';
 
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
 var IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 2px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
 exports.IconStyledButton = IconStyledButton;
 var NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), (0, _components.themed)({

package/dist/es2019/utils/actions/create-invoke-request.js

@@ -0,0 +1,8 @@
+const createInvokeRequest = (request, payload) => ({
+  action: {
+    ...request.action,
+    payload
+  },
+  providerKey: request.providerKey
+});
+export default createInvokeRequest;

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

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

package/dist/es2019/utils/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import Loadable from 'react-loadable';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export const isCardWithData = props => !!props.data;
 export const isSpecialEvent = evt => evt.isDefaultPrevented() && (isIframe() || isSpecialKey(evt) || isSpecialClick(evt));
 export const isIframe = () => window.parent !== parent;
@@ -98,7 +99,17 @@ const typeToIcon = {
   'application/sketch': ['Sketch', () => import('@atlaskit/icon-file-type/glyph/sketch/16')],
   folder: ['Folder', () => import('@atlaskit/icon-file-type/glyph/folder/16')]
 };
-export const getIframeSandboxAttribute = isTrusted => isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+export const getIframeSandboxAttribute = isTrusted => {
+  if (isTrusted) {
+    return undefined;
+  }
+  const sandboxPermissions = 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+  const allowStorageAccess = 'allow-storage-access-by-user-activation';
+  if (getBooleanFF('platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation')) {
+    return `${sandboxPermissions} ${allowStorageAccess}`;
+  }
+  return sandboxPermissions;
+};
 export const handleOnClick = handler => e => {
   e.preventDefault();
   e.stopPropagation();

package/dist/es2019/view/BlockCard/components/Emoji.js

@@ -12,7 +12,7 @@ export const Emoji = ({
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      marginTop: '-2px'
+      marginTop: "var(--ds-space-negative-025, -2px)"
     }
   }, emoji);
 };

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -113,7 +113,7 @@ const wrapperStyles = props => `
     position: absolute;
     width: calc(100% + ${"var(--ds-space-200, 16px)"});
     height: calc(100% + ${"var(--ds-space-100, 8px)"});
-    left: calc(-1 * ${"var(--ds-space-100, 8px)"});
+    left: ${"var(--ds-space-negative-100, -8px)"};
     ${getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : `background: transparent;
            ${borderRadius}`}
   }

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

@@ -2,6 +2,8 @@
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { LoadingButton } from '@atlaskit/button';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../../constants';
 import { sizeToButtonSpacing } from '../../../utils';
@@ -48,6 +50,7 @@ const ActionButton = ({
   content,
   iconAfter,
   iconBefore,
+  isLoading,
   onClick,
   overrideCss,
   size,
@@ -66,7 +69,15 @@ const ActionButton = ({
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: `${testId}-tooltip`
-  }, jsx(Button, {
+  }, getBooleanFF('platform.linking-platform.smart-card.follow-button') ? jsx(LoadingButton, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId
+  }, content) : jsx(Button, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

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

@@ -5,11 +5,13 @@ const ActionDropdownItem = ({
   content,
   iconAfter,
   iconBefore,
+  isLoading,
   onClick,
   testId
 }) => /*#__PURE__*/React.createElement(DropdownItem, {
   elemAfter: iconAfter,
   elemBefore: iconBefore,
+  isDisabled: isLoading,
   onClick: handleOnClick(onClick),
   testId: testId
 }, content);

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

@@ -17,6 +17,7 @@ import ActionIcon from './action-icon';
 const Action = ({
   appearance = 'subtle',
   content,
+  isLoading = false,
   onClick,
   size = SmartLinkSize.Medium,
   testId = 'smart-action',
@@ -41,6 +42,7 @@ const Action = ({
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       testId: testId
     });
@@ -50,6 +52,7 @@ const Action = ({
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       overrideCss: overrideCss,
       size: size,

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

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import useInvoke from '../../../../../../state/hooks/use-invoke';
+import useResolve from '../../../../../../state/hooks/use-resolve';
+import createInvokeRequest from '../../../../../../utils/actions/create-invoke-request';
+import Action from '../index';
+const ServerAction = ({
+  action,
+  onClick,
+  ...props
+}) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const invoke = useInvoke();
+  const reload = useResolve();
+  const handleClick = useCallback(async () => {
+    if (action) {
+      try {
+        setIsLoading(true);
+        const request = createInvokeRequest(action);
+        await invoke(request);
+        setIsLoading(false);
+        if (action.reload && action.reload.url) {
+          await reload(action.reload.url, true, undefined, action.reload.id);
+        }
+        if (onClick) {
+          onClick();
+        }
+      } catch (err) {
+        setIsLoading(false);
+      }
+    }
+  }, [action, invoke, onClick, reload]);
+  return /*#__PURE__*/React.createElement(Action, _extends({}, props, {
+    isLoading: isLoading,
+    onClick: handleClick
+  }));
+};
+export default ServerAction;

package/dist/es2019/view/FlexibleCard/components/actions/action/server-action/types.js

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

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -31,9 +31,9 @@ export const triggerLozengeStyles = css`
   display: flex;
 
   span[role='img'] {
-    margin: calc(-1 * ${"var(--ds-space-050, 4px)"})
-      calc(-1 * ${"var(--ds-space-100, 8px)"})
-      calc(-1 * ${"var(--ds-space-050, 4px)"}) -1px;
+    margin: ${"var(--ds-space-negative-050, -4px)"}
+      ${"var(--ds-space-negative-100, -8px)"}
+      ${"var(--ds-space-negative-050, -4px)"} -1px;
   }
 `;
 export const dropdownItemGroupStyles = css`

package/dist/es2019/view/InlineCard/Icon.js

@@ -23,7 +23,7 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
+  margin-right: ${"var(--ds-space-negative-025, -2px)"};
 `;
 export const Shimmer = ({
   testId

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.22.1",
+  packageVersion: "26.23.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

package/dist/es2019/view/RedesignedInlineCard/Icon.js

@@ -23,7 +23,7 @@ export const Icon = styled.img`
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
 export const AKIconWrapper = styled.span`
-  margin-right: calc(-1 * ${"var(--ds-space-025, 2px)"});
+  margin-right: ${"var(--ds-space-negative-025, -2px)"};
 `;
 export const Shimmer = ({
   testId

package/dist/es2019/view/RedesignedInlineCard/styled.js

@@ -5,7 +5,6 @@ const LINK_COLOR_DARK = '#4794FF';
 
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
 export const IconStyledButton = styled.span`
   &&& {
     text-align: initial;

package/dist/esm/utils/actions/create-invoke-request.js

@@ -0,0 +1,12 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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 createInvokeRequest = function createInvokeRequest(request, payload) {
+  return {
+    action: _objectSpread(_objectSpread({}, request.action), {}, {
+      payload: payload
+    }),
+    providerKey: request.providerKey
+  };
+};
+export default createInvokeRequest;

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

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

package/dist/esm/utils/index.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Loadable from 'react-loadable';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var isCardWithData = function isCardWithData(props) {
   return !!props.data;
 };
@@ -221,7 +222,15 @@ var typeToIcon = {
   }]
 };
 export var getIframeSandboxAttribute = function getIframeSandboxAttribute(isTrusted) {
-  return isTrusted ? undefined : 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+  if (isTrusted) {
+    return undefined;
+  }
+  var sandboxPermissions = 'allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts';
+  var allowStorageAccess = 'allow-storage-access-by-user-activation';
+  if (getBooleanFF('platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation')) {
+    return "".concat(sandboxPermissions, " ").concat(allowStorageAccess);
+  }
+  return sandboxPermissions;
 };
 export var handleOnClick = function handleOnClick(handler) {
   return function (e) {

package/dist/esm/view/BlockCard/components/Emoji.js

@@ -11,7 +11,7 @@ export var Emoji = function Emoji(_ref) {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
-      marginTop: '-2px'
+      marginTop: "var(--ds-space-negative-025, -2px)"
     }
   }, emoji);
 };

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

@@ -53,7 +53,7 @@ var height = function height(_ref5) {
   return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
 };
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: calc(-1 * ", "var(--ds-space-100, 8px)", ");\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
+  return "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getInteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat(fontFamily(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ", "var(--ds-space-200, 16px)", ");\n    height: calc(100% + ", "var(--ds-space-100, 8px)", ");\n    left: ", "var(--ds-space-negative-100, -8px)", ";\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? wrapperBorderRadius : "background: transparent;\n           ".concat(borderRadius), "\n  }\n");
 };
 var visibleStyles = "\n  ".concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "" : "background-color: ".concat("var(--ds-background-neutral-subtle, ".concat(colors.N30, ")"), ";"), "\n\n  &:after {\n    ").concat(getBooleanFF('platform.linking-platform.smart-card.show-smart-links-refreshed-design') ? "border: 1px solid ".concat("var(--ds-border-input, ".concat(N40, ")"), ";\n           background-color: ", themed({
   light: "var(--ds-surface-raised, white)",

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

@@ -4,6 +4,8 @@ var _templateObject, _templateObject2;
 import React, { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { LoadingButton } from '@atlaskit/button';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../../constants';
 import { sizeToButtonSpacing } from '../../../utils';
@@ -24,6 +26,7 @@ var ActionButton = function ActionButton(_ref) {
     content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     onClick = _ref.onClick,
     overrideCss = _ref.overrideCss,
     size = _ref.size,
@@ -43,7 +46,15 @@ var ActionButton = function ActionButton(_ref) {
     content: tooltipMessage,
     hideTooltipOnClick: true,
     testId: "".concat(testId, "-tooltip")
-  }, jsx(Button, {
+  }, getBooleanFF('platform.linking-platform.smart-card.follow-button') ? jsx(LoadingButton, {
+    appearance: appearance,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onButtonClick(onClick),
+    spacing: sizeToButtonSpacing[size],
+    testId: testId
+  }, content) : jsx(Button, {
     appearance: appearance,
     iconAfter: iconAfter,
     iconBefore: iconBefore,

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

@@ -5,11 +5,13 @@ var ActionDropdownItem = function ActionDropdownItem(_ref) {
   var content = _ref.content,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
+    isLoading = _ref.isLoading,
     onClick = _ref.onClick,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(DropdownItem, {
     elemAfter: iconAfter,
     elemBefore: iconBefore,
+    isDisabled: isLoading,
     onClick: handleOnClick(onClick),
     testId: testId
   }, content);

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

@@ -18,6 +18,8 @@ var Action = function Action(_ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
     content = _ref.content,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     onClick = _ref.onClick,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -44,6 +46,7 @@ var Action = function Action(_ref) {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       testId: testId
     });
@@ -53,6 +56,7 @@ var Action = function Action(_ref) {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
+      isLoading: isLoading,
       onClick: onClick,
       overrideCss: overrideCss,
       size: size,

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

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["action", "onClick"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useCallback, useState } from 'react';
+import useInvoke from '../../../../../../state/hooks/use-invoke';
+import useResolve from '../../../../../../state/hooks/use-resolve';
+import createInvokeRequest from '../../../../../../utils/actions/create-invoke-request';
+import Action from '../index';
+var ServerAction = function ServerAction(_ref) {
+  var action = _ref.action,
+    onClick = _ref.onClick,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var invoke = useInvoke();
+  var reload = useResolve();
+  var handleClick = useCallback( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var request;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!action) {
+            _context.next = 16;
+            break;
+          }
+          _context.prev = 1;
+          setIsLoading(true);
+          request = createInvokeRequest(action);
+          _context.next = 6;
+          return invoke(request);
+        case 6:
+          setIsLoading(false);
+          if (!(action.reload && action.reload.url)) {
+            _context.next = 10;
+            break;
+          }
+          _context.next = 10;
+          return reload(action.reload.url, true, undefined, action.reload.id);
+        case 10:
+          if (onClick) {
+            onClick();
+          }
+          _context.next = 16;
+          break;
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](1);
+          setIsLoading(false);
+        case 16:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[1, 13]]);
+  })), [action, invoke, onClick, reload]);
+  return /*#__PURE__*/React.createElement(Action, _extends({}, props, {
+    isLoading: isLoading,
+    onClick: handleClick
+  }));
+};
+export default ServerAction;

package/dist/esm/view/FlexibleCard/components/actions/action/server-action/types.js

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

package/dist/esm/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -4,5 +4,5 @@ import { css } from '@emotion/react';
 export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: calc(-1 * ", ")\n      calc(-1 * ", ")\n      calc(-1 * ", ") -1px;\n  }\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
+export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: ", "\n      ", "\n      ", " -1px;\n  }\n"])), "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-050, -4px)");
 export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

package/dist/esm/view/InlineCard/Icon.js

@@ -14,7 +14,7 @@ export var Icon = styled.img(_templateObject || (_templateObject = _taggedTempla
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
 export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.22.1",
+  packageVersion: "26.23.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RedesignedInlineCard/Icon.js

@@ -14,7 +14,7 @@ export var Icon = styled.img(_templateObject || (_templateObject = _taggedTempla
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override with proper AtlasKit solution.
-export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-025, 2px)");
+export var AKIconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n"])), "var(--ds-space-negative-025, -2px)");
 export var Shimmer = function Shimmer(_ref) {
   var testId = _ref.testId;
   var skeletonCustomStyles = {

package/dist/esm/view/RedesignedInlineCard/styled.js

@@ -7,7 +7,6 @@ var LINK_COLOR_DARK = '#4794FF';
 
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-// There is a workaround for negative token spacing suggested by the design system team. calc(${token} * -1)
 export var IconStyledButton = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 2px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
 export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: ", ";\n"])), themed({
   light: "var(--ds-text-subtlest, ".concat(N200, ")"),

package/dist/types/state/hooks/use-invoke/types.d.ts

@@ -17,11 +17,25 @@ export type CardDetails = {
      */
     previewData?: PreviewActionData | null;
 };
+/**
+ * Additional details to reload smart links
+ */
+export type InvokeReloadDetails = {
+    /**
+     * An identifier for Smart Link analytics
+     */
+    id?: string;
+    /**
+     * The URL of the Smart Link
+     */
+    url?: string;
+};
 /**
  * Invoke request with additional details for the component
  */
 export type InvokeRequestWithCardDetails = InvokeRequest & {
     details?: CardDetails;
+    reload?: InvokeReloadDetails;
 };
 /**
  * CRUD invoke requests for the component that support server actions

package/dist/types/utils/actions/create-invoke-request.d.ts

@@ -0,0 +1,3 @@
+import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
+declare const createInvokeRequest: <TPayload extends object>(request: InvokeRequest, payload?: TPayload | undefined) => InvokeRequest<TPayload>;
+export default createInvokeRequest;

package/dist/types/utils/index.d.ts

@@ -16,7 +16,7 @@ export declare const isSpecialKey: (event: React.MouseEvent | React.KeyboardEven
 export declare const isSpecialClick: (event: React.MouseEvent) => boolean;
 export declare const getIconForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getLabelForFileType: (fileMimeType: string) => React.ReactNode | undefined;
-export declare const getIframeSandboxAttribute: (isTrusted: boolean) => "allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" | undefined;
+export declare const getIframeSandboxAttribute: (isTrusted: boolean) => string | undefined;
 export declare const handleOnClick: (handler: Function) => (e: React.BaseSyntheticEvent) => void;
 export declare const isIntersectionObserverSupported: () => boolean;
 export declare const sleep: (ms: number) => Promise<void>;

package/dist/types/view/FlexibleCard/components/actions/action/action-button/types.d.ts

@@ -4,5 +4,6 @@ import { ActionProps } from '../types';
 export type ActionButtonProps = ActionProps & {
     iconAfter?: React.ReactChild;
     iconBefore?: React.ReactChild;
+    isLoading?: boolean;
     size: SmartLinkSize;
 };

package/dist/types/view/FlexibleCard/components/actions/action/action-dropdown-item/types.d.ts

@@ -3,6 +3,7 @@ export type ActionDropdownItemProps = {
     content?: React.ReactNode;
     iconAfter?: React.ReactNode;
     iconBefore?: React.ReactNode;
+    isLoading?: boolean;
     onClick: () => any;
     testId?: string;
 };

package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { ActionProps } from './types';
+import { ActionProps, InternalActionProps } from './types';
 /**
  * A base action that can be triggered with an on click.
  * @internal
@@ -9,5 +9,5 @@ import { ActionProps } from './types';
  * @see EditAction
  * @see CustomAction
  */
-declare const Action: React.FC<ActionProps>;
+declare const Action: React.FC<ActionProps & InternalActionProps>;
 export default Action;

package/dist/types/view/FlexibleCard/components/actions/action/server-action/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ServerActionProps } from './types';
+declare const ServerAction: React.FC<ServerActionProps>;
+export default ServerAction;

package/dist/types/view/FlexibleCard/components/actions/action/server-action/types.d.ts

@@ -0,0 +1,6 @@
+import { ActionProps } from '../types';
+import { InvokeRequestWithCardDetails } from '../../../../../../state/hooks/use-invoke/types';
+export type ServerActionProps = Omit<ActionProps, 'onClick'> & {
+    action?: InvokeRequestWithCardDetails;
+    onClick?: ActionProps['onClick'];
+};

package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts

@@ -46,3 +46,15 @@ export type ActionProps = {
      */
     testId?: string;
 };
+/**
+ * The internal props that should only be controlled by internal components
+ * and/or used by experiment. If there is a use case where these props/feature
+ * should be available as part of smart-card, please move them to ActionProps.
+ */
+export type InternalActionProps = {
+    /**
+     * Conditionally show a spinner over the top of a button or disable a dropdown item
+     * while server action is executing.
+     */
+    isLoading?: boolean;
+};

package/dist/types-ts4.5/state/hooks/use-invoke/types.d.ts

@@ -17,11 +17,25 @@ export type CardDetails = {
      */
     previewData?: PreviewActionData | null;
 };
+/**
+ * Additional details to reload smart links
+ */
+export type InvokeReloadDetails = {
+    /**
+     * An identifier for Smart Link analytics
+     */
+    id?: string;
+    /**
+     * The URL of the Smart Link
+     */
+    url?: string;
+};
 /**
  * Invoke request with additional details for the component
  */
 export type InvokeRequestWithCardDetails = InvokeRequest & {
     details?: CardDetails;
+    reload?: InvokeReloadDetails;
 };
 /**
  * CRUD invoke requests for the component that support server actions

package/dist/types-ts4.5/utils/actions/create-invoke-request.d.ts

@@ -0,0 +1,3 @@
+import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
+declare const createInvokeRequest: <TPayload extends object>(request: InvokeRequest, payload?: TPayload | undefined) => InvokeRequest<TPayload>;
+export default createInvokeRequest;

package/dist/types-ts4.5/utils/index.d.ts

@@ -16,7 +16,7 @@ export declare const isSpecialKey: (event: React.MouseEvent | React.KeyboardEven
 export declare const isSpecialClick: (event: React.MouseEvent) => boolean;
 export declare const getIconForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getLabelForFileType: (fileMimeType: string) => React.ReactNode | undefined;
-export declare const getIframeSandboxAttribute: (isTrusted: boolean) => "allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" | undefined;
+export declare const getIframeSandboxAttribute: (isTrusted: boolean) => string | undefined;
 export declare const handleOnClick: (handler: Function) => (e: React.BaseSyntheticEvent) => void;
 export declare const isIntersectionObserverSupported: () => boolean;
 export declare const sleep: (ms: number) => Promise<void>;

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/action-button/types.d.ts

@@ -4,5 +4,6 @@ import { ActionProps } from '../types';
 export type ActionButtonProps = ActionProps & {
     iconAfter?: React.ReactChild;
     iconBefore?: React.ReactChild;
+    isLoading?: boolean;
     size: SmartLinkSize;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/action-dropdown-item/types.d.ts

@@ -3,6 +3,7 @@ export type ActionDropdownItemProps = {
     content?: React.ReactNode;
     iconAfter?: React.ReactNode;
     iconBefore?: React.ReactNode;
+    isLoading?: boolean;
     onClick: () => any;
     testId?: string;
 };

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { ActionProps } from './types';
+import { ActionProps, InternalActionProps } from './types';
 /**
  * A base action that can be triggered with an on click.
  * @internal
@@ -9,5 +9,5 @@ import { ActionProps } from './types';
  * @see EditAction
  * @see CustomAction
  */
-declare const Action: React.FC<ActionProps>;
+declare const Action: React.FC<ActionProps & InternalActionProps>;
 export default Action;

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/server-action/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ServerActionProps } from './types';
+declare const ServerAction: React.FC<ServerActionProps>;
+export default ServerAction;

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/server-action/types.d.ts

@@ -0,0 +1,6 @@
+import { ActionProps } from '../types';
+import { InvokeRequestWithCardDetails } from '../../../../../../state/hooks/use-invoke/types';
+export type ServerActionProps = Omit<ActionProps, 'onClick'> & {
+    action?: InvokeRequestWithCardDetails;
+    onClick?: ActionProps['onClick'];
+};

package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/types.d.ts

@@ -46,3 +46,15 @@ export type ActionProps = {
      */
     testId?: string;
 };
+/**
+ * The internal props that should only be controlled by internal components
+ * and/or used by experiment. If there is a use case where these props/feature
+ * should be available as part of smart-card, please move them to ActionProps.
+ */
+export type InternalActionProps = {
+    /**
+     * Conditionally show a spinner over the top of a button or disable a dropdown item
+     * while server action is executing.
+     */
+    isLoading?: boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.22.1",
+  "version": "26.23.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -137,6 +137,9 @@
     "platform.linking-platform.smart-card.enable-block-card-clicks-opening-in-same-tab": {
       "type": "boolean"
     },
+    "platform.linking-platform.smart-card.follow-button": {
+      "type": "boolean"
+    },
     "platform.linking-platform.smart-card.should-call-onclick-in-warning-modal-only-when-safe": {
       "type": "boolean"
     },
@@ -148,6 +151,9 @@
     },
     "platform.linking-platform.smart-card.fix-is-trusted-pop": {
       "type": "boolean"
+    },
+    "platform.linking-platform.smart-card.iframes-allow-storage-access-by-user-activation": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"