@bonlineza/luxity-lib 2.36.1-beta.4 → 2.36.1

package/LuxityMobileHeader.js

@@ -8,267 +8,164 @@
   axios = axios && Object.prototype.hasOwnProperty.call(axios, 'default') ? axios['default'] : axios;
   var styled__default = 'default' in styled ? styled['default'] : styled;
 
-  function _arrayLikeToArray(r, a) {
-    (null == a || a > r.length) && (a = r.length);
-    for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
-    return n;
-  }
-  function _arrayWithHoles(r) {
-    if (Array.isArray(r)) return r;
-  }
-  function _defineProperty(e, r, t) {
-    return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
-      value: t,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
-    }) : e[r] = t, e;
-  }
-  function _extends() {
-    return _extends = Object.assign ? Object.assign.bind() : function (n) {
-      for (var e = 1; e < arguments.length; e++) {
-        var t = arguments[e];
-        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-      }
-      return n;
-    }, _extends.apply(null, arguments);
-  }
-  function _iterableToArrayLimit(r, l) {
-    var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-    if (null != t) {
-      var e,
-        n,
-        i,
-        u,
-        a = [],
-        f = !0,
-        o = !1;
-      try {
-        if (i = (t = t.call(r)).next, 0 === l) {
-          if (Object(t) !== t) return;
-          f = !1;
-        } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-      } catch (r) {
-        o = !0, n = r;
-      } finally {
-        try {
-          if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
-        } finally {
-          if (o) throw n;
-        }
-      }
-      return a;
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+      enumerableOnly && (symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      })), keys.push.apply(keys, symbols);
     }
+
+    return keys;
   }
-  function _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.");
-  }
-  function ownKeys(e, r) {
-    var t = Object.keys(e);
-    if (Object.getOwnPropertySymbols) {
-      var o = Object.getOwnPropertySymbols(e);
-      r && (o = o.filter(function (r) {
-        return Object.getOwnPropertyDescriptor(e, r).enumerable;
-      })), t.push.apply(t, o);
+
+  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 t;
+
+    return target;
   }
-  function _objectSpread2(e) {
-    for (var r = 1; r < arguments.length; r++) {
-      var t = null != arguments[r] ? arguments[r] : {};
-      r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
-        _defineProperty(e, r, t[r]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
-        Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+
+  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 e;
+
+    return obj;
   }
-  function _slicedToArray(r, e) {
-    return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+
+  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);
   }
-  function _taggedTemplateLiteral(e, t) {
-    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
       raw: {
-        value: Object.freeze(t)
+        value: Object.freeze(raw)
       }
     }));
   }
-  function _toPrimitive(t, r) {
-    if ("object" != typeof t || !t) return t;
-    var e = t[Symbol.toPrimitive];
-    if (void 0 !== e) {
-      var i = e.call(t, r || "default");
-      if ("object" != typeof i) return i;
-      throw new TypeError("@@toPrimitive must return a primitive value.");
-    }
-    return ("string" === r ? String : Number)(t);
-  }
-  function _toPropertyKey(t) {
-    var i = _toPrimitive(t, "string");
-    return "symbol" == typeof i ? i : i + "";
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
-  function _unsupportedIterableToArray(r, a) {
-    if (r) {
-      if ("string" == typeof r) return _arrayLikeToArray(r, a);
-      var t = {}.toString.call(r).slice(8, -1);
-      return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
-    }
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
   }
 
-  var cssUnit = {
-      cm: true,
-      mm: true,
-      in: true,
-      px: true,
-      pt: true,
-      pc: true,
-      em: true,
-      ex: true,
-      ch: true,
-      rem: true,
-      vw: true,
-      vh: true,
-      vmin: true,
-      vmax: true,
-      "%": true,
-  };
-  /**
-   * If size is a number, append px to the value as default unit.
-   * If size is a string, validate against list of valid units.
-   * If unit is valid, return size as is.
-   * If unit is invalid, console warn issue, replace with px as the unit.
-   *
-   * @param {(number | string)} size
-   * @return {LengthObject} LengthObject
-   */
-  function parseLengthAndUnit(size) {
-      if (typeof size === "number") {
-          return {
-              value: size,
-              unit: "px",
-          };
-      }
-      var value;
-      var valueString = (size.match(/^[0-9.]*/) || "").toString();
-      if (valueString.includes(".")) {
-          value = parseFloat(valueString);
-      }
-      else {
-          value = parseInt(valueString, 10);
+  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;
+
+    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;
       }
-      var unit = (size.match(/[^0-9]*$/) || "").toString();
-      if (cssUnit[unit]) {
-          return {
-              value: value,
-              unit: unit,
-          };
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
       }
-      console.warn("React Spinners: ".concat(size, " is not a valid css value. Defaulting to ").concat(value, "px."));
-      return {
-          value: value,
-          unit: "px",
-      };
+    }
+
+    return _arr;
   }
-  /**
-   * Take value as an input and return valid css value
-   *
-   * @param {(number | string)} value
-   * @return {string} valid css value
-   */
-  function cssValue(value) {
-      var lengthWithunit = parseLengthAndUnit(value);
-      return "".concat(lengthWithunit.value).concat(lengthWithunit.unit);
+
+  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);
   }
 
-  var createAnimation = function (loaderName, frames, suffix) {
-      var animationName = "react-spinners-".concat(loaderName, "-").concat(suffix);
-      if (typeof window == "undefined" || !window.document) {
-          return animationName;
-      }
-      var styleEl = document.createElement("style");
-      document.head.appendChild(styleEl);
-      var styleSheet = styleEl.sheet;
-      var keyFrames = "\n    @keyframes ".concat(animationName, " {\n      ").concat(frames, "\n    }\n  ");
-      if (styleSheet) {
-          styleSheet.insertRule(keyFrames, 0);
-      }
-      return animationName;
-  };
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
 
-  var __assign = (undefined && undefined.__assign) || function () {
-      __assign = Object.assign || function(t) {
-          for (var s, i = 1, n = arguments.length; i < n; i++) {
-              s = arguments[i];
-              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                  t[p] = s[p];
-          }
-          return t;
-      };
-      return __assign.apply(this, arguments);
-  };
-  var __rest = (undefined && undefined.__rest) || function (s, e) {
-      var t = {};
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-          t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === "function")
-          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                  t[p[i]] = s[p[i]];
-          }
-      return t;
-  };
-  var beat = createAnimation("BeatLoader", "50% {transform: scale(0.75);opacity: 0.2} 100% {transform: scale(1);opacity: 1}", "beat");
-  function BeatLoader(_a) {
-      var _b = _a.loading, loading = _b === void 0 ? true : _b, _c = _a.color, color = _c === void 0 ? "#000000" : _c, _d = _a.speedMultiplier, speedMultiplier = _d === void 0 ? 1 : _d, _e = _a.cssOverride, cssOverride = _e === void 0 ? {} : _e, _f = _a.size, size = _f === void 0 ? 15 : _f, _g = _a.margin, margin = _g === void 0 ? 2 : _g, additionalprops = __rest(_a, ["loading", "color", "speedMultiplier", "cssOverride", "size", "margin"]);
-      var wrapper = __assign({ display: "inherit" }, cssOverride);
-      var style = function (i) {
-          return {
-              display: "inline-block",
-              backgroundColor: color,
-              width: cssValue(size),
-              height: cssValue(size),
-              margin: cssValue(margin),
-              borderRadius: "100%",
-              animation: "".concat(beat, " ").concat(0.7 / speedMultiplier, "s ").concat(i % 2 ? "0s" : "".concat(0.35 / speedMultiplier, "s"), " infinite linear"),
-              animationFillMode: "both",
-          };
-      };
-      if (!loading) {
-          return null;
-      }
-      return (React.createElement("span", __assign({ style: wrapper }, additionalprops),
-          React.createElement("span", { style: style(1) }),
-          React.createElement("span", { style: style(2) }),
-          React.createElement("span", { style: style(3) })));
+    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+    return arr2;
+  }
+
+  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 LuxityAppSideNav = function LuxityAppSideNav(_ref) {
     var closeIcon = _ref.closeIcon,
-      accountIcon = _ref.accountIcon,
-      orderIcon = _ref.orderIcon,
-      saleIcon = _ref.saleIcon,
-      onDashboardClick = _ref.onDashboardClick,
-      onLogoutClick = _ref.onLogoutClick,
-      bugReportLink = _ref.bugReportLink,
-      onLuxityShopClick = _ref.onLuxityShopClick,
-      onInterestClick = _ref.onInterestClick,
-      onAddressClick = _ref.onAddressClick,
-      onCouponsClick = _ref.onCouponsClick,
-      onEditProfileClick = _ref.onEditProfileClick,
-      onCurrentOrdersClick = _ref.onCurrentOrdersClick,
-      onPastOrdersClick = _ref.onPastOrdersClick,
-      onSubmissionsClick = _ref.onSubmissionsClick,
-      onPastSalesClick = _ref.onPastSalesClick,
-      onPaidOutClick = _ref.onPaidOutClick,
-      showSideNav = _ref.showSideNav,
-      onMenuClick = _ref.onMenuClick;
+        accountIcon = _ref.accountIcon,
+        orderIcon = _ref.orderIcon,
+        saleIcon = _ref.saleIcon,
+        onDashboardClick = _ref.onDashboardClick,
+        onLogoutClick = _ref.onLogoutClick,
+        bugReportLink = _ref.bugReportLink,
+        onLuxityShopClick = _ref.onLuxityShopClick,
+        onInterestClick = _ref.onInterestClick,
+        onAddressClick = _ref.onAddressClick,
+        onCouponsClick = _ref.onCouponsClick,
+        onEditProfileClick = _ref.onEditProfileClick,
+        onCurrentOrdersClick = _ref.onCurrentOrdersClick,
+        onPastOrdersClick = _ref.onPastOrdersClick,
+        onSubmissionsClick = _ref.onSubmissionsClick,
+        onPastSalesClick = _ref.onPastSalesClick,
+        onPaidOutClick = _ref.onPaidOutClick,
+        showSideNav = _ref.showSideNav,
+        onMenuClick = _ref.onMenuClick;
+
     var onCloseSideNav = function onCloseSideNav(e) {
       onMenuClick();
+
       if (e.key === 'Enter') {
         e.preventDefault();
       }
     };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -300,7 +197,7 @@
       src: accountIcon,
       alt: "close-icon",
       className: "side-nav__menu-icon"
-    }), "Account"))), /*#__PURE__*/React__default.createElement("div", {
+    }), "Account"))), onInterestClick && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-item"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
@@ -426,9 +323,9 @@
 
   var StoresDropdown = function StoresDropdown(_ref) {
     var backIcon = _ref.backIcon,
-      onBackClick = _ref.onBackClick,
-      stores = _ref.stores,
-      onContactUsClick = _ref.onContactUsClick;
+        onBackClick = _ref.onBackClick,
+        stores = _ref.stores,
+        onContactUsClick = _ref.onContactUsClick;
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__sub-menu"
     }, /*#__PURE__*/React__default.createElement("button", {
@@ -468,19 +365,20 @@
 
   var BrandsDropDown = function BrandsDropDown(_ref) {
     var subMenuOpen = _ref.subMenuOpen,
-      onBackClick = _ref.onBackClick,
-      onCloseSideNav = _ref.onCloseSideNav,
-      backIcon = _ref.backIcon,
-      subMenuCategoryTitle = _ref.subMenuCategoryTitle,
-      productUrl = _ref.productUrl,
-      categoryElements = _ref.categoryElements,
-      subMenuBrandsTitle = _ref.subMenuBrandsTitle,
-      _ref$brandsList = _ref.brandsList,
-      brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
-      categorySlug = _ref.categorySlug,
-      isLoading = _ref.isLoading,
-      hasError = _ref.hasError,
-      LinkComponent = _ref.LinkComponent;
+        onBackClick = _ref.onBackClick,
+        onCloseSideNav = _ref.onCloseSideNav,
+        backIcon = _ref.backIcon,
+        subMenuCategoryTitle = _ref.subMenuCategoryTitle,
+        productUrl = _ref.productUrl,
+        categoryElements = _ref.categoryElements,
+        subMenuBrandsTitle = _ref.subMenuBrandsTitle,
+        _ref$brandsList = _ref.brandsList,
+        brandsList = _ref$brandsList === void 0 ? [] : _ref$brandsList,
+        categorySlug = _ref.categorySlug,
+        isLoading = _ref.isLoading,
+        hasError = _ref.hasError,
+        LinkComponent = _ref.LinkComponent;
+
     var handleLinkClick = function handleLinkClick(event) {
       event.preventDefault();
       var href = event.currentTarget.getAttribute('href');
@@ -488,6 +386,7 @@
       onCloseSideNav();
       window.location.href = href;
     };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content ".concat(subMenuOpen ? '' : 'side-nav__content--hidden')
     }, hasError ? /*#__PURE__*/React__default.createElement("div", {
@@ -534,6 +433,7 @@
       className: "side-nav__element"
     }, "All Brands"), !!brandsList.length && brandsList.map(function (brand) {
       return /*#__PURE__*/React__default.createElement(LinkComponent, {
+        key: brand.slug,
         href: "".concat(productUrl, "/").concat(categorySlug === 'new' ? 'brands' : categorySlug, "/").concat(brand.slug),
         onClick: handleLinkClick,
         className: "side-nav__element"
@@ -543,37 +443,15 @@
 
   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 !== name;
+      return category.name.toLowerCase() !== name.toLowerCase();
     })) !== null && _categories$filter !== void 0 ? _categories$filter : [];
   };
 
-  var categories = {
-    shoes: {
-      name: 'Shoes',
-      slug: 'shoes'
-    },
-    bags: {
-      name: 'Bags',
-      slug: 'bags'
-    },
-    clothing: {
-      name: 'Clothing',
-      slug: 'apparel'
-    },
-    watches: {
-      name: 'Watches',
-      slug: 'watches'
-    },
-    accessories: {
-      name: 'Accessories',
-      slug: 'accessories'
-    }
-  };
-
   var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
   /* position relative is required for the Body element to be positioned correctly */
+
   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) {
@@ -587,31 +465,40 @@
   };
 
   var _templateObject$1;
+
   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;
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
+
     switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
+
       case 'bottom':
         return getBottomMiddleBodyStyle(props);
+
       default:
         return null;
     }
   };
+
   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 '';
     }
   };
+
   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) {
@@ -691,12 +578,12 @@
 
   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;
+        toolTipText = _ref.toolTipText,
+        toolTipPosition = _ref.toolTipPosition,
+        bodyWidth = _ref.bodyWidth,
+        apexWidth = _ref.apexWidth,
+        containerClassName = _ref.containerClassName,
+        bodyClassName = _ref.bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
@@ -706,6 +593,7 @@
       className: bodyClassName
     }, toolTipText));
   };
+
   Tooltip.defaultProps = {
     children: null,
     toolTipText: '',
@@ -719,21 +607,25 @@
 
   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;
+        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;
     }
+
     var selectedOption = currencyOptions.find(function (opt) {
       return opt.value === currency;
     });
+
     if (!selectedOption) {
       return null;
     }
+
     return /*#__PURE__*/React__default.createElement(Tooltip$1, {
       toolTipText: isCurrencySelectionDisabled ? tooltipContent : '',
       toolTipPosition: "bottom",
@@ -762,77 +654,79 @@
 
   var LuxitySideNav = function LuxitySideNav(_ref) {
     var accordionIcon = _ref.accordionIcon,
-      closeIcon = _ref.closeIcon,
-      backIcon = _ref.backIcon,
-      productUrl = _ref.productUrl,
-      onAccountClick = _ref.onAccountClick,
-      onCartClick = _ref.onCartClick,
-      onContactUsClick = _ref.onContactUsClick,
-      onOurStoryClick = _ref.onOurStoryClick,
-      onBlogClick = _ref.onBlogClick,
-      onSellToUsClick = _ref.onSellToUsClick,
-      stores = _ref.stores,
-      categoryElements = _ref.categoryElements,
-      showSideNav = _ref.showSideNav,
-      onMenuClick = _ref.onMenuClick,
-      menuData = _ref.menuData,
-      currency = _ref.currency,
-      currencyOptions = _ref.currencyOptions,
-      onCurrencyChange = _ref.onCurrencyChange,
-      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
-      tooltipContent = _ref.tooltipContent,
-      LinkComponent = _ref.LinkComponent;
+        closeIcon = _ref.closeIcon,
+        backIcon = _ref.backIcon,
+        productUrl = _ref.productUrl,
+        onAccountClick = _ref.onAccountClick,
+        onCartClick = _ref.onCartClick,
+        onContactUsClick = _ref.onContactUsClick,
+        onOurStoryClick = _ref.onOurStoryClick,
+        onBlogClick = _ref.onBlogClick,
+        onSellToUsClick = _ref.onSellToUsClick,
+        stores = _ref.stores,
+        categoryElements = _ref.categoryElements,
+        showSideNav = _ref.showSideNav,
+        onMenuClick = _ref.onMenuClick,
+        currency = _ref.currency,
+        currencyOptions = _ref.currencyOptions,
+        onCurrencyChange = _ref.onCurrencyChange,
+        isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+        tooltipContent = _ref.tooltipContent,
+        LinkComponent = _ref.LinkComponent,
+        categoryConfig = _ref.categoryConfig;
+
     var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      subMenuOpen = _useState2[0],
-      setSubMenuOpen = _useState2[1];
+        _useState2 = _slicedToArray(_useState, 2),
+        subMenuOpen = _useState2[0],
+        setSubMenuOpen = _useState2[1];
+
     var _useState3 = React.useState(''),
-      _useState4 = _slicedToArray(_useState3, 2),
-      displayedSubMenu = _useState4[0],
-      setDisplayedSubMenu = _useState4[1];
+        _useState4 = _slicedToArray(_useState3, 2),
+        displayedSubMenu = _useState4[0],
+        setDisplayedSubMenu = _useState4[1];
+
     var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      loading = _useState6[0],
-      setLoading = _useState6[1];
-    var _useState7 = React.useState({
-        latestArrivals: [],
-        bags: [],
-        shoes: [],
-        apparel: [],
-        accessories: [],
-        watches: [],
-        accessoriesCategories: [],
-        apparelStyles: []
-      }),
-      _useState8 = _slicedToArray(_useState7, 2),
-      dropdownData = _useState8[0],
-      setDropdownData = _useState8[1];
+        _useState6 = _slicedToArray(_useState5, 2),
+        loading = _useState6[0],
+        setLoading = _useState6[1];
+
+    var _useState7 = React.useState({}),
+        _useState8 = _slicedToArray(_useState7, 2),
+        dropdownData = _useState8[0],
+        setDropdownData = _useState8[1];
+
     var _useState9 = React.useState(false),
-      _useState10 = _slicedToArray(_useState9, 2),
-      hasError = _useState10[0],
-      setHasError = _useState10[1];
+        _useState10 = _slicedToArray(_useState9, 2),
+        hasError = _useState10[0],
+        setHasError = _useState10[1];
+
     var onSubMenuClick = function onSubMenuClick(subMenu) {
       setSubMenuOpen(function (prev) {
         return !prev;
       });
       setDisplayedSubMenu(subMenu);
     };
+
     var onStoresClick = function onStoresClick() {
       setSubMenuOpen(false);
       setDisplayedSubMenu('stores');
     };
+
     var onBackClick = function onBackClick() {
       setSubMenuOpen(false);
       setDisplayedSubMenu('');
     };
+
     var onCloseSideNav = function onCloseSideNav(e) {
       onMenuClick();
       setSubMenuOpen(false);
       setDisplayedSubMenu('');
+
       if (e && e.key === 'Enter') {
         e.preventDefault();
       }
     };
+
     function addCategoryToElements(elements, categoryName) {
       return elements.map(function (element) {
         return _objectSpread2(_objectSpread2({}, element), {}, {
@@ -840,27 +734,96 @@
         });
       });
     }
+
     React.useMemo(function () {
       setLoading(true);
-      axios.get("".concat(menuData)).then(function (_ref2) {
+      axios.get("".concat(categoryConfig.menuData)).then(function (_ref2) {
         var data = _ref2.data;
         setLoading(false);
-        setDropdownData(function (prev) {
-          return _objectSpread2(_objectSpread2({}, prev), {}, {
-            latestArrivals: data.latest_arrivals,
-            bags: data.bags,
-            shoes: data.shoes,
-            apparel: data.apparel,
-            accessories: data.accessories,
-            watches: data.watches,
-            accessoriesCategories: data.accessories_categories,
-            apparelStyles: data.apparel_styles
-          });
-        });
+        setDropdownData(data);
       }).catch(function () {
         return setHasError(true);
       });
-    }, [menuData]);
+    }, [categoryConfig.menuData]);
+
+    var renderMenuItems = function renderMenuItems() {
+      return categoryConfig.categories.map(function (category) {
+        var title = category.title,
+            categorySlug = category.categorySlug;
+        var slug = categorySlug;
+
+        if (categorySlug === 'brands') {
+          slug = 'new';
+        }
+
+        return /*#__PURE__*/React__default.createElement("div", {
+          className: "side-nav__menu-item",
+          key: slug
+        }, /*#__PURE__*/React__default.createElement("button", {
+          type: "button",
+          className: "side-nav__menu-title-wrapper",
+          onClick: function onClick() {
+            return onSubMenuClick(slug);
+          }
+        }, /*#__PURE__*/React__default.createElement("span", {
+          className: "side-nav__menu-title"
+        }, title), /*#__PURE__*/React__default.createElement("img", {
+          src: accordionIcon,
+          alt: "accordion-icon",
+          className: "side-nav__accordion-icon"
+        })));
+      });
+    };
+
+    var renderDropdownLinks = function renderDropdownLinks() {
+      return categoryConfig.categories.map(function (category) {
+        var 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);
+        }
+
+        var subMenuTitle = 'Brands';
+
+        if (categorySlug !== 'brands') {
+          subMenuTitle = "".concat(categoryName, " Brands");
+        }
+
+        var subMenu = categorySlug;
+
+        if (subMenu === 'brands') {
+          subMenu = 'new';
+        }
+
+        return /*#__PURE__*/React__default.createElement(BrandsDropDown, {
+          key: categorySlug,
+          subMenuOpen: subMenuOpen && displayedSubMenu === subMenu,
+          onBackClick: onBackClick,
+          backIcon: backIcon,
+          subMenuCategoryTitle: "Department",
+          productUrl: productUrl,
+          categoryElements: categoryElementsProcessed,
+          subMenuBrandsTitle: subMenuTitle,
+          brandsList: dropdownData[elementsKey],
+          categorySlug: displayedSubMenu,
+          isLoading: loading,
+          hasError: hasError,
+          onCloseSideNav: onCloseSideNav,
+          LinkComponent: LinkComponent
+        });
+      });
+    };
+
     return /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -881,92 +844,9 @@
       className: "side-nav__close-icon"
     })), /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__menu-items-wrapper"
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('new');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "New"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('bags');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Bags"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('shoes');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Shoes"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('apparel');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Clothing"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('accessories');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Accessories"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
-    }, /*#__PURE__*/React__default.createElement("button", {
-      type: "button",
-      className: "side-nav__menu-title-wrapper",
-      onClick: function onClick() {
-        return onSubMenuClick('watches');
-      }
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: "side-nav__menu-title"
-    }, "Watches"), /*#__PURE__*/React__default.createElement("img", {
-      src: accordionIcon,
-      alt: "accordion-icon",
-      className: "side-nav__accordion-icon"
-    }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+    }, renderMenuItems(), !!stores.length && /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item",
+      key: "stores"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__menu-title-wrapper",
@@ -978,134 +858,58 @@
       alt: "accordion-icon",
       className: "side-nav__accordion-icon"
     }))), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "sell-to-us"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__block-button",
       onClick: onSellToUsClick
     }, "Sell To Us")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "our-story"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onOurStoryClick
-    }, "Our Story")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+    }, "Our Story")), typeof onBlogClick === 'function' && /*#__PURE__*/React__default.createElement("div", {
+      className: "side-nav__menu-item",
+      key: "blog"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onBlogClick
     }, "Blog")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "contact-us"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onContactUsClick
     }, "Contact Us")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "my-account"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onAccountClick
     }, "My Account")), /*#__PURE__*/React__default.createElement("div", {
-      className: "side-nav__menu-item"
+      className: "side-nav__menu-item",
+      key: "my-cart"
     }, /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       className: "side-nav__sub-link",
       onClick: onCartClick
     }, "My Cart")), /*#__PURE__*/React__default.createElement(CurrencySelect, {
+      key: "currency",
       currency: currency,
       currencyOptions: currencyOptions,
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent
-    }))), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'new',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: categoryElements,
-      subMenuBrandsTitle: "Brands",
-      brandsList: dropdownData.latestArrivals,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'bags',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.bags.slug),
-      subMenuBrandsTitle: "Bag Brands",
-      brandsList: dropdownData.bags,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'shoes',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.shoes.slug),
-      subMenuBrandsTitle: "Shoe Brands",
-      brandsList: dropdownData.shoes,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'apparel',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(dropdownData.apparelStyles, categories.clothing.slug),
-      subMenuBrandsTitle: "Clothing Brands",
-      brandsList: dropdownData.apparel,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'accessories',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Categories",
-      productUrl: productUrl,
-      categoryElements: removeCategoryByName(dropdownData.accessoriesCategories, 'ACCESSORIES'),
-      subMenuBrandsTitle: "Accessory Brands",
-      brandsList: dropdownData.accessories,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), /*#__PURE__*/React__default.createElement(BrandsDropDown, {
-      subMenuOpen: subMenuOpen && displayedSubMenu === 'watches',
-      onBackClick: onBackClick,
-      backIcon: backIcon,
-      subMenuCategoryTitle: "Department",
-      productUrl: productUrl,
-      categoryElements: addCategoryToElements(categoryElements, categories.watches.slug),
-      subMenuBrandsTitle: "Watches Brands",
-      brandsList: dropdownData.watches,
-      categorySlug: displayedSubMenu,
-      isLoading: loading,
-      hasError: hasError,
-      onCloseSideNav: onCloseSideNav,
-      LinkComponent: LinkComponent
-    }), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
+    }))), renderDropdownLinks(), displayedSubMenu === 'stores' && /*#__PURE__*/React__default.createElement("div", {
       className: "side-nav__content"
     }, /*#__PURE__*/React__default.createElement(StoresDropdown, {
+      key: "stores",
       backIcon: backIcon,
       onBackClick: onBackClick,
       stores: stores,
@@ -1113,172 +917,306 @@
     })));
   };
 
-  var searchProducts = function searchProducts(search, limit) {
-    return {
-      query: "\n      query SearchProducts($search: String!, $limit: Int!) {\n        luxity_products_serach_results(search: $search, limit: $limit) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n          }\n          luxity_product_ids\n        }\n      }\n    ",
-      variables: {
-        search: search,
-        limit: limit
+  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 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;
+
+    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 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 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;
+
+    if (!hasResults && !hasInitialData) {
+      return null;
+    }
+
+    if (!isSearchFocused) {
+      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 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
+      };
+      return /*#__PURE__*/React__default.createElement("a", {
+        key: product.link,
+        href: product.link,
+        className: "product-card"
+      }, 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) : product.name), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__info-row"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price-group"
+      }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price"
+      }, formatPrice(selectedPrice.price)), selectedPrice.retail_price > 1 && /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__retail-price"
+      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__condition"
+      }, /*#__PURE__*/React__default.createElement("span", {
+        className: "product-card__condition-label"
+      }, "Condition:"), product.condition))));
+    };
+
+    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);
       }
+
+      return brands;
     };
-  };
 
-  var SearchResults = function SearchResults(_ref) {
-    var searchValue = _ref.searchValue,
-      searchResults = _ref.searchResults,
-      onViewAll = _ref.onViewAll,
-      searchResultsRef = _ref.searchResultsRef,
-      onSearchSubmit = _ref.onSearchSubmit,
-      setSearchValue = _ref.setSearchValue;
-    if (searchValue.trim().length >= 3) {
-      if (searchResults.brands.length === 0 && searchResults.products.length === 0) {
-        return null;
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results",
+      ref: searchResultsRef
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__section"
+    }, /*#__PURE__*/React__default.createElement("h2", {
+      className: "search-results__header"
+    }, shouldShowInitialData ? 'TRENDING SEARCHES' : 'BRANDS'), /*#__PURE__*/React__default.createElement("div", {
+      className: "search-results__list"
+    }, shouldShowInitialData ? (_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"
+      }, brand.name);
+    }) : (_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,
+        className: "search-results__item"
+      }, brand.name);
+    }))), /*#__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", {
+      type: "button",
+      className: "search-results__view-all-link",
+      onClick: function onClick() {
+        onViewAll();
       }
-      return /*#__PURE__*/React__default.createElement("div", {
-        className: "z-50 absolute md:top-14 font-body bg-white w-full lg:w-1/2 flex flex-col md:flex-row md:divide-x divide-black lg:mt-1 shadow-md",
-        ref: searchResultsRef
-      }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full lg:w-1/3"
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "font-bold p-2 px-4"
-      }, "Brands"), searchResults.brands.map(function (brand) {
-        return /*#__PURE__*/React__default.createElement("a", {
-          key: brand.link,
-          href: brand.link,
-          className: ""
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "p-2 px-4 hover:bg-gray-100"
-        }, brand.name));
-      })), /*#__PURE__*/React__default.createElement("div", {
-        className: "w-full lg:w-2/3"
-      }, /*#__PURE__*/React__default.createElement("p", {
-        className: "font-bold p-2 px-4"
-      }, "Products"), searchResults.products.map(function (product) {
-        return /*#__PURE__*/React__default.createElement("a", {
-          key: product.link,
-          href: product.link
-        }, /*#__PURE__*/React__default.createElement("div", {
-          className: "p-2 px-4 hover:bg-gray-100"
-        }, product.name));
-      }), /*#__PURE__*/React__default.createElement("button", {
-        type: "button",
-        onClick: function onClick() {
-          onViewAll();
+    }, "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", {
+      type: "button",
+      className: "search-results__view-all-button",
+      onClick: function onClick() {
+        onViewAll();
+
+        if (!shouldShowInitialData) {
           onSearchSubmit(searchValue);
           setSearchValue('');
-        },
-        className: "bottom-0 mt-5 py-3 w-full font-body text-center text-white uppercase bg-black hover:bg-gray-950 border border-black transition-all ease-in-out duration-300 cursor-pointer"
-      }, "View all"))));
-    }
-    return null;
+          setIsSearchFocused(false);
+        }
+      }
+    }, "View all items")));
   };
 
-  var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
-    var logoSrc = _ref.logoSrc,
-      menuIcon = _ref.menuIcon,
-      inputSearchIcon = _ref.inputSearchIcon,
-      onCartClick = _ref.onCartClick,
-      cartIcon = _ref.cartIcon,
-      cartCount = _ref.cartCount,
-      closeIcon = _ref.closeIcon,
-      accountIcon = _ref.accountIcon,
-      saleIcon = _ref.saleIcon,
-      orderIcon = _ref.orderIcon,
-      accordionIcon = _ref.accordionIcon,
-      backIcon = _ref.backIcon,
-      productsUrl = _ref.productsUrl,
-      stores = _ref.stores,
-      categoryElements = _ref.categoryElements,
-      onAccountClick = _ref.onAccountClick,
-      onDashboardClick = _ref.onDashboardClick,
-      onContactUsClick = _ref.onContactUsClick,
-      onOurStoryClick = _ref.onOurStoryClick,
-      onBlogClick = _ref.onBlogClick,
-      bugReportLink = _ref.bugReportLink,
-      onSellToUsClick = _ref.onSellToUsClick,
-      onLogoClick = _ref.onLogoClick,
-      onLuxityShopClick = _ref.onLuxityShopClick,
-      endpoint = _ref.endpoint,
-      menuData = _ref.menuData,
-      onSearchSubmit = _ref.onSearchSubmit,
-      onProductIdsReceived = _ref.onProductIdsReceived,
-      onLogoutClick = _ref.onLogoutClick,
-      onInterestClick = _ref.onInterestClick,
-      onAddressClick = _ref.onAddressClick,
-      onCouponsClick = _ref.onCouponsClick,
-      onEditProfileClick = _ref.onEditProfileClick,
-      onCurrentOrdersClick = _ref.onCurrentOrdersClick,
-      onPastOrdersClick = _ref.onPastOrdersClick,
-      onSubmissionsClick = _ref.onSubmissionsClick,
-      onPastSalesClick = _ref.onPastSalesClick,
-      onPaidOutClick = _ref.onPaidOutClick,
-      currency = _ref.currency,
-      currencyOptions = _ref.currencyOptions,
-      onCurrencyChange = _ref.onCurrencyChange,
-      isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
-      tooltipContent = _ref.tooltipContent,
-      LinkComponent = _ref.LinkComponent,
-      shop = _ref.shop,
-      app = _ref.app;
-    var _useState = React.useState(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
-    var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      showSearchBar = _useState4[0],
-      setShowSearchbar = _useState4[1];
-    var _useState5 = React.useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      showSideNav = _useState6[0],
-      setShowSideNav = _useState6[1];
-    var _useState7 = React.useState(false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      searchLoading = _useState8[0],
-      setSearchLoading = _useState8[1];
-    var _useState9 = React.useState({
-        brands: [],
-        products: []
-      }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      searchResults = _useState10[0],
-      setSearchResults = _useState10[1];
-    var debounce = function debounce(func, wait) {
+  var searchProducts = function searchProducts(search, limit, currencyCode) {
+    return {
+      query: "\n      query SearchProducts($search: String!, $limit: Int!, $currencyCode: String!) {\n        luxity_products_serach_results(search: $search, limit: $limit, currency_code: $currencyCode) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n            price\n            est_retail_price\n            condition\n            featured_image\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        limit: limit,
+        currencyCode: currencyCode
+      }
+    };
+  };
+
+  var useSearch = function useSearch(_ref) {
+    var endpoint = _ref.endpoint,
+        onProductIdsReceived = _ref.onProductIdsReceived,
+        currency = _ref.currency;
+    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];
         }
+
         var later = function later() {
           clearTimeout(timeout);
           func.apply(void 0, args);
         };
+
         clearTimeout(timeout);
         timeout = setTimeout(later, wait);
       };
-    };
-    var debouncedSearch = React.useCallback(debounce(function (nextValue) {
-      setSearchLoading(true);
-      axios.post(endpoint, searchProducts(nextValue, 6)).then(function (response) {
-        setSearchResults(response.data.data.luxity_products_serach_results);
-        var ids = response.data.data.luxity_products_serach_results.luxity_product_ids;
-        onProductIdsReceived(ids);
-        setSearchLoading(false);
+    }, []);
+    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 () {
-        setSearchLoading(false);
+        setInitialSearchView({
+          trending_brands: [],
+          latest_products: []
+        });
       });
-    }, 500), [endpoint]);
-    var immediateSearch = React.useCallback(function (value) {
-      setSearchValue('');
-      setSearchResults({
-        brands: [],
-        products: []
+    }, []);
+    var performSearch = React.useCallback(function (searchQuery, setSearchResults) {
+      if (!searchQuery || searchQuery.trim() === '') {
+        setSearchResults({
+          brands: [],
+          products: [],
+          luxity_product_ids: []
+        });
+        return;
+      } // Cancel any ongoing search request to prevent race conditions
+
+
+      if (currentSearchRequestToken.current) {
+        currentSearchRequestToken.current.cancel();
+      } // Create a new token for this specific search request
+
+
+      var newSearchToken = axios.CancelToken.source();
+      currentSearchRequestToken.current = newSearchToken;
+      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+        cancelToken: newSearchToken.token
+      }).then(function (response) {
+        if (currentSearchRequestToken.current === newSearchToken) {
+          var searchResults = response.data.data.luxity_products_serach_results;
+          setSearchResults(searchResults);
+
+          if (searchResults && searchResults.luxity_product_ids) {
+            onProductIdsReceived(searchResults.luxity_product_ids);
+          }
+
+          currentSearchRequestToken.current = null;
+        }
+      }).catch(function (error) {
+        if (!axios.isCancel(error)) {
+          setSearchResults({
+            brands: [],
+            products: [],
+            luxity_product_ids: []
+          });
+          currentSearchRequestToken.current = null;
+        }
       });
-      onSearchSubmit(value);
-    }, [onSearchSubmit]);
-    var handleChange = function handleChange(event) {
+    }, [endpoint, currency, onProductIdsReceived]);
+    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;
+        }
+
+        setSearchValue('');
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        onSearchSubmit(searchQuery);
+      };
+    }, []);
+    return {
+      fetchInitialSearchData: fetchInitialSearchData,
+      createDebouncedSearch: createDebouncedSearch,
+      createImmediateSearch: createImmediateSearch
+    };
+  };
+
+  var useSearchClickOutside = function useSearchClickOutside(ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults) {
+    React.useEffect(function () {
+      var handleClickOutside = function handleClickOutside(event) {
+        if (ref.current && !ref.current.contains(event.target)) {
+          setCachedResults(searchResults);
+          setIsSearchFocused(false);
+          setSearchResults({
+            brands: [],
+            products: []
+          });
+        }
+      };
+
+      document.addEventListener('mousedown', handleClickOutside);
+      return function () {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [ref, searchResults, setCachedResults, setIsSearchFocused, setSearchResults]);
+  };
+  var useSearchInputChange = function useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults) {
+    return React.useCallback(function (event) {
       var value = event.target.value;
       setSearchValue(value);
+      setIsSearchFocused(true);
+
       if (value.trim().length >= 3) {
         debouncedSearch(value);
       } else {
@@ -1286,87 +1224,268 @@
           brands: [],
           products: []
         });
+        setCachedResults({
+          brands: [],
+          products: []
+        });
       }
-    };
-    var handleKeyDown = function handleKeyDown(event) {
+    }, [setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults]);
+  };
+  var useSearchInputFocus = function useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults) {
+    var handleSearchClick = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+    return React.useCallback(function () {
+      setIsSearchFocused(true);
+
+      if (typeof handleSearchClick === 'function') {
+        handleSearchClick();
+      } else if (searchValue.trim().length >= 3) {
+        setSearchResults(cachedResults);
+      }
+    }, [searchValue, setIsSearchFocused, cachedResults, setSearchResults, handleSearchClick]);
+  };
+  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);
         }
-      } else if (event.key === 'Escape') {
+
+        setIsSearchFocused(false);
+      } else if (event.key === 'Escape' && setSearchValue) {
         setSearchValue('');
+        setIsSearchFocused(false);
       }
-    };
+    }, [searchValue, immediateSearch, setIsSearchFocused, setSearchValue]);
+  };
+
+  var LuxityMobileHeader = function LuxityMobileHeader(_ref) {
+    var logoSrc = _ref.logoSrc,
+        menuIcon = _ref.menuIcon,
+        inputSearchIcon = _ref.inputSearchIcon,
+        onCartClick = _ref.onCartClick,
+        cartIcon = _ref.cartIcon,
+        cartCount = _ref.cartCount,
+        closeIcon = _ref.closeIcon,
+        accountIcon = _ref.accountIcon,
+        saleIcon = _ref.saleIcon,
+        orderIcon = _ref.orderIcon,
+        accordionIcon = _ref.accordionIcon,
+        backIcon = _ref.backIcon,
+        productsUrl = _ref.productsUrl,
+        stores = _ref.stores,
+        categoryElements = _ref.categoryElements,
+        onAccountClick = _ref.onAccountClick,
+        onDashboardClick = _ref.onDashboardClick,
+        onContactUsClick = _ref.onContactUsClick,
+        onOurStoryClick = _ref.onOurStoryClick,
+        _ref$onBlogClick = _ref.onBlogClick,
+        onBlogClick = _ref$onBlogClick === void 0 ? undefined : _ref$onBlogClick,
+        bugReportLink = _ref.bugReportLink,
+        onSellToUsClick = _ref.onSellToUsClick,
+        onLogoClick = _ref.onLogoClick,
+        onLuxityShopClick = _ref.onLuxityShopClick,
+        endpoint = _ref.endpoint,
+        initialSearchData = _ref.initialSearchData,
+        onSearchSubmit = _ref.onSearchSubmit,
+        onProductIdsReceived = _ref.onProductIdsReceived,
+        onLogoutClick = _ref.onLogoutClick,
+        onInterestClick = _ref.onInterestClick,
+        onAddressClick = _ref.onAddressClick,
+        onCouponsClick = _ref.onCouponsClick,
+        onEditProfileClick = _ref.onEditProfileClick,
+        onCurrentOrdersClick = _ref.onCurrentOrdersClick,
+        onPastOrdersClick = _ref.onPastOrdersClick,
+        onSubmissionsClick = _ref.onSubmissionsClick,
+        onPastSalesClick = _ref.onPastSalesClick,
+        onPaidOutClick = _ref.onPaidOutClick,
+        currency = _ref.currency,
+        currencySymbol = _ref.currencySymbol,
+        currencyOptions = _ref.currencyOptions,
+        onCurrencyChange = _ref.onCurrencyChange,
+        isCurrencySelectionDisabled = _ref.isCurrencySelectionDisabled,
+        tooltipContent = _ref.tooltipContent,
+        LinkComponent = _ref.LinkComponent,
+        shop = _ref.shop,
+        app = _ref.app,
+        categoryConfig = _ref.categoryConfig;
+
+    var _useSearch = useSearch({
+      endpoint: endpoint,
+      onProductIdsReceived: onProductIdsReceived,
+      currency: currency
+    }),
+        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),
+        _useState4 = _slicedToArray(_useState3, 2),
+        showSearchBar = _useState4[0],
+        setShowSearchbar = _useState4[1];
+
+    var _useState5 = React.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        showSideNav = _useState6[0],
+        setShowSideNav = _useState6[1];
+
+    var _useState7 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState8 = _slicedToArray(_useState7, 2),
+        searchResults = _useState8[0],
+        setSearchResults = _useState8[1];
+
+    var _useState9 = React.useState({
+      brands: [],
+      products: []
+    }),
+        _useState10 = _slicedToArray(_useState9, 2),
+        cachedResults = _useState10[0],
+        setCachedResults = _useState10[1];
+
+    var _useState11 = React.useState(false),
+        _useState12 = _slicedToArray(_useState11, 2),
+        isSearchFocused = _useState12[0],
+        setIsSearchFocused = _useState12[1];
+
+    var _useState13 = React.useState({
+      trending_brands: [],
+      latest_products: []
+    }),
+        _useState14 = _slicedToArray(_useState13, 2),
+        initialSearchView = _useState14[0],
+        setInitialSearchView = _useState14[1];
+
+    var searchResultsRef = React.useRef(null);
+    var searchInputRef = React.useRef(null);
+    var debouncedSearch = createDebouncedSearch(function (results) {
+      setSearchResults(results);
+      setCachedResults(results);
+    });
+    var immediateSearch = createImmediateSearch(setSearchValue, setSearchResults, onSearchSubmit);
+    var handleChange = useSearchInputChange(setSearchValue, setIsSearchFocused, debouncedSearch, setSearchResults, setCachedResults);
+    var handleKeyDown = useSearchInputKeyDown(searchValue, immediateSearch, setIsSearchFocused, setSearchValue);
+    React.useMemo(function () {
+      if (!initialSearchData) {
+        return;
+      }
+
+      fetchInitialSearchData(initialSearchData, setInitialSearchView);
+    }, [initialSearchData, fetchInitialSearchData]);
+    useSearchClickOutside(searchResultsRef, searchResults, setCachedResults, setIsSearchFocused, setSearchResults);
+    var handleSearchFocus = useSearchInputFocus(searchValue, setIsSearchFocused, cachedResults, setSearchResults);
+    React.useEffect(function () {
+      if (showSearchBar && searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [showSearchBar]);
+
     var onSearchClick = function onSearchClick() {
       setShowSearchbar(function (prev) {
         return !prev;
       });
       setSearchValue('');
+      setIsSearchFocused(!showSearchBar);
+
+      if (showSearchBar) {
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+      }
     };
+
     var onMenuClick = function onMenuClick() {
       setShowSideNav(function (prev) {
         return !prev;
       });
     };
+
     var handleClick = function handleClick(callback) {
       callback();
       setShowSideNav(false);
     };
+
     var handleDashboardClick = function handleDashboardClick() {
       return handleClick(onDashboardClick);
     };
+
     var handleSellToUsClick = function handleSellToUsClick() {
       return handleClick(onSellToUsClick);
     };
+
     var handleCartClick = function handleCartClick() {
       return handleClick(onCartClick);
     };
+
     var handleLuxityShopClick = function handleLuxityShopClick() {
       return handleClick(onLuxityShopClick);
     };
+
     var handleLogoutClick = function handleLogoutClick() {
       return handleClick(onLogoutClick);
     };
+
     var handleInterestClick = function handleInterestClick() {
       return handleClick(onInterestClick);
     };
+
     var handleAddressClick = function handleAddressClick() {
       return handleClick(onAddressClick);
     };
+
     var handleCouponsClick = function handleCouponsClick() {
       return handleClick(onCouponsClick);
     };
+
     var handleEditProfileClick = function handleEditProfileClick() {
       return handleClick(onEditProfileClick);
     };
+
     var handleCurrentOrdersClick = function handleCurrentOrdersClick() {
       return handleClick(onCurrentOrdersClick);
     };
+
     var handlePastOrdersClick = function handlePastOrdersClick() {
       return handleClick(onPastOrdersClick);
     };
+
     var handlePastSalesClick = function handlePastSalesClick() {
       return handleClick(onPastSalesClick);
     };
+
     var handlePaidOutClick = function handlePaidOutClick() {
       return handleClick(onPaidOutClick);
     };
+
     var handleSubmissionsClick = function handleSubmissionsClick() {
       return handleClick(onSubmissionsClick);
     };
+
     var handleAccountClick = function handleAccountClick() {
       return handleClick(onAccountClick);
     };
+
     var handleContactUsClick = function handleContactUsClick() {
       return handleClick(onContactUsClick);
     };
+
     var handleOurStoryClick = function handleOurStoryClick() {
       return handleClick(onOurStoryClick);
     };
-    var handleBlogClick = function handleBlogClick() {
+
+    var handleBlogClick = onBlogClick ? function () {
       return handleClick(onBlogClick);
-    };
+    } : undefined;
     return /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar navbar__mobile-wrapper"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -1387,7 +1506,8 @@
       className: "navbar__logo"
     }, /*#__PURE__*/React__default.createElement("img", {
       src: logoSrc,
-      alt: "luxity-logo"
+      alt: "luxity-logo",
+      loading: "eager"
     }))), /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__icons-wrapper"
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -1418,18 +1538,14 @@
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "navbar__product-search"
     }, /*#__PURE__*/React__default.createElement("input", {
+      ref: searchInputRef,
       className: "navbar__form-input",
       type: "text",
       placeholder: "Search for items and designs",
       value: searchValue,
       onChange: handleChange,
-      onKeyDown: handleKeyDown
-    }), searchLoading && /*#__PURE__*/React__default.createElement(BeatLoader, {
-      color: "#000000",
-      loading: searchLoading,
-      size: 5,
-      "aria-label": "Loading Spinner",
-      "data-testid": "loader"
+      onKeyDown: handleKeyDown,
+      onFocus: handleSearchFocus
     })), /*#__PURE__*/React__default.createElement("button", {
       type: "button",
       onClick: onSearchClick
@@ -1439,14 +1555,24 @@
       className: "navbar__input-close-icon"
     })))), /*#__PURE__*/React__default.createElement(SearchResults, {
       searchValue: searchValue,
-      searchLoading: searchLoading,
       searchResults: searchResults,
       onViewAll: function onViewAll() {
         onSearchSubmit(searchValue);
         setSearchValue('');
+        setSearchResults({
+          brands: [],
+          products: []
+        });
+        setIsSearchFocused(false);
       },
       onSearchSubmit: onSearchSubmit,
-      setSearchValue: setSearchValue
+      setSearchValue: setSearchValue,
+      searchResultsRef: searchResultsRef,
+      initialSearchData: initialSearchView,
+      isSearchFocused: isSearchFocused,
+      setIsSearchFocused: setIsSearchFocused,
+      currency: currency,
+      currencySymbol: currencySymbol
     }), shop && /*#__PURE__*/React__default.createElement(LuxitySideNav, {
       accordionIcon: accordionIcon,
       logoSrc: logoSrc,
@@ -1464,13 +1590,13 @@
       showSideNav: showSideNav,
       onMenuClick: onMenuClick,
       endpoint: endpoint,
-      menuData: menuData,
       currency: currency,
       currencyOptions: currencyOptions,
       onCurrencyChange: onCurrencyChange,
       isCurrencySelectionDisabled: isCurrencySelectionDisabled,
       tooltipContent: tooltipContent,
-      LinkComponent: LinkComponent
+      LinkComponent: LinkComponent,
+      categoryConfig: categoryConfig
     }), app && /*#__PURE__*/React__default.createElement(LuxityAppSideNav, {
       accordionIcon: accordionIcon,
       closeIcon: closeIcon,