@atlaskit/smart-card 34.5.2 → 34.6.0

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

@@ -1,56 +1,45 @@
+/* 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';
-const 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';
+const positionStyleMap = {
+  center: "_1wpz1h6o",
+  top: "_19pkidpf _2hwxidpf _otyridpf _18u0idpf _1wpz1y6m"
+};
+const 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"
+};
+const 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"
+};
+const 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"
 };
-const getIconStyles = (position, width) =>
-// 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));
-const getCustomRenderStyles = value =>
-// 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'
-  }
-});
 const renderAtlaskitIcon = (icon, testId, size = SmartLinkSize.Medium) => {
   if (icon) {
-    return jsx(AtlaskitIcon, _extends({
+    return /*#__PURE__*/React.createElement(AtlaskitIcon, _extends({
       icon: icon,
       testId: `${testId}-icon`
     }, fg('platform-smart-card-icon-migration') && {
@@ -58,7 +47,7 @@ const renderAtlaskitIcon = (icon, testId, size = SmartLinkSize.Medium) => {
     }));
   }
 };
-const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
+const renderDefaultIcon = (label, testId) => /*#__PURE__*/React.createElement(LinkIcon, {
   label: label,
   testId: `${testId}-default`,
   color: "currentColor"
@@ -66,7 +55,7 @@ const renderDefaultIcon = (label, testId) => jsx(LinkIcon, {
 const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium) => {
   const 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
@@ -83,13 +72,13 @@ const renderImageIcon = (defaultIcon, url, testId, size = SmartLinkSize.Medium)
  * @param {IconProps} IconProps - The props necessary for the Icon element.
  * @see LinkIcon
  */
-const Icon = ({
+const IconNew = ({
   icon,
   overrideIcon,
   label = 'Link',
   name,
   position = SmartLinkPosition.Top,
-  overrideCss,
+  className,
   render,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-icon',
@@ -100,21 +89,19 @@ const Icon = ({
     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]);
   const width = getIconWidth(size);
-  const styles = getIconStyles(position, width);
-  const 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,
@@ -122,6 +109,13 @@ const Icon = ({
     }
   }, element) : element);
 };
+const Icon = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(IconNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(IconOld, props);
+  }
+};
 const iconWrapperStyle = xcss({
   display: 'flex',
   alignItems: 'center',

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

@@ -0,0 +1,132 @@
+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';
+const DEFAULT_MAX_LINES = 2;
+const MAXIMUM_MAX_LINES = 2;
+const MINIMUM_MAX_LINES = 1;
+const containerStyles = css({
+  flex: '1 1 auto'
+});
+const 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'
+        }
+      });
+  }
+};
+const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
+  const 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));
+};
+const getMaxLines = maxLines => {
+  if (maxLines > MAXIMUM_MAX_LINES) {
+    return DEFAULT_MAX_LINES;
+  }
+  if (maxLines < MINIMUM_MAX_LINES) {
+    return MINIMUM_MAX_LINES;
+  }
+  return maxLines;
+};
+const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
+  content: content,
+  testId: `${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
+ */
+const LinkOld = ({
+  hideTooltip,
+  maxLines = DEFAULT_MAX_LINES,
+  name,
+  overrideCss,
+  size = SmartLinkSize.Medium,
+  testId = 'smart-element-link',
+  text,
+  theme = SmartLinkTheme.Link,
+  url,
+  onClick,
+  target = '_blank'
+}) => {
+  const onMouseDown = useMouseDownEvent();
+  const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
+  const 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
+  }), text);
+  return jsx("span", {
+    css: containerStyles
+  }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
+};
+export default LinkOld;

package/dist/es2019/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/es2019/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';
 const DEFAULT_MAX_LINES = 2;
 const MAXIMUM_MAX_LINES = 2;
 const MINIMUM_MAX_LINES = 1;
-const containerStyles = css({
-  flex: '1 1 auto'
-});
-const 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'
-        }
-      });
-  }
-};
-const getAnchorStyles = (size, theme, maxLines, hasSpace) => {
-  const 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));
-};
+const containerStyles = null;
 const getMaxLines = maxLines => {
   if (maxLines > MAXIMUM_MAX_LINES) {
     return DEFAULT_MAX_LINES;
@@ -84,11 +25,44 @@ const getMaxLines = maxLines => {
   }
   return maxLines;
 };
-const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
+const withTooltip = (trigger, content, testId) => /*#__PURE__*/React.createElement(Tooltip, {
   content: content,
   testId: `${testId}-tooltip`,
   tag: "span"
 }, trigger);
+const linkStyleSizeMap = {
+  xlarge: "_11c8o0gd _k48pi7a9 _vwz41k8s",
+  large: "_11c81oud _k48pi7a9 _vwz41j6v",
+  medium: "_11c81oud _k48pi7a9 _vwz41j6v",
+  small: "_11c8qk37 _k48pi7a9 _vwz41j6v"
+};
+const baseAnchorStyle = null;
+const workBreakStyleMap = {
+  true: "_1nmz1hna",
+  false: "_1nmz9jpi"
+};
+const anchorConstantsStyles = null;
+const anchorLineClampMap = {
+  1: "_1yyjkb7n",
+  2: "_1yyjcs5v"
+};
+const anchorLinkLineHeight1Map = {
+  xlarge: "_102k1k8s",
+  large: "_102k1j6v",
+  medium: "_102k1j6v",
+  small: "_102k1j6v"
+};
+const anchorLinkLineHeight2Map = {
+  xlarge: "_102k1wto",
+  large: "_102kviql",
+  medium: "_102kviql",
+  small: "_102kviql"
+};
+const 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.
@@ -96,11 +70,11 @@ const withTooltip = (trigger, content, testId) => jsx(Tooltip, {
  * @param {LinkProps} LinkProps - The props necessary for the Link element.
  * @see LinkIcon
  */
-const Link = ({
+const LinkNew = ({
   hideTooltip,
   maxLines = DEFAULT_MAX_LINES,
   name,
-  overrideCss,
+  className,
   size = SmartLinkSize.Medium,
   testId = 'smart-element-link',
   text,
@@ -111,22 +85,30 @@ const Link = ({
 }) => {
   const onMouseDown = useMouseDownEvent();
   const hasSpace = useMemo(() => text ? hasWhiteSpace(text) : false, [text]);
-  const 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],
+  const 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
   }), text);
-  return jsx("span", {
-    css: containerStyles
+  return /*#__PURE__*/React.createElement("span", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug"])
   }, hideTooltip || text === undefined ? anchor : withTooltip(anchor, text, testId));
 };
+const 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/es2019/view/FlexibleCard/components/elements/lozenge/LozengeOld.js

@@ -0,0 +1,57 @@
+/**
+ * @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';
+const 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
+ */
+const LozengeOld = ({
+  action,
+  appearance = 'default',
+  name,
+  overrideCss,
+  style,
+  text,
+  testId = 'smart-element-lozenge'
+}) => {
+  const ui = useFlexibleUiOptionContext();
+  if (!text) {
+    return null;
+  }
+  const 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: `${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/es2019/view/FlexibleCard/components/elements/lozenge/index.compiled.css

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

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -1,17 +1,13 @@
-/**
- * @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';
+/* 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 AtlaskitLozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import LozengeAction from './lozenge-action';
-const styles = css({
-  display: 'inline-flex',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 'inherit'
-});
+import LozengeOld from './LozengeOld';
+const styles = null;
 
 /**
  * A base element that displays a Lozenge.
@@ -19,11 +15,11 @@ const styles = css({
  * @param {LozengeProps} LozengeProps - The props necessary for the Lozenge element.
  * @see State
  */
-const Lozenge = ({
+const LozengeNew = ({
   action,
   appearance = 'default',
   name,
-  overrideCss,
+  className,
   style,
   text,
   testId = 'smart-element-lozenge'
@@ -32,26 +28,34 @@ const Lozenge = ({
   if (!text) {
     return null;
   }
-  const lozenge = action ? jsx(LozengeAction, {
+  const lozenge = action ? /*#__PURE__*/React.createElement(LozengeAction, {
     action: action,
     appearance: appearance,
     testId: testId,
     text: text,
     zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
-  }) : jsx(AtlaskitLozenge, {
+  }) : /*#__PURE__*/React.createElement(AtlaskitLozenge, {
     appearance: appearance
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
     style: style,
     testId: `${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],
+  return /*#__PURE__*/React.createElement("span", {
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-lozenge": true,
     "data-testid": testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1e0c116y _vwz41kw7", className])
   }, lozenge);
 };
+const Lozenge = props => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(LozengeNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(LozengeOld, props);
+  }
+};
 export default Lozenge;