@atlaskit/editor-core 162.0.2 → 164.0.1

package/dist/esm/ui/ElementBrowser/hooks/use-container-width.js

@@ -1,10 +1,11 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
 var _templateObject;
 
+/** @jsx jsx */
 import React, { memo, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 /**
  *
@@ -32,6 +33,7 @@ import { WidthObserver } from '@atlaskit/width-detector';
  *
  */
 
+var widthObserverWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
 export default function useContainerWidth() {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -47,10 +49,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   var ContainerWidthMonitor = /*#__PURE__*/memo(function () {
-    return /*#__PURE__*/React.createElement(WidthObserverWrapper, {
-      innerRef: ref,
+    return jsx("div", {
+      css: widthObserverWrapper,
+      ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });
@@ -58,6 +61,4 @@ export default function useContainerWidth() {
     containerWidth: containerWidth,
     ContainerWidthMonitor: ContainerWidthMonitor
   };
-}
-var WidthObserverWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-WidthObserverWrapper.displayName = 'WidthObserverWrapper';
+}

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

@@ -8,10 +8,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; } }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { Container } from './styles';
+import { container } from './styles';
 export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
 
 var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
@@ -29,7 +30,6 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          containerRef = _this$props.containerRef,
           children = _this$props.children,
           target = _this$props.target,
           offset = _this$props.offset,
@@ -48,7 +48,7 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         alignX: alignX,
         alignY: alignY,
         target: target,
@@ -59,10 +59,10 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         fitHeight: fitHeight,
         onPositionCalculated: onPositionCalculated
-      }, /*#__PURE__*/React.createElement(Container, {
-        height: fitHeight,
-        className: className,
-        innerRef: containerRef
+      }, jsx("div", {
+        css: container(fitHeight),
+        "data-testid": "popup-container",
+        className: className
       }, children));
     }
   }]);

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

@@ -2,11 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", " display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, function (_ref) {
-  var height = _ref.height;
-  return height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: ", "px;\n        "])), height) : '';
-});
+export var container = function container(height) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), height) : '');
+};

package/dist/esm/ui/LinkSearch/LinkSearchList.js

@@ -11,14 +11,14 @@ 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';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import Spinner from '@atlaskit/spinner';
-import styled from 'styled-components';
 import LinkSearchListItem from './LinkSearchListItem';
-var ListContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
-var SpinnerContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
-export var List = styled.ul(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
+var listContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-top: 0;\n"])));
+var spinnerContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
+export var linkSearchList = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  list-style: none;\n"])));
 
 var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
   _inherits(LinkSearchList, _PureComponent);
@@ -49,12 +49,13 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var loadingContent;
 
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/React.createElement(List, {
+        itemsContent = jsx("ul", {
+          css: linkSearchList,
           id: id,
           role: role,
           "aria-controls": ariaControls
         }, items.map(function (item, index) {
-          return /*#__PURE__*/React.createElement(LinkSearchListItem, {
+          return jsx(LinkSearchListItem, {
             id: "link-search-list-item-".concat(index),
             role: role && 'option',
             item: item,
@@ -69,12 +70,16 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (isLoading) {
-        loadingContent = /*#__PURE__*/React.createElement(SpinnerContainer, null, /*#__PURE__*/React.createElement(Spinner, {
+        loadingContent = jsx("div", {
+          css: spinnerContainer
+        }, jsx(Spinner, {
           size: "medium"
         }));
       }
 
-      return /*#__PURE__*/React.createElement(ListContainer, null, itemsContent, loadingContent);
+      return jsx("div", {
+        css: listContainer
+      }, itemsContent, loadingContent);
     }
   }]);
 

package/dist/esm/ui/LinkSearch/LinkSearchListItem.js

@@ -7,14 +7,15 @@ 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, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 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'; // AFP-2532 TODO: Fix automatic suppressions below
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
@@ -23,13 +24,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 import { injectIntl } from 'react-intl-next';
-export var Container = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])), function (props) {
-  return props.selected ? N20 : 'transparent';
-});
-var NameWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var Name = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), N800);
-export var ContainerName = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), N300, relativeFontSizeToBase16(fontSizeSmall()));
-var Icon = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
+export var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
+export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), N20);
+var nameWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), N800);
+export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), N300, relativeFontSizeToBase16(fontSizeSmall()));
+var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
 
 var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LinkSearchListItem, _React$PureComponent);
@@ -90,11 +90,15 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           intl = _this$props5.intl;
 
       if (icon) {
-        return /*#__PURE__*/React.createElement(Icon, null, icon);
+        return jsx("span", {
+          css: iconStyle
+        }, icon);
       }
 
       if (iconUrl) {
-        return /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement("img", {
+        return jsx("span", {
+          css: iconStyle
+        }, jsx("img", {
           src: iconUrl,
           alt: getCorrectAltByIconUrl(iconUrl, intl)
         }));
@@ -109,7 +113,7 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           item = _this$props6.item,
           intl = _this$props6.intl;
       var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
-      return date && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0 \u2022", /*#__PURE__*/React.createElement("span", {
+      return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
         className: "link-search-timestamp",
         "data-test-id": "link-search-timestamp"
       }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -122,17 +126,24 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props7.selected,
           id = _this$props7.id,
           role = _this$props7.role;
-      return /*#__PURE__*/React.createElement(Container, {
+      return jsx("li", {
+        css: [container, selected && containerSelected],
         role: role,
         id: id,
         "aria-selected": selected,
         "data-testid": "link-search-list-item",
-        selected: selected,
         onMouseMove: this.handleMouseMove,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleSelect
-      }, this.renderIcon(), /*#__PURE__*/React.createElement(NameWrapper, null, /*#__PURE__*/React.createElement(Name, null, item.name), /*#__PURE__*/React.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+      }, this.renderIcon(), jsx("span", {
+        css: nameWrapper
+      }, jsx("div", {
+        css: nameStyle
+      }, item.name), jsx("div", {
+        "data-testid": "link-search-list-item-container",
+        css: containerName
+      }, item.container, this.renderTimeStamp())));
     }
   }]);
 

package/dist/esm/ui/LinkSearch/ToolbarComponents.js

@@ -2,13 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var RECENT_SEARCH_WIDTH_IN_PX = 420;
 export var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export var RECENT_SEARCH_HEIGHT_IN_PX = 360;
-export var InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n";
-export var UrlInputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), InputWrapper);
-export var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  ", ";\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_IN_PX, function (_ref) {
-  var provider = _ref.provider;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: ", "px;\n    "])), provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
-});
+export var inputWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+export var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  width: ", "px;\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
+export var containerWithProvider = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);

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

@@ -11,9 +11,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; } }
 
-import React from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 import { browser } from '@atlaskit/editor-common/utils';
 var KeyZCode = 90;
 var KeyYCode = 89;
@@ -137,7 +138,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
           ariaAutoComplete = _this$props2.ariaAutoComplete,
           role = _this$props2.role;
       var value = this.state.value;
-      return /*#__PURE__*/React.createElement(Input, {
+      return jsx("input", {
+        css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
         "aria-expanded": ariaExpanded,
@@ -152,8 +154,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.handleKeydown,
         onMouseDown: this.onMouseDown,
         onBlur: this.onBlur,
-        innerRef: this.handleRef,
-        width: width,
+        ref: this.handleRef,
         maxLength: maxLength,
         "aria-label": ariaLabel
       });

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

@@ -1,11 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 import { N400, N800 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles'; // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 
-export var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n      opacity: 0.5;\n    }\n  }\n"])), N400, relativeFontSizeToBase16(13), function (props) {
-  return props.width ? "width: ".concat(props.width, "px") : '';
-}, N800);
+export var panelTextInput = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n      opacity: 0.5;\n    }\n  }\n"])), N400, relativeFontSizeToBase16(13), N800);
+export var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+};

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

@@ -13,12 +13,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 styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { ACTION_SUBJECT } from '../../plugins/analytics';
 import { whichTransitionEvent } from '../../utils';
 import { ErrorBoundary } from '../ErrorBoundary';
-var PluginsComponentsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
+var pluginsComponentsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n"])));
 
 var PluginSlot = /*#__PURE__*/function (_React$Component) {
   _inherits(PluginSlot, _React$Component);
@@ -120,10 +121,12 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
+      return jsx(ErrorBoundary, {
         component: ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(PluginsComponentsWrapper, null, items.map(function (component, key) {
+      }, jsx("div", {
+        css: pluginsComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

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

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-var _class, _temp;
+var _class;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -216,7 +216,7 @@ var dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
   getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
 };
-var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Component3) {
+var AnalyticsContextWrapper = (_class = /*#__PURE__*/function (_React$Component3) {
   _inherits(AnalyticsContextWrapper, _React$Component3);
 
   var _super4 = _createSuper(AnalyticsContextWrapper);
@@ -244,4 +244,4 @@ var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Co
   return AnalyticsContextWrapper;
 }(React.Component), _defineProperty(_class, "contextTypes", {
   contextAdapter: PropTypes.object
-}), _temp);
+}), _class);

package/dist/esm/ui/Resizer/styled.js

@@ -2,6 +2,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
+import { css } from '@emotion/react';
 import { MediaSingleDimensionHelper } from '@atlaskit/editor-common/ui';
-import styled from 'styled-components';
-export var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), MediaSingleDimensionHelper);
+export var wrapperStyle = function wrapperStyle(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), MediaSingleDimensionHelper(props));
+};

package/dist/esm/ui/Toolbar/ToolbarInner.js

@@ -11,10 +11,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 styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
-var ToolbarComponentsWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), akEditorMobileMaxWidth);
+var toolbarComponentsWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), akEditorMobileMaxWidth);
 export var ToolbarInner = /*#__PURE__*/function (_React$Component) {
   _inherits(ToolbarInner, _React$Component);
 
@@ -54,7 +55,9 @@ export var ToolbarInner = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(ToolbarComponentsWrapper, null, items.map(function (component, key) {
+      return jsx("div", {
+        css: toolbarComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

package/dist/esm/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -4,18 +4,16 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject;
 
-import React from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 import { akEditorMobileMaxWidth } from '@atlaskit/editor-shared-styles';
 import { useElementWidth } from './hooks';
 import { widthToToolbarSize, toolbarSizeToWidth } from './toolbar-size';
 import { Toolbar } from './Toolbar';
 import { ToolbarSize } from './types';
-var StyledToolBar = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  min-width: ", ";\n  position: relative;\n  @media (max-width: ", "px) {\n    grid-column: 1 / 2;\n    grid-row: 2;\n    width: calc(100% - 30px);\n    margin: 0 15px;\n  }\n"])), function (_ref) {
-  var minWidth = _ref.minWidth;
-  return minWidth;
-}, akEditorMobileMaxWidth);
+var toolbar = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  @media (max-width: ", "px) {\n    grid-column: 1 / 2;\n    grid-row: 2;\n    width: calc(100% - 30px);\n    margin: 0 15px;\n  }\n"])), akEditorMobileMaxWidth);
 export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
   var ref = /*#__PURE__*/React.createRef();
 
@@ -28,14 +26,18 @@ export var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
     skip: typeof width !== 'undefined'
   });
   var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : widthToToolbarSize(width || elementWidth, props.appearance);
-  var toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/React.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? "".concat(toolbarMinWidth, "px") : '254px'
-  }, /*#__PURE__*/React.createElement(WidthObserver, {
+  var toolbarStyle = useMemo(function () {
+    var toolbarMinWidth = toolbarSizeToWidth(ToolbarSize.M, props.appearance);
+    var minWidth = "min-width: ".concat(props.hasMinWidth ? toolbarMinWidth : '254', "px");
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return jsx("div", {
+    css: toolbarStyle
+  }, jsx(WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/React.createElement(Toolbar, _extends({}, props, {
+  }), props.editorView && toolbarSize ? jsx(Toolbar, _extends({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : jsx("div", {
     ref: ref
   }));
 };

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

@@ -7,15 +7,16 @@ 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; }
 
+/** @jsx jsx */
 import React, { useCallback } from 'react';
+import { css, jsx } from '@emotion/react';
 import Tooltip from '@atlaskit/tooltip';
-import styled from 'styled-components';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import Button from './styles';
 import { ACTION_SUBJECT, EVENT_TYPE, ACTION } from '../../plugins/analytics/types/enums';
 import { TOOLBAR_ACTION_SUBJECT_ID } from '../../plugins/analytics/types/toolbar-button';
 export var TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
-var ButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
+var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 100%;\n"])));
 var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
       testId = props.testId,
@@ -65,7 +66,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-  var button = /*#__PURE__*/React.createElement(Button, {
+  var button = jsx(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -91,10 +92,12 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   var tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/React.createElement(ButtonWrapper, null, button));
+  }, jsx("div", {
+    css: buttonWrapper
+  }, button));
 });
 export default ToolbarButton;

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

@@ -16,7 +16,8 @@ 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';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import ReactDOM from 'react-dom';
 import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -26,7 +27,7 @@ import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/custom-theme-button';
 import ToolbarButton from '../ToolbarButton';
 import withOuterListeners from '../with-outer-listeners';
-import { Wrapper, ButtonContent, ConfirmationPopup, ConfirmationText, ConfirmationHeader, ConfirmationImg } from './styles';
+import { wrapper, buttonContent, confirmationPopup, confirmationText, confirmationHeader, confirmationImg } from './styles';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '../../plugins/analytics';
 import { createDispatch } from '../../event-dispatcher';
 import { openFeedbackDialog } from '../../plugins/feedback-dialog';
@@ -181,15 +182,19 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
           popupsMountPoint = _this$props.popupsMountPoint,
           popupsBoundariesElement = _this$props.popupsBoundariesElement,
           popupsScrollableElement = _this$props.popupsScrollableElement;
-      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? /*#__PURE__*/React.createElement(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
+      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? jsx(Spinner, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-      return this.hasJquery() ? /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ToolbarButton, {
+      return this.hasJquery() ? jsx("div", {
+        css: wrapper
+      }, jsx(ToolbarButton, {
         ref: this.handleRef,
         iconBefore: iconBefore,
         onClick: this.collectFeedback,
         selected: false,
         spacing: "compact"
-      }, /*#__PURE__*/React.createElement(ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/React.createElement(PopupWithOutsideListeners, {
+      }, jsx("span", {
+        css: buttonContent
+      }, "Feedback")), this.state.showOptOutOption && jsx(PopupWithOutsideListeners, {
         target: this.state.target,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
@@ -198,12 +203,19 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
         fitWidth: POPUP_WIDTH,
         handleClickOutside: this.toggleShowOptOutOption,
         handleEscapeKeydown: this.toggleShowOptOutOption
-      }, /*#__PURE__*/React.createElement(ConfirmationPopup, null, /*#__PURE__*/React.createElement(ConfirmationHeader, null, /*#__PURE__*/React.createElement(ConfirmationImg, {
+      }, jsx("div", {
+        css: confirmationPopup
+      }, jsx("div", {
+        css: confirmationHeader
+      }, jsx("img", {
+        css: confirmationImg,
         src: EDITOR_IMAGE_URL
-      })), /*#__PURE__*/React.createElement(ConfirmationText, null, /*#__PURE__*/React.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/React.createElement("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, {
+      })), jsx("div", {
+        css: confirmationText
+      }, jsx("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), jsx("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), jsx(ButtonGroup, null, jsx(Button, {
         appearance: "primary",
         onClick: this.openFeedbackPopup
-      }, "Give feedback"), /*#__PURE__*/React.createElement(Button, {
+      }, "Give feedback"), jsx(Button, {
         appearance: "default",
         onClick: this.openLearnMorePage
       }, "Learn more")))))) : null;

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

@@ -2,16 +2,13 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-import styled from 'styled-components';
-import { gridSize, borderRadius } from '@atlaskit/theme/constants';
+import { css } from '@emotion/react';
+import { borderRadius } from '@atlaskit/theme/constants';
 import { N60A, N400, P400 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-export var ButtonContent = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
-export var Wrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", "px;\n"])), function (_ref) {
-  var width = _ref.width;
-  return !width || width === 'large' ? 0 : gridSize();
-});
-export var ConfirmationPopup = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: #fff;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), borderRadius(), N60A, N60A);
-export var ConfirmationText = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), N400);
-export var ConfirmationHeader = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), P400);
-export var ConfirmationImg = styled.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
+export var buttonContent = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
+export var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: 0;\n"])));
+export var confirmationPopup = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  background: #fff;\n  border-radius: ", "px;\n  box-shadow: 0 4px 8px -2px ", ", 0 0 1px ", ";\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  overflow: auto;\n  max-height: none;\n  height: 410px;\n  width: 280px;\n"])), borderRadius(), N60A, N60A);
+export var confirmationText = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  word-spacing: 4px;\n  line-height: 22px;\n  color: ", ";\n  margin-top: 30px;\n  padding: 20px;\n  & > div {\n    width: 240px;\n  }\n  & > div:first-of-type {\n    margin-bottom: 12px;\n  }\n  & > div:nth-of-type(2) {\n    margin-bottom: 20px;\n  }\n"])), relativeFontSizeToBase16(14), N400);
+export var confirmationHeader = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), P400);
+export var confirmationImg = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));