@atlaskit/smart-card 26.55.2 → 26.56.1

package/dist/esm/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject;
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkPosition, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
@@ -8,25 +8,52 @@ import { getMaxLineHeight, getTruncateStyles } from '../../utils';
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case SmartLinkAlignment.Right:
-      return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return css({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
     case SmartLinkAlignment.Left:
     default:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return css({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
   }
 };
 var getGapStyles = function getGapStyles(size, align) {
   var gap = getGapSize(size);
   if (align === SmartLinkAlignment.Right) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
+    return css({
+      '> span': {
+        marginLeft: "".concat(gap, "rem")
+      },
+      '> span:first-child': {
+        marginLeft: 'initial'
+      }
+    });
   }
-  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+  return css({
+    '> span': {
+      marginRight: "".concat(gap, "rem"),
+      '&:last-child': {
+        marginRight: 'initial'
+      }
+    }
+  });
 };
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = getMaxLineHeight(size);
-  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    vertical-align: middle;\n    ", "\n\n    > span, > div {\n      vertical-align: middle;\n\n      &[data-smart-element-date-time],\n      &[data-smart-element-text] {\n        // Show all/wrapped/truncated\n        display: inline;\n      }\n    }\n\n    ", "\n  "])), getTruncateStyles(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 export var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
-  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), getBaseStyles(direction, size), getAlignmentStyles(align), width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+  return css(getBaseStyles(direction, size), getAlignmentStyles(align), {
+    minWidth: '10%'
+  }, width === SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**

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

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
-var _templateObject;
 import React from 'react';
 import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
@@ -19,7 +17,9 @@ var getElementGroupStyles = function getElementGroupStyles(size, maxLines) {
   // We need the height of the line to be equal on both left and right
   // sides so they line up nicely.
   var lineHeight = getMaxLineHeight(size);
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, getTruncateStyles(maxLines, lineHeight + 'rem'));
+  return css({
+    lineHeight: "".concat(lineHeight, "rem")
+  }, getTruncateStyles(maxLines, lineHeight + 'rem'));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 /** @jsx jsx */
 import React, { useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -29,10 +29,20 @@ import { Preview } from '../../../elements';
 var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
   if (placement === MediaPlacement.Left || placement === MediaPlacement.Right) {
     var containerPadding = ignoreContainerPadding ? '0rem' : 'var(--container-padding)';
+    // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
     return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: ", ";\n      bottom: ", ";\n      width: calc(var(--preview-block-width) - ", ");\n\n      ", "\n      ", "\n\n      [data-smart-element-media='image'] {\n        aspect-ratio: unset;\n        padding-top: unset;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    "])), containerPadding, containerPadding, containerPadding, placement === MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
   }
   if (ignoreContainerPadding) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      margin-left: calc(var(--container-gap-left) * -1);\n      margin-right: calc(var(--container-gap-right) * -1);\n      &:first-of-type {\n        margin-top: calc(var(--container-padding) * -1);\n      }\n      &:last-of-type {\n        margin-bottom: calc(var(--container-padding) * -1);\n      }\n    "])));
+    return css({
+      marginLeft: 'calc(var(--container-gap-left) * -1)',
+      marginRight: 'calc(var(--container-gap-right) * -1)',
+      '&:first-of-type': {
+        marginTop: 'calc(var(--container-padding) * -1)'
+      },
+      '&:last-of-type': {
+        marginBottom: 'calc(var(--container-padding) * -1)'
+      }
+    });
   }
 };
 
@@ -56,7 +66,7 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     styles = _useState2[0],
     setStyles = _useState2[1];
   var updateStyles = useCallback(function () {
-    setStyles(css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+    setStyles(css(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
   }, [ignoreContainerPadding, overrideCss, placement]);
   useEffect(function () {
     updateStyles();

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

@@ -1,9 +1,7 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _templateObject;
 var _excluded = ["testId", "url", "renderers"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useState } from 'react';
@@ -87,7 +85,9 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
   if (relatedUrls) {
     return /*#__PURE__*/React.createElement(RelatedUrlsResolvedView, _extends({
       renderers: renderers,
-      overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          min-height: 1.55rem;\n        "]))),
+      overrideCss: css({
+        minHeight: '1.55rem'
+      }),
       testId: "".concat(testId, "-resolved-view"),
       relatedUrlsResponse: relatedUrls
     }, blockProps));

package/dist/esm/view/FlexibleCard/components/blocks/related-urls-block/resolved/related-url-list/index.js

@@ -1,6 +1,4 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _templateObject;
 import React, { useCallback, useState } from 'react';
 import { useIntl } from 'react-intl-next';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -42,7 +40,9 @@ var RelatedUrlList = function RelatedUrlList(_ref) {
     alignBlock: "center",
     spread: "space-between"
   }, /*#__PURE__*/React.createElement(Text, {
-    overrideCss: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n              font-weight: ", ";\n            "])), "var(--ds-font-weight-medium, 500)"),
+    overrideCss: css({
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }),
     message: {
       descriptor: title
     }

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

@@ -1,8 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
@@ -12,10 +10,24 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-var actionStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
+var actionStyles = css({
+  cursor: 'pointer',
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = getLinkSizeStyles(size);
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
+  return css({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  }, hasAction ? actionStyles : '', sizeStyles, getTruncateStyles(1, getLinkLineHeight(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    ':focus': {
+      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
+    }
+  });
 };
 
 /**

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.