@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -2,39 +2,26 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UrlInputWrapper = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = exports.InputWrapper = exports.Container = void 0;
+exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var RECENT_SEARCH_WIDTH_IN_PX = 420;
 exports.RECENT_SEARCH_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX;
 var RECENT_SEARCH_HEIGHT_IN_PX = 360;
 exports.RECENT_SEARCH_HEIGHT_IN_PX = RECENT_SEARCH_HEIGHT_IN_PX;
-var InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n";
-exports.InputWrapper = InputWrapper;
-
-var UrlInputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), InputWrapper);
-
-exports.UrlInputWrapper = UrlInputWrapper;
-
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      width: ", "px;\n    "])), provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
-});
-
-exports.Container = Container;
+var inputWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+exports.inputWrapper = inputWrapper;
+var container = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
+exports.container = container;
+var containerWithProvider = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);
+exports.containerWithProvider = containerWithProvider;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof3 = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,16 +23,14 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _styles = require("./styles");
 
 var _utils = require("@atlaskit/editor-common/utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -154,7 +150,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
           ariaAutoComplete = _this$props2.ariaAutoComplete,
           role = _this$props2.role;
       var value = this.state.value;
-      return /*#__PURE__*/_react.default.createElement(_styles.Input, {
+      return (0, _react.jsx)("input", {
+        css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
         "aria-expanded": ariaExpanded,
@@ -169,8 +166,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
       });
@@ -201,6 +197,6 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
     }
   }]);
   return PanelTextInput;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = PanelTextInput;

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

@@ -5,21 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Input = void 0;
+exports.panelTextInputWithCustomWidth = exports.panelTextInput = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-var Input = _styledComponents.default.input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N400, (0, _editorSharedStyles.relativeFontSizeToBase16)(13), function (props) {
-  return props.width ? "width: ".concat(props.width, "px") : '';
-}, _colors.N800);
+var panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N400, (0, _editorSharedStyles.relativeFontSizeToBase16)(13), _colors.N800);
+exports.panelTextInput = panelTextInput;
 
-exports.Input = Input;
+var panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
+};
+
+exports.panelTextInputWithCustomWidth = panelTextInputWithCustomWidth;

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

@@ -25,7 +25,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _analytics = require("../../plugins/analytics");
 
@@ -39,7 +39,7 @@ 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; } }
 
-var PluginsComponentsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var pluginsComponentsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
 
 var PluginSlot = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(PluginSlot, _React$Component);
@@ -136,10 +136,12 @@ var PluginSlot = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
+      return (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.PLUGIN_SLOT,
         fallbackComponent: null
-      }, /*#__PURE__*/_react.default.createElement(PluginsComponentsWrapper, null, items.map(function (component, key) {
+      }, (0, _react2.jsx)("div", {
+        css: pluginsComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

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

@@ -37,7 +37,7 @@ var _enums = require("../../plugins/analytics/types/enums");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _class, _temp;
+var _class;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
@@ -233,7 +233,7 @@ var dummyAnalyticsContext = {
   getAtlaskitAnalyticsContext: function getAtlaskitAnalyticsContext() {},
   getAtlaskitAnalyticsEventHandlers: function getAtlaskitAnalyticsEventHandlers() {}
 };
-var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Component3) {
+var AnalyticsContextWrapper = (_class = /*#__PURE__*/function (_React$Component3) {
   (0, _inherits2.default)(AnalyticsContextWrapper, _React$Component3);
 
   var _super4 = _createSuper(AnalyticsContextWrapper);
@@ -259,4 +259,4 @@ var AnalyticsContextWrapper = (_temp = _class = /*#__PURE__*/function (_React$Co
   return AnalyticsContextWrapper;
 }(_react.default.Component), (0, _defineProperty2.default)(_class, "contextTypes", {
   contextAdapter: _propTypes.default.object
-}), _temp);
+}), _class);

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

@@ -5,16 +5,18 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
+exports.wrapperStyle = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _ui = require("@atlaskit/editor-common/ui");
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), _ui.MediaSingleDimensionHelper);
+var wrapperStyle = function wrapperStyle(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & > div {\n    ", ";\n    position: relative;\n    clear: both;\n\n    > div {\n      position: absolute;\n      height: 100%;\n      width: 100%;\n    }\n  }\n"])), (0, _ui.MediaSingleDimensionHelper)(props));
+};
 
-exports.Wrapper = Wrapper;
+exports.wrapperStyle = wrapperStyle;

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

@@ -21,7 +21,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -31,7 +31,7 @@ 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; } }
 
-var ToolbarComponentsWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
+var toolbarComponentsWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n\n  @media (max-width: ", "px) {\n    justify-content: space-between;\n  }\n"])), _editorSharedStyles.akEditorMobileMaxWidth);
 
 var ToolbarInner = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ToolbarInner, _React$Component);
@@ -71,7 +71,9 @@ var ToolbarInner = /*#__PURE__*/function (_React$Component) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(ToolbarComponentsWrapper, null, items.map(function (component, key) {
+      return (0, _react2.jsx)("div", {
+        css: toolbarComponentsWrapper
+      }, items.map(function (component, key) {
         var props = {
           key: key
         };

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +15,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _widthDetector = require("@atlaskit/width-detector");
 
@@ -31,10 +33,11 @@ var _types = require("./types");
 
 var _templateObject;
 
-var StyledToolBar = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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;
-}, _editorSharedStyles.akEditorMobileMaxWidth);
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var toolbar = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorMobileMaxWidth);
 
 var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
   var ref = /*#__PURE__*/_react.default.createRef();
@@ -48,14 +51,18 @@ var ToolbarWithSizeDetector = function ToolbarWithSizeDetector(props) {
     skip: typeof width !== 'undefined'
   });
   var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
-  var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(_types.ToolbarSize.M, props.appearance);
-  return /*#__PURE__*/_react.default.createElement(StyledToolBar, {
-    minWidth: props.hasMinWidth ? "".concat(toolbarMinWidth, "px") : '254px'
-  }, /*#__PURE__*/_react.default.createElement(_widthDetector.WidthObserver, {
+  var toolbarStyle = (0, _react.useMemo)(function () {
+    var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(_types.ToolbarSize.M, props.appearance);
+    var minWidth = "min-width: ".concat(props.hasMinWidth ? toolbarMinWidth : '254', "px");
+    return [toolbar, minWidth];
+  }, [props.appearance, props.hasMinWidth]);
+  return (0, _react2.jsx)("div", {
+    css: toolbarStyle
+  }, (0, _react2.jsx)(_widthDetector.WidthObserver, {
     setWidth: setWidth
-  }), props.editorView && toolbarSize ? /*#__PURE__*/_react.default.createElement(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
+  }), props.editorView && toolbarSize ? (0, _react2.jsx)(_Toolbar.Toolbar, (0, _extends2.default)({}, props, {
     toolbarSize: toolbarSize
-  })) : /*#__PURE__*/_react.default.createElement("div", {
+  })) : (0, _react2.jsx)("div", {
     ref: ref
   }));
 };

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

@@ -15,9 +15,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
 
@@ -39,8 +39,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var TOOLBAR_BUTTON = _toolbarButton.TOOLBAR_ACTION_SUBJECT_ID;
 exports.TOOLBAR_BUTTON = TOOLBAR_BUTTON;
-
-var ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
+var buttonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n"])));
 
 var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var buttonId = props.buttonId,
@@ -91,8 +90,7 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-
-  var button = /*#__PURE__*/_react.default.createElement(_styles.default, {
+  var button = (0, _react2.jsx)(_styles.default, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -118,11 +116,13 @@ var ToolbarButton = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   }
 
   var tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+  return (0, _react2.jsx)(_tooltip.default, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, button));
+  }, (0, _react2.jsx)("div", {
+    css: buttonWrapper
+  }, button));
 });
 
 var _default = ToolbarButton;

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,10 +25,12 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
 var _reactDom = _interopRequireDefault(require("react-dom"));
 
+var _react2 = require("react");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
@@ -61,10 +61,6 @@ var _consts = require("../../plugins/analytics/consts");
 
 var _contextIdentifier = require("../../plugins/base/pm-plugins/context-identifier");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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; }
 
 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) { (0, _defineProperty2.default)(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; }
@@ -209,15 +205,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.default.createElement(_spinner.default, null) : undefined; // JIRA issue collector script is using jQuery internally
+      var iconBefore = this.state.jiraIssueCollectorScriptLoading ? (0, _react.jsx)(_spinner.default, null) : undefined; // JIRA issue collector script is using jQuery internally
 
-      return this.hasJquery() ? /*#__PURE__*/_react.default.createElement(_styles.Wrapper, null, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+      return this.hasJquery() ? (0, _react.jsx)("div", {
+        css: _styles.wrapper
+      }, (0, _react.jsx)(_ToolbarButton.default, {
         ref: this.handleRef,
         iconBefore: iconBefore,
         onClick: this.collectFeedback,
         selected: false,
         spacing: "compact"
-      }, /*#__PURE__*/_react.default.createElement(_styles.ButtonContent, null, "Feedback")), this.state.showOptOutOption && /*#__PURE__*/_react.default.createElement(PopupWithOutsideListeners, {
+      }, (0, _react.jsx)("span", {
+        css: _styles.buttonContent
+      }, "Feedback")), this.state.showOptOutOption && (0, _react.jsx)(PopupWithOutsideListeners, {
         target: this.state.target,
         mountTo: popupsMountPoint,
         boundariesElement: popupsBoundariesElement,
@@ -226,19 +226,26 @@ var ToolbarFeedback = /*#__PURE__*/function (_PureComponent) {
         fitWidth: POPUP_WIDTH,
         handleClickOutside: this.toggleShowOptOutOption,
         handleEscapeKeydown: this.toggleShowOptOutOption
-      }, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationPopup, null, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationHeader, null, /*#__PURE__*/_react.default.createElement(_styles.ConfirmationImg, {
+      }, (0, _react.jsx)("div", {
+        css: _styles.confirmationPopup
+      }, (0, _react.jsx)("div", {
+        css: _styles.confirmationHeader
+      }, (0, _react.jsx)("img", {
+        css: _styles.confirmationImg,
         src: EDITOR_IMAGE_URL
-      })), /*#__PURE__*/_react.default.createElement(_styles.ConfirmationText, null, /*#__PURE__*/_react.default.createElement("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), /*#__PURE__*/_react.default.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.default.createElement(_buttonGroup.default, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      })), (0, _react.jsx)("div", {
+        css: _styles.confirmationText
+      }, (0, _react.jsx)("div", null, "We are rolling out a new editing experience across Atlassian products. Help us improve by providing feedback."), (0, _react.jsx)("div", null, "You can opt-out for now by turning off the \"Atlassian Editor\" feature on the Labs page in Bitbucket settings."), (0, _react.jsx)(_buttonGroup.default, null, (0, _react.jsx)(_customThemeButton.default, {
         appearance: "primary",
         onClick: this.openFeedbackPopup
-      }, "Give feedback"), /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+      }, "Give feedback"), (0, _react.jsx)(_customThemeButton.default, {
         appearance: "default",
         onClick: this.openLearnMorePage
       }, "Learn more")))))) : null;
     }
   }]);
   return ToolbarFeedback;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = ToolbarFeedback;
 (0, _defineProperty2.default)(ToolbarFeedback, "contextTypes", {

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

@@ -5,11 +5,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.ConfirmationText = exports.ConfirmationPopup = exports.ConfirmationImg = exports.ConfirmationHeader = exports.ButtonContent = void 0;
+exports.wrapper = exports.confirmationText = exports.confirmationPopup = exports.confirmationImg = exports.confirmationHeader = exports.buttonContent = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -19,29 +19,15 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var ButtonContent = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
-
-exports.ButtonContent = ButtonContent;
-
-var Wrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", "px;\n"])), function (_ref) {
-  var width = _ref.width;
-  return !width || width === 'large' ? 0 : (0, _constants.gridSize)();
-});
-
-exports.Wrapper = Wrapper;
-
-var ConfirmationPopup = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
-
-exports.ConfirmationPopup = ConfirmationPopup;
-
-var ConfirmationText = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N400);
-
-exports.ConfirmationText = ConfirmationText;
-
-var ConfirmationHeader = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), _colors.P400);
-
-exports.ConfirmationHeader = ConfirmationHeader;
-
-var ConfirmationImg = _styledComponents.default.img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
-
-exports.ConfirmationImg = ConfirmationImg;
+var buttonContent = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 24px;\n  line-height: 24px;\n  min-width: 70px;\n"])));
+exports.buttonContent = buttonContent;
+var wrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: 0;\n"])));
+exports.wrapper = wrapper;
+var confirmationPopup = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _colors.N60A, _colors.N60A);
+exports.confirmationPopup = confirmationPopup;
+var confirmationText = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _colors.N400);
+exports.confirmationText = confirmationText;
+var confirmationHeader = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  height: 100px;\n  width: 100%;\n  display: inline-block;\n"])), _colors.P400);
+exports.confirmationHeader = confirmationHeader;
+var confirmationImg = (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100px;\n  display: block;\n  margin: 25px auto 0 auto;\n"])));
+exports.confirmationImg = confirmationImg;

package/dist/cjs/ui/WithFlash/index.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,26 +25,20 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _templateObject, _templateObject2, _templateObject3;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
 
-var pulseBackground = (0, _styledComponents.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), _colors.R100);
-var pulseBackgroundReverse = (0, _styledComponents.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), _colors.R100, _colors.R100);
-
-var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: ", ";\n  }\n"])), pulseBackgroundReverse, function (props) {
-  return props.animate ? ".25s ease-in-out ".concat(pulseBackground) : 'none';
-});
+var pulseBackground = (0, _react2.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  50% {\n    background-color: ", ";\n  }\n"])), _colors.R100);
+var pulseBackgroundReverse = (0, _react2.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    background-color: ", ";\n  }\n  50% {\n    background-color: auto;\n  }\n  100% {\n    background-color: ", ";\n  }\n"])), _colors.R100, _colors.R100);
+var flashWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  &.-flash > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n\n  & > div {\n    animation: 'none';\n  }\n"])), pulseBackgroundReverse);
+var flashWrapperAnimated = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  & > div {\n    animation: 0.25s ease-in-out ", ";\n  }\n"])), flashWrapper, pulseBackground);
 
 var WithFlash = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(WithFlash, _React$Component);
@@ -74,9 +66,9 @@ var WithFlash = /*#__PURE__*/function (_React$Component) {
           animate = _this$props.animate,
           children = _this$props.children;
       this.toggle = animate && !this.toggle;
-      return /*#__PURE__*/_react.default.createElement(Wrapper, {
-        className: this.toggle ? '-flash' : '',
-        animate: animate
+      return (0, _react2.jsx)("div", {
+        css: animate ? flashWrapperAnimated : flashWrapper,
+        className: this.toggle ? '-flash' : ''
       }, children);
     }
   }]);