@atlaskit/smart-card 27.1.0 → 27.2.0

package/dist/esm/view/BlockCard/views/NotFoundView.js

@@ -43,7 +43,9 @@ export var NotFoundView = function NotFoundView(_ref) {
   };
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardNotFoundViewClassName,
     isFluidHeight: true
   }, jsx(Content, {

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -75,7 +75,9 @@ export var ResolvedView = function ResolvedView(_ref) {
     items: details
   }) : undefined;
   var resolvedByline = jsx(Byline, {
-    testId: testId ? "".concat(testId, "-by") : undefined,
+    testId: testId ? "".concat(testId, "-by") : undefined
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewByClassName
   }, byline);
   var handleClick = function handleClick(event) {
@@ -84,7 +86,9 @@ export var ResolvedView = function ResolvedView(_ref) {
   var hasActions = actions.length > 0;
   return jsx(Frame, {
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvedViewClassName
   }, jsx(Content, null, jsx("div", null, jsx("div", {
     css: styles

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -24,7 +24,9 @@ export var ResolvingView = function ResolvingView(_ref) {
     inheritDimensions: inheritDimensions,
     compact: true,
     isSelected: isSelected,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardResolvingViewClassName
   }, jsx(DocumentFilledIcon, {
     size: "small",

package/dist/esm/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -49,6 +49,8 @@ export function LazyIntersectionObserverCard(props) {
   var content = isIntersecting ? /*#__PURE__*/React.createElement(CardWithUrlContent, props) : /*#__PURE__*/React.createElement(ComponentObserver, {
     ref: ref
   }, /*#__PURE__*/React.createElement(LoadingCardLink, props));
+
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   return /*#__PURE__*/React.createElement(Component, {
     className: "loader-wrapper"
   }, content);

package/dist/esm/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -14,7 +14,9 @@ export function LazyLazilyRenderCard(props) {
   });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
-    component: appearance === 'inline' ? 'span' : 'div',
+    component: appearance === 'inline' ? 'span' : 'div'
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "loader-wrapper",
     placeholder: /*#__PURE__*/React.createElement(LoadingCardLink, props),
     scrollContainer: container,

package/dist/esm/view/CardWithUrl/component-lazy/LoadingCardLink.js

@@ -10,7 +10,9 @@ export var LoadingCardLink = function LoadingCardLink(_ref) {
     testId: 'lazy-render-placeholder',
     "data-trello-do-not-use-override": "lazy-render-placeholder-trello",
     isSelected: isSelected,
-    link: url,
+    link: url
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: loadingPlaceholderClassName,
     placeholder: placeholder
   });

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

@@ -31,35 +31,43 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
   var handleMouseDown = useMouseDownEvent();
   var isFixEmbedCardBlurEnabled = getBooleanFF('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
-    return /*#__PURE__*/React.createElement(Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/React.createElement(IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))
+    );
   };
   var renderHeader = function renderHeader() {
-    return /*#__PURE__*/React.createElement(Header, {
-      className: "embed-header",
-      frameStyle: frameStyle
-    }, /*#__PURE__*/React.createElement(IconWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-      content: text,
-      hideTooltipOnMouseDown: true
-    }, /*#__PURE__*/React.createElement(TextWrapper, {
-      isPlaceholder: isPlaceholder
-    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
-      href: href,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown
-    }, text)))));
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
   };
   var renderContent = function renderContent() {
     return /*#__PURE__*/React.createElement(Content, {
@@ -71,7 +79,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     }, children);
   };
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(LinkWrapper, {
+    return /*#__PURE__*/React.createElement(LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
@@ -86,7 +96,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       inheritDimensions: inheritDimensions
     }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(Wrapper, {
+    return /*#__PURE__*/React.createElement(Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,

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

@@ -16,7 +16,9 @@ export var ImageIcon = function ImageIcon(_ref) {
   return /*#__PURE__*/React.createElement(ImageLoader, {
     src: src,
     loading: defaultIcon,
-    loaded: /*#__PURE__*/React.createElement(Image, {
+    loaded: /*#__PURE__*/React.createElement(Image
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
       className: "smart-link-icon",
       src: src,
       alt: alt,

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -57,14 +57,17 @@ var LinkInfo = function LinkInfo(_ref) {
     }) : jsx(VidFullScreenOnIcon, {
       label: message.defaultMessage
     });
-    return jsx("span", {
-      className: "smart-link-resize-button"
-    }, jsx(LinkInfoButton, {
-      content: jsx(FormattedMessage, message),
-      icon: icon,
-      onClick: onResizeButtonClick,
-      testId: "".concat(testId, "-resize")
-    }));
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        className: "smart-link-resize-button"
+      }, jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: "".concat(testId, "-resize")
+      }))
+    );
   }, [onResizeButtonClick, size, testId]);
   return jsx("div", {
     css: containerStyles

package/dist/esm/view/FlexibleCard/components/actions/follow-action/unfollow-icon/index.js

@@ -7,7 +7,9 @@ var UnfollowGlyph = function UnfollowGlyph(props) {
     height: "16",
     viewBox: "0 0 16 16",
     "data-testid": props['data-testid'],
-    "aria-label": props['aria-label'],
+    "aria-label": props['aria-label']
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: props.className,
     role: "presentation",
     xmlns: "http://www.w3.org/2000/svg"

package/dist/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -123,7 +123,9 @@ var ActionGroup = function ActionGroup(_ref) {
     return null;
   }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? jsx("div", {
-    css: styles,
+    css: styles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: "actions-button-group",
     "data-action-open": isOpen
   }, jsx(ButtonGroup, null, actionButtons, moreActionDropdown)) : null;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -62,6 +62,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,

package/dist/esm/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -30,13 +30,16 @@ export var MotionWrapper = function MotionWrapper(_ref) {
     style: {
       height: height,
       minHeight: minHeight,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       lineHeight: 0,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',
       // a fit for purpose state variable to control when the 'visible' styles should be appled
       opacity: height > 0 ? 1 : 0,
       // we only want to transition opacity and height when the error message is initially shown
       // not if its to be shown on mount
       transitionProperty: showTransition ? transition : 'none',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       transitionDuration: '0.3s'
     },
     ref: ref

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -48,6 +48,7 @@ var LayeredLink = function LayeredLink(_ref) {
     url = _ref.url;
   var onMouseDown = useMouseDownEvent();
   return jsx("a", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),

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

@@ -36,7 +36,9 @@ var Lozenge = function Lozenge(_ref) {
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : jsx(AtlaskitLozenge, {
-    appearance: appearance,
+    appearance: appearance
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: style,
     testId: "".concat(testId, "-lozenge")
   }, text);

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

@@ -48,6 +48,7 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
     setShowPrism(status === 'loading');
   }, [status]);
   var container = jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hoverCardClassName,
     css: [HoverCardContainer, !isAIEnabled ? popupContainerStyles : undefined],
     "data-testid": testId
@@ -72,6 +73,7 @@ var ContentContainer = function ContentContainer(_ref2) {
     }, props), children);
   }
   return jsx("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: hoverCardClassName,
     css: HoverCardContainer,
     "data-testid": testId

package/dist/esm/view/InlineCard/Frame/index.js

@@ -42,7 +42,9 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyPress: handleKeyPress,
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className,
     ref: ref,
     isHovered: isHovered

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

@@ -42,7 +42,9 @@ export var Shimmer = function Shimmer(_ref) {
     width: 14,
     height: 14,
     borderRadius: 2,
-    testId: testId,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: skeletonCustomStyles
   });
 };

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

@@ -67,7 +67,9 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
       }
       return /*#__PURE__*/React.createElement(ImageLoader, {
         src: url,
-        loaded: /*#__PURE__*/React.createElement(Icon, {
+        loaded: /*#__PURE__*/React.createElement(Icon
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        , {
           className: "smart-link-icon",
           src: url,
           "data-testid": "".concat(testId, "-image")
@@ -118,22 +120,30 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         rightSide = _this$props2.rightSide,
         _this$props2$testId = _this$props2.testId,
         testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      var titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper, {
+      var titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, null, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, null), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      , {
         style: {
           color: titleTextColor
-        },
+        }
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        ,
         className: TitleWrapperClassName
       }, title));
-      return /*#__PURE__*/React.createElement(IconTitleWrapper, {
-        style: {
-          color: titleColor
-        },
-        "data-testid": testId
-      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null);
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement(IconTitleWrapper, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
+      );
     }
   }]);
   return IconAndTitleLayout;

package/dist/esm/view/InlineCard/ResolvedView/index.js

@@ -28,7 +28,9 @@ export var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
       var appearance = lozenge.appearance || 'default';
       return /*#__PURE__*/React.createElement(LozengeWrapper, null, /*#__PURE__*/React.createElement(Lozenge, {
         testId: "inline-card-resolved-view-lozenge",
-        appearance: appearance,
+        appearance: appearance
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: lozenge.style,
         isBold: lozenge.isBold
       }, lozenge.text));

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: "27.1.0",
+  packageVersion: "27.2.0",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/esm/view/RelatedLinksModal/components/RelatedLinksBaseModal.js

@@ -1,17 +1,20 @@
-import React from 'react';
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
 import { messages } from '../../../messages';
-var RelatedLinksModal = function RelatedLinksModal(_ref) {
+var RelatedLinksBaseModal = function RelatedLinksBaseModal(_ref) {
   var onClose = _ref.onClose,
     showModal = _ref.showModal,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement(ModalTransition, null, showModal && /*#__PURE__*/React.createElement(Modal, {
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.related_links_modal_title_nonfinal))), /*#__PURE__*/React.createElement(ModalBody, null, children), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx(ModalTransition, null, showModal && jsx(Modal, {
+    onClose: onClose,
+    width: "small"
+  }, jsx(ModalHeader, null, jsx(ModalTitle, null, jsx(FormattedMessage, messages.related_links_modal_title))), jsx(ModalBody, null, children), jsx(ModalFooter, null, jsx(Button, {
     appearance: "primary",
     onClick: onClose
-  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.close)))));
+  }, jsx(FormattedMessage, messages.close)))));
 };
-export default RelatedLinksModal;
+export default RelatedLinksBaseModal;

package/dist/esm/view/RelatedLinksModal/components/related-link-item/index.js

@@ -0,0 +1,49 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+var hoverStyles = xcss({
+  ':hover': {
+    backgroundColor: 'color.background.input.hovered',
+    borderRadius: 'border.radius.100',
+    marginInline: 'space.negative.100',
+    paddingInline: 'space.100'
+  }
+});
+var relatedLinkItemStyles = css({
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)",
+  gap: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
+var RelatedLinkItem = function RelatedLinkItem(_ref) {
+  var url = _ref.url,
+    testId = _ref.testId;
+  var subtitle = [{
+    name: ElementName.Provider
+  }];
+  var ui = {
+    hideElevation: true,
+    hidePadding: true,
+    hideBackground: true,
+    theme: SmartLinkTheme.Black,
+    clickableContainer: true,
+    size: SmartLinkSize.Large
+  };
+  return jsx(Box, {
+    testId: testId,
+    xcss: hoverStyles
+  }, jsx(Card, {
+    appearance: "block",
+    ui: ui,
+    url: url
+  }, jsx(TitleBlock, {
+    maxLines: 1,
+    hideTitleTooltip: true,
+    position: SmartLinkPosition.Center,
+    subtitle: subtitle,
+    overrideCss: relatedLinkItemStyles,
+    anchorTarget: "_blank"
+  })));
+};
+export default RelatedLinkItem;

package/dist/esm/view/RelatedLinksModal/components/related-links-list/index.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import RelatedLinkItem from '../related-link-item';
+import { messages } from '../../../../messages';
+var RelatedLinksList = function RelatedLinksList(_ref) {
+  var urls = _ref.urls,
+    title = _ref.title,
+    testId = _ref.testId;
+  return jsx(Stack, {
+    testId: testId
+  }, jsx(Box, {
+    paddingBlockStart: "space.050",
+    xcss: xcss({
+      font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+      textTransform: 'uppercase'
+    })
+  }, jsx(FormattedMessage, title)), urls.length > 0 && jsx(Box, null, urls.map(function (url, idx) {
+    return jsx(Stack, {
+      key: "".concat(idx, "-").concat(url)
+    }, jsx(RelatedLinkItem, {
+      url: url,
+      testId: "".concat(testId, "-item-").concat(idx)
+    }));
+  })), urls.length === 0 && jsx(Box, {
+    paddingBlock: "space.100",
+    xcss: xcss({
+      font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    })
+  }, jsx(FormattedMessage, messages.related_links_not_found)));
+};
+export default RelatedLinksList;

package/dist/esm/view/RelatedLinksModal/views/resolved/index.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+
+import { jsx } from '@emotion/react';
+import { messages } from '../../../../messages';
+import RelatedLinksList from '../../components/related-links-list';
+import { Stack } from '@atlaskit/primitives';
+var RelatedLinksResolvedView = function RelatedLinksResolvedView(_ref) {
+  var _ref$incomingLinks = _ref.incomingLinks,
+    incomingLinks = _ref$incomingLinks === void 0 ? [] : _ref$incomingLinks,
+    _ref$outgoingLinks = _ref.outgoingLinks,
+    outgoingLinks = _ref$outgoingLinks === void 0 ? [] : _ref$outgoingLinks;
+  return jsx(Stack, {
+    space: "space.150"
+  }, jsx(RelatedLinksList, {
+    urls: incomingLinks,
+    title: messages.related_links_found_in,
+    testId: "incoming-related-links-list"
+  }), jsx(RelatedLinksList, {
+    urls: outgoingLinks,
+    title: messages.related_links_includes_links_to,
+    testId: "outgoing-related-links-list"
+  }));
+};
+export default RelatedLinksResolvedView;

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

@@ -29,7 +29,9 @@ export var Byline = function Byline(_ref) {
       // due to HTML its unwrapping behaviour on paste.
       MozUserSelect: 'none'
     }),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: className
   }, text || children);
 };

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

@@ -56,7 +56,9 @@ export var Icon = function Icon(_ref) {
   });
   return jsx("span", {
     css: getSpanStyles(isFlexibleUi),
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: blockCardIconImageClassName
   }, icon || image || placeholder);
 };

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

@@ -17,7 +17,9 @@ export var MetadataList = function MetadataList(_ref) {
         marginRight: '0px'
       }
     },
-    "data-testid": testId,
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
     className: metadataListClassName
   }, items.map(function (item) {
     return jsx(Metadata, _extends({

package/dist/types/messages.d.ts

@@ -1,6 +1,6 @@
 import { type 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_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | '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' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | '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' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | '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' | 'related_links_modal_title_nonfinal' | 'related_links_view_related_urls';
+export type MessageKey = 'assigned_to' | 'ai_summarize' | 'ai_summarized' | 'ai_summarized_abbreviation' | 'ai_summarized_info' | 'ai_summarized_info_short' | 'ai_summarizing' | 'ai_summary_error_generic' | 'ai_summary_error_acceptable_use_violation' | 'ai_summary_error_hipaa_content_detected' | 'ai_summary_error_exceeding_context_length_error' | 'ai_summary_action' | 'ai_summary_action_description' | 'automation_action_title' | 'automation_action_tooltip' | 'automation_action_icon_label' | 'automation_action_confluence_page_modal_title' | 'automation_action_confluence_page_modal_description' | 'copy_summary_action' | 'copy_summary_action_description' | 'copied_summary_action_description' | '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' | 'follow_project_description' | 'follow_project' | 'follow_goal' | 'follow_goal_description' | 'follow_project_error' | 'follow_goal_error' | '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' | 'unfollow_project_description' | 'unfollow_project' | 'unfollow_project_error' | 'unfollow_goal' | 'unfollow_goal_description' | 'unfollow_goal_error' | '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' | 'related_links_modal_title' | 'related_links_view_related_urls' | 'related_links_found_in' | 'related_links_includes_links_to' | 'related_links_not_found';
 type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/RelatedLinksModal/components/RelatedLinksBaseModal.d.ts

@@ -1,4 +1,5 @@
-/// <reference types="react" />
-import { type RelatedLinksModalProps } from '../types';
-declare const RelatedLinksModal: ({ onClose, showModal, children, }: RelatedLinksModalProps) => JSX.Element;
-export default RelatedLinksModal;
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type RelatedLinksBaseModalProps } from './types';
+declare const RelatedLinksBaseModal: ({ onClose, showModal, children, }: RelatedLinksBaseModalProps) => jsx.JSX.Element;
+export default RelatedLinksBaseModal;

package/dist/types/view/RelatedLinksModal/components/related-link-item/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { type RelatedLinkItemProp } from '../types';
+declare const RelatedLinkItem: ({ url, testId }: RelatedLinkItemProp) => jsx.JSX.Element;
+export default RelatedLinkItem;