@atlaskit/editor-common 74.57.0 → 74.58.0

package/dist/cjs/element-browser/components/ElementList/EmptyState.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EmptyState;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _NotFoundIllustration = _interopRequireDefault(require("./NotFoundIllustration"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
+function EmptyState(_ref) {
+  var onExternalLinkClick = _ref.onExternalLinkClick;
+  return (0, _react.jsx)("div", {
+    css: emptyStateWrapper
+  }, (0, _react.jsx)(_NotFoundIllustration.default, null), (0, _react.jsx)("div", {
+    css: emptyStateHeading
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "fabric.editor.elementbrowser.search.empty-state.heading",
+    defaultMessage: "Nothing matches your search",
+    description: "Empty state heading"
+  })), (0, _react.jsx)("div", {
+    css: emptyStateSubHeading
+  }, (0, _react.jsx)("p", null, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
+    defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
+    description: "Empty state sub-heading"
+  })), (0, _react.jsx)("div", {
+    css: externalLinkWrapper
+  }, (0, _react.jsx)(_button.default, {
+    appearance: "primary",
+    target: "_blank",
+    href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
+    onClick: onExternalLinkClick
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
+    defaultMessage: "Explore Atlassian Marketplace",
+    description: "Empty state sub-heading external link"
+  })))));
+}
+var emptyStateHeading = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 1.42857em;\n  line-height: 1.2;\n  color: ", ";\n  font-weight: 500;\n  letter-spacing: -0.008em;\n  margin-top: 28px;\n"])), "var(--ds-text, rgb(23, 43, 77))");
+var emptyStateSubHeading = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  max-width: 400px;\n  text-align: center;\n"])), "var(--ds-space-200, 16px)");
+var emptyStateWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n"])));
+var externalLinkWrapper = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 14px;\n"])));

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

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NotFoundIllustration;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+/** @jsx jsx */
+var imageContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 120px;\n  height: 111px;\n  margin-top: ", ";\n"])), "var(--ds-space-600, 48px)");
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+function NotFoundIllustration() {
+  return (0, _react.jsx)("div", {
+    css: imageContainer
+  }, (0, _react.jsx)("svg", {
+    width: "120",
+    height: "111",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, (0, _react.jsx)("g", {
+    clipPath: "url(#clip0)"
+  }, (0, _react.jsx)("path", {
+    fill: "#fff",
+    fillOpacity: ".01",
+    d: "M0 0h120v110.365H0z"
+  }), (0, _react.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"
+  }), (0, _react.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"
+  }), (0, _react.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"
+  }), (0, _react.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"
+  }), (0, _react.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)"
+  }), (0, _react.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"
+  })), (0, _react.jsx)("defs", null, (0, _react.jsx)("linearGradient", {
+    id: "paint0_linear",
+    x1: "34.792",
+    y1: "80.822",
+    x2: "82.401",
+    y2: "33.377",
+    gradientUnits: "userSpaceOnUse"
+  }, (0, _react.jsx)("stop", {
+    offset: ".557",
+    stopColor: "#C1C7D0"
+  }), (0, _react.jsx)("stop", {
+    offset: ".966",
+    stopColor: "#E9EBEF",
+    stopOpacity: ".5"
+  })), (0, _react.jsx)("clipPath", {
+    id: "clip0"
+  }, (0, _react.jsx)("path", {
+    fill: "#fff",
+    d: "M0 0h120v110.365H0z"
+  })))));
+}
+/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */

package/dist/cjs/element-browser/components/ElementList/cellSizeAndPositionGetter.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = cellSizeAndPositionGetter;
+var _constants = require("../../constants");
+var _utils = require("./utils");
+/**
+ * Callback responsible for returning size and offset/position information
+ * for a given cell.
+ * https://github.com/bvaughn/react-virtualized/blob/master/docs/Collection.md
+ **/
+function cellSizeAndPositionGetter(containerWidth, scrollbarWidth) {
+  var GUTTER_SIZE = 4;
+  /**
+   * Save the currently rendered columnY positions.
+   * Have to be within the current render scope.
+   */
+  var columnYMap = [];
+  return function (_ref) {
+    var index = _ref.index;
+    var _generateVirtualizedC = (0, _utils.generateVirtualizedContainerDatum)(containerWidth, {
+        gutterSize: GUTTER_SIZE,
+        scrollbarWidth: scrollbarWidth
+      }),
+      columnCount = _generateVirtualizedC.columnCount,
+      availableWidth = _generateVirtualizedC.availableWidth;
+    var width = Math.floor(availableWidth / columnCount);
+    var height = _constants.ELEMENT_ITEM_HEIGHT;
+    var columnPosition = index % (columnCount || 1);
+    var x = columnPosition * width;
+    var y = columnYMap[columnPosition] || 0;
+    columnYMap[columnPosition] = y + height;
+    return {
+      height: height,
+      width: width,
+      x: x,
+      y: y
+    };
+  };
+}

package/dist/cjs/element-browser/components/ElementList/utils.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateVirtualizedContainerDatum = generateVirtualizedContainerDatum;
+exports.getColumnCount = getColumnCount;
+exports.getScrollbarWidth = getScrollbarWidth;
+var _constants = require("../../constants");
+function getColumnCount(clientWidth) {
+  var small = _constants.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS.small,
+    medium = _constants.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS.medium,
+    large = _constants.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS.large;
+  switch (true) {
+    case clientWidth < small:
+      return 1;
+    case clientWidth >= small && clientWidth < medium:
+      return Math.floor(clientWidth / 200);
+    case clientWidth >= large:
+      return Math.floor(clientWidth / 248);
+    default:
+      return Math.floor(clientWidth / 220);
+  }
+}
+function generateVirtualizedContainerDatum(containerWidth, options) {
+  var scrollbarWidth = options.scrollbarWidth;
+  var columnCount = getColumnCount(containerWidth);
+  var availableWidth = containerWidth - (scrollbarWidth + _constants.ELEMENT_LIST_PADDING);
+  return {
+    availableWidth: availableWidth,
+    columnCount: columnCount
+  };
+}
+var CALCULATED_SCROLLBAR_WIDTH;
+function getScrollbarWidth() {
+  if (!CALCULATED_SCROLLBAR_WIDTH) {
+    var _container$parentNode;
+    var container = document.createElement('div');
+    container.style.visibility = 'hidden';
+    container.style.overflow = 'scroll';
+    document.body.appendChild(container);
+    var innerContainer = document.createElement('div');
+    container.appendChild(innerContainer);
+    var scrollbarWidth = container.offsetWidth - innerContainer.offsetWidth;
+    (_container$parentNode = container.parentNode) === null || _container$parentNode === void 0 ? void 0 : _container$parentNode.removeChild(container);
+    if (scrollbarWidth) {
+      CALCULATED_SCROLLBAR_WIDTH = scrollbarWidth;
+      return scrollbarWidth;
+    }
+    return _constants.SCROLLBAR_WIDTH;
+  } else {
+    return CALCULATED_SCROLLBAR_WIDTH;
+  }
+}

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

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("../constants");
+var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
+var _types = require("../types");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/** @jsx jsx */
+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 ElementSearch(_ref) {
+  var onSearch = _ref.onSearch,
+    mode = _ref.mode,
+    formatMessage = _ref.intl.formatMessage,
+    focus = _ref.focus,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
+    searchTerm = _ref.searchTerm;
+  var ref = (0, _useFocus.default)(focus);
+  var onChange = function onChange(_ref2) {
+    var value = _ref2.target.value;
+    onSearch(value);
+  };
+  var onFocus = function onFocus(e) {};
+  var onBlur = function onBlur(e) {};
+  return (0, _react2.jsx)("div", {
+    css: [wrapper, mode === _types.Modes.inline && wrapperInline]
+  }, (0, _react2.jsx)(_textfield.default, {
+    ref: ref,
+    onChange: onChange,
+    onClick: onClick,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown,
+    onBlur: onBlur,
+    elemBeforeInput: (0, _react2.jsx)("div", {
+      css: elementBeforeInput,
+      "data-testid": "element_search__element_before_input"
+    }, (0, _react2.jsx)(_search.default, {
+      size: "medium",
+      label: "Advanced search",
+      primaryColor: "inherit"
+    })),
+    elemAfterInput: (0, _react2.jsx)("div", {
+      css: elementAfterInput,
+      "data-testid": "element_search__element_after_input"
+    }, (0, _react2.jsx)("div", {
+      css: styledShortcut
+    }, "\u23CE ", formatMessage(elementAfterInputMessage))),
+    placeholder: formatMessage(placeHolderMessage),
+    "aria-label": "search",
+    value: searchTerm
+  }));
+}
+var elementAfterInputMessage = {
+  id: 'fabric.editor.elementbrowser.searchbar.elementAfterInput',
+  defaultMessage: 'Enter',
+  description: 'Enter to insert'
+};
+var placeHolderMessage = {
+  id: 'fabric.editor.elementbrowser.searchbar.placeholder',
+  defaultMessage: 'Search',
+  description: 'Search field placeholder'
+};
+var styledShortcut = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), _shortcut.shortcutStyle, _constants.GRID_SIZE / 2, _constants.GRID_SIZE, _constants.GRID_SIZE * 6);
+var wrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px ", " ", "px 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 6, _constants.GRID_SIZE, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _constants.GRID_SIZE, "var(--ds-space-075, 6px)", _constants.GRID_SIZE);
+var wrapperInline = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), _constants.GRID_SIZE * 5);
+var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px ", " 0 ", ";\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-icon, ".concat(_colors.N200, ")"));
+var elementAfterInput = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 ", ";\n  height: ", ";\n  text-align: center;\n"])), "var(--ds-space-100, 8px)", _constants.SEARCH_ITEM_HEIGHT_WIDTH);
+var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
+  component: 'Searchbar'
+})((0, _reactIntlNext.injectIntl)(ElementSearch)));
+var _default = MemoizedElementSearchWithAnalytics;
+exports.default = _default;

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

@@ -0,0 +1,269 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../../analytics");
+var _constants = require("../constants");
+var _useContainerWidth2 = _interopRequireDefault(require("../hooks/use-container-width"));
+var _useSelectAndFocusOnArrowNavigation = _interopRequireDefault(require("../hooks/use-select-and-focus-on-arrow-navigation"));
+var _ViewMore = require("../ViewMore");
+var _CategoryList = _interopRequireDefault(require("./CategoryList"));
+var _ElementList = _interopRequireDefault(require("./ElementList/ElementList"));
+var _ElementSearch = _interopRequireDefault(require("./ElementSearch"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
+/** @jsx jsx */
+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 wrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  max-height: inherit;\n  overflow: hidden;\n"])));
+var baseBrowserContainerStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100%;\n  /** Needed for Safari to work with current css.\n  * 100% heights wont work and\n  * will default to auto if one of the containers doesn't have a specified height in pixels.\n  * Setting the min-height to fill available fits safari's needs and the above 100% height works on the rest of the browsers.\n  */\n\n  /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */\n\n  /* stylelint-disable-next-line */\n  min-height: -webkit-fill-available;\n"])));
+var mobileElementBrowserContainer = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
+var elementBrowserContainer = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
+var baseSidebarStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
+var mobileSideBar = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, _constants.INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
+var mobileSideBarShowCategories = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+var sideBar = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
+var sideBarShowCategories = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, _constants.SIDEBAR_WIDTH);
+var sidebarHeading = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 ", ";\n  display: inline-flex;\n  align-items: center;\n  padding-left: ", ";\n  font-weight: 700;\n"])), _constants.SIDEBAR_HEADING_WRAPPER_HEIGHT, _constants.SIDEBAR_HEADING_PADDING_LEFT);
+var mobileMainContent = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1 1 auto;\n\n  display: flex;\n  flex-direction: column;\n\n  overflow-y: auto;\n  height: 100%;\n"])));
+var mainContent = (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  margin-left: ", "px;\n  // Needed for safari\n  height: auto;\n"])), mobileMainContent, _constants.GRID_SIZE * 2);
+var searchContainer = (0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  padding-bottom: ", "px;\n"])), _constants.GRID_SIZE * 2);
+var mobileCategoryListWrapper = (0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  overflow-x: auto;\n\n  padding: ", "px 0 ", "px 0;\n  min-height: ", "px;\n\n  overflow: -moz-scrollbars-none;\n  ::-webkit-scrollbar {\n    display: none;\n  }\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n"])), _constants.GRID_SIZE, _constants.GRID_SIZE * 2, _constants.GRID_SIZE * 4);
+var categoryListWrapper = (0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: 0;\n  margin-top: ", "px;\n  flex-direction: column;\n"])), mobileCategoryListWrapper, _constants.GRID_SIZE * 3);
+function StatelessElementBrowser(props) {
+  var items = props.items,
+    onSelectItem = props.onSelectItem,
+    onInsertItem = props.onInsertItem,
+    viewMoreItem = props.viewMoreItem;
+  var _useContainerWidth = (0, _useContainerWidth2.default)(),
+    containerWidth = _useContainerWidth.containerWidth,
+    ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    columnCount = _useState2[0],
+    setColumnCount = _useState2[1];
+  var _useSelectAndFocusOnA = (0, _useSelectAndFocusOnArrowNavigation.default)(items.length - 1, columnCount, !!viewMoreItem),
+    selectedItemIndex = _useSelectAndFocusOnA.selectedItemIndex,
+    focusedItemIndex = _useSelectAndFocusOnA.focusedItemIndex,
+    setFocusedItemIndex = _useSelectAndFocusOnA.setFocusedItemIndex,
+    focusOnSearch = _useSelectAndFocusOnA.focusOnSearch,
+    focusOnViewMore = _useSelectAndFocusOnA.focusOnViewMore,
+    onKeyDown = _useSelectAndFocusOnA.onKeyDown,
+    setFocusOnSearch = _useSelectAndFocusOnA.setFocusOnSearch;
+  (0, _react.useEffect)(function () {
+    (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)({
+      payload: {
+        action: _analytics.ACTION.OPENED,
+        actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
+        eventType: _analytics.EVENT_TYPE.UI,
+        attributes: {
+          mode: props.mode
+        }
+      }
+    });
+    return function () {
+      (0, _analytics.fireAnalyticsEvent)(props.createAnalyticsEvent)({
+        payload: {
+          action: _analytics.ACTION.CLOSED,
+          actionSubject: _analytics.ACTION_SUBJECT.ELEMENT_BROWSER,
+          eventType: _analytics.EVENT_TYPE.UI,
+          attributes: {
+            mode: props.mode
+          }
+        }
+      });
+    };
+  }, [props.createAnalyticsEvent, props.mode]);
+
+  /* Only for hitting enter to select item when focused on search bar,
+   * The actual enter key press is handled on individual items level.
+   */
+  var selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
+  var onItemsEnterKeyPress = (0, _react.useCallback)(function (e) {
+    if (e.key !== 'Enter') {
+      return;
+    }
+    if (onInsertItem && selectedItem != null) {
+      onInsertItem(selectedItem);
+    }
+    e.preventDefault();
+  }, [onInsertItem, selectedItem]);
+
+  /**
+   * On arrow key selection and clicks the selectedItemIndex will change.
+   * Making sure to update parent component.
+   */
+  (0, _react.useEffect)(function () {
+    if (onSelectItem && selectedItem != null) {
+      onSelectItem(selectedItem);
+    }
+  }, [onSelectItem, selectedItem]);
+  return (0, _react2.jsx)("div", {
+    css: wrapper,
+    "data-testid": "element-browser"
+  }, (0, _react2.jsx)(ContainerWidthMonitor, null), containerWidth < _constants.DEVICE_BREAKPOINT_NUMBERS.medium ? (0, _react2.jsx)(MobileBrowser, (0, _extends2.default)({}, props, {
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    focusOnSearch: focusOnSearch,
+    setColumnCount: setColumnCount,
+    setFocusOnSearch: setFocusOnSearch,
+    onKeyPress: onItemsEnterKeyPress,
+    onKeyDown: onKeyDown,
+    viewMoreItem: viewMoreItem,
+    focusOnViewMore: focusOnViewMore
+  })) : (0, _react2.jsx)(DesktopBrowser, (0, _extends2.default)({}, props, {
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    focusOnSearch: focusOnSearch,
+    setColumnCount: setColumnCount,
+    setFocusOnSearch: setFocusOnSearch,
+    onKeyPress: onItemsEnterKeyPress,
+    onKeyDown: onKeyDown
+  })));
+}
+function MobileBrowser(_ref) {
+  var showCategories = _ref.showCategories,
+    showSearch = _ref.showSearch,
+    onSearch = _ref.onSearch,
+    mode = _ref.mode,
+    categories = _ref.categories,
+    onSelectCategory = _ref.onSelectCategory,
+    items = _ref.items,
+    onInsertItem = _ref.onInsertItem,
+    selectedCategory = _ref.selectedCategory,
+    selectedItemIndex = _ref.selectedItemIndex,
+    focusedItemIndex = _ref.focusedItemIndex,
+    setFocusedItemIndex = _ref.setFocusedItemIndex,
+    focusOnSearch = _ref.focusOnSearch,
+    focusOnViewMore = _ref.focusOnViewMore,
+    setColumnCount = _ref.setColumnCount,
+    setFocusOnSearch = _ref.setFocusOnSearch,
+    onKeyPress = _ref.onKeyPress,
+    onKeyDown = _ref.onKeyDown,
+    searchTerm = _ref.searchTerm,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    emptyStateHandler = _ref.emptyStateHandler,
+    viewMoreItem = _ref.viewMoreItem;
+  return (0, _react2.jsx)("div", {
+    css: mobileElementBrowserContainer,
+    onKeyDown: onKeyDown,
+    "data-testid": "mobile__element-browser"
+  }, (0, _react2.jsx)("div", {
+    css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
+  }, showSearch && (0, _react2.jsx)(_ElementSearch.default, {
+    onSearch: onSearch,
+    onKeyDown: onKeyPress,
+    mode: mode,
+    focus: focusOnSearch,
+    onClick: setFocusOnSearch,
+    searchTerm: searchTerm
+  }), showCategories && (0, _react2.jsx)("nav", {
+    css: mobileCategoryListWrapper,
+    tabIndex: -1
+  }, (0, _react2.jsx)(_CategoryList.default, {
+    categories: categories,
+    onSelectCategory: onSelectCategory,
+    selectedCategory: selectedCategory
+  }))), (0, _react2.jsx)("div", {
+    css: mobileMainContent
+  }, (0, _react2.jsx)(_ElementList.default, {
+    items: items,
+    mode: mode,
+    onInsertItem: onInsertItem,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setColumnCount: setColumnCount,
+    createAnalyticsEvent: createAnalyticsEvent,
+    emptyStateHandler: emptyStateHandler,
+    selectedCategory: selectedCategory,
+    searchTerm: searchTerm
+  })), viewMoreItem && (0, _react2.jsx)(_ViewMore.ViewMore, {
+    item: viewMoreItem,
+    focus: focusOnViewMore
+  }));
+}
+function DesktopBrowser(_ref2) {
+  var showCategories = _ref2.showCategories,
+    showSearch = _ref2.showSearch,
+    onSearch = _ref2.onSearch,
+    mode = _ref2.mode,
+    categories = _ref2.categories,
+    onSelectCategory = _ref2.onSelectCategory,
+    items = _ref2.items,
+    onInsertItem = _ref2.onInsertItem,
+    selectedCategory = _ref2.selectedCategory,
+    selectedItemIndex = _ref2.selectedItemIndex,
+    focusedItemIndex = _ref2.focusedItemIndex,
+    setFocusedItemIndex = _ref2.setFocusedItemIndex,
+    focusOnSearch = _ref2.focusOnSearch,
+    setColumnCount = _ref2.setColumnCount,
+    setFocusOnSearch = _ref2.setFocusOnSearch,
+    onKeyPress = _ref2.onKeyPress,
+    onKeyDown = _ref2.onKeyDown,
+    searchTerm = _ref2.searchTerm,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent,
+    emptyStateHandler = _ref2.emptyStateHandler;
+  return (0, _react2.jsx)("div", {
+    css: elementBrowserContainer,
+    "data-testid": "desktop__element-browser"
+  }, showCategories && (0, _react2.jsx)("div", {
+    css: showCategories ? sideBarShowCategories : sideBar
+  }, (0, _react2.jsx)("h2", {
+    css: sidebarHeading,
+    "data-testid": "sidebar-heading"
+  }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, {
+    id: "fabric.editor.elementbrowser.sidebar.heading",
+    defaultMessage: "Browse",
+    description: "Sidebar heading"
+  })), (0, _react2.jsx)("nav", {
+    css: categoryListWrapper
+  }, (0, _react2.jsx)(_CategoryList.default, {
+    categories: categories,
+    onSelectCategory: onSelectCategory,
+    selectedCategory: selectedCategory,
+    createAnalyticsEvent: createAnalyticsEvent
+  }))), (0, _react2.jsx)("div", {
+    css: mainContent,
+    onKeyDown: onKeyDown,
+    "data-testid": "main-content"
+  }, showSearch && (0, _react2.jsx)("div", {
+    css: searchContainer
+  }, (0, _react2.jsx)(_ElementSearch.default, {
+    onSearch: onSearch,
+    onKeyDown: onKeyPress,
+    mode: mode,
+    focus: focusOnSearch,
+    onClick: setFocusOnSearch,
+    searchTerm: searchTerm
+  })), (0, _react2.jsx)(_ElementList.default, {
+    items: items,
+    mode: mode,
+    onInsertItem: onInsertItem,
+    selectedItemIndex: selectedItemIndex,
+    focusedItemIndex: focusedItemIndex,
+    setFocusedItemIndex: setFocusedItemIndex,
+    setColumnCount: setColumnCount,
+    createAnalyticsEvent: createAnalyticsEvent,
+    emptyStateHandler: emptyStateHandler,
+    selectedCategory: selectedCategory,
+    searchTerm: searchTerm
+  })));
+}
+var MemoizedElementBrowser = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
+  source: 'ElementBrowser'
+})((0, _analyticsNext.withAnalyticsEvents)()(StatelessElementBrowser)));
+var _default = MemoizedElementBrowser;
+exports.default = _default;

package/dist/cjs/element-browser/constants.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIDEBAR_WIDTH = exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = exports.SIDEBAR_HEADING_PADDING_LEFT = exports.SEARCH_ITEM_HEIGHT_WIDTH = exports.SCROLLBAR_WIDTH = exports.INLINE_SIDEBAR_HEIGHT = exports.GRID_SIZE = exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = exports.ELEMENT_LIST_PADDING = exports.ELEMENT_ITEM_HEIGHT = exports.DEVICE_BREAKPOINT_NUMBERS = void 0;
+var _constants = require("@atlaskit/theme/constants");
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
+// TODO: Migrate away from gridSize
+// Recommendation: Replace gridSize with 8
+var GRID_SIZE = (0, _constants.gridSize)();
+exports.GRID_SIZE = GRID_SIZE;
+var DEVICE_BREAKPOINT_NUMBERS = {
+  small: GRID_SIZE * 40,
+  medium: GRID_SIZE * 75,
+  large: GRID_SIZE * 128
+};
+exports.DEVICE_BREAKPOINT_NUMBERS = DEVICE_BREAKPOINT_NUMBERS;
+var FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = {
+  small: GRID_SIZE * 50,
+  medium: DEVICE_BREAKPOINT_NUMBERS.medium,
+  large: DEVICE_BREAKPOINT_NUMBERS.large
+};
+exports.FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS = FLEX_ITEMS_CONTAINER_BREAKPOINT_NUMBERS;
+var SIDEBAR_WIDTH = "".concat(GRID_SIZE * 25, "px");
+exports.SIDEBAR_WIDTH = SIDEBAR_WIDTH;
+var SIDEBAR_HEADING_WRAPPER_HEIGHT = "".concat(GRID_SIZE * 6, "px");
+exports.SIDEBAR_HEADING_WRAPPER_HEIGHT = SIDEBAR_HEADING_WRAPPER_HEIGHT;
+var SIDEBAR_HEADING_PADDING_LEFT = '12px';
+exports.SIDEBAR_HEADING_PADDING_LEFT = SIDEBAR_HEADING_PADDING_LEFT;
+var INLINE_SIDEBAR_HEIGHT = '54px';
+exports.INLINE_SIDEBAR_HEIGHT = INLINE_SIDEBAR_HEIGHT;
+var SEARCH_ITEM_HEIGHT_WIDTH = '20px';
+exports.SEARCH_ITEM_HEIGHT_WIDTH = SEARCH_ITEM_HEIGHT_WIDTH;
+var SCROLLBAR_WIDTH = 15;
+exports.SCROLLBAR_WIDTH = SCROLLBAR_WIDTH;
+var ELEMENT_LIST_PADDING = 2;
+exports.ELEMENT_LIST_PADDING = ELEMENT_LIST_PADDING;
+var ELEMENT_ITEM_HEIGHT = 75;
+exports.ELEMENT_ITEM_HEIGHT = ELEMENT_ITEM_HEIGHT;