@atlaskit/smart-card 27.5.2 → 27.5.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/smart-card
 
+## 27.5.4
+
+### Patch Changes
+
+- [#108244](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108244)
+  [`400b3c1c97aab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/400b3c1c97aab) -
+  Add loading view for related links modal
+- Updated dependencies
+
+## 27.5.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.5.2
 
 ### Patch Changes

package/CONTRIBUTING.md

@@ -1,3 +1,3 @@
-# Contribute to Linking Platform 
+# Contribute to Linking Platform
 
 https://go.atlassian.com/lp-contribute

package/dist/cjs/extractors/common/icon/extractIcon.js

@@ -43,7 +43,7 @@ var extractIcon = exports.extractIcon = function extractIcon(jsonLd) {
 
 /**
  * Extracts an icon based on the given type.
- * 
+ *
  * Some types return hardcoded icons, while others follow a priority list on how to pick the icon.
  * If type is not recognized, it will return the icon from the provider, or `undefined` if no icon is found.
  *

package/dist/cjs/extractors/flexible/actions/extract-automation-action.js

@@ -17,7 +17,7 @@ var extractAutomationAction = exports.extractAutomationAction = function extract
   var data = response.data;
   var meta = response.meta;
   var name = data.name,
-    objectAri = data["atlassian:ari"];
+    objectAri = data['atlassian:ari'];
   var product = meta.product,
     tenantId = meta.tenantId,
     resourceType = meta.resourceType;

package/dist/cjs/messages.js

@@ -723,7 +723,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   related_links_not_found: {
     id: 'fabric.linking.related_links_not_found',
-    defaultMessage: 'We didn\'t find any links to show here.',
+    defaultMessage: "We didn't find any links to show here.",
     description: 'Informs the user that there are no related resources for the given url'
   },
   related_links_includes_links_to: {
@@ -748,7 +748,7 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   },
   related_links_modal_unavailable_message: {
     id: 'fabric.linking.related_links_modal_unavailable_message',
-    defaultMessage: 'We didn\'t find any links to show here. We continuously review and add recent links for updated pages or other content types.',
+    defaultMessage: "We didn't find any links to show here. We continuously review and add recent links for updated pages or other content types.",
     description: 'Informs the user that related links were not found but may be available in the future'
   }
 });

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

@@ -22,7 +22,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.5.2"
+  packageVersion: "27.5.4"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -77,7 +77,7 @@ function visible(_ref7) {
 }
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var LinkWrapper = exports.LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+var LinkWrapper = exports.LinkWrapper = _styled.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", " &:hover {\n\t\ttext-decoration: none;\n\t}\n"])), function (props) {
   return wrapperStyles(props);
 });
 
@@ -140,7 +140,7 @@ var TooltipWrapper = exports.TooltipWrapper = _styled.default.div({
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
-var Content = exports.Content = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
+var Content = exports.Content = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t", ";\n\tborder: 1px solid ", ";\n\tbackground-color: ", ";\n\tposition: absolute;\n\tz-index: 1;\n\twidth: 100%;\n\ttransition: box-shadow 0.3s;\n\n\t> .calc-height > div > div {\n\t\tleft: unset !important;\n\t\twidth: unset !important;\n\t\theight: unset !important;\n\t\tposition: initial !important;\n\t\tpadding-bottom: unset !important;\n\t}\n\t> .embed-preview > div {\n\t\tmargin: 0 auto;\n\t}\n\n\t", "\n\n\t", "\n\n  ", "\n"])), contentBorderRadius, "var(--ds-border, ".concat(_colors.N40, ")"), "var(--ds-surface-raised, white)", function (_ref11) {
   var allowScrollBar = _ref11.allowScrollBar,
     removeOverflow = _ref11.removeOverflow;
   if (removeOverflow) {

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-container/common/utils/api.js

@@ -19,7 +19,7 @@ var extractCloudIdAndProductFromSite = exports.extractCloudIdAndProductFromSite
   var cloudId;
   var resourceOwner;
   var resourceType;
-  var ariRegex = new RegExp("^ari:cloud:([a-zA-Z.\\-]+)::([a-zA-Z.\\-]+)/([a-zA-Z0-9\\-]+)");
+  var ariRegex = new RegExp('^ari:cloud:([a-zA-Z.\\-]+)::([a-zA-Z.\\-]+)/([a-zA-Z0-9\\-]+)');
   var parsedAri = site.match(ariRegex);
   if (parsedAri) {
     resourceOwner = parsedAri[1];

package/dist/cjs/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/empty-state/main.js

@@ -35,15 +35,15 @@ var i18n = (0, _reactIntlNext.defineMessages)({
   }
 });
 var emptyStateStyles = (0, _primitives.xcss)({
-  paddingLeft: "space.300",
-  paddingRight: "space.300",
-  marginTop: "space.500"
+  paddingLeft: 'space.300',
+  paddingRight: 'space.300',
+  marginTop: 'space.500'
 });
 var imageStyles = (0, _primitives.xcss)({
   marginTop: 'space.050',
   marginBottom: 'space.300',
-  width: "160px",
-  height: "156px"
+  width: '160px',
+  height: '156px'
 });
 var descriptionStyles = (0, _primitives.xcss)({
   width: '360px',

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

@@ -8,8 +8,8 @@ var _messages = require("../../../../../../messages");
 var getModalContent = exports.getModalContent = function getModalContent(product, resourceType) {
   var _modalContentMap$prod;
   var modalContentMap = {
-    'confluence': {
-      'page': {
+    confluence: {
+      page: {
         modalTitle: _messages.messages.automation_action_confluence_page_modal_title,
         modalDescription: _messages.messages.automation_action_confluence_page_modal_description
       }

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

@@ -15,7 +15,7 @@ var _templateObject;
 var getBlockStyles = function getBlockStyles(direction, size
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t", "\n\t", "\n  justify-content: flex-start;\n\t[data-separator] + [data-separator]:before {\n\t\tcontent: '\u2022';\n\t\tmargin-right: ", "rem;\n\t}\n\t// Pull request elements: source branch \u2192 target branch\n\t[data-smart-element='", "']\n\t\t+ [data-smart-element='", "']:before {\n\t\tcontent: '\u2192';\n\t}\n\t// Pull request elements: target branch \u2190 source branch\n\t[data-smart-element='", "']\n\t\t+ [data-smart-element='", "']:before {\n\t\tcontent: '\u2190';\n\t}\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 
 /**

package/dist/cjs/view/FlexibleCard/components/blocks/element-group/index.js

@@ -55,7 +55,7 @@ var getGapStyles = function getGapStyles(size, align) {
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: block;\n\t\tvertical-align: middle;\n\t\t", "\n\n\t\t> span, > div {\n\t\t\tvertical-align: middle;\n\n\t\t\t&[data-smart-element-date-time],\n\t\t\t&[data-smart-element-text] {\n\t\t\t\t// Show all/wrapped/truncated\n\t\t\t\tdisplay: inline;\n\t\t\t}\n\t\t}\n\n\t\t", "\n\t"])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 var getElementGroupStyles = exports.getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
   return (0, _react.css)((0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), {

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

@@ -39,7 +39,7 @@ var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreCont
   if (placement === _constants.MediaPlacement.Left || placement === _constants.MediaPlacement.Right) {
     var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\tposition: absolute;\n\t\t\ttop: ", ";\n\t\t\tbottom: ", ";\n\t\t\twidth: calc(var(--preview-block-width) - ", ");\n\n\t\t\t", "\n\t\t\t", "\n\n      [data-smart-element-media='image'] {\n\t\t\t\taspect-ratio: unset;\n\t\t\t\tpadding-top: unset;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\tobject-fit: cover;\n\t\t\t}\n\t\t"])), containerPadding, containerPadding, containerPadding, placement === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
   }
   if (ignoreContainerPadding) {
     return (0, _react2.css)({

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

@@ -81,7 +81,7 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(direction, si
 };
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var highlightRemoveStyles = exports.highlightRemoveStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
+var highlightRemoveStyles = exports.highlightRemoveStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\toutline: none !important;\n\toutline-color: inherit;\n\tcolor: inherit;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-touch-callout: none;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n"])));
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;
 };

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

@@ -100,7 +100,7 @@ var getContainerStyles = exports.getContainerStyles = function getContainerStyle
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
 
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  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 : '');
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tgap: ", " 0;\n\t\tflex-direction: column;\n\t\tmin-width: 0;\n\t\toverflow-x: hidden;\n\t\tposition: relative;\n\t\t", "\n\t\t", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n\t\t\topacity: 1;\n\t\t}\n\t\ta:focus,\n\t\t.has-action:focus {\n\t\t\toutline-offset: -2px;\n\t\t}\n\t"])), 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/elements/avatar-group/index.js

@@ -39,7 +39,7 @@ var getStyles = function getStyles(size) {
     case _constants.SmartLinkSize.Small:
     default:
       // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
+      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t\tli {\n\t\t\t\t\tspan,\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-height: 1.25rem;\n\t\t\t\t\t\tmax-width: 1.25rem;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), styles);
   }
 };
 var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {

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

@@ -23,7 +23,7 @@ var badgeStyles = (0, _react2.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var iconStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", (0, _utils.getIconSizeStyles)('1rem'));
+var iconStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tcolor: ", ";\n\tline-height: 0;\n\tvertical-align: middle;\n\t", "\n\timg,\n  span,\n  svg {\n\t\tline-height: 0;\n\t\tvertical-align: middle;\n\t}\n"])), "var(--ds-icon-subtle, #626F86)", (0, _utils.getIconSizeStyles)('1rem'));
 var labelStyles = (0, _react2.css)({
   color: "var(--ds-text-subtlest, #626F86)",
   fontSize: '0.75rem',

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

@@ -49,7 +49,7 @@ var getIconDimensionStyles = function getIconDimensionStyles(value) {
 var getIconSizeStyles = exports.getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  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);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tflex: 0 0 auto;\n\t\t", "\n\t\tspan,\n    svg,\n    img {\n\t\t\t", "\n\t\t}\n\t\tsvg {\n\t\t\tpadding: 0;\n\t\t}\n\t"])), sizeStyles, sizeStyles);
 };
 var getIconWidth = exports.getIconWidth = function getIconWidth(size) {
   switch (size) {

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

@@ -12,7 +12,7 @@ var _templateObject;
 var elementGap = '0.5rem';
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])), _styled.separatorCss, elementGap, elementGap);
+var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tgap: 0px;\n\t/* primary element group */\n\t[data-smart-element-group]:nth-of-type(1) {\n\t\tflex-grow: 7;\n\n\t\t// a separator between text-based element\n\t\t", "\n\n\t\t/* horizontal spacing between elements in group */\n    > span {\n\t\t\tmargin-right: ", ";\n\t\t}\n\t}\n\t/* secondary element group */\n\t[data-smart-element-group]:nth-of-type(2) {\n\t\tflex-grow: 3;\n\t\t/* horizontal spacing between elements in group */\n\t\t> span {\n\t\t\tmargin-left: ", ";\n\t\t}\n\t}\n\n\t[data-smart-element-group] {\n\t\tline-height: 1rem;\n\t}\n"])), _styled.separatorCss, elementGap, elementGap);
 var footerBlockCss = exports.footerBlockCss = (0, _react.css)({
   height: '1.5rem'
 });

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

@@ -34,10 +34,10 @@ var separatorCss = exports.separatorCss = (0, _react.css)({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var HoverCardContainer = exports.HoverCardContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n\n  .", " {\n    display: none;\n  }\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries') ? NEW_CARD_WIDTH_REM : CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
+var HoverCardContainer = exports.HoverCardContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tbackground: none;\n\tborder-width: 0;\n\tbox-sizing: border-box;\n\twidth: ", "rem;\n\n\t.", " {\n\t\tdisplay: none;\n\t}\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries') ? NEW_CARD_WIDTH_REM : CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  [data-smart-element='Title'] {\n    font-weight: 600;\n  }\n"])), blockGap, separatorCss, elementGap);
+var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tgap: ", ";\n\n\t", "\n\n\t// title and subtitle element group\n  [data-smart-element-group] {\n\t\t// gap between title and subtitle\n\t\tgap: 0.06rem;\n\t\tdisplay: flex;\n\t\t/* subtitle element group */\n\t\t> [data-smart-element-group] {\n\t\t\t> span {\n\t\t\t\tmargin-right: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t[data-smart-element='Title'] {\n\t\tfont-weight: 600;\n\t}\n"])), blockGap, separatorCss, elementGap);
 var getTransitionStyles = exports.getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)({
     transition: 'height 300ms ease-in-out',

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: "27.5.2",
+  packageVersion: "27.5.4",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/RelatedLinksModal/components/EmptyState.js

@@ -9,10 +9,10 @@ var _react = _interopRequireDefault(require("react"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _primitives = require("@atlaskit/primitives");
 var emptyStateStyles = (0, _primitives.xcss)({
-  alignItems: "center",
+  alignItems: 'center',
   display: 'flex',
   flexDirection: 'column',
-  gap: "space.100",
+  gap: 'space.100',
   height: '100%',
   justifyContent: 'center',
   marginLeft: 'space.300',

package/dist/cjs/view/RelatedLinksModal/views/resolving/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var style = (0, _primitives.xcss)({
+  alignItems: 'center',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  justifyContent: 'center'
+});
+var RelatedLinksResolvingView = function RelatedLinksResolvingView() {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: style,
+    testId: "related-links-resolving-view"
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: 'large',
+    testId: "related-links-resolving-view-spinner"
+  }));
+};
+var _default = exports.default = RelatedLinksResolvingView;

package/dist/es2019/extractors/common/icon/extractIcon.js

@@ -33,7 +33,7 @@ export const extractIcon = (jsonLd, priority = 'type') => {
 
 /**
  * Extracts an icon based on the given type.
- * 
+ *
  * Some types return hardcoded icons, while others follow a priority list on how to pick the icon.
  * If type is not recognized, it will return the icon from the provider, or `undefined` if no icon is found.
  *

package/dist/es2019/extractors/flexible/actions/extract-automation-action.js

@@ -12,7 +12,7 @@ export const extractAutomationAction = response => {
   const meta = response.meta;
   const {
     name,
-    "atlassian:ari": objectAri
+    'atlassian:ari': objectAri
   } = data;
   const {
     product,

package/dist/es2019/messages.js

@@ -717,7 +717,7 @@ export const messages = defineMessages({
   },
   related_links_not_found: {
     id: 'fabric.linking.related_links_not_found',
-    defaultMessage: 'We didn\'t find any links to show here.',
+    defaultMessage: "We didn't find any links to show here.",
     description: 'Informs the user that there are no related resources for the given url'
   },
   related_links_includes_links_to: {
@@ -742,7 +742,7 @@ export const messages = defineMessages({
   },
   related_links_modal_unavailable_message: {
     id: 'fabric.linking.related_links_modal_unavailable_message',
-    defaultMessage: 'We didn\'t find any links to show here. We continuously review and add recent links for updated pages or other content types.',
+    defaultMessage: "We didn't find any links to show here. We continuously review and add recent links for updated pages or other content types.",
     description: 'Informs the user that related links were not found but may be available in the future'
   }
 });

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

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

@@ -138,9 +138,9 @@ function visible({
 
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const LinkWrapper = styled.div`
-  ${props => wrapperStyles(props)} &:hover {
-    text-decoration: none;
-  }
+	${props => wrapperStyles(props)} &:hover {
+		text-decoration: none;
+	}
 `;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
@@ -212,26 +212,26 @@ export const TooltipWrapper = styled.div({
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/design-system/no-styled-tagged-template-expression, @atlaskit/ui-styling-standard/no-styled -- To migrate as part of go/ui-styling-standard
 export const Content = styled.div`
-  ${contentBorderRadius};
-  border: 1px solid ${`var(--ds-border, ${N40})`};
-  background-color: ${"var(--ds-surface-raised, white)"};
-  position: absolute;
-  z-index: 1;
-  width: 100%;
-  transition: box-shadow 0.3s;
+	${contentBorderRadius};
+	border: 1px solid ${`var(--ds-border, ${N40})`};
+	background-color: ${"var(--ds-surface-raised, white)"};
+	position: absolute;
+	z-index: 1;
+	width: 100%;
+	transition: box-shadow 0.3s;
 
-  > .calc-height > div > div {
-    left: unset !important;
-    width: unset !important;
-    height: unset !important;
-    position: initial !important;
-    padding-bottom: unset !important;
-  }
-  > .embed-preview > div {
-    margin: 0 auto;
-  }
+	> .calc-height > div > div {
+		left: unset !important;
+		width: unset !important;
+		height: unset !important;
+		position: initial !important;
+		padding-bottom: unset !important;
+	}
+	> .embed-preview > div {
+		margin: 0 auto;
+	}
 
-  ${({
+	${({
   allowScrollBar,
   removeOverflow
 }) => {
@@ -241,7 +241,7 @@ export const Content = styled.div`
   return allowScrollBar ? 'overflow: auto;' : 'overflow: hidden;';
 }}
 
-  ${({
+	${({
   frameStyle
 }) => frameStyle === 'show' ? `
         width: calc(100% - ${"var(--ds-space-200, 16px)"} - 2px);

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-container/common/utils/api.js

@@ -7,7 +7,7 @@ export const extractCloudIdAndProductFromSite = site => {
   let cloudId;
   let resourceOwner;
   let resourceType;
-  const ariRegex = new RegExp("^ari:cloud:([a-zA-Z.\\-]+)::([a-zA-Z.\\-]+)/([a-zA-Z0-9\\-]+)");
+  const ariRegex = new RegExp('^ari:cloud:([a-zA-Z.\\-]+)::([a-zA-Z.\\-]+)/([a-zA-Z0-9\\-]+)');
   const parsedAri = site.match(ariRegex);
   if (parsedAri) {
     resourceOwner = parsedAri[1];

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/empty-state/main.js

@@ -28,15 +28,15 @@ const i18n = defineMessages({
   }
 });
 const emptyStateStyles = xcss({
-  paddingLeft: "space.300",
-  paddingRight: "space.300",
-  marginTop: "space.500"
+  paddingLeft: 'space.300',
+  paddingRight: 'space.300',
+  marginTop: 'space.500'
 });
 const imageStyles = xcss({
   marginTop: 'space.050',
   marginBottom: 'space.300',
-  width: "160px",
-  height: "156px"
+  width: '160px',
+  height: '156px'
 });
 const descriptionStyles = xcss({
   width: '360px',

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

@@ -2,8 +2,8 @@ import { messages } from '../../../../../../messages';
 export const getModalContent = (product, resourceType) => {
   var _modalContentMap$prod;
   const modalContentMap = {
-    'confluence': {
-      'page': {
+    confluence: {
+      page: {
         modalTitle: messages.automation_action_confluence_page_modal_title,
         modalDescription: messages.automation_action_confluence_page_modal_description
       }

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

@@ -6,23 +6,23 @@ import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from
 const getBlockStyles = (direction, size
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) => css`
-  ${getBaseStyles(direction, size)}
-  ${highlightRemoveStyles}
+	${getBaseStyles(direction, size)}
+	${highlightRemoveStyles}
   justify-content: flex-start;
-  [data-separator] + [data-separator]:before {
-    content: '•';
-    margin-right: ${getGapSize(size)}rem;
-  }
-  // Pull request elements: source branch → target branch
-  [data-smart-element='${ElementName.SourceBranch}']
-    + [data-smart-element='${ElementName.TargetBranch}']:before {
-    content: '→';
-  }
-  // Pull request elements: target branch ← source branch
-  [data-smart-element='${ElementName.TargetBranch}']
-    + [data-smart-element='${ElementName.SourceBranch}']:before {
-    content: '←';
-  }
+	[data-separator] + [data-separator]:before {
+		content: '•';
+		margin-right: ${getGapSize(size)}rem;
+	}
+	// Pull request elements: source branch → target branch
+	[data-smart-element='${ElementName.SourceBranch}']
+		+ [data-smart-element='${ElementName.TargetBranch}']:before {
+		content: '→';
+	}
+	// Pull request elements: target branch ← source branch
+	[data-smart-element='${ElementName.TargetBranch}']
+		+ [data-smart-element='${ElementName.SourceBranch}']:before {
+		content: '←';
+	}
 `;
 
 /**

package/dist/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -47,22 +47,22 @@ const getHorizontalDirectionStyles = (size, align) => {
   const lineHeight = getMaxLineHeight(size);
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
-    display: block;
-    vertical-align: middle;
-    ${getTruncateStyles(1, lineHeight + 'rem')}
+		display: block;
+		vertical-align: middle;
+		${getTruncateStyles(1, lineHeight + 'rem')}
 
-    > span, > div {
-      vertical-align: middle;
+		> span, > div {
+			vertical-align: middle;
 
-      &[data-smart-element-date-time],
-      &[data-smart-element-text] {
-        // Show all/wrapped/truncated
-        display: inline;
-      }
-    }
+			&[data-smart-element-date-time],
+			&[data-smart-element-text] {
+				// Show all/wrapped/truncated
+				display: inline;
+			}
+		}
 
-    ${getGapStyles(size, align)}
-  `;
+		${getGapStyles(size, align)}
+	`;
 };
 export const getElementGroupStyles = (direction, size, align, width, position) => css(getBaseStyles(direction, size), getAlignmentStyles(align), {
   minWidth: '10%'

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

@@ -26,22 +26,22 @@ const getPreviewBlockStyles = (placement, ignoreContainerPadding) => {
     const containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
     // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css`
-      position: absolute;
-      top: ${containerPadding};
-      bottom: ${containerPadding};
-      width: calc(var(--preview-block-width) - ${containerPadding});
+			position: absolute;
+			top: ${containerPadding};
+			bottom: ${containerPadding};
+			width: calc(var(--preview-block-width) - ${containerPadding});
 
-      ${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
-      ${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
+			${placement === MediaPlacement.Left ? `left: ${containerPadding};` : ''}
+			${placement === MediaPlacement.Right ? `right: ${containerPadding};` : ''}
 
       [data-smart-element-media='image'] {
-        aspect-ratio: unset;
-        padding-top: unset;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-    `;
+				aspect-ratio: unset;
+				padding-top: unset;
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		`;
   }
   if (ignoreContainerPadding) {
     return css({