npm - @atlaskit/smart-card - Versions diffs - 22.2.0 → 22.3.0 - Mend

@atlaskit/smart-card 22.2.0 → 22.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (554) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 = {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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% {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/state/helpers.js CHANGED Viewed

@@ -55,7 +55,8 @@ export var isAccessible = function isAccessible(_ref) {
 export var isVisible = function isVisible(_ref2) {
   var visibility = _ref2.meta.visibility;
   return visibility === 'restricted' || visibility === 'public';
-};
+}; // Be aware, this is a copy of a function in link-provider/src/helpers
 export var getStatus = function getStatus(_ref3) {
   var meta = _ref3.meta;
   var access = meta.access,

package/dist/esm/version.json CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,10 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
 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"])));
@@ -22,9 +21,7 @@ var EmbedContent = function EmbedContent(_ref) {
     src: src,
     'data-testid': "".concat(testId, "-embed")
   };
-  return src ? jsx("iframe", _extends({
-    src: src
-  }, props)) : jsx("iframe", props);
+  return jsx("iframe", props);
 };
 export default EmbedContent;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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) {

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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';