@atlaskit/smart-card 17.0.1 → 17.3.0

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

@@ -0,0 +1,112 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import Lozenge from '@atlaskit/lozenge';
+import { Frame } from '../components/Frame';
+import { Thumbnail } from '../components/Thumbnail';
+import { Provider } from '../components/Provider';
+import { Name } from '../components/Name';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { CollaboratorList } from '../components/CollaboratorList';
+import { Emoji } from '../components/Emoji';
+import { Icon } from '../components/Icon';
+import { Content } from '../components/Content';
+import { MetadataList } from '../components/MetadataList';
+import { LozengeBlockWrapper } from '../../InlineCard/IconAndTitleLayout/styled';
+import { ContentHeader } from '../components/ContentHeader';
+import { ContentFooter } from '../components/ContentFooter';
+import { gs } from '../utils';
+import { handleClickCommon } from '../utils/handlers';
+export var blockCardResolvedViewClassName = 'block-card-resolved-view';
+export var blockCardResolvedViewByClassName = 'block-card-resolved-view-by';
+export var ResolvedView = function ResolvedView(_ref) {
+  var _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? {} : _ref$icon,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      thumbnail = _ref.thumbnail,
+      _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title,
+      titleTextColor = _ref.titleTextColor,
+      titlePrefix = _ref.titlePrefix,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$users = _ref.users,
+      users = _ref$users === void 0 ? [] : _ref$users,
+      _ref$handleAvatarClic = _ref.handleAvatarClick,
+      handleAvatarClick = _ref$handleAvatarClic === void 0 ? function () {} : _ref$handleAvatarClic,
+      _ref$handleMoreAvatar = _ref.handleMoreAvatarsClick,
+      handleMoreAvatarsClick = _ref$handleMoreAvatar === void 0 ? function () {} : _ref$handleMoreAvatar,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$byline = _ref.byline,
+      byline = _ref$byline === void 0 ? '' : _ref$byline,
+      lozenge = _ref.lozenge,
+      _ref$details = _ref.details,
+      details = _ref$details === void 0 ? [] : _ref$details,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+  var resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
+    testId: testId ? "".concat(testId, "-meta") : undefined,
+    items: details
+  }) : undefined;
+  var resolvedByline = jsx(Byline, {
+    testId: testId ? "".concat(testId, "-by") : undefined,
+    className: blockCardResolvedViewByClassName
+  }, byline);
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var hasActions = showActions && actions.length > 0;
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvedViewClassName
+  }, jsx(Content, null, jsx("div", null, jsx("div", {
+    css: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'flex-start'
+    }
+  }, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, titlePrefix ? jsx(Emoji, {
+    emoji: titlePrefix
+  }) : jsx(Icon, icon), jsx(Name, {
+    name: title,
+    textColor: titleTextColor
+  }), lozenge && jsx(LozengeBlockWrapper, {
+    css: {
+      height: gs(2.5),
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, jsx(Lozenge, lozenge, lozenge.text))), jsx(CollaboratorList, {
+    items: users,
+    handleAvatarClick: handleAvatarClick,
+    handleMoreAvatarsClick: handleMoreAvatarsClick,
+    testId: testId ? "".concat(testId, "-collaborator-list") : undefined
+  })), resolvedByline, resolvedMetadata), jsx(ContentFooter, {
+    hasSpaceBetween: hasActions
+  }, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), hasActions && jsx(ActionList, {
+    items: actions
+  }))), thumbnail ? jsx(Thumbnail, {
+    src: thumbnail,
+    testId: testId ? "".concat(testId, "-thumb") : undefined
+  }) : null);
+};

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

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import { N50, N90 } from '@atlaskit/theme/colors';
+import { fontSize } from '@atlaskit/theme/constants';
+import { Frame } from '../components/Frame';
+import { gs } from '../utils';
+import { FormattedMessage } from 'react-intl-next';
+import { messages } from '@atlaskit/media-ui/messages';
+export var blockCardResolvingViewClassName = 'block-card-resolving-view';
+export var ResolvingView = function ResolvingView(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-resolving-view' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+  return jsx(Frame, {
+    inheritDimensions: inheritDimensions,
+    compact: true,
+    isSelected: isSelected,
+    testId: testId,
+    className: blockCardResolvingViewClassName
+  }, jsx(DocumentFilledIcon, {
+    size: "small",
+    primaryColor: N50,
+    label: "document-icon"
+  }), jsx("span", {
+    css: {
+      fontSize: "".concat(fontSize(), "px"),
+      color: N90,
+      marginLeft: gs(0.5)
+    }
+  }, jsx(FormattedMessage, messages.loading)));
+};

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

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import { FormattedMessage } from 'react-intl-next';
+import { Frame } from '../components/Frame';
+import { Provider } from '../components/Provider';
+import { Byline } from '../components/Byline';
+import { ActionList } from '../components/ActionList';
+import { Content } from '../components/Content';
+import { messages } from '@atlaskit/media-ui/messages';
+import { ContentHeader } from '../components/ContentHeader';
+import { ContentFooter } from '../components/ContentFooter';
+import { handleClickCommon } from '../utils/handlers';
+import { Link } from '../components/Link';
+
+var textBylineProps = _objectSpread({}, messages.connect_link_account_card_description);
+
+export var UnauthorizedView = function UnauthorizedView(_ref) {
+  var _ref$context = _ref.context,
+      context = _ref$context === void 0 ? {
+    text: ''
+  } : _ref$context,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'block-card-unauthorized-view' : _ref$testId,
+      _ref$showActions = _ref.showActions,
+      showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+      _ref$link = _ref.link,
+      link = _ref$link === void 0 ? '' : _ref$link,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  return jsx(Frame, {
+    isSelected: isSelected,
+    testId: testId,
+    isFluidHeight: true
+  }, jsx(Content, {
+    isCompact: true
+  }, jsx("div", null, jsx(ContentHeader, {
+    onClick: handleClick,
+    link: link
+  }, jsx(Link, {
+    url: link,
+    testId: testId
+  })), jsx(Byline, {
+    testId: testId ? "".concat(testId, "-byline") : undefined,
+    text: jsx(FormattedMessage, _extends({}, textBylineProps, {
+      values: {
+        context: context.text
+      }
+    }))
+  })), jsx(ContentFooter, null, jsx(Provider, {
+    name: context.text,
+    icon: context.icon
+  }), showActions && jsx(ActionList, {
+    items: actions
+  }))));
+};

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

@@ -10,10 +10,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { BlockCardResolvedView, InlineCardResolvedView } from '@atlaskit/media-ui';
 import { getEmptyJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
+import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
+import { BlockCardResolvedView } from '../BlockCard';
 export var CardWithDataContent = /*#__PURE__*/function (_React$Component) {
   _inherits(CardWithDataContent, _React$Component);
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CardLinkView } from '@atlaskit/media-ui';
+import { CardLinkView } from '../../../view/LinkView';
 export var loadingPlaceholderClassName = 'smart-link-loading-placeholder';
 export var LoadingCardLink = function LoadingCardLink(_ref) {
   var isSelected = _ref.isSelected,

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

@@ -6,6 +6,8 @@ import { useSmartLink } from '../../state';
 import { BlockCard } from '../BlockCard';
 import { InlineCard } from '../InlineCard';
 import { EmbedCard } from '../EmbedCard';
+import { isFlexibleUiCard } from '../../utils/flexible';
+import FlexibleCard from '../FlexibleCard';
 export function CardWithUrlContent(_ref) {
   var id = _ref.id,
       url = _ref.url,
@@ -20,7 +22,9 @@ export function CardWithUrlContent(_ref) {
       showActions = _ref.showActions,
       inheritDimensions = _ref.inheritDimensions,
       embedIframeRef = _ref.embedIframeRef,
-      inlinePreloaderStyle = _ref.inlinePreloaderStyle;
+      inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+      ui = _ref.ui,
+      children = _ref.children;
 
   // Get state, actions for this card.
   var _useSmartLink = useSmartLink(id, url, dispatchAnalytics),
@@ -80,6 +84,16 @@ export function CardWithUrlContent(_ref) {
     throw error;
   }
 
+  if (isFlexibleUiCard(appearance, children)) {
+    return /*#__PURE__*/React.createElement(FlexibleCard, {
+      cardState: state,
+      onAuthorize: services.length && handleAuthorize || undefined,
+      renderers: renderers,
+      ui: ui,
+      url: url
+    }, children);
+  }
+
   switch (appearance) {
     case 'inline':
       return /*#__PURE__*/React.createElement(InlineCard, {

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

@@ -1,11 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { lazy, useEffect, useState, Suspense, useCallback } from 'react';
 import uuid from 'uuid';
-import { CardLinkView } from '@atlaskit/media-ui';
 import { uiRenderFailedEvent, fireSmartLinkEvent } from '../../utils/analytics';
 import { clearMarks, clearMeasures } from '../../utils/performance';
 import { ErrorBoundary } from 'react-error-boundary';
 import { failUfoExperience, startUfoExperience } from '../../state/analytics/ufoExperiences';
+import { CardLinkView } from '../LinkView';
 var LazyCardWithUrlContent = /*#__PURE__*/lazy(function () {
   return import(
   /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
@@ -43,7 +43,9 @@ export function CardWithURLRenderer(props) {
       platform = props.platform,
       embedIframeRef = props.embedIframeRef,
       inlinePreloaderStyle = props.inlinePreloaderStyle,
-      createAnalyticsEvent = props.createAnalyticsEvent; // Wrapper around analytics.
+      createAnalyticsEvent = props.createAnalyticsEvent,
+      children = props.children,
+      ui = props.ui; // Wrapper around analytics.
 
   var dispatchAnalytics = useCallback(function (analyticsPayload) {
     if (analyticsPayload && analyticsPayload.attributes) {
@@ -103,8 +105,9 @@ export function CardWithURLRenderer(props) {
     inheritDimensions: inheritDimensions,
     platform: platform,
     embedIframeRef: embedIframeRef,
-    inlinePreloaderStyle: inlinePreloaderStyle
-  })));
+    inlinePreloaderStyle: inlinePreloaderStyle,
+    ui: ui
+  }, children)));
 }
 
 var ErrorFallback = function ErrorFallback() {

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

@@ -11,7 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import { embedHeaderHeight } from '@atlaskit/media-ui/embeds';
+import { embedHeaderHeight } from './components/styled';
 export var EmbedResizeMessageListener = /*#__PURE__*/function (_React$Component) {
   _inherits(EmbedResizeMessageListener, _React$Component);
 

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
+import { handleClickCommon } from '../../BlockCard/utils/handlers';
+export var ExpandedFrame = function ExpandedFrame(_ref) {
+  var _ref$isPlaceholder = _ref.isPlaceholder,
+      isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+      children = _ref.children,
+      onClick = _ref.onClick,
+      icon = _ref.icon,
+      text = _ref.text,
+      isSelected = _ref.isSelected,
+      isFrameVisible = _ref.isFrameVisible,
+      isVisible = _ref.isVisible,
+      href = _ref.href,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+      inheritDimensions = _ref.inheritDimensions;
+
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+
+  var handleClick = function handleClick(event) {
+    return handleClickCommon(event, onClick);
+  };
+
+  var renderHeader = function renderHeader() {
+    return /*#__PURE__*/React.createElement(Header, {
+      className: "embed-header"
+    }, /*#__PURE__*/React.createElement(IconWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TextWrapper, {
+      isPlaceholder: isPlaceholder
+    }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+      href: href,
+      onClick: handleClick
+    }, text)));
+  };
+
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement(Content, {
+      isInteractive: isInteractive()
+    }, children);
+  };
+
+  if (!isPlaceholder && href) {
+    return /*#__PURE__*/React.createElement(LinkWrapper, {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      isFrameVisible: isFrameVisible,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isVisible: isVisible,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected // Due to limitation of testing library, we can't match background colors #ebecf0 and rgb(235, 236, 240)
+      ,
+      "data-is-frame-visible": isFrameVisible,
+      inheritDimensions: inheritDimensions
+    }, renderHeader(), renderContent());
+  } else {
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      className: className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      isVisible: isVisible,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId,
+      "data-is-selected": isSelected,
+      "data-is-visible": isVisible
+    }, renderHeader(), renderContent());
+  }
+};

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

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useState } from 'react';
+import { getIframeSandboxAttribute } from '../../../utils';
+export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
+  var url = _ref.url,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      testId = _ref.testId;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isIframeLoaded = _useState2[0],
+      setIframeLoaded = _useState2[1];
+
+  if (!url) {
+    return null;
+  }
+
+  return jsx("iframe", {
+    ref: iframeRef,
+    src: url,
+    "data-testid": "".concat(testId, "-frame"),
+    "data-iframe-loaded": isIframeLoaded,
+    css: {
+      border: 0,
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      position: 'relative',
+      overflow: 'hidden',
+      borderRadius: '3px'
+    },
+    allowFullScreen: true,
+    scrolling: "yes",
+    allow: "autoplay; encrypted-media; clipboard-write",
+    onLoad: function onLoad() {
+      return setIframeLoaded(true);
+    },
+    sandbox: getIframeSandboxAttribute(isTrusted)
+  });
+});

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import ImageLoader from 'react-render-image';
+import { Image } from './styled';
+export var ImageIcon = function ImageIcon(_ref) {
+  var _ref$alt = _ref.alt,
+      alt = _ref$alt === void 0 ? '' : _ref$alt,
+      src = _ref.src,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 16 : _ref$size,
+      title = _ref.title,
+      defaultIcon = _ref.default;
+
+  // TODO: do we need this?
+  if (!src) {
+    return defaultIcon || null;
+  }
+
+  return /*#__PURE__*/React.createElement(ImageLoader, {
+    src: src,
+    loading: defaultIcon,
+    loaded: /*#__PURE__*/React.createElement(Image, {
+      className: "smart-link-icon",
+      src: src,
+      alt: alt,
+      size: size,
+      title: title
+    }),
+    errored: defaultIcon
+  });
+};

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

@@ -0,0 +1,116 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+
+import styled from '@emotion/styled';
+import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
+import { fontFamily } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+import { gs as gridSize } from '../../BlockCard/utils';
+export var className = 'media-card-frame';
+export var cardShadow = "";
+
+function minWidth(_ref) {
+  var minWidth = _ref.minWidth;
+
+  if (minWidth) {
+    return "min-width: ".concat(minWidth, "px;");
+  } else {
+    return '';
+  }
+}
+
+function maxWidth(_ref2) {
+  var maxWidth = _ref2.maxWidth;
+
+  if (maxWidth) {
+    return "max-width: ".concat(maxWidth, "px; margin: 0 auto;");
+  } else {
+    return 'margin: 0 auto;';
+  }
+}
+
+function getinteractiveStyles(_ref3) {
+  var isInteractive = _ref3.isInteractive,
+      isFrameVisible = _ref3.isFrameVisible;
+  var visibleFrameStyles = isFrameVisible ? visibleStyles : '';
+  var interactiveFrameStyles = isInteractive ? "\n  &:hover {\n    ".concat(visibleStyles, "\n  }\n  &:active {\n    background-color: ").concat(colors.B50, ";\n  }\n") : '';
+  return "".concat(visibleFrameStyles).concat(interactiveFrameStyles);
+}
+
+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(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) {
+  var inheritDimensions = _ref5.inheritDimensions;
+  return inheritDimensions ? 'height: 100%;' : "height: ".concat(gridSize(54));
+};
+
+var wrapperStyles = function wrapperStyles(props) {
+  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(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(gridSize(2), ");\n    height: calc(100% + ").concat(gridSize(1), ");\n    left: -").concat(gridSize(1), ";\n    ").concat(borderRadius, "\n  }\n");
+};
+
+var visibleStyles = "\n  background-color: ".concat(colors.N30, ";\n\n  &:after {\n    background: ").concat(colors.N30, " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
+
+function visible(_ref6) {
+  var isVisible = _ref6.isVisible;
+  return isVisible ? visibleStyles : '';
+}
+
+export var LinkWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " &:hover {\n    text-decoration: none;\n  }\n"])), function (props) {
+  return wrapperStyles(props);
+});
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  margin-top: 10px;\n"])), function (props) {
+  return wrapperStyles(props);
+});
+export var embedHeaderHeight = 32;
+export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, colors.N300);
+export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, size(16), function (_ref7) {
+  var isPlaceholder = _ref7.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n      background-color: ".concat(colors.N30, ";\n    ");
+  } else {
+    return '';
+  }
+});
+export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  ", ";\n"])), function (_ref8) {
+  var isPlaceholder = _ref8.isPlaceholder;
+
+  if (isPlaceholder) {
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat(colors.N30, ";\n      ");
+  } else {
+    return '';
+  }
+}, colors.N300, ellipsis('none'));
+// NB: `overflow` is kept as `hidden` since
+// the internal contents of the `iframe` should
+// manage scrolling behaviour.
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n\n  ", "\n  ", "\n  background-color: white;\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, gridSize(4), gridSize(4), function (_ref9) {
+  var isInteractive = _ref9.isInteractive;
+
+  if (isInteractive) {
+    return "\n          .".concat(className, ":hover & {\n            box-shadow: 0 4px 8px -2px rgba(23, 43, 77, 0.32),\n              0 0 1px rgba(23, 43, 77, 0.25);\n          }\n        ");
+  } else {
+    return '';
+  }
+});
+export var Image = styled.img(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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 csssize(size);
+}, borderRadius);
+export var maxAvatarCount = 6;
+export var ContentWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  padding: 8px 12px 12px 12px;\n"])));
+export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 16px;\n  font-weight: 500;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N900, 20 / 16, 20 * 4);
+export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), colors.N300, 16 / 12, ellipsis('100%'));
+export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), colors.N800, 18 / 12, 18 * 3);
+export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), colors.N30, function (_ref11) {
+  var src = _ref11.src;
+  return src;
+});
+export var UsersWrapper = styled.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n"])));
+export var ActionsWrapper = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  text-align: right;\n\n  > * {\n    margin-top: 4px;\n  }\n\n  > * + * {\n    margin-left: 4px;\n  }\n"])));
+export var AlertWrapper = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  /* z-index has to be 1 higher than the number of avatars in the avatar stack */\n  z-index: ", ";\n"])), maxAvatarCount + 1);

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

@@ -1,13 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { BlockCardResolvedView, BlockCardResolvingView, InlineCardResolvedView } from '@atlaskit/media-ui';
-import { EmbedCardResolvedView, EmbedCardUnauthorisedView, EmbedCardForbiddenView, EmbedCardNotFoundView, EmbedCardErroredView } from '@atlaskit/media-ui/embeds';
 import { extractEmbedProps } from '../../extractors/embed';
 import { getEmptyJsonLd, getUnauthorizedJsonLd } from '../../utils/jsonld';
 import { extractInlineProps } from '../../extractors/inline';
 import { extractBlockProps } from '../../extractors/block';
 import { getExtensionKey } from '../../state/helpers';
 import { extractRequestAccessContext } from '../../extractors/common/context';
+import { BlockCardResolvedView, BlockCardResolvingView } from '../BlockCard';
+import { InlineCardResolvedView } from '../InlineCard/ResolvedView';
+import { EmbedCardForbiddenView } from './views/ForbiddenView';
+import { EmbedCardNotFoundView } from './views/NotFoundView';
+import { EmbedCardResolvedView } from './views/ResolvedView';
+import { EmbedCardUnauthorisedView } from './views/UnauthorisedView';
+import { EmbedCardErroredView } from './views/ErroredView';
 export var EmbedCard = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {
   var _details$meta, _forbiddenViewProps$c;