@atlaskit/smart-card 34.6.5 → 34.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 34.7.0
+
+### Minor Changes
+
+- [#108285](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108285)
+  [`21ff6a33673d2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/21ff6a33673d2) -
+  [ux] Migrating smart-card/EmbedCard view to use compiled instead of emotion
+
+## 34.6.6
+
+### Patch Changes
+
+- [#107451](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107451)
+  [`2c1db58c1ac05`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c1db58c1ac05) -
+  [ux] Update tokens for inline cards
+
 ## 34.6.5
 
 ### 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.6.5"
+  packageVersion: "34.7.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -63,6 +63,7 @@ var ResolvedView = function ResolvedView(_ref) {
       hideIcon: true
     }];
   }, []);
+  var status = cardState.status;
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -80,7 +81,7 @@ var ResolvedView = function ResolvedView(_ref) {
       name: _constants.ElementName.Location
     }],
     metadataPosition: _constants.SmartLinkPosition.Top,
-    status: _constants.SmartLinkStatus.Resolved,
+    status: status,
     className: (0, _runtime.ax)(["_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(_blocks.MetadataBlock, {
     primary: topMetadata,

package/dist/cjs/view/EmbedCard/components/ErrorFrame.compiled.css

@@ -0,0 +1,28 @@
+
+._2rko1l7b{border-radius:3px}
+._2rko1lya{border-radius:1.5px}
+._189eyh40{border-width:2px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._1h6d7a2i{border-color:var(--_d9gj9p)}._16qs1mq7{box-shadow:var(--_2wgsi3)}
+._18m915vq{overflow-y:hidden}
+._19bvidpf{padding-left:0}
+._1bah1h6o{justify-content:center}
+._1bah1yb4{justify-content:space-between}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1reo15vq{overflow-x:hidden}
+._1tke68cl{min-height:90pt}
+._1tkeidpf{min-height:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i1ylp{height:40px}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._bfhkkq2v{background-color:var(--_12ncegi)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._p12fukw8{max-width:760px}
+._u5f3idpf{padding-right:0}
+._d0altlke:hover{cursor:pointer}
+._irr3bfnf:hover{background-color:var(--_6j4ewu)}
+._irr3uh3c:hover{background-color:var(--_1irqcwi)}

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

@@ -1,3 +1,4 @@
+/* ErrorFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,96 +6,91 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Frame = exports.ExpandedFrame = exports.CompactFrame = void 0;
+require("./ErrorFrame.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _utils = require("../../common/utils");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var Frame = exports.Frame = function Frame() {
+var _ErrorFrameOld = require("./ErrorFrameOld");
+var FrameNew = function FrameNew() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     isSelected: false,
     isHoverable: false,
     isFluidHeight: false
   };
-  return props.compact ? (0, _react2.jsx)(CompactFrame, props) : (0, _react2.jsx)(ExpandedFrame, props);
-};
-var sharedBaseFrameStyles = (0, _react2.css)({
-  width: '100%',
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-var sharedFrameStyles = {
-  maxWidth: (0, _utils.gs)(95),
-  backgroundColor: "var(--ds-surface-raised, white)"
+  return props.compact ? /*#__PURE__*/_react.default.createElement(CompactFrame, props) : /*#__PURE__*/_react.default.createElement(ExpandedFrame, props);
 };
-var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
+var sharedBaseFrameStyles = null;
+var sharedFrameStyles = null;
+var expandedFrameHoverStyles = null;
+var expandedFrameFluidHeightTrueStyles = null;
+var expandedFrameFluidHeightFalseStyles = null;
+var expandedFrameSelectedStyles = null;
+var expandedFrameNotSelectedStyles = null;
+var expandedFrameStyles = null;
+var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   var children = _ref.children,
     isSelected = _ref.isSelected,
     isHoverable = _ref.isHoverable,
     testId = _ref.testId,
     className = _ref.className,
     isFluidHeight = _ref.isFluidHeight;
-  return (0, _react2.jsx)("div", {
-    css: [sharedBaseFrameStyles, sharedFrameStyles,
-    // 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, _utils.mq)({
-      '&:hover': isHoverable ? {
-        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
-        backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20A, ")"),
-        cursor: 'pointer'
-      } : undefined,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      minHeight: isFluidHeight ? 0 : [(0, _utils.gs)(21), (0, _utils.gs)(15)],
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: "2px solid ".concat(isSelected ? "var(--ds-border-selected, ".concat(_colors.B200, ")") : 'transparent'),
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-      boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A), ")")
-    })],
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className,
-    "data-trello-do-not-use-override": testId
+    className: (0, _runtime.ax)(["_1bsb1osq _1e0c1txw", "_p12fukw8 _bfhkhp5a", isHoverable && "_irr3uh3c _d0altlke", isFluidHeight ? "_1tkeidpf" : "_1tke68cl", isSelected ? "_2rko1l7b _1h6d7a2i _1dqonqa1 _189eyh40" : "_2rko1lya _1h6d1j28 _1dqonqa1 _189eyh40", "_1reo15vq _18m915vq _1bah1yb4 _16qs1mq7", className]),
+    "data-trello-do-not-use-override": testId,
+    style: {
+      "--_1irqcwi": (0, _runtime.ix)("var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20A, ")")),
+      "--_d9gj9p": (0, _runtime.ix)("var(--ds-border-selected, ".concat(_colors.B200, ")")),
+      "--_2wgsi3": (0, _runtime.ix)("var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A), ")"))
+    }
   }, children);
 };
-var CompactFrame = exports.CompactFrame = function CompactFrame(_ref2) {
+var compactFrameHoverStyles = null;
+var compactFrameInheritDimensionsTrueStyles = null;
+var compactFrameInheritDimensionsFalseStyles = null;
+var compactFrameAlignStyles = null;
+var compactFrameStyles = null;
+var compactFrameNotSelectedStyles = null;
+var CompactFrameNew = function CompactFrameNew(_ref2) {
   var children = _ref2.children,
     isHoverable = _ref2.isHoverable,
     isSelected = _ref2.isSelected,
     testId = _ref2.testId,
     className = _ref2.className,
     inheritDimensions = _ref2.inheritDimensions;
-  return (0, _react2.jsx)("div", {
-    css: [sharedBaseFrameStyles, sharedFrameStyles,
-    // 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, _utils.mq)({
-      '&:hover': isHoverable ? {
-        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
-      } : undefined,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
-      border: isSelected ? "2px solid ".concat("var(--ds-border-selected, ".concat(_colors.B200, ")")) : '',
-      justifyContent: 'center',
-      alignItems: 'center',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
-      backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
-      width: ['calc(100% - 16px)', '100%'],
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      padding: ["0px ".concat((0, _utils.gs)(1)), '0']
-    })],
+  return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className
+    className: (0, _runtime.ax)(["_1bsb1osq _1e0c1txw", "_p12fukw8 _bfhkhp5a", isHoverable && "_irr3bfnf", isSelected && "_2rko1l7b _1h6d7a2i _1dqonqa1 _189eyh40", !isSelected && "_2rko1lya", "_1bah1h6o _4cvr1h6o _bfhkkq2v", inheritDimensions ? "_4t3i1osq" : "_4t3i1ylp", "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsb1osq", className]),
+    style: {
+      "--_6j4ewu": (0, _runtime.ix)("var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")),
+      "--_d9gj9p": (0, _runtime.ix)("var(--ds-border-selected, ".concat(_colors.B200, ")")),
+      "--_12ncegi": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N20A, ")"))
+    }
   }, children);
+};
+var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(ExpandedFrameNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ErrorFrameOld.ExpandedFrameOld, props);
+  }
+};
+var CompactFrame = exports.CompactFrame = function CompactFrame(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(CompactFrameNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ErrorFrameOld.CompactFrameOld, props);
+  }
+};
+var Frame = exports.Frame = function Frame(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(FrameNew, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_ErrorFrameOld.FrameOld, props);
+  }
 };

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FrameOld = exports.ExpandedFrameOld = exports.CompactFrameOld = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _utils = require("../../common/utils");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var FrameOld = exports.FrameOld = function FrameOld() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
+    isSelected: false,
+    isHoverable: false,
+    isFluidHeight: false
+  };
+  return props.compact ? (0, _react2.jsx)(CompactFrameOld, props) : (0, _react2.jsx)(ExpandedFrameOld, props);
+};
+var sharedBaseFrameStyles = (0, _react2.css)({
+  width: '100%',
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+var sharedFrameStyles = {
+  maxWidth: (0, _utils.gs)(95),
+  backgroundColor: "var(--ds-surface-raised, white)"
+};
+var ExpandedFrameOld = exports.ExpandedFrameOld = function ExpandedFrameOld(_ref) {
+  var children = _ref.children,
+    isSelected = _ref.isSelected,
+    isHoverable = _ref.isHoverable,
+    testId = _ref.testId,
+    className = _ref.className,
+    isFluidHeight = _ref.isFluidHeight;
+  return (0, _react2.jsx)("div", {
+    css: [sharedBaseFrameStyles, sharedFrameStyles,
+    // 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, _utils.mq)({
+      '&:hover': isHoverable ? {
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20A, ")"),
+        cursor: 'pointer'
+      } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      minHeight: isFluidHeight ? 0 : [(0, _utils.gs)(21), (0, _utils.gs)(15)],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
+      border: "2px solid ".concat(isSelected ? "var(--ds-border-selected, ".concat(_colors.B200, ")") : 'transparent'),
+      justifyContent: 'space-between',
+      overflow: 'hidden',
+      boxShadow: "var(--ds-shadow-raised, ".concat("0 1px 1px ".concat(_colors.N50A, ", 0 0 1px 1px ").concat(_colors.N40A), ")")
+    })],
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: className,
+    "data-trello-do-not-use-override": testId
+  }, children);
+};
+var CompactFrameOld = exports.CompactFrameOld = function CompactFrameOld(_ref2) {
+  var children = _ref2.children,
+    isHoverable = _ref2.isHoverable,
+    isSelected = _ref2.isSelected,
+    testId = _ref2.testId,
+    className = _ref2.className,
+    inheritDimensions = _ref2.inheritDimensions;
+  return (0, _react2.jsx)("div", {
+    css: [sharedBaseFrameStyles, sharedFrameStyles,
+    // 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, _utils.mq)({
+      '&:hover': isHoverable ? {
+        backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
+      } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      borderRadius: isSelected ? (0, _utils.br)() : (0, _utils.br)(0.5),
+      border: isSelected ? "2px solid ".concat("var(--ds-border-selected, ".concat(_colors.B200, ")")) : '',
+      justifyContent: 'center',
+      alignItems: 'center',
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      height: inheritDimensions ? '100%' : (0, _utils.gs)(5),
+      backgroundColor: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
+      width: ['calc(100% - 16px)', '100%'],
+      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      padding: ["0px ".concat((0, _utils.gs)(1)), '0']
+    })],
+    "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: className
+  }, children);
+};

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

@@ -1,16 +1,23 @@
+/* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 var _utils = require("../../common/utils");
+var _ExpandedFrameOld = require("./ExpandedFrameOld");
 var _styled = require("./styled");
-var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
+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 ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
     children = _ref.children,
@@ -41,17 +48,17 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      _react.default.createElement(_styled.Header, {
+      React.createElement(_styled.Header, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.IconWrapper, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/_react.default.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/React.createElement(_tooltip.default, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/_react.default.createElement(_styled.TextWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.TextWrapper, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && /*#__PURE__*/_react.default.createElement("a", {
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
         onClick: handleClick,
         onMouseDown: handleMouseDown
@@ -59,7 +66,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     );
   };
   var renderContent = function renderContent() {
-    return /*#__PURE__*/_react.default.createElement(_styled.Content, {
+    return /*#__PURE__*/React.createElement(_styled.Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -73,7 +80,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     }, children);
   };
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/_react.default.createElement(_styled.LinkWrapper
+    return /*#__PURE__*/React.createElement(_styled.LinkWrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -90,7 +97,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/_react.default.createElement(_styled.Wrapper
+    return /*#__PURE__*/React.createElement(_styled.Wrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -106,4 +113,11 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());
   }
+};
+var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ExpandedFrameNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_ExpandedFrameOld.ExpandedFrameOld, props);
+  }
 };

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

@@ -0,0 +1,114 @@
+/* ExpandedFrameOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandedFrameOld = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
+var _utils = require("../../common/utils");
+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; }
+var ExpandedFrameOld = exports.ExpandedFrameOld = function ExpandedFrameOld(_ref) {
+  var _ref$isPlaceholder = _ref.isPlaceholder,
+    isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    icon = _ref.icon,
+    text = _ref.text,
+    isSelected = _ref.isSelected,
+    _ref$frameStyle = _ref.frameStyle,
+    frameStyle = _ref$frameStyle === void 0 ? 'showOnHover' : _ref$frameStyle,
+    href = _ref.href,
+    minWidth = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
+    inheritDimensions = _ref.inheritDimensions,
+    _ref$allowScrollBar = _ref.allowScrollBar,
+    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar,
+    _ref$setOverflow = _ref.setOverflow,
+    setOverflow = _ref$setOverflow === void 0 ? true : _ref$setOverflow;
+  var isInteractive = function isInteractive() {
+    return !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  };
+  var handleClick = function handleClick(event) {
+    return (0, _utils.handleClickCommon)(event, onClick);
+  };
+  var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  var renderHeader = function renderHeader() {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(_styledOld.Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(_styledOld.IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styledOld.TooltipWrapper, null, /*#__PURE__*/React.createElement(_tooltip.default, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(_styledOld.TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
+  };
+  var renderContent = function renderContent() {
+    return /*#__PURE__*/React.createElement(_styledOld.Content, {
+      "data-testid": "embed-content-wrapper",
+      allowScrollBar: allowScrollBar,
+      removeOverflow: !setOverflow,
+      isInteractive: isInteractive(),
+      frameStyle: frameStyle
+      // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+      // See: HOT-107830
+      ,
+      contentEditable: 'false',
+      suppressContentEditableWarning: true
+    }, children);
+  };
+  if (!isPlaceholder && href) {
+    return /*#__PURE__*/React.createElement(_styledOld.LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: _styledOld.className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      frameStyle: frameStyle,
+      minWidth: minWidth,
+      maxWidth: maxWidth,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected,
+      inheritDimensions: inheritDimensions
+    }, renderHeader(), renderContent());
+  } else {
+    return /*#__PURE__*/React.createElement(_styledOld.Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: _styledOld.className,
+      isInteractive: isInteractive(),
+      isSelected: isSelected,
+      minWidth: minWidth,
+      frameStyle: frameStyle,
+      maxWidth: maxWidth,
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId,
+      "data-is-selected": isSelected,
+      "data-wrapper-type": "default",
+      "data-is-interactive": isInteractive()
+    }, renderHeader(), renderContent());
+  }
+};

package/dist/cjs/view/EmbedCard/components/Frame.compiled.css

@@ -0,0 +1,9 @@
+
+._19itidpf{border:0}
+._2rko1l7b{border-radius:3px}._154iidpf{top:0}
+._18m915vq{overflow-y:hidden}
+._1bsb1osq{width:100%}
+._1ltvidpf{left:0}
+._1reo15vq{overflow-x:hidden}
+._4t3i1osq{height:100%}
+._kqswh2mm{position:relative}

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

@@ -1,3 +1,4 @@
+/* Frame.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,22 +7,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Frame = void 0;
+require("./Frame.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../../utils");
+var _FrameOld = require("./FrameOld");
 var _IFrame = require("./IFrame");
 var _IframeDwellTracker = require("./IframeDwellTracker");
 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
-
 function mergeRefs(refs) {
   return function (value) {
     refs.forEach(function (ref) {
@@ -33,17 +31,8 @@ function mergeRefs(refs) {
     });
   };
 }
-var iframeStyles = (0, _react2.css)({
-  border: 0,
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  overflow: 'hidden',
-  borderRadius: '3px'
-});
-var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
+var iframeStyles = null;
+var FrameNew = /*#__PURE__*/_react.default.forwardRef(function (_ref, iframeRef) {
   var url = _ref.url,
     _ref$isTrusted = _ref.isTrusted,
     isTrusted = _ref$isTrusted === void 0 ? false : _ref$isTrusted,
@@ -114,18 +103,17 @@ var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_re
   if (!url) {
     return null;
   }
-  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_IframeDwellTracker.IframeDwellTracker, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_IframeDwellTracker.IframeDwellTracker, {
     isIframeLoaded: isIframeLoaded,
     isMouseOver: isMouseOver,
     isWindowFocused: isWindowFocused,
     iframePercentVisible: percentVisible,
     onIframeDwell: onIframeDwell
-  }), (0, _react2.jsx)(_IFrame.IFrame, {
+  }), /*#__PURE__*/_react.default.createElement(_IFrame.IFrame, {
     childRef: mergedRef,
     src: url,
     "data-testid": "".concat(testId, "-frame"),
     "data-iframe-loaded": isIframeLoaded,
-    css: iframeStyles,
     onMouseEnter: function onMouseEnter() {
       return setMouseOver(true);
     },
@@ -139,6 +127,18 @@ var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (_re
       setIframeLoaded(true);
     },
     sandbox: (0, _utils.getIframeSandboxAttribute)(isTrusted),
-    title: title
+    title: title,
+    className: (0, _runtime.ax)(["_19itidpf _1reo15vq _18m915vq _2rko1l7b _154iidpf _1ltvidpf _1bsb1osq _4t3i1osq _kqswh2mm"])
   }));
+});
+var Frame = exports.Frame = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(FrameNew, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_FrameOld.FrameOld, (0, _extends2.default)({}, props, {
+      ref: ref
+    }));
+  }
 });