@atlaskit/smart-card 19.1.9 → 19.1.12

package/dist/cjs/messages.js

@@ -8,6 +8,21 @@ exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 
 var messages = (0, _reactIntlNext.defineMessages)({
+  actions: {
+    id: 'fabric.linking.actions',
+    defaultMessage: 'Actions',
+    description: ''
+  },
+  add_account: {
+    id: 'fabric.linking.add_account',
+    defaultMessage: 'Add account',
+    description: 'Allows to add a new account'
+  },
+  cancel: {
+    id: 'fabric.linking.cancel',
+    defaultMessage: 'Cancel',
+    description: 'cancel'
+  },
   cannot_connect: {
     id: 'fabric.linking.cannot_connect',
     defaultMessage: "Can't connect, try again",
@@ -20,14 +35,54 @@ var messages = (0, _reactIntlNext.defineMessages)({
   },
   click_to_join: {
     id: 'fabric.linking.click_to_join',
-    defaultMessage: 'Join {context} to view this issue',
+    defaultMessage: 'Join {context}',
     description: 'Allows the user join the product or service immediately'
   },
+  click_to_join_description: {
+    id: 'fabric.linking.click_to_join_description',
+    defaultMessage: "You've been approved, so you can join {context} right away.",
+    description: 'Informs the user that they have access to this product, and can sign up or join right away.'
+  },
+  close: {
+    id: 'fabric.linking.close',
+    defaultMessage: 'Close',
+    description: ''
+  },
+  connect_to: {
+    id: 'fabric.linking.connect_to',
+    defaultMessage: 'Connect to {name}',
+    description: 'Allows the user to connect with different types of external services'
+  },
+  connect_account_description: {
+    id: 'fabric.linking.connect_account_description',
+    defaultMessage: "We'll open a new page to help you connect your {name} account",
+    description: 'Explains what will happen when the users connects to a new account'
+  },
   connect_link_account: {
     id: 'fabric.linking.connect_link_account',
     defaultMessage: 'Connect to preview',
     description: 'Shown when a user does not have access to a link, but can connect their external account to view the link.'
   },
+  connect_link_account_card: {
+    id: 'fabric.linking.connect_link_account_card_view',
+    defaultMessage: 'Connect',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view.'
+  },
+  connect_link_account_card_name: {
+    id: 'fabric.linking.connect_link_account_card_view_name',
+    defaultMessage: 'Connect your {context} account',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in title.'
+  },
+  connect_link_account_card_description: {
+    id: 'fabric.linking.connect_link_account_card_view_description',
+    defaultMessage: 'To show a preview of this link, connect your {context} account.',
+    description: 'Shown when a user does not have access to a link, but can connect their external account to view the link on card view. Displayed in byline.'
+  },
+  could_not_load_link: {
+    id: 'fabric.linking.couldnt_load_link',
+    defaultMessage: "We couldn't load this link for an unknown reason.",
+    description: 'Error case for card view - link could not be loaded.'
+  },
   created_by: {
     id: 'fabric.linking.created_by',
     defaultMessage: 'Created by {context}',
@@ -48,11 +103,41 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Delete',
     description: 'Allow a user to delete a link'
   },
+  download: {
+    id: 'fabric.linking.download',
+    defaultMessage: 'Download',
+    description: ''
+  },
   edit: {
     id: 'fabric.linking.edit',
     defaultMessage: 'Edit',
     description: 'Allow a user to edit a link'
   },
+  forbidden_description: {
+    id: 'fabric.linking.forbidden_description',
+    defaultMessage: 'You don’t have access to this preview. Contact the site admin if you need access.',
+    description: 'Informs the user that they cannot view this content.'
+  },
+  invalid_permissions: {
+    id: 'fabric.linking.invalid_permissions',
+    defaultMessage: 'Restricted link',
+    description: 'Message shown when a user does not have permissions to view an item'
+  },
+  invalid_permissions_description: {
+    id: 'fabric.linking.invalid_permissions_description',
+    defaultMessage: "You'll need to request access or try a different account to view this preview.",
+    description: 'Message shown when a user does not have permissions to view an item. Displayed as description.'
+  },
+  join_to_view: {
+    id: 'fabric.linking.join_to_view',
+    defaultMessage: 'Join {context} to view this issue',
+    description: 'Allows the user join the product or service immediately'
+  },
+  loading: {
+    id: 'fabric.linking.loading',
+    defaultMessage: 'Loading...',
+    description: 'Indicates an element on a page is loading.'
+  },
   modified_by: {
     id: 'fabric.linking.updated_by',
     defaultMessage: 'Modified by {context}',
@@ -73,6 +158,21 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'More actions',
     description: 'Allows the users to see more link actions'
   },
+  not_found_description: {
+    id: 'fabric.linking.not_found_description',
+    defaultMessage: "We couldn't find the link. Check the url and try editing or paste again.",
+    description: 'Error case for when a provided item is not found within the list of items'
+  },
+  not_found_title: {
+    id: 'fabric.linking.not_found_title',
+    defaultMessage: "Uh oh. We can't find this link!",
+    description: 'Error case for when a provided link is not found'
+  },
+  preview: {
+    id: 'fabric.linking.preview',
+    defaultMessage: 'Preview',
+    description: 'Click to view a richer view of your content, without needing to navigate to it.'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',
@@ -139,12 +239,32 @@ var messages = (0, _reactIntlNext.defineMessages)({
     description: 'Shown when a user has requested an access but status is pending.'
   },
   restricted_link: {
-    id: 'fabric.linking.invalid_permissions',
+    id: 'fabric.linking.restricted_link',
     defaultMessage: 'Restricted link, try another account',
     description: 'Message shown when a user does not have permissions to view an item'
   },
   request_access: {
     id: 'fabric.linking.request_access',
+    defaultMessage: 'Request access',
+    description: 'Allows the user to request access to a product or service'
+  },
+  request_access_description: {
+    id: 'fabric.linking.request_access_description',
+    defaultMessage: 'Request access to {context} view this preview.',
+    description: 'Allows the user to request access to a product'
+  },
+  request_access_pending: {
+    id: 'fabric.linking.request_access_pending',
+    defaultMessage: 'Access pending',
+    description: 'Allows the user to try an action again with their current account'
+  },
+  request_access_pending_description: {
+    id: 'fabric.linking.request_access_pending_description',
+    defaultMessage: 'Your access request is pending.',
+    description: 'Informs the user that their request to view this content is pending'
+  },
+  request_access_to_view: {
+    id: 'fabric.linking.request_access_to_view',
     defaultMessage: 'Request access to {context} to view this issue',
     description: 'Allows the user to request access to a product or service'
   },
@@ -152,6 +272,51 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.linking.request_denied',
     defaultMessage: 'Your access request was denied',
     description: 'The user had request access but the request was denied by a product or service'
+  },
+  request_denied_description: {
+    id: 'fabric.linking.request_denied_description',
+    defaultMessage: 'Your access request was denied. Contact the site admin if you still need access.',
+    description: 'Informs the user that their request to view this content was denied'
+  },
+  retry: {
+    id: 'fabric.linking.retry',
+    defaultMessage: 'Retry',
+    description: 'Allows user to perform an action again'
+  },
+  save: {
+    id: 'fabric.linking.save',
+    defaultMessage: 'Save',
+    description: 'Just the "save" word'
+  },
+  try_again: {
+    id: 'fabric.linking.try_again',
+    defaultMessage: 'Try again',
+    description: 'Allow the user to try an action again'
+  },
+  try_another_account: {
+    id: 'fabric.linking.try_another_account',
+    defaultMessage: 'Try another account',
+    description: 'Allows the user to try an action again with a different account'
+  },
+  unlink_account: {
+    id: 'fabric.linking.unlink_account',
+    defaultMessage: 'Unlink Account',
+    description: 'Allows to remove a connected account from the user'
+  },
+  view: {
+    id: 'fabric.linking.view',
+    defaultMessage: 'View',
+    description: 'Go through to a piece of content to view it in its original context.'
+  },
+  viewIn: {
+    id: 'fabric.linking.srclink',
+    defaultMessage: 'View in',
+    description: 'We have a link in our preview modals to the original document. This text goes before the provider name'
+  },
+  viewOriginal: {
+    id: 'fabric.linking.srclinkunknown',
+    defaultMessage: 'View Original',
+    description: "We have a link in our preview modals to the original document. This is for when we don't know the provider name"
   }
 });
 exports.messages = messages;

package/dist/cjs/utils/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIframe = exports.isCardWithData = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
+exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -368,4 +368,10 @@ var handleOnClick = function handleOnClick(handler) {
   };
 };
 
-exports.handleOnClick = handleOnClick;
+exports.handleOnClick = handleOnClick;
+
+var isIntersectionObserverSupported = function isIntersectionObserverSupported() {
+  return typeof IntersectionObserver !== 'undefined';
+};
+
+exports.isIntersectionObserverSupported = isIntersectionObserverSupported;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.1.9",
+	"version": "19.1.12",
 	"sideEffects": false
 }

package/dist/cjs/view/BlockCard/actions/AuthorizeAction.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var AuthorizeAction = function AuthorizeAction(handler) {
   return {

package/dist/cjs/view/BlockCard/actions/DownloadAction.js

@@ -18,7 +18,7 @@ var _reactIntlNext = require("react-intl-next");
 
 var _mediaCommon = require("@atlaskit/media-common");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 function downloadFunction(_x) {
   return _downloadFunction.apply(this, arguments);

package/dist/cjs/view/BlockCard/actions/ForbiddenAction.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var ForbiddenAction = function ForbiddenAction(handler) {
   var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'connect-other-account';

package/dist/cjs/view/BlockCard/actions/PreviewAction.js

@@ -26,7 +26,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _excluded = ["popupMountPointId", "onClose"],
     _excluded2 = ["details"];

package/dist/cjs/view/BlockCard/actions/RetryAction.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var RetryAction = function RetryAction(handler) {
   return {

package/dist/cjs/view/BlockCard/actions/ViewAction.js

@@ -16,7 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 function viewFunction(_x) {
   return _viewFunction.apply(this, arguments);

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

@@ -27,7 +27,7 @@ var _ActionList = require("../components/ActionList");
 
 var _Content = require("../components/Content");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _ContentFooter = require("../components/ContentFooter");
 

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

@@ -31,7 +31,7 @@ var _ActionList = require("../components/ActionList");
 
 var _Content = require("../components/Content");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _ContentFooter = require("../components/ContentFooter");
 

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

@@ -27,7 +27,7 @@ var _Byline = require("../../common/Byline");
 
 var _Content = require("../components/Content");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _ContentFooter = require("../components/ContentFooter");
 

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

@@ -23,7 +23,7 @@ var _utils = require("../../common/utils");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 /** @jsx jsx */
 var blockCardResolvingViewClassName = 'block-card-resolving-view';

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

@@ -25,7 +25,7 @@ var _ActionList = require("../components/ActionList");
 
 var _Content = require("../components/Content");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _ContentHeader = require("../components/ContentHeader");
 

package/dist/cjs/view/CardWithUrl/component-lazy/index.js

@@ -9,14 +9,14 @@ exports.default = LazyCardWithUrlContent;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _LazyLazilyRenderCard = require("./LazyLazilyRenderCard");
 
 var _LazyIntersectionObserverCard = require("./LazyIntersectionObserverCard");
 
+var _utils = require("../../../utils");
+
 function LazyCardWithUrlContent(props) {
-  if ((0, _mediaUi.isIntersectionObserverSupported)()) {
+  if ((0, _utils.isIntersectionObserverSupported)()) {
     return /*#__PURE__*/_react.default.createElement(_LazyIntersectionObserverCard.LazyIntersectionObserverCard, props);
   } else {
     return /*#__PURE__*/_react.default.createElement(_LazyLazilyRenderCard.LazyLazilyRenderCard, props);

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -7,14 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxAvatarCount = exports.embedHeaderHeight = exports.className = exports.cardShadow = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
+exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.cardShadow = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -33,6 +31,24 @@ var className = 'media-card-frame';
 exports.className = className;
 var cardShadow = "";
 exports.cardShadow = cardShadow;
+var borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
+exports.borderRadius = borderRadius;
+
+var ellipsis = function ellipsis() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof maxWidth === 'number' ? 'px' : '';
+  return "\n    max-width: ".concat(maxWidth).concat(unit, ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  ");
+};
+
+exports.ellipsis = ellipsis;
+
+var csssize = function csssize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof value === 'number' ? 'px' : '';
+  return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
+};
+
+exports.csssize = csssize;
 
 function minWidth(_ref) {
   var minWidth = _ref.minWidth;
@@ -64,7 +80,7 @@ function getinteractiveStyles(_ref3) {
 
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -73,7 +89,7 @@ var height = function height(_ref5) {
 };
 
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(_mediaUi.borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(_mediaUi.borderRadius, "\n  }\n");
+  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 
 var visibleStyles = "\n  background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat((0, _tokens.token)('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
@@ -101,7 +117,7 @@ var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _ta
 
 exports.Header = Header;
 
-var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(16), function (_ref7) {
+var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
@@ -117,18 +133,18 @@ var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, (0, _tokens.token)('color.text.subtlest', colors.N300), (0, _mediaUi.ellipsis)('none'));
+}, (0, _tokens.token)('color.text.subtlest', colors.N300), ellipsis('none'));
 
 exports.TextWrapper = TextWrapper;
 
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
@@ -142,8 +158,8 @@ exports.Content = Content;
 
 var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
   var size = _ref10.size;
-  return (0, _mediaUi.size)(size);
-}, _mediaUi.borderRadius);
+  return csssize(size);
+}, borderRadius);
 
 exports.Image = Image;
 var maxAvatarCount = 6;
@@ -157,7 +173,7 @@ var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 
 exports.Title = Title;
 
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, (0, _mediaUi.ellipsis)('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
 
 exports.Byline = Byline;
 
@@ -169,7 +185,7 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

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

@@ -23,7 +23,7 @@ var _Frame = require("../../BlockCard/components/Frame");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _utils = require("../../common/utils");
 

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

@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _utils = require("../../common/utils");
 

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

@@ -57,10 +57,10 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
 
   switch (accessType) {
     case 'DIRECT_ACCESS':
-      return 'click_to_join';
+      return 'join_to_view';
 
     case 'REQUEST_ACCESS':
-      return 'request_access';
+      return 'request_access_to_view';
 
     case 'PENDING_REQUEST_EXISTS':
       return 'pending_request';

package/dist/cjs/view/InlineCard/ErroredView/index.js

@@ -37,7 +37,7 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 
 var _Icon = require("../Icon");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _reactIntlNext = require("react-intl-next");
 

package/dist/cjs/view/InlineCard/ForbiddenView/index.js

@@ -39,7 +39,7 @@ var _IconAndTitleLayout = require("../IconAndTitleLayout");
 
 var _Icon = require("../Icon");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _reactIntlNext = require("react-intl-next");
 

package/dist/cjs/view/InlineCard/UnauthorisedView/index.js

@@ -33,7 +33,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../../messages");
 
 var _Frame = require("../Frame");
 

package/dist/cjs/view/common/ModalHeader.js

@@ -33,7 +33,7 @@ var _MetadataList = require("./MetadataList");
 
 var _Byline = require("./Byline");
 
-var _messages = require("@atlaskit/media-ui/messages");
+var _messages = require("../../messages");
 
 /** @jsx jsx */
 var Header = function Header(_ref) {

package/dist/es2019/extractors/common/context/extractAccessContext.js

@@ -1,4 +1,4 @@
-import { messages } from '@atlaskit/media-ui/messages';
+import { messages } from '../../../messages';
 import { ForbiddenAction } from '../../../view/BlockCard/actions/ForbiddenAction';
 export const extractRequestAccessContext = ({
   jsonLd,