@atlaskit/smart-card 34.1.0 → 34.2.0

package/dist/es2019/view/FlexibleCard/components/container/layered-link/LayeredLinkOld.js

@@ -0,0 +1,69 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+const styles = css({
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  textIndent: '100%',
+  whiteSpace: 'nowrap',
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a&.layered-link': {
+    position: 'absolute',
+    zIndex: 0
+  },
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&:hover ~ *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.actions-button-group': {
+      opacity: 1
+    }
+  }
+});
+
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
+const LayeredLinkOld = ({
+  onClick,
+  target,
+  testId,
+  text,
+  url
+}) => {
+  const onMouseDown = useMouseDownEvent();
+  return jsx("a", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "layered-link",
+    css: styles,
+    "data-testid": `${testId}-layered-link`,
+    href: url,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+  }, text);
+};
+export default LayeredLinkOld;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.compiled.css

@@ -0,0 +1,11 @@
+._154iidpf{top:0}
+._18m915vq{overflow-y:hidden}
+._1ltvidpf{left:0}
+._1reo15vq{overflow-x:hidden}
+._1xi2idpf{right:0}
+._94n5idpf{bottom:0}
+._a52dkb7n:hover~* .actions-button-group{opacity:1}
+._azhw1osq{text-indent:100%}
+._o5721q9c{white-space:nowrap}
+a._hboxstnw.layered-link{position:absolute}
+a._obkmidpf.layered-link{z-index:0}

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,52 +1,18 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-const styles = css({
-  // Stretch the invisible link over the whole of the post.
-  // Hide the link’s text.
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  overflow: 'hidden',
-  textIndent: '100%',
-  whiteSpace: 'nowrap',
-  // Needs a heightened specificity to trump other anchor.
-  // Stack it under all other links in the post text.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'a&.layered-link': {
-    position: 'absolute',
-    zIndex: 0
-  },
-  // When hovering over the layered link, any hidden action buttons inside
-  // the Container should become visible.
-  // As actions resides inside blocks and layered link is expected to be
-  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
-  // its sibling. Using general sibling combinator here to apply styling to
-  // all the siblings of layered link.
-  // The general sibling combinator (~) separates two selectors and matches all
-  // iterations of the second element, that are following the first element
-  // (though not necessarily immediately), and are children of the same parent
-  // element.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:hover ~ *': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.actions-button-group': {
-      opacity: 1
-    }
-  }
-});
+import LayeredLinkOld from './LayeredLinkOld';
+const styles = null;
 
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
  * @see `clickableContainer`
  */
-const LayeredLink = ({
+const LayeredLinkNew = ({
   onClick,
   target,
   testId,
@@ -54,10 +20,9 @@ const LayeredLink = ({
   url
 }) => {
   const onMouseDown = useMouseDownEvent();
-  return jsx("a", {
+  return /*#__PURE__*/React.createElement("a", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "layered-link",
-    css: styles,
+    className: ax(["_1reo15vq _18m915vq _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _azhw1osq _o5721q9c _hboxstnw _obkmidpf _a52dkb7n", "layered-link"]),
     "data-testid": `${testId}-layered-link`,
     href: url,
     onClick: onClick,
@@ -66,4 +31,10 @@ const LayeredLink = ({
     tabIndex: -1 // Hide tab index and let the title link be the link.
   }, text);
 };
+const LayeredLink = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LayeredLinkNew, props);
+  }
+  return /*#__PURE__*/React.createElement(LayeredLinkOld, props);
+};
 export default LayeredLink;

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

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

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: "34.1.0"
+  packageVersion: "34.2.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["childRef"];
+var _excluded = ["childRef", "className"];
 import React from 'react';
 /**
  * Iframe element isolated for DI purposes
  */
 export var IFrame = function IFrame(_ref) {
   var childRef = _ref.childRef,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  // eslint-disable-next-line jsx-a11y/iframe-has-title
-  return /*#__PURE__*/React.createElement("iframe", _extends({}, props, {
+  // eslint-disable-next-line jsx-a11y/iframe-has-title,@atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/React.createElement("iframe", _extends({
+    className: className
+  }, props, {
     ref: childRef
   }));
 };

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

@@ -0,0 +1,2 @@
+._1bsb1osq{width:100%}
+._4t3i815d{height:calc(100vh - 13pc)}

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

@@ -1,16 +1,14 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getIframeSandboxAttribute } from '../../../../utils';
 import { IFrame } from '../../../EmbedCard/components/IFrame';
-var iframeCss = css({
-  width: '100%',
-  height: 'calc(100vh - 208px)'
-});
+import EmbedContentOld from './indexOld';
+var iframeCss = null;
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
     name = _ref.name,
@@ -18,13 +16,21 @@ var EmbedContent = function EmbedContent(_ref) {
     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 jsx(IFrame, props);
+  return /*#__PURE__*/React.createElement(IFrame, _extends({}, props, {
+    className: ax(["_1bsb1osq _4t3i815d"])
+  }));
 };
-export default EmbedContent;
+var Exported = function Exported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedContent, props);
+  } else {
+    return /*#__PURE__*/React.createElement(EmbedContentOld, props);
+  }
+};
+export default Exported;

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

@@ -0,0 +1,30 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { getIframeSandboxAttribute } from '../../../../utils';
+import { IFrame } from '../../../EmbedCard/components/IFrame';
+var iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
+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 jsx(IFrame, props);
+};
+export default EmbedContent;

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

@@ -0,0 +1,35 @@
+
+._1umo1bk4 h3{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}._101p15vq h3{overflow-x:hidden}
+._12bo15vq h3{overflow-y:hidden}
+._16jlidpf{flex-grow:0}
+._16jlkb7n{flex-grow:1}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
+._1bah1yb4{justify-content:space-between}
+._1bsb1tcg, ._1xyl1tcg [data-smart-element-icon] img, ._1h1b1tcg [data-smart-element-icon] span, ._prfw1tcg [data-smart-element-icon] svg, ._mezj1tcg img, ._e2oo1tcg span, ._w8l51tcg svg{width:24px}
+._1e0c1txw{display:flex}
+._1flvcj1k h3{display:-webkit-box}
+._1o9zidpf{flex-shrink:0}
+._1o9zkb7n{flex-shrink:1}
+._1r7d1hna h3{word-break:break-word}
+._1tke1tcg, ._x9xj1tcg [data-smart-element-icon] img, ._v5981tcg [data-smart-element-icon] span, ._z15s1tcg [data-smart-element-icon] svg, ._qci81tcg img, ._15iz1tcg span, ._erub1tcg svg{min-height:24px}
+._1ul91tcg, ._1ekg1tcg [data-smart-element-icon] img, ._jbhf1tcg [data-smart-element-icon] span, ._11hh1tcg [data-smart-element-icon] svg, ._1rg21tcg img, ._q7cv1tcg span, ._xwbj1tcg svg{min-width:24px}
+._1wkfkb7n h3{flex-shrink:1}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg, ._gire1tcg [data-smart-element-icon] img, ._yrry1tcg [data-smart-element-icon] span, ._1bnm1tcg [data-smart-element-icon] svg, ._bna71tcg img, ._1xjx1tcg span, ._17521tcg svg{height:24px}
+._4wztidpf h3{margin-bottom:0}
+._923e1wug h3{flex-basis:auto}
+._c71l1tcg, ._1q121tcg [data-smart-element-icon] img, ._2s1x1tcg [data-smart-element-icon] span, ._1rh41tcg [data-smart-element-icon] svg, ._19l31tcg img, ._1pr21tcg span, ._1u5t1tcg svg{max-height:24px}
+._c7bk1l2s h3{text-overflow:ellipsis}
+._ca0q1ejb{padding-top:var(--ds-space-300,24px)}
+._i0dl1wug{flex-basis:auto}
+._n3tddlk8{padding-bottom:14px}
+._p12f1tcg, ._1mj01tcg [data-smart-element-icon] img, ._1r9c1tcg [data-smart-element-icon] span, ._1xch1tcg [data-smart-element-icon] svg, ._rtys1tcg img, ._b8nk1tcg span, ._4x201tcg svg{max-width:24px}
+._r8nti7a9 h3{font-weight:var(--ds-font-weight-regular,400)}
+._shpw1e54 h3{-webkit-box-orient:vertical}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
+._uepwkb7n h3{-webkit-line-clamp:1}
+._yrj2kb7n h3{flex-grow:1}
+@media only screen and (max-width:980px){._3kllglyw .smart-link-resize-button{display:none}}
+@supports not (-webkit-line-clamp:1){._130wgktf h3{max-height:20px}}

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

@@ -1,11 +1,7 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useMemo } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
 import DownloadIcon from '@atlaskit/icon/core/download';
@@ -16,11 +12,22 @@ import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut'
 import DownloadIconLegacy from '@atlaskit/icon/glyph/download';
 import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
 import { useModal } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../../messages';
 import { Icon } from '../../../common/Icon';
 import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoOld from './indexOld';
 import LinkInfoButton from './link-info-button';
-import { actionCss, containerStyles, iconCss, titleCss } from './styled';
+var containerStyles = null;
+var iconSize = '24px';
+
+// EDM-7328: CSS Specificity
+// An embed modal icon css for img, span, svg has specificity weight of 0-1-1.
+// Specify flex ui icon selector to increase specificity weight to 0-2-1.
+var iconCss = null;
+var height = '20px';
+var titleCss = null;
+var actionCss = null;
 var LinkInfo = function LinkInfo(_ref) {
   var icon = _ref.icon,
     providerName = _ref.providerName,
@@ -34,9 +41,9 @@ var LinkInfo = function LinkInfo(_ref) {
     onClose = _useModal.onClose;
   var downloadButton = useMemo(function () {
     if (onDownloadButtonClick) {
-      return jsx(LinkInfoButton, {
-        content: jsx(FormattedMessage, messages.download),
-        icon: jsx(DownloadIcon, {
+      return /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, messages.download),
+        icon: /*#__PURE__*/React.createElement(DownloadIcon, {
           label: messages.download.defaultMessage,
           LEGACY_fallbackIcon: DownloadIconLegacy,
           spacing: "spacious",
@@ -49,10 +56,10 @@ var LinkInfo = function LinkInfo(_ref) {
   }, [onDownloadButtonClick, testId]);
   var urlButton = useMemo(function () {
     if (onViewButtonClick) {
-      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
-      return jsx(LinkInfoButton, {
+      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: jsx(ShortcutIcon, {
+        icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage,
           spacing: "spacious",
           color: "currentColor"
@@ -65,56 +72,59 @@ var LinkInfo = function LinkInfo(_ref) {
   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(FullscreenExitIcon, {
+    var icon = isFullScreen ? /*#__PURE__*/React.createElement(FullscreenExitIcon, {
       LEGACY_fallbackIcon: VidFullScreenOffIcon,
       label: message.defaultMessage,
       spacing: "spacious",
       color: "currentColor"
-    }) : jsx(VidFullScreenOnIcon, {
+    }) : /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
       label: message.defaultMessage,
       spacing: "spacious",
       color: "currentColor"
     });
     return (
+      /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      jsx("span", {
+      React.createElement("span", {
         className: "smart-link-resize-button"
-      }, jsx(LinkInfoButton, {
-        content: jsx(FormattedMessage, message),
+      }, /*#__PURE__*/React.createElement(LinkInfoButton, {
+        content: /*#__PURE__*/React.createElement(FormattedMessage, message),
         icon: icon,
         onClick: onResizeButtonClick,
         testId: "".concat(testId, "-resize")
       }))
     );
   }, [onResizeButtonClick, size, testId]);
-  return (
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: containerStyles
-    }, icon &&
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: iconCss,
-      "data-testid": "".concat(testId, "-icon")
-    }, jsx(Icon, icon)), jsx("div", {
-      css: titleCss
-    }, jsx(Heading, {
-      size: "medium",
-      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,
-        color: "currentColor",
-        spacing: "spacious"
-      }),
-      onClick: onClose,
-      testId: "".concat(testId, "-close")
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _4cvr1h6o _1e0c1txw _1bah1yb4 _ca0q1ejb _u5f31ejb _n3tddlk8 _19bv1ejb"])
+  }, 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 _1o9zkb7n _i0dl1wug _yrj2kb7n _1wkfkb7n _923e1wug _1umo1bk4 _101p15vq _12bo15vq _r8nti7a9 _1flvcj1k _4wztidpf _c7bk1l2s _1r7d1hna _uepwkb7n _shpw1e54 _130wgktf"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: "".concat(testId, "-title")
+  }, title), /*#__PURE__*/React.createElement("span", {
+    tabIndex: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _1e0c1txw _3kllglyw"])
+  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/React.createElement(LinkInfoButton, {
+    content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_close),
+    icon: /*#__PURE__*/React.createElement(CrossIcon, {
+      label: messages.preview_close.defaultMessage,
+      color: "currentColor",
+      spacing: "spacious"
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+var Exported = function Exported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LinkInfo, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LinkInfoOld, props);
+  }
 };
-export default LinkInfo;
+export default Exported;

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

@@ -0,0 +1,120 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import DownloadIcon from '@atlaskit/icon/core/download';
+import FullscreenExitIcon from '@atlaskit/icon/core/fullscreen-exit';
+import CrossIcon from '@atlaskit/icon/core/migration/close--cross';
+import VidFullScreenOnIcon from '@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on';
+import ShortcutIcon from '@atlaskit/icon/core/migration/link-external--shortcut';
+import DownloadIconLegacy from '@atlaskit/icon/glyph/download';
+import VidFullScreenOffIcon from '@atlaskit/icon/glyph/vid-full-screen-off';
+import { useModal } from '@atlaskit/modal-dialog';
+import { messages } from '../../../../messages';
+import { Icon } from '../../../common/Icon';
+import { MAX_MODAL_SIZE } from '../../constants';
+import LinkInfoButton from './link-info-button';
+import { actionCss, containerStyles, iconCss, titleCss } from './styledOld';
+var LinkInfo = function LinkInfo(_ref) {
+  var icon = _ref.icon,
+    providerName = _ref.providerName,
+    onDownloadButtonClick = _ref.onDownloadButtonClick,
+    onResizeButtonClick = _ref.onResizeButtonClick,
+    onViewButtonClick = _ref.onViewButtonClick,
+    size = _ref.size,
+    testId = _ref.testId,
+    title = _ref.title;
+  var _useModal = useModal(),
+    onClose = _useModal.onClose;
+  var downloadButton = useMemo(function () {
+    if (onDownloadButtonClick) {
+      return jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, messages.download),
+        icon: jsx(DownloadIcon, {
+          label: messages.download.defaultMessage,
+          LEGACY_fallbackIcon: DownloadIconLegacy,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [onDownloadButtonClick, testId]);
+  var urlButton = useMemo(function () {
+    if (onViewButtonClick) {
+      var content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
+      return jsx(LinkInfoButton, {
+        content: content,
+        icon: jsx(ShortcutIcon, {
+          label: messages.viewOriginal.defaultMessage,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        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 icon = isFullScreen ? jsx(FullscreenExitIcon, {
+      LEGACY_fallbackIcon: VidFullScreenOffIcon,
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    }) : jsx(VidFullScreenOnIcon, {
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      jsx("span", {
+        className: "smart-link-resize-button"
+      }, jsx(LinkInfoButton, {
+        content: jsx(FormattedMessage, message),
+        icon: icon,
+        onClick: onResizeButtonClick,
+        testId: "".concat(testId, "-resize")
+      }))
+    );
+  }, [onResizeButtonClick, size, testId]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: containerStyles
+    }, icon &&
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    jsx("div", {
+      css: iconCss,
+      "data-testid": "".concat(testId, "-icon")
+    }, jsx(Icon, icon)), jsx("div", {
+      css: titleCss
+    }, jsx(Heading, {
+      size: "medium",
+      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,
+        color: "currentColor",
+        spacing: "spacious"
+      }),
+      onClick: onClose,
+      testId: "".concat(testId, "-close")
+    })))
+  );
+};
+export default LinkInfo;

package/dist/esm/view/FlexibleCard/components/common/image-icon/index.js

@@ -1,10 +1,6 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import ImageLoader from 'react-render-image';
 import LoadingSkeleton from '../loading-skeleton';
 var ImageIcon = function ImageIcon(_ref) {
@@ -13,14 +9,14 @@ var ImageIcon = function ImageIcon(_ref) {
     url = _ref.url,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return jsx(ImageLoader, {
+  return /*#__PURE__*/React.createElement(ImageLoader, {
     src: url,
-    loading: jsx(LoadingSkeleton, {
+    loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
       testId: "".concat(testId, "-loading")
     })
     // eslint-disable-next-line jsx-a11y/alt-text
     ,
-    loaded: jsx("img", {
+    loaded: /*#__PURE__*/React.createElement("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),