@atlaskit/smart-card 27.0.0 → 27.2.0

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

@@ -2,67 +2,69 @@ import { UserInputType } from './types';
 const mockScope = {
   resources: []
 };
-export const mockRules = [{
-  id: 0,
-  name: 'Test rule 0 (no inputs)',
-  ruleScope: mockScope,
-  userInputs: []
-}, {
-  id: 1,
-  name: 'Test rule 1 (has inputs)',
-  ruleScope: mockScope,
-  userInputs: [{
-    defaultValue: '',
-    displayName: 'Test user input',
-    inputType: UserInputType.TEXT,
-    required: false,
-    variableName: 'testUserInput'
-  }]
-}, {
-  id: 2,
-  name: 'Test rule 2 (has multiple inputs)',
-  ruleScope: mockScope,
-  userInputs: [{
-    defaultValue: '',
-    displayName: 'Text user input',
-    inputType: UserInputType.TEXT,
-    required: false,
-    variableName: 'textUserInput'
-  }, {
-    defaultValue: '',
-    displayName: 'Number user input',
-    inputType: UserInputType.NUMBER,
-    required: false,
-    variableName: 'numberUserInput'
+export const mockRules = {
+  data: [{
+    id: 0,
+    name: 'Test rule 0 (no inputs)',
+    ruleScope: mockScope,
+    userInputs: []
   }, {
-    defaultValue: true,
-    displayName: 'Boolean user input',
-    inputType: UserInputType.BOOLEAN,
-    required: false,
-    variableName: 'booleanUserInput'
+    id: 1,
+    name: 'Test rule 1 (has inputs)',
+    ruleScope: mockScope,
+    userInputs: [{
+      defaultValue: '',
+      displayName: 'Test user input',
+      inputType: UserInputType.TEXT,
+      required: false,
+      variableName: 'testUserInput'
+    }]
   }, {
-    defaultValue: [''],
-    displayName: 'Dropdown user input',
-    inputType: UserInputType.DROPDOWN,
-    required: false,
-    variableName: 'dropdownUserInput'
-  }, {
-    defaultValue: '',
-    displayName: 'Paragraph user input',
-    inputType: UserInputType.PARAGRAPH,
-    required: false,
-    variableName: 'paragraphUserInput'
+    id: 2,
+    name: 'Test rule 2 (has multiple inputs)',
+    ruleScope: mockScope,
+    userInputs: [{
+      defaultValue: '',
+      displayName: 'Text user input',
+      inputType: UserInputType.TEXT,
+      required: false,
+      variableName: 'textUserInput'
+    }, {
+      defaultValue: '',
+      displayName: 'Number user input',
+      inputType: UserInputType.NUMBER,
+      required: false,
+      variableName: 'numberUserInput'
+    }, {
+      defaultValue: true,
+      displayName: 'Boolean user input',
+      inputType: UserInputType.BOOLEAN,
+      required: false,
+      variableName: 'booleanUserInput'
+    }, {
+      defaultValue: [''],
+      displayName: 'Dropdown user input',
+      inputType: UserInputType.DROPDOWN,
+      required: false,
+      variableName: 'dropdownUserInput'
+    }, {
+      defaultValue: '',
+      displayName: 'Paragraph user input',
+      inputType: UserInputType.PARAGRAPH,
+      required: false,
+      variableName: 'paragraphUserInput'
+    }]
   }]
-}];
+};
 export const mockTransformedRules = [{
-  ...mockRules[0],
-  userInputPrompts: mockRules[0].userInputs
+  ...mockRules.data[0],
+  userInputPrompts: mockRules.data[0].userInputs
 }, {
-  ...mockRules[1],
-  userInputPrompts: mockRules[1].userInputs
+  ...mockRules.data[1],
+  userInputPrompts: mockRules.data[1].userInputs
 }, {
-  ...mockRules[2],
-  userInputPrompts: mockRules[2].userInputs
+  ...mockRules.data[2],
+  userInputPrompts: mockRules.data[2].userInputs
 }];
 export const mockInvocationResponse = {
   'TEST-1': 'SUCCESS'

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

@@ -1,5 +1,3 @@
-import { getAutomationStack } from './stack-resolver';
-
 /**
  * This function will extract the cloud ID and product from a product level Site ARI.
  * ARIs can be found at the following link: {@link https://developer.atlassian.com/platform/atlassian-resource-identifier/resource-owners/registry/#ari-registry}
@@ -41,32 +39,29 @@ export const extractCloudIdAndProductFromSite = site => {
  * model language is used here, even though for the meantime we only concern ourselves with alerts.
  *
  */
-export const getSearchUrl = async (env, site) => {
+export const getSearchUrl = async site => {
   const {
     product,
     cloudId
   } = extractCloudIdAndProductFromSite(site);
-  const automationStack = await getAutomationStack(env, cloudId);
   // TODO in the unified API, GET requests as according to Atlassian API standards will destructure the whole query into
   // query parameters as part of the URL. For now, this is considered a POST request instead and thus the query is used
   // later on as the request body.
-  return `/gateway/api/automation/internal-api/${product}/${cloudId}/${automationStack}/rest/v1/rules/manual/search`;
+  return `/gateway/api/automation/public/${product}/${cloudId}/rest/v1/rule/manual/search`;
 };
-export const getInvocationUrl = async (env, site, ruleId) => {
+export const getInvocationUrl = async (site, ruleId) => {
   const {
     product,
     cloudId
   } = extractCloudIdAndProductFromSite(site);
-  const automationStack = await getAutomationStack(env, cloudId);
-  return `/gateway/api/automation/internal-api/${product}/${cloudId}/${automationStack}/rest/v1/rules/manual/invocation/${ruleId}`;
+  return `/gateway/api/automation/public/${product}/${cloudId}/rest/v1/rule/manual/${ruleId}/invocation`;
 };
 const DEFAULT_HEADER = {
   'Content-Type': 'application/json'
 };
-const _performRequest = async (url, method, options = {
-  headers: DEFAULT_HEADER
-}) => {
+const _performRequest = async (url, method, options) => {
   const response = await fetch(url, {
+    headers: DEFAULT_HEADER,
     ...options,
     method
   });
@@ -77,27 +72,4 @@ export const performGetRequest = async (url, options) => {
 };
 export const performPostRequest = async (url, options) => {
   return _performRequest(url, 'POST', options);
-};
-
-// TODO this will need to be expanded to resolve the correct product URL, too.
-// TODO for instance this will need to support Alerts UI URL resolution in the
-// TODO short term
-export const getBaseAutomationUrl = ({
-  projectKey,
-  projectType,
-  isSimplified
-}) => {
-  /**
-   * Confusing mapping of urls here.
-   * Classic Projects - always under /automate
-   * Next Gen Projects - under /automation for all project types except JSD
-   */
-  switch (projectType) {
-    case 'service_desk':
-      return `/jira/servicedesk/projects/${projectKey}/settings/automate`;
-    case 'business':
-      return `/jira/core/projects/${projectKey}/settings/${isSimplified ? 'automation' : 'automate'}`;
-    default:
-      return `/jira/software/${isSimplified ? '' : 'c/'}projects/${projectKey}/settings/${isSimplified ? 'automation' : 'automate'}`;
-  }
 };

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

@@ -1,2 +1 @@
-export { extractCloudIdAndProductFromSite, getSearchUrl, getInvocationUrl, performGetRequest, performPostRequest, getBaseAutomationUrl } from './api';
-export { getAutomationStackFromLocalStorage, getAutomationStack } from './stack-resolver';
+export { extractCloudIdAndProductFromSite, getSearchUrl, getInvocationUrl, performGetRequest, performPostRequest } from './api';

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

@@ -1,3 +1,2 @@
 export { searchManuallyTriggeredRules, invokeManuallyTriggeredRule } from './services';
-export { getBaseAutomationUrl } from './common/utils';
 export { useManualRules, ManualRulesContainer } from './main';

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

@@ -7,11 +7,10 @@ import UserInputForm from './manual-triggers-form/main';
 /**
  * React hook that implements the fetch and invoke actions for manual triggers.
  * Can be used standalone or in the HOC provided below.
- * @param env - The environment to retrieve rules from
  * @param site - The site to filter on. We map this to just a cloudId to resolve the manual rules API path
  * @param query - Query object containing filter props (container, object(s))
  */
-export const useManualRules = (env, site, query) => {
+export const useManualRules = (site, query) => {
   const [initialised, setInitialised] = useState(false);
   const [error, setError] = useState(null);
   const [rules, setRules] = useState([]);
@@ -22,7 +21,7 @@ export const useManualRules = (env, site, query) => {
   const triggerFetch = async () => {
     setInitialised(false);
     try {
-      const fetchedRules = await searchManuallyTriggeredRules(env, site, query);
+      const fetchedRules = await searchManuallyTriggeredRules(site, query);
       setError(null);
       setRules(transformRules(fetchedRules));
     } catch (e) {
@@ -50,11 +49,10 @@ export const useManualRules = (env, site, query) => {
  * should not care about this, only how to trigger invocation and understand
  * the invocation lifecycle.
  *
- * @param props - environment, cloudId, projectId, children
+ * @param props - cloudId, projectId, children
  */
 export const ManualRulesContainer = props => {
   const {
-    env,
     site,
     query,
     children,
@@ -66,7 +64,7 @@ export const ManualRulesContainer = props => {
     onRuleInvocationLifecycleDone
   } = props;
   // Initial data loading state
-  const [triggerFetch, initialised, error, rules] = useManualRules(env, site, query);
+  const [triggerFetch, initialised, error, rules] = useManualRules(site, query);
   // We store a rule in state here if and only if a rule has user inputs, and thus
   // we need to preserve state while the input dialog is open.
   const [selectedRule, setSelectedRule] = useState(null);
@@ -102,7 +100,7 @@ export const ManualRulesContainer = props => {
         if (onRuleInvocationLifecycleStarted) {
           onRuleInvocationLifecycleStarted(ruleId, objects, userInputs);
         }
-        const response = await invokeManuallyTriggeredRule(env, site, ruleId, objects, userInputs);
+        const response = await invokeManuallyTriggeredRule(site, ruleId, objects, userInputs);
         const failedObjects = getFailedObjects(response);
         setInvokingRuleId(null);
         if (failedObjects.length === 0) {

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-container/services/index.js

@@ -2,19 +2,19 @@ import { getInvocationUrl, getSearchUrl, performPostRequest } from './../common/
 
 /**
  * Manual trigger rules API fetch. Fetches a list of manually triggered rules according to the context provided
- * in env, and query.
- * @param env - The environment to look up rules against
+ * in query.
+ * @param site - the site ARI to fetch the rules against
  * @param query - the workspace/container/objects to fetch rules against
  */
-export const searchManuallyTriggeredRules = async (env, site, query) => {
-  const url = await getSearchUrl(env, site);
+export const searchManuallyTriggeredRules = async (site, query) => {
+  const url = await getSearchUrl(site);
   // TODO this will in the new API be a GET request instead, with the above getSearchUrl method
   // constructing a URL with the appropriate query parameters. For now, instead, we pass the
   // destructured query through as a POST body.
   const response = await performPostRequest(url, {
     body: JSON.stringify(query)
   });
-  return response.reduce((acc, {
+  return response.data.reduce((acc, {
     id,
     name,
     ruleScope,
@@ -33,14 +33,13 @@ export const searchManuallyTriggeredRules = async (env, site, query) => {
 
 /**
  * Invoke a manually triggered rule via the API.
- * @param env - the environment to use when invoking the rule
  * @param cloudId - the site the rule belongs to
  * @param ruleId - the identifier of the rule you want to invoke
  * @param objects - the list of objects you wish to create an automation event for.
  * @param userInputs - the optional user inputs if this manual trigger requires them
  */
-export const invokeManuallyTriggeredRule = async (env, site, ruleId, objects, userInputs) => {
-  const url = await getInvocationUrl(env, site, ruleId);
+export const invokeManuallyTriggeredRule = async (site, ruleId, objects, userInputs) => {
+  const url = await getInvocationUrl(site, ruleId);
   const bodyRaw = {
     objects
   };

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

@@ -6,7 +6,6 @@ import { AutomationModalBody } from './sub-components/body';
 import { AutomationModalFooter } from './sub-components/footer';
 import { AutomationModalHeader } from './sub-components/header';
 export const AutomationModal = ({
-  environment,
   baseAutomationUrl,
   siteAri,
   objectAri,
@@ -32,7 +31,6 @@ export const AutomationModal = ({
     }).fire();
   }, [createAnalyticsEvent, analyticsSource]);
   return /*#__PURE__*/React.createElement(AutomationMenuContextContainer, {
-    environment: environment,
     baseAutomationUrl: baseAutomationUrl,
     objectAri: objectAri,
     siteAri: siteAri,

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/menu-context/main.js

@@ -22,7 +22,6 @@ export const useAutomationMenu = () => {
   return context;
 };
 export const AutomationMenuContextContainer = ({
-  environment,
   baseAutomationUrl,
   analyticsSource,
   objectAri,
@@ -36,7 +35,6 @@ export const AutomationMenuContextContainer = ({
   onRuleInvocationLifecycleDone
 }) => {
   return /*#__PURE__*/React.createElement(ManualRulesContainer, {
-    env: environment,
     site: siteAri,
     query: {
       objects: [objectAri]

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

@@ -6,7 +6,6 @@ import Action from '../action';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-import { useSmartLinkContext } from '@atlaskit/link-provider';
 const AutomationModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
 const handleAutomateActionClick = setIsModalOpen => {
   setIsModalOpen(true);
@@ -15,16 +14,11 @@ const handleAutomationActionClose = setIsModalOpen => {
   setIsModalOpen(false);
 };
 const AutomationAction = props => {
-  var _ref, _context$actions;
+  var _context$actions;
   const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     formatMessage
   } = useIntl();
-  const smartLinkContext = useSmartLinkContext();
-  const {
-    connections
-  } = smartLinkContext;
-  const environment = (_ref = connections.client.envKey) !== null && _ref !== void 0 ? _ref : 'prod';
   const context = useFlexibleUiContext();
   const automationActionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
   if (!automationActionData) {
@@ -66,7 +60,6 @@ const AutomationAction = props => {
   React.createElement(Suspense, {
     fallback: false
   }, /*#__PURE__*/React.createElement(AutomationModal, {
-    environment: environment,
     baseAutomationUrl: baseAutomationUrl,
     objectAri: objectAri,
     siteAri: siteAri,

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

@@ -6,7 +6,9 @@ const UnfollowGlyph = props => /*#__PURE__*/React.createElement("svg", {
   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/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -103,7 +103,9 @@ const ActionGroup = ({
     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/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -63,6 +63,7 @@ const TitleBlockErroredView = ({
     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/es2019/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -24,13 +24,16 @@ export const MotionWrapper = ({
     style: {
       height,
       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/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -49,6 +49,7 @@ const LayeredLink = ({
 }) => {
   const 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": `${testId}-layered-link`,

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

@@ -35,7 +35,9 @@ const Lozenge = ({
     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: `${testId}-lozenge`
   }, text);

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

@@ -45,6 +45,7 @@ const ConnectedAIPrismContainer = ({
     setShowPrism(status === 'loading');
   }, [status]);
   const 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
@@ -69,6 +70,7 @@ const ContentContainer = ({
     }, 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/es2019/view/InlineCard/Frame/index.js

@@ -44,7 +44,9 @@ export const Frame = /*#__PURE__*/forwardRef((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/es2019/view/InlineCard/Icon.js

@@ -43,7 +43,9 @@ export const Shimmer = ({
     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/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -54,7 +54,9 @@ export class IconAndTitleLayout extends 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": `${testId}-image`
@@ -101,22 +103,30 @@ export class IconAndTitleLayout extends React.Component {
       rightSide,
       testId = 'inline-card-icon-and-title'
     } = this.props;
-    const 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, {
+    const 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)
+    );
   }
 }
 _defineProperty(IconAndTitleLayout, "defaultProps", {

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

@@ -15,7 +15,9 @@ export class InlineCardResolvedView extends React.Component {
     const 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/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: "27.0.0",
+  packageVersion: "27.2.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -1,18 +1,21 @@
-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';
-const RelatedLinksModal = ({
+const RelatedLinksBaseModal = ({
   onClose,
   showModal,
   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/es2019/view/RelatedLinksModal/components/related-link-item/index.js

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { Box, xcss } from '@atlaskit/primitives';
+import { Card, ElementName, SmartLinkPosition, SmartLinkSize, SmartLinkTheme, TitleBlock } from '../../../../index';
+const hoverStyles = xcss({
+  ':hover': {
+    backgroundColor: 'color.background.input.hovered',
+    borderRadius: 'border.radius.100',
+    marginInline: 'space.negative.100',
+    paddingInline: 'space.100'
+  }
+});
+const 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)"
+});
+const RelatedLinkItem = ({
+  url,
+  testId
+}) => {
+  const subtitle = [{
+    name: ElementName.Provider
+  }];
+  const 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;