@atlaskit/renderer 89.0.0 → 92.0.0

package/dist/esm/i18n/sv.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Swedish
+//Swedish
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopierad!',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopiera',
+  'fabric.editor.headingLink.ascOrderLabel': 'Sortera kolumn Ö till A',
+  'fabric.editor.headingLink.ascSortingLabel': 'stigande',
   'fabric.editor.headingLink.copied': 'Kopierad!',
   'fabric.editor.headingLink.copyAnchorLink': 'Kopiera länk till rubrik',
-  'fabric.editor.headingLink.failedToCopy': 'Kopiering misslyckades'
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopiera',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Du kan inte sortera en tabell med sammanslagna celler',
+  'fabric.editor.headingLink.failedToCopy': 'Kopiering misslyckades',
+  'fabric.editor.headingLink.noOrderLabel': 'Sortera kolumn A till Ö',
+  'fabric.editor.headingLink.noneSortingLabel': 'fallande'
 };

package/dist/esm/i18n/th.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Thai
+//Thai (Thailand)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'คัดลอกแล้ว!',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'คัดลอก',
+  'fabric.editor.headingLink.ascOrderLabel': 'เรียงจากคอลัมน์ Z ไป A',
+  'fabric.editor.headingLink.ascSortingLabel': 'จากน้อยไปหามาก',
   'fabric.editor.headingLink.copied': 'คัดลอกแล้ว!',
   'fabric.editor.headingLink.copyAnchorLink': 'คัดลอกลิงก์ที่เชื่อมไปยังหัวเรื่อง',
-  'fabric.editor.headingLink.failedToCopy': 'การคัดลอกไม่สำเร็จ'
+  'fabric.editor.headingLink.copyAriaLabel': 'คัดลอก',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ คุณไม่สามารถจัดเรียงตารางด้วยช่องข้อมูลที่ถูกรวมได้',
+  'fabric.editor.headingLink.failedToCopy': 'การคัดลอกไม่สำเร็จ',
+  'fabric.editor.headingLink.noOrderLabel': 'เรียงจากคอลัมน์ A ไป Z',
+  'fabric.editor.headingLink.noneSortingLabel': 'จากมากไปหาน้อย'
 };

package/dist/esm/i18n/tr.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Turkish
+//Turkish (Turkey)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Kopyalandı!',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Kopyala',
+  'fabric.editor.headingLink.ascOrderLabel': "Sütunu Z'den A'ya sırala",
+  'fabric.editor.headingLink.ascSortingLabel': 'artan',
   'fabric.editor.headingLink.copied': 'Kopyalandı!',
   'fabric.editor.headingLink.copyAnchorLink': 'Başlık bağlantısını kopyala',
-  'fabric.editor.headingLink.failedToCopy': 'Kopyalama işlemi başarısız oldu'
+  'fabric.editor.headingLink.copyAriaLabel': 'Kopyala',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Birleştirilmiş hücre içeren bir tabloyu sıralayamazsınız',
+  'fabric.editor.headingLink.failedToCopy': 'Kopyalama işlemi başarısız oldu',
+  'fabric.editor.headingLink.noOrderLabel': "Sütunu A'dan Z'ye sırala",
+  'fabric.editor.headingLink.noneSortingLabel': 'azalan'
 };

package/dist/esm/i18n/uk.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Ukrainian
+//Ukrainian (Ukraine)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Скопійовано',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Скопіювати',
+  'fabric.editor.headingLink.ascOrderLabel': 'Сортувати стовпці від Я до А',
+  'fabric.editor.headingLink.ascSortingLabel': 'за зростанням',
   'fabric.editor.headingLink.copied': 'Скопійовано',
   'fabric.editor.headingLink.copyAnchorLink': 'Скопіювати посилання на заголовок',
-  'fabric.editor.headingLink.failedToCopy': 'Не вдалося скопіювати'
+  'fabric.editor.headingLink.copyAriaLabel': 'Копіювати',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Не можна сортувати таблицю, у якій є об’єднані клітинки',
+  'fabric.editor.headingLink.failedToCopy': 'Не вдалося скопіювати',
+  'fabric.editor.headingLink.noOrderLabel': 'Сортувати стовпці від А до Я',
+  'fabric.editor.headingLink.noneSortingLabel': 'за спаданням'
 };

package/dist/esm/i18n/vi.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Vietnamese
+//Vietnamese (Vietnam)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': 'Đã sao chép!',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': 'Sao chép',
+  'fabric.editor.headingLink.ascOrderLabel': 'Sắp xếp cột theo thứ tự từ Z đến A',
+  'fabric.editor.headingLink.ascSortingLabel': 'tăng dần',
   'fabric.editor.headingLink.copied': 'Đã sao chép!',
   'fabric.editor.headingLink.copyAnchorLink': 'Sao chép liên kết vào tiêu đề',
-  'fabric.editor.headingLink.failedToCopy': 'Sao chép không thành công'
+  'fabric.editor.headingLink.copyAriaLabel': 'Sao chép',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ Bạn không thể sắp xếp bảng có các ô đã hợp nhất',
+  'fabric.editor.headingLink.failedToCopy': 'Sao chép không thành công',
+  'fabric.editor.headingLink.noOrderLabel': 'Sắp xếp cột theo thứ tự từ A đến Z',
+  'fabric.editor.headingLink.noneSortingLabel': 'giảm dần'
 };

package/dist/esm/i18n/zh.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// Chinese
+//Chinese (Simplified)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': '已复制！',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': '复制',
+  'fabric.editor.headingLink.ascOrderLabel': '按照 Z 到 A 进行列排序',
+  'fabric.editor.headingLink.ascSortingLabel': '升序',
   'fabric.editor.headingLink.copied': '已复制！',
   'fabric.editor.headingLink.copyAnchorLink': '复制标题链接',
-  'fabric.editor.headingLink.failedToCopy': '复制失败'
+  'fabric.editor.headingLink.copyAriaLabel': '复制',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ 无法对包含合并单元格的表格进行排序',
+  'fabric.editor.headingLink.failedToCopy': '复制失败',
+  'fabric.editor.headingLink.noOrderLabel': '按照 A 到 Z 进行列排序',
+  'fabric.editor.headingLink.noneSortingLabel': '降序'
 };

package/dist/esm/i18n/zh_TW.js

@@ -1,14 +1,20 @@
 /**
  * NOTE:
  *
- * This file is automatically generated by i18n-tools.
+ * This file is automatically generated by Traduki 2.0.
  * DO NOT CHANGE IT BY HAND or your changes will be lost.
  */
-// undefined
+//Chinese (Traditional)
 export default {
   'fabric.editor.codeBlockCopyButton.copiedToClipboard': '已複製！',
   'fabric.editor.codeBlockCopyButton.copyToClipboard': '複製',
+  'fabric.editor.headingLink.ascOrderLabel': '從 Z 欄排序到 A 欄',
+  'fabric.editor.headingLink.ascSortingLabel': '遞增',
   'fabric.editor.headingLink.copied': '已複製！',
   'fabric.editor.headingLink.copyAnchorLink': '複製標題連結',
-  'fabric.editor.headingLink.failedToCopy': '複製失敗'
+  'fabric.editor.headingLink.copyAriaLabel': '複製',
+  'fabric.editor.headingLink.descOrderLabel': '⚠️ 您無法排序具有合併儲存格的表格',
+  'fabric.editor.headingLink.failedToCopy': '複製失敗',
+  'fabric.editor.headingLink.noOrderLabel': '從 A 欄排序到 Z 欄',
+  'fabric.editor.headingLink.noneSortingLabel': '遞減'
 };

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);