@atlaskit/renderer 92.0.0 → 93.0.1

package/dist/esm/react/nodes/panel.js

@@ -1,29 +1,46 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { themed } from '@atlaskit/theme';
-import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-var PanelStyled = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), function (props) {
-  if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
-    return '';
-  } // Similar to mainDynamicStyles()
 
+var PanelStyled = function PanelStyled(props) {
+  var styles = function styles(theme) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
+      theme: theme
+    }));
+  };
+
+  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+    styles = function styles(theme) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
+        theme: theme
+      }), PanelType.CUSTOM, props.backgroundColor, themed({
+        dark: getPanelBackgroundDarkModeColors
+      })({
+        theme: theme
+      }));
+    };
+  }
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
-  return "\n      &[data-panel-type=".concat(PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat(themed({
-    dark: getPanelBackgroundDarkModeColors
-  }), ";\n      }\n    ");
-});
+PanelStyled.displayName = 'PanelStyled';
 var panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -50,7 +67,7 @@ var Panel = function Panel(props) {
   var getIcon = function getIcon() {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -62,7 +79,7 @@ var Panel = function Panel(props) {
     }
 
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
@@ -71,13 +88,13 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }
   };
 
-  return /*#__PURE__*/React.createElement(PanelStyled, {
+  return jsx(PanelStyled, {
     className: PanelSharedCssClassName.prefix,
     "data-panel-type": panelType,
     "data-panel-color": panelColor,
@@ -85,7 +102,7 @@ var Panel = function Panel(props) {
     "data-panel-icon-id": panelIconId,
     "data-panel-icon-text": panelIconText,
     backgroundColor: panelColor
-  }, renderIcon(), /*#__PURE__*/React.createElement("div", {
+  }, renderIcon(), jsx("div", {
     className: PanelSharedCssClassName.content
   }, children));
 };

package/dist/esm/react/nodes/table/sticky.js

@@ -4,8 +4,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import * as colors from '@atlaskit/theme/colors';
@@ -14,70 +15,70 @@ import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
-// creates a new stacking context and places the div in the same
-// position as the table
-var RelativeTableDiv = styled.div.attrs({
-  style: function style(_ref) {
-    var left = _ref.left,
-        top = _ref.top;
-    return {
-      left: left && left < 0 ? left : undefined,
-      top: top
-    };
-  }
-})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-export var FixedTableDiv = styled.div.attrs({
-  style: function style(_ref2) {
-    var top = _ref2.top,
-        wrapperWidth = _ref2.wrapperWidth;
-    return {
-      top: top,
-      width: wrapperWidth
-    };
+var fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
+
+var getModeSpecificStyles = function getModeSpecificStyles(mode) {
+  if (mode === 'none') {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: none;\n    "])));
+  } else {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: ", ";\n    "])), fixedTableDivModeToPosition[mode]);
   }
-})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n  ", ";\n\n  z-index: ", ";\n\n  // Fix this when move we move this to use emotion\n  &&&\n    .", ",\n    &&&\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &&&\n    .", ".right-shadow::after,\n    &&&\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), function (props) {
-  return props.mode === 'stick' ? 'position: fixed' : '';
-}, function (props) {
-  return props.mode === 'pin-bottom' ? 'position: absolute' : '';
-}, function (props) {
-  return props.mode === 'none' ? 'display: none' : '';
-}, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
-var StyledDiv = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-export var StickyTable = function StickyTable(_ref3) {
-  var top = _ref3.top,
-      left = _ref3.left,
-      mode = _ref3.mode,
-      shadowClassNames = _ref3.shadowClassNames,
-      innerRef = _ref3.innerRef,
-      wrapperWidth = _ref3.wrapperWidth,
-      tableWidth = _ref3.tableWidth,
-      isNumberColumnEnabled = _ref3.isNumberColumnEnabled,
-      layout = _ref3.layout,
-      children = _ref3.children,
-      columnWidths = _ref3.columnWidths,
-      renderWidth = _ref3.renderWidth,
-      allowDynamicTextSizing = _ref3.allowDynamicTextSizing,
-      rowHeight = _ref3.rowHeight;
-  return /*#__PURE__*/React.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+};
+
+var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid white;\n  background: white;\n  box-shadow: 0 6px 4px -4px ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), top, width, akEditorStickyHeaderZIndex, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, N40A, TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+};
+
+export var FixedTableDiv = function FixedTableDiv(props) {
+  var top = props.top,
+      wrapperWidth = props.wrapperWidth,
+      mode = props.mode;
+  var fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return jsx("div", {
+    css: fixedTableCss
+  }, props.children);
+};
+export var StickyTable = function StickyTable(_ref) {
+  var top = _ref.top,
+      left = _ref.left,
+      mode = _ref.mode,
+      shadowClassNames = _ref.shadowClassNames,
+      innerRef = _ref.innerRef,
+      wrapperWidth = _ref.wrapperWidth,
+      tableWidth = _ref.tableWidth,
+      isNumberColumnEnabled = _ref.isNumberColumnEnabled,
+      layout = _ref.layout,
+      children = _ref.children,
+      columnWidths = _ref.columnWidths,
+      renderWidth = _ref.renderWidth,
+      allowDynamicTextSizing = _ref.allowDynamicTextSizing,
+      rowHeight = _ref.rowHeight;
+  return jsx("div", {
+    css: {
+      left: left && left < 0 ? left : undefined,
+      top: mode === 'pin-bottom' ? top : undefined,
+      position: 'relative'
+    }
+  }, jsx(FixedTableDiv, {
     top: mode === 'stick' ? top : undefined,
     mode: rowHeight > 300 ? 'none' : mode,
     wrapperWidth: wrapperWidth
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
+  }, jsx("div", {
     className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(shadowClassNames),
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, jsx("div", {
+    ref: innerRef,
     className: "".concat(TableSharedCssClassName.TABLE_STICKY_WRAPPER),
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,

package/dist/esm/react/nodes/table.js

@@ -6,16 +6,12 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
-var _templateObject;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
-import styled from 'styled-components';
 import { calcTableWidth, TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
 import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
@@ -124,8 +120,6 @@ var tableCanBeSticky = function tableCanBeSticky(node, children) {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-var MainTableContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-
 var canUseLinelength = function canUseLinelength(appearance) {
   return appearance === 'full-page' || appearance === 'mobile';
 };
@@ -330,10 +324,10 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         columnWidths: columnWidths,
         rowHeight: this.headerRowHeight,
         allowDynamicTextSizing: allowDynamicTextSizing
-      }, [children && children[0]]), /*#__PURE__*/React.createElement(MainTableContainer, {
+      }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
         className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames),
         "data-layout": layout,
-        innerRef: this.props.handleRef,
+        ref: this.props.handleRef,
         style: {
           width: tableWidth,
           left: left && left < 0 ? left : undefined

package/dist/esm/react/utils/performance/RenderTracking.js

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+import debounce from 'lodash/debounce';
+import { useComponentRenderTracking } from '@atlaskit/editor-common/utils';
+import { EVENT_TYPE } from '../../../analytics/enums';
+export function RenderTracking(props) {
+  var debouncedHandleAnalyticsEvent = useMemo(function () {
+    return debounce(props.handleAnalyticsEvent, 500);
+  }, [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: function onRender(_ref) {
+      var renderCount = _ref.renderCount,
+          propsDifference = _ref.propsDifference,
+          componentId = _ref.componentId;
+
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId: componentId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/esm/render-document.js

@@ -1,4 +1,4 @@
-import { defaultSchema } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { getValidDocument } from '@atlaskit/editor-common/validator';
 import { validateADFEntity, findAndTrackUnsupportedContentNodes } from '@atlaskit/editor-common/utils';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from './analytics/enums';

package/dist/esm/text/index.js

@@ -1,6 +1,6 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import { defaultSchema } from '@atlaskit/adf-schema';
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { reduce } from './nodes';
 
 var TextSerializer = /*#__PURE__*/function () {

package/dist/esm/ui/Expand.js

@@ -5,36 +5,59 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 /** @jsx jsx */
-import React, { forwardRef, useRef, useCallback } from 'react';
-import { jsx } from '@emotion/react';
-import styled from 'styled-components';
+import React, { useRef, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { gridSize, fontSize } from '@atlaskit/theme/constants';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Tooltip from '@atlaskit/tooltip';
-import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, ExpandLayoutWrapper, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { expandMessages, sharedExpandStyles, WidthProvider, ExpandIconWrapper, clearNextSiblingMarginTopStyle, ExpandLayoutWrapperWithRef } from '@atlaskit/editor-common/ui';
 import { akEditorLineHeight, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { PLATFORM, MODE } from '../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../analytics/enums';
 import { injectIntl } from 'react-intl-next';
 import { ActiveHeaderIdConsumer } from './active-header-id-provider';
 import _uniqueId from 'lodash/uniqueId';
-var Title = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
-var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  padding: 0;\n  padding-bottom: ", "px;\n"])), sharedExpandStyles.ContainerStyles, function (props) {
-  return props.expanded ? gridSize() : 0;
-});
-var TitleContainer = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n  padding: ", "px;\n  padding-bottom: ", "px;\n"])), sharedExpandStyles.TitleContainerStyles, gridSize(), function (props) {
-  return !props.expanded ? gridSize() : 0;
-});
+var titleStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, gridSize() / 2);
+
+var Container = function Container(props) {
+  var paddingBottom = "".concat(props.expanded ? gridSize() : 0, "px");
+  var sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles(themeProps), paddingBottom);
+  };
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+var TitleContainer = function TitleContainer(props) {
+  var paddingBottom = "".concat(!props.expanded ? gridSize() : 0, "px");
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), sharedExpandStyles.titleContainerStyles(themeProps), gridSize(), paddingBottom);
+  };
+
+  return jsx("button", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 TitleContainer.displayName = 'TitleContainerButton';
-var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  padding-right: ", "px;\n  padding-left: ", "px;\n  visibility: ", ";\n"])), sharedExpandStyles.ContentStyles, gridSize() * 2, gridSize() * 5 - gridSize() / 2, function (props) {
-  return props.expanded ? 'visible' : 'hidden';
-});
-var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return jsx(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+
+var ContentContainer = function ContentContainer(props) {
+  var sharedContentStyles = sharedExpandStyles.contentStyles(props);
+  var visibility = props.expanded ? 'visible' : 'hidden';
+
+  var styles = function styles(themeProps) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles(themeProps), gridSize() * 2, gridSize() * 5 - gridSize() / 2, visibility);
+  };
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -116,7 +139,8 @@ function Expand(_ref) {
     expanded: expanded
   }, jsx(ChevronRightIcon, {
     label: label
-  }))), jsx(Title, {
+  }))), jsx("span", {
+    css: titleStyles,
     id: id
   }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded

package/dist/esm/ui/MediaCard.js

@@ -1,4 +1,3 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
@@ -9,8 +8,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 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; }
@@ -19,13 +16,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { filter } from '@atlaskit/adf-utils';
 import { Card, CardLoading, CardError } from '@atlaskit/media-card';
 import { getMediaClient } from '@atlaskit/media-client';
 import { withImageLoader } from '@atlaskit/editor-common/utils';
-import styled from 'styled-components';
 var mediaIdentifierMap = new Map();
 export var getListOfIdentifiersFromDoc = function getListOfIdentifiersFromDoc(doc) {
   if (!doc) {
@@ -355,7 +350,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
         collectionName: collection,
         occurrenceKey: occurrenceKey
       };
-      return /*#__PURE__*/React.createElement(CardWrapper, getClipboardAttrs({
+      return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
         id: id,
         alt: alt,
         collection: collection,
@@ -386,8 +381,7 @@ export var MediaCardInternal = /*#__PURE__*/function (_Component) {
   }]);
 
   return MediaCardInternal;
-}(Component);
-export var CardWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""]))); // Needed for copy & paste
+}(Component); // Needed for copy & paste
 
 export var getClipboardAttrs = function getClipboardAttrs(_ref2) {
   var id = _ref2.id,

package/dist/esm/ui/Renderer/click-to-edit.js

@@ -1,4 +1,4 @@
-import { fileCardImageViewSelector } from '@atlaskit/media-card';
+import { fileCardImageViewSelector } from '@atlaskit/media-card/classnames';
 import { mediaViewerPopupClass } from '@atlaskit/media-viewer/classnames';
 /**
  * Check if an element is interactive (or otherwise if clicking on it shouldn't transition the