@bonlineza/luxity-lib 2.39.4 → 2.39.6

package/LuxityDesktopHeader.js

@@ -1,1511 +1,1503 @@
-(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('axios'), require('styled-components')) :
-  typeof define === 'function' && define.amd ? define(['react', 'axios', 'styled-components'], factory) :
-  (global = global || self, global.LuxityDesktopHeader = factory(global.React, global.axios, global.styled));
-}(this, (function (React, axios, styled) { 'use strict';
-
-  var React__default = 'default' in React ? React['default'] : React;
-  axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
-  var styled__default = 'default' in styled ? styled['default'] : styled;
-
-  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;
+import React, { useState, useEffect, forwardRef, useRef, useCallback, useMemo } from 'react';
+import axios from 'axios';
+import styled, { css, ThemeProvider } from 'styled-components';
+
+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);
   }
 
-  function _objectSpread2(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) {
-        _defineProperty(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 keys;
+}
 
-    return target;
+function _objectSpread2(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) {
+      _defineProperty(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));
+    });
   }
 
-  function _defineProperty(obj, key, value) {
-    if (key in obj) {
-      Object.defineProperty(obj, key, {
-        value: value,
-        enumerable: true,
-        configurable: true,
-        writable: true
-      });
-    } else {
-      obj[key] = value;
-    }
+  return target;
+}
 
-    return obj;
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
   }
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
+  return obj;
+}
 
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
         }
       }
+    }
 
-      return target;
-    };
-    return _extends.apply(this, arguments);
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _taggedTemplateLiteral(strings, raw) {
+  if (!raw) {
+    raw = strings.slice(0);
   }
 
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  return Object.freeze(Object.defineProperties(strings, {
+    raw: {
+      value: Object.freeze(raw)
     }
+  }));
+}
 
-    return Object.freeze(Object.defineProperties(strings, {
-      raw: {
-        value: Object.freeze(raw)
-      }
-    }));
-  }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-  function _slicedToArray(arr, i) {
-    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-  }
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-  }
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-  }
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-  function _arrayWithHoles(arr) {
-    if (Array.isArray(arr)) return arr;
-  }
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
 
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
+function _iterableToArrayLimit(arr, i) {
+  var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
 
-  function _iterableToArrayLimit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+  if (_i == null) return;
+  var _arr = [];
+  var _n = true;
+  var _d = false;
 
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
+  var _s, _e;
 
-    var _s, _e;
+  try {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
+      _arr.push(_s.value);
 
+      if (i && _arr.length === i) break;
+    }
+  } catch (err) {
+    _d = true;
+    _e = err;
+  } finally {
     try {
-      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-        _arr.push(_s.value);
-
-        if (i && _arr.length === i) break;
-      }
-    } catch (err) {
-      _d = true;
-      _e = err;
+      if (!_n && _i["return"] != null) _i["return"]();
     } finally {
-      try {
-        if (!_n && _i["return"] != null) _i["return"]();
-      } finally {
-        if (_d) throw _e;
-      }
+      if (_d) throw _e;
     }
-
-    return _arr;
   }
 
-  function _unsupportedIterableToArray(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(o);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-  }
-
-  function _arrayLikeToArray(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-
-    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return _arr;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var Dropdown = function Dropdown(_ref) {
+  var title = _ref.title,
+      imageSrc = _ref.imageSrc,
+      _ref$categoryElements = _ref.categoryElements,
+      categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
+      _ref$brandElements = _ref.brandElements,
+      brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
+      productsUrl = _ref.productsUrl,
+      LinkComponent = _ref.LinkComponent,
+      categorySlug = _ref.categorySlug,
+      categoryTitle = _ref.categoryTitle,
+      isLoading = _ref.isLoading,
+      hasError = _ref.hasError,
+      onMenuItemClick = _ref.onMenuItemClick;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, hasError ? /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__errors"
+  }, "Failed to load data.") : /*#__PURE__*/React.createElement("div", {
+    className: "dropdown"
+  }, isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: "cover-spinner"
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__title"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__elements dropdown__elements--column"
+  }, !!categoryElements.length && categoryElements.map(function (categoryElement) {
+    return categoryElement.category ? /*#__PURE__*/React.createElement(LinkComponent, {
+      href: "".concat(productsUrl, "/").concat(categoryElement.category, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
+      className: "dropdown__element",
+      key: categoryElement.name,
+      onClick: onMenuItemClick
+    }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase()) : /*#__PURE__*/React.createElement(LinkComponent, {
+      href: "".concat(productsUrl, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
+      className: "dropdown__element",
+      key: categoryElement.name,
+      onClick: onMenuItemClick
+    }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase());
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__title"
+  }, "Brands"), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__brand-elements"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__brand-element"
+  }, /*#__PURE__*/React.createElement(LinkComponent, {
+    href: "".concat(productsUrl, "/").concat(categorySlug),
+    className: "dropdown__element",
+    onClick: onMenuItemClick
+  }, "All ", categoryTitle)), !!brandElements.length && brandElements.map(function (brand) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "dropdown__brand-element",
+      key: brand.name
+    }, /*#__PURE__*/React.createElement(LinkComponent, {
+      href: "".concat(productsUrl, "/").concat(categorySlug, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
+      className: "dropdown__element",
+      onClick: onMenuItemClick
+    }, brand === null || brand === void 0 ? void 0 : brand.name));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "dropdown__column"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    alt: "".concat(title)
+  })))));
+};
+
+var DropdownLink = function DropdownLink(_ref) {
+  var title = _ref.title,
+      imageSrc = _ref.imageSrc,
+      categoryElements = _ref.categoryElements,
+      brandElements = _ref.brandElements,
+      productsUrl = _ref.productsUrl,
+      LinkComponent = _ref.LinkComponent,
+      categorySlug = _ref.categorySlug,
+      categoryTitle = _ref.categoryTitle,
+      isLoading = _ref.isLoading,
+      hasError = _ref.hasError;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      dropdownVisible = _useState2[0],
+      setDropdownVisible = _useState2[1];
+
+  var handleMenuItemClick = function handleMenuItemClick() {
+    setDropdownVisible(false);
+  };
 
-    return arr2;
-  }
+  return /*#__PURE__*/React.createElement("li", {
+    className: "navbar__link",
+    onMouseEnter: function onMouseEnter() {
+      return setDropdownVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setDropdownVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(LinkComponent, {
+    href: "".concat(productsUrl, "/").concat(categorySlug),
+    className: "navbar__link-item navbar__link-item--desktop",
+    onClick: handleMenuItemClick
+  }, title), dropdownVisible && /*#__PURE__*/React.createElement("div", {
+    className: "navbar__dropdown"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    title: "Department",
+    imageSrc: imageSrc,
+    categoryElements: categoryElements,
+    brandElements: brandElements,
+    productsUrl: productsUrl,
+    categorySlug: categorySlug,
+    categoryTitle: categoryTitle,
+    isLoading: isLoading,
+    hasError: hasError,
+    onMenuItemClick: handleMenuItemClick,
+    LinkComponent: LinkComponent
+  })));
+};
+
+var StoresDropdown = function StoresDropdown(_ref) {
+  var _ref$stores = _ref.stores,
+      stores = _ref$stores === void 0 ? [] : _ref$stores,
+      contactNumber = _ref.contactNumber;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "stores-dropdown"
+  }, !!stores.length && stores.map(function (store) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__store-details",
+      key: store.title
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__store-image"
+    }, /*#__PURE__*/React.createElement("img", {
+      className: "stores-dropdown__image",
+      src: store.image,
+      alt: store.title
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__store-info"
+    }, /*#__PURE__*/React.createElement("h4", {
+      className: "stores-dropdown__title"
+    }, store.title, " ", /*#__PURE__*/React.createElement("br", null), " ", store.location), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-days"
+    }, store.regularOpenDays), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-hours"
+    }, store.regularOpenHours), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-days"
+    }, store.holidayOpenDays), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-hours"
+    }, store.holidayOpenHours), (store === null || store === void 0 ? void 0 : store.weekendOpenDays) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-days"
+    }, store.weekendOpenDays), /*#__PURE__*/React.createElement("div", {
+      className: "stores-dropdown__open-hours"
+    }, store.weekendOpenHours))));
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "stores-dropdown__queries"
+  }, /*#__PURE__*/React.createElement("h4", {
+    className: "stores-dropdown__queries-title"
+  }, "Customer Queries: "), /*#__PURE__*/React.createElement("a", {
+    className: "stores-dropdown__contact-details",
+    href: "tel:".concat(contactNumber)
+  }, contactNumber)));
+};
+
+var SearchResults = function SearchResults(_ref) {
+  var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
+
+  var searchValue = _ref.searchValue,
+      searchResults = _ref.searchResults,
+      onViewAll = _ref.onViewAll,
+      searchResultsRef = _ref.searchResultsRef,
+      onSearchSubmit = _ref.onSearchSubmit,
+      setSearchValue = _ref.setSearchValue,
+      initialSearchData = _ref.initialSearchData,
+      isSearchFocused = _ref.isSearchFocused,
+      setIsSearchFocused = _ref.setIsSearchFocused,
+      currency = _ref.currency,
+      currencySymbol = _ref.currencySymbol,
+      onProductSearchResultClick = _ref.onProductSearchResultClick,
+      onBrandSearchResultClick = _ref.onBrandSearchResultClick,
+      onCreateInterests = _ref.onCreateInterests,
+      noResultsImage = _ref.noResultsImage,
+      showNoResults = _ref.showNoResults,
+      _ref$isLoading = _ref.isLoading,
+      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+      _ref$showCreateIntere = _ref.showCreateInterest,
+      showCreateInterest = _ref$showCreateIntere === void 0 ? true : _ref$showCreateIntere;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isMobile = _useState2[0],
+      setIsMobile = _useState2[1];
+
+  useEffect(function () {
+    var checkIfMobile = function checkIfMobile() {
+      setIsMobile(window.innerWidth <= 1024);
+    };
 
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    checkIfMobile();
+    window.addEventListener('resize', checkIfMobile);
+    return function () {
+      window.removeEventListener('resize', checkIfMobile);
+    };
+  }, []);
+  var hasSearchBeenPerformed = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim().length) >= 3;
+  var hasResults = (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.length) > 0;
+  var hasInitialData = (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$tr = initialSearchData.trending_brands) === null || _initialSearchData$tr === void 0 ? void 0 : _initialSearchData$tr.length) > 0 || (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la = initialSearchData.latest_products) === null || _initialSearchData$la === void 0 ? void 0 : _initialSearchData$la.length) > 0;
+  var shouldShowInitialData = isSearchFocused && (!hasSearchBeenPerformed || !hasResults && !showNoResults);
+
+  if (!isSearchFocused) {
+    return null;
   }
 
-  function _nonIterableRest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  if (!hasResults && !hasInitialData && !showNoResults) {
+    return null;
   }
 
-  var Dropdown = function Dropdown(_ref) {
-    var title = _ref.title,
-        imageSrc = _ref.imageSrc,
-        _ref$categoryElements = _ref.categoryElements,
-        categoryElements = _ref$categoryElements === void 0 ? [] : _ref$categoryElements,
-        _ref$brandElements = _ref.brandElements,
-        brandElements = _ref$brandElements === void 0 ? [] : _ref$brandElements,
-        productsUrl = _ref.productsUrl,
-        LinkComponent = _ref.LinkComponent,
-        categorySlug = _ref.categorySlug,
-        categoryTitle = _ref.categoryTitle,
-        isLoading = _ref.isLoading,
-        hasError = _ref.hasError,
-        onMenuItemClick = _ref.onMenuItemClick;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, hasError ? /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__errors"
-    }, "Failed to load data.") : /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown"
-    }, isLoading ? /*#__PURE__*/React__default.createElement("div", {
-      className: "cover-spinner"
-    }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__title"
-    }, title), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__elements dropdown__elements--column"
-    }, !!categoryElements.length && categoryElements.map(function (categoryElement) {
-      return categoryElement.category ? /*#__PURE__*/React__default.createElement(LinkComponent, {
-        href: "".concat(productsUrl, "/").concat(categoryElement.category, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
-        className: "dropdown__element",
-        key: categoryElement.name,
-        onClick: onMenuItemClick
-      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase()) : /*#__PURE__*/React__default.createElement(LinkComponent, {
-        href: "".concat(productsUrl, "/").concat(categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.slug),
-        className: "dropdown__element",
-        key: categoryElement.name,
-        onClick: onMenuItemClick
-      }, categoryElement === null || categoryElement === void 0 ? void 0 : categoryElement.name.toLowerCase());
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__title"
-    }, "Brands"), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__brand-elements"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__brand-element"
-    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-      href: "".concat(productsUrl, "/").concat(categorySlug),
-      className: "dropdown__element",
-      onClick: onMenuItemClick
-    }, "All ", categoryTitle)), !!brandElements.length && brandElements.map(function (brand) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "dropdown__brand-element",
-        key: brand.name
-      }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-        href: "".concat(productsUrl, "/").concat(categorySlug, "/").concat(brand === null || brand === void 0 ? void 0 : brand.slug),
-        className: "dropdown__element",
-        onClick: onMenuItemClick
-      }, brand === null || brand === void 0 ? void 0 : brand.name));
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "dropdown__column"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: imageSrc,
-      alt: "".concat(title)
-    })))));
+  var formatPrice = function formatPrice(price) {
+    var formatter = new Intl.NumberFormat(undefined, {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2
+    });
+    return "".concat(currencySymbol).concat(formatter.format(price));
   };
 
-  var DropdownLink = function DropdownLink(_ref) {
-    var title = _ref.title,
-        imageSrc = _ref.imageSrc,
-        categoryElements = _ref.categoryElements,
-        brandElements = _ref.brandElements,
-        productsUrl = _ref.productsUrl,
-        LinkComponent = _ref.LinkComponent,
-        categorySlug = _ref.categorySlug,
-        categoryTitle = _ref.categoryTitle,
-        isLoading = _ref.isLoading,
-        hasError = _ref.hasError;
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        dropdownVisible = _useState2[0],
-        setDropdownVisible = _useState2[1];
-
-    var handleMenuItemClick = function handleMenuItemClick() {
-      setDropdownVisible(false);
-    };
-
-    return /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link",
-      onMouseEnter: function onMouseEnter() {
-        return setDropdownVisible(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setDropdownVisible(false);
-      }
-    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-      href: "".concat(productsUrl, "/").concat(categorySlug),
-      className: "navbar__link-item navbar__link-item--desktop",
-      onClick: handleMenuItemClick
-    }, title), dropdownVisible && /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(Dropdown, {
-      title: "Department",
-      imageSrc: imageSrc,
-      categoryElements: categoryElements,
-      brandElements: brandElements,
-      productsUrl: productsUrl,
-      categorySlug: categorySlug,
-      categoryTitle: categoryTitle,
-      isLoading: isLoading,
-      hasError: hasError,
-      onMenuItemClick: handleMenuItemClick,
-      LinkComponent: LinkComponent
-    })));
+  var renderBrandSkeleton = function renderBrandSkeleton() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "brand-skeleton"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "brand-skeleton__item shimmer"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "brand-skeleton__item shimmer"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "brand-skeleton__item shimmer"
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "brand-skeleton__item shimmer"
+    }));
   };
 
-  var StoresDropdown = function StoresDropdown(_ref) {
-    var _ref$stores = _ref.stores,
-        stores = _ref$stores === void 0 ? [] : _ref$stores,
-        contactNumber = _ref.contactNumber;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "stores-dropdown"
-    }, !!stores.length && stores.map(function (store) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-details",
-        key: store.title
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-image"
-      }, /*#__PURE__*/React__default.createElement("img", {
-        className: "stores-dropdown__image",
-        src: store.image,
-        alt: store.title
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__store-info"
-      }, /*#__PURE__*/React__default.createElement("h4", {
-        className: "stores-dropdown__title"
-      }, store.title, " ", /*#__PURE__*/React__default.createElement("br", null), " ", store.location), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.regularOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.regularOpenHours), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.holidayOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.holidayOpenHours), (store === null || store === void 0 ? void 0 : store.weekendOpenDays) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-days"
-      }, store.weekendOpenDays), /*#__PURE__*/React__default.createElement("div", {
-        className: "stores-dropdown__open-hours"
-      }, store.weekendOpenHours))));
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "stores-dropdown__queries"
-    }, /*#__PURE__*/React__default.createElement("h4", {
-      className: "stores-dropdown__queries-title"
-    }, "Customer Queries: "), /*#__PURE__*/React__default.createElement("a", {
-      className: "stores-dropdown__contact-details",
-      href: "tel:".concat(contactNumber)
-    }, contactNumber)));
+  var renderProductSkeleton = function renderProductSkeleton() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index,
+        className: "product-skeleton"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "product-skeleton__image shimmer"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "product-skeleton__content"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "product-skeleton__title shimmer"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "product-skeleton__subtitle shimmer"
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "product-skeleton__price shimmer"
+      })));
+    }));
   };
 
-  var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la;
-
-    var searchValue = _ref.searchValue,
-        searchResults = _ref.searchResults,
-        onViewAll = _ref.onViewAll,
-        searchResultsRef = _ref.searchResultsRef,
-        onSearchSubmit = _ref.onSearchSubmit,
-        setSearchValue = _ref.setSearchValue,
-        initialSearchData = _ref.initialSearchData,
-        isSearchFocused = _ref.isSearchFocused,
-        setIsSearchFocused = _ref.setIsSearchFocused,
-        currency = _ref.currency,
-        currencySymbol = _ref.currencySymbol,
-        onProductSearchResultClick = _ref.onProductSearchResultClick,
-        onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onCreateInterests = _ref.onCreateInterests,
-        noResultsImage = _ref.noResultsImage,
-        showNoResults = _ref.showNoResults,
-        _ref$isLoading = _ref.isLoading,
-        isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
-        _ref$showCreateIntere = _ref.showCreateInterest,
-        showCreateInterest = _ref$showCreateIntere === void 0 ? true : _ref$showCreateIntere;
-
-    var _useState = React.useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        isMobile = _useState2[0],
-        setIsMobile = _useState2[1];
-
-    React.useEffect(function () {
-      var checkIfMobile = function checkIfMobile() {
-        setIsMobile(window.innerWidth <= 1024);
-      };
-
-      checkIfMobile();
-      window.addEventListener('resize', checkIfMobile);
-      return function () {
-        window.removeEventListener('resize', checkIfMobile);
-      };
-    }, []);
-    var hasSearchBeenPerformed = (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim().length) >= 3;
-    var hasResults = (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.length) > 0;
-    var hasInitialData = (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$tr = initialSearchData.trending_brands) === null || _initialSearchData$tr === void 0 ? void 0 : _initialSearchData$tr.length) > 0 || (initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la = initialSearchData.latest_products) === null || _initialSearchData$la === void 0 ? void 0 : _initialSearchData$la.length) > 0;
-    var shouldShowInitialData = isSearchFocused && (!hasSearchBeenPerformed || !hasResults && !showNoResults);
-
-    if (!isSearchFocused) {
-      return null;
-    }
-
-    if (!hasResults && !hasInitialData && !showNoResults) {
-      return null;
-    }
-
-    var formatPrice = function formatPrice(price) {
-      var formatter = new Intl.NumberFormat(undefined, {
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 2
-      });
-      return "".concat(currencySymbol).concat(formatter.format(price));
-    };
-
-    var renderBrandSkeleton = function renderBrandSkeleton() {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "brand-skeleton"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "brand-skeleton__item shimmer"
-      }), /*#__PURE__*/React__default.createElement("div", {
-        className: "brand-skeleton__item shimmer"
-      }), /*#__PURE__*/React__default.createElement("div", {
-        className: "brand-skeleton__item shimmer"
-      }), /*#__PURE__*/React__default.createElement("div", {
-        className: "brand-skeleton__item shimmer"
-      }));
-    };
-
-    var renderProductSkeleton = function renderProductSkeleton() {
-      return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, _toConsumableArray(Array(3)).map(function (_, index) {
-        return /*#__PURE__*/React__default.createElement("div", {
-          key: index,
-          className: "product-skeleton"
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "product-skeleton__image shimmer"
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "product-skeleton__content"
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "product-skeleton__title shimmer"
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "product-skeleton__subtitle shimmer"
-        }), /*#__PURE__*/React__default.createElement("div", {
-          className: "product-skeleton__price shimmer"
-        })));
-      }));
+  var renderProductCard = function renderProductCard(product) {
+    var selectedPrice = product.prices ? product.prices.find(function (p) {
+      return p.currency === currency;
+    }) : {
+      price: product.price,
+      retail_price: product.est_retail_price
     };
-
-    var renderProductCard = function renderProductCard(product) {
-      var selectedPrice = product.prices ? product.prices.find(function (p) {
-        return p.currency === currency;
-      }) : {
-        price: product.price,
-        retail_price: product.est_retail_price
-      };
-      var displayPrice = product.on_promotion && product.promotion_price ? product.promotion_price : selectedPrice.price;
-      var hasPromotion = product.on_promotion && product.promotion_price;
-      return /*#__PURE__*/React__default.createElement("a", {
-        key: product.link,
-        href: product.link,
-        className: "product-card",
-        onClick: function onClick() {
-          if (typeof onProductSearchResultClick === 'function') {
-            onProductSearchResultClick({
-              product_name: product.name,
-              product_brand: product.brand,
-              product_link: product.link,
-              search_string: searchValue,
-              is_popular: shouldShowInitialData
-            });
-          }
+    var displayPrice = product.on_promotion && product.promotion_price ? product.promotion_price : selectedPrice.price;
+    var hasPromotion = product.on_promotion && product.promotion_price;
+    return /*#__PURE__*/React.createElement("a", {
+      key: product.link,
+      href: product.link,
+      className: "product-card",
+      onClick: function onClick() {
+        if (typeof onProductSearchResultClick === 'function') {
+          onProductSearchResultClick({
+            product_name: product.name,
+            product_brand: product.brand,
+            product_link: product.link,
+            search_string: searchValue,
+            is_popular: shouldShowInitialData
+          });
         }
-      }, product.featured_image && /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__image-container"
-      }, /*#__PURE__*/React__default.createElement("img", {
-        src: product.featured_image,
-        alt: product.name,
-        className: "product-card__image"
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__details"
-      }, /*#__PURE__*/React__default.createElement("h3", {
-        className: "product-card__name"
-      }, shouldShowInitialData ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
-        className: "product-card__brand-name"
-      }, product.brand.toUpperCase()), ' ', product.name) : /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
-        className: "product-card__brand-name"
-      }, product.brand.toUpperCase()), ' ', product.name)), /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__info-row"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__price-group"
-      }, hasPromotion ? /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__price-with-promotion"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__price product-card__price--promotion"
-      }, formatPrice(displayPrice)), /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__price product-card__price--original"
-      }, formatPrice(selectedPrice.price))) : /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__price"
-      }, formatPrice(displayPrice)), selectedPrice.retail_price > 1 && selectedPrice.retail_price > displayPrice && /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__retail-price"
-      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), product.condition && /*#__PURE__*/React__default.createElement("div", {
-        className: "product-card__condition"
-      }, /*#__PURE__*/React__default.createElement("span", {
-        className: "product-card__condition-label"
-      }, "Condition:"), product.condition))));
-    };
+      }
+    }, product.featured_image && /*#__PURE__*/React.createElement("div", {
+      className: "product-card__image-container"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: product.featured_image,
+      alt: product.name,
+      className: "product-card__image"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "product-card__details"
+    }, /*#__PURE__*/React.createElement("h3", {
+      className: "product-card__name"
+    }, shouldShowInitialData ? /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: "product-card__brand-name"
+    }, product.brand.toUpperCase()), ' ', product.name) : /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
+      className: "product-card__brand-name"
+    }, product.brand.toUpperCase()), ' ', product.name)), /*#__PURE__*/React.createElement("div", {
+      className: "product-card__info-row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "product-card__price-group"
+    }, hasPromotion ? /*#__PURE__*/React.createElement("div", {
+      className: "product-card__price-with-promotion"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "product-card__price product-card__price--promotion"
+    }, formatPrice(displayPrice)), /*#__PURE__*/React.createElement("div", {
+      className: "product-card__price product-card__price--original"
+    }, formatPrice(selectedPrice.price))) : /*#__PURE__*/React.createElement("div", {
+      className: "product-card__price"
+    }, formatPrice(displayPrice)), selectedPrice.retail_price > 1 && selectedPrice.retail_price > displayPrice && /*#__PURE__*/React.createElement("div", {
+      className: "product-card__retail-price"
+    }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), product.condition && /*#__PURE__*/React.createElement("div", {
+      className: "product-card__condition"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "product-card__condition-label"
+    }, "Condition:"), product.condition))));
+  };
 
-    var getBrandLink = function getBrandLink(brand) {
-      return "/products/brands/".concat(brand.slug);
-    };
+  var getBrandLink = function getBrandLink(brand) {
+    return "/products/brands/".concat(brand.slug);
+  };
 
-    var limitBrands = function limitBrands(brands) {
-      if (isMobile && brands && brands.length > 4) {
-        return brands.slice(0, 4);
-      }
+  var limitBrands = function limitBrands(brands) {
+    if (isMobile && brands && brands.length > 4) {
+      return brands.slice(0, 4);
+    }
 
-      return brands;
-    };
+    return brands;
+  };
 
-    var renderBrandsList = function renderBrandsList() {
-      var _limitBrands2;
+  var renderBrandsList = function renderBrandsList() {
+    var _limitBrands2;
 
-      if (isLoading) {
-        return renderBrandSkeleton();
-      }
+    if (isLoading) {
+      return renderBrandSkeleton();
+    }
 
-      if (shouldShowInitialData) {
-        var _limitBrands;
-
-        return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
-          return /*#__PURE__*/React__default.createElement("a", {
-            key: brand.id,
-            href: getBrandLink(brand),
-            className: "search-results__item",
-            onClick: function onClick() {
-              if (typeof onBrandSearchResultClick === 'function') {
-                onBrandSearchResultClick({
-                  brand_name: brand.name,
-                  brand_link: getBrandLink(brand),
-                  search_string: searchValue,
-                  is_trending: true
-                });
-              }
-            }
-          }, brand.name);
-        });
-      }
+    if (shouldShowInitialData) {
+      var _limitBrands;
 
-      return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
-        return /*#__PURE__*/React__default.createElement("a", {
-          key: brand.link,
-          href: brand.link,
+      return (_limitBrands = limitBrands(initialSearchData === null || initialSearchData === void 0 ? void 0 : initialSearchData.trending_brands)) === null || _limitBrands === void 0 ? void 0 : _limitBrands.map(function (brand) {
+        return /*#__PURE__*/React.createElement("a", {
+          key: brand.id,
+          href: getBrandLink(brand),
           className: "search-results__item",
           onClick: function onClick() {
             if (typeof onBrandSearchResultClick === 'function') {
               onBrandSearchResultClick({
                 brand_name: brand.name,
-                brand_link: brand.link,
+                brand_link: getBrandLink(brand),
                 search_string: searchValue,
-                is_trending: false
+                is_trending: true
               });
             }
           }
         }, brand.name);
       });
-    };
+    }
 
-    var renderProductsList = function renderProductsList() {
-      var _searchResults$produc2;
+    return (_limitBrands2 = limitBrands(searchResults === null || searchResults === void 0 ? void 0 : searchResults.brands)) === null || _limitBrands2 === void 0 ? void 0 : _limitBrands2.map(function (brand) {
+      return /*#__PURE__*/React.createElement("a", {
+        key: brand.link,
+        href: brand.link,
+        className: "search-results__item",
+        onClick: function onClick() {
+          if (typeof onBrandSearchResultClick === 'function') {
+            onBrandSearchResultClick({
+              brand_name: brand.name,
+              brand_link: brand.link,
+              search_string: searchValue,
+              is_trending: false
+            });
+          }
+        }
+      }, brand.name);
+    });
+  };
 
-      if (isLoading) {
-        return renderProductSkeleton();
-      }
+  var renderProductsList = function renderProductsList() {
+    var _searchResults$produc2;
 
-      if (shouldShowInitialData) {
-        var _initialSearchData$la2;
+    if (isLoading) {
+      return renderProductSkeleton();
+    }
 
-        return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
-      }
+    if (shouldShowInitialData) {
+      var _initialSearchData$la2;
 
-      return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
-    }; // Show no results state
-
-
-    if (showNoResults) {
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "search-results",
-        ref: searchResultsRef
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "search-results__no-results"
-      }, /*#__PURE__*/React__default.createElement("h2", {
-        className: "search-results__header"
-      }, "TOP MATCHES"), /*#__PURE__*/React__default.createElement("div", {
-        className: "search-results__no-results-content"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "search-results__no-results-image"
-      }, /*#__PURE__*/React__default.createElement("img", {
-        src: noResultsImage,
-        alt: "No results"
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "search-results__no-results-text"
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "search-results__no-results-title"
-      }, "There are currently no products in stock that match your selection"), showCreateInterest && /*#__PURE__*/React__default.createElement("p", {
-        className: "search-results__no-results-description"
-      }, "Create an interest now and receive instant notifications as your interests list."))), showCreateInterest && /*#__PURE__*/React__default.createElement("button", {
-        type: "button",
-        className: "search-results__create-interest-button",
-        onClick: onCreateInterests
-      }, "Create Interests")));
+      return initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard);
     }
 
-    return /*#__PURE__*/React__default.createElement("div", {
+    return searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard);
+  }; // Show no results state
+
+
+  if (showNoResults) {
+    return /*#__PURE__*/React.createElement("div", {
       className: "search-results",
       ref: searchResultsRef
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "search-results__section"
-    }, /*#__PURE__*/React__default.createElement("h2", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-results__no-results"
+    }, /*#__PURE__*/React.createElement("h2", {
       className: "search-results__header"
-    }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
-      className: "search-results__list"
-    }, renderBrandsList())), /*#__PURE__*/React__default.createElement("div", {
-      className: "search-results__section"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "search-results__section-header"
-    }, /*#__PURE__*/React__default.createElement("h2", {
-      className: "search-results__header"
-    }, shouldShowInitialData ? 'POPULAR' : 'TOP MATCHES'), /*#__PURE__*/React__default.createElement("button", {
+    }, "TOP MATCHES"), /*#__PURE__*/React.createElement("div", {
+      className: "search-results__no-results-content"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "search-results__no-results-image"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: noResultsImage,
+      alt: "No results"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "search-results__no-results-text"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "search-results__no-results-title"
+    }, "There are currently no products in stock that match your selection"), showCreateInterest && /*#__PURE__*/React.createElement("p", {
+      className: "search-results__no-results-description"
+    }, "Create an interest now and receive instant notifications as your interests list."))), showCreateInterest && /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: "search-results__view-all-link",
-      onClick: function onClick() {
-        onViewAll();
-      }
-    }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
-      className: "search-results__product-list"
-    }, renderProductsList()), /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "search-results__view-all-button",
-      onClick: function onClick() {
-        onViewAll();
+      className: "search-results__create-interest-button",
+      onClick: onCreateInterests
+    }, "Create Interests")));
+  }
 
-        if (!shouldShowInitialData) {
-          onSearchSubmit(searchValue);
-          setSearchValue('');
-          setIsSearchFocused(false);
-        }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "search-results",
+    ref: searchResultsRef
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "search-results__section"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "search-results__header"
+  }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React.createElement("div", {
+    className: "search-results__list"
+  }, renderBrandsList())), /*#__PURE__*/React.createElement("div", {
+    className: "search-results__section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "search-results__section-header"
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: "search-results__header"
+  }, shouldShowInitialData ? 'POPULAR' : 'TOP MATCHES'), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "search-results__view-all-link",
+    onClick: function onClick() {
+      onViewAll();
+    }
+  }, "View all items")), /*#__PURE__*/React.createElement("div", {
+    className: "search-results__product-list"
+  }, renderProductsList()), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "search-results__view-all-button",
+    onClick: function onClick() {
+      onViewAll();
+
+      if (!shouldShowInitialData) {
+        onSearchSubmit(searchValue);
+        setSearchValue('');
+        setIsSearchFocused(false);
       }
-    }, "View all items")));
-  };
+    }
+  }, "View all items")));
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+/* position relative is required for the Body element to be positioned correctly */
+
+var relativeInlineStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var topMiddleBodyStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
+var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+};
+var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+};
+var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
+  return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
+};
+
+var _templateObject$1;
+
+var getBodyStyle = function getBodyStyle() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _props$$toolTipPositi = props.$toolTipPosition,
+      $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+
+  switch ($toolTipPosition) {
+    case 'top':
+      return topMiddleBodyStyle;
+
+    case 'bottom':
+      return getBottomMiddleBodyStyle(props);
+
+    default:
+      return null;
+  }
+};
 
-  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-  /* position relative is required for the Body element to be positioned correctly */
+var getAfterStyling = function getAfterStyling() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var $toolTipPosition = props.$toolTipPosition;
 
-  var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-  var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
-  var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
-  };
-  var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
-  };
-  var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
-  };
+  switch ($toolTipPosition) {
+    case 'top':
+      return getTopMiddleArrowAfterStyle(props);
 
-  var _templateObject$1;
+    case 'bottom':
+      return getBottomMiddleArrowAfterStyle(props);
 
-  var getBodyStyle = function getBodyStyle() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    default:
+      return '';
+  }
+};
+
+var Body = styled.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
+  return props.$bodyWidth;
+}, function (props) {
+  return props.theme.colors.base || 'black';
+}, function (props) {
+  return getBodyStyle(props);
+}, function (props) {
+  return getAfterStyling(props);
+});
+
+var _templateObject$2;
+var Container = styled.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
+
+var theme = {
+  breakpoints: ['40em', '52em', '64em'],
+  space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
+  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
+  marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
+  letterSpacings: ['-0.5px', '0px', '+0.5px'],
+  radii: ['0px', '2px', '4px', '8px'],
+  borderRadius: '6px',
+  colors: {
+    primary: '#000',
+    base: '#4e4949',
+    baseLt: '#817c7c',
+    borderColor: '#d8d8d8',
+    ntrlMin: '#fff',
+    ntrlMinTen: '#e6e6e6',
+    gray: '#efefef',
+    darkerGray: '#454141'
+  },
+  rareStepColors: {
+    primary: '#202b58',
+    secondary: '#ef5c2d',
+    ntrlMin: '#ffffff',
+    ntrl40: '#f4f4f4',
+    ntrl50: '#808080',
+    ntrl60: '#e8e8e8',
+    ntrl70: '#252525',
+    ntrlMax: '#000000'
+  },
+  rareStepFontWeights: {
+    normal: 400,
+    medium: 500,
+    semiBold: 600,
+    bold: 700
+  },
+  rareStepFontSize: {
+    h1: '36px',
+    h2: '30px',
+    h3: '24px',
+    h4: '20px',
+    h5: '16px',
+    h6: '14px',
+    footerTitle: '16px'
+  },
+  rareStepPageSizes: {
+    mobile: '500px',
+    tablet: '768px',
+    desktop: '992px',
+    screenl: '1280px',
+    screenxl: '1680px',
+    screenxxl: '1920px',
+    container: '1600px'
+  }
+};
+
+var themed = (function (Component) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(Component, _extends({}, props, {
+      ref: ref
+    })));
+  });
+});
+
+/* eslint-disable react/require-default-props */
+
+var Tooltip = function Tooltip(_ref) {
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children,
+      _ref$toolTipText = _ref.toolTipText,
+      toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
+      _ref$toolTipPosition = _ref.toolTipPosition,
+      toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
+      _ref$bodyWidth = _ref.bodyWidth,
+      bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
+      _ref$apexWidth = _ref.apexWidth,
+      apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
+      _ref$containerClassNa = _ref.containerClassName,
+      containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
+      _ref$bodyClassName = _ref.bodyClassName,
+      bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: containerClassName
+  }, children, /*#__PURE__*/React.createElement(Body, {
+    $toolTipPosition: toolTipPosition,
+    $bodyWidth: bodyWidth,
+    $apexWidth: apexWidth,
+    className: bodyClassName
+  }, toolTipText));
+};
+
+var Tooltip$1 = themed(Tooltip);
+
+var CurrencySelect = function CurrencySelect(_ref) {
+  var currency = _ref.currency,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
+      isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
+      _ref$tooltipContent = _ref.tooltipContent,
+      tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
+
+  if (!currencyOptions || currencyOptions.length === 0) {
+    return null;
+  }
 
-    switch ($toolTipPosition) {
-      case 'top':
-        return topMiddleBodyStyle;
+  var selectedOption = currencyOptions.find(function (opt) {
+    return opt.value === currency;
+  });
 
-      case 'bottom':
-        return getBottomMiddleBodyStyle(props);
+  if (!selectedOption) {
+    return null;
+  }
 
-      default:
-        return null;
+  return /*#__PURE__*/React.createElement(Tooltip$1, {
+    toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
+    toolTipPosition: "bottom",
+    bodyWidth: "160px"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "currency-flag"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: selectedOption.flagSrc,
+    alt: "".concat(currency, " flag")
+  })), /*#__PURE__*/React.createElement("select", {
+    value: currency,
+    onChange: function onChange(e) {
+      return onCurrencyChange(e.target.value);
+    },
+    className: "currency-select",
+    disabled: isCurrencySelectionDisabled
+  }, currencyOptions.map(function (option) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.value, " (", option.symbol, ")");
+  }))));
+};
+
+var searchBrandsAggregations = function searchBrandsAggregations(search, currencyCode) {
+  return {
+    query: "\n      query GetProductFilterAggregations($search: String!) {\n        luxity_products_aggregations(search: $search) {\n          luxity_brand {\n            name\n          }\n        }\n      }\n    ",
+    variables: {
+      search: search,
+      currency_code: currencyCode
     }
   };
-
-  var getAfterStyling = function getAfterStyling() {
-    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
-
-    switch ($toolTipPosition) {
-      case 'top':
-        return getTopMiddleArrowAfterStyle(props);
-
-      case 'bottom':
-        return getBottomMiddleArrowAfterStyle(props);
-
-      default:
-        return '';
+}; // NEW: Get top products for search dropdown (right side)
+
+var searchProductsFilter = function searchProductsFilter(search, limit, currencyCode) {
+  return {
+    query: "\n      query LUXITY_PRODUCTS_FILTER(\n        $search: String!\n        $limit: Int!\n        $page: Int!\n        $sort_by: String!\n        $with_sold: Boolean!\n        $currency_code: String!\n      ) {\n        luxity_products_filter(\n          search: $search\n          limit: $limit\n          page: $page\n          sort_by: $sort_by\n          with_sold: $with_sold\n        ) {\n          data {\n            id\n            product {\n              sku\n              name\n              price(currency_code: $currency_code)\n              promotion_price(currency_code: $currency_code)\n              est_retail_price(currency_code: $currency_code)\n              condition\n              currency_symbol(currency_code: $currency_code)\n            }\n            product_slug\n            category_type\n            gender\n            status\n            featured_image\n            on_promotion\n            promotion_discount\n            luxity_brand {\n              id\n              name\n              slug\n            }\n          }\n          total\n        }\n      }\n    ",
+    variables: {
+      search: search,
+      limit: limit,
+      page: 1,
+      sort_by: 'newest',
+      with_sold: false,
+      currency_code: currencyCode
     }
   };
+};
+
+var useSearch = function useSearch(_ref) {
+  var endpoint = _ref.endpoint,
+      onSearchLoading = _ref.onSearchLoading,
+      currency = _ref.currency,
+      onSearchPreview = _ref.onSearchPreview,
+      onNoResults = _ref.onNoResults;
+  var currentSearchRequestToken = useRef(null);
+  var debounce = useCallback(function (func, wait) {
+    var timeout;
+    return function executedFunction() {
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
 
-  var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
-  }, function (props) {
-    return props.theme.colors.base || 'black';
-  }, function (props) {
-    return getBodyStyle(props);
-  }, function (props) {
-    return getAfterStyling(props);
-  });
-
-  var _templateObject$2;
-  var Container = styled__default.div(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", ";\n  cursor: pointer;\n  &:hover ", " {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), relativeInlineStyle, Body);
-
-  var theme = {
-    breakpoints: ['40em', '52em', '64em'],
-    space: ['0px', '4px', '8px', '16px', '32px', '64px', '128px', '256px', '512px'],
-    fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '48px', '64px', '72px'],
-    marginPaddings: ['0.5rem', '1rem', '1.5rem', '2rem', '2.5rem', '3rem', '3.5rem', '4rem', '4.5rem', '5rem', '5.5rem', '6rem'],
-    letterSpacings: ['-0.5px', '0px', '+0.5px'],
-    radii: ['0px', '2px', '4px', '8px'],
-    borderRadius: '6px',
-    colors: {
-      primary: '#000',
-      base: '#4e4949',
-      baseLt: '#817c7c',
-      borderColor: '#d8d8d8',
-      ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6',
-      gray: '#efefef',
-      darkerGray: '#454141'
-    },
-    rareStepColors: {
-      primary: '#202b58',
-      secondary: '#ef5c2d',
-      ntrlMin: '#ffffff',
-      ntrl40: '#f4f4f4',
-      ntrl50: '#808080',
-      ntrl60: '#e8e8e8',
-      ntrl70: '#252525',
-      ntrlMax: '#000000'
-    },
-    rareStepFontWeights: {
-      normal: 400,
-      medium: 500,
-      semiBold: 600,
-      bold: 700
-    },
-    rareStepFontSize: {
-      h1: '36px',
-      h2: '30px',
-      h3: '24px',
-      h4: '20px',
-      h5: '16px',
-      h6: '14px',
-      footerTitle: '16px'
-    },
-    rareStepPageSizes: {
-      mobile: '500px',
-      tablet: '768px',
-      desktop: '992px',
-      screenl: '1280px',
-      screenxl: '1680px',
-      screenxxl: '1920px',
-      container: '1600px'
-    }
-  };
+      var later = function later() {
+        clearTimeout(timeout);
+        func.apply(void 0, args);
+      };
 
-  var themed = (function (Component) {
-    return /*#__PURE__*/React.forwardRef(function (props, ref) {
-      return /*#__PURE__*/React__default.createElement(styled.ThemeProvider, {
-        theme: theme
-      }, /*#__PURE__*/React__default.createElement(Component, _extends({}, props, {
-        ref: ref
-      })));
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    };
+  }, []);
+  var fetchInitialSearchData = useCallback(function (initialSearchDataUrl, setInitialSearchView) {
+    axios.get("".concat(initialSearchDataUrl)).then(function (_ref2) {
+      var data = _ref2.data;
+      setInitialSearchView({
+        trending_brands: data.trending_brands,
+        latest_products: data.latest_products
+      });
+    }).catch(function () {
+      setInitialSearchView({
+        trending_brands: [],
+        latest_products: []
+      });
     });
-  });
+  }, []);
+  var performSearch = useCallback(function (searchQuery, setSearchResults) {
+    if (!searchQuery || searchQuery.trim() === '') {
+      setSearchResults({
+        brands: [],
+        products: []
+      }); // Reset no results state when clearing search
 
-  /* eslint-disable react/require-default-props */
-
-  var Tooltip = function Tooltip(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$toolTipText = _ref.toolTipText,
-        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
-        _ref$toolTipPosition = _ref.toolTipPosition,
-        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
-        _ref$bodyWidth = _ref.bodyWidth,
-        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
-        _ref$apexWidth = _ref.apexWidth,
-        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
-        _ref$containerClassNa = _ref.containerClassName,
-        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
-        _ref$bodyClassName = _ref.bodyClassName,
-        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
-    return /*#__PURE__*/React__default.createElement(Container, {
-      className: containerClassName
-    }, children, /*#__PURE__*/React__default.createElement(Body, {
-      $toolTipPosition: toolTipPosition,
-      $bodyWidth: bodyWidth,
-      $apexWidth: apexWidth,
-      className: bodyClassName
-    }, toolTipText));
-  };
+      if (typeof onNoResults === 'function') {
+        onNoResults(false);
+      }
 
-  var Tooltip$1 = themed(Tooltip);
+      return;
+    } // Cancel any ongoing search request to prevent race conditions
 
-  var CurrencySelect = function CurrencySelect(_ref) {
-    var currency = _ref.currency,
-        currencyOptions = _ref.currencyOptions,
-        onCurrencyChange = _ref.onCurrencyChange,
-        _ref$isCurrencySelect = _ref.isCurrencySelectionDisabled,
-        isCurrencySelectionDisabled = _ref$isCurrencySelect === void 0 ? false : _ref$isCurrencySelect,
-        _ref$tooltipContent = _ref.tooltipContent,
-        tooltipContent = _ref$tooltipContent === void 0 ? '' : _ref$tooltipContent;
 
-    if (!currencyOptions || currencyOptions.length === 0) {
-      return null;
-    }
+    if (currentSearchRequestToken.current) {
+      currentSearchRequestToken.current.cancel();
+    } // Create a new token for this specific search request
 
-    var selectedOption = currencyOptions.find(function (opt) {
-      return opt.value === currency;
-    });
 
-    if (!selectedOption) {
-      return null;
-    }
+    var newSearchToken = axios.CancelToken.source();
+    currentSearchRequestToken.current = newSearchToken; // Reset no results state when starting new search (user is typing)
 
-    return /*#__PURE__*/React__default.createElement(Tooltip$1, {
-      toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
-      toolTipPosition: "bottom",
-      bodyWidth: "160px"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "currency-select-container ".concat(isCurrencySelectionDisabled ? 'disabled' : '')
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "currency-flag"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: selectedOption.flagSrc,
-      alt: "".concat(currency, " flag")
-    })), /*#__PURE__*/React__default.createElement("select", {
-      value: currency,
-      onChange: function onChange(e) {
-        return onCurrencyChange(e.target.value);
-      },
-      className: "currency-select",
-      disabled: isCurrencySelectionDisabled
-    }, currencyOptions.map(function (option) {
-      return /*#__PURE__*/React__default.createElement("option", {
-        key: option.value,
-        value: option.value
-      }, option.value, " (", option.symbol, ")");
-    }))));
-  };
+    if (typeof onNoResults === 'function') {
+      onNoResults(false);
+    } // Set loading to true when starting the search request
 
-  var searchBrandsAggregations = function searchBrandsAggregations(search, currencyCode) {
-    return {
-      query: "\n      query GetProductFilterAggregations($search: String!) {\n        luxity_products_aggregations(search: $search) {\n          luxity_brand {\n            name\n          }\n        }\n      }\n    ",
-      variables: {
-        search: search,
-        currency_code: currencyCode
-      }
-    };
-  }; // NEW: Get top products for search dropdown (right side)
-
-  var searchProductsFilter = function searchProductsFilter(search, limit, currencyCode) {
-    return {
-      query: "\n      query LUXITY_PRODUCTS_FILTER(\n        $search: String!\n        $limit: Int!\n        $page: Int!\n        $sort_by: String!\n        $with_sold: Boolean!\n        $currency_code: String!\n      ) {\n        luxity_products_filter(\n          search: $search\n          limit: $limit\n          page: $page\n          sort_by: $sort_by\n          with_sold: $with_sold\n        ) {\n          data {\n            id\n            product {\n              sku\n              name\n              price(currency_code: $currency_code)\n              promotion_price(currency_code: $currency_code)\n              est_retail_price(currency_code: $currency_code)\n              condition\n              currency_symbol(currency_code: $currency_code)\n            }\n            product_slug\n            category_type\n            gender\n            status\n            featured_image\n            on_promotion\n            promotion_discount\n            luxity_brand {\n              id\n              name\n              slug\n            }\n          }\n          total\n        }\n      }\n    ",
-      variables: {
-        search: search,
-        limit: limit,
-        page: 1,
-        sort_by: 'newest',
-        with_sold: false,
-        currency_code: currencyCode
-      }
-    };
-  };
 
-  var useSearch = function useSearch(_ref) {
-    var endpoint = _ref.endpoint,
-        onSearchLoading = _ref.onSearchLoading,
-        currency = _ref.currency,
-        onSearchPreview = _ref.onSearchPreview,
-        onNoResults = _ref.onNoResults;
-    var currentSearchRequestToken = React.useRef(null);
-    var debounce = React.useCallback(function (func, wait) {
-      var timeout;
-      return function executedFunction() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
+    if (typeof onSearchLoading === 'function') {
+      onSearchLoading(true);
+    } // Make TWO parallel queries: brands aggregations + products filter
 
-        var later = function later() {
-          clearTimeout(timeout);
-          func.apply(void 0, args);
-        };
 
-        clearTimeout(timeout);
-        timeout = setTimeout(later, wait);
-      };
-    }, []);
-    var fetchInitialSearchData = React.useCallback(function (initialSearchDataUrl, setInitialSearchView) {
-      axios.get("".concat(initialSearchDataUrl)).then(function (_ref2) {
-        var data = _ref2.data;
-        setInitialSearchView({
-          trending_brands: data.trending_brands,
-          latest_products: data.latest_products
-        });
-      }).catch(function () {
-        setInitialSearchView({
-          trending_brands: [],
-          latest_products: []
-        });
-      });
-    }, []);
-    var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
-      if (!searchQuery || searchQuery.trim() === '') {
-        setSearchResults({
-          brands: [],
-          products: []
-        }); // Reset no results state when clearing search
+    Promise.all([// Query 1: Get brands aggregations
+    axios.post(endpoint, searchBrandsAggregations(searchQuery, currency), {
+      cancelToken: newSearchToken.token
+    }), // Query 2: Get top 3 products
+    axios.post(endpoint, searchProductsFilter(searchQuery, 3, currency), {
+      cancelToken: newSearchToken.token
+    })]).then(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+          brandsResponse = _ref4[0],
+          productsResponse = _ref4[1];
 
-        if (typeof onNoResults === 'function') {
-          onNoResults(false);
-        }
+      if (currentSearchRequestToken.current === newSearchToken) {
+        var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
 
-        return;
-      } // Cancel any ongoing search request to prevent race conditions
+        // Set loading to false when search completes
+        if (typeof onSearchLoading === 'function') {
+          onSearchLoading(false);
+        } // Extract brands from aggregations
 
 
-      if (currentSearchRequestToken.current) {
-        currentSearchRequestToken.current.cancel();
-      } // Create a new token for this specific search request
+        var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
 
+        var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
+        var totalResults = ((_productsResponse$dat2 = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat2 === void 0 ? void 0 : _productsResponse$dat2.total) || 0; // Map brands to old structure: { name, link }
 
-      var newSearchToken = axios.CancelToken.source();
-      currentSearchRequestToken.current = newSearchToken; // Reset no results state when starting new search (user is typing)
+        var brands = brandsData.slice(0, 10).map(function (brand) {
+          return {
+            name: brand.name,
+            link: "/products/brands/".concat(brand.name.toLowerCase().replace(/\s+/g, '-')) // Convert to slug
 
-      if (typeof onNoResults === 'function') {
-        onNoResults(false);
-      } // Set loading to true when starting the search request
-
-
-      if (typeof onSearchLoading === 'function') {
-        onSearchLoading(true);
-      } // Make TWO parallel queries: brands aggregations + products filter
-
-
-      Promise.all([// Query 1: Get brands aggregations
-      axios.post(endpoint, searchBrandsAggregations(searchQuery, currency), {
-        cancelToken: newSearchToken.token
-      }), // Query 2: Get top 3 products
-      axios.post(endpoint, searchProductsFilter(searchQuery, 3, currency), {
-        cancelToken: newSearchToken.token
-      })]).then(function (_ref3) {
-        var _ref4 = _slicedToArray(_ref3, 2),
-            brandsResponse = _ref4[0],
-            productsResponse = _ref4[1];
-
-        if (currentSearchRequestToken.current === newSearchToken) {
-          var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
-
-          // Set loading to false when search completes
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          } // Extract brands from aggregations
-
-
-          var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
-
-          var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
-          var totalResults = ((_productsResponse$dat2 = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat2 === void 0 ? void 0 : _productsResponse$dat2.total) || 0; // Map brands to old structure: { name, link }
-
-          var brands = brandsData.slice(0, 10).map(function (brand) {
-            return {
-              name: brand.name,
-              link: "/products/brands/".concat(brand.name.toLowerCase().replace(/\s+/g, '-')) // Convert to slug
-
-            };
-          }); // Map products to old structure with prices
-
-          var products = productsData.map(function (product) {
-            // Generate product link: /products/{category_type}/{brand_slug}/{product_slug}
-            var categorySlug = product.category_type.toLowerCase().replace(/\s+/g, '-');
-            var brandSlug = product.luxity_brand.slug;
-            var productSlug = product.product_slug;
-            var link = "/products/".concat(categorySlug, "/").concat(brandSlug, "/").concat(productSlug);
-            return {
-              name: product.product.name,
-              brand: product.luxity_brand.name,
-              link: link,
-              price: product.product.price || 0,
-              promotion_price: product.product.promotion_price || null,
-              est_retail_price: product.product.est_retail_price || 0,
-              condition: product.product.condition || '',
-              currency_symbol: product.product.currency_symbol || '',
-              featured_image: product.featured_image,
-              on_promotion: product.on_promotion || false,
-              promotion_discount: product.promotion_discount || 0,
-              id: product.id,
-              category_type: product.category_type,
-              product_slug: product.product_slug,
-              luxity_brand: product.luxity_brand
-            };
-          });
-          var searchResults = {
-            brands: brands,
-            products: products,
-            total: totalResults
           };
-          setSearchResults(searchResults); // Check if we have no results (empty aggregations)
-
-          var hasNoResults = brandsData.length === 0 && productsData.length === 0;
-
-          if (typeof onNoResults === 'function') {
-            onNoResults(hasNoResults);
-          }
+        }); // Map products to old structure with prices
+
+        var products = productsData.map(function (product) {
+          // Generate product link: /products/{category_type}/{brand_slug}/{product_slug}
+          var categorySlug = product.category_type.toLowerCase().replace(/\s+/g, '-');
+          var brandSlug = product.luxity_brand.slug;
+          var productSlug = product.product_slug;
+          var link = "/products/".concat(categorySlug, "/").concat(brandSlug, "/").concat(productSlug);
+          return {
+            name: product.product.name,
+            brand: product.luxity_brand.name,
+            link: link,
+            price: product.product.price || 0,
+            promotion_price: product.product.promotion_price || null,
+            est_retail_price: product.product.est_retail_price || 0,
+            condition: product.product.condition || '',
+            currency_symbol: product.product.currency_symbol || '',
+            featured_image: product.featured_image,
+            on_promotion: product.on_promotion || false,
+            promotion_discount: product.promotion_discount || 0,
+            id: product.id,
+            category_type: product.category_type,
+            product_slug: product.product_slug,
+            luxity_brand: product.luxity_brand
+          };
+        });
+        var searchResults = {
+          brands: brands,
+          products: products,
+          total: totalResults
+        };
+        setSearchResults(searchResults); // Check if we have no results (empty aggregations)
 
-          if (typeof onSearchPreview === 'function') {
-            var hasResults = brands.length > 0 || products.length > 0;
-            onSearchPreview({
-              search_string: searchQuery,
-              has_results: hasResults
-            });
-          }
+        var hasNoResults = brandsData.length === 0 && productsData.length === 0;
 
-          currentSearchRequestToken.current = null;
+        if (typeof onNoResults === 'function') {
+          onNoResults(hasNoResults);
         }
-      }).catch(function (error) {
-        if (!axios.isCancel(error)) {
-          // Set loading to false when search fails
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          }
 
-          setSearchResults({
-            brands: [],
-            products: []
+        if (typeof onSearchPreview === 'function') {
+          var hasResults = brands.length > 0 || products.length > 0;
+          onSearchPreview({
+            search_string: searchQuery,
+            has_results: hasResults
           });
-          currentSearchRequestToken.current = null;
         }
-      });
-    }, [endpoint, currency, onSearchPreview, onSearchLoading, onNoResults]);
-    var debouncedSearch = React.useMemo(function () {
-      return debounce(function (searchQuery, setSearchResults) {
-        return performSearch(searchQuery, setSearchResults);
-      }, 500);
-    }, [debounce, performSearch]);
-    var createDebouncedSearch = React.useCallback(function (setSearchResults) {
-      return function (searchQuery) {
-        return debouncedSearch(searchQuery, setSearchResults);
-      };
-    }, [debouncedSearch]);
-    var createImmediateSearch = React.useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
-      return function (searchQuery) {
-        /*
-         * Cancel any pending search request when immediate search is performed
-         * Immediate search is when the user types a search query and presses enter
-         */
-        if (currentSearchRequestToken.current) {
-          currentSearchRequestToken.current.cancel();
-          currentSearchRequestToken.current = null;
+
+        currentSearchRequestToken.current = null;
+      }
+    }).catch(function (error) {
+      if (!axios.isCancel(error)) {
+        // Set loading to false when search fails
+        if (typeof onSearchLoading === 'function') {
+          onSearchLoading(false);
         }
 
-        setSearchValue('');
         setSearchResults({
           brands: [],
           products: []
         });
-        onSearchSubmit(searchQuery);
-      };
-    }, []);
-    return {
-      fetchInitialSearchData: fetchInitialSearchData,
-      createDebouncedSearch: createDebouncedSearch,
-      createImmediateSearch: createImmediateSearch
+        currentSearchRequestToken.current = null;
+      }
+    });
+  }, [endpoint, currency, onSearchPreview, onSearchLoading, onNoResults]);
+  var debouncedSearch = useMemo(function () {
+    return debounce(function (searchQuery, setSearchResults) {
+      return performSearch(searchQuery, setSearchResults);
+    }, 500);
+  }, [debounce, performSearch]);
+  var createDebouncedSearch = useCallback(function (setSearchResults) {
+    return function (searchQuery) {
+      return debouncedSearch(searchQuery, setSearchResults);
     };
-  };
-
-  var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
-    var setSearchValue = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-    var setShowNoResults = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-    React.useEffect(function () {
-      var handleClickOutside = function handleClickOutside(event) {
-        if (ref.current && !ref.current.contains(event.target)) {
-          setCachedResults(searchResults);
-          setIsSearchFocused(false);
-          setSearchResults({
-            brands: [],
-            products: []
-          }); // Reset search value and no results state when closing
-
-          if (setSearchValue) {
-            setSearchValue('');
-          }
-
-          if (setShowNoResults) {
-            setShowNoResults(false);
-          }
-        }
-      };
-
-      document.addEventListener('mousedown', handleClickOutside);
-      return function () {
-        document.removeEventListener('mousedown', handleClickOutside);
-      };
-    }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults, setSearchValue, setShowNoResults]);
-  };
-  var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
-    var app = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-    var productsUrl = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
-    return React.useCallback(function (event) {
-      var value = event.target.value;
-
-      if (app && productsUrl && value.trim().length > 0) {
-        window.location.href = productsUrl;
-        return;
+  }, [debouncedSearch]);
+  var createImmediateSearch = useCallback(function (setSearchValue, setSearchResults, onSearchSubmit) {
+    return function (searchQuery) {
+      /*
+       * Cancel any pending search request when immediate search is performed
+       * Immediate search is when the user types a search query and presses enter
+       */
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+        currentSearchRequestToken.current = null;
       }
 
-      setSearchValue(value);
-      setIsSearchFocused(true);
-
-      if (value.trim().length >= 3) {
-        debouncedSearch(value);
-      } else {
+      setSearchValue('');
+      setSearchResults({
+        brands: [],
+        products: []
+      });
+      onSearchSubmit(searchQuery);
+    };
+  }, []);
+  return {
+    fetchInitialSearchData: fetchInitialSearchData,
+    createDebouncedSearch: createDebouncedSearch,
+    createImmediateSearch: createImmediateSearch
+  };
+};
+
+var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
+  var setSearchValue = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+  var setShowNoResults = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  useEffect(function () {
+    var handleClickOutside = function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setCachedResults(searchResults);
+        setIsSearchFocused(false);
         setSearchResults({
           brands: [],
           products: []
-        });
-        setCachedResults({
-          brands: [],
-          products: []
-        });
-      }
-    }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl]);
-  };
-  var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
-    var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
-    var setShowNoResults = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
-    return React.useCallback(function () {
-      setIsSearchFocused(true); // Reset no results state when reopening search
-
-      if (setShowNoResults) {
-        setShowNoResults(false);
-      }
+        }); // Reset search value and no results state when closing
 
-      if (typeof handleSearchClick === 'function') {
-        handleSearchClick();
-      } else if (searchValue.trim().length >= 3) {
-        setSearchResults(cachedResults);
-      }
-    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick, setShowNoResults]);
-  };
-  var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
-    var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-    return React.useCallback(function (event) {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-
-        if (searchValue.trim().length >= 3) {
-          immediateSearch(searchValue);
+        if (setSearchValue) {
+          setSearchValue('');
         }
 
-        setIsSearchFocused(false);
-      } else if (event.key === 'Escape' && setSearchValue) {
-        setSearchValue('');
-        setIsSearchFocused(false);
-      }
-    }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
-  };
-
-  var removeCategoryByName = function removeCategoryByName(categories, name) {
-    var _categories$filter;
-
-    return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
-      return category.name.toLowerCase() !== name.toLowerCase();
-    })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
-  };
-
-  var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
-    var accountIcon = _ref.accountIcon,
-        cartIcon = _ref.cartIcon,
-        interestIcon = _ref.interestIcon,
-        cartCount = _ref.cartCount,
-        logoSrc = _ref.logoSrc,
-        categoryElements = _ref.categoryElements,
-        stores = _ref.stores,
-        contactNumber = _ref.contactNumber,
-        productsUrl = _ref.productsUrl,
-        LinkComponent = _ref.LinkComponent,
-        onInterestClick = _ref.onInterestClick,
-        onCartClick = _ref.onCartClick,
-        onAccountClick = _ref.onAccountClick,
-        inputSearchIcon = _ref.inputSearchIcon,
-        onSellToUsClick = _ref.onSellToUsClick,
-        contactUsLink = _ref.contactUsLink,
-        ourStoryLink = _ref.ourStoryLink,
-        onLogoClick = _ref.onLogoClick,
-        endpoint = _ref.endpoint,
-        initialSearchData = _ref.initialSearchData,
-        onSearchSubmit = _ref.onSearchSubmit,
-        onSearchBarClick = _ref.onSearchBarClick,
-        onSearchPreview = _ref.onSearchPreview,
-        onProductSearchResultClick = _ref.onProductSearchResultClick,
-        onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        _onSearchLoading = _ref.onSearchLoading,
-        currency = _ref.currency,
-        currencySymbol = _ref.currencySymbol,
-        currencyOptions = _ref.currencyOptions,
-        onCurrencyChange = _ref.onCurrencyChange,
-        isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
-        tooltipContent = _ref.tooltipContent,
-        earlyAccessIcon = _ref.earlyAccessIcon,
-        exclusiveIcon = _ref.exclusiveIcon,
-        name = _ref.name,
-        isEarlyAccess = _ref.isEarlyAccess,
-        isExclusive = _ref.isExclusive,
-        shop = _ref.shop,
-        app = _ref.app,
-        categoryConfig = _ref.categoryConfig,
-        onCreateInterests = _ref.onCreateInterests,
-        noResultsImage = _ref.noResultsImage,
-        _ref$showCreateIntere = _ref.showCreateInterest,
-        showCreateInterest = _ref$showCreateIntere === void 0 ? true : _ref$showCreateIntere;
-
-    var _useState = React.useState(''),
-        _useState2 = _slicedToArray(_useState, 2),
-        searchValue = _useState2[0],
-        setSearchValue = _useState2[1];
-
-    var _useState3 = React.useState(false),
-        _useState4 = _slicedToArray(_useState3, 2),
-        loading = _useState4[0],
-        setLoading = _useState4[1];
-
-    var _useState5 = React.useState(false),
-        _useState6 = _slicedToArray(_useState5, 2),
-        searchLoading = _useState6[0],
-        setSearchLoading = _useState6[1];
-
-    var _useState7 = React.useState(false),
-        _useState8 = _slicedToArray(_useState7, 2),
-        isSearchFocused = _useState8[0],
-        setIsSearchFocused = _useState8[1];
-
-    var _useState9 = React.useState({
-      trending_brands: [],
-      latest_products: []
-    }),
-        _useState10 = _slicedToArray(_useState9, 2),
-        initialSearchView = _useState10[0],
-        setInitialSearchView = _useState10[1];
-
-    var _useState11 = React.useState({}),
-        _useState12 = _slicedToArray(_useState11, 2),
-        dropdownData = _useState12[0],
-        setDropdownData = _useState12[1];
-
-    var _useState13 = React.useState(false),
-        _useState14 = _slicedToArray(_useState13, 2),
-        hasError = _useState14[0],
-        setHasError = _useState14[1];
-
-    var _useState15 = React.useState({
-      brands: [],
-      products: []
-    }),
-        _useState16 = _slicedToArray(_useState15, 2),
-        searchResults = _useState16[0],
-        setSearchResults = _useState16[1];
-
-    var _useState17 = React.useState({
-      brands: [],
-      products: []
-    }),
-        _useState18 = _slicedToArray(_useState17, 2),
-        cachedResults = _useState18[0],
-        setCachedResults = _useState18[1];
-
-    var _useState19 = React.useState(false),
-        _useState20 = _slicedToArray(_useState19, 2),
-        showNoResults = _useState20[0],
-        setShowNoResults = _useState20[1];
-
-    var searchResultsRef = React.useRef(null);
-
-    var _useSearch = useSearch({
-      endpoint: endpoint,
-      onSearchLoading: function onSearchLoading(isLoading) {
-        setSearchLoading(isLoading);
-
-        if (typeof _onSearchLoading === 'function') {
-          _onSearchLoading(isLoading);
+        if (setShowNoResults) {
+          setShowNoResults(false);
         }
-      },
-      currency: currency,
-      onSearchPreview: onSearchPreview,
-      onNoResults: setShowNoResults
-    }),
-        fetchInitialSearchData = _useSearch.fetchInitialSearchData,
-        createDebouncedSearch = _useSearch.createDebouncedSearch,
-        createImmediateSearch = _useSearch.createImmediateSearch;
-
-    var debouncedSearch = createDebouncedSearch(function (results) {
-      setSearchResults(results);
-      setCachedResults(results);
-    });
-    var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
-    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl);
-    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults, setSearchValue, setShowNoResults);
-
-    var handleSearchClick = function handleSearchClick() {
-      if (typeof onSearchBarClick === 'function') {
-        onSearchBarClick();
-        return;
       }
+    };
 
-      handleSearchFocus();
+    document.addEventListener('mousedown', handleClickOutside);
+    return function () {
+      document.removeEventListener('mousedown', handleClickOutside);
     };
+  }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults, setSearchValue, setShowNoResults]);
+};
+var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
+  var app = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var productsUrl = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
+  return useCallback(function (event) {
+    var value = event.target.value;
+
+    if (app && productsUrl && value.trim().length > 0) {
+      window.location.href = productsUrl;
+      return;
+    }
 
-    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults, undefined, setShowNoResults);
-    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused);
+    setSearchValue(value);
+    setIsSearchFocused(true);
 
-    function addCategoryToElements(elements, categoryName) {
-      return elements.map(function (element) {
-        return _objectSpread2(_objectSpread2({}, element), {}, {
-          category: categoryName
-        });
+    if (value.trim().length >= 3) {
+      debouncedSearch(value);
+    } else {
+      setSearchResults({
+        brands: [],
+        products: []
+      });
+      setCachedResults({
+        brands: [],
+        products: []
       });
     }
+  }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl]);
+};
+var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+  var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+  var setShowNoResults = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : null;
+  return useCallback(function () {
+    setIsSearchFocused(true); // Reset no results state when reopening search
+
+    if (setShowNoResults) {
+      setShowNoResults(false);
+    }
 
-    React.useMemo(function () {
-      setLoading(true);
-      axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
-        var data = _ref2.data;
-        setLoading(false);
-        setDropdownData(data);
-      }).catch(function () {
-        return setHasError(true);
-      });
-    }, [categoryConfig.menuData]);
-    React.useMemo(function () {
-      if (!initialSearchData) {
-        return;
+    if (typeof handleSearchClick === 'function') {
+      handleSearchClick();
+    } else if (searchValue.trim().length >= 3) {
+      setSearchResults(cachedResults);
+    }
+  }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick, setShowNoResults]);
+};
+var useSearchInputKeyDown = function useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused) {
+  var setSearchValue = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  return useCallback(function (event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+
+      if (searchValue.trim().length >= 3) {
+        immediateSearch(searchValue);
       }
 
-      fetchInitialSearchData(initialSearchData, setInitialSearchView);
-    }, [initialSearchData, fetchInitialSearchData]);
-
-    var renderDropdownLinks = function renderDropdownLinks() {
-      return categoryConfig.categories.map(function (category) {
-        var title = category.title,
-            imageSrc = category.imageSrc,
-            categorySlug = category.categorySlug,
-            categoryName = category.categoryName,
-            elementsKey = category.elementsKey,
-            subCategoryElementsKey = category.subCategoryElementsKey,
-            styleElementsKey = category.styleElementsKey;
-        var categoryElementsProcessed = categoryElements;
-
-        if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
-          // show subcategory elements
-          categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
-        } else if (styleElementsKey && dropdownData[styleElementsKey]) {
-          categoryElementsProcessed = addCategoryToElements(dropdownData[styleElementsKey], categorySlug);
-        } else {
-          categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
-        }
+      setIsSearchFocused(false);
+    } else if (event.key === 'Escape' && setSearchValue) {
+      setSearchValue('');
+      setIsSearchFocused(false);
+    }
+  }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
+};
+
+var removeCategoryByName = function removeCategoryByName(categories, name) {
+  var _categories$filter;
+
+  return (_categories$filter = categories === null || categories === void 0 ? void 0 : categories.filter(function (category) {
+    return category.name.toLowerCase() !== name.toLowerCase();
+  })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
+};
+
+var LuxityDesktopHeader = function LuxityDesktopHeader(_ref) {
+  var accountIcon = _ref.accountIcon,
+      cartIcon = _ref.cartIcon,
+      interestIcon = _ref.interestIcon,
+      cartCount = _ref.cartCount,
+      logoSrc = _ref.logoSrc,
+      categoryElements = _ref.categoryElements,
+      stores = _ref.stores,
+      contactNumber = _ref.contactNumber,
+      productsUrl = _ref.productsUrl,
+      LinkComponent = _ref.LinkComponent,
+      onInterestClick = _ref.onInterestClick,
+      onCartClick = _ref.onCartClick,
+      onAccountClick = _ref.onAccountClick,
+      inputSearchIcon = _ref.inputSearchIcon,
+      onSellToUsClick = _ref.onSellToUsClick,
+      contactUsLink = _ref.contactUsLink,
+      ourStoryLink = _ref.ourStoryLink,
+      onLogoClick = _ref.onLogoClick,
+      endpoint = _ref.endpoint,
+      initialSearchData = _ref.initialSearchData,
+      onSearchSubmit = _ref.onSearchSubmit,
+      onSearchBarClick = _ref.onSearchBarClick,
+      onSearchPreview = _ref.onSearchPreview,
+      onProductSearchResultClick = _ref.onProductSearchResultClick,
+      onBrandSearchResultClick = _ref.onBrandSearchResultClick,
+      _onSearchLoading = _ref.onSearchLoading,
+      currency = _ref.currency,
+      currencySymbol = _ref.currencySymbol,
+      currencyOptions = _ref.currencyOptions,
+      onCurrencyChange = _ref.onCurrencyChange,
+      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+      tooltipContent = _ref.tooltipContent,
+      earlyAccessIcon = _ref.earlyAccessIcon,
+      exclusiveIcon = _ref.exclusiveIcon,
+      name = _ref.name,
+      isEarlyAccess = _ref.isEarlyAccess,
+      isExclusive = _ref.isExclusive,
+      shop = _ref.shop,
+      app = _ref.app,
+      categoryConfig = _ref.categoryConfig,
+      onCreateInterests = _ref.onCreateInterests,
+      noResultsImage = _ref.noResultsImage,
+      _ref$showCreateIntere = _ref.showCreateInterest,
+      showCreateInterest = _ref$showCreateIntere === void 0 ? true : _ref$showCreateIntere;
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      searchLoading = _useState6[0],
+      setSearchLoading = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isSearchFocused = _useState8[0],
+      setIsSearchFocused = _useState8[1];
+
+  var _useState9 = useState({
+    trending_brands: [],
+    latest_products: []
+  }),
+      _useState10 = _slicedToArray(_useState9, 2),
+      initialSearchView = _useState10[0],
+      setInitialSearchView = _useState10[1];
+
+  var _useState11 = useState({}),
+      _useState12 = _slicedToArray(_useState11, 2),
+      dropdownData = _useState12[0],
+      setDropdownData = _useState12[1];
+
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      hasError = _useState14[0],
+      setHasError = _useState14[1];
+
+  var _useState15 = useState({
+    brands: [],
+    products: []
+  }),
+      _useState16 = _slicedToArray(_useState15, 2),
+      searchResults = _useState16[0],
+      setSearchResults = _useState16[1];
+
+  var _useState17 = useState({
+    brands: [],
+    products: []
+  }),
+      _useState18 = _slicedToArray(_useState17, 2),
+      cachedResults = _useState18[0],
+      setCachedResults = _useState18[1];
+
+  var _useState19 = useState(false),
+      _useState20 = _slicedToArray(_useState19, 2),
+      showNoResults = _useState20[0],
+      setShowNoResults = _useState20[1];
+
+  var searchResultsRef = useRef(null);
+
+  var _useSearch = useSearch({
+    endpoint: endpoint,
+    onSearchLoading: function onSearchLoading(isLoading) {
+      setSearchLoading(isLoading);
+
+      if (typeof _onSearchLoading === 'function') {
+        _onSearchLoading(isLoading);
+      }
+    },
+    currency: currency,
+    onSearchPreview: onSearchPreview,
+    onNoResults: setShowNoResults
+  }),
+      fetchInitialSearchData = _useSearch.fetchInitialSearchData,
+      createDebouncedSearch = _useSearch.createDebouncedSearch,
+      createImmediateSearch = _useSearch.createImmediateSearch;
+
+  var debouncedSearch = createDebouncedSearch(function (results) {
+    setSearchResults(results);
+    setCachedResults(results);
+  });
+  var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
+  var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults, app, productsUrl);
+  useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults, setSearchValue, setShowNoResults);
+
+  var handleSearchClick = function handleSearchClick() {
+    if (typeof onSearchBarClick === 'function') {
+      onSearchBarClick();
+      return;
+    }
 
-        return /*#__PURE__*/React__default.createElement(DropdownLink, {
-          key: categorySlug,
-          title: title,
-          imageSrc: imageSrc,
-          categoryElements: categoryElementsProcessed,
-          brandElements: dropdownData[elementsKey] || [],
-          productsUrl: productsUrl,
-          categorySlug: categorySlug,
-          categoryTitle: categoryName,
-          isLoading: loading,
-          hasError: hasError,
-          LinkComponent: LinkComponent
-        });
+    handleSearchFocus();
+  };
+
+  var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults, undefined, setShowNoResults);
+  var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused);
+
+  function addCategoryToElements(elements, categoryName) {
+    return elements.map(function (element) {
+      return _objectSpread2(_objectSpread2({}, element), {}, {
+        category: categoryName
       });
-    };
+    });
+  }
 
-    var getMarginRight = function getMarginRight(showLoyaltyIcon, userName) {
-      if (showLoyaltyIcon) return '15px';
-      if (userName) return '5px';
-      return '18px';
-    };
+  useMemo(function () {
+    setLoading(true);
+    axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
+      var data = _ref2.data;
+      setLoading(false);
+      setDropdownData(data);
+    }).catch(function () {
+      return setHasError(true);
+    });
+  }, [categoryConfig.menuData]);
+  useMemo(function () {
+    if (!initialSearchData) {
+      return;
+    }
 
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__container"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__logo-wrapper"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      onClick: onLogoClick,
-      className: "navbar__logo"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: logoSrc,
-      alt: "luxity-logo",
-      loading: "eager"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__section"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__body"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__product-search"
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: inputSearchIcon,
-      alt: "search-icon",
-      className: "navbar__input-search-icon"
-    }), /*#__PURE__*/React__default.createElement("input", {
-      className: "navbar__form-input",
-      type: "text",
-      placeholder: "Search for items and designs",
-      value: searchValue,
-      onChange: handleChange,
-      onKeyDown: handleKeyDown,
-      onClick: handleSearchClick,
-      onFocus: handleSearchFocus,
-      autoComplete: "off",
-      readOnly: app
-    })), /*#__PURE__*/React__default.createElement(SearchResults, {
-      searchValue: searchValue,
-      searchResults: searchResults,
-      onViewAll: function onViewAll() {
-        onSearchSubmit(searchValue);
-        setSearchValue('');
-        setSearchResults({
-          brands: [],
-          products: []
-        });
-        setIsSearchFocused(false);
-        setShowNoResults(false);
-      },
-      searchResultsRef: searchResultsRef,
-      onSearchSubmit: onSearchSubmit,
-      setSearchValue: setSearchValue,
-      initialSearchData: initialSearchView,
-      isSearchFocused: isSearchFocused,
-      setIsSearchFocused: setIsSearchFocused,
-      currency: currency,
-      currencySymbol: currencySymbol,
-      onProductSearchResultClick: onProductSearchResultClick,
-      onBrandSearchResultClick: onBrandSearchResultClick,
-      onCreateInterests: onCreateInterests,
-      noResultsImage: noResultsImage,
-      showNoResults: showNoResults,
-      isLoading: searchLoading,
-      showCreateInterest: showCreateInterest
-    }), /*#__PURE__*/React__default.createElement("nav", {
-      className: "navbar__nav-links navbar__nav-links--wrap"
-    }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__link",
-      key: "Stores"
-    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-      href: contactUsLink,
-      className: "navbar__link-item navbar__link-item--desktop"
-    }, "Stores"), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__dropdown"
-    }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
-      stores: stores,
-      contactNumber: contactNumber
-    }))))), /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__icons-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__icons"
-    }, /*#__PURE__*/React__default.createElement(CurrencySelect, {
-      currency: currency,
-      currencyOptions: currencyOptions,
-      onCurrencyChange: onCurrencyChange,
-      isCurrencySelectionDisabled: isCurrencySelectionDisabled,
-      tooltipContent: tooltipContent
-    }), shop && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__icon relative flex",
-      onClick: onAccountClick,
-      style: {
-        marginRight: getMarginRight(isEarlyAccess || isExclusive, name)
+    fetchInitialSearchData(initialSearchData, setInitialSearchView);
+  }, [initialSearchData, fetchInitialSearchData]);
+
+  var renderDropdownLinks = function renderDropdownLinks() {
+    return categoryConfig.categories.map(function (category) {
+      var title = category.title,
+          imageSrc = category.imageSrc,
+          categorySlug = category.categorySlug,
+          categoryName = category.categoryName,
+          elementsKey = category.elementsKey,
+          subCategoryElementsKey = category.subCategoryElementsKey,
+          styleElementsKey = category.styleElementsKey;
+      var categoryElementsProcessed = categoryElements;
+
+      if (subCategoryElementsKey && dropdownData[subCategoryElementsKey]) {
+        // show subcategory elements
+        categoryElementsProcessed = removeCategoryByName(dropdownData[subCategoryElementsKey], categoryName);
+      } else if (styleElementsKey && dropdownData[styleElementsKey]) {
+        categoryElementsProcessed = addCategoryToElements(dropdownData[styleElementsKey], categorySlug);
+      } else {
+        categoryElementsProcessed = addCategoryToElements(categoryElementsProcessed, categorySlug);
       }
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: accountIcon,
-      alt: "account-icon",
-      width: 20,
-      height: 20
-    }), isEarlyAccess && /*#__PURE__*/React__default.createElement("img", {
-      src: earlyAccessIcon,
-      alt: "loyalty-icon",
-      className: "navbar__loyalty-icon",
-      width: 16,
-      height: 16
-    }), isExclusive && /*#__PURE__*/React__default.createElement("img", {
-      src: exclusiveIcon,
-      alt: "loyalty-icon",
-      className: "navbar__loyalty-icon",
-      width: 16,
-      height: 16
-    })), name && /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "mr-3",
-      onClick: onAccountClick
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "text-sm"
-    }, name))), onInterestClick && /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
-      onClick: onInterestClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: interestIcon,
-      alt: "interest-icon",
-      width: 20,
-      height: 20
-    })), /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__cart-icon ".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
-      onClick: onCartClick
-    }, /*#__PURE__*/React__default.createElement("img", {
-      src: cartIcon,
-      alt: "cart-icon",
-      width: 20,
-      height: 20
-    }), shop && cartCount > 0 && /*#__PURE__*/React__default.createElement("div", {
-      className: "navbar__cart-count"
-    }, cartCount))), /*#__PURE__*/React__default.createElement("nav", {
-      className: "navbar__nav-links"
-    }, /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-      href: ourStoryLink,
-      className: "navbar__link-item"
-    }, "Our Story")), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement(LinkComponent, {
-      href: contactUsLink,
-      className: "navbar__link-item"
-    }, "Contact Us")), /*#__PURE__*/React__default.createElement("li", {
-      className: "navbar__company-link"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "navbar__company-block",
-      onClick: onSellToUsClick
-    }, "Sell to us")))))));
+
+      return /*#__PURE__*/React.createElement(DropdownLink, {
+        key: categorySlug,
+        title: title,
+        imageSrc: imageSrc,
+        categoryElements: categoryElementsProcessed,
+        brandElements: dropdownData[elementsKey] || [],
+        productsUrl: productsUrl,
+        categorySlug: categorySlug,
+        categoryTitle: categoryName,
+        isLoading: loading,
+        hasError: hasError,
+        LinkComponent: LinkComponent
+      });
+    });
   };
 
-  return LuxityDesktopHeader;
+  var getMarginRight = function getMarginRight(showLoyaltyIcon, userName) {
+    if (showLoyaltyIcon) return '15px';
+    if (userName) return '5px';
+    return '18px';
+  };
 
-})));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "navbar"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar__container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar__logo-wrapper"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: onLogoClick,
+    className: "navbar__logo"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: logoSrc,
+    alt: "luxity-logo",
+    loading: "eager"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "navbar__section"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar__body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar__product-search"
+  }, /*#__PURE__*/React.createElement("img", {
+    src: inputSearchIcon,
+    alt: "search-icon",
+    className: "navbar__input-search-icon"
+  }), /*#__PURE__*/React.createElement("input", {
+    className: "navbar__form-input",
+    type: "text",
+    placeholder: "Search for items and designs",
+    value: searchValue,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onClick: handleSearchClick,
+    onFocus: handleSearchFocus,
+    autoComplete: "off",
+    readOnly: app
+  })), /*#__PURE__*/React.createElement(SearchResults, {
+    searchValue: searchValue,
+    searchResults: searchResults,
+    onViewAll: function onViewAll() {
+      onSearchSubmit(searchValue);
+      setSearchValue('');
+      setSearchResults({
+        brands: [],
+        products: []
+      });
+      setIsSearchFocused(false);
+      setShowNoResults(false);
+    },
+    searchResultsRef: searchResultsRef,
+    onSearchSubmit: onSearchSubmit,
+    setSearchValue: setSearchValue,
+    initialSearchData: initialSearchView,
+    isSearchFocused: isSearchFocused,
+    setIsSearchFocused: setIsSearchFocused,
+    currency: currency,
+    currencySymbol: currencySymbol,
+    onProductSearchResultClick: onProductSearchResultClick,
+    onBrandSearchResultClick: onBrandSearchResultClick,
+    onCreateInterests: onCreateInterests,
+    noResultsImage: noResultsImage,
+    showNoResults: showNoResults,
+    isLoading: searchLoading,
+    showCreateInterest: showCreateInterest
+  }), /*#__PURE__*/React.createElement("nav", {
+    className: "navbar__nav-links navbar__nav-links--wrap"
+  }, renderDropdownLinks(), !!stores.length && /*#__PURE__*/React.createElement("li", {
+    className: "navbar__link",
+    key: "Stores"
+  }, /*#__PURE__*/React.createElement(LinkComponent, {
+    href: contactUsLink,
+    className: "navbar__link-item navbar__link-item--desktop"
+  }, "Stores"), /*#__PURE__*/React.createElement("div", {
+    className: "navbar__dropdown"
+  }, /*#__PURE__*/React.createElement(StoresDropdown, {
+    stores: stores,
+    contactNumber: contactNumber
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "navbar__icons-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "navbar__icons"
+  }, /*#__PURE__*/React.createElement(CurrencySelect, {
+    currency: currency,
+    currencyOptions: currencyOptions,
+    onCurrencyChange: onCurrencyChange,
+    isCurrencySelectionDisabled: isCurrencySelectionDisabled,
+    tooltipContent: tooltipContent
+  }), shop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "navbar__icon relative flex",
+    onClick: onAccountClick,
+    style: {
+      marginRight: getMarginRight(isEarlyAccess || isExclusive, name)
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    src: accountIcon,
+    alt: "account-icon",
+    width: 20,
+    height: 20
+  }), isEarlyAccess && /*#__PURE__*/React.createElement("img", {
+    src: earlyAccessIcon,
+    alt: "loyalty-icon",
+    className: "navbar__loyalty-icon",
+    width: 16,
+    height: 16
+  }), isExclusive && /*#__PURE__*/React.createElement("img", {
+    src: exclusiveIcon,
+    alt: "loyalty-icon",
+    className: "navbar__loyalty-icon",
+    width: 16,
+    height: 16
+  })), name && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "mr-3",
+    onClick: onAccountClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-sm"
+  }, name))), onInterestClick && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
+    onClick: onInterestClick
+  }, /*#__PURE__*/React.createElement("img", {
+    src: interestIcon,
+    alt: "interest-icon",
+    width: 20,
+    height: 20
+  })), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "navbar__cart-icon ".concat(app ? 'navbar__icon--app' : 'navbar__icon'),
+    onClick: onCartClick
+  }, /*#__PURE__*/React.createElement("img", {
+    src: cartIcon,
+    alt: "cart-icon",
+    width: 20,
+    height: 20
+  }), shop && cartCount > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "navbar__cart-count"
+  }, cartCount))), /*#__PURE__*/React.createElement("nav", {
+    className: "navbar__nav-links"
+  }, /*#__PURE__*/React.createElement("li", {
+    className: "navbar__company-link"
+  }, /*#__PURE__*/React.createElement(LinkComponent, {
+    href: ourStoryLink,
+    className: "navbar__link-item"
+  }, "Our Story")), /*#__PURE__*/React.createElement("li", {
+    className: "navbar__company-link"
+  }, /*#__PURE__*/React.createElement(LinkComponent, {
+    href: contactUsLink,
+    className: "navbar__link-item"
+  }, "Contact Us")), /*#__PURE__*/React.createElement("li", {
+    className: "navbar__company-link"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "navbar__company-block",
+    onClick: onSellToUsClick
+  }, "Sell to us")))))));
+};
+
+export default LuxityDesktopHeader;