@atlaskit/smart-card 30.4.2 → 31.0.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 31.0.0
+
+### Major Changes
+
+- [#168886](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168886)
+  [`1b7dbf4237106`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b7dbf4237106) -
+  Remove deprecated prop `useLegacyBlockCard`
+
+### Patch Changes
+
+- [#167375](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167375)
+  [`ce85e442a7d6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ce85e442a7d6e) -
+  [ux] Use atlaskit primitives for typography
+
 ## 30.4.2
 
 ### Patch Changes

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

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

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

@@ -8,6 +8,7 @@ exports.blockCardResolvingViewClassName = exports.ResolvingView = void 0;
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _fileEditorFile = _interopRequireDefault(require("@atlaskit/icon/core/migration/file--editor-file"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _utils = require("../../common/utils");
@@ -21,7 +22,7 @@ var _Frame = require("../components/Frame");
 /**
  * Class name for selecting non-flexible resolving block card
  *
- * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 var blockCardResolvingViewClassName = exports.blockCardResolvingViewClassName = 'block-card-resolving-view';
@@ -50,7 +51,7 @@ var ResolvingView = exports.ResolvingView = function ResolvingView(_ref) {
     color: "var(--ds-icon-subtle, ".concat(_colors.N50, ")"),
     label: "document-icon",
     LEGACY_margin: "0 -4.3px 0 -4px"
-  }), (0, _react.jsx)("span", {
-    css: messageStyles
+  }), (0, _react.jsx)(_primitives.Inline, {
+    xcss: messageStyles
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.loading)));
 };

package/dist/cjs/view/CardWithUrl/component.js

@@ -48,7 +48,6 @@ function Component(_ref) {
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents,
-    useLegacyBlockCard = _ref.useLegacyBlockCard,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
@@ -250,7 +249,7 @@ function Component(_ref) {
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: useLegacyBlockCard !== true
+        enableFlexibleBlockCard: true
       });
     case 'embed':
       return /*#__PURE__*/_react.default.createElement(_EmbedCard.EmbedCard, {

package/dist/cjs/view/CardWithUrl/loader.js

@@ -62,7 +62,6 @@ function CardWithURLRenderer(props) {
     showAuthTooltip = props.showAuthTooltip,
     placeholder = props.placeholder,
     fallbackComponent = props.fallbackComponent,
-    useLegacyBlockCard = props.useLegacyBlockCard,
     removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
     resolvingPlaceholder = props.resolvingPlaceholder,
     truncateInline = props.truncateInline;
@@ -131,7 +130,6 @@ function CardWithURLRenderer(props) {
     hoverPreviewOptions: hoverPreviewOptions,
     showAuthTooltip: showAuthTooltip,
     placeholder: placeholder,
-    useLegacyBlockCard: useLegacyBlockCard,
     removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
     resolvingPlaceholder: resolvingPlaceholder,
     truncateInline: truncateInline

package/dist/cjs/view/EmbedCard/views/ErroredView.js

@@ -9,6 +9,7 @@ var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _messages = require("../../../messages");
 var _Frame = require("../../BlockCard/components/Frame");
@@ -35,6 +36,10 @@ var messageStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxHeight: (0, _utils.gs)(3)
 });
+var boxStyles = (0, _primitives.xcss)({
+  paddingLeft: 'space.050',
+  paddingRight: 'space.050'
+});
 var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErroredView(_ref) {
   var onRetry = _ref.onRetry,
     _ref$isSelected = _ref.isSelected,
@@ -51,9 +56,11 @@ var EmbedCardErroredView = exports.EmbedCardErroredView = function EmbedCardErro
     LEGACY_size: "small",
     color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),
     label: "error-icon"
-  }), (0, _react.jsx)("span", {
-    css: messageStyles
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link)), (0, _react.jsx)(_button.default, {
+  }), (0, _react.jsx)(_primitives.Box, {
+    xcss: boxStyles
+  }, (0, _react.jsx)(_primitives.Inline, {
+    xcss: messageStyles
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.could_not_load_link))), (0, _react.jsx)(_button.default, {
     testId: "err-view-retry",
     appearance: "link",
     spacing: "none",

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

@@ -10,13 +10,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _automation = _interopRequireDefault(require("@atlaskit/icon/core/automation"));
+var _primitives = require("@atlaskit/primitives");
 var _useAnalyticsEvents2 = require("../../../../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _modal = require("../../../../../state/modal");
 var _action = _interopRequireDefault(require("../action"));
-var _manaulTriggersIcon = _interopRequireDefault(require("./manaul-triggers-icon"));
+var _manualTriggersIcon = _interopRequireDefault(require("./manual-triggers-icon"));
 var _utils = require("./utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -53,7 +54,9 @@ var AutomationAction = function AutomationAction(props) {
       values: {
         name: objectName,
         b: function b(chunks) {
-          return /*#__PURE__*/_react.default.createElement("strong", null, chunks);
+          return /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+            as: "strong"
+          }, chunks);
         },
         br: /*#__PURE__*/_react.default.createElement("br", null)
       }
@@ -82,7 +85,7 @@ var AutomationAction = function AutomationAction(props) {
     content: automationActionTitle,
     icon: /*#__PURE__*/_react.default.createElement(_automation.default, {
       spacing: "spacious",
-      LEGACY_fallbackIcon: _manaulTriggersIcon.default,
+      LEGACY_fallbackIcon: _manualTriggersIcon.default,
       color: "currentColor",
       label: automationActionIconLabel
     }),

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

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("../../../../../../constants");
 var _elements = require("../../../elements");
 var _utils = require("../../../utils");
@@ -28,6 +29,13 @@ var actionStyles = (0, _react.css)({
     textDecoration: 'underline'
   }
 });
+var actionHoverStyles = (0, _react.css)({
+  position: 'relative',
+  zIndex: 1,
+  '&:focus': {
+    outlineOffset: "var(--ds-space-negative-025, -2px)"
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
   return (0, _react.css)({
@@ -45,7 +53,9 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
     ':focus': {
       outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
     }
-  });
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionHoverStyles : '');
 };
 
 /**
@@ -79,14 +89,12 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   }), title, descriptor && (0, _react.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, (0, _react.jsx)("span", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: hasAction ? 'has-action' : ''
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getMessageStyles(size, hasAction),
+  }, (0, _react.jsx)(_primitives.Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": "".concat(testId, "-errored-view-message"),
+    testId: "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
   }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values

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

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "30.4.2",
+  packageVersion: "31.0.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "30.4.2"
+  packageVersion: "31.0.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -6,6 +6,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import DocumentFilledIcon from '@atlaskit/icon/core/migration/file--editor-file';
+import { Inline } from '@atlaskit/primitives';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { gs } from '../../common/utils';
@@ -13,7 +14,7 @@ import { Frame } from '../components/Frame';
 /**
  * Class name for selecting non-flexible resolving block card
  *
- * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export const blockCardResolvingViewClassName = 'block-card-resolving-view';
@@ -40,6 +41,6 @@ export const ResolvingView = ({
   color: `var(--ds-icon-subtle, ${N50})`,
   label: "document-icon",
   LEGACY_margin: "0 -4.3px 0 -4px"
-}), jsx("span", {
-  css: messageStyles
+}), jsx(Inline, {
+  xcss: messageStyles
 }, jsx(FormattedMessage, messages.loading)));

package/dist/es2019/view/CardWithUrl/component.js

@@ -38,7 +38,6 @@ function Component({
   hoverPreviewOptions,
   showAuthTooltip,
   analyticsEvents,
-  useLegacyBlockCard,
   removeTextHighlightingFromTitle,
   resolvingPlaceholder,
   truncateInline
@@ -238,7 +237,7 @@ function Component({
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: useLegacyBlockCard !== true
+        enableFlexibleBlockCard: true
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

package/dist/es2019/view/CardWithUrl/loader.js

@@ -41,7 +41,6 @@ export function CardWithURLRenderer(props) {
     showAuthTooltip,
     placeholder,
     fallbackComponent,
-    useLegacyBlockCard,
     removeTextHighlightingFromTitle,
     resolvingPlaceholder,
     truncateInline
@@ -109,7 +108,6 @@ export function CardWithURLRenderer(props) {
     hoverPreviewOptions,
     showAuthTooltip,
     placeholder,
-    useLegacyBlockCard,
     removeTextHighlightingFromTitle,
     resolvingPlaceholder,
     truncateInline

package/dist/es2019/view/EmbedCard/views/ErroredView.js

@@ -7,6 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { Frame } from '../../BlockCard/components/Frame';
@@ -27,6 +28,10 @@ const messageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxHeight: gs(3)
 });
+const boxStyles = xcss({
+  paddingLeft: 'space.050',
+  paddingRight: 'space.050'
+});
 export const EmbedCardErroredView = ({
   onRetry,
   isSelected = false,
@@ -41,9 +46,11 @@ export const EmbedCardErroredView = ({
   LEGACY_size: "small",
   color: `var(--ds-icon-danger, ${R300})`,
   label: "error-icon"
-}), jsx("span", {
-  css: messageStyles
-}, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
+}), jsx(Box, {
+  xcss: boxStyles
+}, jsx(Inline, {
+  xcss: messageStyles
+}, jsx(FormattedMessage, messages.could_not_load_link))), jsx(Button, {
   testId: "err-view-retry",
   appearance: "link",
   spacing: "none",

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

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { lazy, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AutomationIcon from '@atlaskit/icon/core/automation';
+import { Text } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkModal } from '../../../../../state/modal';
 import Action from '../action';
-import AutomationManualTriggersGlyph from './manaul-triggers-icon';
+import AutomationManualTriggersGlyph from './manual-triggers-icon';
 import { getModalContent } from './utils';
 const AutomationModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
 const AutomationAction = props => {
@@ -45,7 +46,9 @@ const AutomationAction = props => {
     const automationModalDescription = modalDescription ? /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalDescription, {
       values: {
         name: objectName,
-        b: chunks => /*#__PURE__*/React.createElement("strong", null, chunks),
+        b: chunks => /*#__PURE__*/React.createElement(Text, {
+          as: "strong"
+        }, chunks),
         br: /*#__PURE__*/React.createElement("br", null)
       }
     })) : undefined;

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

@@ -6,6 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
@@ -19,6 +20,13 @@ const actionStyles = css({
     textDecoration: 'underline'
   }
 });
+const actionHoverStyles = css({
+  position: 'relative',
+  zIndex: 1,
+  '&:focus': {
+    outlineOffset: "var(--ds-space-negative-025, -2px)"
+  }
+});
 const getMessageStyles = (size, hasAction) => {
   const sizeStyles = getLinkSizeStyles(size);
   return css({
@@ -36,7 +44,9 @@ const getMessageStyles = (size, hasAction) => {
     ':focus': {
       outline: `${"var(--ds-border-focused, #388BFF)"} solid 2px`
     }
-  });
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionHoverStyles : '');
 };
 
 /**
@@ -73,14 +83,12 @@ const TitleBlockErroredView = ({
   }), title, descriptor && jsx(ElementGroup, {
     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' : ''
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getMessageStyles(size, hasAction),
+  }, jsx(Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": `${testId}-errored-view-message`,
+    testId: `${testId}-errored-view-message`,
     tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values

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

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

package/dist/esm/utils/analytics/analytics.js

@@ -10,7 +10,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "30.4.2"
+  packageVersion: "31.0.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -6,6 +6,7 @@
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import DocumentFilledIcon from '@atlaskit/icon/core/migration/file--editor-file';
+import { Inline } from '@atlaskit/primitives';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { gs } from '../../common/utils';
@@ -13,7 +14,7 @@ import { Frame } from '../components/Frame';
 /**
  * Class name for selecting non-flexible resolving block card
  *
- * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export var blockCardResolvingViewClassName = 'block-card-resolving-view';
@@ -42,7 +43,7 @@ export var ResolvingView = function ResolvingView(_ref) {
     color: "var(--ds-icon-subtle, ".concat(N50, ")"),
     label: "document-icon",
     LEGACY_margin: "0 -4.3px 0 -4px"
-  }), jsx("span", {
-    css: messageStyles
+  }), jsx(Inline, {
+    xcss: messageStyles
   }, jsx(FormattedMessage, messages.loading)));
 };

package/dist/esm/view/CardWithUrl/component.js

@@ -38,7 +38,6 @@ function Component(_ref) {
     hoverPreviewOptions = _ref.hoverPreviewOptions,
     showAuthTooltip = _ref.showAuthTooltip,
     analyticsEvents = _ref.analyticsEvents,
-    useLegacyBlockCard = _ref.useLegacyBlockCard,
     removeTextHighlightingFromTitle = _ref.removeTextHighlightingFromTitle,
     resolvingPlaceholder = _ref.resolvingPlaceholder,
     truncateInline = _ref.truncateInline;
@@ -240,7 +239,7 @@ function Component(_ref) {
         testId: testId,
         actionOptions: actionOptions,
         platform: platform,
-        enableFlexibleBlockCard: useLegacyBlockCard !== true
+        enableFlexibleBlockCard: true
       });
     case 'embed':
       return /*#__PURE__*/React.createElement(EmbedCard, {

package/dist/esm/view/CardWithUrl/loader.js

@@ -49,7 +49,6 @@ export function CardWithURLRenderer(props) {
     showAuthTooltip = props.showAuthTooltip,
     placeholder = props.placeholder,
     fallbackComponent = props.fallbackComponent,
-    useLegacyBlockCard = props.useLegacyBlockCard,
     removeTextHighlightingFromTitle = props.removeTextHighlightingFromTitle,
     resolvingPlaceholder = props.resolvingPlaceholder,
     truncateInline = props.truncateInline;
@@ -118,7 +117,6 @@ export function CardWithURLRenderer(props) {
     hoverPreviewOptions: hoverPreviewOptions,
     showAuthTooltip: showAuthTooltip,
     placeholder: placeholder,
-    useLegacyBlockCard: useLegacyBlockCard,
     removeTextHighlightingFromTitle: removeTextHighlightingFromTitle,
     resolvingPlaceholder: resolvingPlaceholder,
     truncateInline: truncateInline

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -7,6 +7,7 @@ import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/core/migration/error';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { Frame } from '../../BlockCard/components/Frame';
@@ -27,6 +28,10 @@ var messageStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxHeight: gs(3)
 });
+var boxStyles = xcss({
+  paddingLeft: 'space.050',
+  paddingRight: 'space.050'
+});
 export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
   var onRetry = _ref.onRetry,
     _ref$isSelected = _ref.isSelected,
@@ -43,9 +48,11 @@ export var EmbedCardErroredView = function EmbedCardErroredView(_ref) {
     LEGACY_size: "small",
     color: "var(--ds-icon-danger, ".concat(R300, ")"),
     label: "error-icon"
-  }), jsx("span", {
-    css: messageStyles
-  }, jsx(FormattedMessage, messages.could_not_load_link)), jsx(Button, {
+  }), jsx(Box, {
+    xcss: boxStyles
+  }, jsx(Inline, {
+    xcss: messageStyles
+  }, jsx(FormattedMessage, messages.could_not_load_link))), jsx(Button, {
     testId: "err-view-retry",
     appearance: "link",
     spacing: "none",

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

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { lazy, useCallback } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AutomationIcon from '@atlaskit/icon/core/automation';
+import { Text } from '@atlaskit/primitives';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { useSmartLinkModal } from '../../../../../state/modal';
 import Action from '../action';
-import AutomationManualTriggersGlyph from './manaul-triggers-icon';
+import AutomationManualTriggersGlyph from './manual-triggers-icon';
 import { getModalContent } from './utils';
 var AutomationModal = /*#__PURE__*/lazy(function () {
   return import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal');
@@ -41,7 +42,9 @@ var AutomationAction = function AutomationAction(props) {
       values: {
         name: objectName,
         b: function b(chunks) {
-          return /*#__PURE__*/React.createElement("strong", null, chunks);
+          return /*#__PURE__*/React.createElement(Text, {
+            as: "strong"
+          }, chunks);
         },
         br: /*#__PURE__*/React.createElement("br", null)
       }

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

@@ -8,6 +8,7 @@ var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon",
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { Box } from '@atlaskit/primitives';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
@@ -21,6 +22,13 @@ var actionStyles = css({
     textDecoration: 'underline'
   }
 });
+var actionHoverStyles = css({
+  position: 'relative',
+  zIndex: 1,
+  '&:focus': {
+    outlineOffset: "var(--ds-space-negative-025, -2px)"
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
   return css({
@@ -38,7 +46,9 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
     ':focus': {
       outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
     }
-  });
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  hasAction ? actionHoverStyles : '');
 };
 
 /**
@@ -72,14 +82,12 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   }), title, descriptor && jsx(ElementGroup, {
     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' : ''
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    ,
-    css: getMessageStyles(size, hasAction),
+  }, jsx(Box
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+  , {
+    xcss: getMessageStyles(size, hasAction),
     onClick: onClick,
-    "data-testid": "".concat(testId, "-errored-view-message"),
+    testId: "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
   }, jsx(FormattedMessage, _extends({}, descriptor, {
     values: values

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

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

package/dist/types/view/BlockCard/views/ResolvingView.d.ts

@@ -11,7 +11,7 @@ export interface ResolvingProps {
 /**
  * Class name for selecting non-flexible resolving block card
  *
- * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export declare const blockCardResolvingViewClassName = "block-card-resolving-view";

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

@@ -3,5 +3,5 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type CardAppearance, type CardPlatform, type CardProps } from './types';
 export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<Omit<CardProps & WrappedComponentProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "actionOptions" | "hoverPreviewOptions" | "onResolve" | "showHoverPreview" | "showAuthTooltip" | "platform" | "forwardedRef" | "fallbackComponent" | "inlinePreloaderStyle" | "isHovered" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "truncateInline" | "useLegacyBlockCard" | "embedIframeRef" | "embedIframeUrlType" | "frameStyle"> & React.RefAttributes<any>>;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "actionOptions" | "hoverPreviewOptions" | "onResolve" | "showHoverPreview" | "showAuthTooltip" | "platform" | "forwardedRef" | "fallbackComponent" | "inlinePreloaderStyle" | "isHovered" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "truncateInline" | "embedIframeRef" | "embedIframeUrlType" | "frameStyle"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

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

@@ -138,13 +138,6 @@ export interface InlineProps extends HoverPreviewProps {
     truncateInline?: boolean;
 }
 export interface BlockProps extends ActionProps {
-    /**
-     * When enabled the legacy block card is always used, even if the enableFlexibleBlockCard flag is set to true.
-     * Usage is strongly discouraged. This should only be used if there is a specific reason you're
-     * unable to use the new flexible block cards.
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
-     */
-    useLegacyBlockCard?: boolean;
 }
 export interface EmbedProps {
     /**

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

@@ -30,7 +30,6 @@ export type CardWithUrlContentProps = {
     showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;
-    useLegacyBlockCard?: boolean;
     removeTextHighlightingFromTitle?: boolean;
     resolvingPlaceholder?: string;
     truncateInline?: boolean;

package/dist/types/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -9,5 +9,5 @@ import { type PopupComponentProps } from '@atlaskit/popup';
  * HoverCard border implementation is in ContentContainer where it can
  * change between the default border and prism border during runtime.
  */
-declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "appearance" | "children" | "style" | "id" | "tabIndex" | "role" | "data-testid" | "shouldFitContainer" | "xcss" | "shouldRenderToParent" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
+declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "appearance" | "children" | "style" | "id" | "tabIndex" | "role" | "data-testid" | "xcss" | "shouldFitContainer" | "shouldRenderToParent" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
 export default CustomPopupContainer;

package/dist/types-ts4.5/view/BlockCard/views/ResolvingView.d.ts

@@ -11,7 +11,7 @@ export interface ResolvingProps {
 /**
  * Class name for selecting non-flexible resolving block card
  *
- * @deprecated {@link https://hello.jira.atlassian.cloud/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
+ * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6878 Internal documentation for deprecation (no external access)}
  * Using this selctor is deprecated as once the flexible block card feature flag is removed, this class will no longer be used.
  */
 export declare const blockCardResolvingViewClassName = "block-card-resolving-view";

package/dist/types-ts4.5/view/Card/index.d.ts

@@ -3,5 +3,5 @@ import { type WrappedComponentProps } from 'react-intl-next';
 import { type CardAppearance, type CardPlatform, type CardProps } from './types';
 export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<Omit<CardProps & WrappedComponentProps, "intl"> & {
     forwardedRef?: React.Ref<any> | undefined;
-}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "actionOptions" | "hoverPreviewOptions" | "onResolve" | "showHoverPreview" | "showAuthTooltip" | "platform" | "forwardedRef" | "fallbackComponent" | "inlinePreloaderStyle" | "isHovered" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "truncateInline" | "useLegacyBlockCard" | "embedIframeRef" | "embedIframeUrlType" | "frameStyle"> & React.RefAttributes<any>>;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "appearance" | "container" | "children" | "key" | "id" | "placeholder" | "onError" | "onClick" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "actionOptions" | "hoverPreviewOptions" | "onResolve" | "showHoverPreview" | "showAuthTooltip" | "platform" | "forwardedRef" | "fallbackComponent" | "inlinePreloaderStyle" | "isHovered" | "removeTextHighlightingFromTitle" | "resolvingPlaceholder" | "truncateInline" | "embedIframeRef" | "embedIframeUrlType" | "frameStyle"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types-ts4.5/view/Card/types.d.ts

@@ -138,13 +138,6 @@ export interface InlineProps extends HoverPreviewProps {
     truncateInline?: boolean;
 }
 export interface BlockProps extends ActionProps {
-    /**
-     * When enabled the legacy block card is always used, even if the enableFlexibleBlockCard flag is set to true.
-     * Usage is strongly discouraged. This should only be used if there is a specific reason you're
-     * unable to use the new flexible block cards.
-     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-15021 Internal documentation for deprecation (no external access)}
-     */
-    useLegacyBlockCard?: boolean;
 }
 export interface EmbedProps {
     /**

package/dist/types-ts4.5/view/CardWithUrl/types.d.ts

@@ -30,7 +30,6 @@ export type CardWithUrlContentProps = {
     showAuthTooltip?: boolean;
     analyticsEvents?: AnalyticsFacade;
     placeholder?: string;
-    useLegacyBlockCard?: boolean;
     removeTextHighlightingFromTitle?: boolean;
     resolvingPlaceholder?: string;
     truncateInline?: boolean;

package/dist/types-ts4.5/view/HoverCard/components/CustomPopupContainer.d.ts

@@ -9,5 +9,5 @@ import { type PopupComponentProps } from '@atlaskit/popup';
  * HoverCard border implementation is in ContentContainer where it can
  * change between the default border and prism border during runtime.
  */
-declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "appearance" | "children" | "style" | "id" | "tabIndex" | "role" | "data-testid" | "shouldFitContainer" | "xcss" | "shouldRenderToParent" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
+declare const CustomPopupContainer: React.ForwardRefExoticComponent<Pick<PopupComponentProps, "appearance" | "children" | "style" | "id" | "tabIndex" | "role" | "data-testid" | "xcss" | "shouldFitContainer" | "shouldRenderToParent" | "data-placement"> & React.RefAttributes<HTMLDivElement>>;
 export default CustomPopupContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "30.4.2",
+	"version": "31.0.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"