@atlaskit/smart-card 33.4.0 → 34.0.1

package/dist/es2019/view/InlineCard/IconAndTitleLayout/styled.js

@@ -1,5 +1,9 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // Wraps all icons represented in Inline Links. Icons have three sources/types:
 // - JSON-LD: from the generator.icon property coming back from ORS.
 // - @atlaskit/icon: for lock icons, unauthorized, etc.
@@ -9,7 +13,7 @@ import styled from '@emotion/styled';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 
 // TODO: remove this override behaviour for @atlaskit/icon-object
-export const IconObjectOverrides = `
+const IconObjectOverrides = `
   & > span {
     height: 16px;
     width: 16px;
@@ -26,7 +30,7 @@ export const IconObjectOverrides = `
 `;
 
 // TODO: remove this override behaviour for @atlaskit/icon
-export const IconOverrides = `
+const IconOverrides = `
   & > * > span {
     height: 16px;
     width: 16px;
@@ -42,73 +46,141 @@ export const IconOverrides = `
 `;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const IconWrapper = styled.span({
-  userSelect: 'none'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-IconOverrides,
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-IconObjectOverrides);
+export const IconWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_uiztglyw _17047vkz _iibf7vkz _lacastnw _1yg7idpf _15x0stnw _k9fw1ssb _1tr81ssb _q3v31ooe _1f027vkz _nbgx7vkz _4d7tstnw _o5fv1l7b _3g5ridpf _1fqgstnw _d1gw1ssb _1gx11ssb _18lx1ooe", __cmplp.className])
+  }));
+});
 
 // Wraps all emoji in Inline Links similar to icon
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const EmojiWrapper = styled.span({
-  display: 'inline-block',
-  marginRight: "var(--ds-space-025, 2px)",
-  userSelect: 'none'
-},
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-IconOverrides,
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-IconObjectOverrides);
+if (process.env.NODE_ENV !== 'production') {
+  IconWrapper.displayName = 'IconWrapper';
+}
+export const EmojiWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1o8l _2hwxv77o _uiztglyw _17047vkz _iibf7vkz _lacastnw _1yg7idpf _15x0stnw _k9fw1ssb _1tr81ssb _q3v31ooe _1f027vkz _nbgx7vkz _4d7tstnw _o5fv1l7b _3g5ridpf _1fqgstnw _d1gw1ssb _1gx11ssb _18lx1ooe", __cmplp.className])
+  }));
+});
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const IconTitleWrapper = styled.span({
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-all',
-  boxDecorationBreak: 'clone',
-  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+if (process.env.NODE_ENV !== 'production') {
+  EmojiWrapper.displayName = 'EmojiWrapper';
+}
+export const IconTitleWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_o5721jtm _1nmz9jpi _16d9qvcn _ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", __cmplp.className])
+  }));
 });
 
 // TODO: Replace overrides with proper AtlasKit solution.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LozengeWrapper = styled.span({
-  display: 'inline-block',
-  verticalAlign: '1px',
-  margin: `0 ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
+if (process.env.NODE_ENV !== 'production') {
+  IconTitleWrapper.displayName = 'IconTitleWrapper';
+}
+export const LozengeWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1e0c1o8l _s7n4t94y _19pkidpf _2hwx1b66 _otyridpf _18u0v77o", __cmplp.className])
+  }));
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const RightIconPositionWrapper = styled.span({
-  marginLeft: "var(--ds-space-025, 2px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapper.displayName = 'LozengeWrapper';
+}
+export const RightIconPositionWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_18u0v77o _kqswh2mm _1e0c1o8l", __cmplp.className])
+  }));
 });
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const IconPositionWrapper = styled.span({
-  marginRight: "var(--ds-space-050, 4px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
+}
+export const IconPositionWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2hwx1b66 _kqswh2mm _1e0c1o8l", __cmplp.className])
+  }));
 });
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const IconEmptyWrapper = styled.span({
-  width: '16px',
-  height: '100%',
-  display: 'inline-block',
-  opacity: 0
+if (process.env.NODE_ENV !== 'production') {
+  IconPositionWrapper.displayName = 'IconPositionWrapper';
+}
+export const IconEmptyWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_1bsb7vkz _4t3i1osq _1e0c1o8l _tzy4idpf", __cmplp.className])
+  }));
 });
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
+if (process.env.NODE_ENV !== 'production') {
+  IconEmptyWrapper.displayName = 'IconEmptyWrapper';
+}
 export const TitleWrapperClassName = 'smart-link-title-wrapper';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-empty-styled-expression -- Ignored via go/DSP-18766
-export const TitleWrapper = styled.span({});
+export const TitleWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  TitleWrapper.displayName = 'TitleWrapper';
+}

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

@@ -1,9 +1,12 @@
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconTitleWrapper, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
 import { SpinnerWrapper } from './styled';
+import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
 export class InlineCardResolvingView extends React.Component {
   render() {
     const {
@@ -16,18 +19,33 @@ export class InlineCardResolvingView extends React.Component {
       resolvingPlaceholder,
       truncateInline
     } = this.props;
+    const SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapper : SpinnerWrapperOld;
     if (inlinePreloaderStyle === 'on-right-without-skeleton') {
-      return /*#__PURE__*/React.createElement(Frame, {
-        withoutBackground: true,
-        testId: testId,
-        onClick: onClick,
-        isSelected: isSelected,
-        truncateInline: truncateInline
-      }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapper, {
-        className: "inline-resolving-spinner"
-      }, /*#__PURE__*/React.createElement(Spinner, {
-        size: 14
-      })))));
+      if (fg('bandicoots-compiled-migration-smartcard')) {
+        return /*#__PURE__*/React.createElement(Frame, {
+          withoutBackground: true,
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          truncateInline: truncateInline
+        }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        })))));
+      } else {
+        return /*#__PURE__*/React.createElement(Frame, {
+          withoutBackground: true,
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          truncateInline: truncateInline
+        }, /*#__PURE__*/React.createElement(IconTitleWrapperOld, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapperOld, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        })))));
+      }
     } else {
       return /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
@@ -38,7 +56,7 @@ export class InlineCardResolvingView extends React.Component {
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
         title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
         titleTextColor: titleTextColor
-      }, /*#__PURE__*/React.createElement(SpinnerWrapper, {
+      }, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
         className: "inline-resolving-spinner"
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: 14

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

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { IconTitleWrapper } from '../IconAndTitleLayout/styled-emotion';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const SpinnerWrapper = styled(IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -0,0 +1,5 @@
+._19bvidpf{padding-left:0}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._s7n41ndm{vertical-align:text-bottom}
+._u5f3idpf{padding-right:0}

package/dist/es2019/view/InlineCard/ResolvingView/styled.js

@@ -1,9 +1,23 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
+/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { IconTitleWrapper } from '../IconAndTitleLayout/styled';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const SpinnerWrapper = styled(IconTitleWrapper)({
-  verticalAlign: 'text-bottom',
-  padding: '0px'
-});
+export const SpinnerWrapper = forwardRef(({
+  as: C = IconTitleWrapper,
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n41ndm", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SpinnerWrapper.displayName = 'SpinnerWrapper';
+}

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

@@ -3,20 +3,33 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 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';
-const FallbackUnauthorizedIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: `var(--ds-icon-danger, ${R400})`
-}));
+const fallbackUnauthorizedIcon = () => {
+  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})`
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: `var(--ds-icon-danger, ${R400})`
+    }));
+  }
+};
 export const InlineCardUnauthorizedView = ({
   url,
   id,
@@ -43,16 +56,29 @@ export const InlineCardUnauthorizedView = ({
   }, [fireEvent, onAuthorise]);
   const renderActionButton = React.useCallback(() => {
     const ActionButton = withFrameStyleControl(Button, frameRef);
-    return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
-      spacing: "none",
-      component: IconStyledButton,
-      onClick: handleConnectAccount,
-      testId: "button-connect-account"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-      values: {
-        context
-      }
-    }))) : undefined;
+    if (fg('bandicoots-compiled-migration-smartcard')) {
+      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButton,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context
+        }
+      }))) : undefined;
+    } else {
+      return onAuthorise ? /*#__PURE__*/React.createElement(ActionButton, {
+        spacing: "none",
+        component: IconStyledButtonOld,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context
+        }
+      }))) : undefined;
+    }
   }, [handleConnectAccount, onAuthorise, context]);
   const inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
     testId: testId,
@@ -60,7 +86,7 @@ export const InlineCardUnauthorizedView = ({
     ref: frameRef,
     truncateInline: truncateInline
   }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-    icon: icon ? icon : FallbackUnauthorizedIcon,
+    icon: icon ? icon : fallbackUnauthorizedIcon(),
     title: url,
     link: url,
     onClick: onClick,

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

@@ -0,0 +1,47 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { B400, N200 } from '@atlaskit/theme/colors';
+// 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
+export const IconStyledButton = styled.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)"} ${"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
+export const NoLinkAppearance = styled.span({
+  color: `var(--ds-text-subtlest, ${N200})`,
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const LinkAppearance = styled.a({
+  color: `var(--ds-link, ${B400})`,
+  '&:hover': {
+    textDecoration: 'none'
+  }
+});

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

@@ -0,0 +1,21 @@
+
+._i3j7iti9._i3j7iti9._i3j7iti9{border-radius:var(--ds-border-radius-100,4px)}._12rl18uv >span>span{overflow-x:initial}
+._1695v77o._1695v77o._1695v77o{padding-top:var(--ds-space-025,2px)}
+._18v918uv._18v918uv._18v918uv{vertical-align:initial}
+._1a8r4jg8 >span>span{white-space:normal}
+._1byq12x7._1byq12x7._1byq12x7{padding-left:var(--ds-space-075,6px)}
+._1ilx1nu9._1ilx1nu9._1ilx1nu9{display:inline}
+._1jjh4jg8 >span{white-space:normal}
+._1nr3zryt >span>span{text-overflow:clip}
+._1pns12x7._1pns12x7._1pns12x7{padding-right:var(--ds-space-075,6px)}
+._1t1midpf._1t1midpf._1t1midpf{border-top-left-radius:0}
+._1t21zryt >span{text-overflow:clip}
+._1wge18uv >span>span{overflow-y:initial}
+._1xdi1nu9 >span{display:inline}
+._5x9bqvcn._5x9bqvcn._5x9bqvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._jinwidpf._jinwidpf._jinwidpf{border-bottom-left-radius:0}
+._ju3g18uv >span{overflow-x:initial}
+._k1fv1u8q._k1fv1u8q._k1fv1u8q{background-clip:padding-box}
+._mt1t18uv >span{overflow-y:initial}
+._uqpc18uv._uqpc18uv._uqpc18uv{text-align:initial}
+._vktqv77o._vktqv77o._vktqv77o{padding-bottom:var(--ds-space-025,2px)}

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

@@ -1,47 +1,23 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
-import { B400, N200 } from '@atlaskit/theme/colors';
+/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./styled.compiled.css";
+import { forwardRef } from 'react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // 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
-export const IconStyledButton = styled.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)"} ${"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'
-    }
-  }
+export const IconStyledButton = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: 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
-export const NoLinkAppearance = styled.span({
-  color: `var(--ds-text-subtlest, ${N200})`,
-  marginLeft: "var(--ds-space-050, 4px)"
-});
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const LinkAppearance = styled.a({
-  color: `var(--ds-link, ${B400})`,
-  '&:hover': {
-    textDecoration: 'none'
-  }
-});
+if (process.env.NODE_ENV !== 'production') {
+  IconStyledButton.displayName = 'IconStyledButton';
+}

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "33.4.0",
+  packageVersion: "34.0.1",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

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

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

@@ -15,6 +15,7 @@ export var 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/esm/view/EmbedModal/components/link-info/styled.js

@@ -54,9 +54,11 @@ export var 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/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -29,6 +29,7 @@ var getButtonStyle = function 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 ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
       });

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

@@ -28,15 +28,18 @@ var 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
 var 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
   }
 });
 var newStackItemIconStyles = css({
   display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0
 });
 var ActionIcon = function ActionIcon(_ref) {

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

@@ -7,6 +7,7 @@ var 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/esm/view/FlexibleCard/components/blocks/action-group/index.js

@@ -25,6 +25,7 @@ import { filterActionItems } from '../utils';
 import ActionGroupItem from './action-group-item';
 var 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': {