@atlaskit/smart-card 26.55.1 → 26.56.0

package/dist/cjs/view/FlexibleCard/components/elements/avatar-group/index.js

@@ -15,7 +15,7 @@ var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _utils = require("../../utils");
-var _templateObject, _templateObject2;
+var _templateObject;
 /** @jsx jsx */
 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 && Object.prototype.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; }
@@ -23,7 +23,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
+  var styles = (0, _react2.css)({
+    display: 'inline-flex',
+    ul: {
+      marginRight: "var(--ds-space-100, 0.5rem)",
+      marginTop: 0
+    }
+  });
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Large:
@@ -32,7 +38,8 @@ var getStyles = function getStyles(size) {
     case _constants.SmartLinkSize.Medium:
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
+      // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
 var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {

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

@@ -14,11 +14,23 @@ var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
-var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+var _templateObject, _messageMapper;
 /** @jsx jsx */
-var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", (0, _utils.getIconSizeStyles)('1rem'));
-var labelStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), "var(--ds-text-subtlest, #626F86)");
+var badgeStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'inline-flex',
+  minWidth: 'fit-content'
+});
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+var iconStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", (0, _utils.getIconSizeStyles)('1rem'));
+var labelStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  paddingLeft: "var(--ds-space-025, 0.125rem)",
+  verticalAlign: 'middle'
+});
 var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityCritical, _messages.messages.priority_critical), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHigh, _messages.messages.priority_high), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHighest, _messages.messages.priority_highest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLow, _messages.messages.priority_low), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMajor, _messages.messages.priority_major), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMedium, _messages.messages.priority_medium), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMinor, _messages.messages.priority_minor), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined), _messageMapper);
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _utils = require("../../utils");
 var _intlUtils = require("@formatjs/intl-utils");
 var _messages = require("../../../../../messages");
-var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", (0, _utils.getTruncateStyles)(1));
+
+var styles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem'
+}, (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
   created: {
     relative: _messages.messages.created_on_relative,

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _react2 = require("@emotion/react");
@@ -14,24 +13,40 @@ var _constants = require("../../../../../constants");
 var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon"));
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
 var _utils = require("../../utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
 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 && Object.prototype.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; }
+/** @jsx jsx */
+
 var getPositionStyles = function getPositionStyles(position) {
   switch (position) {
     case _constants.SmartLinkPosition.Center:
-      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        align-self: center;\n      "])));
+      return (0, _react2.css)({
+        alignSelf: 'center'
+      });
     case _constants.SmartLinkPosition.Top:
     default:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
+      return (0, _react2.css)({
+        alignSelf: 'flex-start',
+        margin: 0
+      });
   }
 };
 var getIconStyles = function getIconStyles(position, width) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), getPositionStyles(position), (0, _utils.getIconSizeStyles)(width));
+  return (0, _react2.css)(getPositionStyles(position), (0, _utils.getIconSizeStyles)(width));
 };
 var getCustomRenderStyles = function getCustomRenderStyles(value) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  font-size: ", ";\n  text-align: center;\n  text-overflow: clip;\n  -webkit-box-orient: unset;\n  span {\n    margin: 0;\n    padding: 0;\n    vertical-align: baseline;\n  }\n"])), (0, _utils.getTruncateStyles)(1, value), value, value);
+  return (0, _react2.css)((0, _utils.getTruncateStyles)(1, value), {
+    lineHeight: value,
+    fontSize: value,
+    textAlign: 'center',
+    textOverflow: 'clip',
+    WebkitBoxOrient: 'unset',
+    span: {
+      margin: 0,
+      padding: 0,
+      verticalAlign: 'baseline'
+    }
+  });
 };
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, label, testId) {
   if (icon) {
@@ -86,6 +101,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return (0, _react2.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
     css: [styles, renderStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,

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

@@ -7,38 +7,68 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../constants");
 var _utils = require("../../utils");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-/** @jsx jsx */
 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 && Object.prototype.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; }
+/** @jsx jsx */
+
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var containerStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n"])));
+var containerStyles = (0, _react2.css)({
+  flex: '1 1 auto'
+});
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
     case _constants.SmartLinkInternalTheme.Grey:
       // We are being specifc with the CSS selectors to ensure that Confluence overrides
       // do not affect our internal Smart Card styles
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
+      return (0, _react2.css)({
+        'a&': {
+          color: "var(--ds-text-subtlest, #626F86)",
+          '&:active, &:visited, &:focus, &:hover': {
+            color: "var(--ds-text-subtlest, #626F86)",
+            textDecoration: 'underline'
+          },
+          fontSize: '12px'
+        }
+      });
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-text-subtle, #44546F)", "var(--ds-text, #172B4D)", "var(--ds-text-subtle, #44546F)");
+      return (0, _react2.css)({
+        color: "var(--ds-text-subtle, #44546F)",
+        ':active': {
+          color: "var(--ds-text, #172B4D)"
+        },
+        ':hover': {
+          color: "var(--ds-text-subtle, #44546F)",
+          textDecoration: 'underline'
+        }
+      });
     case _constants.SmartLinkTheme.Link:
     default:
-      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-link, #0C66E4)", "var(--ds-link-pressed, #0055CC)", "var(--ds-link, #0C66E4)");
+      return (0, _react2.css)({
+        color: "var(--ds-link, #0C66E4)",
+        ':active': {
+          color: "var(--ds-link-pressed, #0055CC)"
+        },
+        ':hover': {
+          color: "var(--ds-link, #0C66E4)",
+          textDecoration: 'underline'
+        }
+      });
   }
 };
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
+  return (0, _react2.css)({
+    flex: '1 1 auto'
+  }, sizeStyles, (0, _utils.getTruncateStyles)(maxLines, (0, _utils.getLinkLineHeight)(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -5,15 +5,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _lozengeAction = _interopRequireDefault(require("./lozenge-action"));
 var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
-var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+
+var styles = (0, _react2.css)({
+  display: 'inline-flex',
+  lineHeight: 'inherit'
+});
 
 /**
  * A base element that displays a Lozenge.

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

@@ -1,15 +1,55 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownItemGroupStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3;
-var triggerButtonStyles = exports.triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: ", ";\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-border-focused, #388BFF)");
+var triggerButtonStyles = exports.triggerButtonStyles = (0, _react.css)({
+  all: 'unset',
+  backgroundColor: 'transparent',
+  color: 'unset',
+  cursor: 'pointer',
+  fontFamily: 'unset',
+  fontSize: 'unset',
+  fontStyle: 'unset',
+  fontWeight: 'unset',
+  fontVariant: 'unset',
+  lineHeight: 0,
+  padding: 0,
+  textTransform: 'unset',
+  border: '2px solid transparent',
+  margin: "var(--ds-space-025, 2px)",
+  "&:focus-visible, &:focus-within, &[aria-expanded='true']": {
+    outline: 'none',
+    boxShadow: "0 0 0 2px ".concat("var(--ds-border-focused, #388BFF)"),
+    borderRadius: '5px'
+  }
+});
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var triggerLozengeStyles = exports.triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: ", "\n      ", "\n      ", " -1px;\n  }\n"])), "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-050, -4px)");
-var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  max-height: 300px;\n  overflow-y: auto;\n\n  button {\n    padding: ", " ", ";\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-150, 12px)", "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");
+var triggerLozengeStyles = exports.triggerLozengeStyles = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex',
+  "span[role='img']": {
+    margin: "var(--ds-space-negative-050, -4px)".concat(" ", "var(--ds-space-negative-100, -8px)", " ", "var(--ds-space-negative-050, -4px)", " -1px")
+  }
+});
+var dropdownItemGroupStyles = exports.dropdownItemGroupStyles = (0, _react.css)({
+  maxHeight: '300px',
+  overflowY: 'auto',
+  button: {
+    padding: "var(--ds-space-075, 6px)".concat(" ", "var(--ds-space-150, 12px)"),
+    minHeight: '28px',
+    width: '220px',
+    '&:hover': {
+      backgroundColor: 'inherit'
+    },
+    '&:focus, &:focus-visible': {
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)",
+      boxSizing: 'border-box',
+      boxShadow: "inset 2px 0 0 ".concat("var(--ds-border-selected, #0C66E4)"),
+      outline: 'none'
+    }
+  }
+});

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

@@ -5,12 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _imageIcon = _interopRequireDefault(require("../../common/image-icon"));
-var _templateObject;
 /** @jsx jsx */
+
 /**
  * Media: Image
  * [aspect-ratio: 16 / 9] The context box is fixed to aspect ratio of 16:9.
@@ -21,7 +20,36 @@ var _templateObject;
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img,\n  > span {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = (0, _react2.css)({
+  aspectRatio: '16 / 9',
+  display: 'flex',
+  width: '100%',
+  height: 'fit-content',
+  '@supports not (aspect-ratio: auto)': {
+    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+    paddingTop: '56.25%',
+    // 16:9 ratio (9 / 16 = 0.5625)
+    height: 0,
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  '> img, > span': {
+    minHeight: '100%',
+    minWidth: '100%',
+    maxHeight: '100%',
+    maxWidth: '100%',
+    objectFit: 'cover',
+    objectPosition: 'center center',
+    '@supports not (aspect-ratio: auto)': {
+      position: 'absolute',
+      transform: 'translate(-50%, -50%)',
+      left: '50%',
+      top: '50%',
+      width: 'auto',
+      height: 'auto'
+    }
+  }
+});
 
 /**
  * A base element that displays a Media.

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

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _utils = require("../../utils");
-var _templateObject;
 /** @jsx jsx */
+
 var getStyles = function getStyles(maxLines) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", (0, _utils.getTruncateStyles)(maxLines));
+  return (0, _react2.css)({
+    color: "var(--ds-text-subtlest, #626F86)",
+    fontSize: '0.75rem',
+    lineHeight: '1rem',
+    whiteSpace: 'normal'
+  }, (0, _utils.getTruncateStyles)(maxLines));
 };
 
 /**

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

@@ -47,6 +47,7 @@ var getIconDimensionStyles = function getIconDimensionStyles(value) {
 };
 var getIconSizeStyles = exports.getIconSizeStyles = function getIconSizeStyles(width) {
   var sizeStyles = getIconDimensionStyles(width);
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    flex: 0 0 auto;\n    ", "\n    span,\n    svg,\n    img {\n      ", "\n    }\n    svg {\n      padding: 0;\n    }\n  "])), sizeStyles, sizeStyles);
 };
 var getIconWidth = exports.getIconWidth = function getIconWidth(size) {

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

@@ -16,6 +16,7 @@ var _aiPrism = _interopRequireDefault(require("../../common/ai-prism"));
 var _HoverCardContent = require("./HoverCardContent");
 var _useAiSummary = require("../../../state/hooks/use-ai-summary");
 var _store = require("../../../state/store");
+var _linkProvider = require("@atlaskit/link-provider");
 var _linkExtractors = require("@atlaskit/link-extractors");
 var _reactMagneticDi = require("react-magnetic-di");
 var _excluded = ["children", "isAIEnabled", "testId", "url"],
@@ -35,9 +36,12 @@ var ConnectedAIPrismContainer = function ConnectedAIPrismContainer(_ref) {
   //The data is undefined while the link is resolving.
   var dataUrl = data ? (0, _linkExtractors.extractLink)(data) : null;
   var dataAri = data ? (0, _linkExtractors.extractAri)(data) : null;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
       url: dataUrl || '',
-      ari: dataAri || ''
+      ari: dataAri || '',
+      product: product
     }),
     status = _useAISummary.state.status;
   var _useState = (0, _react2.useState)(status === 'loading'),

package/dist/cjs/view/HoverCard/components/views/forbidden/styled.js

@@ -1,14 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleBlockStyles = exports.mainTextStyles = exports.connectButtonStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3;
 var titleFontWeight = '600';
-var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  font-weight: ", ";\n  margin-top: ", ";\n"])), titleFontWeight, "var(--ds-space-100, 8px)");
-var mainTextStyles = exports.mainTextStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  justify-content: center;\n  margin-top: ", ";\n  font-size: 0.75rem;\n  text-align: center;\n"])), "var(--ds-space-0, 0px)");
-var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: center;\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+var mainTextStyles = exports.mainTextStyles = (0, _react.css)({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});

package/dist/cjs/view/HoverCard/components/views/resolved/index.js

@@ -22,6 +22,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _helpers = require("../../../../../state/helpers");
 var _useAiSummary = require("../../../../../state/hooks/use-ai-summary");
 var _linkExtractors = require("@atlaskit/link-extractors");
+var _linkProvider = require("@atlaskit/link-provider");
 var _reactMagneticDi = require("react-magnetic-di");
 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 && Object.prototype.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; }
@@ -64,11 +65,15 @@ var toFooterActions = exports.toFooterActions = function toFooterActions(cardAct
 var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   var bottomPrimary = _ref.bottomPrimary,
     imagePreview = _ref.imagePreview,
-    url = _ref.url,
-    ari = _ref.ari;
+    data = _ref.data;
+  var dataUrl = data ? (0, _linkExtractors.extractLink)(data) : null;
+  var dataAri = data ? (0, _linkExtractors.extractAri)(data) : null;
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    product = _useSmartLinkContext.product;
   var _useAISummary = (0, _useAiSummary.useAISummary)({
-      url: url,
-      ari: ari
+      url: dataUrl || '',
+      ari: dataAri || '',
+      product: product
     }),
     _useAISummary$state = _useAISummary.state,
     status = _useAISummary$state.status,
@@ -88,7 +93,7 @@ var ConnectedAIBlock = function ConnectedAIBlock(_ref) {
   })) : null;
 };
 var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
-  var _cardState$details, _extractLink, _extractAri;
+  var _cardState$details;
   var flexibleCardProps = _ref2.flexibleCardProps,
     titleBlockProps = _ref2.titleBlockProps,
     analytics = _ref2.analytics,
@@ -113,8 +118,6 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     return toFooterActions(cardActions, onActionClick);
   }, [cardActions, onActionClick]);
   var data = (_cardState$details = cardState.details) === null || _cardState$details === void 0 ? void 0 : _cardState$details.data;
-  var dataUrl = (_extractLink = (0, _linkExtractors.extractLink)(data)) !== null && _extractLink !== void 0 ? _extractLink : '';
-  var dataAri = (_extractAri = (0, _linkExtractors.extractAri)(data)) !== null && _extractAri !== void 0 ? _extractAri : '';
   var _useMemo = (0, _react.useMemo)(function () {
       var betterMetadata = (0, _utils.getSimulatedBetterMetadata)(extensionKey, data);
       return {
@@ -163,9 +166,8 @@ var HoverCardResolvedView = function HoverCardResolvedView(_ref2) {
     blockRef: connectedAIBlockRef
   }, /*#__PURE__*/_react.default.createElement(ConnectedAIBlock, {
     imagePreview: !!imagePreview,
-    url: dataUrl,
-    ari: dataAri,
-    bottomPrimary: bottomPrimary
+    bottomPrimary: bottomPrimary,
+    data: data
   })), !isAISummaryEnabled && !imagePreview && /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {
     status: _constants.SmartLinkStatus.Resolved
   }), /*#__PURE__*/_react.default.createElement(_blocks.SnippetBlock, {

package/dist/cjs/view/HoverCard/components/views/resolved/styled.js

@@ -8,8 +8,15 @@ exports.metadataBlockCss = exports.hiddenSnippetStyles = exports.footerBlockCss
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _styled = require("../../../styled");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 var elementGap = '0.5rem';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var metadataBlockCss = exports.metadataBlockCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  gap: 0px;\n  /* primary element group */\n  [data-smart-element-group]:nth-of-type(1) {\n    flex-grow: 7;\n\n    // a separator between text-based element\n    ", "\n\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-right: ", ";\n    }\n  }\n  /* secondary element group */\n  [data-smart-element-group]:nth-of-type(2) {\n    flex-grow: 3;\n    /* horizontal spacing between elements in group */\n    > span {\n      margin-left: ", ";\n    }\n  }\n\n  [data-smart-element-group] {\n    line-height: 1rem;\n  }\n"])), _styled.separatorCss, elementGap, elementGap);
-var footerBlockCss = exports.footerBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 1.5rem;\n"])));
-var hiddenSnippetStyles = exports.hiddenSnippetStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  visibility: hidden;\n  position: absolute;\n"])));
+var footerBlockCss = exports.footerBlockCss = (0, _react.css)({
+  height: '1.5rem'
+});
+var hiddenSnippetStyles = exports.hiddenSnippetStyles = (0, _react.css)({
+  visibility: 'hidden',
+  position: 'absolute'
+});

package/dist/cjs/view/HoverCard/components/views/resolving/styled.js

@@ -1,16 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleBlockStyles = exports.skeletonContainer = exports.loadingViewContainer = exports.getTitleStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var loadingViewContainer = exports.loadingViewContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n"])));
-var skeletonContainer = exports.skeletonContainer = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+var loadingViewContainer = exports.loadingViewContainer = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "var(--ds-space-200, 1rem)"
+});
+var skeletonContainer = exports.skeletonContainer = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'column',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  gap: '0.625rem',
+  alignItems: 'center'
+});
 var getTitleStyles = exports.getTitleStyles = function getTitleStyles(height) {
-  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 0 auto;\n    height: ", "rem;\n\n    span {\n      width: 100%;\n    }\n  "])), height);
+  return (0, _react.css)({
+    flex: '1 0 auto',
+    height: "".concat(height, "rem"),
+    span: {
+      width: '100%'
+    }
+  });
 };
-var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  gap: 0.5rem;\n"])));
+var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
+  width: '100%',
+  gap: "var(--ds-space-100, 0.5rem)"
+});

package/dist/cjs/view/HoverCard/components/views/unauthorised/styled.js

@@ -1,16 +1,24 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.titleBlockStyles = exports.mainTextStyles = exports.connectButtonStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2, _templateObject3;
 var blockGap = '0.5rem';
 var iconGap = '0.5rem';
 var titleFontWeight = '500';
-var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  justify-content: flex-end;\n  margin-top: ", ";\n"])), blockGap);
-var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", " ", ";\n  a {\n    font-weight: ", ";\n  }\n"])), blockGap, iconGap, titleFontWeight);
-var mainTextStyles = exports.mainTextStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  font-size: 0.75rem;\n"])), blockGap);
+var connectButtonStyles = exports.connectButtonStyles = (0, _react.css)({
+  justifyContent: 'flex-end',
+  marginTop: blockGap
+});
+var titleBlockStyles = exports.titleBlockStyles = (0, _react.css)({
+  gap: "".concat(blockGap, " ").concat(iconGap),
+  a: {
+    fontWeight: titleFontWeight
+  }
+});
+var mainTextStyles = exports.mainTextStyles = (0, _react.css)({
+  marginTop: blockGap,
+  fontSize: '0.75rem'
+});

package/dist/cjs/view/HoverCard/styled.js

@@ -32,7 +32,11 @@ var separatorCss = exports.separatorCss = (0, _react.css)({
     marginRight: elementGap
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var HoverCardContainer = exports.HoverCardContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n\n  .", " {\n    display: none;\n  }\n"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.hover-card-ai-summaries') ? NEW_CARD_WIDTH_REM : CARD_WIDTH_REM, _index.loadingPlaceholderClassName);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var titleBlockCss = exports.titleBlockCss = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  gap: ", ";\n\n  ", "\n\n  // title and subtitle element group\n  [data-smart-element-group] {\n    // gap between title and subtitle\n    gap: 0.06rem;\n    display: flex;\n    /* subtitle element group */\n    > [data-smart-element-group] {\n      > span {\n        margin-right: ", ";\n      }\n    }\n  }\n\n  [data-smart-element='Title'] {\n    font-weight: 600;\n  }\n"])), blockGap, separatorCss, elementGap);
 var getTransitionStyles = exports.getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return (0, _react.css)({