@atlaskit/smart-card 34.1.0 → 34.2.0

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var styles = (0, _react.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`
+ */
+var LayeredLinkOld = function LayeredLinkOld(_ref) {
+  var onClick = _ref.onClick,
+    target = _ref.target,
+    testId = _ref.testId,
+    text = _ref.text,
+    url = _ref.url;
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  return (0, _react.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": "".concat(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);
+};
+var _default = exports.default = LayeredLinkOld;

package/dist/cjs/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/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,69 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.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
-    }
-  }
-});
+var _LayeredLinkOld = _interopRequireDefault(require("./LayeredLinkOld"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = null;
 
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
  * @see `clickableContainer`
  */
-var LayeredLink = function LayeredLink(_ref) {
+var LayeredLinkNew = function LayeredLinkNew(_ref) {
   var onClick = _ref.onClick,
     target = _ref.target,
     testId = _ref.testId,
     text = _ref.text,
     url = _ref.url;
   var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
-  return (0, _react.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: (0, _runtime.ax)(["_1reo15vq _18m915vq _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _azhw1osq _o5721q9c _hboxstnw _obkmidpf _a52dkb7n", "layered-link"]),
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
     onClick: onClick,
@@ -72,4 +40,10 @@ var LayeredLink = function LayeredLink(_ref) {
     tabIndex: -1 // Hide tab index and let the title link be the link.
   }, text);
 };
+var LayeredLink = function LayeredLink(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LayeredLinkNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_LayeredLinkOld.default, props);
+};
 var _default = exports.default = LayeredLink;

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.1.0",
+  packageVersion: "34.2.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.1.0"
+  packageVersion: "34.2.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -5,10 +5,13 @@ import React from 'react';
  */
 export const IFrame = ({
   childRef,
+  className,
   ...props
 }) => {
-  // 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/es2019/view/EmbedModal/components/embed-content/index.compiled.css

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

package/dist/es2019/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';
-const iframeCss = css({
-  width: '100%',
-  height: 'calc(100vh - 208px)'
-});
+import EmbedContentOld from './indexOld';
+const iframeCss = null;
 const EmbedContent = ({
   isTrusted,
   name,
@@ -19,13 +17,21 @@ const EmbedContent = ({
 }) => {
   const sandbox = getIframeSandboxAttribute(isTrusted);
   const props = {
-    css: iframeCss,
     frameBorder: 0,
     name,
     sandbox,
     src,
     'data-testid': `${testId}-embed`
   };
-  return jsx(IFrame, props);
+  return /*#__PURE__*/React.createElement(IFrame, _extends({}, props, {
+    className: ax(["_1bsb1osq _4t3i815d"])
+  }));
 };
-export default EmbedContent;
+const 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/es2019/view/EmbedModal/components/embed-content/indexOld.js

@@ -0,0 +1,31 @@
+/**
+ * @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';
+const iframeCss = css({
+  width: '100%',
+  height: 'calc(100vh - 208px)'
+});
+const EmbedContent = ({
+  isTrusted,
+  name,
+  src,
+  testId
+}) => {
+  const sandbox = getIframeSandboxAttribute(isTrusted);
+  const props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name,
+    sandbox,
+    src,
+    'data-testid': `${testId}-embed`
+  };
+  return jsx(IFrame, props);
+};
+export default EmbedContent;

package/dist/es2019/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/es2019/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';
+const containerStyles = null;
+const 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.
+const iconCss = null;
+const height = '20px';
+const titleCss = null;
+const actionCss = null;
 const LinkInfo = ({
   icon,
   providerName,
@@ -36,9 +43,9 @@ const LinkInfo = ({
   } = useModal();
   const downloadButton = useMemo(() => {
     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",
@@ -51,10 +58,10 @@ const LinkInfo = ({
   }, [onDownloadButtonClick, testId]);
   const urlButton = useMemo(() => {
     if (onViewButtonClick) {
-      const content = providerName ? jsx(React.Fragment, null, jsx(FormattedMessage, messages.viewIn), " ", providerName) : jsx(FormattedMessage, messages.viewOriginal);
-      return jsx(LinkInfoButton, {
+      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: jsx(ShortcutIcon, {
+        icon: /*#__PURE__*/React.createElement(ShortcutIcon, {
           label: messages.viewOriginal.defaultMessage,
           spacing: "spacious",
           color: "currentColor"
@@ -67,56 +74,59 @@ const LinkInfo = ({
   const sizeButton = useMemo(() => {
     const isFullScreen = size === MAX_MODAL_SIZE;
     const message = isFullScreen ? messages.preview_min_size : messages.preview_max_size;
-    const icon = isFullScreen ? jsx(FullscreenExitIcon, {
+    const 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: `${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": `${testId}-icon`
-    }, jsx(Icon, icon)), jsx("div", {
-      css: titleCss
-    }, jsx(Heading, {
-      size: "medium",
-      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,
-        color: "currentColor",
-        spacing: "spacious"
-      }),
-      onClick: onClose,
-      testId: `${testId}-close`
-    })))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_zulpu2gc _4cvr1h6o _1e0c1txw _1bah1yb4 _ca0q1ejb _u5f31ejb _n3tddlk8 _19bv1ejb"])
+  }, 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 _1o9zkb7n _i0dl1wug _yrj2kb7n _1wkfkb7n _923e1wug _1umo1bk4 _101p15vq _12bo15vq _r8nti7a9 _1flvcj1k _4wztidpf _c7bk1l2s _1r7d1hna _uepwkb7n _shpw1e54 _130wgktf"])
+  }, /*#__PURE__*/React.createElement(Heading, {
+    size: "medium",
+    testId: `${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: `${testId}-close`
+  })));
+};
+const 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/es2019/view/EmbedModal/components/link-info/indexOld.js

@@ -0,0 +1,122 @@
+/**
+ * @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';
+const LinkInfo = ({
+  icon,
+  providerName,
+  onDownloadButtonClick,
+  onResizeButtonClick,
+  onViewButtonClick,
+  size,
+  testId,
+  title
+}) => {
+  const {
+    onClose
+  } = useModal();
+  const downloadButton = useMemo(() => {
+    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: `${testId}-download`
+      });
+    }
+  }, [onDownloadButtonClick, testId]);
+  const urlButton = useMemo(() => {
+    if (onViewButtonClick) {
+      const 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: `${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 ? 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: `${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": `${testId}-icon`
+    }, jsx(Icon, icon)), jsx("div", {
+      css: titleCss
+    }, jsx(Heading, {
+      size: "medium",
+      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,
+        color: "currentColor",
+        spacing: "spacious"
+      }),
+      onClick: onClose,
+      testId: `${testId}-close`
+    })))
+  );
+};
+export default LinkInfo;

package/dist/es2019/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';
 const ImageIcon = ({
@@ -13,14 +9,14 @@ const ImageIcon = ({
   url,
   onError,
   onLoad
-}) => jsx(ImageLoader, {
+}) => /*#__PURE__*/React.createElement(ImageLoader, {
   src: url,
-  loading: jsx(LoadingSkeleton, {
+  loading: /*#__PURE__*/React.createElement(LoadingSkeleton, {
     testId: `${testId}-loading`
   })
   // eslint-disable-next-line jsx-a11y/alt-text
   ,
-  loaded: jsx("img", {
+  loaded: /*#__PURE__*/React.createElement("img", {
     src: url,
     "data-testid": `${testId}-image`
   }),