@atlaskit/smart-card 26.55.2 → 26.56.0

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

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject;
 var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title", "metadataPosition", "hideIcon"];
 import React from 'react';
 import { css } from '@emotion/react';
@@ -38,7 +36,9 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible,
-    overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          gap: 0.25rem;\n        "])))
+    overrideCss: css({
+      gap: "var(--ds-space-050, 0.25rem)"
+    })
   }, title, subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {

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

@@ -70,6 +70,8 @@ export var getBaseStyles = function getBaseStyles(direction, size) {
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var highlightRemoveStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;

package/dist/esm/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx, keyframes } from '@emotion/react';
@@ -7,8 +5,32 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
-  var animationNameStyles = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    background-image: linear-gradient(\n      to right,\n      transparent 0%,\n      ", " 20%,\n      transparent 40%,\n      transparent 100%\n    );\n    background-repeat: no-repeat;\n    background-size: 280% 100%;\n    display: inline-block;\n\n    animation-duration: 1s;\n    animation-fill-mode: forwards;\n    animation-iteration-count: infinite;\n    animation-name: ", ";\n    animation-timing-function: linear;\n  "])), width, height, "var(--ds-skeleton-subtle, #f6f7f8)", "var(--ds-skeleton, #edeef1)", animationNameStyles);
+  var animationNameStyles = keyframes({
+    '0%': {
+      backgroundPosition: '50% 0'
+    },
+    '100%': {
+      backgroundPosition: '-50% 0'
+    }
+  });
+  var styles = css({
+    width: "".concat(width, "rem"),
+    height: "".concat(height, "rem"),
+    borderRadius: '2px',
+    userSelect: 'none',
+    background: "var(--ds-skeleton-subtle, #f6f7f8)",
+    backgroundImage: "linear-gradient( to right, transparent 0%, ".concat("var(--ds-skeleton, #edeef1)", " 20%, transparent 40%, transparent 100% )"),
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: '280% 100%',
+    display: 'inline-block',
+    animationDuration: '1s',
+    animationFillMode: 'forwards',
+    animationIterationCount: 'infinite',
+    animationName: animationNameStyles,
+    animationTimingFunction: 'linear'
+  });
+
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- needs dynamic css
   return jsx("span", {
     css: styles,
     "data-testid": testId

package/dist/esm/view/FlexibleCard/components/container/index.js

@@ -88,6 +88,8 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 export var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
+
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
   return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,10 +1,39 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { jsx, css } from '@emotion/react';
 import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  // Stretch the invisible link over the whole of the post.\n  // Hide the link\u2019s text.\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  overflow: hidden;\n  text-indent: 100%;\n  white-space: nowrap;\n\n  // Needs a heightened specificity to trump other anchor.\n  // Stack it under all other links in the post text.\n  a&.layered-link {\n    position: absolute;\n    z-index: 0;\n  }\n\n  // When hovering over the layered link, any hidden action buttons inside\n  // the Container should become visible.\n  // As actions resides inside blocks and layered link is expected to be\n  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,\n  // its sibling. Using general sibling combinator here to apply styling to\n  // all the siblings of layered link.\n  // The general sibling combinator (~) separates two selectors and matches all\n  // iterations of the second element, that are following the first element\n  // (though not necessarily immediately), and are children of the same parent\n  // element.\n  &:hover ~ * {\n    .actions-button-group {\n      opacity: 1;\n    }\n  }\n"])));
+var styles = css({
+  // Stretch the invisible link over the whole of the post.
+  // Hide the link’s text.
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  overflow: 'hidden',
+  textIndent: '100%',
+  whiteSpace: 'nowrap',
+  // Needs a heightened specificity to trump other anchor.
+  // Stack it under all other links in the post text.
+  'a&.layered-link': {
+    position: 'absolute',
+    zIndex: 0
+  },
+  // When hovering over the layered link, any hidden action buttons inside
+  // the Container should become visible.
+  // As actions resides inside blocks and layered link is expected to be
+  // on the same level of blocks. That makes the blocks, e.g. TitleBlock,
+  // its sibling. Using general sibling combinator here to apply styling to
+  // all the siblings of layered link.
+  // The general sibling combinator (~) separates two selectors and matches all
+  // iterations of the second element, that are following the first element
+  // (though not necessarily immediately), and are children of the same parent
+  // element.
+  '&:hover ~ *': {
+    '.actions-button-group': {
+      opacity: 1
+    }
+  }
+});
 
 /**
  * An anchor component to cover the entire container creating a clickable area.

package/dist/esm/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -1,10 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import AKBadge from '@atlaskit/badge';
 import { css, jsx } from '@emotion/react';
-var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n"])));
+var badgeStyles = css({
+  alignItems: 'center',
+  display: 'inline-flex'
+});
 
 /**
  * A base element that displays a visual indicator for a numeric value

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

@@ -1,9 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 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; }
 /** @jsx jsx */
+
 import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
@@ -14,7 +15,13 @@ import { ElementName } from '../../../../../constants';
 import { getFormattedMessageAsString } from '../../utils';
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
+  var styles = css({
+    display: 'inline-flex',
+    ul: {
+      marginRight: "var(--ds-space-100, 0.5rem)",
+      marginTop: 0
+    }
+  });
   switch (size) {
     case SmartLinkSize.XLarge:
     case SmartLinkSize.Large:
@@ -23,7 +30,8 @@ var getStyles = function getStyles(size) {
     case SmartLinkSize.Medium:
     case SmartLinkSize.Small:
     default:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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/esm/view/FlexibleCard/components/elements/badge/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _messageMapper;
+var _templateObject, _messageMapper;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,9 +9,21 @@ import { IconType } from '../../../../../constants';
 import { messages } from '../../../../../messages';
 import ImageIcon from '../../common/image-icon';
 import AtlaskitIcon from '../../common/atlaskit-icon';
-var badgeStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)", getIconSizeStyles('1rem'));
-var labelStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 = 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 = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", getIconSizeStyles('1rem'));
+var labelStyles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem',
+  paddingLeft: "var(--ds-space-025, 0.125rem)",
+  verticalAlign: 'middle'
+});
 var messageMapper = (_messageMapper = {}, _defineProperty(_messageMapper, IconType.PriorityBlocker, messages.priority_blocker), _defineProperty(_messageMapper, IconType.PriorityCritical, messages.priority_critical), _defineProperty(_messageMapper, IconType.PriorityHigh, messages.priority_high), _defineProperty(_messageMapper, IconType.PriorityHighest, messages.priority_highest), _defineProperty(_messageMapper, IconType.PriorityLow, messages.priority_low), _defineProperty(_messageMapper, IconType.PriorityLowest, messages.priority_lowest), _defineProperty(_messageMapper, IconType.PriorityMajor, messages.priority_major), _defineProperty(_messageMapper, IconType.PriorityMedium, messages.priority_medium), _defineProperty(_messageMapper, IconType.PriorityMinor, messages.priority_minor), _defineProperty(_messageMapper, IconType.PriorityTrivial, messages.priority_trivial), _defineProperty(_messageMapper, IconType.PriorityUndefined, messages.priority_undefined), _messageMapper);
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {

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

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
@@ -8,7 +6,11 @@ import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
 import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(1));
+var styles = css({
+  color: "var(--ds-text-subtlest, #626F86)",
+  fontSize: '0.75rem',
+  lineHeight: '1rem'
+}, getTruncateStyles(1));
 var typeToDescriptorMap = {
   created: {
     relative: messages.created_on_relative,

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

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/glyph/link';
@@ -11,17 +9,33 @@ import { getIconSizeStyles, getIconWidth, getTruncateStyles } from '../../utils'
 var getPositionStyles = function getPositionStyles(position) {
   switch (position) {
     case SmartLinkPosition.Center:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        align-self: center;\n      "])));
+      return css({
+        alignSelf: 'center'
+      });
     case SmartLinkPosition.Top:
     default:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        align-self: flex-start;\n        margin: 0;\n      "])));
+      return css({
+        alignSelf: 'flex-start',
+        margin: 0
+      });
   }
 };
 var getIconStyles = function getIconStyles(position, width) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), getPositionStyles(position), getIconSizeStyles(width));
+  return css(getPositionStyles(position), getIconSizeStyles(width));
 };
 var getCustomRenderStyles = function getCustomRenderStyles(value) {
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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"])), getTruncateStyles(1, value), value, value);
+  return css(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) {
@@ -76,6 +90,7 @@ var Icon = function Icon(_ref) {
   var styles = getIconStyles(position, width);
   var renderStyles = render ? getCustomRenderStyles(width) : undefined;
   return 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/esm/view/FlexibleCard/components/elements/link/index.js

@@ -1,6 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,24 +9,55 @@ import { useMouseDownEvent } from '../../../../../state/analytics/useLinkClicked
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
-var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  flex: 1 1 auto;\n"])));
+var containerStyles = css({
+  flex: '1 1 auto'
+});
 var getThemeStyles = function getThemeStyles(theme) {
   switch (theme) {
     case SmartLinkInternalTheme.Grey:
       // We are being specifc with the CSS selectors to ensure that Confluence overrides
       // do not affect our internal Smart Card styles
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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 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 SmartLinkTheme.Black:
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 css({
+        color: "var(--ds-text-subtle, #44546F)",
+        ':active': {
+          color: "var(--ds-text, #172B4D)"
+        },
+        ':hover': {
+          color: "var(--ds-text-subtle, #44546F)",
+          textDecoration: 'underline'
+        }
+      });
     case SmartLinkTheme.Link:
     default:
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 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 = getLinkSizeStyles(size);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    ", "\n    ", "\n    // Theme should be last to be spread because it contains override values\n    ", "\n  "])), sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
+  return css({
+    flex: '1 1 auto'
+  }, sizeStyles, getTruncateStyles(maxLines, getLinkLineHeight(size), hasSpace ? 'break-word' : 'break-all'), getThemeStyles(theme));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -1,12 +1,13 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import LozengeAction from './lozenge-action';
 import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
+var styles = css({
+  display: 'inline-flex',
+  lineHeight: 'inherit'
+});
 
 /**
  * A base element that displays a Lozenge.

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

@@ -1,8 +1,49 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)");
+export var triggerButtonStyles = 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
-export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)");
-export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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)");
+export var triggerLozengeStyles = 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")
+  }
+});
+export var dropdownItemGroupStyles = 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/esm/view/FlexibleCard/components/elements/media/index.js

@@ -1,5 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
@@ -14,7 +12,36 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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 = 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/esm/view/FlexibleCard/components/elements/text/index.js

@@ -1,11 +1,14 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 var getStyles = function getStyles(maxLines) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", getTruncateStyles(maxLines));
+  return css({
+    color: "var(--ds-text-subtlest, #626F86)",
+    fontSize: '0.75rem',
+    lineHeight: '1rem',
+    whiteSpace: 'normal'
+  }, getTruncateStyles(maxLines));
 };
 
 /**

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

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

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

@@ -1,7 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 var titleFontWeight = '600';
-export var titleBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: center;\n  font-weight: ", ";\n  margin-top: ", ";\n"])), titleFontWeight, "var(--ds-space-100, 8px)");
-export var mainTextStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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)");
-export var connectButtonStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  justify-content: center;\n  margin-top: ", ";\n"])), "var(--ds-space-100, 8px)");
+export var titleBlockStyles = css({
+  justifyContent: 'center',
+  fontWeight: titleFontWeight,
+  marginTop: "var(--ds-space-100, 8px)"
+});
+export var mainTextStyles = css({
+  display: 'inline',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-0, 0px)",
+  fontSize: '0.75rem',
+  textAlign: 'center'
+});
+export var connectButtonStyles = css({
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-100, 8px)"
+});

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

@@ -1,8 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 import { css } from '@emotion/react';
 import { separatorCss } from '../../../styled';
 var elementGap = '0.5rem';
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var metadataBlockCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), separatorCss, elementGap, elementGap);
-export var footerBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 1.5rem;\n"])));
-export var hiddenSnippetStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  visibility: hidden;\n  position: absolute;\n"])));
+export var footerBlockCss = css({
+  height: '1.5rem'
+});
+export var hiddenSnippetStyles = css({
+  visibility: 'hidden',
+  position: 'absolute'
+});

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

@@ -1,9 +1,26 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { css } from '@emotion/react';
-export var loadingViewContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 1rem;\n"])));
-export var skeletonContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 0.625rem;\n  align-items: center;\n"])));
+export var loadingViewContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  padding: "var(--ds-space-200, 1rem)"
+});
+export var skeletonContainer = css({
+  display: 'flex',
+  flexDirection: 'column',
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- needs manual remediation
+  gap: '0.625rem',
+  alignItems: 'center'
+});
 export var getTitleStyles = function getTitleStyles(height) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 1 0 auto;\n    height: ", "rem;\n\n    span {\n      width: 100%;\n    }\n  "])), height);
+  return css({
+    flex: '1 0 auto',
+    height: "".concat(height, "rem"),
+    span: {
+      width: '100%'
+    }
+  });
 };
-export var titleBlockStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  gap: 0.5rem;\n"])));
+export var titleBlockStyles = css({
+  width: '100%',
+  gap: "var(--ds-space-100, 0.5rem)"
+});

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

@@ -1,9 +1,18 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
 var blockGap = '0.5rem';
 var iconGap = '0.5rem';
 var titleFontWeight = '500';
-export var connectButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  margin-top: ", ";\n"])), blockGap);
-export var titleBlockStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  gap: ", " ", ";\n  a {\n    font-weight: ", ";\n  }\n"])), blockGap, iconGap, titleFontWeight);
-export var mainTextStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  font-size: 0.75rem;\n"])), blockGap);
+export var connectButtonStyles = css({
+  justifyContent: 'flex-end',
+  marginTop: blockGap
+});
+export var titleBlockStyles = css({
+  gap: "".concat(blockGap, " ").concat(iconGap),
+  a: {
+    fontWeight: titleFontWeight
+  }
+});
+export var mainTextStyles = css({
+  marginTop: blockGap,
+  fontSize: '0.75rem'
+});

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

@@ -26,7 +26,11 @@ export var separatorCss = css({
     marginRight: elementGap
   }
 });
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var HoverCardContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: none;\n  border-width: 0;\n  box-sizing: border-box;\n  width: ", "rem;\n\n  .", " {\n    display: none;\n  }\n"])), getBooleanFF('platform.linking-platform.smart-card.hover-card-ai-summaries') ? NEW_CARD_WIDTH_REM : CARD_WIDTH_REM, loadingPlaceholderClassName);
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 export var titleBlockCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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);
 export var getTransitionStyles = function getTransitionStyles(snippetHeight) {
   return css({