@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -10,10 +10,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 { jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { akEditorToolbarKeylineHeight } from '@atlaskit/editor-shared-styles';
-import { FullPageEditorWrapper } from './StyledComponents';
+import { fullPageEditorWrapper } from './StyledComponents';
 import { ContextPanelWidthProvider } from '../../ContextPanel/context';
 import { FullPageContentArea } from './FullPageContentArea';
 import { FullPageToolbar } from './FullPageToolbar';
@@ -103,9 +105,10 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
       var props = this.props;
       var showKeyline = this.state.showKeyline;
       var featureFlags = (_props$editorView = props.editorView) !== null && _props$editorView !== void 0 && _props$editorView.state ? getFeatureFlags(props.editorView.state) : undefined;
-      return /*#__PURE__*/React.createElement(ContextPanelWidthProvider, null, /*#__PURE__*/React.createElement(FullPageEditorWrapper, {
+      return jsx(ContextPanelWidthProvider, null, jsx("div", {
+        css: fullPageEditorWrapper,
         className: "akEditor"
-      }, /*#__PURE__*/React.createElement(FullPageToolbar, {
+      }, jsx(FullPageToolbar, {
         appearance: props.appearance,
         beforeIcon: props.primaryToolbarIconBefore,
         collabEdit: props.collabEdit,
@@ -125,8 +128,7 @@ export var FullPageEditor = /*#__PURE__*/function (_React$Component) {
         providerFactory: props.providerFactory,
         showKeyline: showKeyline,
         featureFlags: featureFlags
-      }), /*#__PURE__*/React.createElement(FullPageContentArea, {
-        allowAnnotation: props.allowAnnotation,
+      }), jsx(FullPageContentArea, {
         appearance: props.appearance,
         contentArea: this.contentArea,
         contentAreaRef: this.contentAreaRef,

package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js

@@ -1,3 +1,5 @@
+/** @jsx jsx */
+import { jsx, useTheme } from '@emotion/react';
 import { WidthConsumer } from '@atlaskit/editor-common/ui';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import React from 'react';
@@ -6,32 +8,37 @@ import { ClickAreaBlock } from '../../Addon';
 import ContextPanel from '../../ContextPanel';
 import PluginSlot from '../../PluginSlot';
 import WidthEmitter from '../../WidthEmitter';
-import { ContentArea, EditorContentArea, SidebarArea, ScrollContainer, EditorContentGutter } from './StyledComponents';
+import { contentArea, editorContentAreaStyle, sidebarArea, ScrollContainer, editorContentGutterStyle, positionedOverEditorStyle } from './StyledComponents';
 import messages from './messages';
 export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
 var Content = /*#__PURE__*/React.memo(function (props) {
-  return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref) {
+  var theme = useTheme();
+  var fullWidthMode = props.appearance === 'full-width';
+  return jsx(WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref2) {
+    return jsx(ContextPanelConsumer, null, function (_ref2) {
       var positionedOverEditor = _ref2.positionedOverEditor;
-      return /*#__PURE__*/React.createElement(ContentArea, {
-        "data-testid": CONTENT_AREA_TEST_ID,
-        positionedOverEditor: positionedOverEditor
-      }, /*#__PURE__*/React.createElement(ScrollContainer, {
-        innerRef: props.scrollContainerRef,
-        allowAnnotation: props.allowAnnotation,
+      return jsx("div", {
+        css: [contentArea, positionedOverEditor && positionedOverEditorStyle],
+        "data-testid": CONTENT_AREA_TEST_ID
+      }, jsx(ScrollContainer, {
+        ref: props.scrollContainerRef,
         className: "fabric-editor-popup-scroll-parent"
-      }, /*#__PURE__*/React.createElement(ClickAreaBlock, {
+      }, jsx(ClickAreaBlock, {
         editorView: props.editorView
-      }, /*#__PURE__*/React.createElement(EditorContentArea, {
+      }, jsx("div", {
+        css: editorContentAreaStyle({
+          fullWidthMode: fullWidthMode,
+          layoutMaxWidth: theme.layoutMaxWidth,
+          containerWidth: width
+        }),
         role: "region",
         "aria-label": props.intl.formatMessage(messages.editableContentLabel),
-        fullWidthMode: props.appearance === 'full-width',
-        innerRef: props.contentAreaRef,
-        containerWidth: width
-      }, /*#__PURE__*/React.createElement(EditorContentGutter, {
-        className: ['ak-editor-content-area', props.appearance === 'full-width' ? 'fabric-editor--full-width-mode' : ''].join(' ')
-      }, props.customContentComponents, /*#__PURE__*/React.createElement(PluginSlot, {
+        ref: props.contentAreaRef
+      }, jsx("div", {
+        css: editorContentGutterStyle,
+        className: ['ak-editor-content-area', fullWidthMode ? 'fabric-editor--full-width-mode' : ''].join(' ')
+      }, props.customContentComponents, jsx(PluginSlot, {
         editorView: props.editorView,
         editorActions: props.editorActions,
         eventDispatcher: props.eventDispatcher,
@@ -45,9 +52,11 @@ var Content = /*#__PURE__*/React.memo(function (props) {
         disabled: !!props.disabled,
         containerElement: props.scrollContainer,
         dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
-      }), props.editorDOMElement)))), /*#__PURE__*/React.createElement(SidebarArea, null, props.contextPanel || /*#__PURE__*/React.createElement(ContextPanel, {
+      }), props.editorDOMElement)))), jsx("div", {
+        css: sidebarArea
+      }, props.contextPanel || jsx(ContextPanel, {
         visible: false
-      })), /*#__PURE__*/React.createElement(WidthEmitter, {
+      })), jsx(WidthEmitter, {
         editorView: props.editorView
       }));
     });

package/dist/esm/ui/Appearance/FullPage/FullPageToolbar.js

@@ -1,11 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
 import React, { useState, useEffect } from 'react';
+import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import AvatarsWithPluginState from '../../../plugins/collab-edit/ui';
 import FindReplaceToolbarButtonWithState from '../../../plugins/find-replace/FindReplaceToolbarButtonWithState';
 import { BeforePrimaryToolbarWrapper } from '../../../plugins/before-primaryToolbar/ui/BeforePrimaryToolbarWrapper';
 import Toolbar from '../../Toolbar';
-import { MainToolbar, MainToolbarIconBefore, MainToolbarFirstChild, MainToolbarSecondChild, NonCustomToolbarWrapper, CustomToolbarWrapper, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
+import { mainToolbarStyle, mainToolbarIconBeforeStyle, mainToolbarFirstChildStyle, mainToolbarSecondChildStyle, nonCustomToolbarWrapperStyle, customToolbarWrapperStyle, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT } from './MainToolbar';
 import { ContextPanelConsumer } from '../../ContextPanel/context';
 import messages from './messages';
 export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
@@ -16,7 +19,11 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       shouldSplitToolbar = _useState2[0],
       setShouldSplitToolbar = _useState2[1];
 
-  var nonCustomToolbar = /*#__PURE__*/React.createElement(NonCustomToolbarWrapper, null, props.beforeIcon && /*#__PURE__*/React.createElement(MainToolbarIconBefore, null, props.beforeIcon), /*#__PURE__*/React.createElement(Toolbar, {
+  var nonCustomToolbar = jsx("div", {
+    css: nonCustomToolbarWrapperStyle
+  }, props.beforeIcon && jsx("div", {
+    css: mainToolbarIconBeforeStyle
+  }, props.beforeIcon), jsx(Toolbar, {
     editorView: props.editorView,
     editorActions: props.editorActions,
     eventDispatcher: props.eventDispatcher,
@@ -31,15 +38,17 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
     containerElement: props.containerElement,
     hasMinWidth: props.hasMinWidth
   }));
-  var customToolbar = /*#__PURE__*/React.createElement(CustomToolbarWrapper, null, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? /*#__PURE__*/React.createElement(BeforePrimaryToolbarWrapper, {
+  var customToolbar = jsx("div", {
+    css: customToolbarWrapperStyle
+  }, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.twoLineEditorToolbar && !!props.customPrimaryToolbarComponents && 'before' in props.customPrimaryToolbarComponents ? jsx(BeforePrimaryToolbarWrapper, {
     beforePrimaryToolbarComponents: props.customPrimaryToolbarComponents.before
-  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : /*#__PURE__*/React.createElement(AvatarsWithPluginState, {
+  }) : null, (props === null || props === void 0 ? void 0 : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.showAvatarGroupAsPlugin) === true && !((_props$featureFlags3 = props.featureFlags) !== null && _props$featureFlags3 !== void 0 && _props$featureFlags3.twoLineEditorToolbar) ? null : jsx(AvatarsWithPluginState, {
     editorView: props.editorView,
     eventDispatcher: props.eventDispatcher,
     inviteToEditComponent: (_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.inviteToEditComponent,
     inviteToEditHandler: (_props$collabEdit2 = props.collabEdit) === null || _props$collabEdit2 === void 0 ? void 0 : _props$collabEdit2.inviteToEditHandler,
     isInviteToEditButtonSelected: (_props$collabEdit3 = props.collabEdit) === null || _props$collabEdit3 === void 0 ? void 0 : _props$collabEdit3.isInviteToEditButtonSelected
-  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? /*#__PURE__*/React.createElement(FindReplaceToolbarButtonWithState, {
+  }), (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.findReplace && (_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.twoLineEditorToolbar ? jsx(FindReplaceToolbarButtonWithState, {
     popupsBoundariesElement: props.popupsBoundariesElement,
     popupsMountPoint: props.popupsMountPoint,
     popupsScrollableElement: props.popupsScrollableElement,
@@ -62,21 +71,20 @@ export var EditorToolbar = /*#__PURE__*/React.memo(function (props) {
       };
     }
   });
-  return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref) {
+  return jsx(ContextPanelConsumer, null, function (_ref) {
     var _props$featureFlags7, _props$featureFlags8, _props$featureFlags9;
 
     var contextPanelWidth = _ref.width;
-    return /*#__PURE__*/React.createElement(MainToolbar, {
-      "data-testid": "ak-editor-main-toolbar",
-      showKeyline: props.showKeyline || contextPanelWidth > 0,
-      twoLineEditorToolbar: !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)
-    }, /*#__PURE__*/React.createElement(MainToolbarFirstChild, {
-      twoLineEditorToolbar: !!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar),
+    return jsx("div", {
+      css: mainToolbarStyle(props.showKeyline || contextPanelWidth > 0, !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.twoLineEditorToolbar)),
+      "data-testid": "ak-editor-main-toolbar"
+    }, jsx("div", {
+      css: mainToolbarFirstChildStyle(!!((_props$featureFlags8 = props.featureFlags) !== null && _props$featureFlags8 !== void 0 && _props$featureFlags8.twoLineEditorToolbar)),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.toolbarLabel)
-    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), /*#__PURE__*/React.createElement(MainToolbarSecondChild, {
+    }, shouldSplitToolbar ? customToolbar : nonCustomToolbar), jsx("div", {
+      css: mainToolbarSecondChildStyle(!!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar)),
       "data-testid": 'avatar-group-outside-plugin',
-      twoLineEditorToolbar: !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.twoLineEditorToolbar),
       role: "region",
       "aria-label": props.intl.formatMessage(messages.pageActionsLabel)
     }, shouldSplitToolbar ? nonCustomToolbar : customToolbar));

package/dist/esm/ui/Appearance/FullPage/MainToolbar.js

@@ -1,32 +1,29 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import { akEditorMenuZIndex, akEditorSwoopCubicBezier, akEditorToolbarKeylineHeight, akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 export var MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT = 868;
 var toolbarLineHeight = 56;
-export var MainToolbar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: ", ";\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), function (props) {
-  return props.showKeyline ? "0 ".concat(akEditorToolbarKeylineHeight, "px 0 0 ").concat(N30) : 'none';
-}, akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex-wrap: wrap;\n        height: calc(".concat(toolbarLineHeight, "px * 2);\n      ");
-}, akEditorMobileMaxWidth, toolbarLineHeight);
-MainToolbar.displayName = 'MainToolbar';
-export var MainToolbarIconBefore = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
-MainToolbarIconBefore.displayName = 'MainToolbarIconBefore';
-export var MainToolbarFirstChild = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    ", "\n  }\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        flex: 1 1 100%;\n        height: ".concat(toolbarLineHeight, "px;\n        justify-content: flex-end;\n        // ED-10241: We add fit-content to ensure that MainToolbar does not\n        // shrink more than the size of its contents. This will prevent the\n        // find/replace icon from being overlapped during a confluence\n        // publish operation\n        min-width: fit-content;\n      ");
-}, akEditorMobileMaxWidth);
-MainToolbarFirstChild.displayName = 'MainToolbarFirstChild';
-export var MainToolbarSecondChild = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n  @media (max-width: ", "px) {\n    ", "\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, function (props) {
-  return props.twoLineEditorToolbar && "\n        display: flex;\n        flex-grow: 1;\n        flex: 1 1 100%;\n        margin: auto;\n        height: ".concat(toolbarLineHeight, "px;\n        min-width: 0;\n      ");
-});
-MainToolbarSecondChild.displayName = 'MainToolbarSecondChild';
-export var SecondaryToolbar = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  justify-content: flex-end;\n  align-items: center;\n  flex-shrink: 0;\n  display: flex;\n  padding: 24px 0;\n"])));
-SecondaryToolbar.displayName = 'SecondaryToolbar';
-export var NonCustomToolbarWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
-NonCustomToolbarWrapper.displayName = 'NonCustomToolbar';
-export var CustomToolbarWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));
-CustomToolbarWrapper.displayName = 'CustomToolbar';
+var mainToolbarWithKeyline = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-shadow: 0 ", "px 0 0 ", ";\n"])), akEditorToolbarKeylineHeight, N30);
+var mainToolbarTwoLineStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex-wrap: wrap;\n    height: calc(", "px * 2);\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+var mainToolbar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  box-shadow: none;\n  transition: box-shadow 200ms ", ";\n  z-index: ", ";\n  display: flex;\n  height: ", "px;\n  flex-shrink: 0;\n  background-color: white;\n\n  & object {\n    height: 0 !important;\n  }\n\n  @media (max-width: ", "px) {\n    display: grid;\n    height: calc(", "px * 2);\n  }\n"])), akEditorSwoopCubicBezier, akEditorMenuZIndex, toolbarLineHeight, akEditorMobileMaxWidth, toolbarLineHeight);
+export var mainToolbarStyle = function mainToolbarStyle(showKeyline, twoLineEditorToolbar) {
+  return [mainToolbar, showKeyline && mainToolbarWithKeyline, twoLineEditorToolbar && mainToolbarTwoLineStyle];
+};
+export var mainToolbarIconBeforeStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: ", "px;\n  height: ", "px;\n  width: ", "px;\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), gridSize() * 2, gridSize() * 4, gridSize() * 4, akEditorMobileMaxWidth);
+var mainToolbarFirstChild = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n\n  @media (max-width: ", "px) {\n    grid-column: 1;\n    grid-row: 1;\n  }\n"])), akEditorMobileMaxWidth);
+var mainToolbarFirstChildTowLine = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    flex: 1 1 100%;\n    height: ", "px;\n    justify-content: flex-end;\n    // ED-10241: We add fit-content to ensure that MainToolbar does not\n    // shrink more than the size of its contents. This will prevent the\n    // find/replace icon from being overlapped during a confluence\n    // publish operation\n    min-width: fit-content;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+export var mainToolbarFirstChildStyle = function mainToolbarFirstChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarFirstChild, twoLineEditorToolbar && mainToolbarFirstChildTowLine];
+};
+var mainToolbarSecondChild = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  // ED-10241: We add fit-content to ensure that MainToolbar does not\n  // shrink more than the size of its contents. This will prevent the\n  // find/replace icon from being overlapped during a confluence\n  // publish operation\n  min-width: fit-content;\n"])));
+var mainToolbarSecondChildTwoLine = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  @media (max-width: ", "px) {\n    display: flex;\n    flex-grow: 1;\n    flex: 1 1 100%;\n    margin: auto;\n    height: ", "px;\n    min-width: 0;\n  }\n"])), MAXIMUM_TWO_LINE_TOOLBAR_BREAKPOINT, toolbarLineHeight);
+export var mainToolbarSecondChildStyle = function mainToolbarSecondChildStyle(twoLineEditorToolbar) {
+  return [mainToolbarSecondChild, twoLineEditorToolbar && mainToolbarSecondChildTwoLine];
+};
+export var nonCustomToolbarWrapperStyle = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  flex-grow: 1;\n"])));
+export var customToolbarWrapperStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n"])));

package/dist/esm/ui/Appearance/FullPage/StyledComponents.js

@@ -1,43 +1,44 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorSwoopCubicBezier, akLayoutGutterOffset, ATLASSIAN_NAVIGATION_HEIGHT, akEditorContextPanelWidth } from '@atlaskit/editor-shared-styles';
 import { taskListSelector, decisionListSelector } from '@atlaskit/adf-schema';
-import ContentStyles from '../../ContentStyles';
-import { deprecatedTableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
+import { createEditorContentStyle } from '../../ContentStyles';
+import { tableFullPageEditorStyles } from '../../../plugins/table/ui/common-styles';
 import { tableMarginFullWidthMode } from '../../../plugins/table/ui/consts';
 import { scrollbarStyles } from '../../styles';
 var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
 var TOTAL_PADDING = akEditorGutterPadding * 2;
-export var FullPageEditorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
-FullPageEditorWrapper.displayName = 'FullPageEditorWrapper';
-export var ScrollContainer = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
-ScrollContainer.displayName = 'ScrollContainer';
-export var ContentArea = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0\n    ", "px;\n\n  // transition used to match scrollbar with config panel opening animation\n  // only use animation when opening as there is a bug with floating toolbars.\n  transition: padding ", "ms\n    ", ";\n"])), ATLASSIAN_NAVIGATION_HEIGHT, function (p) {
-  return p.positionedOverEditor ? akEditorContextPanelWidth : 0;
-}, function (p) {
-  return p.positionedOverEditor ? 500 : 0;
-}, akEditorSwoopCubicBezier);
-ContentArea.displayName = 'ContentArea';
-export var SidebarArea = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"])));
-SidebarArea.displayName = 'SidebarArea';
-export var EditorContentArea = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n\n    /* Prevent horizontal scroll on page in full width mode */\n    ", "\n  }\n"])), function (_ref) {
-  var theme = _ref.theme,
-      fullWidthMode = _ref.fullWidthMode;
-  return (fullWidthMode ? akEditorFullWidthLayoutWidth : theme.layoutMaxWidth) + TOTAL_PADDING;
-}, SWOOP_ANIMATION, taskListSelector, decisionListSelector, deprecatedTableFullPageEditorStyles, function (_ref2) {
-  var containerWidth = _ref2.containerWidth;
-
-  if (!containerWidth) {
-    // initially hide until we have a containerWidth and can properly size them,
-    // otherwise they can cause the editor width to extend which is non-recoverable
-    return "\n          .pm-table-container,\n          .code-block,\n          .extension-container {\n            display: none;\n          }\n        ";
-  }
-
-  return "\n        .pm-table-container,\n        .code-block,\n        .extension-container {\n          max-width: ".concat(containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, "px;\n        }\n\n        [data-layout-section] {\n          max-width: ").concat(containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2, "px;\n        }\n      ");
-});
-EditorContentArea.displayName = 'EditorContentArea';
-export var EditorContentGutter = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), akEditorGutterPadding);
-EditorContentGutter.displayName = 'EditorContentGutter';
+export var fullPageEditorWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 340px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n"])));
+var scrollStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  height: 100%;\n  overflow-y: scroll;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  scroll-behavior: smooth;\n  ", ";\n"])), scrollbarStyles);
+export var ScrollContainer = createEditorContentStyle(scrollStyles);
+ScrollContainer.displayName = 'ScrollContainer'; // transition used to match scrollbar with config panel opening animation
+// only use animation when opening as there is a bug with floating toolbars.
+
+export var positionedOverEditorStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  transition: padding 500ms ", ";\n"])), akEditorContextPanelWidth, akEditorSwoopCubicBezier);
+export var contentArea = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  height: calc(100% - ", ");\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  transition: padding 0ms ", ";\n"])), ATLASSIAN_NAVIGATION_HEIGHT, akEditorSwoopCubicBezier);
+export var sidebarArea = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  height: 100%;\n  box-sizing: border-box;\n  align-self: flex-end;\n"]))); // initially hide until we have a containerWidth and can properly size them,
+// otherwise they can cause the editor width to extend which is non-recoverable
+
+export var editorContentAreaHideContainer = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      display: none;\n    }\n  }\n"])));
+/* Prevent horizontal scroll on page in full width mode */
+
+var editorContentAreaContainerStyle = function editorContentAreaContainerStyle(containerWidth) {
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .fabric-editor--full-width-mode {\n    .pm-table-container,\n    .code-block,\n    .extension-container {\n      max-width: ", "px;\n    }\n\n    [data-layout-section] {\n      max-width: ", "px;\n    }\n  }\n"])), containerWidth - TOTAL_PADDING - tableMarginFullWidthMode * 2, containerWidth - TOTAL_PADDING + akLayoutGutterOffset * 2);
+};
+
+export var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
+  var layoutMaxWidth = _ref.layoutMaxWidth,
+      fullWidthMode = _ref.fullWidthMode,
+      containerWidth = _ref.containerWidth;
+  return [editorContentArea, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth), containerWidth ? editorContentAreaContainerStyle(containerWidth) : editorContentAreaHideContainer];
+};
+
+var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
+  return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  max-width: ", "px;\n"])), layoutMaxWidth + TOTAL_PADDING);
+};
+
+var editorContentArea = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  line-height: 24px;\n  padding-top: 50px;\n  padding-bottom: 55px;\n  height: calc(\n    100% - 105px\n  ); /* fill the viewport: 100% - (padding top & bottom) */\n  width: 100%;\n  margin: auto;\n  flex-direction: column;\n  flex-grow: 1;\n\n  max-width: ", "px;\n  transition: max-width ", ";\n  & .ProseMirror {\n    flex-grow: 1;\n    box-sizing: border-box;\n  }\n\n  & .ProseMirror {\n    & > * {\n      /* pre-emptively clear all direct descendant content, just in case any are adjacent floated content */\n      clear: both;\n    }\n    > p,\n    > ul,\n    > ol:not(", "):not(", "),\n    > h1,\n    > h2,\n    > h3,\n    > h4,\n    > h5,\n    > h6 {\n      /* deliberately allow wrapping of text based nodes, just in case any are adjacent floated content */\n      clear: none;\n    }\n\n    > p:last-child {\n      margin-bottom: 24px;\n    }\n  }\n\n  ", ";\n\n  .fabric-editor--full-width-mode {\n    /* Full Width Mode styles for ignoring breakout sizes */\n    .fabric-editor-breakout-mark,\n    .extension-container.block,\n    .pm-table-container {\n      width: 100% !important;\n    }\n\n    .fabric-editor-breakout-mark {\n      margin-left: unset !important;\n      transform: none !important;\n    }\n  }\n"])), akEditorFullWidthLayoutWidth + TOTAL_PADDING, SWOOP_ANIMATION, taskListSelector, decisionListSelector, tableFullPageEditorStyles);
+export var editorContentGutterStyle = css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  padding: 0 ", "px;\n"])), akEditorGutterPadding);

package/dist/esm/ui/Appearance/FullPage/messages.js

@@ -1,4 +1,4 @@
-import { defineMessages } from 'react-intl';
+import { defineMessages } from 'react-intl-next';
 export default defineMessages({
   toolbarLabel: {
     id: 'fabric.editor.toolbarLabel',

package/dist/esm/ui/AppearanceComponents/Mobile.js

@@ -1,18 +1,18 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
+/** @jsx jsx */
 import React, { useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { pluginKey as maxContentSizePluginKey } from '../../plugins/max-content-size';
 import { mobileDimensionsPluginKey } from '../../plugins/mobile-dimensions/plugin-factory';
 import WithPluginState from '../WithPluginState';
 import WithFlash from '../WithFlash';
-import ContentStyles from '../ContentStyles';
+import { createEditorContentStyle } from '../ContentStyles';
 import { ClickAreaMobile as ClickArea } from '../Addon';
-var MobileEditor = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 30px;\n  width: 100%;\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])));
-MobileEditor.displayName = 'MobileEditor';
-var ContentArea = styled(ContentStyles)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+var mobileEditor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-height: 30px;\n  width: 100%;\n  max-width: inherit;\n  box-sizing: border-box;\n  word-wrap: break-word;\n\n  div > .ProseMirror {\n    outline: none;\n    white-space: pre-wrap;\n    padding: 0;\n    margin: 0;\n  }\n"])));
+var ContentArea = createEditorContentStyle();
 ContentArea.displayName = 'ContentArea';
 export function MobileAppearance(_ref) {
   var editorView = _ref.editorView,
@@ -50,21 +50,20 @@ export function MobileAppearance(_ref) {
       }
     }
 
-    return /*#__PURE__*/React.createElement(WithFlash, {
+    return jsx(WithFlash, {
       animate: maxContentSizeReached
-    }, /*#__PURE__*/React.createElement(MobileEditor, {
-      isMaxContentSizeReached: maxContentSizeReached,
-      maxHeight: maxHeight
-    }, /*#__PURE__*/React.createElement(ClickArea, {
+    }, jsx("div", {
+      css: mobileEditor
+    }, jsx(ClickArea, {
       editorView: editorView || undefined,
       minHeight: minHeight,
       persistScrollGutter: persistScrollGutter,
       isExpanded: currentIsExpanded
-    }, /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
+    }, jsx(ContentArea, null, jsx("div", {
       className: "ak-editor-content-area"
     }, children)))));
-  }, [children, maxHeight, editorView, persistScrollGutter]);
-  return /*#__PURE__*/React.createElement(WithPluginState, {
+  }, [children, editorView, persistScrollGutter]);
+  return jsx(WithPluginState, {
     plugins: {
       maxContentSize: maxContentSizePluginKey,
       mobileDimensions: mobileDimensionsPluginKey

package/dist/esm/ui/ChromeCollapsed/index.js

@@ -10,9 +10,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; } }
 
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { inputStyle } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { messages } from './messages';
 
@@ -59,8 +61,9 @@ var ChromeCollapsed = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var placeholder = this.props.text || this.props.intl.formatMessage(messages.chromeCollapsedPlaceholder);
-      return /*#__PURE__*/React.createElement(Input, {
-        innerRef: this.handleInputRef,
+      return jsx("input", {
+        css: inputStyle,
+        ref: this.handleInputRef,
         onFocus: this.focusHandler,
         placeholder: placeholder
       });

package/dist/esm/ui/ChromeCollapsed/styles.js

@@ -2,8 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { akEditorSubtleAccent, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N300, N50 } from '@atlaskit/theme/colors';
-export var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), akEditorSubtleAccent, borderRadius(), relativeFontSizeToBase16(14), N300, N50);
+export var inputStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* Normal .className gets overridden by input[type=text] hence this hack to produce input.className */\n  input& {\n    background-color: white;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n    box-sizing: border-box;\n    height: 40px;\n    padding-left: 20px;\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: ", ";\n    width: 100%;\n    font-weight: 400;\n    line-height: 1.42857142857143;\n    letter-spacing: -0.005em;\n    color: ", ";\n\n    &:hover {\n      border-color: ", ";\n      cursor: text;\n    }\n  }\n"])), akEditorSubtleAccent, borderRadius(), relativeFontSizeToBase16(14), N300, N50);

package/dist/esm/ui/ColorPalette/Color/index.js

@@ -10,11 +10,13 @@ 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 { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
-import { Button, ButtonWrapper } from './styles';
+import { buttonStyle, buttonWrapperStyle } from './styles';
 import Tooltip from '@atlaskit/tooltip';
 
 var Color = /*#__PURE__*/function (_PureComponent) {
@@ -61,9 +63,12 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           _this$props2$checkMar = _this$props2.checkMarkColor,
           checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         content: label
-      }, /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      }, jsx("span", {
+        css: buttonWrapperStyle
+      }, jsx("button", {
+        css: buttonStyle,
         "aria-label": label,
         role: "radio",
         "aria-checked": isSelected,
@@ -76,7 +81,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus
-      }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      }, isSelected && jsx(EditorDoneIcon, {
         primaryColor: checkMarkColor,
         label: ""
       }))));

package/dist/esm/ui/ColorPalette/Color/styles.js

@@ -2,7 +2,7 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
-export var Button = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), N900, N0);
-export var ButtonWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), N50);
+export var buttonStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 26px;\n  width: 26px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), N900, N0);
+export var buttonWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border-color: ", ";\n  }\n"])), N50);

package/dist/esm/ui/ColorPalette/Palettes/panelBackgroundPalette.js

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { colors } from '@atlaskit/theme';
 import { DEFAULT_BORDER_COLOR } from './common';
-import { darkPanelColors } from '@atlaskit/editor-common/styles';
+import { darkPanelColors } from '@atlaskit/editor-common/panel';
 export var panelBackgroundPalette = [{
   label: 'White',
   value: colors.N0

package/dist/esm/ui/ColorPalette/index.js

@@ -1,7 +1,9 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import Color from './Color';
-import { ColorPaletteWrapper } from './styles';
+import { colorPaletteWrapper } from './styles';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
 
@@ -35,8 +37,9 @@ var ColorPalette = function ColorPalette(props) {
       return resultArray;
     }, []);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
-    return /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+  return jsx(React.Fragment, null, colorsPerRow.map(function (row, rowIdx) {
+    return jsx("div", {
+      css: colorPaletteWrapper,
       className: className,
       key: "row-first-color-".concat(row[0].value),
       role: "radiogroup"
@@ -45,7 +48,7 @@ var ColorPalette = function ColorPalette(props) {
           label = _ref.label,
           border = _ref.border,
           message = _ref.message;
-      return /*#__PURE__*/React.createElement(Color, {
+      return jsx(Color, {
         key: value,
         value: value,
         borderColor: border,

package/dist/esm/ui/ColorPalette/styles.js

@@ -2,6 +2,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { gridSize } from '@atlaskit/theme/constants';
-export var ColorPaletteWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), gridSize());
+export var colorPaletteWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n"])), gridSize());