@atlaskit/quick-search 8.0.13 → 8.0.14

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/quick-search
 
+## 8.0.14
+
+### Patch Changes
+
+- [`1378b2a7308`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1378b2a7308) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+
 ## 8.0.13
 
 ### Patch Changes

package/README.md

@@ -0,0 +1 @@
+This package has been deprecated. Please use the `search-dialog` package instead.

package/dist/cjs/components/QuickSearch.js

@@ -1,48 +1,28 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.QuickSearch = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _analytics = require("@atlaskit/analytics");
-
 var _Search = _interopRequireDefault(require("./Search/Search"));
-
 var _context = require("./context");
-
 var _decorateWithAnalyticsData = _interopRequireDefault(require("./decorateWithAnalyticsData"));
-
 var _constants = require("./constants");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /**
  * Get the result ID of a result by its index in the flatResults array
  * Returns null for a failed index or if resultId is empty|undefined
@@ -51,69 +31,56 @@ var getResultIdByIndex = function getResultIdByIndex(array, index) {
   if (array && index !== null && array[index] && array[index].props && array[index].props.resultId) {
     return array[index].props.resultId;
   }
-
   return null;
 };
+
 /**
  * Find a result in the flatResults array by its ID
  * Returns the result object or null
  */
-
-
 var getResultById = function getResultById(array, id) {
   return array && array.find(function (result) {
     return result.props && result.props.resultId === id;
   }) || null;
 };
+
 /**
  * Get a result's index in the flatResults array by its ID
  * Returns a numeric index or null
  */
-
-
 var getResultIndexById = function getResultIndexById(array, id) {
   if (!array) {
     return null;
   }
-
   var result = getResultById(array, id);
-
   if (!result) {
     return null;
   }
-
   var index = array.indexOf(result);
   return index >= 0 ? index : null;
 };
-
 var adjustIndex = function adjustIndex(arrayLength, currentIndex, adjustment) {
   if (arrayLength === 0) {
     return null;
   }
-
   if (adjustment === 0) {
     return currentIndex;
-  } // If nothing is selected, select the element on the end
-
+  }
 
+  // If nothing is selected, select the element on the end
   if (currentIndex === null) {
     return adjustment > 0 ? 0 : arrayLength - 1;
-  } // Adjust current index, wrapping around if necessary
-
-
-  var adjustedIndex = (currentIndex + adjustment) % arrayLength; // Correct for negative indices
-
+  }
+  // Adjust current index, wrapping around if necessary
+  var adjustedIndex = (currentIndex + adjustment) % arrayLength;
+  // Correct for negative indices
   return adjustedIndex >= 0 ? adjustedIndex : adjustedIndex + arrayLength;
 };
-
 var QuickSearch = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(QuickSearch, _React$Component);
-
   var _super = _createSuper(QuickSearch);
-
   function QuickSearch(props) {
     var _this;
-
     (0, _classCallCheck2.default)(this, QuickSearch);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "flatResults", []);
@@ -124,15 +91,12 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
       var currentIndex = getResultIndexById(_this.flatResults, _this.state.selectedResultId);
       var newIndex = adjustIndex(_this.flatResults.length, currentIndex, adjustment);
       var selectedResultId = getResultIdByIndex(_this.flatResults, newIndex);
-
       _this.setState({
         selectedResultId: selectedResultId
       });
-
       if (selectedResultId) {
         _this.fireKeyboardControlEvent(selectedResultId);
       }
-
       if (_this.props.onSelectedResultIdChanged) {
         _this.props.onSelectedResultIdChanged(selectedResultId);
       }
@@ -150,7 +114,6 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleUnregisterResult", function (result) {
       var resultIndex = getResultIndexById(_this.flatResults, result.props.resultId);
-
       if (resultIndex !== null && +resultIndex >= 0) {
         _this.flatResults.splice(resultIndex, 1);
       }
@@ -167,37 +130,31 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchBlur", function (event) {
       _this.props.onSearchBlur(event);
-
       _this.setState({
         selectedResultId: null
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInput", function (event) {
       var onSearchInput = _this.props.onSearchInput;
-
       _this.setState({
         value: event.currentTarget.value
       });
-
       if (onSearchInput) {
         onSearchInput(event);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearchKeyDown", function (event) {
       var firePrivateAnalyticsEvent = _this.props.firePrivateAnalyticsEvent;
-
       _this.props.onSearchKeyDown(event);
+      _this.lastKeyPressed = event.key;
 
-      _this.lastKeyPressed = event.key; // Need to check for keyCode for up/down/enter in case user is composing using an IME
+      // Need to check for keyCode for up/down/enter in case user is composing using an IME
       // fixes https://ecosystem.atlassian.net/browse/DS-6518
-
       if (event.key === 'ArrowUp' && event.keyCode === (0, _keycode.default)('up')) {
         event.preventDefault(); // Don't move cursor around in search input field
-
         _this.selectPrevious();
       } else if (event.key === 'ArrowDown' && event.keyCode === (0, _keycode.default)('down')) {
         event.preventDefault(); // Don't move cursor around in search input field
-
         _this.selectNext();
       } else if (event.key === 'Enter' && event.keyCode === (0, _keycode.default)('enter')) {
         // shift key pressed or no result selected
@@ -210,21 +167,17 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
               method: 'shortcut'
             });
           }
-
           _this.props.onSearchSubmit(event);
         } else {
           event.preventDefault(); // Don't fire submit event from input
-
           var result = getResultById(_this.flatResults, _this.state.selectedResultId);
-
           if (!result || !result.props) {
             return;
-          } // Capture when users are using the keyboard to submit
-
+          }
 
+          // Capture when users are using the keyboard to submit
           if (typeof firePrivateAnalyticsEvent === 'function') {
             _this.fireKeyboardControlEvent(_this.state.selectedResultId);
-
             firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_SUBMIT, _objectSpread(_objectSpread({}, result.getAnalyticsData()), {}, {
               method: 'returnKey',
               newTab: false,
@@ -232,9 +185,7 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
               resultCount: _this.flatResults.length
             }));
           }
-
           var _preventDefault = false;
-
           if (result.props.onClick) {
             result.props.onClick({
               resultId: result.props.resultId,
@@ -247,18 +198,16 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
               })
             });
           }
-
           if (result.props.href && !_preventDefault) {
             window.location.assign(result.props.href);
           }
         }
       } else if (event.key === 'Tab' || event.key === 'ArrowRight') {
         var autocompleteText = _this.props.autocompleteText;
-
-        if (autocompleteText && autocompleteText.length > 0 && // multiple Tab or ArrowRight
+        if (autocompleteText && autocompleteText.length > 0 &&
+        // multiple Tab or ArrowRight
         autocompleteText.slice(-1) !== ' ') {
           _this.acceptAutocomplete(event, autocompleteText);
-
           event.preventDefault();
         }
       }
@@ -266,16 +215,13 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "acceptAutocomplete", function (event, text) {
       var onSearchInput = _this.props.onSearchInput;
       var newValue = "".concat(text, " ");
-
       if (_this.inputSearchRef) {
         _this.setState({
           value: newValue
-        }); // @ts-ignore unchecked
-
-
+        });
+        // @ts-ignore unchecked
         _this.inputSearchRef.value = newValue;
       }
-
       if (onSearchInput) {
         onSearchInput(event, true);
       }
@@ -286,7 +232,8 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusSearchInput", function () {
-      if (_this.inputSearchRef && // @ts-ignore unchecked
+      if (_this.inputSearchRef &&
+      // @ts-ignore unchecked
       typeof _this.inputSearchRef.focus === 'function') {
         // @ts-ignore unchecked
         _this.inputSearchRef.focus();
@@ -310,12 +257,10 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     };
     return _this;
   }
-
   (0, _createClass2.default)(QuickSearch, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
-
       if (firePrivateAnalyticsEvent) {
         firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_OPEN, {});
       }
@@ -324,7 +269,6 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
-
       if (firePrivateAnalyticsEvent) {
         firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_CLOSE, {});
       }
@@ -340,13 +284,12 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
         this.setState({
           selectedResultId: nextProps.selectedResultId || null
         });
-      } // keep context state in sync
-
+      }
 
+      // keep context state in sync
       var _this$state$context = this.state.context,
-          sendAnalytics = _this$state$context.sendAnalytics,
-          linkComponent = _this$state$context.linkComponent;
-
+        sendAnalytics = _this$state$context.sendAnalytics,
+        linkComponent = _this$state$context.linkComponent;
       if (sendAnalytics !== nextProps.firePrivateAnalyticsEvent || linkComponent !== nextProps.linkComponent) {
         this.setState({
           context: _objectSpread(_objectSpread({}, this.state.context), {}, {
@@ -355,17 +298,15 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
           })
         });
       }
+
       /**
        * Capture whether user needed to query in order to find their target result.
        * Only fire once per mount. Only fire when a search term is entered and the previous search
        * term was empty.
        */
-
-
       if (!this.hasSearchQueryEventFired && !this.props.value && nextProps.value) {
         this.hasSearchQueryEventFired = true;
         var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
-
         if (firePrivateAnalyticsEvent) {
           firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_QUERY_ENTERED, {});
         }
@@ -375,10 +316,8 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
     key: "fireKeyboardControlEvent",
     value: function fireKeyboardControlEvent(selectedResultId) {
       var firePrivateAnalyticsEvent = this.props.firePrivateAnalyticsEvent;
-
       if (firePrivateAnalyticsEvent) {
         var result = getResultById(this.flatResults, selectedResultId);
-
         if (result) {
           firePrivateAnalyticsEvent(_constants.QS_ANALYTICS_EV_KB_CTRLS_USED, _objectSpread(_objectSpread({}, result.getAnalyticsData()), {}, {
             key: this.lastKeyPressed,
@@ -386,9 +325,9 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
           }));
         }
       }
-
       this.lastKeyPressed = '';
     }
+
     /**
      * Uses the virtual list, this.flatResults, to move the selection across grouped results as if
      * results were in a single, circular list.
@@ -398,7 +337,6 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
      * 2. Increments or decrements this index by the supplied adjustment amount,
      * 3. Sets the new selectedResultId based on the modifed index
      */
-
   }, {
     key: "render",
     value: function render() {
@@ -427,8 +365,6 @@ var QuickSearch = /*#__PURE__*/function (_React$Component) {
  * `withAnalytics` - Injects analytics firing methods that are picked up by
  * @atlaskit/analytics/AnalyticsListener.
  */
-
-
 exports.QuickSearch = QuickSearch;
 (0, _defineProperty2.default)(QuickSearch, "defaultProps", {
   children: [],
@@ -440,8 +376,7 @@ exports.QuickSearch = QuickSearch;
   placeholder: 'Search',
   value: ''
 });
-
-var _default = (0, _decorateWithAnalyticsData.default)( // @ts-ignore
+var _default = (0, _decorateWithAnalyticsData.default)(
+// @ts-ignore
 (0, _analytics.withAnalytics)(QuickSearch, {}, {}));
-
 exports.default = _default;

package/dist/cjs/components/ResultItem/ResultItem.js

@@ -1,54 +1,33 @@
 "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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _item = _interopRequireWildcard(require("@atlaskit/item"));
-
 var _styled = require("./styled");
-
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var Item = (0, _item.withItemClick)((0, _item.withItemFocus)(_item.default));
-
 var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(ResultItem, _React$PureComponent);
-
   var _super = _createSuper(ResultItem);
-
   function ResultItem() {
     (0, _classCallCheck2.default)(this, ResultItem);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(ResultItem, [{
     key: "render",
     value: function render() {
@@ -78,7 +57,6 @@ var ResultItem = /*#__PURE__*/function (_React$PureComponent) {
   }]);
   return ResultItem;
 }(_react.default.PureComponent);
-
 (0, _defineProperty2.default)(ResultItem, "defaultProps", {
   isSelected: false,
   isMouseSelected: false

package/dist/cjs/components/ResultItem/ResultItemGroup.js

@@ -1,51 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _item = require("@atlaskit/item");
-
 var _styled = require("./styled");
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 var ResultItemGroup = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ResultItemGroup, _React$Component);
-
   var _super = _createSuper(ResultItemGroup);
-
   function ResultItemGroup() {
     (0, _classCallCheck2.default)(this, ResultItemGroup);
     return _super.apply(this, arguments);
   }
-
   (0, _createClass2.default)(ResultItemGroup, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          title = _this$props.title,
-          children = _this$props.children;
-
+        title = _this$props.title,
+        children = _this$props.children;
       var wrappedTitle = /*#__PURE__*/_react.default.createElement(_styled.ResultItemGroupHeader, null, /*#__PURE__*/_react.default.createElement(_styled.ResultItemGroupTitle, null, title));
-
       return /*#__PURE__*/_react.default.createElement(_item.ItemGroup, {
         title: wrappedTitle
       }, children);
@@ -53,5 +36,4 @@ var ResultItemGroup = /*#__PURE__*/function (_React$Component) {
   }]);
   return ResultItemGroup;
 }(_react.default.Component);
-
 exports.default = ResultItemGroup;

package/dist/cjs/components/ResultItem/styled.js

@@ -1,53 +1,30 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ResultItemTextAfter = exports.ResultItemSubText = exports.ResultItemIcon = exports.ResultItemGroupTitle = exports.ResultItemGroupHeader = exports.ResultItemCaption = exports.ResultItemAfterWrapper = exports.ResultItemAfter = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _constants = require("@atlaskit/theme/constants");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-
-var ResultItemGroupHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: -", "px;\n  margin-top: ", "px;\n"])), (0, _constants.gridSize)() * 1.5, (0, _constants.gridSize)() * 1.5);
-
+var ResultItemGroupHeader = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 exports.ResultItemGroupHeader = ResultItemGroupHeader;
-
-var ResultItemGroupTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 11px;\n  line-height: ", "px;\n  font-weight: 600;\n"])), (0, _constants.gridSize)() * 2);
-
+var ResultItemGroupTitle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 11px;\n  line-height: ", ";\n  font-weight: 600;\n"])), "var(--ds-font-lineHeight-100, 16px)");
 exports.ResultItemGroupTitle = ResultItemGroupTitle;
-
 var ResultItemAfter = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n"])), function (_ref) {
   var shouldTakeSpace = _ref.shouldTakeSpace;
   return shouldTakeSpace ? '24px' : 0;
 });
-
 exports.ResultItemAfter = ResultItemAfter;
-
 var ResultItemAfterWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
-
 exports.ResultItemAfterWrapper = ResultItemAfterWrapper;
-
-var ResultItemCaption = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 12px;\n  margin-left: ", "px;\n"])), _colors.N200, (0, _constants.gridSize)());
-
+var ResultItemCaption = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 12px;\n  margin-left: ", ";\n"])), _colors.N200, "var(--ds-space-100, 8px)");
 exports.ResultItemCaption = ResultItemCaption;
-
 var ResultItemSubText = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  color: ", ";\n"])), _colors.N200);
-
 exports.ResultItemSubText = ResultItemSubText;
-
-var ResultItemIcon = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: padding 200ms;\n\n  > * {\n    flex: 1 0 auto;\n  }\n\n  /* We need to ensure that any image passed in as a child (<img/>, <svg/>\n    etc.) receives the correct width, height and border radius. We don't\n    currently assume that the image passed in is the correct dimensions, or has\n    width / height 100% */\n  > img {\n    height: ", "px;\n    width: ", "px;\n  }\n"])), (0, _constants.gridSize)() * 3, (0, _constants.gridSize)() * 3);
-
+var ResultItemIcon = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  transition: padding 200ms;\n\n  > * {\n    flex: 1 0 auto;\n  }\n\n  /* We need to ensure that any image passed in as a child (<img/>, <svg/>\n    etc.) receives the correct width, height and border radius. We don't\n    currently assume that the image passed in is the correct dimensions, or has\n    width / height 100% */\n  > img {\n    height: ", ";\n    width: ", ";\n  }\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
 exports.ResultItemIcon = ResultItemIcon;
-
 var ResultItemTextAfter = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  z-index: 1;\n"])));
-
 exports.ResultItemTextAfter = ResultItemTextAfter;