@atlaskit/smart-card 26.55.2 → 26.56.0

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/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/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)({

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

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleWrapperClassName = exports.TitleWrapper = exports.RightIconPositionWrapper = exports.LozengeWrapper = exports.IconWrapper = exports.IconTitleWrapper = exports.IconPositionWrapper = exports.IconOverrides = exports.IconObjectOverrides = exports.IconEmptyWrapper = exports.EmojiWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 // TODO: remove this override behaviour for @atlaskit/icon-object
 var IconObjectOverrides = exports.IconObjectOverrides = "\n  & > span {\n    height: 16px;\n    width: 14px;\n    position: absolute;\n    top: 3px;\n    left: 0;\n    line-height: 14px;\n    & > svg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n    }\n  }\n";
 // TODO: remove this override behaviour for @atlaskit/icon
@@ -19,27 +17,55 @@ var IconOverrides = exports.IconOverrides = "\n\n  & > * > span {\n    height: 1
 // - @atlaskit/icon-object: for object icons, e.g. repository, branch, etc.
 // NB: the first set of overrides style icons imported from @atlaskit/icon-object correctly.
 // NB: the second set of overrides style icons imported from @atlaskit/icon correctly.
-var IconWrapper = exports.IconWrapper = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  user-select: none;\n  ", "\n  ", "\n"])), IconOverrides, IconObjectOverrides);
+var IconWrapper = exports.IconWrapper = _styled.default.span({
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // Wraps all emoji in Inline Links similar to icon
-var EmojiWrapper = exports.EmojiWrapper = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  margin-right: ", ";\n  user-select: none;\n  ", "\n  ", "\n"])), "var(--ds-space-025, 2px)", IconOverrides, IconObjectOverrides);
+var EmojiWrapper = exports.EmojiWrapper = _styled.default.span({
+  display: 'inline-block',
+  marginRight: "var(--ds-space-025, 2px)",
+  userSelect: 'none'
+}, IconOverrides, IconObjectOverrides);
 
 // The main 'wrapping' element, title of the content.
 // NB: `white-space` adds little whitespace before wrapping.
 // NB: `word-break` line breaks as soon as an overflow takes place.
-var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-wrap;\n  word-break: break-all;\n  box-decoration-break: clone;\n  padding: ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-050, 4px)");
+var IconTitleWrapper = exports.IconTitleWrapper = _styled.default.span({
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  boxDecorationBreak: 'clone',
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
 
 // TODO: Replace overrides with proper AtlasKit solution.
-var LozengeWrapper = exports.LozengeWrapper = _styled.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  vertical-align: 1px;\n  margin: 0 ", " 0 ", ";\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-025, 2px)");
-var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-025, 2px)");
+var LozengeWrapper = exports.LozengeWrapper = _styled.default.span({
+  display: 'inline-block',
+  verticalAlign: '1px',
+  margin: "0 ".concat("var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
+});
+var RightIconPositionWrapper = exports.RightIconPositionWrapper = _styled.default.span({
+  marginLeft: "var(--ds-space-025, 2px)",
+  position: 'relative',
+  display: 'inline-block'
+});
 
 // The following components are used to absolutely position icons in the vertical center.
 // - IconPositionWrapper: the `relative` parent which has no height in itself.
 // - IconEmptyWrapper: the child which forces `IconPositionWrapper` to have a height.
-var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin-right: ", ";\n  position: relative;\n  display: inline-block;\n"])), "var(--ds-space-050, 4px)");
-var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 14px;\n  height: 100%;\n  display: inline-block;\n  opacity: 0;\n"])));
+var IconPositionWrapper = exports.IconPositionWrapper = _styled.default.span({
+  marginRight: "var(--ds-space-050, 4px)",
+  position: 'relative',
+  display: 'inline-block'
+});
+var IconEmptyWrapper = exports.IconEmptyWrapper = _styled.default.span({
+  width: '14px',
+  height: '100%',
+  display: 'inline-block',
+  opacity: 0
+});
 
 // With emotion it's not possible to use reference to `TitleWrapper` as part of a selector,
 // To achieve same result we use classname instead.
 var TitleWrapperClassName = exports.TitleWrapperClassName = 'smart-link-title-wrapper';
-var TitleWrapper = exports.TitleWrapper = _styled.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([""])));
+var TitleWrapper = exports.TitleWrapper = _styled.default.span({});

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

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpinnerWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _styled2 = require("../IconAndTitleLayout/styled");
-var _templateObject;
-var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  vertical-align: text-bottom;\n  padding: 0px;\n"])));
+var SpinnerWrapper = exports.SpinnerWrapper = (0, _styled.default)(_styled2.IconTitleWrapper)({
+  verticalAlign: 'text-bottom',
+  padding: '0px'
+});

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

@@ -5,13 +5,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NoLinkAppearance = exports.LowercaseAppearance = exports.LinkAppearance = exports.IconStyledButton = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 // By default buttons will hide overflow and ellipsis content instead of wrapping.
 // This basically turns the button back into inline content
-var IconStyledButton = exports.IconStyledButton = _styled.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  &&& {\n    text-align: initial;\n    display: inline;\n    vertical-align: baseline;\n    border-radius: ", ";\n    border-top-left-radius: 0px;\n    border-bottom-left-radius: 0px;\n    padding: ", " ", ";\n    background-clip: padding-box;\n    box-decoration-break: clone;\n  }\n  > span {\n    display: inline;\n    overflow: initial;\n    text-overflow: initial;\n    white-space: initial;\n    > span {\n      overflow: initial;\n      text-overflow: initial;\n      white-space: initial;\n    }\n  }\n"])), "var(--ds-border-radius-100, 4px)", "var(--ds-space-025, 2px)", "var(--ds-space-075, 6px)");
-var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  margin-left: ", ";\n"])), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
-var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  text-transform: lowercase;\n"])));
-var LinkAppearance = exports.LinkAppearance = _styled.default.a(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    text-decoration: none;\n  }\n"])), "var(--ds-link, ".concat(_colors.B400, ")"));
+var IconStyledButton = exports.IconStyledButton = _styled.default.span({
+  '&&&': {
+    textAlign: 'initial',
+    display: 'inline',
+    verticalAlign: 'baseline',
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    borderTopLeftRadius: '0px',
+    borderBottomLeftRadius: '0px',
+    padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)"),
+    backgroundClip: 'padding-box',
+    boxDecorationBreak: 'clone'
+  },
+  '> span': {
+    display: 'inline',
+    overflow: 'initial',
+    textOverflow: 'initial',
+    whiteSpace: 'initial',
+    '> span': {
+      overflow: 'initial',
+      textOverflow: 'initial',
+      whiteSpace: 'initial'
+    }
+  }
+});
+var NoLinkAppearance = exports.NoLinkAppearance = _styled.default.span({
+  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  marginLeft: "var(--ds-space-050, 4px)"
+});
+var LowercaseAppearance = exports.LowercaseAppearance = _styled.default.span({
+  textTransform: 'lowercase'
+});
+var LinkAppearance = exports.LinkAppearance = _styled.default.a({
+  color: "var(--ds-link, ".concat(_colors.B400, ")"),
+  '&:hover': {
+    textDecoration: 'none'
+  }
+});

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

@@ -1,11 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.breakWordsCss = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
-var breakWordsCss = exports.breakWordsCss = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  white-space: pre-line;\n  word-break: break-all;\n"])));
+var breakWordsCss = exports.breakWordsCss = (0, _react.css)({
+  whiteSpace: 'pre-line',
+  wordBreak: 'break-all'
+});

package/dist/cjs/view/LinkUrl/index.js

@@ -17,7 +17,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId"],
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "26.55.2",
+  packageVersion: "26.56.0",
   componentName: 'linkUrl'
 };
 var Link = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/Icon.js

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.blockCardIconImageClassName = exports.Icon = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _utils = require("./utils");
-var _templateObject, _templateObject2;
 /** @jsx jsx */
+
 /**
  * Class name for selecting non-flexible block card icon image
  *
@@ -24,13 +23,22 @@ var getImageStyles = function getImageStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n  "])), (0, _utils.gs)(2), (0, _utils.gs)(2));
+  return (0, _react.css)({
+    height: (0, _utils.gs)(2),
+    width: (0, _utils.gs)(2)
+  });
 };
 var getSpanStyles = function getSpanStyles(isFlexibleUi) {
   if (isFlexibleUi) {
     return;
   }
-  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    height: ", ";\n    width: ", ";\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  "])), (0, _utils.gs)(2.5), (0, _utils.gs)(2));
+  return (0, _react.css)({
+    height: (0, _utils.gs)(2.5),
+    width: (0, _utils.gs)(2),
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  });
 };
 var Icon = exports.Icon = function Icon(_ref) {
   var url = _ref.url,

package/dist/cjs/view/common/ai-icon-loading/index.js

@@ -5,19 +5,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
 var _constants = require("../ai-prism/constants");
-var _templateObject;
 /** @jsx jsx */
+
 /**
  * The bulk of this file is originally from
  * https://bitbucket.org/atlassian/barrel/src/master/ui/platform/ui-kit/ai
  * with modifications
  */
 
-var bounce = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    transform: translateY(0);\n  }\n\n  // 200ms of 1200ms = 16.67%\n  16.67% {\n    transform: translateY(-2px);\n  }\n\n  // 400ms of 1200ms = 33.33%\n  33.33% {\n    transform: translateY(0px);\n  }\n"])));
+var bounce = (0, _react.keyframes)({
+  from: {
+    transform: 'translateY(0)'
+  },
+  '16.67%': {
+    transform: 'translateY(-2px)'
+  },
+  '33.33%': {
+    transform: 'translateY(0px)'
+  }
+});
 var BASE_DELAY = 400;
 var QUEUE_DELAY = 200;
 var animationStyles = (0, _react.css)({