@atlaskit/renderer 90.0.0 → 92.0.1

package/dist/es2019/ui/Renderer/style.js

@@ -1,4 +1,5 @@
-import styled, { css } from 'styled-components';
+import styled, { css as deprecatedCss } from 'styled-components';
+import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -33,7 +34,7 @@ export const headingSizes = {
   }
 };
 
-const headingAnchorStyle = headingTag => css`
+const headingAnchorStyle = headingTag => deprecatedCss`
     /**
      * The copy link button doesn't reserve space in the DOM so that
      * the text alignment isn't impacted by the button/icon's space.
@@ -266,10 +267,43 @@ const fullWidthStyles = ({
     width: 100% !important;
   }
   `;
-}; // prettier-ignore
+};
 
+export const rendererStyles = theme => {
+  // This is required to be compatible with styled-components prop structure.
+  const props = {
+    theme
+  };
+  return css`
+    ${tableSharedStyle(props)}
+
+    ${whitespaceSharedStyles};
+    ${blockquoteSharedStyles};
+    ${headingsSharedStyles(props)};
+
+    ${paragraphSharedStyles};
+    ${listsSharedStyles};
+    ${indentationSharedStyles};
+    ${blockMarksSharedStyles};
+    ${codeMarkSharedStyles(props)};
+    ${shadowSharedStyle};
+    ${dateSharedStyle};
+    ${textColorStyles};
+    ${tasksAndDecisionsStyles};
+    ${smartCardSharedStyles}
+
+    /* plugin styles*/
+    ${mediaSingleSharedStyle} &
+    div[class^='image-wrap-'] + div[class^='image-wrap-'] {
+      margin-left: 0;
+      margin-right: 0;
+    }
 
-export const Wrapper = styled.div`
+    ${columnLayoutSharedStyle};
+  `;
+}; // prettier-ignore
+
+export const DeprecatedWrapper = styled.div`
   font-size: ${editorFontSize}px;
   line-height: 1.5rem;
   color: ${themed({
@@ -322,21 +356,8 @@ export const Wrapper = styled.div`
     color: ${colors.placeholderText};
   }
 
-  ${whitespaceSharedStyles};
-  ${blockquoteSharedStyles};
-  ${headingsSharedStyles};
   ${panelSharedStyles};
   ${ruleSharedStyles};
-  ${paragraphSharedStyles};
-  ${listsSharedStyles};
-  ${indentationSharedStyles};
-  ${blockMarksSharedStyles};
-  ${codeMarkSharedStyles};
-  ${shadowSharedStyle};
-  ${dateSharedStyle};
-  ${textColorStyles};
-  ${tasksAndDecisionsStyles};
-  ${smartCardSharedStyles}
 
   & .UnknownBlock {
     font-family: ${fontFamily()};
@@ -401,11 +422,7 @@ export const Wrapper = styled.div`
 
   ${alignedHeadingAnchorStyle}
 
-  ${mediaSingleSharedStyle} &
-  div[class^='image-wrap-'] + div[class^='image-wrap-'] {
-    margin-left: 0;
-    margin-right: 0;
-  }
+
 
   /* Breakout for tables and extensions */
   .${RendererCssClassName.DOCUMENT} > {
@@ -436,7 +453,7 @@ export const Wrapper = styled.div`
     overflow-x: auto;
   }
 
-  ${tableSharedStyle}
+
 
   .${TableSharedCssClassName.TABLE_CONTAINER} {
     z-index: 0;
@@ -602,7 +619,6 @@ export const Wrapper = styled.div`
     }
   }
 
-  ${columnLayoutSharedStyle};
   & [data-layout-section] {
     margin-top: ${gridSize() * 2.5}px;
     & > div + div {

package/dist/es2019/ui/annotations/draft/component.js

@@ -1,26 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { InsertDraftPosition } from '../types';
 import { AnnotationsDraftContext } from '../context';
 import { splitText, calcTextSplitOffset } from './text';
 import { calcInsertDraftPositionOnText } from './position';
 import { dataAttributes } from './dom';
-import styled from 'styled-components';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
-const DraftAnnotation = styled.mark`
+
+const markStyles = props => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-  ${AnnotationSharedCSSByState.focus};
+  ${AnnotationSharedCSSByState(props).focus};
 `;
+
 export const AnnotationDraft = ({
   draftPosition,
   children
 }) => {
-  return /*#__PURE__*/React.createElement(DraftAnnotation, _extends({
+  return jsx("mark", _extends({
     "data-renderer-mark": true
-  }, dataAttributes(draftPosition)), children);
+  }, dataAttributes(draftPosition), {
+    css: markStyles
+  }), children);
 };
 export const getAnnotationIndex = (annotationPosition, fragmentCount) => {
   if (annotationPosition === InsertDraftPosition.START) {
@@ -45,13 +51,13 @@ export const applyAnnotationOnText = ({
   const annotateIndex = getAnnotationIndex(shouldApplyAnnotationAt, texts.length);
   return texts.map((value, index) => {
     if (annotateIndex === index) {
-      return /*#__PURE__*/React.createElement(AnnotationDraft, {
+      return jsx(AnnotationDraft, {
         key: index,
         draftPosition: draftPosition
       }, value);
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return jsx(React.Fragment, {
       key: index
     }, value);
   });
@@ -75,11 +81,11 @@ export const TextWithAnnotationDraft = ({
   }, [nextDraftPosition, textPosition]);
 
   if (shouldApplyAnnotationAt === false || !nextDraftPosition) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
 
   if (shouldApplyAnnotationAt === InsertDraftPosition.AROUND_TEXT) {
-    return /*#__PURE__*/React.createElement(AnnotationDraft, {
+    return jsx(AnnotationDraft, {
       key: 0,
       draftPosition: nextDraftPosition
     }, children);
@@ -89,7 +95,7 @@ export const TextWithAnnotationDraft = ({
   const texts = splitText(children, offsets);
 
   if (!texts) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+    return jsx(Fragment, null, children);
   }
 
   const components = applyAnnotationOnText({
@@ -97,5 +103,5 @@ export const TextWithAnnotationDraft = ({
     shouldApplyAnnotationAt,
     draftPosition: nextDraftPosition
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, components);
+  return jsx(Fragment, null, components);
 };

package/dist/es2019/ui/annotations/element/mark.js

@@ -1,22 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
 import React, { useMemo, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { AnnotationSharedCSSByState } from '@atlaskit/editor-common/styles';
 import { AnnotationMarkStates } from '@atlaskit/adf-schema';
-import styled from 'styled-components';
-const MarkStyled = styled.mark`
+
+const markStyles = props => css`
   color: inherit;
   background-color: unset;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
   &[data-mark-annotation-state='${AnnotationMarkStates.ACTIVE}'] {
-    ${AnnotationSharedCSSByState.blur};
+    ${AnnotationSharedCSSByState(props).blur};
 
     &:focus,
     &[data-has-focus='true'] {
-      ${AnnotationSharedCSSByState.focus};
+      ${AnnotationSharedCSSByState(props).focus};
     }
   }
 `;
+
 export const MarkComponent = ({
   annotationParentIds,
   children,
@@ -49,8 +53,10 @@ export const MarkComponent = ({
   } : {
     'aria-details': annotationIds.join(', ')
   };
-  return /*#__PURE__*/React.createElement(MarkStyled, _extends({
+  return jsx("mark", _extends({
     id: id,
     onClick: onMarkClick
-  }, accessibility, overriddenData), children);
+  }, accessibility, overriddenData, {
+    css: markStyles
+  }), children);
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "90.0.0",
+	"version": "92.0.1",
 	"sideEffects": false
 }

package/dist/esm/analytics/enums.js

@@ -12,6 +12,7 @@ export var ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";

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

@@ -2,9 +2,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
@@ -14,6 +14,16 @@ import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
 import { useFeatureFlags } from '../../use-feature-flags';
 import CopyButton from './codeBlockCopyButton';
 
+var codeBlockStyle = function codeBlockStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    [data-ds--code--code-block] {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n\n  "])), relativeFontSizeToBase16(fontSize()), overflowShadow({
+    background: themed({
+      light: N20,
+      dark: DN50
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }));
+};
+
 function CodeBlock(props) {
   var text = props.text,
       language = props.language,
@@ -23,11 +33,12 @@ function CodeBlock(props) {
   var featureFlags = useFeatureFlags();
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, allowCopyToClipboard ? /*#__PURE__*/React.createElement(CopyButton, {
+  return jsx("div", {
+    className: className,
+    css: codeBlockStyle
+  }, allowCopyToClipboard ? jsx(CopyButton, {
     content: text
-  }) : null, /*#__PURE__*/React.createElement(AkCodeBlock, {
+  }) : null, jsx(AkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
@@ -36,11 +47,4 @@ function CodeBlock(props) {
   }));
 }
 
-var IntlCodeBlock = injectIntl(CodeBlock);
-export default styled(IntlCodeBlock)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), relativeFontSizeToBase16(fontSize()), overflowShadow({
-  background: themed({
-    light: N20,
-    dark: DN50
-  }),
-  width: "".concat(gridSize(), "px")
-}));
+export default injectIntl(CodeBlock);

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

@@ -34,13 +34,15 @@ function Heading(props) {
   var headingId = props.headingId,
       dataAttributes = props.dataAttributes,
       allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
-      marks = props.marks;
+      marks = props.marks,
+      invisible = props.invisible;
   var HX = "h".concat(props.level);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  var 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, function (_ref) {
     var copyTextToClipboard = _ref.copyTextToClipboard;
     return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {

package/dist/esm/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: "".concat(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/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/table/sticky.js

@@ -12,6 +12,7 @@ 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
@@ -34,7 +35,7 @@ export var FixedTableDiv = styled.div.attrs({
       width: wrapperWidth
     };
   }
-})(_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) {
+})(_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' : '';
@@ -82,7 +83,16 @@ export var StickyTable = function StickyTable(_ref3) {
     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/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/ui/Expand.js

@@ -4,12 +4,14 @@ 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 { 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, ExpandLayoutWrapper, clearNextSiblingMarginTopStyle } 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';
@@ -29,7 +31,7 @@ var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _tagge
 });
 var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function WithRef(props, ref) {
   // @ts-ignore: incorrect innerRef typing
-  return /*#__PURE__*/React.createElement(ExpandLayoutWrapper, _extends({}, props, {
+  return jsx(ExpandLayoutWrapper, _extends({}, props, {
     innerRef: ref
   }));
 });
@@ -80,18 +82,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 +108,23 @@ 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(Title, {
     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);