@atlaskit/smart-card 33.4.0 → 34.0.1

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

@@ -1,13 +1,28 @@
+/* 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.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
-
+exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["as", "style"],
+  _excluded2 = ["as", "style"],
+  _excluded3 = ["as", "style"],
+  _excluded4 = ["as", "style"],
+  _excluded5 = ["as", "style"],
+  _excluded6 = ["as", "style"],
+  _excluded7 = ["as", "style"],
+  _excluded8 = ["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; }
 // 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.
@@ -17,79 +32,147 @@ var _styled = _interopRequireDefault(require("@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
-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";
+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
-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";
+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
-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);
+var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "span" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_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
-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);
+if (process.env.NODE_ENV !== 'production') {
+  IconWrapper.displayName = 'IconWrapper';
+}
+var EmojiWrapper = exports.EmojiWrapper = (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.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-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)")
+if (process.env.NODE_ENV !== 'production') {
+  EmojiWrapper.displayName = 'EmojiWrapper';
+}
+var IconTitleWrapper = exports.IconTitleWrapper = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+  var _ref3$as = _ref3.as,
+    C = _ref3$as === void 0 ? "span" : _ref3$as,
+    __cmpls = _ref3.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-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)")
+if (process.env.NODE_ENV !== 'production') {
+  IconTitleWrapper.displayName = 'IconTitleWrapper';
+}
+var LozengeWrapper = exports.LozengeWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+  var _ref4$as = _ref4.as,
+    C = _ref4$as === void 0 ? "span" : _ref4$as,
+    __cmpls = _ref4.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span({
-  marginLeft: "var(--ds-space-025, 2px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  LozengeWrapper.displayName = 'LozengeWrapper';
+}
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+  var _ref5$as = _ref5.as,
+    C = _ref5$as === void 0 ? "span" : _ref5$as,
+    __cmpls = _ref5.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span({
-  marginRight: "var(--ds-space-050, 4px)",
-  position: 'relative',
-  display: 'inline-block'
+if (process.env.NODE_ENV !== 'production') {
+  RightIconPositionWrapper.displayName = 'RightIconPositionWrapper';
+}
+var IconPositionWrapper = exports.IconPositionWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+  var _ref6$as = _ref6.as,
+    C = _ref6$as === void 0 ? "span" : _ref6$as,
+    __cmpls = _ref6.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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
-var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span({
-  width: '16px',
-  height: '100%',
-  display: 'inline-block',
-  opacity: 0
+if (process.env.NODE_ENV !== 'production') {
+  IconPositionWrapper.displayName = 'IconPositionWrapper';
+}
+var IconEmptyWrapper = exports.IconEmptyWrapper = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+  var _ref7$as = _ref7.as,
+    C = _ref7$as === void 0 ? "span" : _ref7$as,
+    __cmpls = _ref7.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref7, _excluded7);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.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';
+}
 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({});
+var TitleWrapper = exports.TitleWrapper = (0, _react.forwardRef)(function (_ref8, __cmplr) {
+  var _ref8$as = _ref8.as,
+    C = _ref8$as === void 0 ? "span" : _ref8$as,
+    __cmpls = _ref8.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref8, _excluded8);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  TitleWrapper.displayName = 'TitleWrapper';
+}

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

@@ -11,11 +11,14 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _Frame = require("../Frame");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../IconAndTitleLayout/styled");
+var _styledEmotion = require("../IconAndTitleLayout/styled-emotion");
 var _styled2 = require("./styled");
+var _styledEmotion2 = require("./styled-emotion");
 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; })(); }
 var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
@@ -37,18 +40,33 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
         titleTextColor = _this$props.titleTextColor,
         resolvingPlaceholder = _this$props.resolvingPlaceholder,
         truncateInline = _this$props.truncateInline;
+      var SpinnerWrapperComponent = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled2.SpinnerWrapper : _styledEmotion2.SpinnerWrapper;
       if (inlinePreloaderStyle === 'on-right-without-skeleton') {
-        return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
-          withoutBackground: true,
-          testId: testId,
-          onClick: onClick,
-          isSelected: isSelected,
-          truncateInline: truncateInline
-        }, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, null, url, /*#__PURE__*/_react.default.createElement(_styled.RightIconPositionWrapper, null, /*#__PURE__*/_react.default.createElement(_styled2.SpinnerWrapper, {
-          className: "inline-resolving-spinner"
-        }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-          size: 14
-        })))));
+        if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+          return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+            withoutBackground: true,
+            testId: testId,
+            onClick: onClick,
+            isSelected: isSelected,
+            truncateInline: truncateInline
+          }, /*#__PURE__*/_react.default.createElement(_styled.IconTitleWrapper, null, url, /*#__PURE__*/_react.default.createElement(_styled.RightIconPositionWrapper, null, /*#__PURE__*/_react.default.createElement(SpinnerWrapperComponent, {
+            className: "inline-resolving-spinner"
+          }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+            size: 14
+          })))));
+        } else {
+          return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
+            withoutBackground: true,
+            testId: testId,
+            onClick: onClick,
+            isSelected: isSelected,
+            truncateInline: truncateInline
+          }, /*#__PURE__*/_react.default.createElement(_styledEmotion.IconTitleWrapper, null, url, /*#__PURE__*/_react.default.createElement(_styledEmotion.RightIconPositionWrapper, null, /*#__PURE__*/_react.default.createElement(SpinnerWrapperComponent, {
+            className: "inline-resolving-spinner"
+          }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+            size: 14
+          })))));
+        }
       } else {
         return /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
           testId: testId,
@@ -59,7 +77,7 @@ var InlineCardResolvingView = exports.InlineCardResolvingView = /*#__PURE__*/fun
         }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
           title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
           titleTextColor: titleTextColor
-        }, /*#__PURE__*/_react.default.createElement(_styled2.SpinnerWrapper, {
+        }, /*#__PURE__*/_react.default.createElement(SpinnerWrapperComponent, {
           className: "inline-resolving-spinner"
         }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
           size: 14

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

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpinnerWrapper = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _styledEmotion = require("../IconAndTitleLayout/styled-emotion");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styledEmotion.IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

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

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

@@ -1,16 +1,34 @@
+/* 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.SpinnerWrapper = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _styled2 = require("../IconAndTitleLayout/styled");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+require("./styled.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _styled = require("../IconAndTitleLayout/styled");
+var _excluded = ["as", "style"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)({
-  verticalAlign: 'text-bottom',
-  padding: '0px'
-});
+var SpinnerWrapper = exports.SpinnerWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? _styled.IconTitleWrapper : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, (0, _extends2.default)({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _s7n41ndm", __cmplp.className])
+  }));
+});
+if (process.env.NODE_ENV !== 'production') {
+  SpinnerWrapper.displayName = 'SpinnerWrapper';
+}

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

@@ -10,20 +10,33 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _useAnalyticsEvents2 = require("../../../common/analytics/generated/use-analytics-events");
 var _messages = require("../../../messages");
 var _HoverCard = require("../../HoverCard");
 var _Frame = require("../Frame");
 var _Icon = require("../Icon");
+var _IconEmotion = require("../Icon-emotion");
 var _IconAndTitleLayout = require("../IconAndTitleLayout");
 var _styled = require("../styled");
+var _styledEmotion = require("../styled-emotion");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
-var FallbackUnauthorizedIcon = /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
-  label: "error",
-  size: "small",
-  primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
-}));
+var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
+    }));
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_IconEmotion.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_lockFilled.default, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(_colors.R400, ")")
+    }));
+  }
+};
 var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref) {
   var url = _ref.url,
     id = _ref.id,
@@ -50,16 +63,29 @@ var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function I
   }, [fireEvent, onAuthorise]);
   var renderActionButton = _react.default.useCallback(function () {
     var ActionButton = (0, _withFrameStyleControl.default)(_button.default, frameRef);
-    return onAuthorise ? /*#__PURE__*/_react.default.createElement(ActionButton, {
-      spacing: "none",
-      component: _styled.IconStyledButton,
-      onClick: handleConnectAccount,
-      testId: "button-connect-account"
-    }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
-      values: {
-        context: context
-      }
-    }))) : undefined;
+    if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+      return onAuthorise ? /*#__PURE__*/_react.default.createElement(ActionButton, {
+        spacing: "none",
+        component: _styled.IconStyledButton,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))) : undefined;
+    } else {
+      return onAuthorise ? /*#__PURE__*/_react.default.createElement(ActionButton, {
+        spacing: "none",
+        component: _styledEmotion.IconStyledButton,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))) : undefined;
+    }
   }, [handleConnectAccount, onAuthorise, context]);
   var inlineCardUnauthenticatedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
     testId: testId,
@@ -67,7 +93,7 @@ var InlineCardUnauthorizedView = exports.InlineCardUnauthorizedView = function I
     ref: frameRef,
     truncateInline: truncateInline
   }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-    icon: icon ? icon : FallbackUnauthorizedIcon,
+    icon: icon ? icon : fallbackUnauthorizedIcon(),
     title: url,
     link: url,
     onClick: onClick,

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NoLinkAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+var _colors = require("@atlaskit/theme/colors");
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+// By default buttons will hide overflow and ellipsis content instead of wrapping.
+// This basically turns the button back into inline content
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var IconStyledButton = exports.IconStyledButton = _styled.default.span({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '&&&': {
+    textAlign: 'initial',
+    display: 'inline',
+    verticalAlign: 'baseline',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    borderTopLeftRadius: '0px',
+    borderBottomLeftRadius: '0px',
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    backgroundClip: 'padding-box',
+    boxDecorationBreak: 'clone'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '> span': {
+    display: 'inline',
+    overflow: 'initial',
+    textOverflow: 'initial',
+    whiteSpace: 'initial',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '> span': {
+      overflow: 'initial',
+      textOverflow: 'initial',
+      whiteSpace: 'initial'
+    }
+  }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var LinkAppearance = exports.LinkAppearance = _styled.default.a({
+  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  '&:hover': {
+    textDecoration: 'none'
+  }
+});

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

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