@atlaskit/smart-card 34.1.0 → 34.2.0

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/LoadingSkeletonOld.js

@@ -0,0 +1,46 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx, keyframes } from '@emotion/react';
+const LoadingSkeletonOld = ({
+  testId,
+  width,
+  height
+}) => {
+  const animationNameStyles = keyframes({
+    '0%': {
+      backgroundPosition: '50% 0'
+    },
+    '100%': {
+      backgroundPosition: '-50% 0'
+    }
+  });
+  const styles = css({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    width: `${width}rem`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    height: `${height}rem`,
+    borderRadius: '2px',
+    userSelect: 'none',
+    background: "var(--ds-skeleton-subtle, #f6f7f8)",
+    backgroundImage: `linear-gradient( to right, transparent 0%, ${"var(--ds-skeleton, #edeef1)"} 20%, transparent 40%, transparent 100% )`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '280% 100%',
+    display: 'inline-block',
+    animationDuration: '1s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: animationNameStyles,
+    animationTimingFunction: 'linear'
+  });
+
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
+  return jsx("span", {
+    css: styles,
+    "data-testid": testId
+  });
+};
+export default LoadingSkeletonOld;

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.compiled.css

@@ -0,0 +1,15 @@
+
+._2rkoyh40{border-radius:2px}._12vemgnk{background-repeat:no-repeat}
+._1bsb9tg7{width:var(--_1ea5ebz)}
+._1e0c1o8l{display:inline-block}
+._1itkvl7m{background-image:linear-gradient(to right,transparent 0,var(--ds-skeleton,#edeef1) 20%,transparent 40%,transparent 100%)}
+._1lrw6rms{background-size:280% 100%}
+._1o51q7pw{animation-fill-mode:forwards}
+._1pglp3kn{animation-timing-function:linear}
+._4t3imry4{height:var(--_roksyz)}
+._5sag9cwz{animation-duration:1s}
+._bfhk178v{background-color:var(--ds-skeleton-subtle,#f6f7f8)}
+._j7hqqkar{animation-name:kc09ee}
+._tip812c5{animation-iteration-count:infinite}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+@keyframes kc09ee{0%{background-position:50% 0}to{background-position:-50% 0}}

package/dist/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,46 +1,31 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx, keyframes } from '@emotion/react';
-const LoadingSkeleton = ({
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { fg } from '@atlaskit/platform-feature-flags';
+import LoadingSkeletonOld from './LoadingSkeletonOld';
+const animationNameStyles = null;
+const LoadingSkeletonNew = ({
   testId,
   width,
   height
 }) => {
-  const animationNameStyles = keyframes({
-    '0%': {
-      backgroundPosition: '50% 0'
-    },
-    '100%': {
-      backgroundPosition: '-50% 0'
-    }
-  });
-  const styles = css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: `${width}rem`,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: `${height}rem`,
-    borderRadius: '2px',
-    userSelect: 'none',
-    background: "var(--ds-skeleton-subtle, #f6f7f8)",
-    backgroundImage: `linear-gradient( to right, transparent 0%, ${"var(--ds-skeleton, #edeef1)"} 20%, transparent 40%, transparent 100% )`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: '280% 100%',
-    display: 'inline-block',
-    animationDuration: '1s',
-    animationFillMode: 'forwards',
-    animationIterationCount: 'infinite',
-    animationName: animationNameStyles,
-    animationTimingFunction: 'linear'
-  });
+  const styles = null;
 
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-  return jsx("span", {
-    css: styles,
-    "data-testid": testId
+  return /*#__PURE__*/React.createElement("span", {
+    "data-testid": testId,
+    className: ax(["_2rkoyh40 _1bsb9tg7 _4t3imry4 _uiztglyw _bfhk178v _1itkvl7m _12vemgnk _1lrw6rms _1e0c1o8l _5sag9cwz _1o51q7pw _tip812c5 _j7hqqkar _1pglp3kn"]),
+    style: {
+      "--_1ea5ebz": ix(width, "rem"),
+      "--_roksyz": ix(height, "rem")
+    }
   });
 };
+const LoadingSkeleton = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LoadingSkeletonNew, props);
+  }
+  return /*#__PURE__*/React.createElement(LoadingSkeletonOld, props);
+};
 export default LoadingSkeleton;

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

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

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

@@ -1,87 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* 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 */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { useContext } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { di } from 'react-magnetic-di';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N40 } from '@atlaskit/theme/colors';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import HoverCardControl from './hover-card-control';
+import ContainerOld from './indexOld';
 import LayeredLink from './layered-link';
-const elevationStyles = css({
-  border: `1px solid ${`var(--ds-border, ${N40})`}`,
-  borderRadius: "var(--ds-border-radius-200, 8px)",
-  margin: "var(--ds-space-025, 2px)"
-});
-const getGap = size => {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return '1.25rem';
-    case SmartLinkSize.Large:
-      return '1rem';
-    case SmartLinkSize.Medium:
-      return '.5rem';
-    case 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
  */
-const getPadding = size => {
-  switch (size) {
-    case SmartLinkSize.XLarge:
-      return '1.5rem';
-    case SmartLinkSize.Large:
-      return '1.25rem';
-    case SmartLinkSize.Medium:
-      return '1rem';
-    case SmartLinkSize.Small:
-    default:
-      return '.5rem';
-  }
-};
-const clickableContainerStyles = 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
-  }
-});
-const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
-  const padding = hidePadding ? '0rem' : getPadding(size);
-  const gap = getGap(size);
-  const {
-    previewOnLeft,
-    previewOnRight
-  } = childrenOptions;
-  return 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) + ${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) + ${gap});` : '');
-};
-const getChildrenOptions = (children, context) => {
+export { getContainerStyles } from './indexOld';
+export const getChildrenOptions = (children, context) => {
   let options = {};
   if (isFlexUiPreviewPresent(context)) {
     React.Children.map(children, child => {
@@ -102,30 +39,6 @@ const getChildrenOptions = (children, context) => {
   }
   return options;
 };
-export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) => {
-  const paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-
-  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-  return css`
-		display: flex;
-		gap: ${getGap(size)} 0;
-		flex-direction: column;
-		min-width: 0;
-		overflow-x: hidden;
-		position: relative;
-		${hideBackground ? '' : `background-color: ${"var(--ds-surface-raised, #FFFFFF)"};`}
-		${paddingCss}
-    ${hideElevation ? '' : elevationStyles}
-    ${clickableContainer ? clickableContainerStyles : ''}
-    &:hover ~ .actions-button-group {
-			opacity: 1;
-		}
-		a:focus,
-		.has-action:focus {
-			outline-offset: -2px;
-		}
-	`;
-};
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
   // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
@@ -165,7 +78,7 @@ const getLayeredLink = (testId, context, children, onClick) => {
     anchorTarget: target,
     text
   } = getTitleBlockProps(children) || {};
-  return jsx(LayeredLink, {
+  return /*#__PURE__*/React.createElement(LayeredLink, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -173,6 +86,60 @@ const getLayeredLink = (testId, context, children, onClick) => {
     url: url
   });
 };
+const baseStyleCommon = null;
+const backgroundStyle = null;
+const elevationStyles = null;
+const clickableContainerStyles = null;
+const 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
+ */
+const getPadding = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.5rem';
+    case SmartLinkSize.Large:
+      return '1.25rem';
+    case SmartLinkSize.Medium:
+      return '1rem';
+    case SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+const getGap = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.25rem';
+    case SmartLinkSize.Large:
+      return '1rem';
+    case SmartLinkSize.Medium:
+      return '.5rem';
+    case SmartLinkSize.Small:
+    default:
+      return '.25rem';
+  }
+};
+const previewOnLeftStyleMap = {
+  xlarge: "_19bv15sf _y5vk1k92",
+  large: "_19bvf557 _y5vk1j6v",
+  medium: "_19bvqox2 _y5vk1kwk",
+  small: "_19bv1ltm _y5vk6mu8"
+};
+const 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.
@@ -182,7 +149,7 @@ const getLayeredLink = (testId, context, children, onClick) => {
  * @internal
  * @see Block
  */
-const Container = ({
+const ContainerNew = ({
   children,
   clickableContainer = false,
   hideBackground = false,
@@ -198,20 +165,30 @@ const Container = ({
   testId = 'smart-links-container',
   theme = SmartLinkTheme.Link
 }) => {
+  const padding = hidePadding ? '0rem' : getPadding(size);
+  const gap = getGap(size);
   const context = useContext(FlexibleUiContext);
-  const childrenOptions = getChildrenOptions(children, context);
+  const {
+    previewOnLeft,
+    previewOnRight
+  } = getChildrenOptions(children, context);
   const canShowHoverPreview = showHoverPreview && status === 'resolved';
   // `retry` object contains action that can be performed on
   // unresolved link (unauthorized, forbidden, not found, etc.)
   const canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;
-  const container = 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),
+  const containerPaddingStyles = null;
+  const container = /*#__PURE__*/React.createElement("div", {
     "data-smart-link-container": true,
-    "data-testid": testId
+    "data-testid": testId,
+    className: 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 && "_19ith6cr _2rkopd34 _18s8v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
+    style: {
+      "--_1xumd0e": ix(padding),
+      "--_73mooq": ix(previewOnLeft ? gap : padding),
+      "--_12k13bg": ix(previewOnRight ? gap : padding)
+    }
   }, 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 jsx(HoverCardControl, {
+    return /*#__PURE__*/React.createElement(HoverCardControl, {
       isHoverPreview: canShowHoverPreview,
       isAuthTooltip: canShowAuthTooltip,
       actionOptions: actionOptions,
@@ -222,4 +199,10 @@ const Container = ({
   }
   return container;
 };
+const Container = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(ContainerNew, props);
+  }
+  return /*#__PURE__*/React.createElement(ContainerOld, props);
+};
 export default Container;

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

@@ -0,0 +1,229 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useContext } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import { di } from 'react-magnetic-di';
+import { N40 } from '@atlaskit/theme/colors';
+import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
+import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
+import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
+import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
+import HoverCardControl from './hover-card-control';
+import LayeredLink from './layered-link';
+const elevationStyles = css({
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderRadius: "var(--ds-border-radius-200, 8px)",
+  margin: "var(--ds-space-025, 2px)"
+});
+const clickableContainerStyles = 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
+  }
+});
+const getGap = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.25rem';
+    case SmartLinkSize.Large:
+      return '1rem';
+    case SmartLinkSize.Medium:
+      return '.5rem';
+    case 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
+ */
+const getPadding = size => {
+  switch (size) {
+    case SmartLinkSize.XLarge:
+      return '1.5rem';
+    case SmartLinkSize.Large:
+      return '1.25rem';
+    case SmartLinkSize.Medium:
+      return '1rem';
+    case SmartLinkSize.Small:
+    default:
+      return '.5rem';
+  }
+};
+const getContainerPaddingStyles = (size, hidePadding, childrenOptions) => {
+  const padding = hidePadding ? '0rem' : getPadding(size);
+  const gap = getGap(size);
+  const {
+    previewOnLeft,
+    previewOnRight
+  } = childrenOptions;
+  return 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) + ${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) + ${gap});` : '');
+};
+
+/**
+ * @deprecated consider removing on FF bandicoots-compiled-migration-smartcard
+ */
+export const getContainerStyles = (size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) => {
+  const paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return css`
+		display: flex;
+		gap: ${getGap(size)} 0;
+		flex-direction: column;
+		min-width: 0;
+		overflow-x: hidden;
+		position: relative;
+		${hideBackground ? '' : `background-color: ${"var(--ds-surface-raised, #FFFFFF)"};`}
+		${paddingCss}
+    ${hideElevation ? '' : elevationStyles}
+    ${clickableContainer ? clickableContainerStyles : ''}
+    &:hover ~ .actions-button-group {
+			opacity: 1;
+		}
+		a:focus,
+		.has-action:focus {
+			outline-offset: -2px;
+		}
+	`;
+};
+const getLayeredLink = (testId, context, children, onClick) => {
+  const {
+    title,
+    url = ''
+  } = context || {};
+  const {
+    anchorTarget: target,
+    text
+  } = getTitleBlockProps(children) || {};
+  return jsx(LayeredLink, {
+    onClick: onClick,
+    target: target,
+    testId: testId,
+    text: text || title,
+    url: url
+  });
+};
+const getTitleBlockProps = children => {
+  const block = React.Children.toArray(children).find(child => isFlexibleUiTitleBlock(child));
+  if ( /*#__PURE__*/React.isValidElement(block)) {
+    return block.props;
+  }
+};
+export const getChildrenOptions = (children, context) => {
+  let options = {};
+  if (isFlexUiPreviewPresent(context)) {
+    React.Children.map(children, child => {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        if (isFlexibleUiPreviewBlock(child)) {
+          const {
+            placement
+          } = child.props;
+          if (placement === MediaPlacement.Left) {
+            options.previewOnLeft = true;
+          }
+          if (placement === MediaPlacement.Right) {
+            options.previewOnRight = true;
+          }
+        }
+      }
+    });
+  }
+  return options;
+};
+const renderChildren = (children, containerSize, containerTheme, status, retry, onClick) => React.Children.map(children, child => {
+  // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
+  if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
+    const {
+      size: blockSize
+    } = child.props;
+    const size = blockSize || containerSize;
+    if (isFlexibleUiTitleBlock(child)) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        // @ts-expect-error
+        onClick,
+        retry,
+        size,
+        status,
+        theme: containerTheme
+      });
+    }
+    // @ts-expect-error
+    return /*#__PURE__*/React.cloneElement(child, {
+      size,
+      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
+ */
+const ContainerOld = ({
+  children,
+  clickableContainer = false,
+  hideBackground = false,
+  hideElevation = false,
+  hidePadding = false,
+  onClick,
+  retry,
+  showHoverPreview = false,
+  hoverPreviewOptions,
+  actionOptions,
+  size = SmartLinkSize.Medium,
+  status,
+  testId = 'smart-links-container',
+  theme = SmartLinkTheme.Link
+}) => {
+  const context = useContext(FlexibleUiContext);
+  const childrenOptions = getChildrenOptions(children, context);
+  const canShowHoverPreview = showHoverPreview && status === 'resolved';
+  // `retry` object contains action that can be performed on
+  // unresolved link (unauthorized, forbidden, not found, etc.)
+  const canShowAuthTooltip = showHoverPreview && status === 'unauthorized' && retry !== undefined;
+  const container = 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 jsx(HoverCardControl, {
+      isHoverPreview: canShowHoverPreview,
+      isAuthTooltip: canShowAuthTooltip,
+      actionOptions: actionOptions,
+      testId: testId,
+      url: context.url,
+      hoverPreviewOptions: hoverPreviewOptions
+    }, container);
+  }
+  return container;
+};
+export default ContainerOld;