@atlaskit/renderer 91.0.0 → 93.0.0

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

@@ -11,10 +11,12 @@ 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; } }
 
+/** @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';
@@ -53,7 +55,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-      var mediaComponent = /*#__PURE__*/React.createElement(MediaCard, _extends({
+      var mediaComponent = jsx(MediaCard, _extends({
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -64,11 +66,12 @@ var Media = /*#__PURE__*/function (_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;
     });
 
@@ -115,7 +118,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         return this.renderCard();
       }
 
-      return /*#__PURE__*/React.createElement(WithProviders, {
+      return jsx(WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providers,
         renderNode: this.renderCard

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

@@ -1,12 +1,15 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 200;
 
@@ -175,7 +178,9 @@ var MediaSingle = function MediaSingle(props) {
       disableOverlay: true,
       featureFlags: featureFlags
     });
-    return /*#__PURE__*/React.createElement(ExtendedUIMediaSingle, {
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
+    return jsx(UIMediaSingle, {
+      css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,
       width: width,
@@ -184,10 +189,10 @@ var MediaSingle = function 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, function (_ref3) {
+  return observedWidthFlag ? renderMediaSingle(observedWidth || document.body.offsetWidth) : jsx(WidthConsumer, null, function (_ref3) {
     var width = _ref3.width,
         breakpoint = _ref3.breakpoint;
     return renderMediaSingle(width, breakpoint);

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

@@ -1,10 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import styled from 'styled-components';
-import { MediaSingle as UIMediaSingle } from '@atlaskit/editor-common/ui';
-export var ExtendedUIMediaSingle = styled(UIMediaSingle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " transition: all 0.1s linear;\n"])), function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
-});
+/** @jsx jsx */
+import { css } from '@emotion/react';
+export var uiMediaSingleBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  transition: all 0.1s linear;\n"])));
+export var uiMediaSingleLayoutStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));

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

@@ -1,9 +1,11 @@
+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';
@@ -14,16 +16,26 @@ 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';
-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(themeProps) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+  };
+
+  if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
+    styles = function styles(themeProps) {
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), PanelType.CUSTOM, props.backgroundColor, themed({
+        dark: getPanelBackgroundDarkModeColors
+      })(themeProps));
+    };
+  }
+
+  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 +62,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 +74,7 @@ var Panel = function Panel(props) {
     }
 
     var Icon = panelIcons[panelType];
-    return /*#__PURE__*/React.createElement(Icon, {
+    return jsx(Icon, {
       label: "Panel ".concat(panelType)
     });
   };
@@ -71,13 +83,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 +97,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,85 +4,96 @@ 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';
 var N40A = colors.N40A;
 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  &\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,
     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 var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {

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/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(function (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/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/ui/Expand.js

@@ -4,35 +4,60 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-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';
-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 /*#__PURE__*/React.createElement(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) {
@@ -80,18 +105,18 @@ function Expand(_ref) {
   var handleBlur = useCallback(function () {
     return 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: function onNestedHeaderIdMatch() {
       return setExpanded(true);
     }
-  }) : null, /*#__PURE__*/React.createElement(TitleContainer, {
+  }) : null, jsx(TitleContainer, {
     onClick: function onClick(e) {
       e.stopPropagation();
       fireExpandToggleAnalytics(nodeType, expanded, fireAnalyticsEvent);
@@ -106,21 +131,24 @@ function Expand(_ref) {
     "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: "".concat(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/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,