@atlaskit/smart-card 34.5.1 → 34.6.0

package/dist/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -1,63 +1,46 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useMemo } from 'react';
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @compiled/shorthand-property-sorting */
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+/* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';
-import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils';
-var getPositionStyles = function getPositionStyles(position) {
-  switch (position) {
-    case SmartLinkPosition.Center:
-      return css({
-        alignSelf: 'center'
-      });
-    case SmartLinkPosition.Top:
-    default:
-      return css({
-        alignSelf: 'flex-start',
-        margin: 0
-      });
-  }
+import { getIconWidth } from '../../utils';
+import IconOld from './IconOld';
+var positionStyleMap = {
+  center: "_1wpz1h6o",
+  top: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1wpz1y6m"
 };
-var getIconStyles = function getIconStyles(position, width) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    css(getPositionStyles(position), getIconSizeStyles(width))
-  );
+var iconStylesMapOld = {
+  xlarge: "_16jlidpf _1o9zidpf _i0dl1wug _4t3iviql _1tkeviql _c71lviql _1bsbviql _1ul9viql _p12fviql _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7viql _1xjxviql _1752viql _qci8viql _15izviql _erubviql _19l3viql _1pr2viql _1u5tviql _mezjviql _e2ooviql _w8l5viql _1rg2viql _q7cvviql _xwbjviql _rtysviql _b8nkviql _4x20viql",
+  large: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1k8s _1tke1k8s _c71l1k8s _1bsb1k8s _1ul91k8s _p12f1k8s _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71k8s _1xjx1k8s _17521k8s _qci81k8s _15iz1k8s _erub1k8s _19l31k8s _1pr21k8s _1u5t1k8s _mezj1k8s _e2oo1k8s _w8l51k8s _1rg21k8s _q7cv1k8s _xwbj1k8s _rtys1k8s _b8nk1k8s _4x201k8s",
+  medium: "_16jlidpf _1o9zidpf _i0dl1wug _4t3i1j6v _1tke1j6v _c71l1j6v _1bsb1j6v _1ul91j6v _p12f1j6v _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna71j6v _1xjx1j6v _17521j6v _qci81j6v _15iz1j6v _erub1j6v _19l31j6v _1pr21j6v _1u5t1j6v _mezj1j6v _e2oo1j6v _w8l51j6v _1rg21j6v _q7cv1j6v _xwbj1j6v _rtys1j6v _b8nk1j6v _4x201j6v",
+  small: "_16jlidpf _1o9zidpf _i0dl1wug _4t3ioqnp _1tkeoqnp _c71loqnp _1bsboqnp _1ul9oqnp _p12foqnp _i2i3idpf _uhasidpf _5jw9idpf _7wy9idpf _bna7oqnp _1xjxoqnp _1752oqnp _qci8oqnp _15izoqnp _eruboqnp _19l3oqnp _1pr2oqnp _1u5toqnp _mezjoqnp _e2oooqnp _w8l5oqnp _1rg2oqnp _q7cvoqnp _xwbjoqnp _rtysoqnp _b8nkoqnp _4x20oqnp"
 };
-var getCustomRenderStyles = function getCustomRenderStyles(value) {
-  return (
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    css(getTruncateStyles(1, value), {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
-      lineHeight: value,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      fontSize: value,
-      textAlign: 'center',
-      textOverflow: 'clip',
-      WebkitBoxOrient: 'unset',
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-      span: {
-        margin: 0,
-        padding: 0,
-        verticalAlign: 'baseline'
-      }
-    })
-  );
+var customRenderStyleMapOld = {
+  xlarge: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz4viql _1wybviql _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kviql",
+  large: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz41k8s _1wyb1k8s _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102k1k8s",
+  medium: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz41j6v _1wyb1j6v _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102k1j6v",
+  small: "_1reo15vq _18m915vq _1e0ccj1k _1nmz1hna _1yyjkb7n _vwz4oqnp _1wyboqnp _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102koqnp"
+};
+var customRenderStyleMapNew = {
+  xlarge: "_1reo15vq _18m915vq _11c81p5s _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kz42d",
+  large: "_1reo15vq _18m915vq _11c81p5s _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kz42d",
+  medium: "_1reo15vq _18m915vq _11c81bk4 _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kptym",
+  small: "_1reo15vq _18m915vq _11c81bk4 _1e0ccj1k _1nmz1hna _1yyjkb7n _y3gn1h6o _1btozryt _sudpn7od _1ipkidpf _1kdcidpf _3glyidpf _1w2uidpf _1oh2idpf _99ztidpf _1m2uidpf _9n9oidpf _e4km18uv _102kptym"
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   var size = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : SmartLinkSize.Medium;
   if (icon) {
-    return jsx(AtlaskitIcon, _extends({
+    return /*#__PURE__*/React.createElement(AtlaskitIcon, _extends({
       icon: icon,
       testId: "".concat(testId, "-icon")
     }, fg('platform-smart-card-icon-migration') && {
@@ -66,7 +49,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   }
 };
 var renderDefaultIcon = function renderDefaultIcon(label, testId) {
-  return jsx(LinkIcon, {
+  return /*#__PURE__*/React.createElement(LinkIcon, {
     label: label,
     testId: "".concat(testId, "-default"),
     color: "currentColor"
@@ -76,7 +59,7 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
   var size = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : SmartLinkSize.Medium;
   var width = size === SmartLinkSize.Large ? "var(--ds-space-300, 24px)" : "var(--ds-space-200, 16px)";
   if (url) {
-    return jsx(ImageIcon, _extends({
+    return /*#__PURE__*/React.createElement(ImageIcon, _extends({
       defaultIcon: defaultIcon,
       testId: testId,
       url: url
@@ -93,7 +76,7 @@ var renderImageIcon = function renderImageIcon(defaultIcon, url, testId) {
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-var Icon = function Icon(_ref) {
+var IconNew = function IconNew(_ref) {
   var icon = _ref.icon,
     overrideIcon = _ref.overrideIcon,
     _ref$label = _ref.label,
@@ -101,7 +84,7 @@ var Icon = function Icon(_ref) {
     name = _ref.name,
     _ref$position = _ref.position,
     position = _ref$position === void 0 ? SmartLinkPosition.Top : _ref$position,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     render = _ref.render,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
@@ -113,21 +96,19 @@ var Icon = function Icon(_ref) {
     return overrideIcon || (render === null || render === void 0 ? void 0 : render()) || renderImageIcon(defaultIcon, url, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || renderAtlaskitIcon(icon, testId, fg('platform-smart-card-icon-migration') ? size : undefined) || defaultIcon;
   }, [overrideIcon, icon, label, render, testId, url, size]);
   var width = getIconWidth(size);
-  var styles = getIconStyles(position, width);
-  var renderStyles = render ? getCustomRenderStyles(width) : undefined;
-  return jsx("div", {
-    css: [
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    !fg('platform-smart-card-icon-migration') && styles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    renderStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
-    overrideCss],
+
+  // const styles = getIconStyles(position, width);
+  // const renderStyles = render ? getCustomRenderStyles(width) : undefined;
+
+  return /*#__PURE__*/React.createElement("div", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-icon": true,
     "data-testid": testId
-  }, fg('platform-smart-card-icon-migration') ? jsx(Box, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax([!fg('platform-smart-card-icon-migration') && iconStylesMapOld[size], !fg('platform-smart-card-icon-migration') && positionStyleMap[position], render && !fg('platform-smart-card-icon-migration') && customRenderStyleMapOld[size], render && fg('platform-smart-card-icon-migration') && customRenderStyleMapNew[size], className])
+  }, fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
     xcss: iconWrapperStyle,
     style: {
       width: width,
@@ -135,6 +116,13 @@ var Icon = function Icon(_ref) {
     }
   }, element) : element);
 };
+var Icon = function Icon(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(IconNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(IconOld, props);
+  }
+};
 var iconWrapperStyle = xcss({
   display: 'flex',
   alignItems: 'center',

package/dist/esm/view/FlexibleCard/components/elements/link/LinkOld.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { useMemo } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import Tooltip from '@atlaskit/tooltip';
+import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
+import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
+var DEFAULT_MAX_LINES = 2;
+var MAXIMUM_MAX_LINES = 2;
+var MINIMUM_MAX_LINES = 1;
+var containerStyles = css({
+  flex: '1 1 auto'
+});
+var getThemeStyles = function getThemeStyles(theme) {
+  switch (theme) {
+    case SmartLinkInternalTheme.Grey:
+      // We are being specifc with the CSS selectors to ensure that Confluence overrides
+      // do not affect our internal Smart Card styles
+      return css({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        'a&': {
+          color: "var(--ds-text-subtlest, #626F86)",
+          '&:active, &:visited, &:focus, &:hover': {
+            color: "var(--ds-text-subtlest, #626F86)",
+            textDecoration: 'underline'
+          },
+          font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+        }
+      });
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+    case SmartLinkTheme.Black:
+      return css({
+        color: "var(--ds-text-subtle, #44546F)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':active': {
+          color: "var(--ds-text, #172B4D)"
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':hover': {
+          color: "var(--ds-text-subtle, #44546F)",
+          textDecoration: 'underline'
+        }
+      });
+    case SmartLinkTheme.Link:
+    default:
+      return css({
+        color: "var(--ds-link, #0C66E4)",
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':active': {
+          color: "var(--ds-link-pressed, #0055CC)"
+        },
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+        ':hover': {
+          color: "var(--ds-link, #0C66E4)",
+          textDecoration: 'underline'
+        }
+      });
+  }
+};
+var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
+  var sizeStyles = getLinkSizeStyles(size);
+  return css({
+    flex: '1 1 auto'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  sizeStyles,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  getThemeStyles(theme));
+};
+var getMaxLines = function getMaxLines(maxLines) {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+var withTooltip = function withTooltip(trigger, content, testId) {
+  return jsx(Tooltip, {
+    content: content,
+    testId: "".concat(testId, "-tooltip"),
+    tag: "span"
+  }, trigger);
+};
+
+/**
+ * A base element that represent an anchor.
+ * @internal
+ * @param {LinkProps} LinkProps - The props necessary for the Link element.
+ * @see LinkIcon
+ */
+var LinkOld = function LinkOld(_ref) {
+  var hideTooltip = _ref.hideTooltip,
+    _ref$maxLines = _ref.maxLines,
+    maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-link' : _ref$testId,
+    text = _ref.text,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? SmartLinkTheme.Link : _ref$theme,
+    url = _ref.url,
+    onClick = _ref.onClick,
+    _ref$target = _ref.target,
+    target = _ref$target === void 0 ? '_blank' : _ref$target;
+  var onMouseDown = useMouseDownEvent();
+  var hasSpace = useMemo(function () {
+    return text ? hasWhiteSpace(text) : false;
+  }, [text]);
+  var anchor = jsx("a", _extends({
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+    "data-smart-element": name,
+    "data-smart-element-link": true,
+    "data-testid": testId,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    href: url
+    // We do not want set the target if it is the default value of '_self'. This prevents link
+    // click issues in Confluence and Trello which rely on it not being set unless necessary.
+  }, target !== '_self' && {
+    target: target
+  }), text);
+  return jsx("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
+};
+export default LinkOld;

package/dist/esm/view/FlexibleCard/components/elements/link/index.compiled.css

@@ -0,0 +1,34 @@
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8o0gd{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._11c8qk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+a._10ueqk37{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0ccj1k{display:-webkit-box}
+._1nmz1hna{word-break:break-word}
+._1nmz9jpi{word-break:break-all}
+._1o9zkb7n{flex-shrink:1}
+._1reo15vq{overflow-x:hidden}
+._1yyjcs5v{-webkit-line-clamp:2}
+._1yyjkb7n{-webkit-line-clamp:1}
+._i0dl1wug{flex-basis:auto}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz14q2{color:var(--ds-link,#0c66e4)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._vwz41j6v{line-height:1rem}
+._vwz41k8s{line-height:1.5rem}
+a._ye10131l{color:var(--ds-text-subtlest,#626f86)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}
+._9h8h1fxt:active{color:var(--ds-text,#172b4d)}
+a._1ray131l:active, a._dlb7131l:focus, a._rnxt131l:hover, a._1h4d131l:visited{color:var(--ds-text-subtlest,#626f86)}
+a._fjv618uv:active, a._93u918uv:focus, a._g2lk18uv:hover, a._pnzf18uv:visited{text-decoration-color:initial}
+a._hlwq8stv:active, a._1e2m8stv:focus, a._1l4b8stv:hover, a._ue8d8stv:visited{text-decoration-line:underline}
+a._yni7nqa1:active, a._1bianqa1:focus, a._93jhnqa1:hover, a._64n6nqa1:visited{text-decoration-style:solid}
+@supports not (-webkit-line-clamp:1){._102k1j6v{max-height:1rem}._102k1k8s{max-height:1.5rem}._102k1wto{max-height:3rem}._102kviql{max-height:2rem}}

package/dist/esm/view/FlexibleCard/components/elements/link/index.js

@@ -1,80 +1,21 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useMemo } from 'react';
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+/* eslint-disable @compiled/shorthand-property-sorting */
+/* 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, jsx } from '@emotion/react';
+import React, { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
-import { SmartLinkInternalTheme, SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
+import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';
+import { hasWhiteSpace } from '../../utils';
+import LinkOld from './LinkOld';
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var containerStyles = css({
-  flex: '1 1 auto'
-});
-var getThemeStyles = function getThemeStyles(theme) {
-  switch (theme) {
-    case SmartLinkInternalTheme.Grey:
-      // We are being specifc with the CSS selectors to ensure that Confluence overrides
-      // do not affect our internal Smart Card styles
-      return css({
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-        'a&': {
-          color: "var(--ds-text-subtlest, #626F86)",
-          '&:active, &:visited, &:focus, &:hover': {
-            color: "var(--ds-text-subtlest, #626F86)",
-            textDecoration: 'underline'
-          },
-          font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
-        }
-      });
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    case SmartLinkTheme.Black:
-      return css({
-        color: "var(--ds-text-subtle, #44546F)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-        ':active': {
-          color: "var(--ds-text, #172B4D)"
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-        ':hover': {
-          color: "var(--ds-text-subtle, #44546F)",
-          textDecoration: 'underline'
-        }
-      });
-    case SmartLinkTheme.Link:
-    default:
-      return css({
-        color: "var(--ds-link, #0C66E4)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-        ':active': {
-          color: "var(--ds-link-pressed, #0055CC)"
-        },
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-        ':hover': {
-          color: "var(--ds-link, #0C66E4)",
-          textDecoration: 'underline'
-        }
-      });
-  }
-};
-var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
-  var sizeStyles = getLinkSizeStyles(size);
-  return css({
-    flex: '1 1 auto'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  sizeStyles,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  getThemeStyles(theme));
-};
+var containerStyles = null;
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;
@@ -85,12 +26,45 @@ var getMaxLines = function getMaxLines(maxLines) {
   return maxLines;
 };
 var withTooltip = function withTooltip(trigger, content, testId) {
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     testId: "".concat(testId, "-tooltip"),
     tag: "span"
   }, trigger);
 };
+var linkStyleSizeMap = {
+  xlarge: "_11c8o0gd _k48pi7a9 _vwz41k8s",
+  large: "_11c81oud _k48pi7a9 _vwz41j6v",
+  medium: "_11c81oud _k48pi7a9 _vwz41j6v",
+  small: "_11c8qk37 _k48pi7a9 _vwz41j6v"
+};
+var baseAnchorStyle = null;
+var workBreakStyleMap = {
+  true: "_1nmz1hna",
+  false: "_1nmz9jpi"
+};
+var anchorConstantsStyles = null;
+var anchorLineClampMap = {
+  1: "_1yyjkb7n",
+  2: "_1yyjcs5v"
+};
+var anchorLinkLineHeight1Map = {
+  xlarge: "_102k1k8s",
+  large: "_102k1j6v",
+  medium: "_102k1j6v",
+  small: "_102k1j6v"
+};
+var anchorLinkLineHeight2Map = {
+  xlarge: "_102k1wto",
+  large: "_102kviql",
+  medium: "_102kviql",
+  small: "_102kviql"
+};
+var themeStyleMap = {
+  grey: "_fjv618uv _93u918uv _g2lk18uv _pnzf18uv _hlwq8stv _1e2m8stv _1l4b8stv _ue8d8stv _yni7nqa1 _1bianqa1 _93jhnqa1 _64n6nqa1 _1ray131l _dlb7131l _rnxt131l _1h4d131l _10ueqk37 _ye10131l",
+  black: "_syaz1gjq _9oik18uv _1bnx8stv _jf4cnqa1 _30l31gjq _9h8h1fxt",
+  link: "_syaz14q2 _9oik18uv _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
 
 /**
  * A base element that represent an anchor.
@@ -98,12 +72,12 @@ var withTooltip = function withTooltip(trigger, content, testId) {
  * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
-var Link = function Link(_ref) {
+var LinkNew = function LinkNew(_ref) {
   var hideTooltip = _ref.hideTooltip,
     _ref$maxLines = _ref.maxLines,
     maxLines = _ref$maxLines === void 0 ? DEFAULT_MAX_LINES : _ref$maxLines,
     name = _ref.name,
-    overrideCss = _ref.overrideCss,
+    className = _ref.className,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? SmartLinkSize.Medium : _ref$size,
     _ref$testId = _ref.testId,
@@ -119,22 +93,30 @@ var Link = function Link(_ref) {
   var hasSpace = useMemo(function () {
     return text ? hasWhiteSpace(text) : false;
   }, [text]);
-  var anchor = jsx("a", _extends({
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    css: [getAnchorStyles(size, theme, getMaxLines(maxLines), hasSpace), overrideCss],
+  var anchor = /*#__PURE__*/React.createElement("a", _extends({
     "data-smart-element": name,
     "data-smart-element-link": true,
     "data-testid": testId,
     onClick: onClick,
     onMouseDown: onMouseDown,
     href: url
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug", linkStyleSizeMap[size], anchorLineClampMap[getMaxLines(maxLines)], "_1reo15vq _18m915vq _1e0ccj1k _1bto1l2s _sudp1e54", workBreakStyleMap[hasSpace ? 'true' : 'false'], getMaxLines(maxLines) === 1 && anchorLinkLineHeight1Map[size], getMaxLines(maxLines) === 2 && anchorLinkLineHeight2Map[size], themeStyleMap[theme], className])
     // We do not want set the target if it is the default value of '_self'. This prevents link
     // click issues in Confluence and Trello which rely on it not being set unless necessary.
   }, target !== '_self' && {
     target: target
   }), text);
-  return jsx("span", {
-    css: containerStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
+var Link = function Link(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LinkNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LinkOld, props);
+  }
+};
 export default Link;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/LozengeOld.js

@@ -0,0 +1,58 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { css, jsx } from '@emotion/react';
+import AtlaskitLozenge from '@atlaskit/lozenge';
+import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
+import LozengeAction from './lozenge-action';
+var styles = css({
+  display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: 'inherit'
+});
+
+/**
+ * A base element that displays a Lozenge.
+ * @internal
+ * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
+ * @see State
+ */
+var LozengeOld = function LozengeOld(_ref) {
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    name = _ref.name,
+    overrideCss = _ref.overrideCss,
+    style = _ref.style,
+    text = _ref.text,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+  var ui = useFlexibleUiOptionContext();
+  if (!text) {
+    return null;
+  }
+  var lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text,
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: style,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
+  return jsx("span", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: [styles, overrideCss],
+    "data-fit-to-content": true,
+    "data-smart-element": name,
+    "data-smart-element-lozenge": true,
+    "data-testid": testId
+  }, lozenge);
+};
+export default LozengeOld;

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.compiled.css

@@ -0,0 +1,2 @@
+._1e0c116y{display:inline-flex}
+._vwz41kw7{line-height:inherit}