@atlaskit/smart-card 34.1.1 → 34.2.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 34.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 34.2.0
+
+### Minor Changes
+
+- [#101288](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101288)
+  [`f3f4156a61226`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3f4156a61226) -
+  migrate emotion to compiled in smart card EmbedModal component
+
 ## 34.1.1
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "34.1.1"
+  packageVersion: "34.2.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -8,15 +8,18 @@ exports.IFrame = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _excluded = ["childRef"];
+var _excluded = ["childRef", "className"];
 /**
  * Iframe element isolated for DI purposes
  */
 var IFrame = exports.IFrame = function IFrame(_ref) {
   var childRef = _ref.childRef,
+    className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  // eslint-disable-next-line jsx-a11y/iframe-has-title
-  return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({}, props, {
+  // eslint-disable-next-line jsx-a11y/iframe-has-title,@atlaskit/ui-styling-standard/no-classname-prop
+  return /*#__PURE__*/_react.default.createElement("iframe", (0, _extends2.default)({
+    className: className
+  }, props, {
     ref: childRef
   }));
 };

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

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

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

@@ -1,23 +1,24 @@
+/* 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../../../utils");
 var _IFrame = require("../../../EmbedCard/components/IFrame");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var iframeCss = (0, _react.css)({
-  width: '100%',
-  height: 'calc(100vh - 208px)'
-});
+var _indexOld = _interopRequireDefault(require("./indexOld"));
+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 iframeCss = null;
 var EmbedContent = function EmbedContent(_ref) {
   var isTrusted = _ref.isTrusted,
     name = _ref.name,
@@ -25,13 +26,21 @@ var EmbedContent = function EmbedContent(_ref) {
     testId = _ref.testId;
   var sandbox = (0, _utils.getIframeSandboxAttribute)(isTrusted);
   var props = {
-    css: iframeCss,
     frameBorder: 0,
     name: name,
     sandbox: sandbox,
     src: src,
     'data-testid': "".concat(testId, "-embed")
   };
-  return (0, _react.jsx)(_IFrame.IFrame, props);
+  return /*#__PURE__*/React.createElement(_IFrame.IFrame, (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1bsb1osq _4t3i815d"])
+  }));
+};
+var Exported = function Exported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(EmbedContent, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_indexOld.default, props);
+  }
 };
-var _default = exports.default = EmbedContent;
+var _default = exports.default = Exported;

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _reactMagneticDi = require("react-magnetic-di");
+var _utils = require("../../../../utils");
+var _IFrame = require("../../../EmbedCard/components/IFrame");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var iframeCss = (0, _react.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 = (0, _utils.getIframeSandboxAttribute)(isTrusted);
+  var props = {
+    css: iframeCss,
+    frameBorder: 0,
+    name: name,
+    sandbox: sandbox,
+    src: src,
+    'data-testid': "".concat(testId, "-embed")
+  };
+  return (0, _react.jsx)(_IFrame.IFrame, props);
+};
+var _default = exports.default = EmbedContent;

package/dist/cjs/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/cjs/view/EmbedModal/components/link-info/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
@@ -18,20 +20,24 @@ var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/
 var _download2 = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
 var _vidFullScreenOff = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-full-screen-off"));
 var _modalDialog = require("@atlaskit/modal-dialog");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _messages = require("../../../../messages");
 var _Icon = require("../../../common/Icon");
 var _constants = require("../../constants");
+var _indexOld = _interopRequireDefault(require("./indexOld"));
 var _linkInfoButton = _interopRequireDefault(require("./link-info-button"));
-var _styled = require("./styled");
 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; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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,
@@ -45,9 +51,9 @@ var LinkInfo = function LinkInfo(_ref) {
     onClose = _useModal.onClose;
   var downloadButton = (0, _react.useMemo)(function () {
     if (onDownloadButtonClick) {
-      return (0, _react2.jsx)(_linkInfoButton.default, {
-        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
-        icon: (0, _react2.jsx)(_download.default, {
+      return /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.download),
+        icon: /*#__PURE__*/_react.default.createElement(_download.default, {
           label: _messages.messages.download.defaultMessage,
           LEGACY_fallbackIcon: _download2.default,
           spacing: "spacious",
@@ -60,10 +66,10 @@ var LinkInfo = function LinkInfo(_ref) {
   }, [onDownloadButtonClick, testId]);
   var urlButton = (0, _react.useMemo)(function () {
     if (onViewButtonClick) {
-      var content = providerName ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
-      return (0, _react2.jsx)(_linkInfoButton.default, {
+      var content = providerName ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
+      return /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
         content: content,
-        icon: (0, _react2.jsx)(_linkExternalShortcut.default, {
+        icon: /*#__PURE__*/_react.default.createElement(_linkExternalShortcut.default, {
           label: _messages.messages.viewOriginal.defaultMessage,
           spacing: "spacious",
           color: "currentColor"
@@ -76,56 +82,59 @@ var LinkInfo = function LinkInfo(_ref) {
   var sizeButton = (0, _react.useMemo)(function () {
     var isFullScreen = size === _constants.MAX_MODAL_SIZE;
     var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;
-    var icon = isFullScreen ? (0, _react2.jsx)(_fullscreenExit.default, {
+    var icon = isFullScreen ? /*#__PURE__*/_react.default.createElement(_fullscreenExit.default, {
       LEGACY_fallbackIcon: _vidFullScreenOff.default,
       label: message.defaultMessage,
       spacing: "spacious",
       color: "currentColor"
-    }) : (0, _react2.jsx)(_fullscreenEnterVidFullScreenOn.default, {
+    }) : /*#__PURE__*/_react.default.createElement(_fullscreenEnterVidFullScreenOn.default, {
       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
-      (0, _react2.jsx)("span", {
+      _react.default.createElement("span", {
         className: "smart-link-resize-button"
-      }, (0, _react2.jsx)(_linkInfoButton.default, {
-        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, message),
+      }, /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+        content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.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
-    (0, _react2.jsx)("div", {
-      css: _styled.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
-    (0, _react2.jsx)("div", {
-      css: _styled.iconCss,
-      "data-testid": "".concat(testId, "-icon")
-    }, (0, _react2.jsx)(_Icon.Icon, icon)), (0, _react2.jsx)("div", {
-      css: _styled.titleCss
-    }, (0, _react2.jsx)(_heading.default, {
-      size: "medium",
-      testId: "".concat(testId, "-title")
-    }, title), (0, _react2.jsx)("span", {
-      tabIndex: 0
-    })), (0, _react2.jsx)("div", {
-      css: _styled.actionCss
-    }, downloadButton, urlButton, sizeButton, (0, _react2.jsx)(_linkInfoButton.default, {
-      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
-      icon: (0, _react2.jsx)(_closeCross.default, {
-        label: _messages.messages.preview_close.defaultMessage,
-        color: "currentColor",
-        spacing: "spacious"
-      }),
-      onClick: onClose,
-      testId: "".concat(testId, "-close")
-    })))
-  );
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_zulpu2gc _4cvr1h6o _1e0c1txw _1bah1yb4 _ca0q1ejb _u5f31ejb _n3tddlk8 _19bv1ejb"])
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "".concat(testId, "-icon"),
+    className: (0, _runtime.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.default.createElement(_Icon.Icon, icon)), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _yrj2kb7n _1wkfkb7n _923e1wug _1umo1bk4 _101p15vq _12bo15vq _r8nti7a9 _1flvcj1k _4wztidpf _c7bk1l2s _1r7d1hna _uepwkb7n _shpw1e54 _130wgktf"])
+  }, /*#__PURE__*/_react.default.createElement(_heading.default, {
+    size: "medium",
+    testId: "".concat(testId, "-title")
+  }, title), /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: 0
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _zulp1b66 _1e0c1txw _3kllglyw"])
+  }, downloadButton, urlButton, sizeButton, /*#__PURE__*/_react.default.createElement(_linkInfoButton.default, {
+    content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
+    icon: /*#__PURE__*/_react.default.createElement(_closeCross.default, {
+      label: _messages.messages.preview_close.defaultMessage,
+      color: "currentColor",
+      spacing: "spacious"
+    }),
+    onClick: onClose,
+    testId: "".concat(testId, "-close")
+  })));
+};
+var Exported = function Exported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(LinkInfo, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_indexOld.default, props);
+  }
 };
-var _default = exports.default = LinkInfo;
+var _default = exports.default = Exported;

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

@@ -0,0 +1,131 @@
+"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 = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/download"));
+var _fullscreenExit = _interopRequireDefault(require("@atlaskit/icon/core/fullscreen-exit"));
+var _closeCross = _interopRequireDefault(require("@atlaskit/icon/core/migration/close--cross"));
+var _fullscreenEnterVidFullScreenOn = _interopRequireDefault(require("@atlaskit/icon/core/migration/fullscreen-enter--vid-full-screen-on"));
+var _linkExternalShortcut = _interopRequireDefault(require("@atlaskit/icon/core/migration/link-external--shortcut"));
+var _download2 = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _vidFullScreenOff = _interopRequireDefault(require("@atlaskit/icon/glyph/vid-full-screen-off"));
+var _modalDialog = require("@atlaskit/modal-dialog");
+var _messages = require("../../../../messages");
+var _Icon = require("../../../common/Icon");
+var _constants = require("../../constants");
+var _linkInfoButton = _interopRequireDefault(require("./link-info-button"));
+var _styledOld = require("./styledOld");
+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; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+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 = (0, _modalDialog.useModal)(),
+    onClose = _useModal.onClose;
+  var downloadButton = (0, _react.useMemo)(function () {
+    if (onDownloadButtonClick) {
+      return (0, _react2.jsx)(_linkInfoButton.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download),
+        icon: (0, _react2.jsx)(_download.default, {
+          label: _messages.messages.download.defaultMessage,
+          LEGACY_fallbackIcon: _download2.default,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        onClick: onDownloadButtonClick,
+        testId: "".concat(testId, "-download")
+      });
+    }
+  }, [onDownloadButtonClick, testId]);
+  var urlButton = (0, _react.useMemo)(function () {
+    if (onViewButtonClick) {
+      var content = providerName ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal);
+      return (0, _react2.jsx)(_linkInfoButton.default, {
+        content: content,
+        icon: (0, _react2.jsx)(_linkExternalShortcut.default, {
+          label: _messages.messages.viewOriginal.defaultMessage,
+          spacing: "spacious",
+          color: "currentColor"
+        }),
+        onClick: onViewButtonClick,
+        testId: "".concat(testId, "-url")
+      });
+    }
+  }, [onViewButtonClick, providerName, testId]);
+  var sizeButton = (0, _react.useMemo)(function () {
+    var isFullScreen = size === _constants.MAX_MODAL_SIZE;
+    var message = isFullScreen ? _messages.messages.preview_min_size : _messages.messages.preview_max_size;
+    var icon = isFullScreen ? (0, _react2.jsx)(_fullscreenExit.default, {
+      LEGACY_fallbackIcon: _vidFullScreenOff.default,
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    }) : (0, _react2.jsx)(_fullscreenEnterVidFullScreenOn.default, {
+      label: message.defaultMessage,
+      spacing: "spacious",
+      color: "currentColor"
+    });
+    return (
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      (0, _react2.jsx)("span", {
+        className: "smart-link-resize-button"
+      }, (0, _react2.jsx)(_linkInfoButton.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.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
+    (0, _react2.jsx)("div", {
+      css: _styledOld.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
+    (0, _react2.jsx)("div", {
+      css: _styledOld.iconCss,
+      "data-testid": "".concat(testId, "-icon")
+    }, (0, _react2.jsx)(_Icon.Icon, icon)), (0, _react2.jsx)("div", {
+      css: _styledOld.titleCss
+    }, (0, _react2.jsx)(_heading.default, {
+      size: "medium",
+      testId: "".concat(testId, "-title")
+    }, title), (0, _react2.jsx)("span", {
+      tabIndex: 0
+    })), (0, _react2.jsx)("div", {
+      css: _styledOld.actionCss
+    }, downloadButton, urlButton, sizeButton, (0, _react2.jsx)(_linkInfoButton.default, {
+      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.preview_close),
+      icon: (0, _react2.jsx)(_closeCross.default, {
+        label: _messages.messages.preview_close.defaultMessage,
+        color: "currentColor",
+        spacing: "spacious"
+      }),
+      onClick: onClose,
+      testId: "".concat(testId, "-close")
+    })))
+  );
+};
+var _default = exports.default = LinkInfo;

package/dist/cjs/view/FlexibleCard/components/container/index.compiled.css

@@ -0,0 +1,38 @@
+._18s8v77o{margin:var(--ds-space-025,2px)}
+._19itn8v0{border:var(--_vzvmm2)}
+._1yt418y6{padding:var(--_1xumd0e)}
+._2rkopd34{border-radius:var(--ds-border-radius-200,8px)}
+._zulp1jvo{gap:1.25rem 0}
+._zulp1qos{gap:.5rem 0}
+._zulpfzsm{gap:.25rem 0}
+._zulph3jc{gap:1rem 0}
+._19bv15sf{padding-left:calc(var(--preview-block-width) + 1.25rem)}
+._19bv1ltm{padding-left:calc(var(--preview-block-width) + .25rem)}
+._19bvf557{padding-left:calc(var(--preview-block-width) + 1rem)}
+._19bvqox2{padding-left:calc(var(--preview-block-width) + .5rem)}
+._1e0c1txw{display:flex}
+._1pcmkb7n:hover~.actions-button-group{opacity:1}
+._1reo15vq{overflow-x:hidden}
+._1t4ckb7n .has-action, ._1nxdkb7n a, ._xnbykb7n button{z-index:1}
+._1ul9idpf{min-width:0}
+._1yob1j6v{--container-gap-right:1rem}
+._1yob1k92{--container-gap-right:1.25rem}
+._1yob1kwk{--container-gap-right:.5rem}
+._1yob1wow{--container-gap-right:var(--_12k13bg)}
+._1yob6mu8{--container-gap-right:.25rem}
+._2lx21bp4{flex-direction:column}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._jb7v18y6{--container-padding:var(--_1xumd0e)}
+._kqswh2mm{position:relative}
+._nqwih2mm .has-action, ._18ywh2mm a, ._1nq3h2mm button{position:relative}
+._r37x1r5k{--preview-block-width:30%}
+._u5f315sf{padding-right:calc(var(--preview-block-width) + 1.25rem)}
+._u5f31ltm{padding-right:calc(var(--preview-block-width) + .25rem)}
+._u5f3f557{padding-right:calc(var(--preview-block-width) + 1rem)}
+._u5f3qox2{padding-right:calc(var(--preview-block-width) + .5rem)}
+._y5vk167t{--container-gap-left:var(--_73mooq)}
+._y5vk1j6v{--container-gap-left:1rem}
+._y5vk1k92{--container-gap-left:1.25rem}
+._y5vk1kwk{--container-gap-left:.5rem}
+._y5vk6mu8{--container-gap-left:.25rem}
+._1v7y1i6y .has-action:focus, ._ufn21i6y a:focus{outline-offset:var(--ds-space-negative-025,-2px)}