@atlaskit/smart-card 33.4.0 → 34.0.1

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

@@ -1,141 +1,49 @@
-// 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 { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
 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)
+export const WrapperSpan = /*#__PURE__*/forwardRef(({
+  truncateInline,
+  withoutBackground,
+  isHovered,
+  isInteractive,
+  isSelected,
+  href,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, props, {
+    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+  }), props.children);
 });
-
-/*
-  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 => ({
-  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)
+export const WrapperAnchor = /*#__PURE__*/forwardRef(({
+  truncateInline,
+  withoutBackground,
+  isHovered,
+  isInteractive,
+  isSelected,
+  href,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href,
+    ref: ref
+  }, props, {
+    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
+  }), props.children);
 });
-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.
-  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';
+const baseWrapperStyles = null;
 
-// 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';
+// if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
+const interactiveStyles = null;
+const hoveredStyles = null;
+const hoveredWithBackgroundStyles = null;
+const withoutBackgroundStyles = null;
+const withBackgroundStyles = null;
+const truncateStyles = null;
+const notSelectedStyle = null;
+const selectedStyles = null;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import { SpanSkeleton } from '@atlaskit/linking-common';
+// TODO: Figure out a more scalable/responsive solution
+// for vertical alignment.
+// Current rationale: vertically positioned at the top of
+// the smart card container (when set to 0). Offset this
+// to position it with appropriate whitespace from the top.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const Icon = styled.img({
+  height: '16px',
+  width: '16px',
+  marginRight: "var(--ds-space-050, 4px)",
+  borderRadius: '2px',
+  userSelect: 'none',
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)'
+});
+
+// Used for 'untrue' icons which claim to be 16x16 but
+// are less than that in height/width.
+// TODO: Replace this override 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 AKIconWrapper = styled.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
+export const Shimmer = ({
+  testId
+}) => {
+  const skeletonCustomStyles = {
+    position: 'absolute',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    top: '50%',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    marginRight: "var(--ds-space-050, 4px)"
+  };
+  return /*#__PURE__*/React.createElement(SpanSkeleton, {
+    width: 16,
+    height: 16,
+    borderRadius: 2,
+    testId: testId
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
+    style: skeletonCustomStyles
+  });
+};

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

@@ -0,0 +1,10 @@
+
+._2rkoyh40{border-radius:2px}._154i1ssb{top:50%}
+._1bsb7vkz{width:1pc}
+._1ltv1ssb{left:50%}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}
+._4t3i7vkz{height:1pc}
+._kqswstnw{position:absolute}
+._t9ec1ooe{transform:translate(-50%,-50%)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}

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

@@ -1,7 +1,9 @@
+/* Icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./Icon.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
 import { SpanSkeleton } from '@atlaskit/linking-common';
 // TODO: Figure out a more scalable/responsive solution
 // for vertical alignment.
@@ -9,25 +11,39 @@ import { SpanSkeleton } from '@atlaskit/linking-common';
 // the smart card container (when set to 0). Offset this
 // to position it with appropriate whitespace from the top.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const Icon = styled.img({
-  height: '16px',
-  width: '16px',
-  marginRight: "var(--ds-space-050, 4px)",
-  borderRadius: '2px',
-  userSelect: 'none',
-  position: 'absolute',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)'
+export const Icon = forwardRef(({
+  as: C = "img",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2rkoyh40 _4t3i7vkz _1bsb7vkz _2hwx1b66 _uiztglyw _kqswstnw _154i1ssb _1ltv1ssb _t9ec1ooe", __cmplp.className])
+  }));
 });
 
 // Used for 'untrue' icons which claim to be 16x16 but
 // are less than that in height/width.
 // TODO: Replace this override 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 AKIconWrapper = styled.span({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'Icon';
+}
+export const AKIconWrapper = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2hwx1i6y", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  AKIconWrapper.displayName = 'AKIconWrapper';
+}
 export const Shimmer = ({
   testId
 }) => {

package/dist/es2019/view/InlineCard/IconAndTitleLayout/index.compiled.css

@@ -0,0 +1,6 @@
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._syaz1wmz{color:var(--ds-text-subtlest,#6b778c)}
+._syaz1y58{color:var(--ds-link,#0052cc)}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}

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

@@ -1,10 +1,49 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { B400, N200 } from '@atlaskit/theme/colors';
 import { Icon, Shimmer } from '../Icon';
-import { LinkAppearance, NoLinkAppearance } from '../styled';
+import { LinkAppearance as LinkAppearanceOld, NoLinkAppearance as NoLinkAppearanceOld } from '../styled-emotion';
 import { EmojiWrapper, IconEmptyWrapper, IconPositionWrapper, IconTitleWrapper, IconWrapper, TitleWrapper, TitleWrapperClassName } from './styled';
+import { EmojiWrapper as EmojiWrapperOld, IconEmptyWrapper as IconEmptyWrapperOld, IconPositionWrapper as IconPositionWrapperOld, IconTitleWrapper as IconTitleWrapperOld, IconWrapper as IconWrapperOld, TitleWrapper as TitleWrapperOld } from './styled-emotion';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
+const NoLinkAppearance = forwardRef(({
+  as: C = "span",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_syaz1wmz _18u01b66", __cmplp.className])
+  }));
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
+if (process.env.NODE_ENV !== 'production') {
+  NoLinkAppearance.displayName = 'NoLinkAppearance';
+}
+const LinkAppearance = forwardRef(({
+  as: C = "a",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_syaz1y58 _9oik18uv _1bnxglyw _jf4cnqa1", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  LinkAppearance.displayName = 'LinkAppearance';
+}
 export class IconAndTitleLayout extends React.Component {
   constructor(...args) {
     super(...args);
@@ -38,12 +77,12 @@ export class IconAndTitleLayout extends React.Component {
       emoji
     } = this.props;
     if (emoji) {
-      return /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji);
+      return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(EmojiWrapper, null, emoji) : /*#__PURE__*/React.createElement(EmojiWrapperOld, null, emoji);
     }
     if (!icon || typeof icon === 'string') {
       return null;
     }
-    return /*#__PURE__*/React.createElement(IconWrapper, null, icon);
+    return fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(IconWrapper, null, icon) : /*#__PURE__*/React.createElement(IconWrapperOld, null, icon);
   }
   renderImageIcon(errored, testId) {
     const {
@@ -104,12 +143,25 @@ export class IconAndTitleLayout extends React.Component {
       rightSide,
       testId = 'inline-card-icon-and-title'
     } = this.props;
-    const titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
+    const titlePart = fg('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
       "data-testid": "icon-position-wrapper"
     }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapper, {
       "data-testid": "icon-empty-wrapper"
     }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    , {
+      style: {
+        color: titleTextColor
+      }
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: TitleWrapperClassName
+    }, title)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapperOld, {
+      "data-testid": "icon-position-wrapper"
+    }, children || /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconEmptyWrapperOld, {
+      "data-testid": "icon-empty-wrapper"
+    }), this.renderIcon(testId))), /*#__PURE__*/React.createElement(TitleWrapperOld
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     , {
       style: {
         color: titleTextColor
@@ -118,20 +170,37 @@ export class IconAndTitleLayout extends React.Component {
       ,
       className: TitleWrapperClassName
     }, title));
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      React.createElement(IconTitleWrapper, {
-        style: {
-          color: titleColor
-        },
-        "data-testid": testId
-      }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
-        href: link,
-        onClick: this.handleClick,
-        onKeyPress: this.handleKeyPress
-      }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
-    );
+    if (fg('bandicoots-compiled-migration-smartcard')) {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement(IconTitleWrapper, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/React.createElement(LinkAppearance, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearance, null, rightSide) : null)
+      );
+    } else {
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        React.createElement(IconTitleWrapperOld, {
+          style: {
+            color: titleColor
+          },
+          "data-testid": testId
+        }, link ? /*#__PURE__*/React.createElement(LinkAppearanceOld, {
+          href: link,
+          onClick: this.handleClick,
+          onKeyPress: this.handleKeyPress
+        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/React.createElement(NoLinkAppearanceOld, null, rightSide) : null)
+      );
+    }
   }
 }
 _defineProperty(IconAndTitleLayout, "defaultProps", {

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

@@ -0,0 +1,114 @@
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+// 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.
+// - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
+// NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
+// NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
+// 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 = `
+  & > span {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    top: 3px;
+    left: 0;
+    & > svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+
+// TODO: remove this override behaviour for @atlaskit/icon
+export const IconOverrides = `
+  & > * > span {
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    left: 0;
+    & > svg {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+`;
+
+// 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);
+
+// 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);
+
+// 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)"}`
+});
+
+// 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)"}`
+});
+
+// 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'
+});
+
+// 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'
+});
+
+// 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
+});
+
+// With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
+// To achieve same result we use classname instead.
+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({});

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

@@ -0,0 +1,36 @@
+._15x0stnw>*>span>svg{position:absolute}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._17047vkz>*>span{height:1pc}
+._18lx1ooe>span>svg{transform:translate(-50%,-50%)}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bv1b66{padding-left:var(--ds-space-050,4px)}
+._19pkidpf{margin-top:0}
+._1bsb7vkz{width:1pc}
+._1e0c1o8l{display:inline-block}
+._1f027vkz>span{height:1pc}
+._1fqgstnw>span>svg{position:absolute}
+._1gx11ssb>span>svg{left:50%}
+._1nmz9jpi{word-break:break-all}
+._1tr81ssb>*>span>svg{left:50%}
+._1yg7idpf>*>span{left:0}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._3g5ridpf>span{left:0}
+._4d7tstnw>span{position:absolute}
+._4t3i1osq{height:100%}
+._ca0qv77o{padding-top:var(--ds-space-025,2px)}
+._d1gw1ssb>span>svg{top:50%}
+._iibf7vkz>*>span{width:1pc}
+._k9fw1ssb>*>span>svg{top:50%}
+._kqswh2mm{position:relative}
+._lacastnw>*>span{position:absolute}
+._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
+._nbgx7vkz>span{width:1pc}
+._o5721jtm{white-space:pre-wrap}
+._o5fv1l7b>span{top:3px}
+._otyridpf{margin-bottom:0}
+._q3v31ooe>*>span>svg{transform:translate(-50%,-50%)}
+._s7n4t94y{vertical-align:1px}
+._tzy4idpf{opacity:0}
+._u5f31b66{padding-right:var(--ds-space-050,4px)}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}