@atlaskit/smart-card 34.5.2 → 34.6.0

package/dist/esm/view/BlockCard/views/utils/withFlexibleUIBlockCardStyle.js

@@ -1,17 +1,27 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { flexibleBlockCardStyle } from '../styled';
+/* withFlexibleUIBlockCardStyle.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./withFlexibleUIBlockCardStyle.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import { N40 } from '@atlaskit/theme/colors';
+import { withFlexibleUIBlockCardStyleOld } from './withFlexibleUIBlockCardStyleOld';
+var flexibleBlockCardStyle = null;
+export var withFlexibleUIBlockCardStyleNew = function withFlexibleUIBlockCardStyleNew(FlexibleBlockCardView) {
+  return function (props) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1g96pd34 _1qo3n8v0"]),
+      style: {
+        "--_vzvmm2": ix("1px solid ".concat("var(--ds-border, ".concat(N40, ")")))
+      }
+    }, /*#__PURE__*/React.createElement(FlexibleBlockCardView, props));
+  };
+};
 export var withFlexibleUIBlockCardStyle = function withFlexibleUIBlockCardStyle(FlexibleBlockCardView) {
   return function (props) {
-    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: flexibleBlockCardStyle
-      }, jsx(FlexibleBlockCardView, props))
-    );
+    if (fg('bandicoots-compiled-migration-smartcard')) {
+      return withFlexibleUIBlockCardStyleNew(FlexibleBlockCardView)(props);
+    } else {
+      return withFlexibleUIBlockCardStyleOld(FlexibleBlockCardView)(props);
+    }
   };
 };

package/dist/esm/view/BlockCard/views/utils/withFlexibleUIBlockCardStyleOld.js

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { flexibleBlockCardStyle } from '../styledOld';
+export var withFlexibleUIBlockCardStyleOld = function withFlexibleUIBlockCardStyleOld(FlexibleBlockCardView) {
+  return function (props) {
+    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: flexibleBlockCardStyle
+      }, jsx(FlexibleBlockCardView, props))
+    );
+  };
+};

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
@@ -54,11 +55,9 @@ export var actionCss = css({
   display: 'flex',
   flex: '0 0 auto',
   gap: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: height,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: height
   },
   '@media only screen and (max-width: 980px)': {

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/ActionIconOld.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -28,18 +29,15 @@ var stackItemIconSizeStyles = getIconSizeStyles('20px');
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var stackItemIconStyles = css(stackItemIconSizeStyles, {
   display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: "var(--ds-space-025, 2px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span,svg,img': {
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0
   }
 });
 var newStackItemIconStyles = css({
   display: 'inline-block',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0
 });
 var ActionIconOld = function ActionIconOld(_ref) {

package/dist/esm/view/FlexibleCard/components/blocks/block/index.compiled.css

@@ -31,4 +31,5 @@
 ._syaz1kw7{color:inherit}
 ._te17glyw{-ms-user-select:none}
 ._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz41j6v{line-height:1rem}
 ._ytq1bjq5 [data-smart-element=SourceBranch]+[data-smart-element=TargetBranch]:before{content:"→"}

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -27,7 +27,7 @@ var directionStyles = {
  * @param {ActionGroupProps} ActionGroupProps
  * @see Action
  */
-var Block = function Block(_ref) {
+var BlockNew = function BlockNew(_ref) {
   var children = _ref.children,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? SmartLinkDirection.Horizontal : _ref$direction,
@@ -38,24 +38,28 @@ var Block = function Block(_ref) {
     className = _ref.className,
     blockRef = _ref.blockRef,
     onRender = _ref.onRender,
-    onTransitionEnd = _ref.onTransitionEnd;
+    onTransitionEnd = _ref.onTransitionEnd,
+    style = _ref.style;
   useEffect(function () {
     onRender && onRender();
   }, [onRender]);
   return /*#__PURE__*/React.createElement("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
-    className: ax(["_1reo15vq _18m915vq _4cvr1h6o _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
+    className: ax(["_1reo15vq _18m915vq _4cvr1h6o _vwz41j6v _1e0c1txw _1ul9idpf _1bah1y6m _fiawglyw _1ouwidpf _f6ju1ns9 _1uzp1mp2 _ytq1bjq5 _a7e8uxlv", "_12ji1snc _1qu2agmp _12y310yn _12ji1kw7 _syaz1kw7 _18ql1j28 _1ifmglyw _181uglyw _1rkwglyw _te17glyw _uiztglyw", directionStyles[direction], gapsStyles[size], className]),
     "data-smart-block": true,
     "data-testid": testId,
     onTransitionEnd: onTransitionEnd,
     ref: blockRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: style
   }, renderChildren(children, size));
 };
-var Exported = function Exported(props) {
+var Block = function Block(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {
-    return /*#__PURE__*/React.createElement(Block, props);
+    return /*#__PURE__*/React.createElement(BlockNew, props);
   } else {
     return /*#__PURE__*/React.createElement(BlockOld, props);
   }
 };
-export default Exported;
+export default Block;

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -2,6 +2,7 @@
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { renderChildren } from '../utils';
 import ElementGroupOld from './ElementGroupOld';
@@ -79,5 +80,11 @@ var ElementGroupNew = function ElementGroupNew(_ref) {
     className: ax([baseStyleBySize[size], baseStyleByDirection[direction], "_fiawglyw _1ouwidpf _f6ju1ns9", alignmentStyleMap[align], "_1ul99by0", widthStyle[width], direction === SmartLinkDirection.Horizontal && "_1reo15vq _18m915vq _1e0c1ule _s7n4nkob _1bto1l2s _1nmz1hna _1yyjkb7n _sudp1e54 _1aaynkob _15tynkob _1iu61nu9 _166k1nu9 _1div1nu9 _bmfb1nu9", direction === SmartLinkDirection.Horizontal && "", SmartLinkAlignment.Left ? gapStylesLeft[size] : gapStylesRight[size], positionStyle[position], className])
   }, renderChildren(children, size));
 };
-export default ElementGroupOld;
-export { ElementGroupNew };
+var ElementGroup = function ElementGroup(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ElementGroupNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ElementGroupOld, props);
+  }
+};
+export default ElementGroup;

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/FooterBlockResolvedViewOld.js

@@ -0,0 +1,45 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useMemo } from 'react';
+import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
+import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
+import { Provider } from '../../../elements';
+import ActionGroup from '../../action-group';
+import Block from '../../block';
+import ElementGroup from '../../element-group';
+import { filterActionItems, getActionGroupStyles } from '../../utils';
+var FooterBlockResolvedViewOld = function FooterBlockResolvedViewOld(props) {
+  var actions = props.actions,
+    testId = props.testId,
+    onActionMenuOpenChange = props.onActionMenuOpenChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? SmartLinkSize.Medium : _props$size,
+    hideProvider = props.hideProvider;
+  var context = useFlexibleUiContext();
+  var hasActions = useMemo(function () {
+    var _filterActionItems;
+    return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
+  }, [actions, context]);
+  var onDropdownOpenChange = useCallback(function (isOpen) {
+    if (onActionMenuOpenChange) {
+      onActionMenuOpenChange({
+        isOpen: isOpen
+      });
+    }
+  }, [onActionMenuOpenChange]);
+  return /*#__PURE__*/React.createElement(Block, _extends({}, props, {
+    testId: "".concat(testId, "-resolved-view")
+  }), !hideProvider && /*#__PURE__*/React.createElement(Provider, {
+    testId: "".concat(testId, "-provider")
+  }), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
+    testId: "smart-element-group-actions",
+    align: SmartLinkAlignment.Right,
+    direction: SmartLinkDirection.Horizontal,
+    overrideCss: getActionGroupStyles(size),
+    width: SmartLinkWidth.Flexible
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
+    onDropdownOpenChange: onDropdownOpenChange,
+    items: actions,
+    appearance: "default"
+  })) : null);
+};
+export default FooterBlockResolvedViewOld;

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css

@@ -0,0 +1 @@
+._c71lviql{max-height:2rem}

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -1,12 +1,19 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useMemo } from 'react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
 import { Provider } from '../../../elements';
 import ActionGroup from '../../action-group';
 import Block from '../../block';
 import ElementGroup from '../../element-group';
-import { filterActionItems, getActionGroupStyles } from '../../utils';
+import { filterActionItems } from '../../utils';
+import FooterBlockResolvedViewOld from './FooterBlockResolvedViewOld';
+var actionGroupStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -34,12 +41,19 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
     direction: SmartLinkDirection.Horizontal,
-    overrideCss: getActionGroupStyles(size),
-    width: SmartLinkWidth.Flexible
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && "_c71lviql"])
   }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default"
   })) : null);
 };
-export default FooterBlockResolvedView;
+var FooterBlockResolvedViewExported = function FooterBlockResolvedViewExported(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(FooterBlockResolvedView, props);
+  } else {
+    return /*#__PURE__*/React.createElement(FooterBlockResolvedViewOld, props);
+  }
+};
+export default FooterBlockResolvedViewExported;

package/dist/esm/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -8,7 +8,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
-import { ElementGroupNew as ElementGroup } from '../element-group';
+import ElementGroup from '../element-group';
 import { renderElementItems } from '../utils';
 import MetadataBlockOld from './MetadataBlockOld';
 var DEFAULT_MAX_LINES = 2;

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.compiled.css

@@ -1,15 +1,9 @@
 ._10aa1osq [data-smart-element-media=image]{width:100%}
-._154iidpf{top:0}
 ._18u01ivi{margin-left:calc(var(--container-gap-left)*-1)}
-._1bsb795p{width:calc(var(--preview-block-width))}
-._1ltvidpf{left:0}
 ._1t26n7od [data-smart-element-media=image]{aspect-ratio:unset}
-._1xi2idpf{right:0}
 ._2hwxc10g{margin-right:calc(var(--container-gap-right)*-1)}
-._94n5idpf{bottom:0}
 ._dmhj1ya9:last-of-type{margin-bottom:calc(var(--container-padding)*-1)}
 ._e0oi1ya9:first-of-type{margin-top:calc(var(--container-padding)*-1)}
-._kqswstnw{position:absolute}
 ._mr051dfr [data-smart-element-media=image]{object-fit:cover}
 ._rjuj1osq [data-smart-element-media=image]{height:100%}
 ._ze72n7od [data-smart-element-media=image]{padding-top:unset}

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/index.js

@@ -1,33 +1,22 @@
 /* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["ignoreContainerPadding", "onError", "className", "placement", "testId", "overrideUrl"];
+var _excluded = ["ignoreContainerPadding", "onError", "placement", "testId", "overrideUrl", "style", "className"];
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useCallback } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useCallback, useEffect, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { MediaPlacement } from '../../../../../../constants';
 import { Preview } from '../../../elements';
 import Block from '../../block';
-/**
- * Due to its placement on the left/right and ignoreContainerPadding prop
- * rely on its parent container styling, css variables are declared in
- * <Container /> to preset the base values for the preview block styling.
- *
- * `--container-padding` is the padding of the Container. This value is based
- *   on size and hidePadding.
- * `--container-gap-left` and `--container-gap-right` are the gap or padding of
- *   the Container depending on whether the container has other preview blocks
- *   with left/right positioning.
- * `--preview-block-width` is the size of the preview image in relation to
- *   the Container width when the placement is left/right.
- * @param placement
- * @param ignoreContainerPadding
- */
-var previewBlockStyles = {
-  left: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1ltvidpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
-  right: "_kqswstnw _154iidpf _94n5idpf _1bsb795p _1xi2idpf _1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr",
-  ignoreContainerPadding: "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9"
-};
+import PreviewBlockResolvedViewOld from './indexOld';
+var previewBlockStyleCommon = null;
+var ignoreContainerPaddingStyle = null;
 
 /**
  * Represents a resolved PreviewBlock, which typically contains media or other large format content.
@@ -35,15 +24,47 @@ var previewBlockStyles = {
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+var PreviewBlockResolvedViewNew = function PreviewBlockResolvedViewNew(_ref) {
   var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
     ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
     onError = _ref.onError,
-    className = _ref.className,
     placement = _ref.placement,
     testId = _ref.testId,
     overrideUrl = _ref.overrideUrl,
+    style = _ref.style,
+    className = _ref.className,
     blockProps = _objectWithoutProperties(_ref, _excluded);
+  // const [styles, setStyles] = useState<SerializedStyles | undefined>(overrideCss);
+  var _useState = useState(style !== null && style !== void 0 ? style : {}),
+    _useState2 = _slicedToArray(_useState, 2),
+    dynamicStyles = _useState2[0],
+    setDynamicStyles = _useState2[1];
+  var updateStyles = useCallback(function () {
+    if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
+      var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+      var newStyle = _objectSpread(_objectSpread(_objectSpread({}, style), {}, {
+        position: 'absolute',
+        top: containerPadding,
+        bottom: containerPadding,
+        width: "calc(var(--preview-block-width) - ".concat(containerPadding, ")")
+      }, placement === MediaPlacement.Left ? {
+        left: containerPadding
+      } : {}), placement === MediaPlacement.Right ? {
+        right: containerPadding
+      } : {});
+      setDynamicStyles(newStyle);
+    } else {
+      if (ignoreContainerPadding) {
+        setDynamicStyles(_objectSpread({}, style));
+      }
+    }
+  }, [ignoreContainerPadding, placement, style]);
+  useEffect(function () {
+    updateStyles();
+  }, [ignoreContainerPadding, placement, updateStyles, className]);
+  var handleOnLoad = useCallback(function () {
+    updateStyles();
+  }, [updateStyles]);
   var handleOnError = useCallback(function () {
     if (onError) {
       onError();
@@ -51,10 +72,22 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
   }, [onError]);
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolved-view"),
-    className: ax([placement && previewBlockStyles[placement], !placement && ignoreContainerPadding && previewBlockStyles.ignoreContainerPadding])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: dynamicStyles
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([placement && "_1t26n7od _ze72n7od _10aa1osq _rjuj1osq _mr051dfr", !placement && ignoreContainerPadding && "_18u01ivi _2hwxc10g _e0oi1ya9 _dmhj1ya9", className])
   }), /*#__PURE__*/React.createElement(Preview, {
     onError: handleOnError,
+    onLoad: handleOnLoad,
     overrideUrl: overrideUrl
   }));
 };
+var PreviewBlockResolvedView = function PreviewBlockResolvedView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(PreviewBlockResolvedViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(PreviewBlockResolvedViewOld, props);
+  }
+};
 export default PreviewBlockResolvedView;

package/dist/esm/view/FlexibleCard/components/blocks/preview-block/resolved/indexOld.js

@@ -58,7 +58,7 @@ var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreCont
  * @param {PreviewBlock} PreviewBlock
  * @see Block
  */
-var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
+var PreviewBlockResolvedViewOld = function PreviewBlockResolvedViewOld(_ref) {
   var _ref$ignoreContainerP = _ref.ignoreContainerPadding,
     ignoreContainerPadding = _ref$ignoreContainerP === void 0 ? false : _ref$ignoreContainerP,
     onError = _ref.onError,
@@ -95,4 +95,4 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     overrideUrl: overrideUrl
   }));
 };
-export default PreviewBlockResolvedView;
+export default PreviewBlockResolvedViewOld;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/TitleBlockErroredViewOld.js

@@ -63,7 +63,7 @@ var getMessageStyles = function getMessageStyles(size, hasAction) {
  * or the backend response was errored or malformed.
  * @see TitleBlock
  */
-var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
+var TitleBlockErroredViewOld = function TitleBlockErroredViewOld(_ref) {
   var actionGroup = _ref.actionGroup,
     retry = _ref.retry,
     position = _ref.position,
@@ -98,4 +98,4 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredView;
+export default TitleBlockErroredViewOld;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -1,11 +1,9 @@
-/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "icon", "hideIcon"];
-import "./index.compiled.css";
-import * as React from 'react';
-import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Box } from '@atlaskit/primitives';
 import { SmartLinkAlignment, SmartLinkDirection } from '../../../../../../constants';
 import { LinkIcon } from '../../../elements';
@@ -35,8 +33,7 @@ var TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
     values = _ref2.values;
   var hasAction = onClick !== undefined;
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
-    testId: "".concat(testId, "-errored-view"),
-    className: ax(["_zulpu2gc"])
+    testId: "".concat(testId, "-errored-view")
   }), !hideIcon && /*#__PURE__*/React.createElement(LinkIcon, {
     overrideIcon: icon,
     position: position
@@ -51,6 +48,11 @@ var TitleBlockErroredViewNew = function TitleBlockErroredViewNew(_ref) {
     values: values
   })))), actionGroup);
 };
-export default TitleBlockErroredViewOld;
-export { TitleBlockErroredViewNew };
-var titleBlockGapStyle = null;
+var TitleBlockErroredView = function TitleBlockErroredView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(TitleBlockErroredViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TitleBlockErroredViewOld, props);
+  }
+};
+export default TitleBlockErroredView;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/index.js

@@ -12,26 +12,25 @@ import { SmartLinkStatus } from '../../../../../constants';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
 import { Title } from '../../elements';
 import ActionGroup from '../action-group';
-import { TitleBlockErroredViewNew } from './errored';
-import { TitleBlockResolvedViewNew } from './resolved';
-import { TitleBlockResolvingViewNew } from './resolving';
+import TitleBlockErroredView from './errored';
+import TitleBlockResolvedView from './resolved';
+import TitleBlockResolvingView from './resolving';
 import TitleBlockOld from './TitleBlockOld';
-var styles = null;
 var actionStyles = null;
 var getTitleBlockViewComponent = function getTitleBlockViewComponent(status) {
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
-      return TitleBlockResolvingViewNew;
+      return TitleBlockResolvingView;
     case SmartLinkStatus.Resolved:
-      return TitleBlockResolvedViewNew;
+      return TitleBlockResolvedView;
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      return TitleBlockErroredViewNew;
+      return TitleBlockErroredView;
   }
 };
 
@@ -102,19 +101,17 @@ var TitleBlockNew = function TitleBlockNew(_ref) {
     theme: theme
   }, overrideText));
   var Component = getTitleBlockViewComponent(status);
-  return /*#__PURE__*/React.createElement("div", {
-    className: ax([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n"])
-  }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, props, {
     actionGroup: actionGroup
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: className,
+    className: ax([showActionOnHover && !actionDropdownOpen && "_1bfhidpf _wn5xkb7n _h157kb7n", className]),
     testId: testId,
     title: title,
     metadataPosition: metadataPosition,
     hideIcon: hideIcon,
     icon: icon
-  })));
+  }));
 };
 var TitleBlock = function TitleBlock(props) {
   if (fg('bandicoots-compiled-migration-smartcard')) {

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/TitleBlockResolvedViewOld.js

@@ -15,7 +15,7 @@ import { renderElementItems } from '../../utils';
  * This should render when a Smart Link returns a valid response.
  * @see TitleBlock
  */
-var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
+var TitleBlockResolvedViewOld = function TitleBlockResolvedViewOld(_ref) {
   var actionGroup = _ref.actionGroup,
     _ref$metadata = _ref.metadata,
     metadata = _ref$metadata === void 0 ? [] : _ref$metadata,
@@ -50,4 +50,4 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
     position: metadataPosition !== null && metadataPosition !== void 0 ? metadataPosition : SmartLinkPosition.Center
   }, metadataElements), actionGroup);
 };
-export default TitleBlockResolvedView;
+export default TitleBlockResolvedViewOld;

package/dist/esm/view/FlexibleCard/components/blocks/title-block/resolved/index.compiled.css

@@ -1,2 +1 @@
-._zulppdf9{gap:var(--ds-space-050,.25rem)}
-._zulpu2gc{gap:var(--ds-space-100,8px)}
+._zulppdf9{gap:var(--ds-space-050,.25rem)}