@bonlineza/luxity-lib 2.38.0 → 2.38.1

package/LuxityGraphQLDropdownSelector.js

@@ -1313,10 +1313,10 @@
   var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _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$1 || (_templateObject3$1 = _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);
+    return styled.css(_templateObject3$1 || (_templateObject3$1 = _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$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _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);
@@ -1326,10 +1326,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -1343,9 +1343,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -1358,7 +1358,7 @@
   };
 
   var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _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;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {

package/LuxityMobileHeader.js

@@ -455,10 +455,10 @@
   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);
+    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);
+    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);
@@ -468,10 +468,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -485,9 +485,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -500,7 +500,7 @@
   };
 
   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;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -576,33 +576,33 @@
     });
   });
 
+  /* eslint-disable react/require-default-props */
+
   var Tooltip = function Tooltip(_ref) {
-    var children = _ref.children,
-        toolTipText = _ref.toolTipText,
-        toolTipPosition = _ref.toolTipPosition,
-        bodyWidth = _ref.bodyWidth,
-        apexWidth = _ref.apexWidth,
-        containerClassName = _ref.containerClassName,
-        bodyClassName = _ref.bodyClassName;
+    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,
+      $toolTipPosition: toolTipPosition,
+      $bodyWidth: bodyWidth,
+      $apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
-  Tooltip.defaultProps = {
-    children: null,
-    toolTipText: '',
-    toolTipPosition: 'top',
-    bodyWidth: '8em',
-    apexWidth: '5px',
-    containerClassName: '',
-    bodyClassName: ''
-  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {
@@ -918,7 +918,7 @@
   };
 
   var SearchResults = function SearchResults(_ref) {
-    var _searchResults$brands, _searchResults$produc, _searchResults$brands2, _searchResults$produc2, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc3;
+    var _searchResults$brands, _searchResults$produc, _initialSearchData$tr, _initialSearchData$la, _limitBrands, _limitBrands2, _initialSearchData$la2, _searchResults$produc2;
 
     var searchValue = _ref.searchValue,
         searchResults = _ref.searchResults,
@@ -932,7 +932,10 @@
         currency = _ref.currency,
         currencySymbol = _ref.currencySymbol,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
-        onBrandSearchResultClick = _ref.onBrandSearchResultClick;
+        onBrandSearchResultClick = _ref.onBrandSearchResultClick,
+        onCreateInterests = _ref.onCreateInterests,
+        noResultsImage = _ref.noResultsImage,
+        showNoResults = _ref.showNoResults;
 
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -950,15 +953,16 @@
         window.removeEventListener('resize', checkIfMobile);
       };
     }, []);
-    var shouldShowInitialData = isSearchFocused && (!searchValue || searchValue.trim().length < 3) || (searchValue === null || searchValue === void 0 ? void 0 : searchValue.trim().length) >= 3 && !(searchResults !== null && searchResults !== void 0 && (_searchResults$brands = searchResults.brands) !== null && _searchResults$brands !== void 0 && _searchResults$brands.length) && !(searchResults !== null && searchResults !== void 0 && (_searchResults$produc = searchResults.products) !== null && _searchResults$produc !== void 0 && _searchResults$produc.length);
-    var hasResults = (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$brands2 = searchResults.brands) === null || _searchResults$brands2 === void 0 ? void 0 : _searchResults$brands2.length) > 0 || (searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.length) > 0;
+    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 (!hasResults && !hasInitialData) {
+    if (!isSearchFocused) {
       return null;
     }
 
-    if (!isSearchFocused) {
+    if (!hasResults && !hasInitialData && !showNoResults) {
       return null;
     }
 
@@ -1039,7 +1043,36 @@
       }
 
       return brands;
-    };
+    }; // 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"), /*#__PURE__*/React__default.createElement("p", {
+        className: "search-results__no-results-description"
+      }, "Create an interest now and receive instant notifications as your interests list."))), /*#__PURE__*/React__default.createElement("button", {
+        type: "button",
+        className: "search-results__create-interest-button",
+        onClick: onCreateInterests
+      }, "Create Interests")));
+    }
 
     return /*#__PURE__*/React__default.createElement("div", {
       className: "search-results",
@@ -1096,7 +1129,7 @@
       }
     }, "View all items")), /*#__PURE__*/React__default.createElement("div", {
       className: "search-results__product-list"
-    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc3 = searchResults.products) === null || _searchResults$produc3 === void 0 ? void 0 : _searchResults$produc3.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
+    }, shouldShowInitialData ? initialSearchData === null || initialSearchData === void 0 ? void 0 : (_initialSearchData$la2 = initialSearchData.latest_products) === null || _initialSearchData$la2 === void 0 ? void 0 : _initialSearchData$la2.map(renderProductCard) : searchResults === null || searchResults === void 0 ? void 0 : (_searchResults$produc2 = searchResults.products) === null || _searchResults$produc2 === void 0 ? void 0 : _searchResults$produc2.map(renderProductCard)), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "search-results__view-all-button",
       onClick: function onClick() {
@@ -1139,7 +1172,8 @@
     var endpoint = _ref.endpoint,
         onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
-        onSearchPreview = _ref.onSearchPreview;
+        onSearchPreview = _ref.onSearchPreview,
+        onNoResults = _ref.onNoResults;
     var currentSearchRequestToken = React.useRef(null);
     var debounce = React.useCallback(function (func, wait) {
       var timeout;
@@ -1176,7 +1210,12 @@
         setSearchResults({
           brands: [],
           products: []
-        });
+        }); // Reset no results state when clearing search
+
+        if (typeof onNoResults === 'function') {
+          onNoResults(false);
+        }
+
         return;
       } // Cancel any ongoing search request to prevent race conditions
 
@@ -1187,7 +1226,12 @@
 
 
       var newSearchToken = axios.CancelToken.source();
-      currentSearchRequestToken.current = newSearchToken; // Set loading to true when starting the search request
+      currentSearchRequestToken.current = newSearchToken; // Reset no results state when starting new search (user is typing)
+
+      if (typeof onNoResults === 'function') {
+        onNoResults(false);
+      } // Set loading to true when starting the search request
+
 
       if (typeof onSearchLoading === 'function') {
         onSearchLoading(true);
@@ -1247,7 +1291,13 @@
             products: products,
             total: totalResults
           };
-          setSearchResults(searchResults);
+          setSearchResults(searchResults); // Check if we have no results (empty aggregations)
+
+          var hasNoResults = brandsData.length === 0 && productsData.length === 0;
+
+          if (typeof onNoResults === 'function') {
+            onNoResults(hasNoResults);
+          }
 
           if (typeof onSearchPreview === 'function') {
             var hasResults = brands.length > 0 || products.length > 0;
@@ -1257,11 +1307,7 @@
             });
           }
 
-          currentSearchRequestToken.current = null; // Set loading to false when search completes successfully
-
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          }
+          currentSearchRequestToken.current = null;
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
@@ -1269,14 +1315,10 @@
             brands: [],
             products: []
           });
-          currentSearchRequestToken.current = null; // Set loading to false when search fails
-
-          if (typeof onSearchLoading === 'function') {
-            onSearchLoading(false);
-          }
+          currentSearchRequestToken.current = null;
         }
       });
-    }, [endpoint, currency, onSearchPreview, onSearchLoading]);
+    }, [endpoint, currency, onSearchPreview, onSearchLoading, onNoResults]);
     var debouncedSearch = React.useMemo(function () {
       return debounce(function (searchQuery, setSearchResults) {
         return performSearch(searchQuery, setSearchResults);
@@ -1381,22 +1423,6 @@
       }
     }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
   };
-  var useSearchUrlQuery = function useSearchUrlQuery(setSearchValue, debouncedSearch) {
-    var hasProcessedUrlQuery = React.useRef(false);
-    React.useEffect(function () {
-      if (hasProcessedUrlQuery.current) return;
-      var urlParams = new URLSearchParams(window.location.search);
-      var queryParam = urlParams.get('q');
-      var isSearchPage = window.location.pathname.includes('/search');
-
-      if (queryParam && queryParam.trim() !== '' && isSearchPage) {
-        hasProcessedUrlQuery.current = true;
-        setSearchValue(queryParam);
-        debouncedSearch(queryParam);
-      }
-    }, [setSearchValue, debouncedSearch]);
-    return hasProcessedUrlQuery;
-  };
 
   var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
     var logoSrc = _ref.logoSrc,
@@ -1452,61 +1478,69 @@
         shop = _ref.shop,
         app = _ref.app,
         categoryConfig = _ref.categoryConfig,
-        name = _ref.name;
+        name = _ref.name,
+        onCreateInterests = _ref.onCreateInterests,
+        noResultsImage = _ref.noResultsImage;
+
+    var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        showNoResults = _useState2[0],
+        setShowNoResults = _useState2[1];
 
     var _useSearch = useSearch({
       endpoint: endpoint,
       onSearchLoading: onSearchLoading,
       currency: currency,
-      onSearchPreview: onSearchPreview
+      onSearchPreview: onSearchPreview,
+      onNoResults: setShowNoResults
     }),
         fetchInitialSearchData = _useSearch.fetchInitialSearchData,
         createDebouncedSearch = _useSearch.createDebouncedSearch,
         createImmediateSearch = _useSearch.createImmediateSearch;
 
-    var _useState = React.useState(''),
-        _useState2 = _slicedToArray(_useState, 2),
-        searchValue = _useState2[0],
-        setSearchValue = _useState2[1];
-
-    var _useState3 = React.useState(false),
+    var _useState3 = React.useState(''),
         _useState4 = _slicedToArray(_useState3, 2),
-        showSearchBar = _useState4[0],
-        setShowSearchbar = _useState4[1];
+        searchValue = _useState4[0],
+        setSearchValue = _useState4[1];
 
     var _useState5 = React.useState(false),
         _useState6 = _slicedToArray(_useState5, 2),
-        showSideNav = _useState6[0],
-        setShowSideNav = _useState6[1];
+        showSearchBar = _useState6[0],
+        setShowSearchbar = _useState6[1];
 
-    var _useState7 = React.useState({
-      brands: [],
-      products: []
-    }),
+    var _useState7 = React.useState(false),
         _useState8 = _slicedToArray(_useState7, 2),
-        searchResults = _useState8[0],
-        setSearchResults = _useState8[1];
+        showSideNav = _useState8[0],
+        setShowSideNav = _useState8[1];
 
     var _useState9 = React.useState({
       brands: [],
       products: []
     }),
         _useState10 = _slicedToArray(_useState9, 2),
-        cachedResults = _useState10[0],
-        setCachedResults = _useState10[1];
+        searchResults = _useState10[0],
+        setSearchResults = _useState10[1];
 
-    var _useState11 = React.useState(false),
+    var _useState11 = React.useState({
+      brands: [],
+      products: []
+    }),
         _useState12 = _slicedToArray(_useState11, 2),
-        isSearchFocused = _useState12[0],
-        setIsSearchFocused = _useState12[1];
+        cachedResults = _useState12[0],
+        setCachedResults = _useState12[1];
 
-    var _useState13 = React.useState({
+    var _useState13 = React.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        isSearchFocused = _useState14[0],
+        setIsSearchFocused = _useState14[1];
+
+    var _useState15 = React.useState({
       trending_brands: [],
       latest_products: []
     }),
-        _useState14 = _slicedToArray(_useState13, 2),
-        initialSearchView = _useState14[0],
-        setInitialSearchView = _useState14[1];
+        _useState16 = _slicedToArray(_useState15, 2),
+        initialSearchView = _useState16[0],
+        setInitialSearchView = _useState16[1];
 
     var searchResultsRef = React.useRef(null);
     var searchInputRef = React.useRef(null);
@@ -1516,7 +1550,6 @@
     });
     var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
     var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
-    useSearchUrlQuery(setSearchValue, debouncedSearch);
     var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
     React.useMemo(function () {
       if (!initialSearchData) {
@@ -1549,6 +1582,7 @@
           brands: [],
           products: []
         });
+        setShowNoResults(false);
       }
     };
 
@@ -1733,6 +1767,7 @@
           products: []
         });
         setIsSearchFocused(false);
+        setShowNoResults(false);
       },
       onSearchSubmit: onSearchSubmit,
       setSearchValue: setSearchValue,
@@ -1743,7 +1778,10 @@
       currency: currency,
       currencySymbol: currencySymbol,
       onProductSearchResultClick: onProductSearchResultClick,
-      onBrandSearchResultClick: onBrandSearchResultClick
+      onBrandSearchResultClick: onBrandSearchResultClick,
+      onCreateInterests: onCreateInterests,
+      noResultsImage: noResultsImage,
+      showNoResults: showNoResults
     }))), shop && /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,

package/LuxitySideNav.js

@@ -271,10 +271,10 @@
   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);
+    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);
+    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);
@@ -284,10 +284,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -301,9 +301,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -316,7 +316,7 @@
   };
 
   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;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -392,33 +392,33 @@
     });
   });
 
+  /* eslint-disable react/require-default-props */
+
   var Tooltip = function Tooltip(_ref) {
-    var children = _ref.children,
-        toolTipText = _ref.toolTipText,
-        toolTipPosition = _ref.toolTipPosition,
-        bodyWidth = _ref.bodyWidth,
-        apexWidth = _ref.apexWidth,
-        containerClassName = _ref.containerClassName,
-        bodyClassName = _ref.bodyClassName;
+    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,
+      $toolTipPosition: toolTipPosition,
+      $bodyWidth: bodyWidth,
+      $apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
-  Tooltip.defaultProps = {
-    children: null,
-    toolTipText: '',
-    toolTipPosition: 'top',
-    bodyWidth: '8em',
-    apexWidth: '5px',
-    containerClassName: '',
-    bodyClassName: ''
-  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {

package/MaterialSelector.js

@@ -1313,10 +1313,10 @@
   var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _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$1 || (_templateObject3$1 = _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);
+    return styled.css(_templateObject3$1 || (_templateObject3$1 = _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$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _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);
@@ -1326,10 +1326,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$toolTipPositio = props.toolTipPosition,
-        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+    var _props$$toolTipPositi = props.$toolTipPosition,
+        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -1343,9 +1343,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var toolTipPosition = props.toolTipPosition;
+    var $toolTipPosition = props.$toolTipPosition;
 
-    switch (toolTipPosition) {
+    switch ($toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -1358,7 +1358,7 @@
   };
 
   var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _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;
+    return props.$bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {