@atlaskit/editor-common 76.25.0 → 76.25.2

package/dist/esm/element-browser/components/ElementList/NotFoundIllustration.js

@@ -1,60 +1,61 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 var imageContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 120px;\n  height: 111px;\n  margin-top: ", ";\n"])), "var(--ds-space-600, 48px)");
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export default function NotFoundIllustration() {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: imageContainer
-  }, /*#__PURE__*/React.createElement("svg", {
+  }, jsx("svg", {
     width: "120",
     height: "111",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("g", {
+  }, jsx("g", {
     clipPath: "url(#clip0)"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     fill: "#fff",
     fillOpacity: ".01",
     d: "M0 0h120v110.365H0z"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     opacity: ".3",
     d: "M60.985 110.336c-.539.017-1.078.029-1.616.035a1.359 1.359 0 01-1.367-1.36 1.361 1.361 0 011.314-1.372h.041a50.876 50.876 0 0010.276-1.105 1.367 1.367 0 01.568 2.674 54.422 54.422 0 01-9.216 1.128zM52 109.877c-.075 0-.156 0-.237-.012a52.688 52.688 0 01-10.583-2.61 1.368 1.368 0 01.92-2.575c3.245 1.169 6.616 2 10.034 2.471.747.104 1.268.79 1.164 1.54A1.36 1.36 0 0152 109.877zM77.088 107.162a1.364 1.364 0 01-1.326-.895 1.366 1.366 0 01.805-1.755 50.423 50.423 0 009.274-4.575 1.358 1.358 0 011.877.43c.4.64.208 1.482-.429 1.884a53.25 53.25 0 01-9.772 4.824 1.26 1.26 0 01-.429.087zM34.9 104.32a1.359 1.359 0 01-.683-.157 53.29 53.29 0 01-9.042-6.092 1.369 1.369 0 01-.18-1.924 1.357 1.357 0 011.918-.18 50.483 50.483 0 008.578 5.778c.667.354.916 1.18.562 1.848a1.337 1.337 0 01-1.152.727zM20.732 93.23a1.372 1.372 0 01-1.06-.448 53.223 53.223 0 01-6.436-8.818 1.37 1.37 0 01.487-1.872 1.36 1.36 0 011.865.489 50.724 50.724 0 006.105 8.364 1.366 1.366 0 01-.098 1.93c-.25.226-.556.343-.863.354zM104.093 84.196a1.367 1.367 0 01-1.228-2.046 50.41 50.41 0 004.183-9.48 1.358 1.358 0 011.714-.878 1.365 1.365 0 01.875 1.72 53.17 53.17 0 01-4.414 9.993 1.34 1.34 0 01-1.13.691zM11.18 77.965a1.365 1.365 0 01-1.31-.854 52.827 52.827 0 01-3.029-10.498 1.362 1.362 0 112.682-.483 50.732 50.732 0 002.873 9.958 1.363 1.363 0 01-1.216 1.877zM110.17 67.218a1.362 1.362 0 01-1.39-1.593c.579-3.395.805-6.876.683-10.347l-.006-.116a1.36 1.36 0 011.315-1.412 1.359 1.359 0 011.408 1.32l.006.115a54.054 54.054 0 01-.724 10.905 1.36 1.36 0 01-1.292 1.128zM7.426 60.3c-.753.03-1.384-.534-1.407-1.29v-.058a53.82 53.82 0 01.712-10.846 1.368 1.368 0 011.57-1.122c.741.128 1.24.83 1.118 1.575a51.307 51.307 0 00-.678 10.288c.029.762-.562 1.425-1.315 1.453zM110.06 49.076a1.363 1.363 0 01-1.385-1.122 50.567 50.567 0 00-2.884-9.95c-.284-.698.052-1.5.747-1.785a1.365 1.365 0 011.778.75 53.085 53.085 0 013.041 10.497 1.37 1.37 0 01-1.094 1.593l-.203.017zM9.888 42.462a1.452 1.452 0 01-.47-.065 1.365 1.365 0 01-.874-1.72 53.157 53.157 0 014.402-9.998 1.362 1.362 0 011.86-.511c.655.372.88 1.209.51 1.866a50.68 50.68 0 00-4.177 9.486 1.37 1.37 0 01-1.251.941zM103.815 32.179a1.355 1.355 0 01-1.222-.674 50.958 50.958 0 00-6.117-8.359 1.366 1.366 0 01.099-1.93 1.355 1.355 0 011.923.099 53.449 53.449 0 016.447 8.806 1.37 1.37 0 01-.487 1.872 1.432 1.432 0 01-.643.186zM18.31 26.529a1.372 1.372 0 01-1.124-2.209 53.551 53.551 0 017.537-7.888 1.363 1.363 0 011.923.157 1.375 1.375 0 01-.156 1.93 51.072 51.072 0 00-7.154 7.487 1.343 1.343 0 01-1.025.523zM92.172 18.444a1.352 1.352 0 01-.915-.314 50.861 50.861 0 00-8.59-5.772 1.368 1.368 0 01-.568-1.849 1.364 1.364 0 011.842-.57 53.153 53.153 0 019.048 6.08c.58.483.66 1.343.18 1.925a1.366 1.366 0 01-.997.5zM31.64 14.433a1.368 1.368 0 01-.776-2.523 53.107 53.107 0 019.771-4.836 1.359 1.359 0 011.75.808c.26.71-.099 1.494-.805 1.755a50.203 50.203 0 00-9.269 4.587c-.208.133-.44.203-.672.209zM76.555 9.51a1.257 1.257 0 01-.504-.082A50.06 50.06 0 0066.013 6.97a1.364 1.364 0 01-1.165-1.54 1.364 1.364 0 011.535-1.168 52.623 52.623 0 0110.584 2.592 1.369 1.369 0 01-.412 2.657zM48.287 7.65a1.367 1.367 0 01-.33-2.703 54.261 54.261 0 0110.827-1.18 1.367 1.367 0 011.372 1.36 1.367 1.367 0 01-1.314 1.377H58.8A50.85 50.85 0 0048.525 7.62c-.081.018-.162.024-.238.03z",
     fill: "#B3BAC5"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     opacity: ".3",
     d: "M110.523 19.873a.304.304 0 01-.226-.325l.035-.262c.029-.168.064-.348.11-.534a4.423 4.423 0 01.95-1.796c.458-.53 1.118-.971 1.97-1.314l1.436-.587c.858-.343 1.385-.913 1.593-1.697a2.48 2.48 0 00.07-.878 1.998 1.998 0 00-.273-.849c-.156-.261-.37-.5-.654-.709a3.07 3.07 0 00-1.049-.477c-.451-.116-.851-.133-1.21-.052a2.56 2.56 0 00-.956.43c-.278.204-.51.465-.695.78-.191.313-.33.65-.423.999-.029.104-.052.21-.07.302a.459.459 0 01-.59.355l-2.219-.68a.464.464 0 01-.33-.483c.006-.07.017-.14.029-.21.035-.197.075-.383.121-.569.174-.668.47-1.29.887-1.866a5.14 5.14 0 011.546-1.412c.614-.366 1.31-.605 2.097-.72.788-.117 1.645-.047 2.578.197.967.256 1.778.622 2.433 1.098.66.477 1.176 1.012 1.552 1.599.377.593.614 1.22.707 1.889.093.668.058 1.32-.11 1.953-.261 1-.712 1.796-1.344 2.389a6.773 6.773 0 01-2.288 1.39l-1.211.458c-.341.11-.851.338-1.274.803-.041.046-.214.238-.388.534-.128.221-.22.436-.284.622a.303.303 0 01-.365.192l-2.155-.57zm-1.772 3.412c.145-.552.457-.97.944-1.26a1.942 1.942 0 011.552-.222c.551.146.968.465 1.257.96.29.493.359 1.017.215 1.569a1.966 1.966 0 01-.956 1.25 2.005 2.005 0 01-1.558.203 1.957 1.957 0 01-1.246-.942 1.98 1.98 0 01-.208-1.558zM10.722 12.393a.301.301 0 01-.203-.338l.053-.261c.04-.169.086-.343.15-.523a4.334 4.334 0 011.072-1.727c.492-.5 1.176-.889 2.056-1.18l1.472-.488c.874-.285 1.442-.814 1.703-1.587.092-.279.139-.57.127-.872a2.052 2.052 0 00-.214-.866 2.285 2.285 0 00-.609-.75c-.266-.226-.608-.406-1.013-.546-.44-.151-.846-.192-1.205-.134a2.518 2.518 0 00-1.726 1.099 3.583 3.583 0 00-.585 1.267.461.461 0 01-.615.314L9.02 4.976a.467.467 0 01-.295-.506c.011-.07.029-.14.046-.21a5.65 5.65 0 01.162-.557A5.505 5.505 0 019.946 1.9 5.246 5.246 0 0111.579.593a5.545 5.545 0 012.138-.576c.793-.058 1.645.064 2.554.372.945.32 1.732.739 2.358 1.262.626.523 1.106 1.087 1.442 1.703.336.616.533 1.255.58 1.93a4.97 4.97 0 01-.244 1.941c-.33.982-.828 1.744-1.506 2.29a6.844 6.844 0 01-2.375 1.233l-1.24.372a2.94 2.94 0 00-1.326.715c-.046.046-.232.226-.423.505-.145.215-.249.419-.324.599a.3.3 0 01-.377.168l-2.114-.714zm-1.998 3.284a2 2 0 011.025-1.198 1.957 1.957 0 011.564-.116c.539.18.933.529 1.188 1.04.254.512.29 1.041.11 1.582-.18.54-.528.935-1.037 1.18a2.019 2.019 0 01-1.57.098 1.96 1.96 0 01-1.182-1.029 1.99 1.99 0 01-.098-1.557zM7.177 104.849a.298.298 0 01-.37-.134c-.041-.076-.082-.157-.122-.238a8.207 8.207 0 01-.215-.5 4.405 4.405 0 01-.249-2.017c.076-.698.36-1.436.863-2.215l.84-1.308c.504-.773.614-1.546.33-2.307a2.6 2.6 0 00-.446-.762 2.019 2.019 0 00-.706-.54 2.421 2.421 0 00-.944-.204 3.05 3.05 0 00-1.13.215c-.434.163-.776.378-1.025.657-.25.273-.423.576-.533.901-.11.326-.15.674-.128 1.04.024.367.099.721.226 1.064.04.105.076.198.116.285a.466.466 0 01-.278.634l-2.201.72a.455.455 0 01-.545-.209c-.034-.064-.063-.128-.098-.192a5.595 5.595 0 01-.568-2.575 5.09 5.09 0 01.458-2.046c.29-.65.724-1.25 1.303-1.796.58-.546 1.32-.988 2.225-1.32.938-.348 1.807-.517 2.618-.505.81.012 1.54.151 2.19.413a4.62 4.62 0 011.656 1.139c.458.494.8 1.046 1.025 1.662.36.971.446 1.884.267 2.732-.18.85-.539 1.669-1.078 2.46l-.73 1.075c-.214.29-.503.767-.585 1.389-.005.064-.04.319-.011.657.023.255.07.482.127.668a.309.309 0 01-.19.372l-2.092.785zm.504 3.813a2.026 2.026 0 01.052-1.581 1.958 1.958 0 011.147-1.076 1.986 1.986 0 011.576.064c.521.239.88.628 1.077 1.163a1.947 1.947 0 01-.07 1.569 2.028 2.028 0 01-1.158 1.064 1.977 1.977 0 01-1.564-.052 1.96 1.96 0 01-1.06-1.151z",
     fill: "#C1C7D0"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M86.519 77.651l-4.142-4.028-5.578 5.784 4.141 4.028a7.812 7.812 0 012.15 3.772 7.858 7.858 0 002.148 3.773l16.816 16.333a6.405 6.405 0 009.077-.145 6.46 6.46 0 00-.144-9.108L94.171 81.726a7.786 7.786 0 00-3.83-2.034 7.9 7.9 0 01-3.822-2.04z",
     fill: "#CFD4DB"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M90.18 79.64a7.756 7.756 0 01-3.656-1.995l-1.262-1.226a4 4 0 00-5.671.093 4.032 4.032 0 00.092 5.69l1.263 1.227a7.853 7.853 0 012.103 3.598 33.606 33.606 0 003.858-3.435 33.629 33.629 0 003.273-3.953z",
     fill: "#B3BAC5"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M59.056 90.677c-8.961.146-17.442-3.22-23.877-9.474-13.295-12.91-13.636-34.266-.77-47.606C40.64 27.14 49.01 23.501 57.966 23.35c8.961-.145 17.441 3.22 23.877 9.475 6.441 6.255 10.062 14.654 10.212 23.64.145 8.992-3.209 17.502-9.442 23.96-6.227 6.47-14.597 10.108-23.558 10.253zM58.1 31.388c-6.824.11-13.19 2.883-17.94 7.801-9.795 10.155-9.534 26.413.585 36.242 4.9 4.76 11.36 7.324 18.183 7.213 6.824-.11 13.19-2.883 17.94-7.8 4.744-4.918 7.299-11.399 7.189-18.246-.11-6.847-2.873-13.236-7.774-18.002-4.906-4.755-11.36-7.318-18.183-7.208z",
     fill: "url(#paint0_linear)"
-  }), /*#__PURE__*/React.createElement("path", {
+  }), jsx("path", {
     d: "M68.886 49.535l-3.093-3.051a1.158 1.158 0 00-1.64.017l-5.67 5.796-5.776-5.691a1.158 1.158 0 00-1.64.017l-3.04 3.104c-.446.46-.44 1.192.017 1.645l5.775 5.69-5.67 5.796c-.447.46-.44 1.192.017 1.645l3.093 3.052a1.158 1.158 0 001.64-.018l5.67-5.795 5.775 5.69a1.158 1.158 0 001.64-.017l3.04-3.104c.447-.459.441-1.191-.017-1.645l-5.775-5.69 5.671-5.795c.446-.46.44-1.198-.017-1.645z",
     fill: "#C1C7D0"
-  })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+  })), jsx("defs", null, jsx("linearGradient", {
     id: "paint0_linear",
     x1: "34.792",
     y1: "80.822",
     x2: "82.401",
     y2: "33.377",
     gradientUnits: "userSpaceOnUse"
-  }, /*#__PURE__*/React.createElement("stop", {
+  }, jsx("stop", {
     offset: ".557",
     stopColor: "#C1C7D0"
-  }), /*#__PURE__*/React.createElement("stop", {
+  }), jsx("stop", {
     offset: ".966",
     stopColor: "#E9EBEF",
     stopOpacity: ".5"
-  })), /*#__PURE__*/React.createElement("clipPath", {
+  })), jsx("clipPath", {
     id: "clip0"
-  }, /*#__PURE__*/React.createElement("path", {
+  }, jsx("path", {
     fill: "#fff",
     d: "M0 0h120v110.365H0z"
   })))));

package/dist/esm/element-browser/components/ElementSearch.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/** @jsx jsx */
 import React, { memo } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
@@ -27,27 +28,27 @@ function ElementSearch(_ref) {
   };
   var onFocus = function onFocus(e) {};
   var onBlur = function onBlur(e) {};
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [wrapper, mode === Modes.inline && wrapperInline]
-  }, /*#__PURE__*/React.createElement(Textfield, {
+  }, jsx(Textfield, {
     ref: ref,
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
     onKeyDown: onKeyDown,
     onBlur: onBlur,
-    elemBeforeInput: /*#__PURE__*/React.createElement("div", {
+    elemBeforeInput: jsx("div", {
       css: elementBeforeInput,
       "data-testid": "element_search__element_before_input"
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
+    }, jsx(SearchIcon, {
       size: "medium",
       label: "Advanced search",
       primaryColor: "inherit"
     })),
-    elemAfterInput: /*#__PURE__*/React.createElement("div", {
+    elemAfterInput: jsx("div", {
       css: elementAfterInput,
       "data-testid": "element_search__element_after_input"
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: styledShortcut
     }, "\u23CE ", formatMessage(elementAfterInputMessage))),
     placeholder: formatMessage(placeHolderMessage),

package/dist/esm/element-browser/components/StatelessElementBrowser.js

@@ -2,8 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+/** @jsx jsx */
 import React, { memo, useCallback, useEffect, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
@@ -97,10 +98,10 @@ function StatelessElementBrowser(props) {
       onSelectItem(selectedItem);
     }
   }, [onSelectItem, selectedItem]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: wrapper,
     "data-testid": "element-browser"
-  }, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? /*#__PURE__*/React.createElement(MobileBrowser, _extends({}, props, {
+  }, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -111,7 +112,7 @@ function StatelessElementBrowser(props) {
     onKeyDown: onKeyDown,
     viewMoreItem: viewMoreItem,
     focusOnViewMore: focusOnViewMore
-  })) : /*#__PURE__*/React.createElement(DesktopBrowser, _extends({}, props, {
+  })) : jsx(DesktopBrowser, _extends({}, props, {
     selectedItemIndex: selectedItemIndex,
     focusedItemIndex: focusedItemIndex,
     setFocusedItemIndex: setFocusedItemIndex,
@@ -145,29 +146,29 @@ function MobileBrowser(_ref) {
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     emptyStateHandler = _ref.emptyStateHandler,
     viewMoreItem = _ref.viewMoreItem;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: mobileElementBrowserContainer,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
-  }, showSearch && /*#__PURE__*/React.createElement(ElementSearch, {
+  }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
     onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  }), showCategories && /*#__PURE__*/React.createElement("nav", {
+  }), showCategories && jsx("nav", {
     css: mobileCategoryListWrapper,
     tabIndex: -1
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), jsx("div", {
     css: mobileMainContent
-  }, /*#__PURE__*/React.createElement(ElementList, {
+  }, jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,
@@ -179,7 +180,7 @@ function MobileBrowser(_ref) {
     emptyStateHandler: emptyStateHandler,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
-  })), viewMoreItem && /*#__PURE__*/React.createElement(ViewMore, {
+  })), viewMoreItem && jsx(ViewMore, {
     item: viewMoreItem,
     focus: focusOnViewMore
   }));
@@ -205,39 +206,39 @@ function DesktopBrowser(_ref2) {
     searchTerm = _ref2.searchTerm,
     createAnalyticsEvent = _ref2.createAnalyticsEvent,
     emptyStateHandler = _ref2.emptyStateHandler;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: elementBrowserContainer,
     "data-testid": "desktop__element-browser"
-  }, showCategories && /*#__PURE__*/React.createElement("div", {
+  }, showCategories && jsx("div", {
     css: showCategories ? sideBarShowCategories : sideBar
-  }, /*#__PURE__*/React.createElement("h2", {
+  }, jsx("h2", {
     css: sidebarHeading,
     "data-testid": "sidebar-heading"
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.sidebar.heading",
     defaultMessage: "Browse",
     description: "Sidebar heading"
-  })), /*#__PURE__*/React.createElement("nav", {
+  })), jsx("nav", {
     css: categoryListWrapper
-  }, /*#__PURE__*/React.createElement(CategoryList, {
+  }, jsx(CategoryList, {
     categories: categories,
     onSelectCategory: onSelectCategory,
     selectedCategory: selectedCategory,
     createAnalyticsEvent: createAnalyticsEvent
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), jsx("div", {
     css: mainContent,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
-  }, showSearch && /*#__PURE__*/React.createElement("div", {
+  }, showSearch && jsx("div", {
     css: searchContainer
-  }, /*#__PURE__*/React.createElement(ElementSearch, {
+  }, jsx(ElementSearch, {
     onSearch: onSearch,
     onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
     searchTerm: searchTerm
-  })), /*#__PURE__*/React.createElement(ElementList, {
+  })), jsx(ElementList, {
     items: items,
     mode: mode,
     onInsertItem: onInsertItem,

package/dist/esm/element-browser/hooks/use-container-width.js

@@ -1,8 +1,9 @@
 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 { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { WidthObserver } from '@atlaskit/width-detector';
 
 /**
@@ -45,11 +46,11 @@ export default function useContainerWidth() {
     }
   }, [ref]);
   var ContainerWidthMonitor = /*#__PURE__*/memo(function () {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: widthObserverWrapper,
       ref: ref,
       tabIndex: -1
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: setContainerWidth
     }));
   });

package/dist/esm/keymaps/index.js

@@ -1,8 +1,9 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { base, keyName } from 'w3c-keyname';
 import { N400 } from '@atlaskit/theme/colors';
 import { editorCommandToPMCommand } from '../preset/editor-commands';
@@ -112,7 +113,7 @@ export var ToolTipContent = /*#__PURE__*/React.memo(function (_ref) {
     shortcutOverride = _ref.shortcutOverride,
     keymap = _ref.keymap;
   var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
-  return shortcut || description ? /*#__PURE__*/React.createElement(Fragment, null, description, shortcut && description && "\xA0", shortcut && /*#__PURE__*/React.createElement("span", {
+  return shortcut || description ? jsx(Fragment, null, description, shortcut && description && "\xA0", shortcut && jsx("span", {
     css: tooltipShortcutStyle
   }, shortcut)) : null;
 });

package/dist/esm/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -13,8 +13,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; } }
+/** @jsx jsx */
+
 import React, { PureComponent } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
 import { flushSync } from 'react-dom';
 import { defineMessages, injectIntl } from 'react-intl-next';
@@ -82,7 +84,7 @@ export var messages = defineMessages({
     description: 'Visible label for text input in hyperlink floating control'
   }
 });
-var defaultIcon = /*#__PURE__*/React.createElement(Page16Icon, {
+var defaultIcon = jsx(Page16Icon, {
   label: 'page'
 });
 var mapActivityProviderResultToLinkSearchItemData = function mapActivityProviderResultToLinkSearchItemData(_ref) {
@@ -813,27 +815,27 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
       // as the Aria design pattern for combobox does not work in this case
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
       var screenReaderText = browser.safari && this.getScreenReaderText();
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         "aria-label": "Hyperlink Edit",
         className: "recent-list"
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: [container, !!activityProvider && containerWithProvider, containerPadding],
         ref: this.wrapperRef
-      }, /*#__PURE__*/React.createElement("label", {
+      }, jsx("label", {
         htmlFor: linkSearchInputId,
         css: inputLabel
-      }, formatMessage(messages.linkVisibleLabel)), /*#__PURE__*/React.createElement("div", {
+      }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
-      }, screenReaderText && /*#__PURE__*/React.createElement(Announcer, {
+      }, screenReaderText && jsx(Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
         delay: 250
-      }), /*#__PURE__*/React.createElement("div", {
+      }), jsx("div", {
         css: visuallyHiddenStyles,
         "aria-hidden": "true",
         id: screenReaderDescriptionId
-      }, formatMessage(messages.searchLinkAriaDescription)), /*#__PURE__*/React.createElement(PanelTextInput, {
+      }, formatMessage(messages.searchLinkAriaDescription)), jsx(PanelTextInput, {
         role: "combobox",
         ariaExpanded: true,
         ariaActiveDescendant: ariaActiveDescendant,
@@ -853,23 +855,23 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         defaultValue: displayUrl,
         onKeyDown: this.handleKeyDown,
         inputId: linkSearchInputId
-      }), displayUrl && /*#__PURE__*/React.createElement("div", {
+      }), displayUrl && jsx("div", {
         css: clearTextWrapper
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx(Tooltip, {
         content: formatClearLinkText
-      }, /*#__PURE__*/React.createElement("button", {
+      }, jsx("button", {
         type: "button",
         css: clearText,
         onClick: this.handleClearText,
         tabIndex: 0
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatClearLinkText
-      }))))), /*#__PURE__*/React.createElement("label", {
+      }))))), jsx("label", {
         htmlFor: displayTextInputId,
         css: [inputLabel, textLabelMargin]
-      }, formatMessage(messages.textVisibleLabel)), /*#__PURE__*/React.createElement("div", {
+      }, formatMessage(messages.textVisibleLabel)), jsx("div", {
         css: [inputWrapper, inputWrapperPosition]
-      }, /*#__PURE__*/React.createElement(PanelTextInput, {
+      }, jsx(PanelTextInput, {
         ref: function ref(ele) {
           return _this3.displayTextInputContainer = ele;
         },
@@ -880,25 +882,25 @@ export var HyperlinkLinkAddToolbar = /*#__PURE__*/function (_PureComponent) {
         onSubmit: this.handleSubmit,
         onKeyDown: this.handleKeyDown,
         inputId: displayTextInputId
-      }), displayText && /*#__PURE__*/React.createElement("div", {
+      }), displayText && jsx("div", {
         css: clearTextWrapper
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx(Tooltip, {
         content: formatMessage(messages.clearText)
-      }, /*#__PURE__*/React.createElement("button", {
+      }, jsx("button", {
         type: "button",
         css: clearText,
         onClick: this.handleClearDisplayText,
         onKeyDown: this.handleClearTextKeyDown
-      }, /*#__PURE__*/React.createElement(CrossCircleIcon, {
+      }, jsx(CrossCircleIcon, {
         label: formatMessage(messages.clearText)
-      }))))), /*#__PURE__*/React.createElement("div", {
+      }))))), jsx("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",
         id: "fabric.editor.hyperlink.suggested.results"
       }, displayUrl && formatMessage(messages.searchLinkResults, {
         count: items.length
-      })), /*#__PURE__*/React.createElement(LinkSearchList, {
+      })), jsx(LinkSearchList, {
         ariaControls: "fabric.editor.hyperlink.suggested.results",
         id: linkSearchListId,
         role: "listbox",

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

@@ -7,8 +7,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3;
 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; } }
+/** @jsx jsx */
 import { PureComponent } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
 import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
@@ -39,13 +40,13 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
       var itemsContent;
       var loadingContent;
       if (items && items.length > 0) {
-        itemsContent = /*#__PURE__*/React.createElement("ul", {
+        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,
@@ -59,14 +60,14 @@ var LinkSearchList = /*#__PURE__*/function (_PureComponent) {
         }));
       }
       if (isLoading) {
-        loadingContent = /*#__PURE__*/React.createElement("div", {
+        loadingContent = jsx("div", {
           "data-testid": "".concat(id, "-loading"),
           css: spinnerContainer
-        }, /*#__PURE__*/React.createElement(Spinner, {
+        }, jsx(Spinner, {
           size: "medium"
         }));
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         css: listContainer
       }, itemsContent, loadingContent);
     }

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

@@ -9,8 +9,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 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; } }
+/** @jsx jsx */
 import React, { Fragment } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { injectIntl } from 'react-intl-next';
@@ -71,14 +72,14 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
         iconUrl = _this$props5$item.iconUrl,
         intl = _this$props5.intl;
       if (icon) {
-        return /*#__PURE__*/React.createElement("span", {
+        return jsx("span", {
           css: iconStyle
         }, icon);
       }
       if (iconUrl) {
-        return /*#__PURE__*/React.createElement("span", {
+        return jsx("span", {
           css: iconStyle
-        }, /*#__PURE__*/React.createElement("img", {
+        }, jsx("img", {
           src: iconUrl,
           alt: getCorrectAltByIconUrl(iconUrl, intl)
         }));
@@ -92,7 +93,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(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 || ''));
@@ -105,7 +106,7 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
         selected = _this$props7.selected,
         id = _this$props7.id,
         role = _this$props7.role;
-      return /*#__PURE__*/React.createElement("li", {
+      return jsx("li", {
         css: [container, selected && containerSelected],
         role: role,
         id: id,
@@ -115,11 +116,11 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleSelect
-      }, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
+      }, this.renderIcon(), jsx("span", {
         css: nameWrapper
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         css: nameStyle
-      }, item.name), /*#__PURE__*/React.createElement("div", {
+      }, item.name), jsx("div", {
         "data-testid": "link-search-list-item-container",
         css: containerName
       }, item.container, this.renderTimeStamp())));

package/dist/esm/media-inline/inline-image-wrapper.js

@@ -1,10 +1,22 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { B300 } from '@atlaskit/theme/colors';
 var wrapperStyle = css({
-  display: 'inline-block'
+  display: 'inline-block',
+  verticalAlign: 'text-bottom',
+  borderRadius: "var(--ds-border-radius, 3px)"
+});
+var selectedStyle = css({
+  cursor: 'pointer',
+  boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, ".concat(B300, ")")),
+  outline: 'none',
+  borderColor: 'transparent'
 });
 export var InlineImageWrapper = function InlineImageWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
-    css: wrapperStyle
+  var children = _ref.children,
+    isSelected = _ref.isSelected;
+  return jsx("span", {
+    css: [wrapperStyle, isSelected && selectedStyle]
   }, children);
 };