@atlaskit/editor-core 162.0.2 → 164.0.1

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

@@ -2,12 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.shouldPanelBePositionedOverEditor = exports.default = exports.SwappableContentArea = exports.Panel = exports.Content = void 0;
+exports.shouldPanelBePositionedOverEditor = exports.panel = exports.default = exports.content = exports.SwappableContentArea = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -29,9 +27,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _Transition = _interopRequireDefault(require("react-transition-group/Transition"));
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -49,11 +47,7 @@ var _WithEditorActions = _interopRequireDefault(require("../WithEditorActions"))
 
 var _document = require("../../utils/document");
 
-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 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; }
 
@@ -68,7 +62,7 @@ var EDITOR_WIDTH = _editorSharedStyles.akEditorDefaultLayoutWidth + _editorShare
 var WIDE_EDITOR_WIDTH = _editorSharedStyles.akEditorWideLayoutWidth + _editorSharedStyles.akEditorBreakoutPadding;
 var FULLWIDTH_MODE = 'full-width';
 var WIDE_MODE = 'wide';
-var absolutePanelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
+var absolutePanelStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n  height: calc(100% - ", ");\n"])), _editorSharedStyles.ATLASSIAN_NAVIGATION_HEIGHT);
 
 var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEditor(editorWidth, panelWidth) {
   var lineLength = editorWidth.lineLength,
@@ -80,37 +74,13 @@ var shouldPanelBePositionedOverEditor = function shouldPanelBePositionedOverEdit
   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.
- */
-
 
 exports.shouldPanelBePositionedOverEditor = shouldPanelBePositionedOverEditor;
-
-var panelSlideStyles = function panelSlideStyles(_ref) {
-  var positionPanelOverEditor = _ref.positionPanelOverEditor;
-
-  if (positionPanelOverEditor) {
-    return absolutePanelStyles;
-  }
-
-  return;
-};
-
-var Panel = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, _editorSharedStyles.akEditorSwoopCubicBezier, _colors.N30, function (props) {
-  return panelSlideStyles(props);
-});
-
-exports.Panel = Panel;
-
-var Content = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorSwoopCubicBezier, function (p) {
-  return p.visible ? p.panelWidth : 0;
-});
-
-exports.Content = Content;
+var panelHidden = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n"])));
+var panel = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: 100%;\n  transition: width ", "ms ", ";\n  overflow: hidden;\n  box-shadow: inset 2px 0 0 0 ", ";\n"])), _editorSharedStyles.akEditorContextPanelWidth, ANIM_SPEED_MS, _editorSharedStyles.akEditorSwoopCubicBezier, _colors.N30);
+exports.panel = panel;
+var content = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _editorSharedStyles.akEditorSwoopCubicBezier, _editorSharedStyles.akEditorContextPanelWidth);
+exports.content = content;
 
 var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(SwappableContentArea, _React$PureComponent);
@@ -139,7 +109,7 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
+      return (0, _react2.jsx)(_Transition.default, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: !!pluginContent,
         mountOnEnter: true,
@@ -156,7 +126,7 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_Transition.default, {
+      return (0, _react2.jsx)(_Transition.default, {
         timeout: _this.state.mounted ? ANIM_SPEED_MS : 0,
         in: isVisible,
         mountOnEnter: true,
@@ -190,23 +160,26 @@ var SwappableContentArea = /*#__PURE__*/function (_React$PureComponent) {
       var width = _editorSharedStyles.akEditorContextPanelWidth;
       var userVisible = !!this.props.visible;
       var visible = userVisible || !!this.state.currentPluginContent;
-      return /*#__PURE__*/_react.default.createElement(_context.ContextPanelConsumer, null, function (_ref2) {
-        var broadcastWidth = _ref2.broadcastWidth,
-            broadcastPosition = _ref2.broadcastPosition,
-            positionedOverEditor = _ref2.positionedOverEditor;
+      return (0, _react2.jsx)(_context.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.default.createElement(Panel, {
-          panelWidth: width,
-          visible: visible,
-          positionPanelOverEditor: newPosition,
+        return (0, _react2.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.default.createElement(Content, {
-          panelWidth: width,
-          visible: visible
+        }, (0, _react2.jsx)("div", {
+          "data-testid": "context-panel-content",
+          css: [content, !visible && panelHidden]
         }, _this2.showPluginContent() || _this2.showProvidedContent(userVisible)));
       });
     }
@@ -242,39 +215,39 @@ var ContextPanel = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this3 = this;
 
-      return /*#__PURE__*/_react.default.createElement(_WithEditorActions.default, {
+      return (0, _react2.jsx)(_WithEditorActions.default, {
         render: function render(actions) {
           var eventDispatcher = actions._privateGetEventDispatcher();
 
           var editorView = actions._privateGetEditorView();
 
           if (!eventDispatcher) {
-            return /*#__PURE__*/_react.default.createElement(SwappableContentArea, (0, _extends2.default)({
+            return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({
               editorView: editorView
             }, _this3.props));
           }
 
-          return /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+          return (0, _react2.jsx)(_WithPluginState.default, {
             eventDispatcher: eventDispatcher,
             plugins: {
               contextPanel: _contextPanel.pluginKey,
               widthState: _width.pluginKey
             },
-            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: _editorSharedStyles.akEditorDefaultLayoutWidth
-              } : _ref3$widthState;
+              } : _ref2$widthState;
               var firstContent = contextPanel && contextPanel.contents.find(Boolean);
 
               var editorWidth = _objectSpread(_objectSpread({}, widthState), {}, {
                 contentBreakoutModes: editorView ? (0, _document.getChildBreakoutModes)(editorView.state.doc, editorView.state.schema) : []
               });
 
-              return /*#__PURE__*/_react.default.createElement(SwappableContentArea, (0, _extends2.default)({}, _this3.props, {
+              return (0, _react2.jsx)(SwappableContentArea, (0, _extends2.default)({}, _this3.props, {
                 editorView: editorView,
                 pluginContent: firstContent,
                 editorWidth: editorWidth

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

@@ -25,9 +25,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
 
@@ -51,20 +51,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; } }
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
-
+var wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var DropListWithOutsideListeners = (0, _withOuterListeners.default)(_droplist.default);
 /**
  * Hack for item to imitate old dropdown-menu selected styles
  */
 
-var ItemWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props.isSelected ? '&& > span, && > span:hover { background: #6c798f; color: #fff; }' : '';
-});
-
-var ItemContentWrapper = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props.hasElemBefore ? 'margin-left: 8px;' : '';
-});
+var itemWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  && > span,\n  && > span:hover {\n    background: #6c798f;\n    color: #fff;\n  }\n"])));
+var itemContentWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 8px;\n"])));
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
@@ -72,7 +66,6 @@ var ItemContentWrapper = _styledComponents.default.span(_templateObject3 || (_te
  * Also it controls popper's placement.
  */
 
-
 var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(DropdownMenuWrapper, _PureComponent);
 
@@ -126,15 +119,15 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       // If neither are present, don't wrap in an Item.
 
       if (!item.onClick && !item.value && !item.value.name) {
-        return /*#__PURE__*/_react.default.createElement("span", {
+        return (0, _react2.jsx)("span", {
           key: String(item.content)
         }, item.content);
       }
 
-      var dropListItem = /*#__PURE__*/_react.default.createElement(ItemWrapper, {
-        key: item.key || item.content,
-        isSelected: item.isActive
-      }, /*#__PURE__*/_react.default.createElement(_item.default, {
+      var dropListItem = (0, _react2.jsx)("div", {
+        css: item.isActive ? itemWrapper : '',
+        key: item.key || item.content
+      }, (0, _react2.jsx)(_item.default, {
         role: shouldUseDefaultRole ? 'button' : 'menuitem',
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
@@ -157,12 +150,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         className: item.className,
         "aria-label": item.label || String(item.content),
         "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-      }, /*#__PURE__*/_react.default.createElement(ItemContentWrapper, {
-        hasElemBefore: !!item.elemBefore
+      }, (0, _react2.jsx)("span", {
+        css: !!item.elemBefore ? itemContentWrapper : ''
       }, item.content)));
 
       if (item.tooltipDescription) {
-        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        return (0, _react2.jsx)(_tooltip.default, {
           key: item.key || item.content,
           content: item.tooltipDescription,
           position: item.tooltipPosition
@@ -190,7 +183,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           isOpen = _this$props2.isOpen,
           zIndex = _this$props2.zIndex,
           shouldUseDefaultRole = _this$props2.shouldUseDefaultRole;
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react2.jsx)(_ui.Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
@@ -200,7 +193,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || _editorSharedStyles.akEditorFloatingPanelZIndex,
         offset: offset
-      }, /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
+      }, (0, _react2.jsx)(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
         position: popupPlacement.join(' '),
@@ -209,13 +202,13 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: this.handleClose
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, (0, _react2.jsx)("div", {
         style: {
           height: 0,
           minWidth: fitWidth || 0
         }
       }), items.map(function (group, index) {
-        return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
+        return (0, _react2.jsx)(_item.ItemGroup, {
           key: index,
           role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
@@ -229,7 +222,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       var _this$props3 = this.props,
           children = _this$props3.children,
           isOpen = _this$props3.isOpen;
-      return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+      return (0, _react2.jsx)("div", {
+        css: wrapper
+      }, (0, _react2.jsx)("div", {
         ref: this.handleRef
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -17,7 +21,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _item = _interopRequireWildcard(require("@atlaskit/item"));
 
@@ -43,6 +47,8 @@ var _ElementBrowserLoader = _interopRequireDefault(require("./components/Element
 
 var _constants = require("./constants");
 
+var _excluded = ["children"];
+
 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); }
@@ -107,10 +113,10 @@ var InsertMenu = function InsertMenu(_ref) {
   }, [quickInsertDropdownItems]);
   var render = (0, _react.useCallback)(function (_ref2) {
     var quickInsertState = _ref2.quickInsertState;
-    return /*#__PURE__*/_react.default.createElement(ElementBrowserWrapper, {
+    return (0, _react2.jsx)(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity
-    }, /*#__PURE__*/_react.default.createElement(_ElementBrowserLoader.default, {
+    }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
       mode: "inline",
       getItems: getItems(quickInsertState),
       emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
@@ -121,14 +127,16 @@ var InsertMenu = function InsertMenu(_ref) {
       key: quickInsertDropdownItems.length
     }));
   }, [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
-  return /*#__PURE__*/_react.default.createElement(InsertMenuWrapper, {
-    itemCount: itemCount
-  }, /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+  return (0, _react2.jsx)("div", {
+    css: function css(theme) {
+      return insertMenuWrapper(theme, itemCount);
+    }
+  }, (0, _react2.jsx)(_WithPluginState.default, {
     plugins: {
       quickInsertState: _pluginKey.pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && /*#__PURE__*/_react.default.createElement(ViewMore, {
+  }), itemCount > 0 && viewMoreItem && (0, _react2.jsx)(ViewMore, {
     item: viewMoreItem
   }));
 };
@@ -145,15 +153,16 @@ var ViewMore = function ViewMore(_ref3) {
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: viewMoreItemTheme
-  }, /*#__PURE__*/_react.default.createElement(_item.default, {
+  return (0, _react2.jsx)(_item.default, {
     onClick: item.action,
-    elemBefore: /*#__PURE__*/_react.default.createElement(ItemBefore, null, item.icon()),
+    elemBefore: (0, _react2.jsx)("div", {
+      css: itemBefore
+    }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
-    onKeyPress: onKeyPress
-  }, item.title));
+    onKeyPress: onKeyPress,
+    theme: viewMoreItemTheme
+  }, item.title);
 };
 
 var getSvgIconForItem = function getSvgIconForItem(_ref4) {
@@ -168,7 +177,7 @@ var getSvgIconForItem = function getSvgIconForItem(_ref4) {
     date: _assets.IconDate,
     status: _assets.IconStatus
   }[name];
-  return Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
+  return Icon ? (0, _react2.jsx)(Icon, {
     label: ""
   }) : undefined;
 };
@@ -185,13 +194,16 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
   return 560; // For showing 6 Elements.
 };
 
-var InsertMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 0 1px ", ", 0 2px 1px ", ", 0 0 20px -6px ", ";\n"])), getInsertMenuHeight, (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN50
-})(), (0, _theme.borderRadius)(), _colors.N30A, _colors.N30A, _colors.N60A);
-
-var ItemBefore = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", "px;\n"])), (0, _theme.gridSize)() / 2);
+var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 0 1px ", ", 0 2px 1px ", ", 0 0 20px -6px ", ";\n"])), getInsertMenuHeight({
+    itemCount: itemCount
+  }), (0, _components.themed)({
+    light: _colors.N0,
+    dark: _colors.DN50
+  })(theme), (0, _theme.borderRadius)(), _colors.N30A, _colors.N30A, _colors.N60A);
+};
 
+var itemBefore = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", "px;\n"])), (0, _theme.gridSize)() / 2);
 var PADDING_LEFT = 14;
 var HEIGHT = 40;
 var viewMoreItemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
@@ -202,8 +214,15 @@ var viewMoreItemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespa
   },
   height: HEIGHT
 });
-
-var FlexWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+var flexWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+
+var FlexWrapper = function FlexWrapper(props) {
+  var children = props.children,
+      divProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
 
 var ElementBrowserWrapper = (0, _withOuterListeners.default)(FlexWrapper);
 var _default = InsertMenu;

package/dist/cjs/ui/ElementBrowser/ModalElementBrowser.js

@@ -9,13 +9,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -45,6 +45,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 actions = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
+var actionItem = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
+var wrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
+  light: _colors.N0,
+  dark: _colors.DN50
+})(), (0, _constants.borderRadius)());
+var modalFooter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
+
 var ModalElementBrowser = function ModalElementBrowser(props) {
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -60,7 +68,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     props.onInsertItem(item);
   }, [props]);
   var RenderFooter = (0, _react.useCallback)(function () {
-    return /*#__PURE__*/_react.default.createElement(Footer, {
+    return (0, _react2.jsx)(Footer, {
       onInsert: function onInsert() {
         return onInsertItem(selectedItem);
       },
@@ -74,7 +82,9 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     }
   }, [props]);
   var RenderBody = (0, _react.useCallback)(function () {
-    return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(_ElementBrowserLoader.default, {
+    return (0, _react2.jsx)("div", {
+      css: wrapper
+    }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
       categories: (0, _categories.getCategories)(props.intl),
       getItems: props.getItems,
       showSearch: true,
@@ -85,11 +95,11 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
       emptyStateHandler: props.emptyStateHandler
     }));
   }, [props.intl, props.getItems, onSelectItem, onInsertItem, props.emptyStateHandler]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-editor-popup": true,
     onClick: onModalClick,
     onKeyDown: onKeyDown
-  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, props.isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+  }, (0, _react2.jsx)(_modalDialog.ModalTransition, null, props.isOpen && (0, _react2.jsx)(_modalDialog.default, {
     testId: "element-browser-modal-dialog",
     stackIndex: 0,
     key: "element-browser-modal",
@@ -100,7 +110,7 @@ var ModalElementBrowser = function ModalElementBrowser(props) {
     // packages/design-system/modal-dialog/src/components/Content.tsx Line 287
     ,
     shouldCloseOnEscapePress: false
-  }, /*#__PURE__*/_react.default.createElement(RenderBody, null), /*#__PURE__*/_react.default.createElement(RenderFooter, null))));
+  }, (0, _react2.jsx)(RenderBody, null), (0, _react2.jsx)(RenderFooter, null))));
 };
 
 ModalElementBrowser.displayName = 'ModalElementBrowser'; // Prevent ModalElementBrowser click propagation through to the editor.
@@ -116,11 +126,19 @@ var Footer = function Footer(_ref) {
   var _useModal = (0, _modalDialog.useModal)(),
       onClose = _useModal.onClose;
 
-  return /*#__PURE__*/_react.default.createElement(ModalFooter, null, beforeElement ? beforeElement : /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement(Actions, null, /*#__PURE__*/_react.default.createElement(ActionItem, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  return (0, _react2.jsx)("div", {
+    css: modalFooter
+  }, beforeElement ? beforeElement : (0, _react2.jsx)("span", null), (0, _react2.jsx)("div", {
+    css: actions
+  }, (0, _react2.jsx)("div", {
+    css: actionItem
+  }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "primary",
     onClick: onInsert,
     testId: "ModalElementBrowser__insert-button"
-  }, "Insert")), /*#__PURE__*/_react.default.createElement(ActionItem, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  }, "Insert")), (0, _react2.jsx)("div", {
+    css: actionItem
+  }, (0, _react2.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     onClick: onClose,
     testId: "ModalElementBrowser__close-button"
@@ -128,8 +146,8 @@ var Footer = function Footer(_ref) {
 };
 
 var HelpLink = function HelpLink(url, helpText) {
-  return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
-    iconBefore: /*#__PURE__*/_react.default.createElement(_questionCircle.default, {
+  return (0, _react2.jsx)(_customThemeButton.default, {
+    iconBefore: (0, _react2.jsx)(_questionCircle.default, {
       label: "help",
       size: "medium"
     }),
@@ -140,17 +158,6 @@ var HelpLink = function HelpLink(url, helpText) {
   }, helpText);
 };
 
-var Actions = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  margin: 0 -4px;\n"])));
-
-var ActionItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 0 auto;\n  margin: 0 4px;\n"])));
-
-var Wrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n  padding: ", "px ", "px 0 10px;\n  overflow: hidden;\n  background-color: ", ";\n  border-radius: ", "px;\n"])), _constants2.MODAL_WRAPPER_PADDING, _constants2.MODAL_WRAPPER_PADDING, (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN50
-})(), (0, _constants.borderRadius)());
-
-var ModalFooter = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", "px;\n\n  position: relative;\n  align-items: center;\n  justify-content: space-between;\n"])), _constants2.MODAL_WRAPPER_PADDING);
-
 var _default = (0, _reactIntlNext.injectIntl)(ModalElementBrowser);
 
 exports.default = _default;