@atlaskit/smart-card 33.4.0 → 34.0.1

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

@@ -1,135 +1,60 @@
+/* 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.WrapperSpan = exports.WrapperAnchor = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+require("./styled.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
 var _colors = require("@atlaskit/theme/colors");
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _excluded = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"],
+  _excluded2 = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"];
+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; }
 var lineHeight = 22;
-var selectedStyles = {
-  cursor: 'pointer',
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, ".concat(_colors.B100, ")")),
-  outline: 'none',
-  userSelect: 'none',
-  '&, :hover, :focus, :active': {
-    textDecoration: 'none'
-  },
-  '&:hover': {
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
-  }
-};
-var isInteractive = function isInteractive(_ref) {
-  var isInteractive = _ref.isInteractive;
-  if (isInteractive) {
-    return {
-      ':active': {
-        backgroundColor: "var(--ds-background-selected, ".concat(_colors.B50, ")")
-      },
-      ':focus': selectedStyles
-    };
-  }
-  return undefined;
-};
-var isSelected = function isSelected(_ref2) {
-  var isSelected = _ref2.isSelected;
-  if (isSelected) {
-    return selectedStyles;
-  } else {
-    return {
-      userSelect: 'text'
-    };
-  }
-};
-var hoveredStyles = {
-  borderColor: "var(--ds-border-accent-blue, ".concat(_colors.B200, ")")
-};
-var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
-  if (props.withoutBackground) {
-    return undefined;
-  }
-  return {
-    textDecoration: 'none'
-  };
-};
-var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
-  return _objectSpread(_objectSpread({}, 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.
-var baseWrapperStyles = function baseWrapperStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    lineHeight: "".concat(lineHeight, "px"),
-    padding: "var(--ds-space-025, 2px)".concat(" 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, ".concat(_colors.B400, ")")
-  }, props.withoutBackground ? undefined : {
-    backgroundColor: "var(--ds-surface-raised, white)"
-  }), isSelected(props)), props.withoutBackground ? undefined : {
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")"))
-  }), {}, {
-    '&:hover': hoveredStyles,
-    '&, :hover, :focus, :active': activeHoveredFocusedStyles(props),
-    transition: '0.1s all ease-in-out',
-    MozUserSelect: 'none'
-  }, props.isHovered ? hoveredWihBorderStyles(props) : undefined);
-};
-var 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: "".concat(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: "".concat(lineHeight, "px"),
-    // If the browser does not support webkit, we don't need to remove the padding
-    padding: "var(--ds-space-025, 2px)".concat(" 0px")
-  }
-};
-var isTruncated = function isTruncated(_ref3) {
-  var truncateInline = _ref3.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
-var WrapperAnchor = exports.WrapperAnchor = _styled.default.a(function (props) {
-  return _objectSpread(_objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props)), isTruncated(props));
+var WrapperSpan = exports.WrapperSpan = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var truncateInline = _ref.truncateInline,
+    withoutBackground = _ref.withoutBackground,
+    isHovered = _ref.isHovered,
+    isInteractive = _ref.isInteractive,
+    isSelected = _ref.isSelected,
+    href = _ref.href,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+    ref: ref
+  }, props, {
+    className: (0, _runtime.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);
 });
-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
-var WrapperSpan = exports.WrapperSpan = _styled.default.span(function (props) {
-  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isTruncated(props));
+var WrapperAnchor = exports.WrapperAnchor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var truncateInline = _ref2.truncateInline,
+    withoutBackground = _ref2.withoutBackground,
+    isHovered = _ref2.isHovered,
+    isInteractive = _ref2.isInteractive,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({
+    href: href,
+    ref: ref
+  }, props, {
+    className: (0, _runtime.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);
 });
-WrapperSpan.displayName = 'WrapperSpan';
+var baseWrapperStyles = null;
+
+// if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
+var interactiveStyles = null;
+var hoveredStyles = null;
+var hoveredWithBackgroundStyles = null;
+var withoutBackgroundStyles = null;
+var withBackgroundStyles = null;
+var truncateStyles = null;
+var notSelectedStyle = null;
+var selectedStyles = null;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _linkingCommon = require("@atlaskit/linking-common");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// 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
+var Icon = exports.Icon = _styled.default.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
+var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-negative-025, -2px)"
+});
+var Shimmer = exports.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.default.createElement(_linkingCommon.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/cjs/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/cjs/view/InlineCard/Icon.js

@@ -1,42 +1,63 @@
+/* Icon.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.Shimmer = exports.Icon = exports.AKIconWrapper = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _styled = _interopRequireDefault(require("@emotion/styled"));
+require("./Icon.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _linkingCommon = require("@atlaskit/linking-common");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+var _excluded = ["as", "style"],
+  _excluded2 = ["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; }
 // 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
-var Icon = exports.Icon = _styled.default.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%)'
+var Icon = exports.Icon = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "img" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-var AKIconWrapper = exports.AKIconWrapper = _styled.default.span({
-  marginRight: "var(--ds-space-negative-025, -2px)"
+if (process.env.NODE_ENV !== 'production') {
+  Icon.displayName = 'Icon';
+}
+var AKIconWrapper = exports.AKIconWrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "span" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_2hwx1i6y", __cmplp.className])
+  }));
 });
-var Shimmer = exports.Shimmer = function Shimmer(_ref) {
-  var testId = _ref.testId;
+if (process.env.NODE_ENV !== 'production') {
+  AKIconWrapper.displayName = 'AKIconWrapper';
+}
+var Shimmer = exports.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/cjs/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/cjs/view/InlineCard/IconAndTitleLayout/index.js

@@ -1,24 +1,68 @@
+/* index.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.IconAndTitleLayout = void 0;
+require("./index.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
 var _Icon = require("../Icon");
-var _styled = require("../styled");
-var _styled2 = require("./styled");
+var _styledEmotion = require("../styled-emotion");
+var _styled = require("./styled");
+var _styledEmotion2 = require("./styled-emotion");
+var _excluded = ["as", "style"],
+  _excluded2 = ["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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled -- Ignored via go/DSP-18766
+var NoLinkAppearance = (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.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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 = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+  var _ref2$as = _ref2.as,
+    C = _ref2$as === void 0 ? "a" : _ref2$as,
+    __cmpls = _ref2.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  return /*#__PURE__*/_react.default.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_syaz1y58 _9oik18uv _1bnxglyw _jf4cnqa1", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  LinkAppearance.displayName = 'LinkAppearance';
+}
 var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_React$Component) {
   function IconAndTitleLayout() {
     var _this;
@@ -56,12 +100,12 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         icon = _this$props.icon,
         emoji = _this$props.emoji;
       if (emoji) {
-        return /*#__PURE__*/_react.default.createElement(_styled2.EmojiWrapper, null, emoji);
+        return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.EmojiWrapper, null, emoji) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.EmojiWrapper, null, emoji);
       }
       if (!icon || typeof icon === 'string') {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_styled2.IconWrapper, null, icon);
+      return (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, icon) : /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconWrapper, null, icon);
     }
   }, {
     key: "renderImageIcon",
@@ -90,9 +134,9 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
     value: function renderIconPlaceholder(testId) {
       var defaultIcon = this.props.defaultIcon;
       if (defaultIcon) {
-        return /*#__PURE__*/_react.default.createElement(_styled2.IconWrapper, null, defaultIcon);
+        return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, defaultIcon);
       }
-      return /*#__PURE__*/_react.default.createElement(_styled2.IconWrapper, null, /*#__PURE__*/_react.default.createElement(_link.default, {
+      return /*#__PURE__*/_react.default.createElement(_styled.IconWrapper, null, /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "link",
         LEGACY_size: "small",
         testId: "".concat(testId, "-default"),
@@ -126,11 +170,11 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.IconPositionWrapper, {
+      var titlePart = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconPositionWrapper, {
         "data-testid": "icon-position-wrapper"
-      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled2.IconEmptyWrapper, {
+      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.IconEmptyWrapper, {
         "data-testid": "icon-empty-wrapper"
-      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled2.TitleWrapper
+      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       , {
         style: {
@@ -138,22 +182,52 @@ var IconAndTitleLayout = exports.IconAndTitleLayout = /*#__PURE__*/function (_Re
         }
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         ,
-        className: _styled2.TitleWrapperClassName
+        className: _styled.TitleWrapperClassName
+      }, title)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconPositionWrapper, {
+        "data-testid": "icon-position-wrapper"
+      }, children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styledEmotion2.IconEmptyWrapper, {
+        "data-testid": "icon-empty-wrapper"
+      }), this.renderIcon(testId))), /*#__PURE__*/_react.default.createElement(_styledEmotion2.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: _styled.TitleWrapperClassName
       }, title));
-      return (
-        /*#__PURE__*/
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        _react.default.createElement(_styled2.IconTitleWrapper, {
-          style: {
-            color: titleColor
-          },
-          "data-testid": testId
-        }, link ? /*#__PURE__*/_react.default.createElement(_styled.LinkAppearance, {
-          href: link,
-          onClick: this.handleClick,
-          onKeyPress: this.handleKeyPress
-        }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styled.NoLinkAppearance, null, rightSide) : null)
-      );
+      if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+        return (
+          /*#__PURE__*/
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          _react.default.createElement(_styled.IconTitleWrapper, {
+            style: {
+              color: titleColor
+            },
+            "data-testid": testId
+          }, link ? /*#__PURE__*/_react.default.createElement(LinkAppearance, {
+            href: link,
+            onClick: this.handleClick,
+            onKeyPress: this.handleKeyPress
+          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.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.default.createElement(_styledEmotion2.IconTitleWrapper, {
+            style: {
+              color: titleColor
+            },
+            "data-testid": testId
+          }, link ? /*#__PURE__*/_react.default.createElement(_styledEmotion.LinkAppearance, {
+            href: link,
+            onClick: this.handleClick,
+            onKeyPress: this.handleKeyPress
+          }, titlePart) : titlePart, rightSide ? /*#__PURE__*/_react.default.createElement(_styledEmotion.NoLinkAppearance, null, rightSide) : null)
+        );
+      }
     }
   }]);
 }(_react.default.Component);

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

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// 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
+var IconObjectOverrides = exports.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
+var IconOverrides = exports.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
+var IconWrapper = exports.IconWrapper = _styled.default.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
+var EmojiWrapper = exports.EmojiWrapper = _styled.default.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
+var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.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
+var LozengeWrapper = exports.LozengeWrapper = _styled.default.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
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.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
+var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.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
+var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.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.
+var TitleWrapperClassName = exports.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
+var TitleWrapper = exports.TitleWrapper = _styled.default.span({});