@atlaskit/smart-card 33.4.0 → 34.0.1

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

@@ -20,7 +20,7 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // sides so they line up nicely.
   var lineHeight = getMaxLineHeight(size);
   return 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/esm/view/FlexibleCard/components/blocks/utils.js

@@ -58,6 +58,7 @@ export var getBaseStyles = function getBaseStyles(direction, size) {
     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/esm/view/FlexibleCard/components/common/motion-wrapper/index.js

@@ -30,7 +30,7 @@ export var 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/esm/view/FlexibleCard/components/elements/icon/index.js

@@ -35,7 +35,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
     css(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/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -9,6 +9,7 @@ import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-con
 import LozengeAction from './lozenge-action';
 var styles = css({
   display: 'inline-flex',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
   lineHeight: 'inherit'
 });
 

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

@@ -17,6 +17,7 @@ export var dropdownItemGroupStyles = css({
 var sharedBlockStyles = 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',
@@ -45,6 +46,7 @@ export var linkStyles = css(sharedBlockStyles, {
 });
 export var textStyles = function textStyles(maxLines) {
   return css({
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '1rem',
     whiteSpace: 'normal'
   },

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

@@ -6,11 +6,14 @@ export var triggerButtonStyles = 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/esm/view/FlexibleCard/components/utils.js

@@ -88,7 +88,7 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return 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 SmartLinkSize.Large:
@@ -96,7 +96,7 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return 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 SmartLinkSize.Small:
@@ -104,7 +104,7 @@ export var getLinkSizeStyles = function getLinkSizeStyles(size) {
       return 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/esm/view/InlineCard/ErroredView/index.js

@@ -10,13 +10,16 @@ import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import ErrorIcon from '@atlaskit/icon/utility/migration/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { R300 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { IconStyledButton } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
 export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
   function InlineCardErroredView() {
@@ -40,7 +43,7 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
       var ActionButton = withFrameStyleControl(Button, _this.frameRef);
       return onRetry && /*#__PURE__*/React.createElement(ActionButton, {
         spacing: "none",
-        component: IconStyledButton,
+        component: fg('bandicoots-compiled-migration-smartcard') ? IconStyledButton : IconStyledButtonOld,
         onClick: _this.handleRetry,
         role: "button"
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages.try_again));
@@ -60,13 +63,14 @@ export var InlineCardErroredView = /*#__PURE__*/function (_React$Component) {
         icon = _this$props.icon,
         message = _this$props.message,
         truncateInline = _this$props.truncateInline;
+      var Wrapper = fg('bandicoots-compiled-migration-smartcard') ? AKIconWrapper : AKIconWrapperOld;
       var content = /*#__PURE__*/React.createElement(Frame, {
         testId: testId,
         isSelected: isSelected,
         ref: this.frameRef,
         truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        icon: icon || /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
+        icon: icon || /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ErrorIcon, {
           label: "error",
           LEGACY_size: "small",
           color: "var(--ds-icon-danger, ".concat(R300, ")"),

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

@@ -12,21 +12,35 @@ import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import LockIcon from '@atlaskit/icon/glyph/lock-filled';
 import Lozenge from '@atlaskit/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500, R400 } from '@atlaskit/theme/colors';
 import { messages } from '../../../messages';
 import { HoverCard } from '../../HoverCard';
 import { Frame } from '../Frame';
 import { AKIconWrapper } from '../Icon';
+import { AKIconWrapper as AKIconWrapperOld } from '../Icon-emotion';
 import { IconAndTitleLayout } from '../IconAndTitleLayout';
 import { LozengeWrapper } from '../IconAndTitleLayout/styled';
 import { IconStyledButton } from '../styled';
+import { IconStyledButton as IconStyledButtonOld } from '../styled-emotion';
 import withFrameStyleControl from '../utils/withFrameStyleControl';
-var FallbackForbiddenIcon = /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
-  label: "error",
-  size: "small",
-  primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
-  testId: "forbidden-view-fallback-icon"
-}));
+var fallbackForbiddenIcon = function fallbackForbiddenIcon() {
+  if (fg('bandicoots-compiled-migration-smartcard')) {
+    return /*#__PURE__*/React.createElement(AKIconWrapper, null, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(AKIconWrapperOld, null, /*#__PURE__*/React.createElement(LockIcon, {
+      label: "error",
+      size: "small",
+      primaryColor: "var(--ds-icon-danger, ".concat(R400, ")"),
+      testId: "forbidden-view-fallback-icon"
+    }));
+  }
+};
 export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
   function InlineCardForbiddenView() {
     var _this$props;
@@ -71,14 +85,25 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
       var ActionButton = withFrameStyleControl(Button, _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.createElement(ActionButton, {
-          spacing: "none",
-          onClick: _this.handleRetry,
-          component: IconStyledButton,
-          testId: "button-connect-other-account",
-          role: "button",
-          isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
-        }, _this.renderForbiddenAccessMessage());
+        if (fg('bandicoots-compiled-migration-smartcard')) {
+          return /*#__PURE__*/React.createElement(ActionButton, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: IconStyledButton,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        } else {
+          return /*#__PURE__*/React.createElement(ActionButton, {
+            spacing: "none",
+            onClick: _this.handleRetry,
+            component: IconStyledButtonOld,
+            testId: "button-connect-other-account",
+            role: "button",
+            isDisabled: accessType === 'PENDING_REQUEST_EXISTS'
+          }, _this.renderForbiddenAccessMessage());
+        }
       }
       if (onAuthorise) {
         return /*#__PURE__*/React.createElement(Button, {
@@ -113,7 +138,7 @@ export var InlineCardForbiddenView = /*#__PURE__*/function (_React$Component) {
         ref: this.frameRef,
         truncateInline: truncateInline
       }, /*#__PURE__*/React.createElement(IconAndTitleLayout, {
-        icon: icon ? icon : FallbackForbiddenIcon,
+        icon: icon ? icon : fallbackForbiddenIcon(),
         link: url,
         title: url,
         onClick: onClick,

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

@@ -1,6 +1,8 @@
 import React, { forwardRef, useCallback } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import { WrapperAnchor, WrapperSpan } from './styled';
+import { WrapperAnchor as WrapperAnchorOld, WrapperSpan as WrapperSpanOld } from './styled-emotion';
 export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
   var isSelected = props.isSelected,
     children = props.children,
@@ -33,7 +35,7 @@ export var Frame = /*#__PURE__*/forwardRef(function (props, ref) {
   var isAnchor = Boolean(link || onClick);
 
   // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
-  var Wrapper = isAnchor ? WrapperAnchor : WrapperSpan;
+  var Wrapper = fg('bandicoots-compiled-migration-smartcard') ? isAnchor ? WrapperAnchor : WrapperSpan : isAnchor ? WrapperAnchorOld : WrapperSpanOld;
   return /*#__PURE__*/React.createElement(Wrapper, {
     href: link,
     withoutBackground: withoutBackground,

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

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
+import styled from '@emotion/styled';
+import { B100, B200, B400, B50, N40 } from '@atlaskit/theme/colors';
+var lineHeight = 22;
+var selectedStyles = {
+  cursor: 'pointer',
+  boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")")),
+  outline: 'none',
+  userSelect: 'none',
+  '&, :hover, :focus, :active': {
+    textDecoration: 'none'
+  },
+  '&:hover': {
+    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
+  }
+};
+var isInteractive = function isInteractive(_ref) {
+  var isInteractive = _ref.isInteractive;
+  if (isInteractive) {
+    return {
+      ':active': {
+        backgroundColor: "var(--ds-background-selected, ".concat(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(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(B400, ")")
+  }, props.withoutBackground ? undefined : {
+    backgroundColor: "var(--ds-surface-raised, white)"
+  }), isSelected(props)), props.withoutBackground ? undefined : {
+    border: "1px solid ".concat("var(--ds-border, ".concat(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
+export var WrapperAnchor = styled.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
+export var WrapperSpan = styled.span(function (props) {
+  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isTruncated(props));
+});
+WrapperSpan.displayName = 'WrapperSpan';

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

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

@@ -1,129 +1,50 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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) { _defineProperty(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
-import styled from '@emotion/styled';
+/* styled.tsx generated by @compiled/babel-plugin v0.35.0 */
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"],
+  _excluded2 = ["truncateInline", "withoutBackground", "isHovered", "isInteractive", "isSelected", "href"];
+import "./styled.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { forwardRef } from 'react';
 import { B100, B200, B400, B50, N40 } from '@atlaskit/theme/colors';
 var lineHeight = 22;
-var selectedStyles = {
-  cursor: 'pointer',
-  boxShadow: "0 0 0 2px ".concat("var(--ds-border-selected, ".concat(B100, ")")),
-  outline: 'none',
-  userSelect: 'none',
-  '&, :hover, :focus, :active': {
-    textDecoration: 'none'
-  },
-  '&:hover': {
-    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
-  }
-};
-var isInteractive = function isInteractive(_ref) {
-  var isInteractive = _ref.isInteractive;
-  if (isInteractive) {
-    return {
-      ':active': {
-        backgroundColor: "var(--ds-background-selected, ".concat(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(B200, ")")
-};
-var activeHoveredFocusedStyles = function activeHoveredFocusedStyles(props) {
-  if (props.withoutBackground) {
-    return undefined;
-  }
-  return {
-    textDecoration: 'none'
-  };
-};
-var hoveredWihBorderStyles = function hoveredWihBorderStyles(props) {
-  return _objectSpread(_objectSpread({}, hoveredStyles), activeHoveredFocusedStyles(props));
-};
-
-/*
-  Inline smart cards should have the following layout:
-  ------------------------------------
-  | icon | title | action OR lozenge |
-  ------------------------------------
-  The aim is to ensure (1) all children are
-  in line with each other, (2) are vertically
-  centered.
-*/
-// NB: `padding` consistent with @mentions.
-// NB: `display: inline` required for `box-decoration-break` to work.
-// NB: `box-decoration-break` required for retaining properties (border-radius) on wrap.
-var baseWrapperStyles = function baseWrapperStyles(props) {
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
-    lineHeight: "".concat(lineHeight, "px"),
-    padding: "var(--ds-space-025, 2px)".concat(" 0px")
-  }, props.withoutBackground ? {
-    paddingLeft: 0,
-    marginLeft: "var(--ds-space-negative-025, -2px)"
-  } : undefined), {}, {
-    display: 'inline',
-    boxDecorationBreak: 'clone',
-    borderRadius: "var(--ds-border-radius-100, 4px)",
-    color: "var(--ds-link, ".concat(B400, ")")
-  }, props.withoutBackground ? undefined : {
-    backgroundColor: "var(--ds-surface-raised, white)"
-  }), isSelected(props)), props.withoutBackground ? undefined : {
-    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))
-  }), {}, {
-    '&:hover': hoveredStyles,
-    '&, :hover, :focus, :active': activeHoveredFocusedStyles(props),
-    transition: '0.1s all ease-in-out',
-    MozUserSelect: 'none'
-  }, props.isHovered ? hoveredWihBorderStyles(props) : undefined);
-};
-var truncateStyles = {
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  wordBreak: 'break-all',
-  // The height of a truncated card is 1px higher than that of a non-truncated card, so we subtract 1px from the line height.
-  lineHeight: "".concat(lineHeight - 1, "px"),
-  display: '-webkit-inline-box',
-  WebkitLineClamp: 1,
-  WebkitBoxOrient: 'vertical',
-  // We need to remove the padding because display: -webkit-inline-box will cause any padding to be
-  // added to the total height, causing truncated cards to have greater height than non-truncated cards which use display: inline.
-  padding: 0,
-  '@supports not (-webkit-line-clamp: 1)': {
-    display: 'inline-block',
-    maxHeight: "".concat(lineHeight, "px"),
-    // If the browser does not support webkit, we don't need to remove the padding
-    padding: "var(--ds-space-025, 2px)".concat(" 0px")
-  }
-};
-var isTruncated = function isTruncated(_ref3) {
-  var truncateInline = _ref3.truncateInline;
-  if (truncateInline) {
-    return truncateStyles;
-  }
-  return undefined;
-};
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export var WrapperAnchor = styled.a(function (props) {
-  return _objectSpread(_objectSpread(_objectSpread({}, baseWrapperStyles(props)), isInteractive(props)), isTruncated(props));
+export var WrapperSpan = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var truncateInline = _ref.truncateInline,
+    withoutBackground = _ref.withoutBackground,
+    isHovered = _ref.isHovered,
+    isInteractive = _ref.isInteractive,
+    isSelected = _ref.isSelected,
+    href = _ref.href,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, props, {
+    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv"])
+  }), props.children);
 });
-WrapperAnchor.displayName = 'WrapperAnchor';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/ui-styling-standard/no-dynamic-styles -- Ignored via go/DSP-18766
-export var WrapperSpan = styled.span(function (props) {
-  return _objectSpread(_objectSpread({}, baseWrapperStyles(props)), isTruncated(props));
+export var WrapperAnchor = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var truncateInline = _ref2.truncateInline,
+    withoutBackground = _ref2.withoutBackground,
+    isHovered = _ref2.isHovered,
+    isInteractive = _ref2.isInteractive,
+    isSelected = _ref2.isSelected,
+    href = _ref2.href,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: href,
+    ref: ref
+  }, props, {
+    className: ax(["_1yt4x7n9 _2rkoiti9 _v56415x0 _vwz4qslr _1e0c1nu9 _16d9qvcn _syaz1y58 _1rkwglyw _4cvxmr28", truncateInline && "_1reo15vq _18m915vq _ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _1bto1l2s _1nmz9jpi _vwz4183y _1e0c1abx _1yyjkb7n _sudp1e54 _17bix7n9 _nr8z1o8l _102kqslr", withoutBackground ? "_19bvidpf _18u01i6y" : "_19ith6cr _bfhkhp5a _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _1nrm18uv _c2waglyw _1iohnqa1", isHovered && "_1h6dmr28", isHovered && !withoutBackground && "_4bfu18uv _1hmsglyw _ajmmnqa1", isSelected ? "_12ji1r31 _1qu2glyw _12y31o36 _80omtlke _16qscw00 _uiztglyw _1a3b18uv _4fprglyw _5goinqa1 _9oik18uv _1bnxglyw _jf4cnqa1 _bfw7h6cr _1nrm18uv _c2waglyw _1iohnqa1" : "_uizt1kdv", isInteractive && "_nt751r31 _49pcglyw _1hvw1o36 _1372tlke _7ehicw00 _1j5pglyw _1di629zg"])
+  }), props.children);
 });
-WrapperSpan.displayName = 'WrapperSpan';
+var baseWrapperStyles = null;
+
+// if the parent instruct the wrapper to be interactive, and the wrapper is in focus, apply selectedStyles
+var interactiveStyles = null;
+var hoveredStyles = null;
+var hoveredWithBackgroundStyles = null;
+var withoutBackgroundStyles = null;
+var withBackgroundStyles = null;
+var truncateStyles = null;
+var notSelectedStyle = null;
+var selectedStyles = null;