@atlaskit/smart-card 22.2.1 → 22.3.1

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

@@ -9,7 +9,7 @@ exports.metadataListClassName = exports.MetadataList = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _Metadata = require("./Metadata");
 
@@ -22,7 +22,7 @@ exports.metadataListClassName = metadataListClassName;
 var MetadataList = function MetadataList(_ref) {
   var items = _ref.items,
       testId = _ref.testId;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     css: {
       display: 'flex',
       marginTop: (0, _utils.gs)(0.5),
@@ -34,7 +34,7 @@ var MetadataList = function MetadataList(_ref) {
     "data-testid": testId,
     className: metadataListClassName
   }, items.map(function (item) {
-    return (0, _core.jsx)(_Metadata.Metadata, (0, _extends2.default)({
+    return (0, _react.jsx)(_Metadata.Metadata, (0, _extends2.default)({
       key: item.text
     }, item));
   }));

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Header = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _modalDialog = require("@atlaskit/modal-dialog");
 
@@ -54,56 +54,56 @@ var Header = function Header(_ref) {
   var _useModal = (0, _modalDialog.useModal)(),
       onClose = _useModal.onClose;
 
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     style: {
       paddingLeft: (0, _utils.gs)(3),
       paddingRight: (0, _utils.gs)(3),
       paddingBottom: (0, _utils.gs)(2),
       paddingTop: (0, _utils.gs)(2)
     }
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'baseline',
       borderBottom: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N30A))
     }
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: {
       flex: 1
     }
-  }, (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("div", {
     css: {
       display: 'flex'
     }
-  }, icon && (0, _core.jsx)(_Icon.Icon, icon), (0, _core.jsx)("div", {
+  }, icon && (0, _react.jsx)(_Icon.Icon, icon), (0, _react.jsx)("div", {
     css: {
       paddingLeft: (0, _utils.gs)(2),
       paddingBottom: (0, _utils.gs)(2)
     }
-  }, (0, _core.jsx)("h3", null, title), (0, _core.jsx)("div", {
+  }, (0, _react.jsx)("h3", null, title), (0, _react.jsx)("div", {
     css: {
       color: (0, _tokens.token)('color.text.subtlest', _colors.N100)
     }
-  }, metadata.items.length && (0, _core.jsx)(_MetadataList.MetadataList, {
+  }, metadata.items.length && (0, _react.jsx)(_MetadataList.MetadataList, {
     items: metadata.items
-  }) || (0, _core.jsx)(_Byline.Byline, null, byline))))), (0, _core.jsx)("div", null, download && (0, _core.jsx)(_customThemeButton.default, {
+  }) || (0, _react.jsx)(_Byline.Byline, null, byline))))), (0, _react.jsx)("div", null, download && (0, _react.jsx)(_customThemeButton.default, {
     appearance: "primary",
     href: download,
     onClick: onDownloadActionClick
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download)), url && (0, _core.jsx)(_customThemeButton.default, {
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.download)), url && (0, _react.jsx)(_customThemeButton.default, {
     href: url,
     target: "_blank",
     appearance: "link",
     testId: "preview-view-action",
-    iconAfter: (0, _core.jsx)(_shortcut.default, {
+    iconAfter: (0, _react.jsx)(_shortcut.default, {
       size: "small",
       label: ""
     }),
     onClick: onViewActionClick
-  }, providerName ? (0, _core.jsx)(_react.Fragment, null, (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _core.jsx)(_customThemeButton.default, {
+  }, providerName ? (0, _react.jsx)(_react2.Fragment, null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewIn), " ", providerName) : (0, _react.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.viewOriginal)), (0, _react.jsx)(_customThemeButton.default, {
     appearance: "subtle",
-    iconBefore: (0, _core.jsx)(_close.default, {
+    iconBefore: (0, _react.jsx)(_close.default, {
       label: label
     }),
     onClick: onClose,

package/dist/es2019/version.json

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

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

@@ -1,5 +1,5 @@
 /** @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/es2019/view/BlockCard/components/ActionList.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 ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';

package/dist/es2019/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 const CollaboratorList = ({

package/dist/es2019/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 const blockCardContentClassName = 'block-card-content';
 export const Content = ({

package/dist/es2019/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 const contentFooterClassName = 'smart-link-content-footer';
 export const ContentFooter = ({

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

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

package/dist/es2019/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 const Emoji = ({

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

@@ -1,5 +1,5 @@
 /** @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/es2019/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 const Link = ({

package/dist/es2019/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 const blockCardContentHeaderNameClassName = 'block-card-content-header-name';

package/dist/es2019/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/es2019/view/BlockCard/components/Thumbnail.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { gs, mq } from '../../common/utils';
 export const Thumbnail = props => {
   return props.color ? jsx(ThumbnailWithBackground, props) : jsx(ThumbnailDefault, props);

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

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

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

@@ -1,5 +1,5 @@
 /** @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/es2019/view/BlockCard/views/ForbiddenView.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 { FormattedMessage } from 'react-intl-next';
 import { R300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';

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

@@ -1,5 +1,5 @@
 /** @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/es2019/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/es2019/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/es2019/view/BlockCard/views/UnauthorizedView.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 { FormattedMessage } from 'react-intl-next';
 import { Frame } from '../components/Frame';
 import { Provider } from '../components/Provider';

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

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import React, { useState } from 'react';
 import { getIframeSandboxAttribute } from '../../../utils';
 export const Frame = /*#__PURE__*/React.forwardRef(({

package/dist/es2019/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/es2019/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/es2019/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/es2019/view/EmbedModal/components/embed-content/index.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { getIframeSandboxAttribute } from '../../../../utils';
 const iframeCss = css`
   width: 100%;

package/dist/es2019/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/es2019/view/EmbedModal/components/link-info/styled.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const containerStyles = css`
   align-items: center;
   display: flex;

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

@@ -1,6 +1,6 @@
 /** @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/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js

@@ -1,6 +1,6 @@
 /** @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/es2019/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/es2019/view/FlexibleCard/components/blocks/action-group/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -1,6 +1,6 @@
 /** @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/es2019/view/FlexibleCard/components/blocks/element-group/index.js

@@ -1,6 +1,6 @@
 /** @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';
@@ -33,9 +33,10 @@ const getGapStyles = (size, align) => {
     return css`
       > span {
         margin-left: ${gap}rem;
-        &:first-child {
-          margin-left: initial;
-        }
+      }
+
+      > span:first-child {
+        margin-left: initial;
       }
     `;
   }

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 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/es2019/view/FlexibleCard/components/blocks/metadata-block/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 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/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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/es2019/view/FlexibleCard/components/blocks/title-block/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 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/es2019/view/FlexibleCard/components/blocks/title-block/resolving/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @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/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 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/es2019/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/es2019/view/FlexibleCard/components/common/loading-skeleton/index.js

@@ -1,6 +1,6 @@
 /** @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';
 
 const LoadingSkeleton = ({
@@ -18,13 +18,12 @@ const LoadingSkeleton = ({
     border-radius: 2px;
     user-select: none;
     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: 280% 100%;

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

@@ -1,6 +1,6 @@
 /** @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/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 const styles = css`
   // Stretch the invisible link over the whole of the post.
   // Hide the link’s text.

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

@@ -1,6 +1,6 @@
 /** @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';
 const MAX_COUNT = 4;

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

@@ -1,6 +1,6 @@
 /** @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/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @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/es2019/view/FlexibleCard/components/elements/icon/index.js

@@ -1,7 +1,7 @@
 /** @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/es2019/view/FlexibleCard/components/elements/link/index.js

@@ -1,6 +1,6 @@
 /** @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';

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 const styles = css`
   display: inline-flex;

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import ImageIcon from '../../common/image-icon';
 
 /**

package/dist/es2019/view/FlexibleCard/components/elements/text/index.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { getFormattedMessage, getTruncateStyles } from '../../utils';
 import { tokens } from '../../../../../utils/token';
 

package/dist/es2019/view/FlexibleCard/components/elements/utils.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useContext } from 'react';
 import { FormattedDate } from 'react-intl-next';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { ElementName, IconType } from '../../../../constants';
 import Icon from './icon';
 import Link from './link';

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { SmartLinkSize } from '../../../constants';
 export const sizeToButtonSpacing = {