@atlaskit/renderer 91.0.0 → 93.0.0

package/dist/es2019/react/nodes/heading.js

@@ -32,14 +32,16 @@ function Heading(props) {
     headingId,
     dataAttributes,
     allowHeadingAnchorLinks,
-    marks
+    marks,
+    invisible
   } = props;
   const HX = `h${props.level}`;
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  const headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/React.createElement(HX, _extends({
-    id: headingId
+    id: headingIdToUse
   }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
     copyTextToClipboard
   }) => {

package/dist/es2019/react/nodes/layoutColumn.js

@@ -1,11 +1,15 @@
+/** @jsx jsx */
 import React from 'react';
-import { WidthProvider, ClearNextSiblingMarginTop } from '@atlaskit/editor-common/ui';
+import { jsx } from '@emotion/react';
+import { WidthProvider, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
 export default function LayoutSection(props) {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: `${props.width}%`
     }
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(ClearNextSiblingMarginTop, null), props.children));
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: clearNextSiblingMarginTopStyle
+  }), props.children));
 }

package/dist/es2019/react/nodes/media.js

@@ -1,9 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
 import React from 'react';
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaLink } from '@atlaskit/editor-common/ui';
+import { mediaLinkStyle } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
 import { getEventHandler } from '../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';
@@ -29,7 +32,7 @@ export default class Media extends PureComponent {
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
       const shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      const mediaComponent = /*#__PURE__*/React.createElement(MediaCard, _extends({
+      const mediaComponent = jsx(MediaCard, _extends({
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, this.props, {
@@ -40,11 +43,12 @@ export default class Media extends PureComponent {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
-      return linkHref ? /*#__PURE__*/React.createElement(MediaLink, {
+      return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
-        "data-block-link": linkHref
+        "data-block-link": linkHref,
+        css: mediaLinkStyle
       }, mediaComponent) : mediaComponent;
     });
 
@@ -88,7 +92,7 @@ export default class Media extends PureComponent {
       return this.renderCard();
     }
 
-    return /*#__PURE__*/React.createElement(WithProviders, {
+    return jsx(WithProviders, {
       providers: ['mediaProvider', 'contextIdentifierProvider'],
       providerFactory: providers,
       renderNode: this.renderCard

package/dist/es2019/react/nodes/mediaSingle/index.js

@@ -1,11 +1,13 @@
-import { default as React } from 'react';
+/** @jsx jsx */
+import { default as React, Fragment } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { mapBreakpointToLayoutMaxWidth, getBreakpoint, WidthConsumer } from '@atlaskit/editor-common/ui';
+import { mapBreakpointToLayoutMaxWidth, getBreakpoint, MediaSingle as UIMediaSingle, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { akEditorFullWidthLayoutWidth, getAkEditorFullPageMaxWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { FullPagePadding } from '../../../ui/Renderer/style';
 import { useObservedWidth } from '../../hooks/use-observed-width';
-import { ExtendedUIMediaSingle } from './styles';
+import { uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles } from './styles';
 const DEFAULT_WIDTH = 250;
 const DEFAULT_HEIGHT = 200;
 
@@ -166,7 +168,9 @@ const MediaSingle = props => {
       disableOverlay: true,
       featureFlags
     });
-    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+    const uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
+    return jsx(UIMediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -175,10 +179,10 @@ const MediaSingle = props => {
       containerWidth: containerWidth,
       pctWidth: pctWidth,
       fullWidthMode: isFullWidth
-    }, /*#__PURE__*/React.createElement(React.Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
+    }, jsx(Fragment, null, mediaComponent), isCaptionsFlaggedOn && caption);
   };
 
-  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : /*#__PURE__*/React.createElement(WidthConsumer, null, ({
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : jsx(WidthConsumer, null, ({
     width,
     breakpoint
   }) => {

package/dist/es2019/react/nodes/mediaSingle/styles.js

@@ -1,10 +1,9 @@
-import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-export const ExtendedUIMediaSingle = styled(UIMediaSingle)`
-  ${({
-  layout
-}) => layout === 'full-width' || layout === 'wide' ? `
+/** @jsx jsx */
+import { css } from '@emotion/react';
+export const uiMediaSingleBaseStyles = css`
+  transition: all 0.1s linear;
+`;
+export const uiMediaSingleLayoutStyles = css`
   margin-left: 50%;
   transform: translateX(-50%);
-  ` : ``} transition: all 0.1s linear;
 `;

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

@@ -1,5 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
@@ -10,23 +13,27 @@ import EmojiItem from './emoji'; // AFP-2532 TODO: Fix automatic suppressions be
 import { themed } from '@atlaskit/theme';
 import { getPanelBackgroundDarkModeColors } from '@atlaskit/editor-common/styles';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
-const PanelStyled = styled.div`
-  ${props => {
-  if (props['data-panel-type'] !== PanelType.CUSTOM || !props.backgroundColor) {
-    return '';
-  } // Similar to mainDynamicStyles()
 
+const PanelStyled = props => {
+  let styles = themeProps => css``;
 
-  return `
+  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+    styles = themeProps => css`
       &[data-panel-type=${PanelType.CUSTOM}] {
         background-color: ${props.backgroundColor};
         ${themed({
-    dark: getPanelBackgroundDarkModeColors
-  })};
+      dark: getPanelBackgroundDarkModeColors
+    })(themeProps)};
       }
     `;
-}}
-`;
+  }
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+PanelStyled.displayName = 'PanelStyled';
 const panelIcons = {
   info: PanelInfoIcon,
   success: PanelSuccessIcon,
@@ -55,7 +62,7 @@ const Panel = props => {
   const getIcon = () => {
     if (panelType === PanelType.CUSTOM) {
       if (panelIcon && providers) {
-        return /*#__PURE__*/React.createElement(EmojiItem, {
+        return jsx(EmojiItem, {
           id: panelIconId,
           text: panelIconText,
           shortName: panelIcon,
@@ -67,7 +74,7 @@ const Panel = props => {
     }
 
     const Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: `Panel ${panelType}`
     });
   };
@@ -76,13 +83,13 @@ const Panel = props => {
     const 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,
@@ -90,7 +97,7 @@ const 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/es2019/react/nodes/table/sticky.js

@@ -1,5 +1,6 @@
+/** @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';
@@ -8,35 +9,29 @@ const {
 } = colors;
 import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
+import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
-// creates a new stacking context and places the div in the same
-// position as the table
-const RelativeTableDiv = styled.div.attrs({
-  style: ({
-    left,
-    top
-  }) => ({
-    left: left && left < 0 ? left : undefined,
-    top
-  })
-})`
-  position: relative;
-`;
-export const FixedTableDiv = styled.div.attrs({
-  style: ({
-    top,
-    wrapperWidth
-  }) => ({
-    top,
-    width: wrapperWidth
-  })
-})`
-  ${props => props.mode === 'stick' ? 'position: fixed' : ''};
-  ${props => props.mode === 'pin-bottom' ? 'position: absolute' : ''};
-  ${props => props.mode === 'none' ? 'display: none' : ''};
+const fixedTableDivModeToPosition = {
+  stick: 'fixed',
+  'pin-bottom': 'absolute'
+};
 
-  z-index: ${akEditorStickyHeaderZIndex};
+const getModeSpecificStyles = mode => {
+  if (mode === 'none') {
+    return css`
+      display: none;
+    `;
+  } else {
+    return css`
+      position: ${fixedTableDivModeToPosition[mode]};
+    `;
+  }
+};
 
+const fixedTableDivStaticStyles = (top, width) => css`
+  top: ${top}px;
+  width: ${width}px;
+  z-index: ${akEditorStickyHeaderZIndex};
   &
     .${TableSharedCssClassName.TABLE_CONTAINER},
     &
@@ -62,7 +57,18 @@ export const FixedTableDiv = styled.div.attrs({
     height: 100%;
   }
 `;
-const StyledDiv = styled.div``;
+
+export const FixedTableDiv = props => {
+  const {
+    top,
+    wrapperWidth,
+    mode
+  } = props;
+  const fixedTableCss = [fixedTableDivStaticStyles(top, wrapperWidth), getModeSpecificStyles(mode)];
+  return jsx("div", {
+    css: fixedTableCss
+  }, props.children);
+};
 export const StickyTable = ({
   top,
   left,
@@ -79,32 +85,44 @@ export const StickyTable = ({
   allowDynamicTextSizing,
   rowHeight
 }) => {
-  return /*#__PURE__*/React.createElement(RelativeTableDiv, {
-    left: left,
-    top: mode === 'pin-bottom' ? top : undefined
-  }, /*#__PURE__*/React.createElement(FixedTableDiv, {
+  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: `${TableSharedCssClassName.TABLE_CONTAINER} ${shadowClassNames}`,
     "data-layout": layout,
     style: {
       width: tableWidth
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
-    innerRef: innerRef,
+  }, jsx("div", {
+    ref: innerRef,
     className: `${TableSharedCssClassName.TABLE_STICKY_WRAPPER}`,
     style: {
       overflow: 'hidden'
     }
-  }, /*#__PURE__*/React.createElement(Table, {
+  }, jsx(Table, {
     columnWidths: columnWidths,
     layout: layout,
     isNumberColumnEnabled: isNumberColumnEnabled,
     renderWidth: renderWidth,
     allowDynamicTextSizing: allowDynamicTextSizing
-  }, children)))));
+  },
+  /**
+   * @see https://product-fabric.atlassian.net/browse/ED-10235
+   * We pass prop 'invisible' to our table's children nodes meaning
+   * they exist inside of the 'invisible' duplicated table component that
+   * enables sticky headers.
+   */
+  recursivelyInjectProps(children, {
+    invisible: true
+  }))))));
 };
 export class OverflowParent {
   constructor(ref) {

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
@@ -102,8 +101,6 @@ const tableCanBeSticky = (node, children) => {
   return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
 };
 
-const MainTableContainer = styled.div``;
-
 const canUseLinelength = appearance => appearance === 'full-page' || appearance === 'mobile';
 
 export class TableContainer extends React.Component {
@@ -290,10 +287,10 @@ export class TableContainer extends React.Component {
       columnWidths: columnWidths,
       rowHeight: this.headerRowHeight,
       allowDynamicTextSizing: allowDynamicTextSizing
-    }, [children && children[0]]), /*#__PURE__*/React.createElement(MainTableContainer, {
+    }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
       className: `${TableSharedCssClassName.TABLE_CONTAINER} ${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/es2019/react/utils/inject-props.js

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * Helper function to recursively injects props to
+ * all valid children react nodes.
+ */
+
+export function recursivelyInjectProps(children, propsToInject) {
+  return React.Children.toArray(children).map(child => {
+    // Cannot add a prop to an invalid element, so just return the child
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    } // Recursive call if child has nested children
+
+
+    if (child.props.children) {
+      child = /*#__PURE__*/React.cloneElement(child, {
+        children: recursivelyInjectProps(child.props.children, propsToInject)
+      });
+    } // Add props to react child node
+
+
+    return /*#__PURE__*/React.cloneElement(child, propsToInject);
+  });
+}

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

@@ -0,0 +1,37 @@
+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) {
+  const debouncedHandleAnalyticsEvent = useMemo(() => debounce(props.handleAnalyticsEvent, 500), [props.handleAnalyticsEvent]);
+  useComponentRenderTracking({
+    onRender: ({
+      renderCount,
+      propsDifference,
+      componentId
+    }) => {
+      if (!renderCount) {
+        return;
+      }
+
+      debouncedHandleAnalyticsEvent({
+        action: props.action,
+        actionSubject: props.actionSubject,
+        attributes: {
+          count: renderCount,
+          propsDifference: propsDifference,
+          componentId
+        },
+        eventType: EVENT_TYPE.OPERATIONAL
+      });
+    },
+    propsDiffingOptions: {
+      enabled: true,
+      props: props.componentProps,
+      propsToIgnore: props.propsToIgnore,
+      useShallow: props.useShallow
+    },
+    zeroBasedCount: true
+  });
+  return null;
+}

package/dist/es2019/ui/Expand.js

@@ -1,17 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { forwardRef, useRef, useCallback } from 'react';
-import styled from 'styled-components';
+
+/** @jsx jsx */
+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, ClearNextSiblingMarginTop } 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';
-const Title = styled.span`
+const titleStyles = css`
   outline: none;
   border: none;
   font-size: ${relativeFontSizeToBase16(fontSize())};
@@ -23,29 +25,53 @@ const Title = styled.span`
   padding: 0 0 0 ${gridSize() / 2}px;
   text-align: left;
 `;
-const Container = styled.div`
-  ${sharedExpandStyles.ContainerStyles}
-  padding: 0;
-  padding-bottom: ${props => props.expanded ? gridSize() : 0}px;
-`;
-const TitleContainer = styled.button`
-  ${sharedExpandStyles.TitleContainerStyles}
-  padding: ${gridSize()}px;
-  padding-bottom: ${props => !props.expanded ? gridSize() : 0}px;
-`;
+
+const Container = props => {
+  const paddingBottom = `${props.expanded ? gridSize() : 0}px`;
+  const sharedContainerStyles = sharedExpandStyles.containerStyles(props);
+
+  const styles = themeProps => css`
+    ${sharedContainerStyles(themeProps)}
+    padding: 0;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
+
+const TitleContainer = props => {
+  const paddingBottom = `${!props.expanded ? gridSize() : 0}px`;
+
+  const styles = themeProps => css`
+    ${sharedExpandStyles.titleContainerStyles(themeProps)}
+    padding: ${gridSize()}px;
+    padding-bottom: ${paddingBottom};
+  `;
+
+  return jsx("button", _extends({
+    css: styles
+  }, props), props.children);
+};
+
 TitleContainer.displayName = 'TitleContainerButton';
-const ContentContainer = styled.div`
-  ${sharedExpandStyles.ContentStyles};
-  padding-right: ${gridSize() * 2}px;
-  padding-left: ${gridSize() * 5 - gridSize() / 2}px;
-  visibility: ${props => props.expanded ? 'visible' : 'hidden'};
-`;
-const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
-  // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, _extends({}, props, {
-    innerRef: ref
-  }));
-});
+
+const ContentContainer = props => {
+  const sharedContentStyles = sharedExpandStyles.contentStyles(props);
+  const visibility = props.expanded ? 'visible' : 'hidden';
+
+  const styles = themeProps => css`
+    ${sharedContentStyles(themeProps)};
+    padding-right: ${gridSize() * 2}px;
+    padding-left: ${gridSize() * 5 - gridSize() / 2}px;
+    visibility: ${visibility};
+  `;
+
+  return jsx("div", _extends({
+    css: styles
+  }, props), props.children);
+};
 
 function fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent) {
   if (!fireAnalyticsEvent) {
@@ -80,16 +106,16 @@ function Expand({
   } = useRef(_uniqueId('expand-title-'));
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  return /*#__PURE__*/React.createElement(Container, {
+  return jsx(Container, {
     "data-node-type": nodeType,
     "data-title": title,
     "data-expanded": expanded,
     expanded: expanded,
     focused: focused
-  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? /*#__PURE__*/React.createElement(ActiveHeaderIdConsumer, {
+  }, nestedHeaderIds && nestedHeaderIds.length > 0 ? jsx(ActiveHeaderIdConsumer, {
     nestedHeaderIds: nestedHeaderIds,
     onNestedHeaderIdMatch: () => setExpanded(true)
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: e => {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -104,21 +130,24 @@ function Expand({
     "aria-expanded": expanded,
     contentEditable: false,
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: label,
     position: "top",
     tag: ExpandLayoutWrapperWithRef
-  }, /*#__PURE__*/React.createElement(ExpandIconWrapper, {
+  }, jsx(ExpandIconWrapper, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement(ChevronRightIcon, {
+  }, jsx(ChevronRightIcon, {
     label: label
-  }))), /*#__PURE__*/React.createElement(Title, {
+  }))), jsx("span", {
+    css: titleStyles,
     id: id
-  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), /*#__PURE__*/React.createElement(ContentContainer, {
+  }, title || intl.formatMessage(expandMessages.expandDefaultTitle))), jsx(ContentContainer, {
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     className: `${nodeType}-content-wrapper`
-  }, /*#__PURE__*/React.createElement(WidthProvider, null, /*#__PURE__*/React.createElement(ClearNextSiblingMarginTop, null), children))));
+  }, jsx(WidthProvider, null, jsx("div", {
+    css: clearNextSiblingMarginTopStyle
+  }), children))));
 }
 
 export default injectIntl(Expand);

package/dist/es2019/ui/MediaCard.js

@@ -1,11 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
 const mediaIdentifierMap = new Map();
 export const getListOfIdentifiersFromDoc = doc => {
   if (!doc) {
@@ -269,7 +267,7 @@ export class MediaCardInternal extends Component {
       collectionName: collection,
       occurrenceKey
     };
-    return /*#__PURE__*/React.createElement(CardWrapper, getClipboardAttrs({
+    return /*#__PURE__*/React.createElement("div", getClipboardAttrs({
       id,
       alt,
       collection,
@@ -298,8 +296,7 @@ export class MediaCardInternal extends Component {
     }));
   }
 
-}
-export const CardWrapper = styled.div``; // Needed for copy & paste
+} // Needed for copy & paste
 
 export const getClipboardAttrs = ({
   id,