@atlaskit/smart-card 26.33.0 → 26.33.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.33.2
+
+### Patch Changes
+
+- [#41089](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41089) [`f5acb8e8917`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f5acb8e8917) - [ux] Update embed unresolved view styling (behind feature flag)
+
+## 26.33.1
+
+### Patch Changes
+
+- [#40937](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40937) [`6c144f0cff6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6c144f0cff6) - Unskipped embed card VR tests
+
 ## 26.33.0
 
 ### Minor Changes

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

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

package/dist/cjs/view/EmbedCard/utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUnresolvedEmbedCardImage = void 0;
+var _constants = require("./constants");
+var getUnresolvedEmbedCardImage = exports.getUnresolvedEmbedCardImage = function getUnresolvedEmbedCardImage(status) {
+  switch (status) {
+    case 'forbidden':
+      return _constants.LockImage;
+    case 'unauthorized':
+      return _constants.UnauthorisedImage;
+    case 'notFound':
+      return _constants.NotFoundImage;
+  }
+};

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

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbedCardForbiddenView = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _UnresolvedView = require("./UnresolvedView");
-var _constants = require("../constants");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _ImageIcon = require("../components/ImageIcon");
+var _utils = require("../utils");
+var _reactMagneticDi = require("react-magnetic-di");
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by forbidden-view
@@ -63,7 +64,7 @@ var EmbedCardForbiddenView = exports.EmbedCardForbiddenView = function EmbedCard
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
-    image: _constants.LockImage,
+    image: (0, _utils.getUnresolvedEmbedCardImage)('forbidden'),
     title: "invalid_permissions",
     description: descriptionKey,
     context: context && context.text,

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

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbedCardNotFoundView = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _UnresolvedView = require("./UnresolvedView");
-var _constants = require("../constants");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _ImageIcon = require("../components/ImageIcon");
+var _utils = require("../utils");
+var _reactMagneticDi = require("react-magnetic-di");
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by not-found-view
@@ -36,7 +37,7 @@ var EmbedCardNotFoundView = exports.EmbedCardNotFoundView = function EmbedCardNo
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
-    image: _constants.NotFoundImage,
+    image: (0, _utils.getUnresolvedEmbedCardImage)('notFound'),
     title: "not_found_title",
     description: "not_found_description",
     context: context && context.text,

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

@@ -7,11 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmbedCardUnauthorisedView = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _reactMagneticDi = require("react-magnetic-di");
 var _UnresolvedView = require("./UnresolvedView");
-var _constants = require("../constants");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _ImageIcon = require("../components/ImageIcon");
 var _UnauthorisedViewContent = _interopRequireDefault(require("../../common/UnauthorisedViewContent"));
+var _utils = require("../utils");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EmbedCardUnauthorisedView = exports.EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
@@ -48,7 +49,7 @@ var EmbedCardUnauthorisedView = exports.EmbedCardUnauthorisedView = function Emb
         },
         context: context && context.text,
         description: "connect_unauthorised_account_description",
-        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : _constants.UnauthorisedImage,
+        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : (0, _utils.getUnresolvedEmbedCardImage)('unauthorized'),
         onClick: handleOnAuthorizeClick,
         testId: testId,
         title: "connect_link_account_card_name"
@@ -60,7 +61,7 @@ var EmbedCardUnauthorisedView = exports.EmbedCardUnauthorisedView = function Emb
     }
     return /*#__PURE__*/_react.default.createElement(_UnresolvedView.EmbedCardUnresolvedView, {
       description: context !== null && context !== void 0 && context.text ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider',
-      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : _constants.LockImage,
+      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : (0, _utils.getUnresolvedEmbedCardImage)('forbidden'),
       context: context === null || context === void 0 ? void 0 : context.text,
       testId: testId,
       title: context !== null && context !== void 0 && context.text ? 'unauthorised_account_name' : 'unauthorised_account_name_no_provider'

package/dist/cjs/view/EmbedCard/views/forbidden-view/index.js

@@ -11,10 +11,11 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _reactMagneticDi = require("react-magnetic-di");
 var _messages = require("../../../../messages");
 var _intlUtils = require("../../../../utils/intl-utils");
-var _constants = require("../../constants");
 var _unresolvedView = _interopRequireDefault(require("../unresolved-view"));
+var _utils = require("../../utils");
 var _excluded = ["context", "onAuthorise", "accessContext", "testId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,7 +70,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
   }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : _constants.LockImage,
+    image: image !== null && image !== void 0 ? image : (0, _utils.getUnresolvedEmbedCardImage)('forbidden'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, (0, _intlUtils.toMessage)(_messages.messages.invalid_permissions, titleMessageKey), {

package/dist/cjs/view/EmbedCard/views/not-found-view/index.js

@@ -10,10 +10,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _reactMagneticDi = require("react-magnetic-di");
 var _messages = require("../../../../messages");
 var _intlUtils = require("../../../../utils/intl-utils");
-var _constants = require("../../constants");
 var _unresolvedView = _interopRequireDefault(require("../unresolved-view"));
+var _utils = require("../../utils");
 var _excluded = ["context", "accessContext", "testId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -38,7 +39,7 @@ var NotFoundView = function NotFoundView(_ref) {
   }, [text]);
   return /*#__PURE__*/_react.default.createElement(_unresolvedView.default, (0, _extends2.default)({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : _constants.NotFoundImage,
+    image: image !== null && image !== void 0 ? image : (0, _utils.getUnresolvedEmbedCardImage)('notFound'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, (0, _intlUtils.toMessage)(_messages.messages.not_found_title, titleMessageKey), {

package/dist/cjs/view/EmbedCard/views/unresolved-view/index.js

@@ -54,16 +54,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, (0, _react.jsx)("div", {
     css: _styled.containerStyles,
     "data-testid": "".concat(testId, "-unresolved-container")
+  }, (0, _react.jsx)("div", {
+    css: _styled.contentStyles
   }, (0, _react.jsx)("img", {
     css: _styled.imageStyles,
     "data-testid": "".concat(testId, "-unresolved-image"),
     src: image
-  }), (0, _react.jsx)("span", {
+  }), (0, _react.jsx)("h2", {
     css: _styled.titleStyles,
     "data-testid": "".concat(testId, "-unresolved-title")
   }, title), (0, _react.jsx)("span", {
     css: _styled.descriptionStyles,
     "data-testid": "".concat(testId, "-unresolved-description")
-  }, description), button));
+  }, description), button)));
 };
 var _default = exports.default = UnresolvedView;

package/dist/cjs/view/EmbedCard/views/unresolved-view/styled.js

@@ -4,13 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleStyles = exports.imageStyles = exports.descriptionStyles = exports.containerStyles = void 0;
+exports.titleStyles = exports.imageStyles = exports.descriptionStyles = exports.contentStyles = exports.containerStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _constants = require("@atlaskit/theme/constants");
 var _react = require("@emotion/react");
 var _utils = require("../../../common/utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n"])));
-var imageStyles = exports.imageStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: ", ";\n  margin-bottom: ", ";\n  overflow: hidden;\n"])), (0, _utils.gs)(14), (0, _utils.gs)(4));
-var titleStyles = exports.titleStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  margin-bottom: ", ";\n  max-width: ", ";\n  text-align: center;\n"])), (0, _utils.gs)(2.5), (0, _utils.gs)(1.5), (0, _utils.gs)(50));
-var descriptionStyles = exports.descriptionStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  max-width: ", ";\n  line-height: ", ";\n"])), (0, _constants.fontSize)(), (0, _utils.gs)(2.5), (0, _utils.gs)(50), (0, _utils.gs)(3));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var containerStyles = exports.containerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  height: inherit;\n"])));
+var contentStyles = exports.contentStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: ", ";\n  gap: ", ";\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", (0, _utils.gs)(50));
+var imageStyles = exports.imageStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  height: 120px;\n  width: 180px;\n  object-fit: contain;\n  object-position: center center;\n"])));
+var titleStyles = exports.titleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  margin: 0;\n  padding: 0;\n"])));
+var descriptionStyles = exports.descriptionStyles = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 1em;\n  text-align: center;\n"])));

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

@@ -18,7 +18,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.33.0",
+  packageVersion: "26.33.2",
   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: "26.33.0"
+  packageVersion: "26.33.2"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/EmbedCard/utils.js

@@ -0,0 +1,11 @@
+import { LockImage, NotFoundImage, UnauthorisedImage } from './constants';
+export const getUnresolvedEmbedCardImage = status => {
+  switch (status) {
+    case 'forbidden':
+      return LockImage;
+    case 'unauthorized':
+      return UnauthorisedImage;
+    case 'notFound':
+      return NotFoundImage;
+  }
+};

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { getUnresolvedEmbedCardImage } from '../utils';
+import { di } from 'react-magnetic-di';
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by forbidden-view
@@ -57,7 +58,7 @@ export const EmbedCardForbiddenView = ({
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: LockImage,
+    image: getUnresolvedEmbedCardImage('forbidden'),
     title: "invalid_permissions",
     description: descriptionKey,
     context: context && context.text,

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { NotFoundImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { getUnresolvedEmbedCardImage } from '../utils';
+import { di } from 'react-magnetic-di';
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by not-found-view
@@ -29,7 +30,7 @@ export const EmbedCardNotFoundView = ({
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: NotFoundImage,
+    image: getUnresolvedEmbedCardImage('notFound'),
     title: "not_found_title",
     description: "not_found_description",
     context: context && context.text,

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

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
+import { di } from 'react-magnetic-di';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage, UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
+import { getUnresolvedEmbedCardImage } from '../utils';
 export const EmbedCardUnauthorisedView = ({
   analytics,
   link,
@@ -38,7 +39,7 @@ export const EmbedCardUnauthorisedView = ({
         },
         context: context && context.text,
         description: "connect_unauthorised_account_description",
-        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
+        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : getUnresolvedEmbedCardImage('unauthorized'),
         onClick: handleOnAuthorizeClick,
         testId: testId,
         title: "connect_link_account_card_name"
@@ -50,7 +51,7 @@ export const EmbedCardUnauthorisedView = ({
     }
     return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
       description: context !== null && context !== void 0 && context.text ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider',
-      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : LockImage,
+      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : getUnresolvedEmbedCardImage('forbidden'),
       context: context === null || context === void 0 ? void 0 : context.text,
       testId: testId,
       title: context !== null && context !== void 0 && context.text ? 'unauthorised_account_name' : 'unauthorised_account_name_no_provider'

package/dist/es2019/view/EmbedCard/views/forbidden-view/index.js

@@ -2,10 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import Button from '@atlaskit/button';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
 import { messages } from '../../../../messages';
 import { toMessage } from '../../../../utils/intl-utils';
-import { LockImage } from '../../constants';
 import UnresolvedView from '../unresolved-view';
+import { getUnresolvedEmbedCardImage } from '../../utils';
 const ForbiddenView = ({
   context,
   onAuthorise,
@@ -58,7 +59,7 @@ const ForbiddenView = ({
   }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : LockImage,
+    image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('forbidden'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.invalid_permissions, titleMessageKey), {

package/dist/es2019/view/EmbedCard/views/not-found-view/index.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
 import { messages } from '../../../../messages';
 import { toMessage } from '../../../../utils/intl-utils';
-import { NotFoundImage } from '../../constants';
 import UnresolvedView from '../unresolved-view';
+import { getUnresolvedEmbedCardImage } from '../../utils';
 const NotFoundView = ({
   context,
   accessContext,
@@ -25,7 +26,7 @@ const NotFoundView = ({
   }), [text]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : NotFoundImage,
+    image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('notFound'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.not_found_title, titleMessageKey), {

package/dist/es2019/view/EmbedCard/views/unresolved-view/index.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
-import { containerStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
+import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
 const UnresolvedView = ({
   button,
   description,
@@ -44,16 +44,18 @@ const UnresolvedView = ({
   }, jsx("div", {
     css: containerStyles,
     "data-testid": `${testId}-unresolved-container`
+  }, jsx("div", {
+    css: contentStyles
   }, jsx("img", {
     css: imageStyles,
     "data-testid": `${testId}-unresolved-image`,
     src: image
-  }), jsx("span", {
+  }), jsx("h2", {
     css: titleStyles,
     "data-testid": `${testId}-unresolved-title`
   }, title), jsx("span", {
     css: descriptionStyles,
     "data-testid": `${testId}-unresolved-description`
-  }, description), button));
+  }, description), button)));
 };
 export default UnresolvedView;

package/dist/es2019/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,28 +1,31 @@
-import { fontSize } from '@atlaskit/theme/constants';
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
 export const containerStyles = css`
+  display: grid;
+  height: inherit;
+`;
+export const contentStyles = css`
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  height: 100%;
+  align-items: center;
+  margin: auto;
+  padding: ${"var(--ds-space-200, 16px)"};
+  gap: ${"var(--ds-space-250, 20px)"};
+  max-width: ${gs(50)};
 `;
 export const imageStyles = css`
-  max-height: ${gs(14)};
-  margin-bottom: ${gs(4)};
-  overflow: hidden;
+  height: 120px;
+  width: 180px;
+  object-fit: contain;
+  object-position: center center;
 `;
 export const titleStyles = css`
-  font-size: ${gs(2.5)};
-  margin-bottom: ${gs(1.5)};
-  max-width: ${gs(50)};
   text-align: center;
+  margin: 0;
+  padding: 0;
 `;
 export const descriptionStyles = css`
-  font-size: ${fontSize()};
-  margin-bottom: ${gs(2.5)};
+  font-size: 1em;
   text-align: center;
-  max-width: ${gs(50)};
-  line-height: ${gs(3)};
 `;

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

@@ -8,7 +8,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.33.0",
+  packageVersion: "26.33.2",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

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

package/dist/esm/view/EmbedCard/utils.js

@@ -0,0 +1,11 @@
+import { LockImage, NotFoundImage, UnauthorisedImage } from './constants';
+export var getUnresolvedEmbedCardImage = function getUnresolvedEmbedCardImage(status) {
+  switch (status) {
+    case 'forbidden':
+      return LockImage;
+    case 'unauthorized':
+      return UnauthorisedImage;
+    case 'notFound':
+      return NotFoundImage;
+  }
+};

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { getUnresolvedEmbedCardImage } from '../utils';
+import { di } from 'react-magnetic-di';
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by forbidden-view
@@ -56,7 +57,7 @@ export var EmbedCardForbiddenView = function EmbedCardForbiddenView(_ref) {
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: LockImage,
+    image: getUnresolvedEmbedCardImage('forbidden'),
     title: "invalid_permissions",
     description: descriptionKey,
     context: context && context.text,

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

@@ -1,8 +1,9 @@
 import React from 'react';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { NotFoundImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
+import { getUnresolvedEmbedCardImage } from '../utils';
+import { di } from 'react-magnetic-di';
 /**
  * @deprecated {@link https://product-fabric.atlassian.net/browse/EDM-7977 Internal documentation for deprecation (no external access)}\
  * @deprecated Replaced by not-found-view
@@ -29,7 +30,7 @@ export var EmbedCardNotFoundView = function EmbedCardNotFoundView(_ref) {
     testId: testId,
     allowScrollBar: true
   }, /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
-    image: NotFoundImage,
+    image: getUnresolvedEmbedCardImage('notFound'),
     title: "not_found_title",
     description: "not_found_description",
     context: context && context.text,

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

@@ -1,9 +1,10 @@
 import React, { useCallback, useMemo } from 'react';
+import { di } from 'react-magnetic-di';
 import { EmbedCardUnresolvedView } from './UnresolvedView';
-import { LockImage, UnauthorisedImage } from '../constants';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import UnauthorisedViewContent from '../../common/UnauthorisedViewContent';
+import { getUnresolvedEmbedCardImage } from '../utils';
 export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref) {
   var analytics = _ref.analytics,
     link = _ref.link,
@@ -38,7 +39,7 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
         },
         context: context && context.text,
         description: "connect_unauthorised_account_description",
-        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : UnauthorisedImage,
+        image: (_context$image = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image !== void 0 ? _context$image : getUnresolvedEmbedCardImage('unauthorized'),
         onClick: handleOnAuthorizeClick,
         testId: testId,
         title: "connect_link_account_card_name"
@@ -50,7 +51,7 @@ export var EmbedCardUnauthorisedView = function EmbedCardUnauthorisedView(_ref)
     }
     return /*#__PURE__*/React.createElement(EmbedCardUnresolvedView, {
       description: context !== null && context !== void 0 && context.text ? 'unauthorised_account_description' : 'unauthorised_account_description_no_provider',
-      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : LockImage,
+      image: (_context$image2 = context === null || context === void 0 ? void 0 : context.image) !== null && _context$image2 !== void 0 ? _context$image2 : getUnresolvedEmbedCardImage('forbidden'),
       context: context === null || context === void 0 ? void 0 : context.text,
       testId: testId,
       title: context !== null && context !== void 0 && context.text ? 'unauthorised_account_name' : 'unauthorised_account_name_no_provider'

package/dist/esm/view/EmbedCard/views/forbidden-view/index.js

@@ -4,10 +4,11 @@ var _excluded = ["context", "onAuthorise", "accessContext", "testId"];
 import Button from '@atlaskit/button';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
 import { messages } from '../../../../messages';
 import { toMessage } from '../../../../utils/intl-utils';
-import { LockImage } from '../../constants';
 import UnresolvedView from '../unresolved-view';
+import { getUnresolvedEmbedCardImage } from '../../utils';
 var ForbiddenView = function ForbiddenView(_ref) {
   var context = _ref.context,
     onAuthorise = _ref.onAuthorise,
@@ -59,7 +60,7 @@ var ForbiddenView = function ForbiddenView(_ref) {
   }, [accessType, action === null || action === void 0 ? void 0 : action.id, action === null || action === void 0 ? void 0 : action.promise, callToActionMessageKey, onAuthorise, values]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : LockImage,
+    image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('forbidden'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.invalid_permissions, titleMessageKey), {

package/dist/esm/view/EmbedCard/views/not-found-view/index.js

@@ -3,10 +3,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["context", "accessContext", "testId"];
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { di } from 'react-magnetic-di';
 import { messages } from '../../../../messages';
 import { toMessage } from '../../../../utils/intl-utils';
-import { NotFoundImage } from '../../constants';
 import UnresolvedView from '../unresolved-view';
+import { getUnresolvedEmbedCardImage } from '../../utils';
 var NotFoundView = function NotFoundView(_ref) {
   var context = _ref.context,
     accessContext = _ref.accessContext,
@@ -28,7 +29,7 @@ var NotFoundView = function NotFoundView(_ref) {
   }, [text]);
   return /*#__PURE__*/React.createElement(UnresolvedView, _extends({}, unresolvedViewProps, {
     icon: icon,
-    image: image !== null && image !== void 0 ? image : NotFoundImage,
+    image: image !== null && image !== void 0 ? image : getUnresolvedEmbedCardImage('notFound'),
     testId: testId,
     text: text,
     title: /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, toMessage(messages.not_found_title, titleMessageKey), {

package/dist/esm/view/EmbedCard/views/unresolved-view/index.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
-import { containerStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
+import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleStyles } from './styled';
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
@@ -43,16 +43,18 @@ var UnresolvedView = function UnresolvedView(_ref) {
   }, jsx("div", {
     css: containerStyles,
     "data-testid": "".concat(testId, "-unresolved-container")
+  }, jsx("div", {
+    css: contentStyles
   }, jsx("img", {
     css: imageStyles,
     "data-testid": "".concat(testId, "-unresolved-image"),
     src: image
-  }), jsx("span", {
+  }), jsx("h2", {
     css: titleStyles,
     "data-testid": "".concat(testId, "-unresolved-title")
   }, title), jsx("span", {
     css: descriptionStyles,
     "data-testid": "".concat(testId, "-unresolved-description")
-  }, description), button));
+  }, description), button)));
 };
 export default UnresolvedView;

package/dist/esm/view/EmbedCard/views/unresolved-view/styled.js

@@ -1,9 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { fontSize } from '@atlaskit/theme/constants';
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import { css } from '@emotion/react';
 import { gs } from '../../../common/utils';
-export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n"])));
-export var imageStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  max-height: ", ";\n  margin-bottom: ", ";\n  overflow: hidden;\n"])), gs(14), gs(4));
-export var titleStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  margin-bottom: ", ";\n  max-width: ", ";\n  text-align: center;\n"])), gs(2.5), gs(1.5), gs(50));
-export var descriptionStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  margin-bottom: ", ";\n  text-align: center;\n  max-width: ", ";\n  line-height: ", ";\n"])), fontSize(), gs(2.5), gs(50), gs(3));
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: grid;\n  height: inherit;\n"])));
+export var contentStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  margin: auto;\n  padding: ", ";\n  gap: ", ";\n  max-width: ", ";\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-250, 20px)", gs(50));
+export var imageStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 120px;\n  width: 180px;\n  object-fit: contain;\n  object-position: center center;\n"])));
+export var titleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  text-align: center;\n  margin: 0;\n  padding: 0;\n"])));
+export var descriptionStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: 1em;\n  text-align: center;\n"])));

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

@@ -11,7 +11,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.33.0",
+  packageVersion: "26.33.2",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/view/EmbedCard/utils.d.ts

@@ -0,0 +1 @@
+export declare const getUnresolvedEmbedCardImage: (status: 'forbidden' | 'unauthorized' | 'notFound') => string;

package/dist/types/view/EmbedCard/views/unresolved-view/styled.d.ts

@@ -1,4 +1,5 @@
 export declare const containerStyles: import("@emotion/react").SerializedStyles;
+export declare const contentStyles: import("@emotion/react").SerializedStyles;
 export declare const imageStyles: import("@emotion/react").SerializedStyles;
 export declare const titleStyles: import("@emotion/react").SerializedStyles;
 export declare const descriptionStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/view/EmbedCard/utils.d.ts

@@ -0,0 +1 @@
+export declare const getUnresolvedEmbedCardImage: (status: 'forbidden' | 'unauthorized' | 'notFound') => string;

package/dist/types-ts4.5/view/EmbedCard/views/unresolved-view/styled.d.ts

@@ -1,4 +1,5 @@
 export declare const containerStyles: import("@emotion/react").SerializedStyles;
+export declare const contentStyles: import("@emotion/react").SerializedStyles;
 export declare const imageStyles: import("@emotion/react").SerializedStyles;
 export declare const titleStyles: import("@emotion/react").SerializedStyles;
 export declare const descriptionStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.33.0",
+  "version": "26.33.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "dependencies": {
     "@atlaskit/analytics-gas-types": "^5.1.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/avatar-group": "^9.4.0",
     "@atlaskit/badge": "^15.1.0",
     "@atlaskit/button": "^16.10.0",
@@ -38,11 +38,11 @@
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.7.0",
     "@atlaskit/link-extractors": "^1.2.0",
-    "@atlaskit/linking-common": "^4.10.0",
+    "@atlaskit/linking-common": "^4.11.0",
     "@atlaskit/linking-types": "^8.4.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/lozenge": "^11.4.0",
-    "@atlaskit/modal-dialog": "^12.7.0",
+    "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/outbound-auth-flow-client": "^3.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/popup": "^1.10.0",
@@ -60,6 +60,7 @@
     "react-error-boundary": "^3.1.3",
     "react-lazily-render": "^1.2.0",
     "react-loadable": "^5.1.0",
+    "react-magnetic-di": "^2.2.6",
     "react-render-image": "^1.1.3",
     "use-sync-external-store": "^1.2.0",
     "uuid": "^3.1.0"
@@ -73,7 +74,7 @@
   "devDependencies": {
     "@af/visual-regression": "*",
     "@atlaskit/analytics-listeners": "^8.7.0",
-    "@atlaskit/avatar": "^21.3.0",
+    "@atlaskit/avatar": "^21.4.0",
     "@atlaskit/css-reset": "^6.5.0",
     "@atlaskit/link-test-helpers": "^6.1.0",
     "@atlaskit/lozenge": "^11.4.0",