@atlaskit/smart-card 22.2.0 → 22.3.0

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

@@ -19,7 +19,7 @@ var _react = require("react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
@@ -45,7 +45,7 @@ var _excluded = ["triggerRef"];
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
@@ -98,25 +98,25 @@ var ActionGroup = function ActionGroup(_ref) {
       });
     }
   }, [isOpen, onOpenChange]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group",
     onClick: onClick
-  }, (0, _core.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _core.jsx)(_dropdownMenu.default, {
+  }, (0, _react2.jsx)(_buttonGroup.default, null, (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick), dropdownItemActions.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
     isOpen: isOpen,
     onOpenChange: onOpenChange,
     trigger: function trigger(_ref2) {
       var triggerRef = _ref2.triggerRef,
           props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return (0, _core.jsx)(_tooltip.default, {
-        content: (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
+      return (0, _react2.jsx)(_tooltip.default, {
+        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
         hideTooltipOnClick: true,
         testId: "action-group-more-button-tooltip",
         tag: "span"
-      }, (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+      }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
         spacing: _utils2.sizeToButtonSpacing[size],
         testId: "action-group-more-button",
-        iconBefore: (0, _core.jsx)(_more.default, {
+        iconBefore: (0, _react2.jsx)(_more.default, {
           label: "more"
         }),
         ref: triggerRef

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged
@@ -52,7 +52,7 @@ var Block = function Block(_ref) {
   (0, _react.useEffect)(function () {
     onRender && onRender();
   }, [onRender]);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [getBlockStyles(direction, size), overrideCss],
     "data-smart-block": true,
     "data-testid": testId,

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -24,11 +24,11 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 var getAlignmentStyles = function getAlignmentStyles(align) {
   switch (align) {
     case _constants.SmartLinkAlignment.Right:
-      return (0, _core.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, _react2.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      "])));
 
     case _constants.SmartLinkAlignment.Left:
     default:
-      return (0, _core.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, _react2.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      "])));
   }
 };
 
@@ -36,19 +36,19 @@ var getGapStyles = function getGapStyles(size, align) {
   var gap = (0, _utils.getGapSize)(size);
 
   if (align === _constants.SmartLinkAlignment.Right) {
-    return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      > span {\n        margin-left: ", "rem;\n        &:first-child {\n          margin-left: initial;\n        }\n      }\n    "])), gap);
+    return (0, _react2.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, _core.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, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);
 };
 
 var getHorizontalDirectionStyles = function getHorizontalDirectionStyles(size, align) {
   var lineHeight = (0, _utils2.getMaxLineHeight)(size);
-  return (0, _core.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));
+  return (0, _react2.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));
 };
 
 var getElementGroupStyles = function getElementGroupStyles(direction, size, align, width) {
-  return (0, _core.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  min-width: 10%;\n  ", "\n  ", "\n"])), (0, _utils.getBaseStyles)(direction, size), getAlignmentStyles(align), width === _constants.SmartLinkWidth.Flexible ? "flex: 1 3;" : '', direction === _constants.SmartLinkDirection.Horizontal ? getHorizontalDirectionStyles(size, align) : '');
 };
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
@@ -74,7 +74,7 @@ var ElementGroup = function ElementGroup(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-group' : _ref$testId,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? _constants.SmartLinkWidth.FitToContent : _ref$width;
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: [getElementGroupStyles(direction, size, align, width), overrideCss],
     "data-smart-element-group": true,
     "data-testid": testId

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -32,7 +32,7 @@ var getActionGroupStyles = function getActionGroupStyles(size) {
     // The biggest height of the action button exceeds the max line-height
     // of the elements causing the action on the block with x-large size to
     // get cut at the bottom.
-    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      max-height: 2rem;\n    "])));
   }
 };
 /**

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

@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -41,7 +41,7 @@ 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, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    line-height: ", "rem;\n    ", "\n  "])), lineHeight, (0, _utils2.getTruncateStyles)(maxLines, lineHeight + 'rem'));
 };
 
 var getMaxLines = function getMaxLines(maxLines) {

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

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _elements = require("../../../elements");
 
@@ -35,11 +35,11 @@ var _excluded = ["actionGroup", "retry", "position", "testId", "title"];
 
 var _templateObject, _templateObject2;
 
-var actionStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _token.tokens.errorMessageHover);
+var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _token.tokens.errorMessageHover);
 
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _core.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)), _token.tokens.errorMessage, _token.tokens.focus);
+  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)), _token.tokens.errorMessage, _token.tokens.focus);
 };
 /**
  * Represents an Errored TitleBlock view.
@@ -66,20 +66,20 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
-  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+  return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
-  }), (0, _core.jsx)(_elements.LinkIcon, {
+  }), (0, _react2.jsx)(_elements.LinkIcon, {
     position: position
-  }), title, descriptor && (0, _core.jsx)(_elementGroup.default, {
+  }), title, descriptor && (0, _react2.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
-  }, (0, _core.jsx)("span", {
+  }, (0, _react2.jsx)("span", {
     className: hasAction ? 'has-action' : '',
     css: getMessageStyles(size, hasAction),
     onClick: onClick,
     "data-testid": "".concat(testId, "-errored-view-message"),
     tabIndex: hasAction ? 0 : -1
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, descriptor, {
     values: values
   })))), actionGroup);
 };

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

@@ -19,7 +19,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../../constants");
 
@@ -43,7 +43,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var getActionStyles = function getActionStyles(showOnHover, isOpen) {
   if (showOnHover && !isOpen) {
-    return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
+    return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n      .actions-button-group {\n        opacity: 0;\n      }\n\n      &:hover .actions-button-group,\n      .actions-button-group:focus-within {\n        opacity: 1;\n      }\n    "])));
   }
 };
 
@@ -119,7 +119,7 @@ var TitleBlock = function TitleBlock(_ref) {
   });
 
   var actionStyles = getActionStyles(showActionOnHover, actionDropdownOpen);
-  var combinedCss = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
+  var combinedCss = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", " ", "\n  "])), actionStyles, overrideCss);
   var overrideText = !!text ? {
     text: text
   } : {};

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

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _block = _interopRequireDefault(require("../../block"));
 
@@ -40,12 +40,12 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
   var iconWidth = (0, _utils.getIconWidth)(size);
   var iconStyles = (0, _utils.getIconSizeStyles)(iconWidth);
-  return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
+  return (0, _react2.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
-  }), (0, _core.jsx)("span", {
+  }), (0, _react2.jsx)("span", {
     css: iconStyles,
     "data-testid": "".concat(testId, "-icon")
-  }, (0, _core.jsx)(_loadingSkeleton.default, {
+  }, (0, _react2.jsx)(_loadingSkeleton.default, {
     testId: "".concat(testId, "-icon-loading")
   })), title, actionGroup);
 };

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

@@ -21,7 +21,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../constants");
 
@@ -54,11 +54,11 @@ exports.ElementDisplaySchema = ElementDisplaySchema;
 var getDirectionStyles = function getDirectionStyles(direction) {
   switch (direction) {
     case _constants.SmartLinkDirection.Vertical:
-      return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: column;\n        align-items: flex-start;\n      "])));
+      return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: column;\n        align-items: flex-start;\n      "])));
 
     case _constants.SmartLinkDirection.Horizontal:
     default:
-      return (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: row;\n        align-items: center;\n      "])));
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        flex-direction: row;\n        align-items: center;\n      "])));
   }
 };
 
@@ -82,11 +82,11 @@ var getGapSize = function getGapSize(size) {
 exports.getGapSize = getGapSize;
 
 var getBaseStyles = function getBaseStyles(direction, size) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
 
 exports.getBaseStyles = getBaseStyles;
-var highlightRemoveStyles = (0, _core.css)(_templateObject4 || (_templateObject4 = (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 highlightRemoveStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (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"])));
 exports.highlightRemoveStyles = highlightRemoveStyles;
 
 var isActionGroup = function isActionGroup(node) {

package/dist/cjs/view/FlexibleCard/components/common/image-icon/index.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _reactRenderImage = _interopRequireDefault(require("react-render-image"));
 
@@ -21,12 +21,12 @@ var ImageIcon = function ImageIcon(_ref) {
       testId = _ref.testId,
       url = _ref.url,
       onError = _ref.onError;
-  return (0, _core.jsx)(_reactRenderImage.default, {
+  return (0, _react2.jsx)(_reactRenderImage.default, {
     src: url,
-    loading: (0, _core.jsx)(_loadingSkeleton.default, {
+    loading: (0, _react2.jsx)(_loadingSkeleton.default, {
       testId: "".concat(testId, "-loading")
     }),
-    loaded: (0, _core.jsx)("img", {
+    loaded: (0, _react2.jsx)("img", {
       src: url,
       "data-testid": "".concat(testId, "-image")
     }),

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _tokens = require("@atlaskit/tokens");
 
@@ -21,9 +21,9 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
   var testId = _ref.testId,
       width = _ref.width,
       height = _ref.height;
-  var animationNameStyles = (0, _core.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    0% { background-position: 50%  0; }\n    100% { background-position: -50% 0; }\n  "])));
-  var styles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", "rem;\n    height: ", "rem;\n    border-radius: 2px;\n    user-select: none;\n    background: ", ";\n    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "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, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
-  return (0, _core.jsx)("span", {
+  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    // TODO: https://product-fabric.atlassian.net/browse/DSP-4236\n    background-image: linear-gradient(\n      to right,\n      ", " 0%,\n      ", " 20%,\n      ", " 40%,\n      ", "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, (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton', '#edeef1'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), (0, _tokens.token)('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+  return (0, _react2.jsx)("span", {
     css: styles,
     "data-testid": testId
   });

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _constants = require("../../../../constants");
 
@@ -31,7 +31,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var elevationStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
+var elevationStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  border-radius: 1.5px;\n  box-shadow: ", ";\n  margin: 2px;\n"])), _token.tokens.elevation);
 
 var getGap = function getGap(size) {
   switch (size) {
@@ -67,10 +67,10 @@ var getPadding = function getPadding(size) {
   }
 };
 
-var clickableContainerStyles = (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
+var clickableContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  // Position any interactive elements at the top of the z-index stack.\n  a,\n  button,\n  .has-action {\n    position: relative;\n    z-index: 1;\n  }\n"])));
 
 var getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer) {
-  return (0, _core.css)(_templateObject3 || (_templateObject3 = (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(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (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(_token.tokens.background, ";"), hidePadding ? '' : "padding: ".concat(getPadding(size), ";"), hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 
 exports.getContainerStyles = getContainerStyles;
@@ -119,7 +119,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children, onClick)
       target = _ref2.anchorTarget,
       text = _ref2.text;
 
-  return (0, _core.jsx)(_layeredLink.default, {
+  return (0, _react2.jsx)(_layeredLink.default, {
     onClick: onClick,
     target: target,
     testId: testId,
@@ -157,7 +157,7 @@ var Container = function Container(_ref3) {
       _ref3$theme = _ref3.theme,
       theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId

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

@@ -11,11 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _templateObject;
 
-var styles = (0, _core.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-x: 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)(_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-x: 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"])));
 /**
  * An anchor component to cover the entire container creating a clickable area.
  * @internal
@@ -28,7 +28,7 @@ var LayeredLink = function LayeredLink(_ref) {
       testId = _ref.testId,
       text = _ref.text,
       url = _ref.url;
-  return (0, _core.jsx)("a", {
+  return (0, _react2.jsx)("a", {
     className: "layered-link",
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 
@@ -22,7 +22,7 @@ var _templateObject, _templateObject2;
 var MAX_COUNT = 4;
 
 var getStyles = function getStyles(size) {
-  var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n  "])));
+  var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-flex;\n  "])));
 
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -33,7 +33,7 @@ var getStyles = function getStyles(size) {
     case _constants.SmartLinkSize.Medium:
     case _constants.SmartLinkSize.Small:
     default:
-      return (0, _core.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);
+      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);
   }
 };
 /**
@@ -61,13 +61,13 @@ var AvatarGroup = function AvatarGroup(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: [getStyles(size), overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-avatar-group": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_avatarGroup.default, {
+  }, (0, _react2.jsx)(_avatarGroup.default, {
     maxCount: maxCount,
     appearance: "stack",
     size: "small",

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _token = require("../../../../../utils/token");
 
@@ -29,9 +29,9 @@ var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon")
 
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 
-var badgeStyles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = (0, _core.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"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
-var labelStyles = (0, _core.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"])), _token.tokens.badgeText);
+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"])), _token.tokens.badgeIcon, (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"])), _token.tokens.badgeText);
 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) {
@@ -48,7 +48,7 @@ var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
 
 var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
   if (icon) {
-    return (0, _core.jsx)(_atlaskitIcon.default, {
+    return (0, _react2.jsx)(_atlaskitIcon.default, {
       icon: icon,
       label: icon,
       testId: "".concat(testId, "-icon")
@@ -58,7 +58,7 @@ var renderAtlaskitIcon = function renderAtlaskitIcon(icon, testId) {
 
 var renderImageIcon = function renderImageIcon(url, testId) {
   if (url) {
-    return (0, _core.jsx)(_imageIcon.default, {
+    return (0, _react2.jsx)(_imageIcon.default, {
       testId: testId,
       url: url
     });
@@ -94,15 +94,15 @@ var Badge = function Badge(_ref) {
     return null;
   }
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: [badgeStyles, overrideCss],
     "data-fit-to-content": true,
     "data-smart-element": name,
     "data-smart-element-badge": true,
     "data-testid": testId
-  }, (0, _core.jsx)("span", {
+  }, (0, _react2.jsx)("span", {
     css: iconStyles
-  }, badgeIcon), (0, _core.jsx)("span", {
+  }, badgeIcon), (0, _react2.jsx)("span", {
     css: labelStyles,
     "data-testid": "".concat(testId, "-label")
   }, formattedMessageOrLabel));

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

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactIntlNext = require("react-intl-next");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _utils = require("../../utils");
 
@@ -27,7 +27,7 @@ var _messages = require("../../../../../messages");
 
 var _templateObject;
 
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
   created: {
     relative: _messages.messages.created_on_relative,
@@ -85,13 +85,13 @@ var DateTime = function DateTime(_ref) {
     });
   }
 
-  return (0, _core.jsx)("span", {
+  return (0, _react2.jsx)("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element": name,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, text ? "".concat(text, " ").concat(context) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
+  }, text ? "".concat(text, " ").concat(context) : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }