@atlaskit/smart-card 33.4.0 → 34.0.1

package/dist/cjs/view/InlineCard/styled.js

@@ -1,55 +1,35 @@
+/* styled.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.NoLinkAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _colors = require("@atlaskit/theme/colors");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+exports.IconStyledButton = void 0;
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["as", "style"];
+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; }
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var IconStyledButton = exports.IconStyledButton = _styled.default.span({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '&&&': {
-    textAlign: 'initial',
-    display: 'inline',
-    verticalAlign: 'baseline',
-    borderRadius: "var(--ds-border-radius-100, 4px)",
-    borderTopLeftRadius: '0px',
-    borderBottomLeftRadius: '0px',
-    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
-    backgroundClip: 'padding-box',
-    boxDecorationBreak: 'clone'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '> span': {
-    display: 'inline',
-    overflow: 'initial',
-    textOverflow: 'initial',
-    whiteSpace: 'initial',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      overflow: 'initial',
-      textOverflow: 'initial',
-      whiteSpace: 'initial'
-    }
-  }
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span({
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
-  marginLeft: "var(--ds-space-050, 4px)"
+var IconStyledButton = exports.IconStyledButton = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "span" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_i3j7iti9 _uqpc18uv _1ilx1nu9 _18v918uv _1t1midpf _jinwidpf _1695v77o _1pns12x7 _vktqv77o _1byq12x7 _k1fv1u8q _5x9bqvcn _ju3g18uv _mt1t18uv _12rl18uv _1wge18uv _1nr3zryt _1a8r4jg8 _1xdi1nu9 _1t21zryt _1jjh4jg8", __cmplp.className])
+  }));
 });
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var LinkAppearance = exports.LinkAppearance = _styled.default.a({
-  color: "var(--ds-link, ".concat(_colors.B400, ")"),
-  '&:hover': {
-    textDecoration: 'none'
-  }
-});
+if (process.env.NODE_ENV !== 'production') {
+  IconStyledButton.displayName = 'IconStyledButton';
+}

package/dist/cjs/view/LinkUrl/index.js

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "33.4.0",
+  packageVersion: "34.0.1",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "33.4.0"
+  packageVersion: "34.0.1"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/styled.js

@@ -15,6 +15,7 @@ export const metadataBlockCss = css({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '[data-smart-element-group]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem'
   }
 });

package/dist/es2019/view/EmbedModal/components/link-info/styled.js

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

package/dist/es2019/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -29,6 +29,7 @@ const getButtonStyle = (size, iconOnly) => {
         fontWeight: "var(--ds-font-weight-medium, 500)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         'button, button:hover, button:focus, button:active': [{
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
           lineHeight: 'inherit'
         }, iconOnly ? `
             padding: 0.125rem;

package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js

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

package/dist/es2019/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -7,6 +7,7 @@ const containerStyles = xcss({
   borderRadius: 'border.radius',
   margin: 'space.100',
   marginBottom: 'space.0',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
   padding: 'space.075',
   paddingInline: 'space.100',

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -22,6 +22,7 @@ import { filterActionItems } from '../utils';
 import ActionGroupItem from './action-group-item';
 const styles = css({
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {

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

@@ -18,7 +18,7 @@ const getElementGroupStyles = (size, maxLines) => {
   // sides so they line up nicely.
   const lineHeight = getMaxLineHeight(size);
   return css({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
     lineHeight: `${lineHeight}rem`
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -86,6 +86,7 @@ export const getBaseStyles = (direction, size) => css({
   display: 'flex',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   gap: `${getGapSize(size)}rem`,
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden'

package/dist/es2019/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -24,7 +24,7 @@ export const MotionWrapper = ({
     style: {
       height,
       minHeight,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
       lineHeight: 0,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',

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

@@ -31,7 +31,7 @@ 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 -- Ignored via go/DSP-18766
+  // 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,

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

@@ -9,6 +9,7 @@ import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-con
 import LozengeAction from './lozenge-action';
 const styles = css({
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit'
 });
 

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -17,6 +17,7 @@ export const dropdownItemGroupStyles = css({
 const sharedBlockStyles = css({
   display: 'flex',
   gap: "var(--ds-space-100, 0.5rem)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',
@@ -44,6 +45,7 @@ export const linkStyles = css(sharedBlockStyles, {
   marginBottom: "var(--ds-space-025, 2px)"
 });
 export const textStyles = maxLines => css({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   whiteSpace: 'normal'
 },

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -6,11 +6,14 @@ export const triggerButtonStyles = css({
   backgroundColor: 'transparent',
   color: 'unset',
   cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamily: 'unset',
   fontSize: 'unset',
   fontStyle: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontWeight: 'unset',
   fontVariant: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: 0,
   textTransform: 'unset',

package/dist/es2019/view/FlexibleCard/components/utils.js

@@ -97,7 +97,7 @@ export const getLinkSizeStyles = size => {
       return css({
         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)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case SmartLinkSize.Large:
@@ -105,7 +105,7 @@ export const getLinkSizeStyles = size => {
       return css({
         font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case SmartLinkSize.Small:
@@ -113,7 +113,7 @@ export const getLinkSizeStyles = size => {
       return css({
         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)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
   }

package/dist/es2019/view/InlineCard/ErroredView/index.js

@@ -3,13 +3,16 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 export class InlineCardErroredView extends React.Component {
   constructor(...args) {
@@ -32,7 +35,7 @@ export class InlineCardErroredView extends React.Component {
       const ActionButton = withFrameStyleControl(Button, this.frameRef);
       return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
         spacing: "none",
-        component: IconStyledButton,
+        component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButton : IconStyledButtonOld,
         onClick: this.handleRetry,
         role: "button"
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
@@ -48,13 +51,14 @@ export class InlineCardErroredView extends React.Component {
       message,
       truncateInline
     } = this.props;
+    const Wrapper = fg('bandicoots-compiled-migration-smartcard') ? AKIconWrapper : AKIconWrapperOld;
     const content = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
       isSelected: isSelected,
       ref: this.frameRef,
       truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+      icon: icon || /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
         label: "error",
         LEGACY_size: "small",
         color: `var(--ds-icon-danger, ${R300})`,

package/dist/es2019/view/InlineCard/ForbiddenView/index.js

@@ -5,21 +5,35 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
 import { IconStyledButton } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-const FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: `var(--ds-icon-danger, ${R400})`,
-  testId: "forbidden-view-fallback-icon"
-}));
+const fallbackForbiddenIcon = () => {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R400})`,
+      testId: "forbidden-view-fallback-icon"
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R400})`,
+      testId: "forbidden-view-fallback-icon"
+    }));
+  }
+};
 export class InlineCardForbiddenView extends React.Component {
   constructor(...args) {
     var _this$props, _this$props$requestAc;
@@ -65,14 +79,25 @@ export class InlineCardForbiddenView extends React.Component {
       const ActionButton = withFrameStyleControl(Button, this.frameRef);
       const accessType = (_this$props$requestAc2 = this.props.requestAccessContext) === null || _this$props$requestAc2 === void 0 ? void 0 : _this$props$requestAc2.accessType;
       if (this.state.hasRequestAccessContextMessage) {
-        return /*#__PURE__*/React.createElement(ActionButton, {
-          spacing: "none",
-          onClick: this.handleRetry,
-          component: IconStyledButton,
-          testId: "button-connect-other-account",
-          role: "button",
-          isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-        }, this.renderForbiddenAccessMessage());
+        if (fg('bandicoots-compiled-migration-smartcard')) {
+          return /*#__PURE__*/React.createElement(ActionButton, {
+            spacing: "none",
+            onClick: this.handleRetry,
+            component: IconStyledButton,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, this.renderForbiddenAccessMessage());
+        } else {
+          return /*#__PURE__*/React.createElement(ActionButton, {
+            spacing: "none",
+            onClick: this.handleRetry,
+            component: IconStyledButtonOld,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, this.renderForbiddenAccessMessage());
+        }
       }
       if (onAuthorise) {
         return /*#__PURE__*/React.createElement(Button, {
@@ -103,7 +128,7 @@ export class InlineCardForbiddenView extends React.Component {
       ref: this.frameRef,
       truncateInline: truncateInline
     }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-      icon: icon ? icon : FallbackForbiddenIcon,
+      icon: icon ? icon : fallbackForbiddenIcon(),
       link: url,
       title: url,
       onClick: onClick,

package/dist/es2019/view/InlineCard/Frame/index.js

@@ -1,6 +1,8 @@
 import React, { forwardRef, useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { WrapperAnchor, WrapperSpan } from './styled';
+import { WrapperAnchor as WrapperAnchorOld, WrapperSpan as WrapperSpanOld } from './styled-emotion';
 export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     isSelected,
@@ -35,7 +37,7 @@ export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
   const isAnchor = Boolean(link || onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
-  const Wrapper = isAnchor ? WrapperAnchor : WrapperSpan;
+  const Wrapper = fg('bandicoots-compiled-migration-smartcard') ? isAnchor ? WrapperAnchor : WrapperSpan : isAnchor ? WrapperAnchorOld : WrapperSpanOld;
   return /*#__PURE__*/React.createElement(Wrapper, {
     href: link,
     withoutBackground: withoutBackground,

package/dist/es2019/view/InlineCard/Frame/styled-emotion.js

@@ -0,0 +1,143 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { B100, B200, B400, B50, N40 } from '@atlaskit/theme/colors';
+const lineHeight = 22;
+const selectedStyles = {
+  cursor: 'pointer',
+  boxShadow: `0 0 0 2px ${`var(--ds-border-selected, ${B100})`}`,
+  outline: 'none',
+  userSelect: 'none',
+  '&, :hover, :focus, :active': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    border: `1px solid ${`var(--ds-border, ${N40})`}`
+  }
+};
+const isInteractive = ({
+  isInteractive
+}) => {
+  if (isInteractive) {
+    return {
+      ':active': {
+        backgroundColor: `var(--ds-background-selected, ${B50})`
+      },
+      ':focus': selectedStyles
+    };
+  }
+  return undefined;
+};
+const isSelected = ({
+  isSelected
+}) => {
+  if (isSelected) {
+    return selectedStyles;
+  } else {
+    return {
+      userSelect: 'text'
+    };
+  }
+};
+const hoveredStyles = {
+  borderColor: `var(--ds-border-accent-blue, ${B200})`
+};
+const activeHoveredFocusedStyles = props => {
+  if (props.withoutBackground) {
+    return undefined;
+  }
+  return {
+    textDecoration: 'none'
+  };
+};
+const hoveredWihBorderStyles = props => ({
+  ...hoveredStyles,
+  ...activeHoveredFocusedStyles(props)
+});
+
+/*
+  Inline smart cards should have the following layout:
+  ------------------------------------
+  | icon | title | action OR lozenge |
+  ------------------------------------
+  The aim is to ensure (1) all children are
+  in line with each other, (2) are vertically
+  centered.
+*/
+// NB: `padding` consistent with @mentions.
+// NB: `display: inline` required for `box-decoration-break` to work.
+// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
+const baseWrapperStyles = props => ({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: `${lineHeight}px`,
+  padding: `${"var(--ds-space-025, 2px)"} 0px`,
+  ...(props.withoutBackground ? {
+    paddingLeft: 0,
+    marginLeft: "var(--ds-space-negative-025, -2px)"
+  } : undefined),
+  display: 'inline',
+  boxDecorationBreak: 'clone',
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  color: `var(--ds-link, ${B400})`,
+  ...(props.withoutBackground ? undefined : {
+    backgroundColor: "var(--ds-surface-raised, white)"
+  }),
+  ...isSelected(props),
+  ...(props.withoutBackground ? undefined : {
+    border: `1px solid ${`var(--ds-border, ${N40})`}`
+  }),
+  '&:hover': hoveredStyles,
+  '&, :hover, :focus, :active': activeHoveredFocusedStyles(props),
+  transition: '0.1s all ease-in-out',
+  MozUserSelect: 'none',
+  // -moz-user-select
+
+  ...(props.isHovered ? hoveredWihBorderStyles(props) : undefined)
+});
+const truncateStyles = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-all',
+  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: `${lineHeight - 1}px`,
+  display: '-webkit-inline-box',
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: 'vertical',
+  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
+  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
+  padding: 0,
+  '@supports not (-webkit-line-clamp: 1)': {
+    display: 'inline-block',
+    maxHeight: `${lineHeight}px`,
+    // If the browser does not support webkit, we don't need to remove the padding
+    padding: `${"var(--ds-space-025, 2px)"} 0px`
+  }
+};
+const isTruncated = ({
+  truncateInline
+}) => {
+  if (truncateInline) {
+    return truncateStyles;
+  }
+  return undefined;
+};
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const WrapperAnchor = styled.a(props => ({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...baseWrapperStyles(props),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...isInteractive(props),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...isTruncated(props)
+}));
+WrapperAnchor.displayName = 'WrapperAnchor';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
+export const WrapperSpan = styled.span(props => ({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...baseWrapperStyles(props),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  ...isTruncated(props)
+}));
+WrapperSpan.displayName = 'WrapperSpan';

package/dist/es2019/view/InlineCard/Frame/styled.compiled.css

@@ -0,0 +1,53 @@
+
+._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
+._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._v56415x0{transition:all .1s ease-in-out}
+._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._16qscw00{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}
+._18m915vq{overflow-y:hidden}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._19bvidpf{padding-left:0}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1abx{display:-webkit-inline-box}
+._1e0c1nu9{display:inline}
+._1hmsglyw{text-decoration-line:none}
+._1nmz9jpi{word-break:break-all}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1rkwglyw{-moz-user-select:none}
+._1yyjkb7n{-webkit-line-clamp:1}
+._4bfu18uv{text-decoration-color:initial}
+._80omtlke{cursor:pointer}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz1y58{color:var(--ds-link,#0052cc)}
+._u5f3idpf{padding-right:0}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz4183y{line-height:21px}
+._vwz4qslr{line-height:22px}
+._1372tlke:focus{cursor:pointer}
+._1a3b18uv:focus{text-decoration-color:initial}
+._1hvw1o36:focus{outline-width:medium}
+._1j5pglyw:focus{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._49pcglyw:focus{outline-style:none}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._7ehicw00:focus{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}
+._nt751r31:focus{outline-color:currentColor}
+._bfw7h6cr:hover{border:1px solid var(--ds-border,#dfe1e6)}
+._4cvxmr28:hover{border-color:var(--ds-border-accent-blue,#2684ff)}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di629zg:active{background-color:var(--ds-background-selected,#deebff)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm18uv:active{text-decoration-color:initial}
+._c2waglyw:active{text-decoration-line:none}
+@supports not (-webkit-line-clamp:1){._17bix7n9{padding:var(--ds-space-025,2px) 0}._nr8z1o8l{display:inline-block}._102kqslr{max-height:22px}}