@atlaskit/smart-card 43.17.5 → 43.17.7

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

@@ -10,6 +10,7 @@ import FullscreenExitIcon from '@atlaskit/icon/core/fullscreen-exit';
 import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { CloseButton, useModal } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../../../../messages';
 import { Icon } from '../../../common/Icon';
@@ -24,6 +25,9 @@ const iconSize = '24px';
 const iconCss = null;
 const titleCss = null;
 const actionCss = null;
+const buttonGroupCss = null;
+const listItemCSS = null;
+const resizeButtonCss = null;
 const LinkInfo = ({
   icon,
   providerName,
@@ -125,4 +129,102 @@ const LinkInfo = ({
     testId: testId
   }))));
 };
-export default LinkInfo;
+const LinkInfoNew = ({
+  focusRef,
+  icon,
+  providerName,
+  onDownloadButtonClick,
+  onResizeButtonClick,
+  onViewButtonClick,
+  size,
+  testId,
+  title
+}) => {
+  const {
+    onClose
+  } = useModal();
+  const {
+    formatMessage
+  } = useIntl();
+  const downloadButton = useMemo(() => /*#__PURE__*/React.createElement(LinkInfoButton, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+    icon: () => /*#__PURE__*/React.createElement(DownloadIcon, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    }),
+    label: messages.download,
+    onClick: onDownloadButtonClick,
+    testId: `${testId}-download`
+  }), [onDownloadButtonClick, testId]);
+  const urlButton = useMemo(() => {
+    if (onViewButtonClick) {
+      const content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
+      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: content,
+        icon: () => /*#__PURE__*/React.createElement(ShortcutIcon, {
+          label: "",
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        label: messages.viewOriginal,
+        onClick: onViewButtonClick,
+        testId: `${testId}-url`
+      });
+    }
+  }, [onViewButtonClick, providerName, testId]);
+  const sizeButton = useMemo(() => {
+    const isFullScreen = size === MAX_MODAL_SIZE;
+    const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    const icon = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return /*#__PURE__*/React.createElement(LinkInfoButton, {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+      icon: () => icon,
+      label: message,
+      onClick: onResizeButtonClick,
+      testId: `${testId}-resize`
+    });
+  }, [onResizeButtonClick, size, testId]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    "data-testid": `${testId}-icon`,
+    className: ax(["_4t3i1tcg _gire1tcg _yrry1tcg _1bnm1tcg _bna71tcg _1xjx1tcg _17521tcg _1tke1tcg _x9xj1tcg _v5981tcg _z15s1tcg _qci81tcg _15iz1tcg _erub1tcg _c71l1tcg _1q121tcg _2s1x1tcg _1rh41tcg _19l31tcg _1pr21tcg _1u5t1tcg _1bsb1tcg _1xyl1tcg _1h1b1tcg _prfw1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _1ul91tcg _1ekg1tcg _jbhf1tcg _11hh1tcg _1rg21tcg _q7cv1tcg _xwbj1tcg _p12f1tcg _1mj01tcg _1r9c1tcg _1xch1tcg _rtys1tcg _b8nk1tcg _4x201tcg"])
+  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zidpf _i0dlf1ug _1e0c1txw _2lx21bp4 _1bah1h6o _1wpz1fhb"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "small",
+    color: "color.text",
+    ref: focusRef,
+    testId: `${testId}-title`
+  }, title)), /*#__PURE__*/React.createElement("ul", {
+    role: "list",
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _qtt8glyw _1e0c1txw _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _1pfhze3t _6rthze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bozgze3t"])
+  }, onDownloadButtonClick && /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, downloadButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, urlButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf", "_1dt6glyw"])
+  }, sizeButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
+    hideTooltipOnClick: true,
+    tag: "span",
+    testId: `${testId}-close-tooltip`
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onClose,
+    label: formatMessage(messages.preview_close),
+    testId: testId
+  })))));
+};
+export default componentWithFG('platform_navx_sl_a11y_embed_modal', LinkInfoNew, LinkInfo);

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
@@ -38,6 +39,9 @@ const EmbedModal = ({
   const [isOpen, setIsOpen] = useState(showModal);
   const [width, setWidth] = useState(defaultWidth);
   const openAt = useRef();
+  const focusRef = fg('platform_navx_sl_a11y_embed_modal') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useRef(null) : undefined;
   const invoke = useInvokeClientAction({
     fireEvent
   });
@@ -79,7 +83,9 @@ const EmbedModal = ({
   if (previewUrl && isSupportTheming) {
     previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
-  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, _extends({}, fg('platform_navx_sl_a11y_embed_modal') ? {
+    autoFocus: focusRef
+  } : undefined, {
     height: "100%",
     onClose: handleOnClose,
     onCloseComplete: handleOnCloseComplete,
@@ -88,13 +94,16 @@ const EmbedModal = ({
     width: width,
     label: title,
     isBlanketHidden: isBlanketHidden
-  }, /*#__PURE__*/React.createElement(LinkInfo, {
+  }), /*#__PURE__*/React.createElement(LinkInfo, _extends({
     icon: linkIcon && {
       icon: /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true
-    },
+    }
+  }, fg('platform_navx_sl_a11y_embed_modal') ? {
+    focusRef
+  } : undefined, {
     providerName: providerName,
     onViewButtonClick: invokeViewAction ? handleOnViewActionClick : undefined,
     onDownloadButtonClick: invokeDownloadAction ? handleOnDownloadActionClick : undefined,
@@ -102,7 +111,7 @@ const EmbedModal = ({
     size: width,
     title: title,
     testId: testId
-  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+  })), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,
     src: previewUrl,

package/dist/es2019/view/FlexibleCard/components/actions/ai-summary-action/copy-summary-action.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import CopyIcon from '@atlaskit/icon/core/migration/copy';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../messages';
 import Action from '../action';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import CrossIcon from '@atlaskit/icon/core/migration/cross';
+import CrossIcon from '@atlaskit/icon/core/cross';
 import { messages } from '../../../../../messages';
 import Action from '../action';
 const DeleteAction = props => /*#__PURE__*/React.createElement(Action, _extends({

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import DownloadIcon from '@atlaskit/icon/core/migration/download';
+import DownloadIcon from '@atlaskit/icon/core/download';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import EditIcon from '@atlaskit/icon/core/migration/edit';
+import EditIcon from '@atlaskit/icon/core/edit';
 import { messages } from '../../../../../messages';
 import Action from '../action';
 const EditAction = props => /*#__PURE__*/React.createElement(Action, _extends({

package/dist/es2019/view/FlexibleCard/components/elements/common/base-icon-element/index.js

@@ -6,7 +6,7 @@ import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useMemo } from 'react';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import Tile from '@atlaskit/tile';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../../constants';

package/dist/es2019/view/FlexibleCard/components/elements/common/base-lozenge-element/lozenge-action/lozenge-action-trigger/index.js

@@ -8,7 +8,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { cx } from '@compiled/react';
 import { useIntl } from 'react-intl-next';
-import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
 import Lozenge from '@atlaskit/lozenge';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives/compiled';

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.js

@@ -6,7 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useState } from 'react';
 import { di } from 'react-magnetic-di';
 import ImageLoader from 'react-render-image';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import { Box } from '@atlaskit/primitives/compiled';
 import { B400 } from '@atlaskit/theme/colors';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

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

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

package/dist/es2019/view/common/Icon.js

@@ -3,7 +3,7 @@ import "./Icon.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import ImageLoader from 'react-render-image';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 /**
  * Class name for selecting non-flexible block card icon image
  *

package/dist/esm/__tests__/vr-tests/__snapshots__/block-card/block-card-unauthorised-view-with-experiment--default--platform-sl-3p-unauth-paste-as-block-card-card-by-default-and-new-design.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb11ef68dac11fa878628611c7e694173a0227f20364b58a16c147b94f2f3f0f
-size 105623
+oid sha256:7539dc58765cc3a644800473955f56a8410e7750b326a8a043680cfe70263d8a
+size 95118

package/dist/esm/__tests__/vr-tests/__snapshots__/card-ssr/block-card-ssr--default.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b17c3fb45706baa1ce23f5d85f39ba070d48627ce3c331fafe547e89dd4187bb
-size 2653
+oid sha256:913988a97d9d0de73709ab6a078ad6d16e6e8bad73a240669ad03dc7e3326fe9
+size 2574

package/dist/esm/extractors/common/icon/extractIcon.js

@@ -4,7 +4,7 @@ import RepoIcon from '@atlaskit/icon-object/glyph/code/16';
 import CommitIcon from '@atlaskit/icon-object/glyph/commit/16';
 import PullRequestIcon from '@atlaskit/icon-object/glyph/pull-request/16';
 import TaskIcon from '@atlaskit/icon-object/glyph/task/16';
-import PeopleGroupIcon from '@atlaskit/icon/core/migration/people-group';
+import PeopleGroupIcon from '@atlaskit/icon/core/people-group';
 import { extractProvider, extractTitle, extractUrlFromIconJsonLd } from '@atlaskit/link-extractors';
 import { getIconForFileType } from '../../../utils';
 import { extractTaskType } from '../lozenge/extractTaskType';

package/dist/esm/ssr.js

@@ -7,7 +7,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { context } from './utils/analytics/analytics';
 import { CardWithUrlContent } from './view/CardWithUrl/component';
 import { LoadingCardLink } from './view/CardWithUrl/component-lazy/LoadingCardLink';
@@ -32,19 +31,12 @@ export var CardSSR = function CardSSR(props) {
     }
     return /*#__PURE__*/React.createElement(LoadingCardLink, cardProps);
   };
-  if (fg('platform_editor_inline_card_selected_state_fix')) {
-    var Component = cardProps.appearance === 'inline' ? 'span' : 'div';
-    return /*#__PURE__*/React.createElement(AnalyticsContext, {
-      data: context
-    }, /*#__PURE__*/React.createElement(ErrorBoundary, {
-      FallbackComponent: errorBoundaryFallbackComponent
-    }, /*#__PURE__*/React.createElement(Component, {
-      className: "loader-wrapper"
-    }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps))));
-  }
+  var Component = cardProps.appearance === 'inline' ? 'span' : 'div';
   return /*#__PURE__*/React.createElement(AnalyticsContext, {
     data: context
   }, /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: errorBoundaryFallbackComponent
-  }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps)));
+  }, /*#__PURE__*/React.createElement(Component, {
+    className: "loader-wrapper"
+  }, /*#__PURE__*/React.createElement(CardWithUrlContent, cardProps))));
 };

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

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

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

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
-import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import LinkGlyph from '@atlaskit/icon/core/link';
 import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';

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

@@ -3,7 +3,7 @@ import "./index.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
 import Heading from '@atlaskit/heading';
-import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import LinkGlyph from '@atlaskit/icon/core/link';
 import { ExpandedFrame } from '../../components/ExpandedFrame';
 import { ImageIcon } from '../../components/ImageIcon';
 var containerStyles = null;

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

@@ -1,12 +1,17 @@
 
+._qtt8glyw{list-style:none}
 ._zulp1b66{gap:var(--ds-space-050,4px)}
 ._zulpu2gc{gap:var(--ds-space-100,8px)}._11hh1tcg [data-smart-element-icon] svg{min-width:24px}
 ._15iz1tcg span{min-height:24px}
 ._16jlidpf{flex-grow:0}
 ._16jlkb7n{flex-grow:1}
 ._17521tcg svg{height:24px}
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
 ._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
 ._19l31tcg img{max-height:24px}
+._19pkidpf{margin-top:0}
+._19pkze3t{margin-top:var(--ds-space-0,0)}
 ._1bah1h6o{justify-content:center}
 ._1bnm1tcg [data-smart-element-icon] svg{height:24px}
 ._1bsb1tcg{width:24px}
@@ -15,6 +20,7 @@
 ._1h1b1tcg [data-smart-element-icon] span{width:24px}
 ._1mj01tcg [data-smart-element-icon] img{max-width:24px}
 ._1o9zidpf{flex-shrink:0}
+._1pfhze3t{margin-block-start:var(--ds-space-0,0)}
 ._1pr21tcg span{max-height:24px}
 ._1q121tcg [data-smart-element-icon] img{max-height:24px}
 ._1r9c1tcg [data-smart-element-icon] span{max-width:24px}
@@ -27,14 +33,19 @@
 ._1xch1tcg [data-smart-element-icon] svg{max-width:24px}
 ._1xjx1tcg span{height:24px}
 ._1xyl1tcg [data-smart-element-icon] img{width:24px}
+._2hwxze3t{margin-right:var(--ds-space-0,0)}
 ._2lx21bp4{flex-direction:column}
 ._2s1x1tcg [data-smart-element-icon] span{max-height:24px}
+._4cvr1h6o{align-items:center}
 ._4t3i1tcg{height:24px}
 ._4x201tcg svg{max-width:24px}
+._6rthze3t{margin-block-end:var(--ds-space-0,0)}
 ._b8nk1tcg span{max-width:24px}
 ._bna71tcg img{height:24px}
+._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
 ._c71l1tcg{max-height:24px}
 ._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._e2oo1tcg span{width:24px}
 ._erub1tcg svg{min-height:24px}
 ._gire1tcg [data-smart-element-icon] img{height:24px}
@@ -43,16 +54,19 @@
 ._jbhf1tcg [data-smart-element-icon] span{min-width:24px}
 ._mezj1tcg img{width:24px}
 ._n3tdpxbi{padding-bottom:var(--ds-space-200,1pc)}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
 ._p12f1tcg{max-width:24px}
 ._prfw1tcg [data-smart-element-icon] svg{width:24px}
 ._q7cv1tcg span{min-width:24px}
 ._qci81tcg img{min-height:24px}
 ._rtys1tcg img{max-width:24px}
 ._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
 ._v5981tcg [data-smart-element-icon] span{min-height:24px}
 ._w8l51tcg svg{width:24px}
 ._x9xj1tcg [data-smart-element-icon] img{min-height:24px}
 ._xwbj1tcg svg{min-width:24px}
 ._yrry1tcg [data-smart-element-icon] span{height:24px}
 ._z15s1tcg [data-smart-element-icon] svg{min-height:24px}
-@media only screen and (max-width:980px){._3kllglyw .smart-link-resize-button{display:none}}
+@media only screen and (max-width:980px){._1dt6glyw{display:none}._3kllglyw .smart-link-resize-button{display:none}}

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

@@ -10,6 +10,7 @@ import FullscreenExitIcon from '@atlaskit/icon/core/fullscreen-exit';
 import ShortcutIcon from '@atlaskit/icon/core/link-external';
 import { CloseButton, useModal } from '@atlaskit/modal-dialog';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../../../../messages';
 import { Icon } from '../../../common/Icon';
@@ -24,6 +25,9 @@ var iconSize = '24px';
 var iconCss = null;
 var titleCss = null;
 var actionCss = null;
+var buttonGroupCss = null;
+var listItemCSS = null;
+var resizeButtonCss = null;
 var LinkInfo = function LinkInfo(_ref) {
   var icon = _ref.icon,
     providerName = _ref.providerName,
@@ -128,4 +132,107 @@ var LinkInfo = function LinkInfo(_ref) {
     testId: testId
   }))));
 };
-export default LinkInfo;
+var LinkInfoNew = function LinkInfoNew(_ref2) {
+  var focusRef = _ref2.focusRef,
+    icon = _ref2.icon,
+    providerName = _ref2.providerName,
+    onDownloadButtonClick = _ref2.onDownloadButtonClick,
+    onResizeButtonClick = _ref2.onResizeButtonClick,
+    onViewButtonClick = _ref2.onViewButtonClick,
+    size = _ref2.size,
+    testId = _ref2.testId,
+    title = _ref2.title;
+  var _useModal2 = useModal(),
+    onClose = _useModal2.onClose;
+  var _useIntl2 = useIntl(),
+    formatMessage = _useIntl2.formatMessage;
+  var downloadButton = useMemo(function () {
+    return /*#__PURE__*/React.createElement(LinkInfoButton, {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(DownloadIcon, {
+          label: "",
+          spacing: "spacious",
+          color: "currentColor"
+        });
+      },
+      label: messages.download,
+      onClick: onDownloadButtonClick,
+      testId: "".concat(testId, "-download")
+    });
+  }, [onDownloadButtonClick, testId]);
+  var urlButton = useMemo(function () {
+    if (onViewButtonClick) {
+      var content = providerName ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedMessage, messages.viewIn), " ", providerName) : /*#__PURE__*/React.createElement(FormattedMessage, messages.viewOriginal);
+      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: content,
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(ShortcutIcon, {
+            label: "",
+            spacing: "spacious",
+            color: "currentColor"
+          });
+        },
+        label: messages.viewOriginal,
+        onClick: onViewButtonClick,
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId]);
+  var sizeButton = useMemo(function () {
+    var isFullScreen = size === MAX_MODAL_SIZE;
+    var message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
+    var _icon2 = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
+      label: "",
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return /*#__PURE__*/React.createElement(LinkInfoButton, {
+      content: /*#__PURE__*/React.createElement(FormattedMessage, message),
+      icon: function icon() {
+        return _icon2;
+      },
+      label: message,
+      onClick: onResizeButtonClick,
+      testId: "".concat(testId, "-resize")
+    });
+  }, [onResizeButtonClick, size, testId]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _1e0c1txw _19bv1ejb _u5f31ejb _ca0q1ejb _n3tdpxbi _1wpz1fhb _4t3i1tcg"])
+  }, icon && /*#__PURE__*/React.createElement("div", {
+    "data-testid": "".concat(testId, "-icon"),
+    className: ax(["_4t3i1tcg _gire1tcg _yrry1tcg _1bnm1tcg _bna71tcg _1xjx1tcg _17521tcg _1tke1tcg _x9xj1tcg _v5981tcg _z15s1tcg _qci81tcg _15iz1tcg _erub1tcg _c71l1tcg _1q121tcg _2s1x1tcg _1rh41tcg _19l31tcg _1pr21tcg _1u5t1tcg _1bsb1tcg _1xyl1tcg _1h1b1tcg _prfw1tcg _mezj1tcg _e2oo1tcg _w8l51tcg _1ul91tcg _1ekg1tcg _jbhf1tcg _11hh1tcg _1rg21tcg _q7cv1tcg _xwbj1tcg _p12f1tcg _1mj01tcg _1r9c1tcg _1xch1tcg _rtys1tcg _b8nk1tcg _4x201tcg"])
+  }, /*#__PURE__*/React.createElement(Icon, icon)), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zidpf _i0dlf1ug _1e0c1txw _2lx21bp4 _1bah1h6o _1wpz1fhb"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "small",
+    color: "color.text",
+    ref: focusRef,
+    testId: "".concat(testId, "-title")
+  }, title)), /*#__PURE__*/React.createElement("ul", {
+    role: "list",
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _qtt8glyw _1e0c1txw _19pkze3t _2hwxze3t _otyrze3t _18u0ze3t _1pfhze3t _6rthze3t _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _bozgze3t"])
+  }, onDownloadButtonClick && /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, downloadButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, urlButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf", "_1dt6glyw"])
+  }, sizeButton), /*#__PURE__*/React.createElement("li", {
+    className: ax(["_4cvr1h6o _19pkidpf"])
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
+    hideTooltipOnClick: true,
+    tag: "span",
+    testId: "".concat(testId, "-close-tooltip")
+  }, /*#__PURE__*/React.createElement(CloseButton, {
+    onClick: onClose,
+    label: formatMessage(messages.preview_close),
+    testId: testId
+  })))));
+};
+export default componentWithFG('platform_navx_sl_a11y_embed_modal', LinkInfoNew, LinkInfo);

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useRef, useState } from 'react';
 import ModalDialog, { ModalBody, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { SmartLinkSize } from '../../constants';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
@@ -51,6 +52,9 @@ var EmbedModal = function EmbedModal(_ref) {
     width = _useState4[0],
     setWidth = _useState4[1];
   var openAt = useRef();
+  var focusRef = fg('platform_navx_sl_a11y_embed_modal') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useRef(null) : undefined;
   var invoke = useInvokeClientAction({
     fireEvent: fireEvent
   });
@@ -94,7 +98,9 @@ var EmbedModal = function EmbedModal(_ref) {
   if (previewUrl && isSupportTheming) {
     previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
-  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, _extends({}, fg('platform_navx_sl_a11y_embed_modal') ? {
+    autoFocus: focusRef
+  } : undefined, {
     height: "100%",
     onClose: handleOnClose,
     onCloseComplete: handleOnCloseComplete,
@@ -103,13 +109,16 @@ var EmbedModal = function EmbedModal(_ref) {
     width: width,
     label: title,
     isBlanketHidden: isBlanketHidden
-  }, /*#__PURE__*/React.createElement(LinkInfo, {
+  }), /*#__PURE__*/React.createElement(LinkInfo, _extends({
     icon: linkIcon && {
       icon: /*#__PURE__*/React.createElement(BaseIconElement, _extends({}, linkIcon, {
         size: SmartLinkSize.Large
       })),
       isFlexibleUi: true
-    },
+    }
+  }, fg('platform_navx_sl_a11y_embed_modal') ? {
+    focusRef: focusRef
+  } : undefined, {
     providerName: providerName,
     onViewButtonClick: invokeViewAction ? handleOnViewActionClick : undefined,
     onDownloadButtonClick: invokeDownloadAction ? handleOnDownloadActionClick : undefined,
@@ -117,7 +126,7 @@ var EmbedModal = function EmbedModal(_ref) {
     size: width,
     title: title,
     testId: testId
-  }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
+  })), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,
     src: previewUrl,

package/dist/esm/view/FlexibleCard/components/actions/ai-summary-action/copy-summary-action.js

@@ -6,7 +6,7 @@ var _excluded = ["url", "onClick", "testId", "content"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import CopyIcon from '@atlaskit/icon/core/migration/copy';
+import CopyIcon from '@atlaskit/icon/core/copy';
 import { useAnalyticsEvents } from '../../../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../../../messages';
 import Action from '../action';

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

@@ -9,7 +9,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import LinkIcon from '@atlaskit/icon/core/migration/link';
+import LinkIcon from '@atlaskit/icon/core/link';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import CrossIcon from '@atlaskit/icon/core/migration/cross';
+import CrossIcon from '@atlaskit/icon/core/cross';
 import { messages } from '../../../../../messages';
 import Action from '../action';
 var DeleteAction = function DeleteAction(props) {