@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -10,9 +10,10 @@ 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, { Fragment, useState, useEffect, useMemo } from 'react';
+/** @jsx jsx */
+import { Fragment, useState, useEffect, useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { Field } from '@atlaskit/form';
 import { RadioGroup } from '@atlaskit/radio';
 import { DatePicker } from '@atlaskit/datetime-picker';
@@ -20,9 +21,9 @@ import TextField from '@atlaskit/textfield';
 import { messages } from '../messages';
 import FieldMessages from '../FieldMessages';
 import { validate as _validate, validateRequired } from '../utils';
-var HorizontalFields = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
-var HorizontalFieldWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-basis: 47%;\n"])));
-var Hidden = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
+var horizontalFields = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n"])));
+var horizontalFieldWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-basis: 47%;\n"])));
+var hidden = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: none;\n"])));
 
 var getFromDefaultValue = function getFromDefaultValue(field, attribute) {
   if (field.defaultValue) {
@@ -37,9 +38,10 @@ var DateField = function DateField(_ref) {
       onFieldChange = _ref.onFieldChange,
       intl = _ref.intl,
       isRequired = _ref.isRequired;
-  return /*#__PURE__*/React.createElement(HorizontalFieldWrapper, {
+  return jsx("div", {
+    css: horizontalFieldWrapper,
     key: fieldName
-  }, /*#__PURE__*/React.createElement(Field, {
+  }, jsx(Field, {
     name: "".concat(scope, ".").concat(fieldName),
     label: intl.formatMessage(messages[fieldName]),
     defaultValue: getFromDefaultValue(parentField, fieldName),
@@ -52,13 +54,13 @@ var DateField = function DateField(_ref) {
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps,
         error = _ref2.error;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DatePicker, _extends({}, fieldProps, {
+    return jsx(Fragment, null, jsx(DatePicker, _extends({}, fieldProps, {
       onChange: function onChange(date) {
         fieldProps.onChange(date);
         onFieldChange(parentField.name, true);
       },
       locale: intl.locale
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error
     }));
   }));
@@ -90,15 +92,17 @@ var DateRange = function DateRange(_ref3) {
     // get the most up to date value after the form has been rendered
     onFieldChange(name, true);
   }, [currentValue, onFieldChange, name]);
-  var element = /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Field, {
+  var element = jsx(Fragment, null, jsx("div", {
+    css: hidden
+  }, jsx(Field, {
     name: "".concat(name, ".type"),
     defaultValue: 'date-range'
   }, function (_ref4) {
     var fieldProps = _ref4.fieldProps;
-    return /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    return jsx(TextField, _extends({}, fieldProps, {
       type: "hidden"
     }));
-  })), /*#__PURE__*/React.createElement(Field, {
+  })), jsx(Field, {
     name: "".concat(name, ".value"),
     label: field.label,
     defaultValue: currentValue,
@@ -109,38 +113,42 @@ var DateRange = function DateRange(_ref3) {
   }, function (_ref5) {
     var fieldProps = _ref5.fieldProps,
         error = _ref5.error;
-    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(RadioGroup, _extends({}, fieldProps, {
+    return jsx(Fragment, null, jsx(RadioGroup, _extends({}, fieldProps, {
       options: items,
       onChange: function onChange(event) {
         fieldProps.onChange(event.target.value);
         setCurrentValue(event.target.value);
       }
-    })), /*#__PURE__*/React.createElement(FieldMessages, {
+    })), jsx(FieldMessages, {
       error: error
     }));
-  }), currentValue !== 'custom' ? /*#__PURE__*/React.createElement(Hidden, null, /*#__PURE__*/React.createElement(Field, {
+  }), currentValue !== 'custom' ? jsx("div", {
+    css: hidden
+  }, jsx(Field, {
     name: "".concat(name, ".from"),
     defaultValue: currentValue
   }, function (_ref6) {
     var fieldProps = _ref6.fieldProps;
-    return /*#__PURE__*/React.createElement(TextField, _extends({}, fieldProps, {
+    return jsx(TextField, _extends({}, fieldProps, {
       type: "hidden"
     }));
-  })) : /*#__PURE__*/React.createElement(HorizontalFields, null, /*#__PURE__*/React.createElement(DateField, {
+  })) : jsx("div", {
+    css: horizontalFields
+  }, jsx(DateField, {
     scope: name,
     parentField: field,
     fieldName: "from",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  }), /*#__PURE__*/React.createElement(DateField, {
+  }), jsx(DateField, {
     scope: name,
     parentField: field,
     fieldName: "to",
     onFieldChange: onFieldChange,
     intl: intl,
     isRequired: field.isRequired
-  })), /*#__PURE__*/React.createElement(FieldMessages, {
+  })), jsx(FieldMessages, {
     description: field.description
   }));
   return element;

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

@@ -3,49 +3,58 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+/** @jsx jsx */
 import React, { useState } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { N40 } from '@atlaskit/theme/colors';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import Button from '@atlaskit/button';
 import { gridSize } from '@atlaskit/theme/constants';
 import { messages } from '../messages';
-export var ExpandContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), N40);
-export var ExpandControl = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
-var ChevronContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
-var LabelContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
-var ExpandContentContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-top: -", "px;\n"])), function (_ref) {
-  var isHidden = _ref.isHidden;
-  return isHidden ? 'none' : 'block';
-}, gridSize);
-ExpandContentContainer.displayName = 'ExpandContentContainer';
+export var expandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-bottom: 1px solid ", ";\n"])), N40);
+export var expandControl = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  height: ", "px;\n  justify-content: center;\n  padding-right: ", "px;\n"])), gridSize() * 6, gridSize());
+var chevronContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  & > button {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), gridSize() * 3, gridSize() * 3);
+var labelContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  align-items: center;\n  display: flex;\n  font-weight: 500;\n"])));
 
-function Expand(_ref2) {
-  var field = _ref2.field,
-      children = _ref2.children,
-      _ref2$isExpanded = _ref2.isExpanded,
-      isExpanded = _ref2$isExpanded === void 0 ? false : _ref2$isExpanded,
-      intl = _ref2.intl;
+var expandContentContainer = function expandContentContainer(isHidden) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: ", ";\n  margin-top: -", "px;\n"])), isHidden ? 'none' : 'block', gridSize());
+};
+
+function Expand(_ref) {
+  var field = _ref.field,
+      children = _ref.children,
+      _ref$isExpanded = _ref.isExpanded,
+      isExpanded = _ref$isExpanded === void 0 ? false : _ref$isExpanded,
+      intl = _ref.intl;
 
   var _useState = useState(isExpanded),
       _useState2 = _slicedToArray(_useState, 2),
       expanded = _useState2[0],
       setExpanded = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(ExpandContainer, null, /*#__PURE__*/React.createElement(ExpandControl, null, /*#__PURE__*/React.createElement(LabelContainer, null, field.label), /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: expandContainer
+  }, jsx("div", {
+    css: expandControl
+  }, jsx("div", {
+    css: labelContainer
+  }, field.label), jsx("div", {
+    css: chevronContainer
+  }, jsx(Button, {
     onClick: function onClick() {
       setExpanded(!expanded);
     },
     testId: "form-expand-toggle",
-    iconBefore: expanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
+    iconBefore: expanded ? jsx(ChevronDownIcon, {
       label: intl.formatMessage(messages.collapse)
-    }) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
+    }) : jsx(ChevronRightIcon, {
       label: intl.formatMessage(messages.expand)
     })
-  }))), /*#__PURE__*/React.createElement(ExpandContentContainer, {
-    isHidden: !expanded
+  }))), jsx("div", {
+    "data-testid": "expand-content-container",
+    css: expandContentContainer(!expanded)
   }, children));
 }
 

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

@@ -19,8 +19,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import SectionMessage from '@atlaskit/section-message';
 import Button from '@atlaskit/button/custom-theme-button';
@@ -32,7 +33,7 @@ import FormContent from '../FormContent';
 import { getNameFromDuplicateField, isDuplicateField } from '../utils';
 import { gridSize } from '@atlaskit/theme/constants';
 import { N40A } from '@atlaskit/theme/colors';
-var ActionsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), N40A, gridSize() * 2, gridSize() * 2);
+var actionsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top: 1px solid ", ";\n  margin-top: ", "px;\n  padding-top: ", "px;\n"])), N40A, gridSize() * 2, gridSize() * 2);
 
 var populateFromParameters = function populateFromParameters(parameters, fields) {
   if (Object.keys(parameters).length) {
@@ -221,7 +222,7 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, isAdding ? /*#__PURE__*/React.createElement(Select, {
+      return jsx(React.Fragment, null, isAdding ? jsx(Select, {
         testId: "field-picker",
         defaultMenuIsOpen: true,
         autoFocus: true,
@@ -232,10 +233,10 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
             _this.onSelectItem(option);
           }
         }
-      }) : /*#__PURE__*/React.createElement(Button, {
+      }) : jsx(Button, {
         testId: "add-more",
         appearance: "subtle",
-        iconBefore: /*#__PURE__*/React.createElement(AddCircleIcon, {
+        iconBefore: jsx(AddCircleIcon, {
           size: "small",
           label: intl.formatMessage(messages.addField)
         }),
@@ -273,9 +274,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
           currentParameters = _this$state3.currentParameters,
           visibleFields = _this$state3.visibleFields;
       var children = this.renderActions();
-      return /*#__PURE__*/React.createElement(React.Fragment, null, error && /*#__PURE__*/React.createElement(FieldsetError, {
+      return jsx(Fragment, null, error && jsx(FieldsetError, {
         message: error
-      }), /*#__PURE__*/React.createElement("div", null, options.showTitle && /*#__PURE__*/React.createElement("h5", null, label), /*#__PURE__*/React.createElement(FormContent, {
+      }), jsx("div", null, options.showTitle && jsx("h5", null, label), jsx(FormContent, {
         fields: selectedFields,
         parentName: name,
         extensionManifest: extensionManifest,
@@ -284,8 +285,9 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         onClickRemove: this.onClickRemove,
         onFieldChange: onFieldChange,
         firstVisibleFieldName: firstVisibleFieldName
-      }), children && /*#__PURE__*/React.createElement(ActionsWrapper, {
-        testId: "fieldset-actions"
+      }), children && jsx("div", {
+        css: actionsWrapper,
+        "data-testId": "fieldset-actions"
       }, children)));
     }
   }]);
@@ -295,10 +297,12 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
 
 function FieldsetError(_ref) {
   var message = _ref.message;
-  return /*#__PURE__*/React.createElement(SectionMessageWrapper, null, /*#__PURE__*/React.createElement(SectionMessage, {
+  return jsx("div", {
+    css: sectionMessageWrapper
+  }, jsx(SectionMessage, {
     appearance: "error"
-  }, /*#__PURE__*/React.createElement("p", null, message)));
+  }, jsx("p", null, message)));
 }
 
-var SectionMessageWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
+var sectionMessageWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 24px;\n"])));
 export default injectIntl(FieldsetField);

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

@@ -1,16 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Avatar from '@atlaskit/avatar';
 import { gridSize } from '@atlaskit/theme/constants';
-import styled from 'styled-components';
-var ItemWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  small {\n    margin: 0;\n    display: block;\n    color: currentColor;\n  }\n"])));
-var IconWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: 1;\n"])), function (_ref) {
-  var context = _ref.context;
-  return context === 'menu' && "\n    align-self: flex-start;\n    margin-top: 3px;\n  ";
-});
+var itemWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  small {\n    margin: 0;\n    display: block;\n    color: currentColor;\n  }\n"])));
+var iconWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  line-height: 1;\n"])));
+var iconWrapperMenu = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-self: flex-start;\n  margin-top: 3px;\n"])));
 
 var getIconSize = function getIconSize(context, description) {
   if (context === 'value' || !description) {
@@ -20,20 +18,22 @@ var getIconSize = function getIconSize(context, description) {
   return 'small';
 };
 
-export var formatOptionLabel = function formatOptionLabel(_ref2, _ref3) {
-  var label = _ref2.label,
-      icon = _ref2.icon,
-      description = _ref2.description;
-  var context = _ref3.context;
-  return /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(IconWrapper, {
-    context: context
-  }, typeof icon === 'string' ? /*#__PURE__*/React.createElement(Avatar, {
+export var formatOptionLabel = function formatOptionLabel(_ref, _ref2) {
+  var label = _ref.label,
+      icon = _ref.icon,
+      description = _ref.description;
+  var context = _ref2.context;
+  return jsx("div", {
+    css: itemWrapper
+  }, jsx("span", {
+    css: [iconWrapper, context === 'menu' && iconWrapperMenu]
+  }, typeof icon === 'string' ? jsx(Avatar, {
     src: icon,
     size: getIconSize(context, description),
     appearance: "square"
-  }) : icon), /*#__PURE__*/React.createElement("div", {
+  }) : icon), jsx("div", {
     style: {
       paddingLeft: icon ? gridSize() : 0
     }
-  }, /*#__PURE__*/React.createElement("p", null, label, description && context !== 'value' && /*#__PURE__*/React.createElement("small", null, description))));
+  }, jsx("p", null, label, description && context !== 'value' && jsx("small", null, description))));
 };

package/dist/esm/ui/ConfigPanel/Fields/common/RequiredIndicator.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 { R500 } from '@atlaskit/theme/colors';
-export var RequiredIndicator = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), R500);
+export var requiredIndicator = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), R500);

package/dist/esm/ui/ConfigPanel/LoadingState.js

@@ -2,13 +2,15 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
-var SpinnerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  margin-top: 64px;\n"])));
+var spinnerWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  margin-top: 64px;\n"])));
 
 var LoadingState = function LoadingState() {
-  return /*#__PURE__*/React.createElement(SpinnerWrapper, null, /*#__PURE__*/React.createElement(Spinner, {
+  return jsx("div", {
+    css: spinnerWrapper
+  }, jsx(Spinner, {
     size: "small"
   }));
 };

package/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -1,19 +1,19 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React from 'react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
-import styled from 'styled-components';
 import { gridSize } from '@atlaskit/theme/constants';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import Tooltip from '@atlaskit/tooltip';
 import * as colors from '@atlaskit/theme/colors';
 import { messages } from '../messages';
-var RemovableFieldWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: ", "px;\n"])), function (props) {
-  return props.hasMarginBottom ? gridSize() * 2 : 0;
-});
-var RemoveButtonWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), colors.N80, colors.R300);
+var removableFieldWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  margin-bottom: 0;\n"])));
+var wrapperWithMarginBottom = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: ", "px;\n"])), gridSize() * 2);
+var removeButtonWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0;\n  top: 0;\n  cursor: pointer;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), colors.N80, colors.R300);
 
 var RemovableField = function RemovableField(_ref) {
   var _children$props$field;
@@ -28,16 +28,17 @@ var RemovableField = function RemovableField(_ref) {
     return onClickRemove && onClickRemove(name);
   }, [name, onClickRemove]);
   var hasMarginBottom = ((_children$props$field = children.props.field) === null || _children$props$field === void 0 ? void 0 : _children$props$field.type) !== 'expand';
-  return /*#__PURE__*/React.createElement(RemovableFieldWrapper, {
-    hasMarginBottom: hasMarginBottom,
+  return jsx("div", {
+    css: [removableFieldWrapper, hasMarginBottom && wrapperWithMarginBottom],
     className: className
-  }, children, canRemoveField && /*#__PURE__*/React.createElement(RemoveButtonWrapper, {
-    testId: "remove-field-".concat(name),
+  }, children, canRemoveField && jsx("div", {
+    css: removeButtonWrapper,
+    "data-testid": "remove-field-".concat(name),
     onClick: onClickCallback
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: intl.formatMessage(messages.removeField),
     position: "left"
-  }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+  }, jsx(CrossCircleIcon, {
     size: "small",
     label: intl.formatMessage(messages.removeField)
   }))));

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

@@ -46,20 +46,23 @@ var contentStyles = function contentStyles(props) {
   }), whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, placeholderTextStyles, placeholderStyles, (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.codeBlockSyntaxHighlighting ? highlightingCodeBlockStyles(props) : codeBlockStyles(props), blocktypeStyles(props), textFormattingStyles(props), textColorStyles, listsStyles, ruleStyles(props), mediaStyles, layoutStyles, telepointerStyle, gapCursorStyles, tableStyles(props), panelStyles(props), fakeCursorStyles, mentionsStyles, (_props$featureFlags2 = props.featureFlags) !== null && _props$featureFlags2 !== void 0 && _props$featureFlags2.nextEmojiNodeView ? emojiStylesNext : emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(props), findReplaceStyles, taskDecisionStyles, statusStyles, annotationSharedStyles(props), smartCardStyles, smartCardSharedStyles, dateStyles, embedCardStyles, unsupportedStyles, ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 
-export default /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var featureFlags = useFeatureFlags();
-  var className = props.className,
-      children = props.children;
-  var theme = useTheme();
-  var memoizedStyle = useMemo(function () {
-    return contentStyles({
-      theme: theme,
-      featureFlags: featureFlags
-    });
-  }, [theme, featureFlags]);
-  return jsx("div", {
-    className: className,
-    ref: ref,
-    css: memoizedStyle
-  }, children);
-});
+export var createEditorContentStyle = function createEditorContentStyle(styles) {
+  return /*#__PURE__*/React.forwardRef(function (props, ref) {
+    var featureFlags = useFeatureFlags();
+    var className = props.className,
+        children = props.children;
+    var theme = useTheme();
+    var memoizedStyle = useMemo(function () {
+      return contentStyles({
+        theme: theme,
+        featureFlags: featureFlags
+      });
+    }, [theme, featureFlags]);
+    return jsx("div", {
+      className: className,
+      ref: ref,
+      css: [memoizedStyle, styles]
+    }, children);
+  });
+};
+export default createEditorContentStyle();

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

@@ -8,7 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -18,10 +18,10 @@ 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 { css, jsx } from '@emotion/react';
 import Transition from 'react-transition-group/Transition';
-import styled from 'styled-components';
-import { css } from 'styled-components';
 import { N30 } from '@atlaskit/theme/colors';
 import { akEditorSwoopCubicBezier, akEditorDefaultLayoutWidth, akEditorWideLayoutWidth, akEditorBreakoutPadding, akEditorContextPanelWidth, ATLASSIAN_NAVIGATION_HEIGHT } from '@atlaskit/editor-shared-styles';
 import { ContextPanelConsumer } from './context';
@@ -46,29 +46,9 @@ export var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedO
   var hasSpaceForWideBreakoutsAndPanel = !contentBreakoutModes.includes(FULLWIDTH_MODE) && contentBreakoutModes.includes(WIDE_MODE) && containerWidth >= panelWidth * 2 + WIDE_EDITOR_WIDTH;
   return editorNotFullWidth && (hasSpaceForPanel || hasSpaceForWideBreakoutsAndPanel);
 };
-/**
- * Only use absolute position for panel when screen size is wide enough
- * to accomodate breakout content and editor is not in wide mode.
- */
-
-var panelSlideStyles = function panelSlideStyles(_ref) {
-  var positionPanelOverEditor = _ref.positionPanelOverEditor;
-
-  if (positionPanelOverEditor) {
-    return absolutePanelStyles;
-  }
-
-  return;
-};
-
-export var Panel = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n\n  ", ";\n"])), function (p) {
-  return p.visible ? p.panelWidth : 0;
-}, ANIM_SPEED_MS, akEditorSwoopCubicBezier, N30, function (props) {
-  return panelSlideStyles(props);
-});
-export var Content = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: 16px 16px 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), akEditorSwoopCubicBezier, function (p) {
-  return p.visible ? p.panelWidth : 0;
-});
+var panelHidden = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 0;\n"])));
+export var panel = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), akEditorContextPanelWidth, ANIM_SPEED_MS, akEditorSwoopCubicBezier, N30);
+export var content = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  transition: width 600ms ", ";\n  box-sizing: border-box;\n  padding: 16px 16px 0px;\n  width: ", "px;\n  height: 100%;\n  overflow-y: auto;\n"])), akEditorSwoopCubicBezier, akEditorContextPanelWidth);
 export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(SwappableContentArea, _React$PureComponent);
 
@@ -98,7 +78,7 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -116,7 +96,7 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/React.createElement(Transition, {
+      return jsx(Transition, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -151,23 +131,26 @@ export var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
       var width = akEditorContextPanelWidth;
       var userVisible = !!this.props.visible;
       var visible = userVisible || !!this.state.currentPluginContent;
-      return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref2) {
-        var broadcastWidth = _ref2.broadcastWidth,
-            broadcastPosition = _ref2.broadcastPosition,
-            positionedOverEditor = _ref2.positionedOverEditor;
+      return jsx(ContextPanelConsumer, null, function (_ref) {
+        var broadcastWidth = _ref.broadcastWidth,
+            broadcastPosition = _ref.broadcastPosition,
+            positionedOverEditor = _ref.positionedOverEditor;
         var newPosition = editorWidth ? shouldPanelBePositionedOverEditor(editorWidth, width) : false;
         broadcastWidth(visible ? width : 0);
         (newPosition && visible) !== positionedOverEditor && broadcastPosition(newPosition && visible);
-        return /*#__PURE__*/React.createElement(Panel, {
-          panelWidth: width,
-          visible: visible,
-          positionPanelOverEditor: newPosition,
+        return jsx("div", {
+          css: [panel, !visible && panelHidden,
+          /**
+           * Only use absolute position for panel when screen size is wide enough
+           * to accommodate breakout content and editor is not in wide mode.
+           */
+          newPosition && absolutePanelStyles],
           "data-testid": "context-panel-panel",
           "aria-labelledby": "context-panel-title",
           role: "dialog"
-        }, /*#__PURE__*/React.createElement(Content, {
-          panelWidth: width,
-          visible: visible
+        }, jsx("div", {
+          "data-testid": "context-panel-content",
+          css: [content, !visible && panelHidden]
         }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
       });
     }
@@ -203,39 +186,39 @@ var ContextPanel = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this3 = this;
 
-      return /*#__PURE__*/React.createElement(WithEditorActions, {
+      return jsx(WithEditorActions, {
         render: function render(actions) {
           var eventDispatcher = actions._privateGetEventDispatcher();
 
           var editorView = actions._privateGetEditorView();
 
           if (!eventDispatcher) {
-            return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({
+            return jsx(SwappableContentArea, _extends({
               editorView: editorView
             }, _this3.props));
           }
 
-          return /*#__PURE__*/React.createElement(WithPluginState, {
+          return jsx(WithPluginState, {
             eventDispatcher: eventDispatcher,
             plugins: {
               contextPanel: contextPanelPluginKey,
               widthState: widthPluginKey
             },
-            render: function render(_ref3) {
-              var contextPanel = _ref3.contextPanel,
-                  _ref3$widthState = _ref3.widthState,
-                  widthState = _ref3$widthState === void 0 ? {
+            render: function render(_ref2) {
+              var contextPanel = _ref2.contextPanel,
+                  _ref2$widthState = _ref2.widthState,
+                  widthState = _ref2$widthState === void 0 ? {
                 width: 0,
                 containerWidth: 0,
                 lineLength: akEditorDefaultLayoutWidth
-              } : _ref3$widthState;
+              } : _ref2$widthState;
               var firstContent = contextPanel && contextPanel.contents.find(Boolean);
 
               var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
                 contentBreakoutModes: editorView ? getChildBreakoutModes(editorView.state.doc, editorView.state.schema) : []
               });
 
-              return /*#__PURE__*/React.createElement(SwappableContentArea, _extends({}, _this3.props, {
+              return jsx(SwappableContentArea, _extends({}, _this3.props, {
                 editorView: editorView,
                 pluginContent: firstContent,
                 editorWidth: editorWidth