@atlaskit/smart-card 33.4.0 → 34.0.1

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

@@ -0,0 +1,51 @@
+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 var 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 var AKIconWrapper = styled.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
+export var Shimmer = function Shimmer(_ref) {
+  var testId = _ref.testId;
+  var 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/esm/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/esm/view/InlineCard/Icon.js

@@ -1,7 +1,12 @@
+/* Icon.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"];
+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,27 +14,41 @@ 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 var 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 var Icon = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "img" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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 var AKIconWrapper = styled.span({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'Icon';
+}
+export var AKIconWrapper = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "span" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_2hwx1i6y", __cmplp.className])
+  }));
 });
-export var Shimmer = function Shimmer(_ref) {
-  var testId = _ref.testId;
+if (process.env.NODE_ENV !== 'production') {
+  AKIconWrapper.displayName = 'AKIconWrapper';
+}
+export var Shimmer = function Shimmer(_ref3) {
+  var testId = _ref3.testId;
   var skeletonCustomStyles = {
     position: 'absolute',
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

package/dist/esm/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/esm/view/InlineCard/IconAndTitleLayout/index.js

@@ -1,17 +1,59 @@
+/* index.tsx generated by @compiled/babel-plugin v0.35.0 */
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"];
+import "./index.compiled.css";
+import { forwardRef } from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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
+var NoLinkAppearance = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "span" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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';
+}
+var LinkAppearance = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "a" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  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 var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   function IconAndTitleLayout() {
     var _this;
@@ -49,12 +91,12 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         icon = _this$props.icon,
         emoji = _this$props.emoji;
       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);
     }
   }, {
     key: "renderImageIcon",
@@ -119,12 +161,25 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
         rightSide = _this$props2.rightSide,
         _this$props2$testId = _this$props2.testId,
         testId = _this$props2$testId === void 0 ? 'inline-card-icon-and-title' : _this$props2$testId;
-      var titlePart = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPositionWrapper, {
+      var 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
@@ -133,20 +188,37 @@ export var IconAndTitleLayout = /*#__PURE__*/function (_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)
+        );
+      }
     }
   }]);
 }(React.Component);

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

@@ -0,0 +1,87 @@
+// 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 var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+
+// TODO: remove this override behaviour for @atlaskit/icon
+export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var 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 var 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 var IconTitleWrapper = styled.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "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 var LozengeWrapper = styled.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: "0 ".concat("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 var 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 var 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 var 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 var 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 var TitleWrapper = styled.span({});

package/dist/esm/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}

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

@@ -1,5 +1,18 @@
-// 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 _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"],
+  _excluded6 = ["as", "style"],
+  _excluded7 = ["as", "style"],
+  _excluded8 = ["as", "style"];
+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,79 +22,147 @@ 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 var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+var IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 
 // TODO: remove this override behaviour for @atlaskit/icon
-export var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
+var IconOverrides = "\n  & > * > span {\n    height: 16px;\n    width: 16px;\n    position: absolute;\n    left: 0;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var 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 var IconWrapper = forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "span" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  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 var 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 var EmojiWrapper = forwardRef(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "span" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = _objectWithoutProperties(_ref2, _excluded2);
+  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 var IconTitleWrapper = styled.span({
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-all',
-  boxDecorationBreak: 'clone',
-  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+if (process.env.NODE_ENV !== 'production') {
+  EmojiWrapper.displayName = 'EmojiWrapper';
+}
+export var IconTitleWrapper = forwardRef(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "span" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = _objectWithoutProperties(_ref3, _excluded3);
+  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 var LozengeWrapper = styled.span({
-  display: 'inline-block',
-  verticalAlign: '1px',
-  margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
+if (process.env.NODE_ENV !== 'production') {
+  IconTitleWrapper.displayName = 'IconTitleWrapper';
+}
+export var LozengeWrapper = forwardRef(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "span" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = _objectWithoutProperties(_ref4, _excluded4);
+  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 var RightIconPositionWrapper = styled.span({
-  marginLeft: "var(--ds-space-025, 2px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapper.displayName = 'LozengeWrapper';
+}
+export var RightIconPositionWrapper = forwardRef(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "span" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = _objectWithoutProperties(_ref5, _excluded5);
+  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 var IconPositionWrapper = styled.span({
-  marginRight: "var(--ds-space-050, 4px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
+}
+export var IconPositionWrapper = forwardRef(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "span" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = _objectWithoutProperties(_ref6, _excluded6);
+  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 var IconEmptyWrapper = styled.span({
-  width: '16px',
-  height: '100%',
-  display: 'inline-block',
-  opacity: 0
+if (process.env.NODE_ENV !== 'production') {
+  IconPositionWrapper.displayName = 'IconPositionWrapper';
+}
+export var IconEmptyWrapper = forwardRef(function (_ref7, __cmplr) {
+  var _ref7$as = _ref7.as,
+    C = _ref7$as === void 0 ? "span" : _ref7$as,
+    __cmpls = _ref7.style,
+    __cmplp = _objectWithoutProperties(_ref7, _excluded7);
+  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 var 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 var TitleWrapper = styled.span({});
+export var TitleWrapper = forwardRef(function (_ref8, __cmplr) {
+  var _ref8$as = _ref8.as,
+    C = _ref8$as === void 0 ? "span" : _ref8$as,
+    __cmpls = _ref8.style,
+    __cmplp = _objectWithoutProperties(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  TitleWrapper.displayName = 'TitleWrapper';
+}