@atlaskit/smart-card 34.7.0 → 34.9.0

package/dist/esm/view/InlineCard/ResolvingView/InlineCardResolvingViewOld.js

@@ -0,0 +1,85 @@
+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";
+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 { fg } from '@atlaskit/platform-feature-flags';
+import Spinner from '@atlaskit/spinner';
+import { Frame } from '../Frame';
+import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
+import { RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
+import { SpinnerWrapperOldVisualRefresh } from './styled';
+import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
+export var InlineCardResolvingViewOld = /*#__PURE__*/function (_React$Component) {
+  function InlineCardResolvingViewOld() {
+    _classCallCheck(this, InlineCardResolvingViewOld);
+    return _callSuper(this, InlineCardResolvingViewOld, arguments);
+  }
+  _inherits(InlineCardResolvingViewOld, _React$Component);
+  return _createClass(InlineCardResolvingViewOld, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        onClick = _this$props.onClick,
+        isSelected = _this$props.isSelected,
+        inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
+        _this$props$testId = _this$props.testId,
+        testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
+        titleTextColor = _this$props.titleTextColor,
+        resolvingPlaceholder = _this$props.resolvingPlaceholder,
+        truncateInline = _this$props.truncateInline;
+      var SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapperOldVisualRefresh : SpinnerWrapperOld;
+      if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+        if (fg('bandicoots-compiled-migration-smartcard')) {
+          return /*#__PURE__*/React.createElement(Frame, {
+            withoutBackground: true,
+            testId: testId,
+            onClick: onClick,
+            isSelected: isSelected,
+            truncateInline: truncateInline
+          }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+            size: 14
+          }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+            className: "inline-resolving-spinner"
+          }, /*#__PURE__*/React.createElement(Spinner, {
+            size: 14
+          }))))));
+        } else {
+          return /*#__PURE__*/React.createElement(Frame, {
+            withoutBackground: true,
+            testId: testId,
+            onClick: onClick,
+            isSelected: isSelected,
+            truncateInline: truncateInline
+          }, /*#__PURE__*/React.createElement(IconTitleWrapperOld, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapperOld, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+            className: "inline-resolving-spinner"
+          }, /*#__PURE__*/React.createElement(Spinner, {
+            size: 14
+          })))));
+        }
+      } else {
+        return /*#__PURE__*/React.createElement(Frame, {
+          testId: testId,
+          onClick: onClick,
+          isSelected: isSelected,
+          link: url,
+          truncateInline: truncateInline
+        }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+          title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
+          titleTextColor: titleTextColor
+        }, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
+          className: "inline-resolving-spinner"
+        }, /*#__PURE__*/React.createElement(Spinner, {
+          size: 14
+        })))));
+      }
+    }
+  }]);
+}(React.Component);

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

@@ -1,86 +1,56 @@
-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";
-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 { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { Frame } from '../Frame';
 import { IconAndTitleLayout, IconTitleWrapper } from '../IconAndTitleLayout';
-import { IconTitleWrapperOldVisualRefresh, RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
-import { IconTitleWrapper as IconTitleWrapperOld, RightIconPositionWrapper as RightIconPositionWrapperOld } from '../IconAndTitleLayout/styled-emotion';
+import { RightIconPositionWrapper } from '../IconAndTitleLayout/styled';
+import { InlineCardResolvingViewOld } from './InlineCardResolvingViewOld';
 import { SpinnerWrapperOldVisualRefresh } from './styled';
-import { SpinnerWrapper as SpinnerWrapperOld } from './styled-emotion';
-export var InlineCardResolvingView = /*#__PURE__*/function (_React$Component) {
-  function InlineCardResolvingView() {
-    _classCallCheck(this, InlineCardResolvingView);
-    return _callSuper(this, InlineCardResolvingView, arguments);
+var InlineCardResolvingViewNew = function InlineCardResolvingViewNew(_ref) {
+  var url = _ref.url,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    inlinePreloaderStyle = _ref.inlinePreloaderStyle,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-resolving-view' : _ref$testId,
+    titleTextColor = _ref.titleTextColor,
+    resolvingPlaceholder = _ref.resolvingPlaceholder,
+    truncateInline = _ref.truncateInline;
+  var renderSpinner = React.useCallback(function () {
+    return fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
+      size: 14
+    }) :
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    React.createElement(SpinnerWrapperOldVisualRefresh, {
+      className: "inline-resolving-spinner"
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: 14
+    }));
+  }, []);
+  if (inlinePreloaderStyle === 'on-right-without-skeleton') {
+    return /*#__PURE__*/React.createElement(Frame, {
+      withoutBackground: true,
+      testId: testId,
+      onClick: onClick,
+      isSelected: isSelected,
+      truncateInline: truncateInline
+    }, /*#__PURE__*/React.createElement(IconTitleWrapper, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, renderSpinner())));
   }
-  _inherits(InlineCardResolvingView, _React$Component);
-  return _createClass(InlineCardResolvingView, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        url = _this$props.url,
-        onClick = _this$props.onClick,
-        isSelected = _this$props.isSelected,
-        inlinePreloaderStyle = _this$props.inlinePreloaderStyle,
-        _this$props$testId = _this$props.testId,
-        testId = _this$props$testId === void 0 ? 'inline-card-resolving-view' : _this$props$testId,
-        titleTextColor = _this$props.titleTextColor,
-        resolvingPlaceholder = _this$props.resolvingPlaceholder,
-        truncateInline = _this$props.truncateInline;
-      var SpinnerWrapperComponent = fg('bandicoots-compiled-migration-smartcard') ? SpinnerWrapperOldVisualRefresh : SpinnerWrapperOld;
-      var IconTitleWrapperFFed = fg('platform-linking-visual-refresh-v1') ? IconTitleWrapper : IconTitleWrapperOldVisualRefresh;
-      if (inlinePreloaderStyle === 'on-right-without-skeleton') {
-        if (fg('bandicoots-compiled-migration-smartcard')) {
-          return /*#__PURE__*/React.createElement(Frame, {
-            withoutBackground: true,
-            testId: testId,
-            onClick: onClick,
-            isSelected: isSelected,
-            truncateInline: truncateInline
-          }, /*#__PURE__*/React.createElement(IconTitleWrapperFFed, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapper, null, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
-            size: 14
-          }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
-            className: "inline-resolving-spinner"
-          }, /*#__PURE__*/React.createElement(Spinner, {
-            size: 14
-          }))))));
-        } else {
-          return /*#__PURE__*/React.createElement(Frame, {
-            withoutBackground: true,
-            testId: testId,
-            onClick: onClick,
-            isSelected: isSelected,
-            truncateInline: truncateInline
-          }, /*#__PURE__*/React.createElement(IconTitleWrapperOld, null, url, /*#__PURE__*/React.createElement(RightIconPositionWrapperOld, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
-            className: "inline-resolving-spinner"
-          }, /*#__PURE__*/React.createElement(Spinner, {
-            size: 14
-          })))));
-        }
-      } else {
-        return /*#__PURE__*/React.createElement(Frame, {
-          testId: testId,
-          onClick: onClick,
-          isSelected: isSelected,
-          link: url,
-          truncateInline: truncateInline
-        }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-          title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
-          titleTextColor: titleTextColor
-        }, fg('platform-linking-visual-refresh-v1') ? /*#__PURE__*/React.createElement(Spinner, {
-          size: 14
-        }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SpinnerWrapperComponent, {
-          className: "inline-resolving-spinner"
-        }, /*#__PURE__*/React.createElement(Spinner, {
-          size: 14
-        })))));
-      }
-    }
-  }]);
-}(React.Component);
+  return /*#__PURE__*/React.createElement(Frame, {
+    testId: testId,
+    onClick: onClick,
+    isSelected: isSelected,
+    link: url,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    title: resolvingPlaceholder !== null && resolvingPlaceholder !== void 0 ? resolvingPlaceholder : url,
+    titleTextColor: titleTextColor
+  }, renderSpinner()));
+};
+export var InlineCardResolvingView = function InlineCardResolvingView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(InlineCardResolvingViewNew, props);
+  }
+  return /*#__PURE__*/React.createElement(InlineCardResolvingViewOld, props);
+};

package/dist/esm/view/InlineCard/UnauthorisedView/InlineCardUnauthorizedViewOld.js

@@ -0,0 +1,135 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import ButtonOld from '@atlaskit/button';
+import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
+import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
+import { N500, R400 } from '@atlaskit/theme/colors';
+import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
+import { messages } from '../../../messages';
+import { HoverCard } from '../../HoverCard';
+import { ActionButton } from '../common/action-button';
+import { Frame } from '../Frame';
+import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
+import { IconAndTitleLayout } from '../IconAndTitleLayout';
+import { IconStyledButtonOldVisualRefresh } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
+import withFrameStyleControl from '../utils/withFrameStyleControl';
+var iconWrapperStyles = xcss({
+  marginRight: 'space.negative.025'
+});
+var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
+    }));
+  } else {
+    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      xcss: iconWrapperStyles
+    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+      color: "var(--ds-icon-danger, #C9372C)",
+      label: "error",
+      LEGACY_fallbackIcon: LegacyLockIcon,
+      LEGACY_size: "small"
+    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
+    }));
+  }
+};
+export var InlineCardUnauthorizedViewOld = function InlineCardUnauthorizedViewOld(_ref) {
+  var url = _ref.url,
+    id = _ref.id,
+    icon = _ref.icon,
+    onAuthorise = _ref.onAuthorise,
+    onClick = _ref.onClick,
+    isSelected = _ref.isSelected,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-unauthorized-view' : _ref$testId,
+    _ref$showHoverPreview = _ref.showHoverPreview,
+    showHoverPreview = _ref$showHoverPreview === void 0 ? false : _ref$showHoverPreview,
+    truncateInline = _ref.truncateInline,
+    context = _ref.context;
+  var frameRef = React.useRef(null);
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+    fireEvent = _useAnalyticsEvents.fireEvent;
+  var handleConnectAccount = React.useCallback(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onAuthorise) {
+      fireEvent('track.applicationAccount.authStarted', {});
+      onAuthorise();
+    }
+  }, [fireEvent, onAuthorise]);
+  var renderActionButton = React.useCallback(function () {
+    var Button = withFrameStyleControl(ButtonOld, frameRef);
+    if (fg('bandicoots-compiled-migration-smartcard')) {
+      if (fg('platform-linking-visual-refresh-v1')) {
+        return /*#__PURE__*/React.createElement(Button, {
+          component: ActionButton,
+          onClick: handleConnectAccount,
+          testId: "button-connect-account"
+        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+          values: {
+            context: context
+          }
+        })));
+      }
+      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
+        spacing: "none",
+        component: IconStyledButtonOldVisualRefresh,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))) : undefined;
+    } else {
+      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
+        spacing: "none",
+        component: IconStyledButtonOld,
+        onClick: handleConnectAccount,
+        testId: "button-connect-account"
+      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+        values: {
+          context: context
+        }
+      }))) : undefined;
+    }
+  }, [handleConnectAccount, onAuthorise, context]);
+  var inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
+    testId: testId,
+    isSelected: isSelected,
+    ref: frameRef,
+    truncateInline: truncateInline
+  }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
+    icon: icon ? icon : fallbackUnauthorizedIcon(),
+    title: url,
+    link: url,
+    onClick: onClick,
+    titleColor: "var(--ds-text-subtle, ".concat(N500, ")")
+  }), renderActionButton());
+  if (onAuthorise && showHoverPreview) {
+    return /*#__PURE__*/React.createElement(HoverCard, {
+      url: url,
+      id: id
+    }, inlineCardUnauthenticatedView);
+  }
+  return inlineCardUnauthenticatedView;
+};

package/dist/esm/view/InlineCard/UnauthorisedView/index.compiled.css

@@ -0,0 +1 @@
+._2hwx1i6y{margin-right:var(--ds-space-negative-025,-2px)}

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

@@ -1,11 +1,14 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import ButtonOld from '@atlaskit/button';
 import LockLockedIcon from '@atlaskit/icon/core/lock-locked';
 import LegacyLockIcon from '@atlaskit/icon/glyph/lock-filled';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { useAnalyticsEvents } from '../../../common/analytics/generated/use-analytics-events';
 import { messages } from '../../../messages';
@@ -13,46 +16,29 @@ import { HoverCard } from '../../HoverCard';
 import { ActionButton } from '../common/action-button';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
-import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButtonOldVisualRefresh } from '../styled';
-import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-var iconWrapperStyles = xcss({
-  marginRight: 'space.negative.025'
-});
+import { InlineCardUnauthorizedViewOld } from './InlineCardUnauthorizedViewOld';
+var styles = {
+  iconWrapper: "_2hwx1i6y"
+};
 var fallbackUnauthorizedIcon = function fallbackUnauthorizedIcon() {
-  if (fg('bandicoots-compiled-migration-smartcard')) {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      color: "var(--ds-icon-danger, #C9372C)",
-      label: "error",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
-    }));
-  } else {
-    return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
-      as: "span",
-      xcss: iconWrapperStyles
-    }, /*#__PURE__*/React.createElement(LockLockedIcon, {
-      color: "var(--ds-icon-danger, #C9372C)",
-      label: "error",
-      LEGACY_fallbackIcon: LegacyLockIcon,
-      LEGACY_size: "small"
-    })) : /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
-      label: "error",
-      size: "small",
-      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
-    }));
-  }
+  return fg('platform-smart-card-icon-migration') ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.iconWrapper
+  }, /*#__PURE__*/React.createElement(LockLockedIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    label: "error",
+    LEGACY_fallbackIcon: LegacyLockIcon,
+    LEGACY_size: "small"
+  })) : /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LegacyLockIcon, {
+    label: "error",
+    size: "small",
+    primaryColor: "var(--ds-icon-danger, ".concat(R400, ")")
+  }));
 };
-export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref) {
+var InlineCardUnauthorizedViewNew = function InlineCardUnauthorizedViewNew(_ref) {
   var url = _ref.url,
     id = _ref.id,
     icon = _ref.icon,
@@ -78,40 +64,27 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
   }, [fireEvent, onAuthorise]);
   var renderActionButton = React.useCallback(function () {
     var Button = withFrameStyleControl(ButtonOld, frameRef);
-    if (fg('bandicoots-compiled-migration-smartcard')) {
-      if (fg('platform-linking-visual-refresh-v1')) {
-        return /*#__PURE__*/React.createElement(Button, {
-          component: ActionButton,
-          onClick: handleConnectAccount,
-          testId: "button-connect-account"
-        }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-          values: {
-            context: context
-          }
-        })));
-      }
-      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        component: IconStyledButtonOldVisualRefresh,
-        onClick: handleConnectAccount,
-        testId: "button-connect-account"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
-        values: {
-          context: context
-        }
-      }))) : undefined;
-    } else {
-      return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
-        spacing: "none",
-        component: IconStyledButtonOld,
+    if (fg('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement(Button, {
+        component: ActionButton,
         onClick: handleConnectAccount,
         testId: "button-connect-account"
       }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
         values: {
           context: context
         }
-      }))) : undefined;
+      })));
     }
+    return onAuthorise ? /*#__PURE__*/React.createElement(Button, {
+      spacing: "none",
+      component: IconStyledButtonOldVisualRefresh,
+      onClick: handleConnectAccount,
+      testId: "button-connect-account"
+    }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.connect_link_account_card_name, {
+      values: {
+        context: context
+      }
+    }))) : undefined;
   }, [handleConnectAccount, onAuthorise, context]);
   var inlineCardUnauthenticatedView = /*#__PURE__*/React.createElement(Frame, {
     testId: testId,
@@ -132,4 +105,10 @@ export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(_ref
     }, inlineCardUnauthenticatedView);
   }
   return inlineCardUnauthenticatedView;
+};
+export var InlineCardUnauthorizedView = function InlineCardUnauthorizedView(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(InlineCardUnauthorizedViewNew, props);
+  }
+  return /*#__PURE__*/React.createElement(InlineCardUnauthorizedViewOld, props);
 };

package/dist/esm/view/LinkUrl/LinkWarningModal/WarningModalOld.js

@@ -0,0 +1,50 @@
+import _extends from "@babel/runtime/helpers/extends";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { jsx } from '@emotion/react';
+import { FormattedMessage, IntlProvider } from 'react-intl-next';
+import Button from '@atlaskit/button/standard-button';
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { messages } from '../../../messages';
+import { breakWordsCss } from './styled';
+var WarningModalOld = function WarningModalOld(props) {
+  var isOpen = props.isOpen,
+    unsafeLinkText = props.unsafeLinkText,
+    url = props.url,
+    onClose = props.onClose,
+    onContinue = props.onContinue,
+    intl = props.intl;
+  var content = jsx(ModalTransition, null, isOpen && jsx(Modal, {
+    onClose: onClose,
+    testId: "link-with-safety-warning"
+  }, jsx(ModalHeader, null, jsx(ModalTitle, {
+    appearance: "warning"
+  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
+    css: breakWordsCss
+  }, url && unsafeLinkText && jsx(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+    values: {
+      unsafeLinkText: unsafeLinkText,
+      a: function a() {
+        return jsx("a", {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer"
+        }, url);
+      }
+    }
+  })))), jsx(ModalFooter, null, jsx(Button, {
+    appearance: "subtle",
+    onClick: onClose
+  }, jsx(FormattedMessage, messages.go_back)), jsx(Button, {
+    appearance: "warning",
+    onClick: onContinue,
+    autoFocus: true
+  }, jsx(FormattedMessage, messages.continue)))));
+  return intl ? content : jsx(IntlProvider, {
+    locale: "en"
+  }, content);
+};
+export default WarningModalOld;

package/dist/esm/view/LinkUrl/LinkWarningModal/index.compiled.css

@@ -0,0 +1,2 @@
+._1nmz9jpi{word-break:break-all}
+._o5726vc6{white-space:pre-line}

package/dist/esm/view/LinkUrl/LinkWarningModal/index.js

@@ -1,52 +1,58 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import "./index.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { FormattedMessage, injectIntl, IntlProvider } from 'react-intl-next';
 import Button from '@atlaskit/button/standard-button';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../../../messages';
-import { breakWordsCss } from './styled';
-var WarningModal = function WarningModal(props) {
+import WarningModalOld from './WarningModalOld';
+var breakWordsCss = null;
+var WarningModalNew = function WarningModalNew(props) {
   var isOpen = props.isOpen,
     unsafeLinkText = props.unsafeLinkText,
     url = props.url,
     onClose = props.onClose,
     onContinue = props.onContinue,
     intl = props.intl;
-  var content = jsx(ModalTransition, null, isOpen && jsx(Modal, {
+  var content = /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(Modal, {
     onClose: onClose,
     testId: "link-with-safety-warning"
-  }, jsx(ModalHeader, null, jsx(ModalTitle, {
+  }, /*#__PURE__*/React.createElement(ModalHeader, null, /*#__PURE__*/React.createElement(ModalTitle, {
     appearance: "warning"
-  }, jsx(FormattedMessage, messages.check_this_link))), jsx(ModalBody, null, jsx("div", {
-    css: breakWordsCss
-  }, url && unsafeLinkText && jsx(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.check_this_link))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", {
+    className: ax(["_o5726vc6 _1nmz9jpi"])
+  }, url && unsafeLinkText && /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.link_safety_warning_message, {
     values: {
       unsafeLinkText: unsafeLinkText,
       a: function a() {
-        return jsx("a", {
+        return /*#__PURE__*/React.createElement("a", {
           href: url,
           target: "_blank",
           rel: "noopener noreferrer"
         }, url);
       }
     }
-  })))), jsx(ModalFooter, null, jsx(Button, {
+  })))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     appearance: "subtle",
     onClick: onClose
-  }, jsx(FormattedMessage, messages.go_back)), jsx(Button, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.go_back)), /*#__PURE__*/React.createElement(Button, {
     appearance: "warning",
     onClick: onContinue,
     autoFocus: true
-  }, jsx(FormattedMessage, messages.continue)))));
-  return intl ? content : jsx(IntlProvider, {
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.continue)))));
+  return intl ? content : /*#__PURE__*/React.createElement(IntlProvider, {
     locale: "en"
   }, content);
 };
-export default injectIntl(WarningModal, {
+var Component = function Component(props) {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(WarningModalNew, props);
+  }
+  return /*#__PURE__*/React.createElement(WarningModalOld, props);
+};
+export default injectIntl(Component, {
   enforceContext: false
 });

package/dist/esm/view/LinkUrl/LinkWarningModal/styled.js

@@ -1,6 +1,9 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 
+/**
+ * @deprecated remove on FF clean up bandicoots-compiled-migration-smartcard
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var breakWordsCss = css({
   whiteSpace: 'pre-line',