@atlaskit/smart-card 21.0.4 → 21.1.2

package/dist/es2019/view/EmbedModal/components/error-boundary/index.js

@@ -0,0 +1,21 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const FallbackComponent = () => /*#__PURE__*/React.createElement("span", null);
+
+const withErrorBoundary = Component => props => {
+  const {
+    onOpenFailed
+  } = props;
+  const onError = useCallback((error, errorInfo) => {
+    if (onOpenFailed) {
+      onOpenFailed(error, errorInfo);
+    }
+  }, [onOpenFailed]);
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    FallbackComponent: FallbackComponent,
+    onError: onError
+  }, /*#__PURE__*/React.createElement(Component, props));
+};
+
+export default withErrorBoundary;

package/dist/es2019/view/EmbedModal/components/link-info/index.js

@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { useModal } from '@atlaskit/modal-dialog';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
+import { Icon } from '../../../common/Icon';
+import { messages } from '../../../../messages';
+import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoButton from './link-info-button';
+import { actionCss, containerStyles, iconCss, titleCss } from './styled';
+
+const LinkInfo = ({
+  downloadUrl,
+  icon,
+  providerName,
+  onDownloadButtonClick,
+  onResizeButtonClick,
+  onViewButtonClick,
+  size,
+  testId,
+  title,
+  url
+}) => {
+  const {
+    onClose
+  } = useModal();
+  const downloadButton = useMemo(() => {
+    if (downloadUrl) {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        href: downloadUrl,
+        icon: jsx(DownloadIcon, {
+          label: messages.download.defaultMessage
+        }),
+        onClick: onDownloadButtonClick,
+        testId: `${testId}-download`
+      });
+    }
+  }, [downloadUrl, onDownloadButtonClick, testId]);
+  const urlButton = useMemo(() => {
+    if (url) {
+      const content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
+        content: content,
+        href: url,
+        icon: jsx(ShortcutIcon, {
+          label: messages.viewOriginal.defaultMessage
+        }),
+        onClick: onViewButtonClick,
+        target: "_blank",
+        testId: `${testId}-url`
+      });
+    }
+  }, [onViewButtonClick, providerName, testId, url]);
+  const sizeButton = useMemo(() => {
+    const isFullScreen = size === MAX_MODAL_SIZE;
+    const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    const icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
+      label: message.defaultMessage
+    }) : jsx(VidFullScreenOnIcon, {
+      label: message.defaultMessage
+    });
+    return jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, message),
+      icon: icon,
+      onClick: onResizeButtonClick,
+      testId: `${testId}-resize`
+    });
+  }, [onResizeButtonClick, size, testId]);
+  return jsx("div", {
+    css: containerStyles
+  }, icon && jsx("div", {
+    css: iconCss,
+    "data-testid": `${testId}-icon`
+  }, jsx(Icon, icon)), jsx("div", {
+    css: titleCss
+  }, jsx("h3", {
+    "data-testid": `${testId}-title`
+  }, title), jsx("span", {
+    tabIndex: 0
+  })), jsx("div", {
+    css: actionCss
+  }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+    content: jsx(FormattedMessage, messages.preview_close),
+    icon: jsx(CrossIcon, {
+      label: messages.preview_close.defaultMessage
+    }),
+    onClick: onClose,
+    testId: `${testId}-close`
+  })));
+};
+
+export default LinkInfo;

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+
+const LinkInfoButton = ({
+  content,
+  href,
+  icon,
+  onClick,
+  target,
+  testId
+}) => {
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: content,
+    hideTooltipOnClick: true,
+    position: "top",
+    tag: "span",
+    testId: `${testId}-tooltip`
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    href: href,
+    iconBefore: icon,
+    onClick: onClick,
+    target: target,
+    testId: `${testId}-button`
+  }));
+};
+
+export default LinkInfoButton;

package/dist/es2019/view/EmbedModal/components/link-info/link-info-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

@@ -0,0 +1,58 @@
+import { css } from '@emotion/core';
+import { gs } from '../../../common/utils';
+import { token } from '@atlaskit/tokens';
+import { N100 } from '@atlaskit/theme/colors';
+export const containerStyles = css`
+  align-items: center;
+  display: flex;
+  gap: ${gs(2)};
+  justify-content: space-between;
+  padding: ${gs(2)} ${gs(3)};
+`;
+const iconSize = '32px';
+export const iconCss = css`
+  img,
+  span,
+  svg {
+    height: ${iconSize};
+    min-height: ${iconSize};
+    max-height: ${iconSize};
+    width: ${iconSize};
+    min-width: ${iconSize};
+    max-width: ${iconSize};
+  }
+`;
+export const titleCss = css`
+  flex: 1 1 auto;
+
+  h3 {
+    flex: 1 1 auto;
+
+    // EDM-42336: UX is not finalised yet.
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 24px;
+
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    // Fallback options
+    @supports not (-webkit-line-clamp: 1) {
+      max-height: 24px;
+    }
+  }
+`;
+export const subtitleCss = css`
+  color: ${token('color.text.subtlest', N100)};
+
+  // EDM-42336: UX is not finalised yet.
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+`;
+export const actionCss = css`
+  flex: 0 0 auto;
+`;

package/dist/es2019/view/EmbedModal/components/link-info/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/view/EmbedModal/constants.js

@@ -0,0 +1,2 @@
+export const MAX_MODAL_SIZE = '100%';
+export const MIN_MODAL_SIZE = 'large';

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

@@ -0,0 +1,57 @@
+import React, { useCallback, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import LinkInfo from './components/link-info';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
+import EmbedContent from './components/embed-content';
+import withErrorBoundary from './components/error-boundary';
+
+const EmbedModal = ({
+  download: downloadUrl,
+  icon,
+  iframeName,
+  isTrusted = false,
+  onClose,
+  onDownloadActionClick,
+  onOpen,
+  onViewActionClick,
+  providerName,
+  showModal,
+  src,
+  testId = 'smart-links-preview-modal',
+  title,
+  url
+}) => {
+  const [isOpen, setIsOpen] = useState(showModal);
+  const [size, setSize] = useState(MIN_MODAL_SIZE);
+  const handleOnClose = useCallback(() => setIsOpen(false), []);
+  const handleOnSizeClick = useCallback(() => {
+    const newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    setSize(newSize);
+  }, [size]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    onClose: handleOnClose,
+    onCloseComplete: onClose,
+    onOpenComplete: onOpen,
+    testId: testId,
+    width: size
+  }, /*#__PURE__*/React.createElement(LinkInfo, {
+    downloadUrl: downloadUrl,
+    icon: icon,
+    providerName: providerName,
+    onViewButtonClick: onViewActionClick,
+    onDownloadButtonClick: onDownloadActionClick,
+    onResizeButtonClick: handleOnSizeClick,
+    size: size,
+    title: title,
+    testId: testId,
+    url: url
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+    isTrusted: isTrusted,
+    name: iframeName,
+    src: src,
+    testId: testId
+  }))));
+};
+
+export default withErrorBoundary(EmbedModal);

package/dist/es2019/view/EmbedModal/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { css } from '@emotion/core';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
@@ -60,6 +60,7 @@ const TitleBlock = ({
   anchorTarget,
   hideTitleTooltip,
   maxLines,
+  onActionMenuOpenChange,
   onClick,
   overrideCss,
   status = SmartLinkStatus.Fallback,
@@ -70,10 +71,19 @@ const TitleBlock = ({
   ...props
 }) => {
   const [actionDropdownOpen, setActionDropdownOpen] = useState(false);
+  const onDropdownOpenChange = useCallback(isOpen => {
+    setActionDropdownOpen(isOpen);
+
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
   const actionGroup = actions.length > 0 && /*#__PURE__*/React.createElement(ActionGroup, {
     items: actions,
     visibleButtonsNum: showActionOnHover ? 1 : 2,
-    onDropdownOpenChange: isOpen => setActionDropdownOpen(isOpen)
+    onDropdownOpenChange: onDropdownOpenChange
   });
   const actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
   const combinedCss = css`

package/dist/esm/messages.js

@@ -165,6 +165,21 @@ export var messages = defineMessages({
     defaultMessage: 'Preview',
     description: 'Click to view a richer view of your content, without needing to navigate to it.'
   },
+  preview_close: {
+    id: 'fabric.linking.preview_close',
+    defaultMessage: 'Close preview',
+    description: 'Click to close embed preview modal.'
+  },
+  preview_max_size: {
+    id: 'fabric.linking.preview_max_size',
+    defaultMessage: 'View full screen',
+    description: 'Click to increase embed preview modal size to a maximum viewing size.'
+  },
+  preview_min_size: {
+    id: 'fabric.linking.preview_min_size',
+    defaultMessage: 'Close full screen',
+    description: 'Click to decrease embed preview modal size to a minimum viewing size.'
+  },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',
     defaultMessage: 'Blocker',

package/dist/esm/utils/token.js

@@ -1,7 +1,7 @@
 import { token } from '@atlaskit/tokens';
 export var tokens = {
   actionIcon: token('color.icon', '#44546F'),
-  background: token('elevation.surface', '#FFFFFF'),
+  background: token('elevation.surface.raised', '#FFFFFF'),
   badgeIcon: token('color.icon.subtle', '#626F86'),
   badgeText: token('color.text.subtlest', '#626F86'),
   blackLink: token('color.text.subtle', '#44546F'),

package/dist/esm/version.json

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

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

@@ -22,7 +22,7 @@ var sharedFrameStyles = {
   maxWidth: gs(95),
   width: '100%',
   display: 'flex',
-  backgroundColor: token('elevation.surface', 'white')
+  backgroundColor: token('elevation.surface.raised', 'white')
 };
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var children = _ref.children,

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

@@ -99,7 +99,7 @@ export var TextWrapper = styled.div(_templateObject5 || (_templateObject5 = _tag
 // 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  ", "\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, token('elevation.surface', 'white'), gridSize(4), gridSize(4), function (_ref9) {
+export var Content = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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, token('elevation.surface.raised', 'white'), gridSize(4), gridSize(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { getIframeSandboxAttribute } from '../../../../utils';
+var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 214px);\n"])));
+
+var EmbedContent = function EmbedContent(_ref) {
+  var isTrusted = _ref.isTrusted,
+      name = _ref.name,
+      src = _ref.src,
+      testId = _ref.testId;
+  var sandbox = getIframeSandboxAttribute(isTrusted);
+  var props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name: name,
+    sandbox: sandbox,
+    src: src,
+    'data-testid': "".concat(testId, "-embed")
+  };
+  return src ? jsx("iframe", _extends({
+    src: src
+  }, props)) : jsx("iframe", props);
+};
+
+export default EmbedContent;

package/dist/esm/view/EmbedModal/components/embed-content/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/EmbedModal/components/error-boundary/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+var FallbackComponent = function FallbackComponent() {
+  return /*#__PURE__*/React.createElement("span", null);
+};
+
+var withErrorBoundary = function withErrorBoundary(Component) {
+  return function (props) {
+    var onOpenFailed = props.onOpenFailed;
+    var onError = useCallback(function (error, errorInfo) {
+      if (onOpenFailed) {
+        onOpenFailed(error, errorInfo);
+      }
+    }, [onOpenFailed]);
+    return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      FallbackComponent: FallbackComponent,
+      onError: onError
+    }, /*#__PURE__*/React.createElement(Component, props));
+  };
+};
+
+export default withErrorBoundary;

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -0,0 +1,98 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
+import React, { useMemo } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { useModal } from '@atlaskit/modal-dialog';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import DownloadIcon from '@atlaskit/icon/glyph/download';
+import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
+import VidFullScreenOnIcon from '@atlaskit/icon/glyph/vid-full-screen-on';
+import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
+import { Icon } from '../../../common/Icon';
+import { messages } from '../../../../messages';
+import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoButton from './link-info-button';
+import { actionCss, containerStyles, iconCss, titleCss } from './styled';
+
+var LinkInfo = function LinkInfo(_ref) {
+  var downloadUrl = _ref.downloadUrl,
+      icon = _ref.icon,
+      providerName = _ref.providerName,
+      onDownloadButtonClick = _ref.onDownloadButtonClick,
+      onResizeButtonClick = _ref.onResizeButtonClick,
+      onViewButtonClick = _ref.onViewButtonClick,
+      size = _ref.size,
+      testId = _ref.testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useModal = useModal(),
+      onClose = _useModal.onClose;
+
+  var downloadButton = useMemo(function () {
+    if (downloadUrl) {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        href: downloadUrl,
+        icon: jsx(DownloadIcon, {
+          label: messages.download.defaultMessage
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [downloadUrl, onDownloadButtonClick, testId]);
+  var urlButton = useMemo(function () {
+    if (url) {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
+        content: content,
+        href: url,
+        icon: jsx(ShortcutIcon, {
+          label: messages.viewOriginal.defaultMessage
+        }),
+        onClick: onViewButtonClick,
+        target: "_blank",
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId, url]);
+  var sizeButton = useMemo(function () {
+    var isFullScreen = size === MAX_MODAL_SIZE;
+    var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    var icon = isFullScreen ? jsx(VidFullScreenOffIcon, {
+      label: message.defaultMessage
+    }) : jsx(VidFullScreenOnIcon, {
+      label: message.defaultMessage
+    });
+    return jsx(LinkInfoButton, {
+      content: jsx(FormattedMessage, message),
+      icon: icon,
+      onClick: onResizeButtonClick,
+      testId: "".concat(testId, "-resize")
+    });
+  }, [onResizeButtonClick, size, testId]);
+  return jsx("div", {
+    css: containerStyles
+  }, icon && jsx("div", {
+    css: iconCss,
+    "data-testid": "".concat(testId, "-icon")
+  }, jsx(Icon, icon)), jsx("div", {
+    css: titleCss
+  }, jsx("h3", {
+    "data-testid": "".concat(testId, "-title")
+  }, title), jsx("span", {
+    tabIndex: 0
+  })), jsx("div", {
+    css: actionCss
+  }, downloadButton, urlButton, sizeButton, jsx(LinkInfoButton, {
+    content: jsx(FormattedMessage, messages.preview_close),
+    icon: jsx(CrossIcon, {
+      label: messages.preview_close.defaultMessage
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+
+export default LinkInfo;

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+
+var LinkInfoButton = function LinkInfoButton(_ref) {
+  var content = _ref.content,
+      href = _ref.href,
+      icon = _ref.icon,
+      onClick = _ref.onClick,
+      target = _ref.target,
+      testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    content: content,
+    hideTooltipOnClick: true,
+    position: "top",
+    tag: "span",
+    testId: "".concat(testId, "-tooltip")
+  }, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    href: href,
+    iconBefore: icon,
+    onClick: onClick,
+    target: target,
+    testId: "".concat(testId, "-button")
+  }));
+};
+
+export default LinkInfoButton;

package/dist/esm/view/EmbedModal/components/link-info/link-info-button/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css } from '@emotion/core';
+import { gs } from '../../../common/utils';
+import { token } from '@atlaskit/tokens';
+import { N100 } from '@atlaskit/theme/colors';
+export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", ";\n  justify-content: space-between;\n  padding: ", " ", ";\n"])), gs(2), gs(2), gs(3));
+var iconSize = '32px';
+export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);
+export var titleCss = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n\n  h3 {\n    flex: 1 1 auto;\n\n    // EDM-42336: UX is not finalised yet.\n    font-size: 20px;\n    font-weight: 400;\n    line-height: 24px;\n\n    display: -webkit-box;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: break-word;\n    -webkit-line-clamp: 1;\n    -webkit-box-orient: vertical;\n    // Fallback options\n    @supports not (-webkit-line-clamp: 1) {\n      max-height: 24px;\n    }\n  }\n"])));
+export var subtitleCss = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n\n  // EDM-42336: UX is not finalised yet.\n  font-size: 12px;\n  font-weight: 400;\n  line-height: 16px;\n"])), token('color.text.subtlest', N100));
+export var actionCss = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));

package/dist/esm/view/EmbedModal/components/link-info/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/view/EmbedModal/constants.js

@@ -0,0 +1,2 @@
+export var MAX_MODAL_SIZE = '100%';
+export var MIN_MODAL_SIZE = 'large';

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

@@ -0,0 +1,70 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import LinkInfo from './components/link-info';
+import { MAX_MODAL_SIZE, MIN_MODAL_SIZE } from './constants';
+import EmbedContent from './components/embed-content';
+import withErrorBoundary from './components/error-boundary';
+
+var EmbedModal = function EmbedModal(_ref) {
+  var downloadUrl = _ref.download,
+      icon = _ref.icon,
+      iframeName = _ref.iframeName,
+      _ref$isTrusted = _ref.isTrusted,
+      isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
+      onClose = _ref.onClose,
+      onDownloadActionClick = _ref.onDownloadActionClick,
+      onOpen = _ref.onOpen,
+      onViewActionClick = _ref.onViewActionClick,
+      providerName = _ref.providerName,
+      showModal = _ref.showModal,
+      src = _ref.src,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'smart-links-preview-modal' : _ref$testId,
+      title = _ref.title,
+      url = _ref.url;
+
+  var _useState = useState(showModal),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = useState(MIN_MODAL_SIZE),
+      _useState4 = _slicedToArray(_useState3, 2),
+      size = _useState4[0],
+      setSize = _useState4[1];
+
+  var handleOnClose = useCallback(function () {
+    return setIsOpen(false);
+  }, []);
+  var handleOnSizeClick = useCallback(function () {
+    var newSize = size === MIN_MODAL_SIZE ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
+    setSize(newSize);
+  }, [size]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    height: "100%",
+    onClose: handleOnClose,
+    onCloseComplete: onClose,
+    onOpenComplete: onOpen,
+    testId: testId,
+    width: size
+  }, /*#__PURE__*/React.createElement(LinkInfo, {
+    downloadUrl: downloadUrl,
+    icon: icon,
+    providerName: providerName,
+    onViewButtonClick: onViewActionClick,
+    onDownloadButtonClick: onDownloadActionClick,
+    onResizeButtonClick: handleOnSizeClick,
+    size: size,
+    title: title,
+    testId: testId,
+    url: url
+  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+    isTrusted: isTrusted,
+    name: iframeName,
+    src: src,
+    testId: testId
+  }))));
+};
+
+export default withErrorBoundary(EmbedModal);

package/dist/esm/view/EmbedModal/types.js

@@ -0,0 +1 @@
+export {};