@atlaskit/smart-card 26.55.2 → 26.56.1

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

@@ -1,8 +1,49 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 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)");
+export var triggerButtonStyles = css({
+  all: 'unset',
+  backgroundColor: 'transparent',
+  color: 'unset',
+  cursor: 'pointer',
+  fontFamily: 'unset',
+  fontSize: 'unset',
+  fontStyle: 'unset',
+  fontWeight: 'unset',
+  fontVariant: 'unset',
+  lineHeight: 0,
+  padding: 0,
+  textTransform: 'unset',
+  border: '2px solid transparent',
+  margin: "var(--ds-space-025, 2px)",
+  "&:focus-visible, &:focus-within, &[aria-expanded='true']": {
+    outline: 'none',
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"),
+    borderRadius: '5px'
+  }
+});
 
 // 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: ", "\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)");
+export var triggerLozengeStyles = css({
+  alignItems: 'center',
+  display: 'flex',
+  "span[role='img']": {
+    margin: "var(--ds-space-negative-050, -4px)".concat(" ", "var(--ds-space-negative-100, -8px)", " ", "var(--ds-space-negative-050, -4px)", " -1px")
+  }
+});
+export var dropdownItemGroupStyles = css({
+  maxHeight: '300px',
+  overflowY: 'auto',
+  button: {
+    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+    minHeight: '28px',
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit'
+    },
+    '&:focus, &:focus-visible': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+      boxSizing: 'border-box',
+      boxShadow: "inset 2px 0 0 ".concat("var(--ds-border-selected, #0C66E4)"),
+      outline: 'none'
+    }
+  }
+});

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -14,7 +12,36 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = css({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
+    }
+  }
+});
 
 /**
  * A base element that displays a Media.

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

@@ -1,11 +1,14 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(maxLines));
+  return css({
+    color: "var(--ds-text-subtlest, #626F86)",
+    fontSize: '0.75rem',
+    lineHeight: '1rem',
+    whiteSpace: 'normal'
+  }, getTruncateStyles(maxLines));
 };
 
 /**

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

@@ -40,6 +40,7 @@ var getIconDimensionStyles = function getIconDimensionStyles(value) {
 };
 export var getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
 };
 export var getIconWidth = function getIconWidth(size) {

package/dist/esm/view/HoverCard/components/HoverCardComponent.js

@@ -10,7 +10,7 @@ import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
 import CustomPopupContainer from '../components/CustomPopupContainer';
 import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
-import { CardDisplay } from '../../../constants';
+import { ActionName, CardDisplay } from '../../../constants';
 import { SmartLinkAnalyticsContext } from '../../../utils/analytics/SmartLinkAnalyticsContext';
 import { combineActionOptions } from '../../../utils/actions/combine-action-options';
 import { useSmartCardActions } from '../../../state/actions';
@@ -165,7 +165,7 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     }) : linkActions;
   }, [hidePreviewButton, linkActions]);
   var onActionClick = useCallback(function (actionId) {
-    if (actionId === 'preview-content') {
+    if (actionId === 'preview-content' || actionId === ActionName.PreviewAction) {
       hideCard();
     }
   }, [hideCard]);

package/dist/esm/view/HoverCard/components/views/forbidden/styled.js

@@ -1,7 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 var titleFontWeight = '600';
-export var titleBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: center;\n  font-weight: ", ";\n  margin-top: ", ";\n"])), titleFontWeight, "var(--ds-space-100, 8px)");
-export var mainTextStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline;\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), "var(--ds-space-0, 0px)");
-export var connectButtonStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var titleBlockStyles = css({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export var mainTextStyles = css({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+export var connectButtonStyles = css({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});

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

@@ -186,7 +186,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     size: SmartLinkSize.Large,
     overrideCss: footerBlockCss
   }), getBooleanFF('platform.linking-platform.smart-card.hover-card-action-redesign') && /*#__PURE__*/React.createElement(ActionBlock, {
-    spaceInline: "space.150"
+    spaceInline: "space.150",
+    onClick: onActionClick
   }));
 };
 export default HoverCardResolvedView;

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

@@ -1,8 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 var elementGap = '0.5rem';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n"])));
-export var hiddenSnippetStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));
+export var footerBlockCss = css({
+  height: '1.5rem'
+});
+export var hiddenSnippetStyles = css({
+  visibility: 'hidden',
+  position: 'absolute'
+});

package/dist/esm/view/HoverCard/components/views/resolving/styled.js

@@ -1,9 +1,26 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n"])));
-export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var loadingViewContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "var(--ds-space-200, 1rem)"
+});
+export var skeletonContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  gap: '0.625rem',
+  alignItems: 'center'
+});
 export var getTitleStyles = function getTitleStyles(height) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1 0 auto;\n    height: ", "rem;\n\n    span {\n      width: 100%;\n    }\n  "])), height);
+  return css({
+    flex: '1 0 auto',
+    height: "".concat(height, "rem"),
+    span: {
+      width: '100%'
+    }
+  });
 };
-export var titleBlockStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  gap: 0.5rem;\n"])));
+export var titleBlockStyles = css({
+  width: '100%',
+  gap: "var(--ds-space-100, 0.5rem)"
+});

package/dist/esm/view/HoverCard/components/views/unauthorised/styled.js

@@ -1,9 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 var blockGap = '0.5rem';
 var iconGap = '0.5rem';
 var titleFontWeight = '500';
-export var connectButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: ", ";\n"])), blockGap);
-export var titleBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: ", " ", ";\n  a {\n    font-weight: ", ";\n  }\n"])), blockGap, iconGap, titleFontWeight);
-export var mainTextStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: 0.75rem;\n"])), blockGap);
+export var connectButtonStyles = css({
+  justifyContent: 'flex-end',
+  marginTop: blockGap
+});
+export var titleBlockStyles = css({
+  gap: "".concat(blockGap, " ").concat(iconGap),
+  a: {
+    fontWeight: titleFontWeight
+  }
+});
+export var mainTextStyles = css({
+  marginTop: blockGap,
+  fontSize: '0.75rem'
+});

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

@@ -26,7 +26,11 @@ export var separatorCss = css({
     marginRight: elementGap
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n\n  .", " {\n    display: none;\n  }\n"])), getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries') ? NEW_CARD_WIDTH_REM : CARD_WIDTH_REM, loadingPlaceholderClassName);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css({

package/dist/esm/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import styled from '@emotion/styled';
 // TODO: remove this override behaviour for @atlaskit/icon-object
 export var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
@@ -12,27 +10,55 @@ export var IconOverrides = "\n\n  & > * > span {\n    height: 16px;\n    width:
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-export var IconWrapper = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+export var IconWrapper = styled.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-export var EmojiWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
+export var EmojiWrapper = styled.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
-export var IconTitleWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n  word-break: break-all;\n  box-decoration-break: clone;\n  padding: ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
+export var IconTitleWrapper = styled.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-export var LozengeWrapper = styled.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: inline-block;\n  vertical-align: 1px;\n  margin: 0 ", " 0 ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)");
-export var RightIconPositionWrapper = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)");
+export var LozengeWrapper = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
+});
+export var RightIconPositionWrapper = styled.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  position: 'relative',
+  display: 'inline-block'
+});
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-export var IconPositionWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
-export var IconEmptyWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
+export var IconPositionWrapper = styled.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+export var IconEmptyWrapper = styled.span({
+  width: '14px',
+  height: '100%',
+  display: 'inline-block',
+  opacity: 0
+});
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
 export var TitleWrapperClassName = 'smart-link-title-wrapper';
-export var TitleWrapper = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));
+export var TitleWrapper = styled.span({});

package/dist/esm/view/InlineCard/ResolvingView/styled.js

@@ -1,5 +1,6 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export var SpinnerWrapper = styled(IconTitleWrapper)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  vertical-align: text-bottom;\n  padding: 0px;\n"])));
+export var SpinnerWrapper = styled(IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -1,10 +1,41 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import styled from '@emotion/styled';
 import { B400, N200 } from '@atlaskit/theme/colors';
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-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, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
-export var NoLinkAppearance = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin-left: ", ";\n"])), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
-export var LowercaseAppearance = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  text-transform: lowercase;\n"])));
-export var LinkAppearance = styled.a(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), "var(--ds-link, ".concat(B400, ")"));
+export var IconStyledButton = styled.span({
+  '&&&': {
+    textAlign: 'initial',
+    display: 'inline',
+    verticalAlign: 'baseline',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    borderTopLeftRadius: '0px',
+    borderBottomLeftRadius: '0px',
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    backgroundClip: 'padding-box',
+    boxDecorationBreak: 'clone'
+  },
+  '> span': {
+    display: 'inline',
+    overflow: 'initial',
+    textOverflow: 'initial',
+    whiteSpace: 'initial',
+    '> span': {
+      overflow: 'initial',
+      textOverflow: 'initial',
+      whiteSpace: 'initial'
+    }
+  }
+});
+export var NoLinkAppearance = styled.span({
+  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+export var LowercaseAppearance = styled.span({
+  textTransform: 'lowercase'
+});
+export var LinkAppearance = styled.a({
+  color: "var(--ds-link, ".concat(B400, ")"),
+  '&:hover': {
+    textDecoration: 'none'
+  }
+});

package/dist/esm/view/LinkUrl/LinkWarningModal/styled.js

@@ -1,4 +1,5 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 import { css } from '@emotion/react';
-export var breakWordsCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  white-space: pre-line;\n  word-break: break-all;\n"])));
+export var breakWordsCss = css({
+  whiteSpace: 'pre-line',
+  wordBreak: 'break-all'
+});

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

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

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import React from 'react';
@@ -17,13 +15,22 @@ var getImageStyles = function getImageStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n  "])), gs(2), gs(2));
+  return css({
+    height: gs(2),
+    width: gs(2)
+  });
 };
 var getSpanStyles = function getSpanStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    height: ", ";\n    width: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), gs(2.5), gs(2));
+  return css({
+    height: gs(2.5),
+    width: gs(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
 };
 export var Icon = function Icon(_ref) {
   var url = _ref.url,

package/dist/esm/view/common/ai-icon-loading/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import { css, jsx, keyframes } from '@emotion/react';
 import SVG from '@atlaskit/icon/svg';
@@ -11,7 +9,17 @@ import { aiThemeTokens } from '../ai-prism/constants';
  * with modifications
  */
 
-var bounce = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: translateY(0);\n  }\n\n  // 200ms of 1200ms = 16.67%\n  16.67% {\n    transform: translateY(-2px);\n  }\n\n  // 400ms of 1200ms = 33.33%\n  33.33% {\n    transform: translateY(0px);\n  }\n"])));
+var bounce = keyframes({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
+  }
+});
 var BASE_DELAY = 400;
 var QUEUE_DELAY = 200;
 var animationStyles = css({

package/dist/types/constants.d.ts

@@ -127,6 +127,7 @@ export declare enum ElementName {
  * Flexible UI action (button)
  */
 export declare enum ActionName {
+    CopyLinkAction = "CopyLinkAction",
     DeleteAction = "DeleteAction",
     EditAction = "EditAction",
     FollowAction = "FollowAction",

package/dist/types/extractors/flexible/actions/extract-copy-link-action.d.ts

@@ -0,0 +1,4 @@
+import { JsonLd } from 'json-ld-types';
+import { CopyLinkActionData } from '../../../state/flexible-ui-context/types';
+import { type CardActionOptions } from '../../../view/Card/types';
+export declare const extractCopyLinkAction: (data: JsonLd.Data.BaseData, actionOptions?: CardActionOptions) => CopyLinkActionData | undefined;

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { MessageDescriptor } from 'react-intl-next';
 export type RequestAccessMessageKey = 'click_to_join' | 'click_to_join_description' | 'forbidden_description' | 'request_access' | 'request_access_description' | 'request_access_pending' | 'request_access_pending_title' | 'request_access_pending_description' | 'request_denied_description' | 'default_no_access_title' | 'direct_access_title' | 'direct_access_description' | 'direct_access' | 'access_exists_description' | 'not_found_description' | 'not_found_title';
-export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message';
+export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'beta' | 'cannot_find_link' | 'connect_link_account_card' | 'connect_link_account_card_name' | 'connect_link_account_card_description' | 'connect_unauthorised_account_action' | 'connect_unauthorised_account_description' | 'connect_unauthorised_account_description_no_provider' | 'continue' | 'copy_url_to_clipboard' | 'copied_url_to_clipboard' | 'could_not_load_link' | 'download' | 'download_description' | 'download_file' | 'follow' | 'go_back' | 'invalid_permissions' | 'invalid_permissions_description' | 'join_to_view' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'check_this_link' | 'delete' | 'edit' | 'learn_more_about_smart_links' | 'learn_more_about_connecting_account' | 'loading' | 'link_safety_warning_message' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'more_actions' | 'not_found_title' | 'not_found_description' | 'open_issue_in_jira' | 'open_link_in_a_new_tab' | 'owned_by' | 'preview_description' | 'preview_improved' | 'preview_close' | 'preview_max_size' | 'preview_min_size' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'read_time' | 'restricted_link' | 'request_access_to_view' | 'request_denied' | 'sent_on_relative' | 'sent_on_absolute' | 'status_change_load_error' | 'status_change_permission_error' | 'status_change_update_error' | 'try_again' | 'try_another_account' | 'unauthorised_account_description' | 'unauthorised_account_description_no_provider' | 'unauthorised_account_name' | 'unauthorised_account_name_no_provider' | 'unassigned' | 'unfollow' | 'view' | 'viewIn' | 'viewOriginal' | 'actions' | 'add_account' | 'cancel' | 'close' | 'connect_to' | 'connect_account_description' | 'retry' | 'save' | 'unlink_account' | RequestAccessMessageKey | 'related_work_items_not_found' | 'last_mentioned_in' | 'related' | 'generic_error_message';
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -244,6 +244,7 @@ export type FlexibleUiActions = {
     [ActionName.PreviewAction]?: PreviewActionData;
     [ActionName.DownloadAction]?: DownloadActionData;
     [ActionName.FollowAction]?: ServerActionProp<boolean>;
+    [ActionName.CopyLinkAction]?: CopyLinkActionData;
 };
 export type PreviewActionData = {
     downloadUrl?: string;
@@ -260,6 +261,9 @@ export type ViewActionData = {
 export type DownloadActionData = {
     downloadUrl?: string;
 };
+export type CopyLinkActionData = {
+    url: string;
+};
 export type FlexibleAnalyticsContextType = AnalyticsFacade & {
     display?: CardInnerAppearance;
     extensionKey?: string;

package/dist/types/state/hooks/use-ai-summary/ai-summary-service/types.d.ts

@@ -36,7 +36,7 @@ export type AgentInputContext = {
 };
 export type PromptId = 'smart_links';
 export type SummaryOutputMimeType = 'text/adf' | 'text/markdown' | 'text/json';
-export declare const errorMessages: readonly ["NETWORK_ERROR", "NO_ANSWER", "RATE_LIMIT", "NO_AGENT", "PLUGIN_ERRORED", "OPENAI_RATE_LIMIT_USER_ABUSE", "ACCEPTABLE_USE_VIOLATIONS", "AI_DISABLED", "UNEXPECTED"];
+export declare const errorMessages: readonly ["NETWORK_ERROR", "NO_ANSWER", "RATE_LIMIT", "NO_AGENT", "PLUGIN_ERRORED", "OPENAI_RATE_LIMIT_USER_ABUSE", "ACCEPTABLE_USE_VIOLATIONS", "AI_DISABLED", "UNEXPECTED", "HIPAA_CONTENT_DETECTED"];
 export type ErrorMessage = (typeof errorMessages)[number];
 export type AISummaryState = {
     content: string;

package/dist/types/view/Card/types.d.ts

@@ -19,7 +19,8 @@ export declare enum CardAction {
     PreviewAction = "PreviewAction",
     ViewAction = "ViewAction",
     ChangeStatusAction = "ChangeStatusAction",
-    FollowAction = "FollowAction"
+    FollowAction = "FollowAction",
+    CopyLinkAction = "CopyLinkAction"
 }
 export type CardActionOptions = {
     hide: true;

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

@@ -7,4 +7,6 @@ export type ActionButtonProps = ActionProps & {
     isLoading?: boolean;
     size: SmartLinkSize;
     isDisabled?: boolean;
+    href?: string;
+    ariaLabel?: string;
 };

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

@@ -1,10 +1,12 @@
 import type { Space, XCSS } from '@atlaskit/primitives';
 import type { SmartLinkSize } from '../../../../../../constants';
 import type { ActionProps } from '../types';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ActionStackItemProps = ActionProps & {
     isLoading?: boolean;
     size: SmartLinkSize;
     isDisabled?: boolean;
     space?: Space;
     xcss?: XCSS;
+    tooltipOnHide?: (analyticsEvent: UIAnalyticsEvent) => any;
 };

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

@@ -3,6 +3,7 @@ import type { Space, XCSS } from '@atlaskit/primitives';
 import type { SerializedStyles } from '@emotion/react';
 import type { ReactChild, ReactNode } from 'react';
 import type { SmartLinkSize } from '../../../../../constants';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 export type ActionProps = {
     /**
      * Determines the appearance of the action.
@@ -41,6 +42,10 @@ export type ActionProps = {
      * Determines the tooltip message when hovering over the Action.
      */
     tooltipMessage?: ReactNode;
+    /**
+     * Determines the onHide behaviour of the Tooltip
+     */
+    tooltipOnHide?: (analyticsEvent: UIAnalyticsEvent) => any;
     /**
      * @deprecated Use 'as' instead
      * Used to determine whether the Action is in a Dropdown.
@@ -69,4 +74,18 @@ export type ActionProps = {
      * Additional styling properties for Primitives based component
      */
     xcss?: XCSS;
+    /**
+     * Allows the use of hyperlinks as buttons via the atlaskit component
+     */
+    href?: string;
+    /**
+     * Additional text properties for accessibility of actions
+     */
+    ariaLabel?: string;
+    /**
+     * Optional wrapper component to wrap the action
+     * E.g., Feature discovery pulse
+     * Cleanup on https://product-fabric.atlassian.net/browse/EDM-9649
+     */
+    wrapper?: React.ElementType;
 };

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

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