@atlaskit/smart-card 33.3.0 → 34.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 34.0.0
+
+### Major Changes
+
+- [#99301](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99301)
+  [`a537e69b1a3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a537e69b1a3ce) -
+  [ux] Migration from @emotion/react to @compiled/react for styling.
+
+## 33.4.0
+
+### Minor Changes
+
+- [#99264](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99264)
+  [`a5f4221df30a0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a5f4221df30a0) -
+  Introduce role, label and titleId props to the Hover Card component
+
 ## 33.3.0
 
 ### Minor Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "33.3.0"
+  packageVersion: "34.0.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/styled.js

@@ -22,6 +22,7 @@ var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)({
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '[data-smart-element-group]': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem'
   }
 });

package/dist/cjs/view/EmbedModal/components/link-info/styled.js

@@ -61,9 +61,11 @@ var actionCss = exports.actionCss = (0, _react.css)({
   display: 'flex',
   flex: '0 0 auto',
   gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: height,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   span: {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: height
   },
   '@media only screen and (max-width: 980px)': {

package/dist/cjs/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -40,6 +40,7 @@ var getButtonStyle = function getButtonStyle(size, iconOnly) {
         fontWeight: "var(--ds-font-weight-medium, 500)",
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         'button, button:hover, button:focus, button:active': [{
+          // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
           lineHeight: 'inherit'
         }, iconOnly ? "\n            padding: 0.125rem;\n          " : "\n            padding-left: 0.25rem;\n            padding-right: 0.25rem;\n          "]
       });

package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -35,15 +35,18 @@ var stackItemIconSizeStyles = (0, _utils.getIconSizeStyles)('20px');
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
 var stackItemIconStyles = (0, _react.css)(stackItemIconSizeStyles, {
   display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: "var(--ds-space-025, 2px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'span,svg,img': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: 0
   }
 });
 var newStackItemIconStyles = (0, _react.css)({
   display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0
 });
 var ActionIcon = function ActionIcon(_ref) {

package/dist/cjs/view/FlexibleCard/components/blocks/action-block/action-footer/index.js

@@ -14,6 +14,7 @@ var containerStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius',
   margin: 'space.100',
   marginBottom: 'space.0',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '20px',
   padding: 'space.075',
   paddingInline: 'space.100',

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -31,6 +31,7 @@ var _excluded = ["triggerRef"];
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var styles = (0, _react2.css)({
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {

package/dist/cjs/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -25,7 +25,7 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // sides so they line up nicely.
   var lineHeight = (0, _utils.getMaxLineHeight)(size);
   return (0, _react2.css)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
     lineHeight: "".concat(lineHeight, "rem")
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -65,6 +65,7 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(direction, si
     display: 'flex',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     gap: "".concat(getGapSize(size), "rem"),
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem',
     minWidth: 0,
     overflow: 'hidden'

package/dist/cjs/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -40,7 +40,7 @@ var MotionWrapper = exports.MotionWrapper = function MotionWrapper(_ref) {
     style: {
       height: height,
       minHeight: minHeight,
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
       lineHeight: 0,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       overflow: 'hidden',

package/dist/cjs/view/FlexibleCard/components/elements/icon/index.js

@@ -46,7 +46,7 @@ var getCustomRenderStyles = function getCustomRenderStyles(value) {
   return (
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     (0, _react2.css)((0, _utils.getTruncateStyles)(1, value), {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
       lineHeight: value,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       fontSize: value,

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -17,6 +17,7 @@ var _lozengeAction = _interopRequireDefault(require("./lozenge-action"));
 
 var styles = (0, _react.css)({
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit'
 });
 

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/lozenge-action-error/styled.js

@@ -23,6 +23,7 @@ var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)(
 var sharedBlockStyles = (0, _react.css)({
   display: 'flex',
   gap: "var(--ds-space-100, 0.5rem)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: '1rem',
   minWidth: 0,
   overflow: 'hidden',
@@ -51,6 +52,7 @@ var linkStyles = exports.linkStyles = (0, _react.css)(sharedBlockStyles, {
 });
 var textStyles = exports.textStyles = function textStyles(maxLines) {
   return (0, _react.css)({
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem',
     whiteSpace: 'normal'
   },

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/lozenge-action/styled.js

@@ -13,11 +13,14 @@ var triggerButtonStyles = exports.triggerButtonStyles = (0, _react.css)({
   backgroundColor: 'transparent',
   color: 'unset',
   cursor: 'pointer',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontFamily: 'unset',
   fontSize: 'unset',
   fontStyle: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   fontWeight: 'unset',
   fontVariant: 'unset',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 0,
   padding: 0,
   textTransform: 'unset',

package/dist/cjs/view/FlexibleCard/components/utils.js

@@ -93,7 +93,7 @@ var getLinkSizeStyles = exports.getLinkSizeStyles = function getLinkSizeStyles(s
       return (0, _react2.css)({
         font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case _constants.SmartLinkSize.Large:
@@ -101,7 +101,7 @@ var getLinkSizeStyles = exports.getLinkSizeStyles = function getLinkSizeStyles(s
       return (0, _react2.css)({
         font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
     case _constants.SmartLinkSize.Small:
@@ -109,7 +109,7 @@ var getLinkSizeStyles = exports.getLinkSizeStyles = function getLinkSizeStyles(s
       return (0, _react2.css)({
         font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
         fontWeight: "var(--ds-font-weight-regular, 400)",
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
         lineHeight: getLinkLineHeight(size)
       });
   }

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -49,7 +49,10 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     zIndex = _ref$zIndex === void 0 ? _styled.HOVER_CARD_Z_INDEX : _ref$zIndex,
     _ref$noFadeDelay = _ref.noFadeDelay,
     noFadeDelay = _ref$noFadeDelay === void 0 ? false : _ref$noFadeDelay,
-    hoverPreviewOptions = _ref.hoverPreviewOptions;
+    hoverPreviewOptions = _ref.hoverPreviewOptions,
+    role = _ref.role,
+    label = _ref.label,
+    titleId = _ref.titleId;
   var fadeInDelay = (_hoverPreviewOptions$ = hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.fadeInDelay) !== null && _hoverPreviewOptions$ !== void 0 ? _hoverPreviewOptions$ : FADE_IN_DELAY;
   var _React$useState = _react.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -228,7 +231,10 @@ var HoverCardComponent = exports.HoverCardComponent = function HoverCardComponen
     autoFocus: false,
     content: content,
     trigger: trigger,
-    zIndex: zIndex
+    zIndex: zIndex,
+    role: role,
+    titleId: titleId,
+    label: label
     // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
     ,
     popupComponent: _CustomPopupContainer.default

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

@@ -15,13 +15,16 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/utility/migration/error"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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"));
 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; })(); }
@@ -47,7 +50,7 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
       var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       return onRetry && /*#__PURE__*/_react.default.createElement(ActionButton, {
         spacing: "none",
-        component: _styled.IconStyledButton,
+        component: (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _styled.IconStyledButton : _styledEmotion.IconStyledButton,
         onClick: _this.handleRetry,
         role: "button"
       }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.try_again));
@@ -67,13 +70,14 @@ var InlineCardErroredView = exports.InlineCardErroredView = /*#__PURE__*/functio
         icon = _this$props.icon,
         message = _this$props.message,
         truncateInline = _this$props.truncateInline;
+      var Wrapper = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? _Icon.AKIconWrapper : _IconEmotion.AKIconWrapper;
       var content = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef,
         truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-        icon: icon || /*#__PURE__*/_react.default.createElement(_Icon.AKIconWrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
+        icon: icon || /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_error.default, {
           label: "error",
           LEGACY_size: "small",
           color: "var(--ds-icon-danger, ".concat(_colors.R300, ")"),

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

@@ -17,23 +17,37 @@ var _reactIntlNext = require("react-intl-next");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _lockFilled = _interopRequireDefault(require("@atlaskit/icon/glyph/lock-filled"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 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("../IconAndTitleLayout/styled");
 var _styled2 = require("../styled");
+var _styledEmotion = require("../styled-emotion");
 var _withFrameStyleControl = _interopRequireDefault(require("../utils/withFrameStyleControl"));
 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 FallbackForbiddenIcon = /*#__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, ")"),
-  testId: "forbidden-view-fallback-icon"
-}));
+var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
+  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, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  } 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, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  }
+};
 var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   function InlineCardForbiddenView() {
     var _this$props;
@@ -78,14 +92,25 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
       var ActionButton = (0, _withFrameStyleControl.default)(_button.default, _this.frameRef);
       var accessType = (_this$props$requestAc = _this.props.requestAccessContext) === null || _this$props$requestAc === void 0 ? void 0 : _this$props$requestAc.accessType;
       if (_this.state.hasRequestAccessContextMessage) {
-        return /*#__PURE__*/_react.default.createElement(ActionButton, {
-          spacing: "none",
-          onClick: _this.handleRetry,
-          component: _styled2.IconStyledButton,
-          testId: "button-connect-other-account",
-          role: "button",
-          isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-        }, _this.renderForbiddenAccessMessage());
+        if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
+          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: _styled2.IconStyledButton,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        } else {
+          return /*#__PURE__*/_react.default.createElement(ActionButton, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: _styledEmotion.IconStyledButton,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        }
       }
       if (onAuthorise) {
         return /*#__PURE__*/_react.default.createElement(_button.default, {
@@ -120,7 +145,7 @@ var InlineCardForbiddenView = exports.InlineCardForbiddenView = /*#__PURE__*/fun
         ref: this.frameRef,
         truncateInline: truncateInline
       }, /*#__PURE__*/_react.default.createElement(_IconAndTitleLayout.IconAndTitleLayout, {
-        icon: icon ? icon : FallbackForbiddenIcon,
+        icon: icon ? icon : fallbackForbiddenIcon(),
         link: url,
         title: url,
         onClick: onClick,

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Frame = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
 var _styled = require("./styled");
+var _styledEmotion = require("./styled-emotion");
 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 Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -42,7 +44,7 @@ var Frame = exports.Frame = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var isAnchor = Boolean(link || onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
-  var Wrapper = isAnchor ? _styled.WrapperAnchor : _styled.WrapperSpan;
+  var Wrapper = (0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard') ? isAnchor ? _styled.WrapperAnchor : _styled.WrapperSpan : isAnchor ? _styledEmotion.WrapperAnchor : _styledEmotion.WrapperSpan;
   return /*#__PURE__*/_react.default.createElement(Wrapper, {
     href: link,
     withoutBackground: withoutBackground,

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

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+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 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({
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+    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.
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  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));
+});
+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));
+});
+WrapperSpan.displayName = 'WrapperSpan';

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

@@ -0,0 +1,53 @@
+
+._19ith6cr{border:1px solid var(--ds-border,#dfe1e6)}
+._1yt4x7n9{padding:var(--ds-space-025,2px) 0}
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
+._v56415x0{transition:all .1s ease-in-out}
+._1h6dmr28{border-color:var(--ds-border-accent-blue,#2684ff)}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._16d9qvcn{-webkit-box-decoration-break:clone;box-decoration-break:clone}
+._16qscw00{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}
+._18m915vq{overflow-y:hidden}
+._18u01i6y{margin-left:var(--ds-space-negative-025,-2px)}
+._19bvidpf{padding-left:0}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1abx{display:-webkit-inline-box}
+._1e0c1nu9{display:inline}
+._1hmsglyw{text-decoration-line:none}
+._1nmz9jpi{word-break:break-all}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._1rkwglyw{-moz-user-select:none}
+._1yyjkb7n{-webkit-line-clamp:1}
+._4bfu18uv{text-decoration-color:initial}
+._80omtlke{cursor:pointer}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qidpf{padding-top:0}
+._n3tdidpf{padding-bottom:0}
+._sudp1e54{-webkit-box-orient:vertical}
+._syaz1y58{color:var(--ds-link,#0052cc)}
+._u5f3idpf{padding-right:0}
+._uizt1kdv{-webkit-user-select:text;-ms-user-select:text;user-select:text}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vwz4183y{line-height:21px}
+._vwz4qslr{line-height:22px}
+._1372tlke:focus{cursor:pointer}
+._1a3b18uv:focus{text-decoration-color:initial}
+._1hvw1o36:focus{outline-width:medium}
+._1j5pglyw:focus{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._49pcglyw:focus{outline-style:none}
+._4fprglyw:focus{text-decoration-line:none}
+._5goinqa1:focus{text-decoration-style:solid}
+._7ehicw00:focus{box-shadow:0 0 0 2px var(--ds-border-selected,#4c9aff)}
+._nt751r31:focus{outline-color:currentColor}
+._bfw7h6cr:hover{border:1px solid var(--ds-border,#dfe1e6)}
+._4cvxmr28:hover{border-color:var(--ds-border-accent-blue,#2684ff)}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1di629zg:active{background-color:var(--ds-background-selected,#deebff)}
+._1iohnqa1:active{text-decoration-style:solid}
+._1nrm18uv:active{text-decoration-color:initial}
+._c2waglyw:active{text-decoration-line:none}
+@supports not (-webkit-line-clamp:1){._17bix7n9{padding:var(--ds-space-025,2px) 0}._nr8z1o8l{display:inline-block}._102kqslr{max-height:22px}}