@atlaskit/smart-card 26.55.2 → 26.56.1

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

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

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

@@ -12,40 +12,36 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-const styles = css`
-  aspect-ratio: 16 / 9;
-  display: flex;
-  width: 100%;
-  height: fit-content; // Fix Safari height not respecting aspect-ratio
-
-  // fallback
-  @supports not (aspect-ratio: auto) {
-    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)
-    height: 0;
-    position: relative;
-    overflow: hidden;
-  }
-
-  > img,
-  > span {
-    min-height: 100%;
-    min-width: 100%;
-    max-height: 100%;
-    max-width: 100%;
-    object-fit: cover;
-    object-position: center center;
-
-    // fallback
-    @supports not (aspect-ratio: auto) {
-      position: absolute;
-      transform: translate(-50%, -50%);
-      left: 50%;
-      top: 50%;
-      width: auto;
-      height: auto;
+const 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/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -2,13 +2,12 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
-const getStyles = maxLines => css`
-  color: ${"var(--ds-text-subtlest, #626F86)"};
-  font-size: 0.75rem;
-  line-height: 1rem;
-  white-space: normal;
-  ${getTruncateStyles(maxLines)}
-`;
+const getStyles = maxLines => css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  whiteSpace: 'normal'
+}, getTruncateStyles(maxLines));
 
 /**
  * A base element that displays some Text.

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

@@ -40,6 +40,7 @@ const getIconDimensionStyles = value => css({
 });
 export const getIconSizeStyles = width => {
   const sizeStyles = getIconDimensionStyles(width);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css`
     flex: 0 0 auto;
     ${sizeStyles}

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

@@ -9,7 +9,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';
@@ -153,7 +153,7 @@ export const HoverCardComponent = ({
     return hidePreviewButton ? linkActions.filter(action => action.id !== 'preview-content') : linkActions;
   }, [hidePreviewButton, linkActions]);
   const onActionClick = useCallback(actionId => {
-    if (actionId === 'preview-content') {
+    if (actionId === 'preview-content' || actionId === ActionName.PreviewAction) {
       hideCard();
     }
   }, [hideCard]);

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

@@ -1,18 +1,18 @@
 import { css } from '@emotion/react';
 const titleFontWeight = '600';
-export const titleBlockStyles = css`
-  justify-content: center;
-  font-weight: ${titleFontWeight};
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
-export const mainTextStyles = css`
-  display: inline;
-  justify-content: center;
-  margin-top: ${"var(--ds-space-0, 0px)"};
-  font-size: 0.75rem;
-  text-align: center;
-`;
-export const connectButtonStyles = css`
-  justify-content: center;
-  margin-top: ${"var(--ds-space-100, 8px)"};
-`;
+export const titleBlockStyles = css({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export const mainTextStyles = css({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+export const connectButtonStyles = css({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});

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

@@ -188,7 +188,8 @@ const HoverCardResolvedView = ({
     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/es2019/view/HoverCard/components/views/resolved/styled.js

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 const elementGap = '0.5rem';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const metadataBlockCss = css`
   gap: 0px;
   /* primary element group */
@@ -28,10 +30,10 @@ export const metadataBlockCss = css`
     line-height: 1rem;
   }
 `;
-export const footerBlockCss = css`
-  height: 1.5rem;
-`;
-export const hiddenSnippetStyles = css`
-  visibility: hidden;
-  position: absolute;
-`;
+export const footerBlockCss = css({
+  height: '1.5rem'
+});
+export const hiddenSnippetStyles = css({
+  visibility: 'hidden',
+  position: 'absolute'
+});

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

@@ -1,26 +1,26 @@
 import { css } from '@emotion/react';
-export const loadingViewContainer = css`
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-`;
-export const skeletonContainer = css`
-  display: flex;
-  flex-direction: column;
-  gap: 0.625rem;
-  align-items: center;
-`;
+export const loadingViewContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "var(--ds-space-200, 1rem)"
+});
+export const 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 const getTitleStyles = height => {
-  return css`
-    flex: 1 0 auto;
-    height: ${height}rem;
-
-    span {
-      width: 100%;
+  return css({
+    flex: '1 0 auto',
+    height: `${height}rem`,
+    span: {
+      width: '100%'
     }
-  `;
+  });
 };
-export const titleBlockStyles = css`
-  width: 100%;
-  gap: 0.5rem;
-`;
+export const titleBlockStyles = css({
+  width: '100%',
+  gap: "var(--ds-space-100, 0.5rem)"
+});

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

@@ -2,17 +2,17 @@ import { css } from '@emotion/react';
 const blockGap = '0.5rem';
 const iconGap = '0.5rem';
 const titleFontWeight = '500';
-export const connectButtonStyles = css`
-  justify-content: flex-end;
-  margin-top: ${blockGap};
-`;
-export const titleBlockStyles = css`
-  gap: ${blockGap} ${iconGap};
-  a {
-    font-weight: ${titleFontWeight};
+export const connectButtonStyles = css({
+  justifyContent: 'flex-end',
+  marginTop: blockGap
+});
+export const titleBlockStyles = css({
+  gap: `${blockGap} ${iconGap}`,
+  a: {
+    fontWeight: titleFontWeight
   }
-`;
-export const mainTextStyles = css`
-  margin-top: ${blockGap};
-  font-size: 0.75rem;
-`;
+});
+export const mainTextStyles = css({
+  marginTop: blockGap,
+  fontSize: '0.75rem'
+});

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

@@ -24,6 +24,8 @@ export const separatorCss = css({
     marginRight: elementGap
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const HoverCardContainer = css`
   background: none;
   border-width: 0;
@@ -34,6 +36,8 @@ export const HoverCardContainer = css`
     display: none;
   }
 `;
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export const titleBlockCss = css`
   gap: ${blockGap};
 

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

@@ -39,59 +39,55 @@ export const IconOverrides = `
 // - @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 const IconWrapper = styled.span`
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
+export const IconWrapper = styled.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-export const EmojiWrapper = styled.span`
-  display: inline-block;
-  margin-right: ${"var(--ds-space-025, 2px)"};
-  user-select: none;
-  ${IconOverrides}
-  ${IconObjectOverrides}
-`;
+export const 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 const IconTitleWrapper = styled.span`
-  white-space: pre-wrap;
-  word-break: break-all;
-  box-decoration-break: clone;
-  padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
-`;
+export const IconTitleWrapper = styled.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-export const LozengeWrapper = styled.span`
-  display: inline-block;
-  vertical-align: 1px;
-  margin: 0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"};
-`;
-export const RightIconPositionWrapper = styled.span`
-  margin-left: ${"var(--ds-space-025, 2px)"};
-  position: relative;
-  display: inline-block;
-`;
+export const LozengeWrapper = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
+});
+export const 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 const IconPositionWrapper = styled.span`
-  margin-right: ${"var(--ds-space-050, 4px)"};
-  position: relative;
-  display: inline-block;
-`;
-export const IconEmptyWrapper = styled.span`
-  width: 14px;
-  height: 100%;
-  display: inline-block;
-  opacity: 0;
-`;
+export const IconPositionWrapper = styled.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+export const 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 const TitleWrapperClassName = 'smart-link-title-wrapper';
-export const TitleWrapper = styled.span``;
+export const TitleWrapper = styled.span({});

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
-export const SpinnerWrapper = styled(IconTitleWrapper)`
-  vertical-align: text-bottom;
-  padding: 0px;
-`;
+export const SpinnerWrapper = styled(IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -2,41 +2,40 @@ 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 const IconStyledButton = styled.span`
-  &&& {
-    text-align: initial;
-    display: inline;
-    vertical-align: baseline;
-    border-radius: ${"var(--ds-border-radius-100, 4px)"};
-    border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-075, 6px)"};
-    background-clip: padding-box;
-    box-decoration-break: clone;
-  }
-  > span {
-    display: inline;
-    overflow: initial;
-    text-overflow: initial;
-    white-space: initial;
-    > span {
-      overflow: initial;
-      text-overflow: initial;
-      white-space: initial;
+export const 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)"} ${"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 const NoLinkAppearance = styled.span`
-  color: ${`var(--ds-text-subtlest, ${N200})`};
-  margin-left: ${"var(--ds-space-050, 4px)"};
-`;
-export const LowercaseAppearance = styled.span`
-  text-transform: lowercase;
-`;
-export const LinkAppearance = styled.a`
-  color: ${`var(--ds-link, ${B400})`};
-
-  &:hover {
-    text-decoration: none;
+});
+export const NoLinkAppearance = styled.span({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+export const LowercaseAppearance = styled.span({
+  textTransform: 'lowercase'
+});
+export const LinkAppearance = styled.a({
+  color: `var(--ds-link, ${B400})`,
+  '&:hover': {
+    textDecoration: 'none'
   }
-`;
+});

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-export const breakWordsCss = css`
-  white-space: pre-line;
-  word-break: break-all;
-`;
+export const breakWordsCss = css({
+  whiteSpace: 'pre-line',
+  wordBreak: 'break-all'
+});

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

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

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

@@ -15,22 +15,22 @@ const getImageStyles = isFlexibleUi => {
   if (isFlexibleUi) {
     return;
   }
-  return css`
-    height: ${gs(2)};
-    width: ${gs(2)};
-  `;
+  return css({
+    height: gs(2),
+    width: gs(2)
+  });
 };
 const getSpanStyles = isFlexibleUi => {
   if (isFlexibleUi) {
     return;
   }
-  return css`
-    height: ${gs(2.5)};
-    width: ${gs(2)};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `;
+  return css({
+    height: gs(2.5),
+    width: gs(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
 };
 export const Icon = ({
   url,