@atlaskit/smart-card 34.1.1 → 34.2.0

package/dist/cjs/view/FlexibleCard/components/container/index.js

@@ -1,3 +1,6 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,92 +8,32 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getContainerStyles = exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+exports.getChildrenOptions = exports.default = void 0;
+Object.defineProperty(exports, "getContainerStyles", {
+  enumerable: true,
+  get: function get() {
+    return _indexOld.getContainerStyles;
+  }
+});
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _reactMagneticDi = require("react-magnetic-di");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../../../../constants");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _utils = require("../../../../state/flexible-ui-context/utils");
 var _flexible = require("../../../../utils/flexible");
 var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
+var _indexOld = _interopRequireWildcard(require("./indexOld"));
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
-var _templateObject;
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 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 elevationStyles = (0, _react2.css)({
-  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-  borderRadius: "var(--ds-border-radius-200, 8px)",
-  margin: "var(--ds-space-025, 2px)"
-});
-var getGap = function getGap(size) {
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return '1.25rem';
-    case _constants.SmartLinkSize.Large:
-      return '1rem';
-    case _constants.SmartLinkSize.Medium:
-      return '.5rem';
-    case _constants.SmartLinkSize.Small:
-    default:
-      return '.25rem';
-  }
-};
-
 /**
- * Get container padding based on smart link size
- * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
- * at view/FlexibleCard/components/utils.tsx
+ * Eventually these exports should be removed on FF clean up bandicoots-compiled-migration-smartcard
  */
-var getPadding = function getPadding(size) {
-  switch (size) {
-    case _constants.SmartLinkSize.XLarge:
-      return '1.5rem';
-    case _constants.SmartLinkSize.Large:
-      return '1.25rem';
-    case _constants.SmartLinkSize.Medium:
-      return '1rem';
-    case _constants.SmartLinkSize.Small:
-    default:
-      return '.5rem';
-  }
-};
-var clickableContainerStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'a, button, .has-action': {
-    position: 'relative',
-    zIndex: 1
-  }
-});
-var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
-  var padding = hidePadding ? '0rem' : getPadding(size);
-  var gap = getGap(size);
-  var previewOnLeft = childrenOptions.previewOnLeft,
-    previewOnRight = childrenOptions.previewOnRight;
-  return (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '--container-padding': padding,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '--container-gap-left': previewOnLeft ? gap : padding,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '--container-gap-right': previewOnRight ? gap : padding,
-    '--preview-block-width': '30%',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    padding: padding
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
-};
-var getChildrenOptions = function getChildrenOptions(children, context) {
+var getChildrenOptions = exports.getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
   if ((0, _utils.isFlexUiPreviewPresent)(context)) {
     _react.default.Children.map(children, function (child) {
@@ -109,12 +52,6 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
   }
   return options;
 };
-var getContainerStyles = exports.getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
-  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tgap: ", " 0;\n\t\tflex-direction: column;\n\t\tmin-width: 0;\n\t\toverflow-x: hidden;\n\t\tposition: relative;\n\t\t", "\n\t\t", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n\t\t\topacity: 1;\n\t\t}\n\t\ta:focus,\n\t\t.has-action:focus {\n\t\t\toutline-offset: -2px;\n\t\t}\n\t"])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
-};
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
     // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
@@ -155,7 +92,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
   var _ref2 = getTitleBlockProps(children) || {},
     target = _ref2.anchorTarget,
     text = _ref2.text;
-  return (0, _react2.jsx)(_layeredLink.default, {
+  return /*#__PURE__*/_react.default.createElement(_layeredLink.default, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -163,6 +100,60 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
     url: url
   });
 };
+var baseStyleCommon = null;
+var backgroundStyle = null;
+var elevationStyles = null;
+var clickableContainerStyles = null;
+var gapStyleMap = {
+  xlarge: "_zulp1jvo",
+  large: "_zulph3jc",
+  medium: "_zulp1qos",
+  small: "_zulpfzsm"
+};
+
+/**
+ * Get container padding based on smart link size
+ * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
+var getPadding = function getPadding(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.5rem';
+    case _constants.SmartLinkSize.Large:
+      return '1.25rem';
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+var getGap = function getGap(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.25rem';
+    case _constants.SmartLinkSize.Large:
+      return '1rem';
+    case _constants.SmartLinkSize.Medium:
+      return '.5rem';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.25rem';
+  }
+};
+var previewOnLeftStyleMap = {
+  xlarge: "_19bv15sf _y5vk1k92",
+  large: "_19bvf557 _y5vk1j6v",
+  medium: "_19bvqox2 _y5vk1kwk",
+  small: "_19bv1ltm _y5vk6mu8"
+};
+var previewOnRightStyleMap = {
+  xlarge: "_u5f315sf _1yob1k92",
+  large: "_u5f3f557 _1yob1j6v",
+  medium: "_u5f3qox2 _1yob1kwk",
+  small: "_u5f31ltm _1yob6mu8"
+};
 
 /**
  * A container is a hidden component that build the Flexible Smart Link.
@@ -172,7 +163,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
  * @internal
  * @see Block
  */
-var Container = function Container(_ref3) {
+var ContainerNew = function ContainerNew(_ref3) {
   var children = _ref3.children,
     _ref3$clickableContai = _ref3.clickableContainer,
     clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
@@ -195,20 +186,30 @@ var Container = function Container(_ref3) {
     testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
     _ref3$theme = _ref3.theme,
     theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
-  var childrenOptions = getChildrenOptions(children, context);
+  var _getChildrenOptions = getChildrenOptions(children, context),
+    previewOnLeft = _getChildrenOptions.previewOnLeft,
+    previewOnRight = _getChildrenOptions.previewOnRight;
   var canShowHoverPreview = showHoverPreview && status === 'resolved';
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   var canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;
-  var container = (0, _react2.jsx)("div", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
+  var containerPaddingStyles = null;
+  var container = /*#__PURE__*/_react.default.createElement("div", {
     "data-smart-link-container": true,
-    "data-testid": testId
+    "data-testid": testId,
+    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itn8v0 _2rkopd34 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
+    style: {
+      "--_1xumd0e": (0, _runtime.ix)(padding),
+      "--_73mooq": (0, _runtime.ix)(previewOnLeft ? gap : padding),
+      "--_12k13bg": (0, _runtime.ix)(previewOnRight ? gap : padding),
+      "--_vzvmm2": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")))
+    }
   }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
   if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
-    return (0, _react2.jsx)(_hoverCardControl.default, {
+    return /*#__PURE__*/_react.default.createElement(_hoverCardControl.default, {
       isHoverPreview: canShowHoverPreview,
       isAuthTooltip: canShowAuthTooltip,
       actionOptions: actionOptions,
@@ -219,4 +220,10 @@ var Container = function Container(_ref3) {
   }
   return container;
 };
+var Container = function Container(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(ContainerNew, props);
+  }
+  return /*#__PURE__*/_react.default.createElement(_indexOld.default, props);
+};
 var _default = exports.default = Container;

package/dist/cjs/view/FlexibleCard/components/container/indexOld.js

@@ -0,0 +1,226 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getContainerStyles = exports.getChildrenOptions = exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactMagneticDi = require("react-magnetic-di");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("../../../../constants");
+var _flexibleUiContext = require("../../../../state/flexible-ui-context");
+var _utils = require("../../../../state/flexible-ui-context/utils");
+var _flexible = require("../../../../utils/flexible");
+var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
+var _layeredLink = _interopRequireDefault(require("./layered-link"));
+var _templateObject;
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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 elevationStyles = (0, _react2.css)({
+  border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  margin: "var(--ds-space-025, 2px)"
+});
+var clickableContainerStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a, button, .has-action': {
+    position: 'relative',
+    zIndex: 1
+  }
+});
+var getGap = function getGap(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.25rem';
+    case _constants.SmartLinkSize.Large:
+      return '1rem';
+    case _constants.SmartLinkSize.Medium:
+      return '.5rem';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.25rem';
+  }
+};
+
+/**
+ * Get container padding based on smart link size
+ * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
+ * at view/FlexibleCard/components/utils.tsx
+ */
+var getPadding = function getPadding(size) {
+  switch (size) {
+    case _constants.SmartLinkSize.XLarge:
+      return '1.5rem';
+    case _constants.SmartLinkSize.Large:
+      return '1.25rem';
+    case _constants.SmartLinkSize.Medium:
+      return '1rem';
+    case _constants.SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+var getContainerPaddingStyles = function getContainerPaddingStyles(size, hidePadding, childrenOptions) {
+  var padding = hidePadding ? '0rem' : getPadding(size);
+  var gap = getGap(size);
+  var previewOnLeft = childrenOptions.previewOnLeft,
+    previewOnRight = childrenOptions.previewOnRight;
+  return (0, _react2.css)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    '--container-padding': padding,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    '--container-gap-left': previewOnLeft ? gap : padding,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    '--container-gap-right': previewOnRight ? gap : padding,
+    '--preview-block-width': '30%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    padding: padding
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  previewOnLeft ? "padding-left: calc(var(--preview-block-width) + ".concat(gap, ");") : '',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  previewOnRight ? "padding-right: calc(var(--preview-block-width) + ".concat(gap, ");") : '');
+};
+
+/**
+ * @deprecated consider removing on FF bandicoots-compiled-migration-smartcard
+ */
+var getContainerStyles = exports.getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
+  var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\tdisplay: flex;\n\t\tgap: ", " 0;\n\t\tflex-direction: column;\n\t\tmin-width: 0;\n\t\toverflow-x: hidden;\n\t\tposition: relative;\n\t\t", "\n\t\t", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n\t\t\topacity: 1;\n\t\t}\n\t\ta:focus,\n\t\t.has-action:focus {\n\t\t\toutline-offset: -2px;\n\t\t}\n\t"])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+};
+var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
+  var _ref = context || {},
+    title = _ref.title,
+    _ref$url = _ref.url,
+    url = _ref$url === void 0 ? '' : _ref$url;
+  var _ref2 = getTitleBlockProps(children) || {},
+    target = _ref2.anchorTarget,
+    text = _ref2.text;
+  return (0, _react2.jsx)(_layeredLink.default, {
+    onClick: onClick,
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
+var getTitleBlockProps = function getTitleBlockProps(children) {
+  var block = _react.default.Children.toArray(children).find(function (child) {
+    return (0, _flexible.isFlexibleUiTitleBlock)(child);
+  });
+  if ( /*#__PURE__*/_react.default.isValidElement(block)) {
+    return block.props;
+  }
+};
+var getChildrenOptions = exports.getChildrenOptions = function getChildrenOptions(children, context) {
+  var options = {};
+  if ((0, _utils.isFlexUiPreviewPresent)(context)) {
+    _react.default.Children.map(children, function (child) {
+      if ( /*#__PURE__*/_react.default.isValidElement(child)) {
+        if ((0, _flexible.isFlexibleUiPreviewBlock)(child)) {
+          var placement = child.props.placement;
+          if (placement === _constants.MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+          if (placement === _constants.MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+  return options;
+};
+var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
+  return _react.default.Children.map(children, function (child) {
+    // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
+    if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
+      var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+      if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
+        return /*#__PURE__*/_react.default.cloneElement(child, {
+          // @ts-expect-error
+          onClick: onClick,
+          retry: retry,
+          size: size,
+          status: status,
+          theme: containerTheme
+        });
+      }
+      // @ts-expect-error
+      return /*#__PURE__*/_react.default.cloneElement(child, {
+        size: size,
+        status: status
+      });
+    }
+  });
+};
+
+/**
+ * A container is a hidden component that build the Flexible Smart Link.
+ * All the Flexible UI components are wrapped inside the container.
+ * It inherits the ui props from Card component and applies the custom styling
+ * accordingly.
+ * @internal
+ * @see Block
+ */
+var ContainerOld = function ContainerOld(_ref3) {
+  var children = _ref3.children,
+    _ref3$clickableContai = _ref3.clickableContainer,
+    clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
+    _ref3$hideBackground = _ref3.hideBackground,
+    hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
+    _ref3$hideElevation = _ref3.hideElevation,
+    hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
+    _ref3$hidePadding = _ref3.hidePadding,
+    hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
+    onClick = _ref3.onClick,
+    retry = _ref3.retry,
+    _ref3$showHoverPrevie = _ref3.showHoverPreview,
+    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    hoverPreviewOptions = _ref3.hoverPreviewOptions,
+    actionOptions = _ref3.actionOptions,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
+    status = _ref3.status,
+    _ref3$testId = _ref3.testId,
+    testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
+    _ref3$theme = _ref3.theme,
+    theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+  var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
+  var childrenOptions = getChildrenOptions(children, context);
+  var canShowHoverPreview = showHoverPreview && status === 'resolved';
+  // `retry` object contains action that can be performed on
+  // unresolved link (unauthorized, forbidden, not found, etc.)
+  var canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;
+  var container = (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions),
+    "data-smart-link-container": true,
+    "data-testid": testId
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
+  if (context !== null && context !== void 0 && context.url && (canShowHoverPreview || canShowAuthTooltip)) {
+    return (0, _react2.jsx)(_hoverCardControl.default, {
+      isHoverPreview: canShowHoverPreview,
+      isAuthTooltip: canShowAuthTooltip,
+      actionOptions: actionOptions,
+      testId: testId,
+      url: context.url,
+      hoverPreviewOptions: hoverPreviewOptions
+    }, container);
+  }
+  return container;
+};
+var _default = exports.default = ContainerOld;

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

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var styles = (0, _react.css)({
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  textIndent: '100%',
+  whiteSpace: 'nowrap',
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  'a&.layered-link': {
+    position: 'absolute',
+    zIndex: 0
+  },
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '&:hover ~ *': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '.actions-button-group': {
+      opacity: 1
+    }
+  }
+});
+
+/**
+ * An anchor component to cover the entire container creating a clickable area.
+ * @internal
+ * @see `clickableContainer`
+ */
+var LayeredLinkOld = function LayeredLinkOld(_ref) {
+  var onClick = _ref.onClick,
+    target = _ref.target,
+    testId = _ref.testId,
+    text = _ref.text,
+    url = _ref.url;
+  var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
+  return (0, _react.jsx)("a", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: "layered-link",
+    css: styles,
+    "data-testid": "".concat(testId, "-layered-link"),
+    href: url,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    target: target,
+    tabIndex: -1 // Hide tab index and let the title link be the link.
+  }, text);
+};
+var _default = exports.default = LayeredLinkOld;

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

@@ -0,0 +1,11 @@
+._154iidpf{top:0}
+._18m915vq{overflow-y:hidden}
+._1ltvidpf{left:0}
+._1reo15vq{overflow-x:hidden}
+._1xi2idpf{right:0}
+._94n5idpf{bottom:0}
+._a52dkb7n:hover~* .actions-button-group{opacity:1}
+._azhw1osq{text-indent:100%}
+._o5721q9c{white-space:nowrap}
+a._hboxstnw.layered-link{position:absolute}
+a._obkmidpf.layered-link{z-index:0}

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

@@ -1,69 +1,37 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./index.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var styles = (0, _react.css)({
-  // Stretch the invisible link over the whole of the post.
-  // Hide the link’s text.
-  top: 0,
-  right: 0,
-  bottom: 0,
-  left: 0,
-  overflow: 'hidden',
-  textIndent: '100%',
-  whiteSpace: 'nowrap',
-  // Needs a heightened specificity to trump other anchor.
-  // Stack it under all other links in the post text.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  'a&.layered-link': {
-    position: 'absolute',
-    zIndex: 0
-  },
-  // When hovering over the layered link, any hidden action buttons inside
-  // the Container should become visible.
-  // As actions resides inside blocks and layered link is expected to be
-  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
-  // its sibling. Using general sibling combinator here to apply styling to
-  // all the siblings of layered link.
-  // The general sibling combinator (~) separates two selectors and matches all
-  // iterations of the second element, that are following the first element
-  // (though not necessarily immediately), and are children of the same parent
-  // element.
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '&:hover ~ *': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '.actions-button-group': {
-      opacity: 1
-    }
-  }
-});
+var _LayeredLinkOld = _interopRequireDefault(require("./LayeredLinkOld"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = null;
 
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
  * @see `clickableContainer`
  */
-var LayeredLink = function LayeredLink(_ref) {
+var LayeredLinkNew = function LayeredLinkNew(_ref) {
   var onClick = _ref.onClick,
     target = _ref.target,
     testId = _ref.testId,
     text = _ref.text,
     url = _ref.url;
   var onMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
-  return (0, _react.jsx)("a", {
+  return /*#__PURE__*/React.createElement("a", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: "layered-link",
-    css: styles,
+    className: (0, _runtime.ax)(["_1reo15vq _18m915vq _154iidpf _1xi2idpf _94n5idpf _1ltvidpf _azhw1osq _o5721q9c _hboxstnw _obkmidpf _a52dkb7n", "layered-link"]),
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
     onClick: onClick,
@@ -72,4 +40,10 @@ var LayeredLink = function LayeredLink(_ref) {
     tabIndex: -1 // Hide tab index and let the title link be the link.
   }, text);
 };
+var LayeredLink = function LayeredLink(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LayeredLinkNew, props);
+  }
+  return /*#__PURE__*/React.createElement(_LayeredLinkOld.default, props);
+};
 var _default = exports.default = LayeredLink;