@atlaskit/smart-card 22.2.1 → 22.3.1

package/dist/es2019/view/HoverCard/components/HoverCardComponent.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import Popup from '@atlaskit/popup';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React, { useCallback, useRef } from 'react';
 import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkActions';
 import { useSmartLinkRenderers } from '../../../state/renderers';

package/dist/es2019/view/HoverCard/components/HoverCardLoadingView.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import LoadingSkeleton from '../../FlexibleCard/components/common/loading-skeleton';
 import FlexibleCard from '../../FlexibleCard';

package/dist/es2019/view/HoverCard/components/SnippetOrPreview.js

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useRef } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import extractPreview from '../../../extractors/flexible/extract-preview';
 import { PreviewBlock, SnippetBlock } from '../../FlexibleCard/components/blocks';
 import { getTransitionStyles } from '../styled';

package/dist/es2019/view/HoverCard/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useSmartLinkAnalytics } from '../../state/analytics';

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

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 export const flexibleUiOptions = {

package/dist/es2019/view/InlineCard/Icon.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 const placeholderShimmer = keyframes`
   0% {
@@ -43,13 +43,12 @@ export const Shimmer = styled.span`
   left: 50%;
   transform: translate(-50%, -50%);
   background: ${token('color.skeleton.subtle', '#f6f7f8')};
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-4236
   background-image: linear-gradient(
     to right,
-    ${token('color.skeleton.subtle', '#f6f7f8')} 0%,
+    ${token('utility.UNSAFE_util.transparent', '#f6f7f8')} 0%,
     ${token('color.skeleton', '#edeef1')} 20%,
     ${token('color.skeleton.subtle', '#f6f7f8')} 40%,
-    ${token('color.skeleton.subtle', '#f6f7f8')}100%
+    ${token('color.skeleton.subtle', '#f6f7f8')} 100%
   );
   background-repeat: no-repeat;
   background-size: 40px 14px;

package/dist/es2019/view/common/Byline.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import { gs, mq } from './utils';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import ImageLoader from 'react-render-image';
 import LinkIcon from '@atlaskit/icon/glyph/link';

package/dist/es2019/view/common/Metadata.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { gs } from './utils';
 import { N300 } from '@atlaskit/theme/colors';

package/dist/es2019/view/common/MetadataList.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Metadata } from './Metadata';
 import { gs } from './utils';
 export const metadataListClassName = 'smart-link-metadata-list';

package/dist/es2019/view/common/ModalHeader.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Fragment as F } from 'react';
 import { useModal } from '@atlaskit/modal-dialog';
 import EditorCloseIcon from '@atlaskit/icon/glyph/editor/close';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "22.2.1",
+	"version": "22.3.1",
 	"sideEffects": false
 }

package/dist/esm/view/BlockCard/components/Action.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useState } from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { ActionIcon } from './ActionIcon';

package/dist/esm/view/BlockCard/components/ActionList.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["triggerRef"];
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

package/dist/esm/view/BlockCard/components/CollaboratorList.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import AvatarGroup from '@atlaskit/avatar-group';
 import { mq } from '../../common/utils';
 export var CollaboratorList = function CollaboratorList(_ref) {

package/dist/esm/view/BlockCard/components/Content.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export var blockCardContentClassName = 'block-card-content';
 export var Content = function Content(_ref) {

package/dist/esm/view/BlockCard/components/ContentFooter.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export var contentFooterClassName = 'smart-link-content-footer';
 export var ContentFooter = function ContentFooter(_ref) {

package/dist/esm/view/BlockCard/components/ContentHeader.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 export var blockCardContentHeaderClassName = 'block-card-content-header';
 export var ContentHeader = function ContentHeader(_ref) {
   var onClick = _ref.onClick,

package/dist/esm/view/BlockCard/components/Emoji.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { gs } from '../../common/utils';
 export var Emoji = function Emoji(_ref) {

package/dist/esm/view/BlockCard/components/Frame.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { N20A, N30A, B200, N40A, N50A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

package/dist/esm/view/BlockCard/components/Link.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { B400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 export var Link = function Link(_ref) {

package/dist/esm/view/BlockCard/components/Name.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { fontSize } from '@atlaskit/theme/constants';
 import { gs } from '../../common/utils';
 export var blockCardContentHeaderNameClassName = 'block-card-content-header-name';

package/dist/esm/view/BlockCard/components/Provider.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import { gs } from '../../common/utils';
 import { token } from '@atlaskit/tokens';

package/dist/esm/view/BlockCard/components/Thumbnail.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export var Thumbnail = function Thumbnail(props) {
   return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);

package/dist/esm/view/BlockCard/components/UnresolvedText.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 export var UnresolvedText = function UnresolvedText(_ref) {
   var icon = _ref.icon,
       text = _ref.text;

package/dist/esm/view/BlockCard/views/ErroredView.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useMemo } from 'react';
 import { R300 } from '@atlaskit/theme/colors';

package/dist/esm/view/BlockCard/views/ForbiddenView.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

package/dist/esm/view/BlockCard/views/NotFoundView.js

@@ -5,7 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { Frame } from '../components/Frame';
 import { Thumbnail } from '../components/Thumbnail';

package/dist/esm/view/BlockCard/views/ResolvingView.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
 import { N50, N90 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';

package/dist/esm/view/BlockCard/views/UnauthorizedView.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';

package/dist/esm/view/EmbedCard/components/Frame.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { getIframeSandboxAttribute } from '../../../utils';
 export var Frame = /*#__PURE__*/React.forwardRef(function (_ref, iframeRef) {

package/dist/esm/view/EmbedCard/views/ErroredView.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { fontSize } from '@atlaskit/theme/constants';

package/dist/esm/view/EmbedCard/views/ResolvedView.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/glyph/link';
 import { ExpandedFrame } from '../components/ExpandedFrame';

package/dist/esm/view/EmbedCard/views/UnresolvedView.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { fontSize } from '@atlaskit/theme/constants';
 import { FormattedMessage } from 'react-intl-next';

package/dist/esm/view/EmbedModal/components/embed-content/index.js

@@ -3,7 +3,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 var iframeCss = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: calc(100vh - 208px);\n"])));
 

package/dist/esm/view/EmbedModal/components/link-info/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { useModal } from '@atlaskit/modal-dialog';

package/dist/esm/view/EmbedModal/components/link-info/styled.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export var containerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n  // AK ModalBody has 2px padding top and bottom.\n  // Using 14px here to create 16px gap between\n  // link info and iframe\n  padding: 24px 24px 14px 24px;\n"])));
 var iconSize = '24px';
 export var iconCss = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  img,\n  span,\n  svg {\n    height: ", ";\n    min-height: ", ";\n    max-height: ", ";\n    width: ", ";\n    min-width: ", ";\n    max-width: ", ";\n  }\n"])), iconSize, iconSize, iconSize, iconSize, iconSize, iconSize);

package/dist/esm/view/FlexibleCard/components/actions/action/action-button/index.js

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React, { useCallback } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize } from '../../../../../../constants';

package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -4,7 +4,7 @@ var _templateObject;
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../../constants';
 import { tokens } from '../../../../../../utils/token';
 import { getIconSizeStyles } from '../../../utils';

package/dist/esm/view/FlexibleCard/components/actions/action/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { SmartLinkSize } from '../../../../../constants';
 import ActionButton from './action-button';
 import ActionDropdownItem from './action-dropdown-item';

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

@@ -9,7 +9,7 @@ var _templateObject;
 /** @jsx jsx */
 import { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Tooltip from '@atlaskit/tooltip';
 import { renderActionItems } from '../utils';

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

@@ -4,7 +4,7 @@ var _templateObject;
 
 /** @jsx jsx */
 import React, { useEffect } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
 import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../constants';
 import { getBaseStyles, getGapSize, renderChildren } from '../utils';
 import { getMaxLineHeight, getTruncateStyles } from '../../utils';
@@ -24,7 +24,7 @@ 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        &:first-child {\n          margin-left: initial;\n        }\n      }\n    "])), gap);
+    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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    > span {\n      margin-right: ", "rem;\n      &:last-child {\n        margin-right: initial;\n      }\n    }\n  "])), gap);

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

@@ -4,7 +4,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import Block from '../block';
 import ElementGroup from '../element-group';

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

@@ -6,7 +6,7 @@ var _excluded = ["maxLines", "status", "testId", "primary", "secondary"];
 var _templateObject;
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkStatus, SmartLinkWidth } from '../../../../../constants';
 import { renderElementItems } from '../utils';
 import Block from '../block';

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

@@ -8,7 +8,7 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { LinkIcon } from '../../../elements';
 import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';

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

@@ -7,7 +7,7 @@ var _excluded = ["actions", "anchorTarget", "hideTitleTooltip", "maxLines", "onA
 var _templateObject, _templateObject2;
 
 import React, { useCallback, useState } from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { SmartLinkStatus } from '../../../../../constants';
 import TitleBlockResolvedView from './resolved';
 import TitleBlockErroredView from './errored';

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

@@ -4,7 +4,7 @@ var _excluded = ["actionGroup", "testId", "title"];
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import Block from '../../block';
 import { SmartLinkSize } from '../../../../../../constants';
 import LoadingSkeleton from '../../../common/loading-skeleton';

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

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../constants';
 import * as Elements from '../elements';
 import * as Actions from '../actions';

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import ImageLoader from 'react-render-image';
 import LoadingSkeleton from '../loading-skeleton';
 

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx, keyframes } from '@emotion/core';
+import { css, jsx, keyframes } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 
 var LoadingSkeleton = function LoadingSkeleton(_ref) {
@@ -12,7 +12,7 @@ var LoadingSkeleton = function LoadingSkeleton(_ref) {
       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    // 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, token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
+  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      ", " 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, token('color.skeleton.subtle', '#f6f7f8'), token('utility.UNSAFE_util.transparent', '#f6f7f8'), token('color.skeleton', '#edeef1'), token('color.skeleton.subtle', '#f6f7f8'), token('color.skeleton.subtle', '#f6f7f8'), animationNameStyles);
   return jsx("span", {
     css: styles,
     "data-testid": testId

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2, _templateObject3;
 
 /** @jsx jsx */
 import React, { useContext } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
 import { tokens } from '../../../../utils/token';

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

@@ -4,7 +4,7 @@ var _templateObject;
 
 /** @jsx jsx */
 import React from 'react';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 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-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.

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2;
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import AtlaskitAvatarGroup from '@atlaskit/avatar-group';
 import { SmartLinkSize } from '../../../../../constants';
 var MAX_COUNT = 4;

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

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { tokens } from '../../../../../utils/token';
 import { getFormattedMessage, getIconSizeStyles } from '../../utils';
 import { IconType } from '../../../../../constants';

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

@@ -6,7 +6,7 @@ var _templateObject;
 /** @jsx jsx */
 import React from 'react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 import { selectUnit } from '@formatjs/intl-utils';

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

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 import React, { useMemo } from 'react';
 import LinkIcon from '@atlaskit/icon/glyph/link';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { SmartLinkPosition, SmartLinkSize } from '../../../../../constants';
 import AtlaskitIcon from '../../common/atlaskit-icon';
 import ImageIcon from '../../common/image-icon';

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

@@ -4,7 +4,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
 import React, { useMemo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
 import { SmartLinkSize, SmartLinkTheme } from '../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles, hasWhiteSpace } from '../../utils';