@atlaskit/smart-card 26.55.2 → 26.56.0

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

@@ -10,30 +10,57 @@ var _react = require("@emotion/react");
 var _constants = require("../../../../../constants");
 var _utils = require("../utils");
 var _utils2 = require("../../utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject;
 /** @jsx jsx */
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: end;\n        -ms-flex-align: end;\n        justify-content: flex-end;\n        text-align: right;\n      "])));
+      return (0, _react.css)({
+        WebkitBoxAlign: 'end',
+        MsFlexAlign: 'end',
+        justifyContent: 'flex-end',
+        textAlign: 'right'
+      });
     case _constants.SmartLinkAlignment.Left:
     default:
-      return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        -webkit-box-align: start;\n        -ms-flex-align: start;\n        justify-content: flex-start;\n        text-align: left;\n      "])));
+      return (0, _react.css)({
+        WebkitBoxAlign: 'start',
+        MsFlexAlign: 'start',
+        justifyContent: 'flex-start',
+        textAlign: 'left'
+      });
   }
 };
 var getGapStyles = function getGapStyles(size, align) {
   var gap = (0, _utils.getGapSize)(size);
   if (align === _constants.SmartLinkAlignment.Right) {
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n      }\n\n      > span:first-child {\n        margin-left: initial;\n      }\n    "])), gap);
+    return (0, _react.css)({
+      '> span': {
+        marginLeft: "".concat(gap, "rem")
+      },
+      '> span:first-child': {
+        marginLeft: 'initial'
+      }
+    });
   }
-  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
+  return (0, _react.css)({
+    '> span': {
+      marginRight: "".concat(gap, "rem"),
+      '&:last-child': {
+        marginRight: 'initial'
+      }
+    }
+  });
 };
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
+  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _utils2.getTruncateStyles)(1, lineHeight + 'rem'), getGapStyles(size, align));
 };
 var getElementGroupStyles = exports.getElementGroupStyles = function getElementGroupStyles(direction, size, align, width, position) {
-  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
+  return (0, _react.css)((0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), {
+    minWidth: '10%'
+  }, width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '', position === _constants.SmartLinkPosition.Top ? 'align-self: flex-start;' : '');
 };
 
 /**

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../../constants");
@@ -16,7 +15,6 @@ var _block = _interopRequireDefault(require("../block"));
 var _elementGroup = _interopRequireDefault(require("../element-group"));
 var _utils2 = require("../../utils");
 var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
-var _templateObject;
 var DEFAULT_MAX_LINES = 2;
 var MAXIMUM_MAX_LINES = 2;
 var MINIMUM_MAX_LINES = 1;
@@ -26,7 +24,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 = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+  return (0, _react2.css)({
+    lineHeight: "".concat(lineHeight, "rem")
+  }, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
 };
 var getMaxLines = function getMaxLines(maxLines) {
   if (maxLines > MAXIMUM_MAX_LINES) {

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

@@ -16,7 +16,7 @@ var _constants = require("../../../../../../constants");
 var _block = _interopRequireDefault(require("../../block"));
 var _elements = require("../../../elements");
 var _excluded = ["ignoreContainerPadding", "onError", "overrideCss", "placement", "testId", "overrideUrl"];
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,10 +38,20 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var getPreviewBlockStyles = function getPreviewBlockStyles(placement, ignoreContainerPadding) {
   if (placement === _constants.MediaPlacement.Left || placement === _constants.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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 === _constants.MediaPlacement.Left ? "left: ".concat(containerPadding, ";") : '', placement === _constants.MediaPlacement.Right ? "right: ".concat(containerPadding, ";") : '');
   }
   if (ignoreContainerPadding) {
-    return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react2.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)'
+      }
+    });
   }
 };
 
@@ -65,7 +75,7 @@ var PreviewBlockResolvedView = function PreviewBlockResolvedView(_ref) {
     styles = _useState2[0],
     setStyles = _useState2[1];
   var updateStyles = (0, _react.useCallback)(function () {
-    setStyles((0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      ", "\n      ", "\n    "])), getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
+    setStyles((0, _react2.css)(getPreviewBlockStyles(placement, ignoreContainerPadding), overrideCss));
   }, [ignoreContainerPadding, overrideCss, placement]);
   (0, _react.useEffect)(function () {
     updateStyles();

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -21,7 +20,6 @@ var _errored = require("./errored");
 var _resolved = require("./resolved");
 var _resolving = require("./resolving");
 var _analytics = require("./analytics");
-var _templateObject;
 var _excluded = ["testId", "url", "renderers"];
 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; }
@@ -97,7 +95,9 @@ var RelatedUrlsBlock = function RelatedUrlsBlock(_ref) {
   if (relatedUrls) {
     return /*#__PURE__*/_react.default.createElement(_resolved.RelatedUrlsResolvedView, (0, _extends2.default)({
       renderers: renderers,
-      overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          min-height: 1.55rem;\n        "]))),
+      overrideCss: (0, _react2.css)({
+        minHeight: '1.55rem'
+      }),
       testId: "".concat(testId, "-resolved-view"),
       relatedUrlsResponse: relatedUrls
     }, blockProps));

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
@@ -18,7 +17,6 @@ var _messages = require("../../../../../../../messages");
 var _utils = require("../../../../../components/utils");
 var _text = _interopRequireDefault(require("../../../../elements/text"));
 var _resolvedResultStack = _interopRequireDefault(require("./resolved-result-stack"));
-var _templateObject;
 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; }
 var RelatedUrlList = function RelatedUrlList(_ref) {
@@ -52,7 +50,9 @@ var RelatedUrlList = function RelatedUrlList(_ref) {
     alignBlock: "center",
     spread: "space-between"
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
-    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n              font-weight: ", ";\n            "])), "var(--ds-font-weight-medium, 500)"),
+    overrideCss: (0, _react2.css)({
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }),
     message: {
       descriptor: title
     }

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
@@ -17,12 +16,25 @@ var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
-var _templateObject, _templateObject2;
 /** @jsx jsx */
-var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
+var actionStyles = (0, _react2.css)({
+  cursor: 'pointer',
+  ':hover': {
+    color: "var(--ds-text-subtle, #8993A4)",
+    textDecoration: 'underline'
+  }
+});
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
+  return (0, _react2.css)({
+    flex: '1 1 auto',
+    justifyContent: 'flex-end'
+  }, hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), {
+    color: "var(--ds-text-disabled, #6B778C)",
+    ':focus': {
+      outline: "var(--ds-border-focused, #388BFF)".concat(" solid 2px")
+    }
+  });
 };
 
 /**

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

@@ -6,7 +6,6 @@ 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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
@@ -15,7 +14,6 @@ var _block = _interopRequireDefault(require("../../block"));
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../utils");
-var _templateObject;
 var _excluded = ["actionGroup", "metadata", "position", "subtitle", "testId", "text", "title", "metadataPosition", "hideIcon"];
 /**
  * This renders a fully resolved TitleBlock.
@@ -44,7 +42,9 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible,
-    overrideCss: (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n          gap: 0.25rem;\n        "])))
+    overrideCss: (0, _react2.css)({
+      gap: "var(--ds-space-050, 0.25rem)"
+    })
   }, title, subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {

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

@@ -79,6 +79,8 @@ var getBaseStyles = exports.getBaseStyles = function getBaseStyles(direction, si
     }
   });
 };
+
+// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var highlightRemoveStyles = exports.highlightRemoveStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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.default.isValidElement(node) && node.type === _actionGroup.default;

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

@@ -5,17 +5,40 @@ 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 _templateObject, _templateObject2;
 /** @jsx jsx */
+
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
     width = _ref.width,
     height = _ref.height;
-  var animationNameStyles = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react2.keyframes)({
+    '0%': {
+      backgroundPosition: '50% 0'
+    },
+    '100%': {
+      backgroundPosition: '-50% 0'
+    }
+  });
+  var styles = (0, _react2.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 (0, _react2.jsx)("span", {
     css: styles,
     "data-testid": testId

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

@@ -98,6 +98,8 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 var getContainerStyles = exports.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 (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -5,13 +5,43 @@ 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 _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
-var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react2.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/cjs/view/FlexibleCard/components/elements/atlaskit-badge/index.js

@@ -5,13 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
 var _react2 = require("@emotion/react");
-var _templateObject;
 /** @jsx jsx */
-var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n"])));
+
+var badgeStyles = (0, _react2.css)({
+  alignItems: 'center',
+  display: 'inline-flex'
+});
 
 /**
  * A base element that displays a visual indicator for a numeric value

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

@@ -15,7 +15,7 @@ var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
 var _reactIntlNext = require("react-intl-next");
 var _utils = require("../../utils");
-var _templateObject, _templateObject2;
+var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -23,7 +23,13 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var MAX_COUNT = 4;
 var getStyles = function getStyles(size) {
-  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n    ul,\n    ul {\n      margin-right: 0.5rem;\n      margin-top: 0;\n    }\n  "])));
+  var styles = (0, _react2.css)({
+    display: 'inline-flex',
+    ul: {
+      marginRight: "var(--ds-space-100, 0.5rem)",
+      marginTop: 0
+    }
+  });
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
     case _constants.SmartLinkSize.Large:
@@ -32,7 +38,8 @@ var getStyles = function getStyles(size) {
     case _constants.SmartLinkSize.Medium:
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
+      // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
+      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        li {\n          span,\n          svg {\n            max-height: 1.25rem;\n            max-width: 1.25rem;\n          }\n        }\n      "])), styles);
   }
 };
 var getPersonNameWithPrefix = function getPersonNameWithPrefix(elementName, personName, intl) {

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

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

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

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

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

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