@atlaskit/editor-core 163.0.0 → 164.0.0

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

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

@@ -3,8 +3,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
+/** @jsx jsx */
 import React from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
@@ -16,9 +17,9 @@ import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-n
 import { editorAnalyticsChannel } from '../../plugins/analytics/consts';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../plugins/analytics/types'; // helps adjusts position of popup
 
-var ColorPickerButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
+var colorPickerButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"]))); // Control the size of color picker buttons and preview
 
-var ColorPickerWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
+var colorPickerWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  background-color: white;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  padding: 8px 0px;\n"])), borderRadius(), N60A, N60A);
 
 var ColorPickerButton = function ColorPickerButton(props) {
   var _props$size, _props$size2;
@@ -68,13 +69,15 @@ var ColorPickerButton = function ColorPickerButton(props) {
       return;
     }
 
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
       offset: [0, 10],
       alignX: props.alignX
-    }, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
+    }, jsx("div", {
+      css: colorPickerWrapper
+    }, jsx(ColorPaletteWithListeners, {
       palette: props.colorPalette,
       cols: props.cols,
       selectedColor: props.currentColor || null,
@@ -84,10 +87,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
   };
 
   var title = props.title || '';
-  return /*#__PURE__*/React.createElement(ColorPickerButtonWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx("div", {
+    css: colorPickerButtonWrapper
+  }, jsx(Tooltip, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",

package/dist/esm/ui/ConfigPanel/Fields/Boolean.js

@@ -14,7 +14,7 @@ import { Field } from '@atlaskit/form';
 import AKToggle from '@atlaskit/toggle';
 import { ValidationError } from '../types';
 import FieldMessages from '../FieldMessages';
-import { RequiredIndicator } from './common/RequiredIndicator';
+import { requiredIndicator } from './common/RequiredIndicator';
 var toggleFieldWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 var toggleLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 3px 3px 3px 0px;\n  flex-grow: 1;\n"])));
 
@@ -99,7 +99,8 @@ function Toggle(_ref3) {
       css: toggleLabel,
       id: id,
       htmlFor: id
-    }, label, isRequired ? jsx(RequiredIndicator, {
+    }, label, isRequired ? jsx("span", {
+      css: requiredIndicator,
       "aria-hidden": "true"
     }, "*") : null), jsx(AKToggle, _extends({}, restFieldProps, {
       onChange: function onChange(event) {

package/dist/esm/ui/ConfigPanel/Fields/CheckboxGroup.js

@@ -6,8 +6,9 @@ var _excluded = ["onChange", "value"];
 
 var _templateObject;
 
-import React, { useCallback } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { Fragment, useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import { Checkbox as AKCheckbox } from '@atlaskit/checkbox';
 import { Field, Fieldset as AKFieldset } from '@atlaskit/form';
 import { ValidationError } from '../types';
@@ -19,7 +20,7 @@ function _validate(value, isRequired) {
   }
 }
 
-var RequiredIndicator = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: #bf2600;\n"])));
+var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: #bf2600;\n"])));
 
 function CheckboxGroupInner(_ref) {
   var label = _ref.label,
@@ -46,7 +47,7 @@ function CheckboxGroupInner(_ref) {
     onFieldChange();
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AKFieldset, {
+  return jsx(Fragment, null, jsx(AKFieldset, {
     legend: label
   }, options.map(function (_ref2, i) {
     var optionLabel = _ref2.label,
@@ -57,7 +58,7 @@ function CheckboxGroupInner(_ref) {
       _onChange(optionValue, event.target.checked);
     };
 
-    return /*#__PURE__*/React.createElement(AKCheckbox, _extends({
+    return jsx(AKCheckbox, _extends({
       key: i
     }, restFieldProps, {
       isRequired: false,
@@ -65,7 +66,7 @@ function CheckboxGroupInner(_ref) {
       isChecked: isChecked,
       onChange: onOptionChange
     }));
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     error: error,
     description: description
   }));
@@ -81,15 +82,16 @@ export default function CheckboxGroup(_ref3) {
       _field$isRequired = field.isRequired,
       isRequired = _field$isRequired === void 0 ? false : _field$isRequired,
       options = field.items;
-  var label = /*#__PURE__*/React.createElement(React.Fragment, null, labelBase, isRequired ? /*#__PURE__*/React.createElement(RequiredIndicator, {
+  var label = jsx(Fragment, null, labelBase, isRequired ? jsx("span", {
+    css: requiredIndicator,
     "aria-hidden": "true"
-  }, " *") : null);
+  }, ' ', "*") : null);
 
   var _onFieldChange = useCallback(function () {
     onFieldChange(name, true);
   }, [name, onFieldChange]);
 
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -97,7 +99,7 @@ export default function CheckboxGroup(_ref3) {
       return _validate(value, isRequired);
     }
   }, function (props) {
-    return /*#__PURE__*/React.createElement(CheckboxGroupInner, _extends({
+    return jsx(CheckboxGroupInner, _extends({
       label: label,
       description: description,
       options: options,

package/dist/esm/ui/ConfigPanel/Fields/ColorPicker.js

@@ -7,14 +7,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import { Fragment } from 'react';
 import { Field } from '@atlaskit/form';
 import { DEFAULT_BORDER_COLOR } from '../../../ui/ColorPalette/Palettes/common';
 import { isValidHex } from '../utils';
-import styled from 'styled-components';
 import { validate as _validate } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
-import { RequiredIndicator } from './common/RequiredIndicator';
+import { requiredIndicator } from './common/RequiredIndicator';
 import { headingSizes } from '@atlaskit/theme/typography';
 import FieldMessages from '../FieldMessages';
 import ColorPickerButton from '../../ColorPickerButton';
@@ -111,8 +112,8 @@ var colorPalette = [{
     border: DEFAULT_BORDER_COLOR
   });
 });
-var ColorPickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * gridSize(), gridSize());
-var ColorPickerLabel = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), headingSizes.h400.size);
+var colorPickerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  height: ", "px;\n  padding-right: ", "px;\n"])), 4 * gridSize(), gridSize());
+var colorPickerLabel = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  margin-top: 0;\n"])), headingSizes.h400.size);
 
 var ColorPicker = function ColorPicker(props) {
   var name = props.name,
@@ -133,7 +134,7 @@ var ColorPicker = function ColorPicker(props) {
     onFieldChange(name, currentColor !== colorValue);
   };
 
-  return /*#__PURE__*/React.createElement(ColorPickerButton, {
+  return jsx(ColorPickerButton, {
     title: title,
     currentColor: currentColor,
     onChange: onColorChange,
@@ -155,7 +156,7 @@ var ColorPickerField = function ColorPickerField(_ref) {
   var label = field.label,
       defaultValue = field.defaultValue,
       isRequired = field.isRequired;
-  return /*#__PURE__*/React.createElement(Field, {
+  return jsx(Field, {
     name: name,
     isRequired: isRequired,
     defaultValue: defaultValue,
@@ -165,16 +166,21 @@ var ColorPickerField = function ColorPickerField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerWrapper, null, /*#__PURE__*/React.createElement(ColorPickerLabel, null, label, isRequired && /*#__PURE__*/React.createElement(RequiredIndicator, {
+    return jsx(Fragment, null, jsx("div", {
+      css: colorPickerWrapper
+    }, jsx("label", {
+      css: colorPickerLabel
+    }, label, isRequired && jsx("span", {
+      css: requiredIndicator,
       "aria-hidden": "true"
-    }, "*")), /*#__PURE__*/React.createElement(ColorPicker, {
+    }, "*")), jsx(ColorPicker, {
       name: name,
       title: label,
       currentColor: fieldProps.value,
       colorPalette: colorPalette,
       onChange: fieldProps.onChange,
       onFieldChange: onFieldChange
-    })), error && /*#__PURE__*/React.createElement(FieldMessages, {
+    })), error && jsx(FieldMessages, {
       error: error,
       description: ""
     }));