@atlaskit/smart-card 34.6.6 → 34.8.0

package/dist/cjs/view/common/ai-summary/ulistOld.js

@@ -0,0 +1,29 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["children"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var listStyles = (0, _react2.css)({
+  paddingLeft: "var(--ds-space-250, 20px)",
+  paddingInlineStart: "var(--ds-space-250, 20px)"
+});
+var UListOld = function UListOld(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("ul", (0, _extends2.default)({
+    css: listStyles
+  }, props), children);
+};
+var _default = exports.default = UListOld;

package/dist/cjs/view/common/stop-propagation/StopPropagationOld.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StopPropagationOld = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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 styles = (0, _react2.css)({
+  maxHeight: 0,
+  maxWidth: 0,
+  position: 'absolute'
+});
+var StopPropagationOld = exports.StopPropagationOld = function StopPropagationOld(_ref) {
+  var children = _ref.children;
+  var onClick = (0, _react.useCallback)(function (e) {
+    // Prevent click event inside modal from bubble up
+    e.stopPropagation();
+  }, []);
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("span", {
+      css: styles,
+      onClick: onClick
+    }, children)
+  );
+};

package/dist/cjs/view/common/stop-propagation/index.compiled.css

@@ -0,0 +1,3 @@
+._c71lidpf{max-height:0}
+._kqswstnw{position:absolute}
+._p12fidpf{max-width:0}

package/dist/cjs/view/common/stop-propagation/index.js

@@ -1,3 +1,4 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -5,33 +6,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StopPropagation = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _StopPropagationOld = require("./StopPropagationOld");
 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 styles = (0, _react2.css)({
-  maxHeight: 0,
-  maxWidth: 0,
-  position: 'absolute'
-});
-var StopPropagation = exports.StopPropagation = function StopPropagation(_ref) {
+var styles = null;
+var StopPropagationNew = function StopPropagationNew(_ref) {
   var children = _ref.children;
   var onClick = (0, _react.useCallback)(function (e) {
     // Prevent click event inside modal from bubble up
     e.stopPropagation();
   }, []);
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", {
-      css: styles,
-      onClick: onClick
-    }, children)
-  );
+  return /*#__PURE__*/_react.default.createElement("span", {
+    onClick: onClick,
+    className: (0, _runtime.ax)(["_c71lidpf _p12fidpf _kqswstnw"])
+  }, children);
+};
+var StopPropagation = exports.StopPropagation = function StopPropagation(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(StopPropagationNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_StopPropagationOld.StopPropagationOld, props);
 };

package/dist/cjs/view/common/utils.js

@@ -9,13 +9,22 @@ var _facepaint = _interopRequireDefault(require("facepaint"));
 // this function is used for spacing, fontsize and line height,
 // once design tokens have been established for the all of these categories
 // then this function can be replaced with the tokens
+/**
+ * @deprecated, these can be replaced with constants
+ */
 var gs = exports.gs = function gs(times) {
   return "".concat(8 * times, "px");
 };
+/**
+ * @deprecated, these can be replaced with constants
+ */
 var br = exports.br = function br() {
   var times = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
   return "".concat(3 * times, "px");
 };
+/**
+ * @deprecated, these can be replaced with constants
+ */
 var mq = exports.mq = (0, _facepaint.default)(['@media(min-width: 576px)']);
 var handleClickCommon = exports.handleClickCommon = function handleClickCommon(event, onClick) {
   if (onClick) {

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

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

@@ -48,6 +48,7 @@ const ResolvedView = ({
     name: ActionName.DownloadAction,
     hideIcon: true
   }], []);
+  const status = cardState.status;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -65,7 +66,7 @@ const ResolvedView = ({
       name: ElementName.Location
     }],
     metadataPosition: SmartLinkPosition.Top,
-    status: SmartLinkStatus.Resolved,
+    status: status,
     className: ax(["_zulpcxkx _13mh1pd9"])
   })), /*#__PURE__*/React.createElement(MetadataBlock, {
     primary: topMetadata,

package/dist/es2019/view/BlockCard/views/styledOld.js

@@ -35,6 +35,7 @@ export const footerBlockCss = css({
   '.actions-button-group': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
     'button, button:hover, button:focus, button:active': {
+      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
       fontSize: '0.875rem'
     }
   }

package/dist/es2019/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}
+._1h6d1can{border-color:var(--ds-border-selected,#2684ff)}
+._1h6d1j28{border-color:transparent}._16qsy59s{box-shadow:var(--ds-shadow-raised,0 1px 1px rgba(9,30,66,.25),0 0 1px 1px rgba(9,30,66,.13))}
+._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}
+._bfhk1j54{background-color:var(--ds-background-neutral,rgba(9,30,66,.04))}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._p12fukw8{max-width:760px}
+._u5f3idpf{padding-right:0}
+._d0altlke:hover{cursor:pointer}
+._irr317ks:hover{background-color:var(--ds-background-neutral-hovered,rgba(9,30,66,.08))}
+._irr3h3i3:hover{background-color:var(--ds-background-neutral-subtle-hovered,rgba(9,30,66,.04))}

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

@@ -1,29 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* ErrorFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./ErrorFrame.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, N20A, N30A, N40A, N50A } from '@atlaskit/theme/colors';
-import { br, gs, mq } from '../../common/utils';
-export const Frame = (props = {
+import { CompactFrameOld, ExpandedFrameOld, FrameOld } from './ErrorFrameOld';
+const FrameNew = (props = {
   isSelected: false,
   isHoverable: false,
   isFluidHeight: false
-}) => props.compact ? jsx(CompactFrame, props) : jsx(ExpandedFrame, props);
-const sharedBaseFrameStyles = css({
-  width: '100%',
-  display: 'flex'
-});
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-const sharedFrameStyles = {
-  maxWidth: gs(95),
-  backgroundColor: "var(--ds-surface-raised, white)"
-};
-export const ExpandedFrame = ({
+}) => props.compact ? /*#__PURE__*/React.createElement(CompactFrame, props) : /*#__PURE__*/React.createElement(ExpandedFrame, props);
+const sharedBaseFrameStyles = null;
+const sharedFrameStyles = null;
+const expandedFrameHoverStyles = null;
+const expandedFrameFluidHeightTrueStyles = null;
+const expandedFrameFluidHeightFalseStyles = null;
+const expandedFrameSelectedStyles = null;
+const expandedFrameNotSelectedStyles = null;
+const expandedFrameStyles = null;
+const ExpandedFrameNew = ({
   children,
   isSelected,
   isHoverable,
@@ -31,32 +26,21 @@ export const ExpandedFrame = ({
   className,
   isFluidHeight
 }) => {
-  return 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
-    mq({
-      '&:hover': isHoverable ? {
-        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
-        backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20A})`,
-        cursor: 'pointer'
-      } : undefined,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      borderRadius: isSelected ? br() : br(0.5),
-      border: `2px solid ${isSelected ? `var(--ds-border-selected, ${B200})` : 'transparent'}`,
-      justifyContent: 'space-between',
-      overflow: 'hidden',
-      boxShadow: `var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${N40A}`})`
-    })],
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className,
+    className: ax(["_1bsb1osq _1e0c1txw", "_p12fukw8 _bfhkhp5a", isHoverable && "_irr3h3i3 _d0altlke", isFluidHeight ? "_1tkeidpf" : "_1tke68cl", isSelected ? "_2rko1l7b _1h6d1can _1dqonqa1 _189eyh40" : "_2rko1lya _1h6d1j28 _1dqonqa1 _189eyh40", "_1reo15vq _18m915vq _1bah1yb4 _16qsy59s", className]),
     "data-trello-do-not-use-override": testId
   }, children);
 };
-export const CompactFrame = ({
+const compactFrameHoverStyles = null;
+const compactFrameInheritDimensionsTrueStyles = null;
+const compactFrameInheritDimensionsFalseStyles = null;
+const compactFrameAlignStyles = null;
+const compactFrameStyles = null;
+const compactFrameNotSelectedStyles = null;
+const CompactFrameNew = ({
   children,
   isHoverable,
   isSelected,
@@ -64,28 +48,31 @@ export const CompactFrame = ({
   className,
   inheritDimensions
 }) => {
-  return 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
-    mq({
-      '&:hover': isHoverable ? {
-        backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
-      } : undefined,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      borderRadius: isSelected ? br() : br(0.5),
-      border: isSelected ? `2px solid ${`var(--ds-border-selected, ${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%' : gs(5),
-      backgroundColor: `var(--ds-background-neutral, ${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 ${gs(1)}`, '0']
-    })],
+  return /*#__PURE__*/React.createElement("div", {
     "data-testid": testId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,
-    className: className
+    className: ax(["_1bsb1osq _1e0c1txw", "_p12fukw8 _bfhkhp5a", isHoverable && "_irr317ks", isSelected && "_2rko1l7b _1h6d1can _1dqonqa1 _189eyh40", !isSelected && "_2rko1lya", "_1bah1h6o _4cvr1h6o _bfhk1j54", inheritDimensions ? "_4t3i1osq" : "_4t3i1ylp", "_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bsb1osq", className])
   }, children);
+};
+export const ExpandedFrame = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ExpandedFrameNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ExpandedFrameOld, props);
+  }
+};
+export const CompactFrame = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(CompactFrameNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CompactFrameOld, props);
+  }
+};
+export const Frame = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FrameNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(FrameOld, props);
+  }
 };

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

@@ -0,0 +1,91 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { B200, N20A, N30A, N40A, N50A } from '@atlaskit/theme/colors';
+import { br, gs, mq } from '../../common/utils';
+export const FrameOld = (props = {
+  isSelected: false,
+  isHoverable: false,
+  isFluidHeight: false
+}) => props.compact ? jsx(CompactFrameOld, props) : jsx(ExpandedFrameOld, props);
+const sharedBaseFrameStyles = css({
+  width: '100%',
+  display: 'flex'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+const sharedFrameStyles = {
+  maxWidth: gs(95),
+  backgroundColor: "var(--ds-surface-raised, white)"
+};
+export const ExpandedFrameOld = ({
+  children,
+  isSelected,
+  isHoverable,
+  testId,
+  className,
+  isFluidHeight
+}) => {
+  return 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
+    mq({
+      '&:hover': isHoverable ? {
+        // TODO: https://product-fabric.atlassian.net/browse/DSP-4064
+        backgroundColor: `var(--ds-background-neutral-subtle-hovered, ${N20A})`,
+        cursor: 'pointer'
+      } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      minHeight: isFluidHeight ? 0 : [gs(21), gs(15)],
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      borderRadius: isSelected ? br() : br(0.5),
+      border: `2px solid ${isSelected ? `var(--ds-border-selected, ${B200})` : 'transparent'}`,
+      justifyContent: 'space-between',
+      overflow: 'hidden',
+      boxShadow: `var(--ds-shadow-raised, ${`0 1px 1px ${N50A}, 0 0 1px 1px ${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);
+};
+export const CompactFrameOld = ({
+  children,
+  isHoverable,
+  isSelected,
+  testId,
+  className,
+  inheritDimensions
+}) => {
+  return 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
+    mq({
+      '&:hover': isHoverable ? {
+        backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
+      } : undefined,
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      borderRadius: isSelected ? br() : br(0.5),
+      border: isSelected ? `2px solid ${`var(--ds-border-selected, ${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%' : gs(5),
+      backgroundColor: `var(--ds-background-neutral, ${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 ${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/es2019/view/EmbedCard/components/ExpandedFrame.js

@@ -1,9 +1,13 @@
-import React from 'react';
+/* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.36.0 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { handleClickCommon } from '../../common/utils';
+import { ExpandedFrameOld } from './ExpandedFrameOld';
 import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styled';
-export const ExpandedFrame = ({
+const ExpandedFrameNew = ({
   isPlaceholder = false,
   children,
   onClick,
@@ -22,36 +26,41 @@ export const ExpandedFrame = ({
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
-  const renderHeader = () =>
-  /*#__PURE__*/
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-  React.createElement(Header, {
-    className: "embed-header",
-    frameStyle: frameStyle
-  }, /*#__PURE__*/React.createElement(IconWrapper, {
-    isPlaceholder: isPlaceholder
-  }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-    content: text,
-    hideTooltipOnMouseDown: true
-  }, /*#__PURE__*/React.createElement(TextWrapper, {
-    isPlaceholder: isPlaceholder
-  }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
-    href: href,
-    onClick: handleClick,
-    onMouseDown: handleMouseDown
-  }, text)))));
-  const renderContent = () => /*#__PURE__*/React.createElement(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);
+  const renderHeader = () => {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
+  };
+  const renderContent = () => {
+    return /*#__PURE__*/React.createElement(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(LinkWrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -86,4 +95,11 @@ export const ExpandedFrame = ({
       "data-is-interactive": isInteractive()
     }, renderHeader(), renderContent());
   }
+};
+export const ExpandedFrame = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ExpandedFrameNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ExpandedFrameOld, props);
+  }
 };

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

@@ -0,0 +1,96 @@
+/* ExpandedFrameOld.tsx generated by @compiled/babel-plugin v0.36.0 */
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import Tooltip from '@atlaskit/tooltip';
+import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
+import { handleClickCommon } from '../../common/utils';
+import { className, Content, Header, IconWrapper, LinkWrapper, TextWrapper, TooltipWrapper, Wrapper } from './styledOld';
+export const ExpandedFrameOld = ({
+  isPlaceholder = false,
+  children,
+  onClick,
+  icon,
+  text,
+  isSelected,
+  frameStyle = 'showOnHover',
+  href,
+  minWidth,
+  maxWidth,
+  testId = 'expanded-frame',
+  inheritDimensions,
+  allowScrollBar = false,
+  setOverflow = true
+}) => {
+  const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
+  const handleClick = event => handleClickCommon(event, onClick);
+  const handleMouseDown = useMouseDownEvent();
+  const renderHeader = () => {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      React.createElement(Header, {
+        className: "embed-header",
+        frameStyle: frameStyle
+      }, /*#__PURE__*/React.createElement(IconWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(TooltipWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement(TextWrapper, {
+        isPlaceholder: isPlaceholder
+      }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown
+      }, text)))))
+    );
+  };
+  const renderContent = () => {
+    return /*#__PURE__*/React.createElement(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(LinkWrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: 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(Wrapper
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    , {
+      className: 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/es2019/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}